Add custom validation for contact name and display type badge in contact list
This commit is contained in:
@@ -59,6 +59,17 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
// Custom validation untuk name - minimal 3 karakter
|
||||
if (formData.name && formData.name.length < 3) {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: 'Nama contact minimal 3 karakter',
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Custom validation untuk phone - Indonesian phone format
|
||||
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
|
||||
if (formData.phone && !phoneRegex.test(formData.phone.replace(/[\s\-\(\)]/g, ''))) {
|
||||
|
||||
@@ -43,6 +43,22 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Type Badge - Top Left */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
|
||||
<Tag
|
||||
color={
|
||||
contact.contact_type === 'operator'
|
||||
? 'blue'
|
||||
: contact.contact_type === 'gudang'
|
||||
? 'orange'
|
||||
: 'default'
|
||||
}
|
||||
style={{ fontSize: '11px' }}
|
||||
>
|
||||
{contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* Status Badge - Top Right */}
|
||||
<div style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}>
|
||||
{contact.status === 'active' ? (
|
||||
@@ -63,7 +79,7 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
flex: 1,
|
||||
paddingTop: '4px',
|
||||
paddingTop: '28px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user