fix: validation in DetailContact component

src/pages/contact/component/DetailContact.jsx

@@ -14,34 +14,22 @@ const DetailContact = memo(function DetailContact(props) {
         name: '',
         phone: '',
         is_active: true,
-        contact_type: 'operator',
+        contact_type: '',
     };
 
     const [formData, setFormData] = useState(defaultData);
 
     const handleInputChange = (e) => {
-        let name, value;
+        const { name, value } = e.target;
-
-        if (e && e.target) {
-            name = e.target.name;
-            value = e.target.value;
-        } else if (e && e.type === 'change') {
-            name = e.name || e.target?.name;
-            value = e.value !== undefined ? e.value : e.checked;
-        } else if (typeof e === 'string' || typeof e === 'number') {
-            // Handle Select onChange
-            value = e;
-            name = 'contact_type';
-        } else {
-            return;
-        }
 
         // Validasi untuk field phone - hanya angka yang diperbolehkan
         if (name === 'phone') {
-            value = value.replace(/[^0-9+\-\s()]/g, '');
+            const cleanedValue = value.replace(/[^0-9+\-\s()]/g, '');
-        }
+            setFormData((prev) => ({
-
+                ...prev,
-        if (name) {
+                [name]: cleanedValue,
+            }));
+        } else {
             setFormData((prev) => ({
                 ...prev,
                 [name]: value,
@@ -49,6 +37,14 @@ const DetailContact = memo(function DetailContact(props) {
         }
     };
 
+    
+    const handleContactTypeChange = (value) => {
+        setFormData((prev) => ({
+            ...prev,
+            contact_type: value,
+        }));
+    };
+
     const handleStatusToggle = (checked) => {
         setFormData({
             ...formData,
@@ -59,6 +55,21 @@ const DetailContact = memo(function DetailContact(props) {
     const handleSave = async () => {
         setConfirmLoading(true);
 
+        // Validation rules
+        const validationRules = [
+            { field: 'name', label: 'Contact Name', required: true },
+            { field: 'phone', label: 'Phone', required: true },
+            { field: 'contact_type', label: 'Contact Type', required: true },
+        ];
+
+        if (
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
+                setConfirmLoading(false);
+            })
+        )
+            return;
+
         // Custom validation untuk name - minimal 3 karakter
         if (formData.name && formData.name.length < 3) {
             NotifOk({
@@ -82,21 +93,6 @@ const DetailContact = memo(function DetailContact(props) {
             return;
         }
 
-        // Validation rules
-        const validationRules = [
-            { field: 'name', label: 'Contact Name', required: true },
-            { field: 'phone', label: 'Phone', required: true },
-            { field: 'contact_type', label: 'Contact Type', required: true },
-        ];
-
-        if (
-            validateRun(formData, validationRules, (errorMessages) => {
-                NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
-                setConfirmLoading(false);
-            })
-        )
-            return;
-
         try {
             const contactData = {
                 contact_name: formData.name,
@@ -107,7 +103,10 @@ const DetailContact = memo(function DetailContact(props) {
 
             let response;
             if (props.actionMode === 'edit') {
-                response = await updateContact(props.selectedData.contact_id || props.selectedData.id, contactData);
+                response = await updateContact(
+                    props.selectedData.contact_id || props.selectedData.id,
+                    contactData
+                );
             } else {
                 response = await createContact(contactData);
             }
@@ -145,15 +144,16 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: props.selectedData.contact_name || props.selectedData.name,
                     phone: props.selectedData.contact_phone || props.selectedData.phone,
-                    is_active: props.selectedData.is_active || props.selectedData.status === 'active',
+                    is_active:
-                    contact_type: props.selectedData.contact_type || props.contactType || 'operator',
+                        props.selectedData.is_active || props.selectedData.status === 'active',
+                    contact_type: props.selectedData.contact_type || props.contactType || '',
                 });
             } else if (props.actionMode === 'add') {
                 setFormData({
                     name: '',
                     phone: '',
                     is_active: true,
-                    contact_type: props.contactType === 'all' ? 'operator' : props.contactType || 'operator',
+                    contact_type: props.contactType === 'all' ? '' : props.contactType || '',
                 });
             }
         }
@@ -256,8 +256,8 @@ const DetailContact = memo(function DetailContact(props) {
                     <Text strong>Contact Type</Text>
                     <Text style={{ color: 'red' }}> *</Text>
                     <Select
-                        value={formData.contact_type}
+                        value={formData.contact_type || undefined}
-                        onChange={handleInputChange}
+                        onChange={handleContactTypeChange}
                         placeholder="Select Contact Type"
                         disabled={props.readOnly}
                         style={{ width: '100%' }}