Add custom validation for contact name and display type badge in contact list

This commit is contained in:
2025-11-17 12:29:42 +07:00
parent da9cf0d554
commit 8de195d961
2 changed files with 28 additions and 1 deletions

View File

@@ -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, ''))) {

View File

@@ -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