src/pages/contact/component/DetailContact.jsx

@@ -13,6 +13,7 @@ const DetailContact = memo(function DetailContact(props) {
         id: '',
         name: '',
         phone: '',
+        email: '',
         is_active: true,
     };
 
@@ -34,6 +35,22 @@ const DetailContact = memo(function DetailContact(props) {
                 [name]: value,
             }));
         }
+
+        // if (name === 'email') {
+        //     const email = value.trim();
+        //     setFormData((prev) => ({
+        //         ...prev,
+        //         [name]: email,
+        //     }));
+
+        //     setErrors((prev) => ({
+        //         ...prev,
+        //         email:
+        //             email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+        //                 ? 'Format email tidak valid'
+        //                 : '',
+        //     }));
+        // }
     };
 
   
@@ -51,6 +68,7 @@ const DetailContact = memo(function DetailContact(props) {
         const validationRules = [
             { field: 'name', label: 'Contact Name', required: true },
             { field: 'phone', label: 'Phone', required: true },
+            { field: 'email', label: 'Email', required: false },
         ];
 
         if (
@@ -84,10 +102,23 @@ const DetailContact = memo(function DetailContact(props) {
             return;
         }
 
+        // Validasi Email
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (formData.email && !emailRegex.test(formData.email.trim())) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Format email tidak valid.',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
         try {
             const contactData = {
                 contact_name: formData.name,
                 contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
+                // contact_email: formData.email?.trim(),
                 is_active: formData.is_active,
             };
 
@@ -134,6 +165,7 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: props.selectedData.contact_name || props.selectedData.name,
                     phone: props.selectedData.contact_phone || props.selectedData.phone,
+                    // email: props.selectedData.contact_email || props.selectedData.email,
                     is_active:
                         props.selectedData.is_active || props.selectedData.status === 'active',
                 });
@@ -141,6 +173,7 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: '',
                     phone: '',
+                    // email: '',
                     is_active: true,
                 });
             }
@@ -249,6 +282,19 @@ const DetailContact = memo(function DetailContact(props) {
                         style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
                     />
                 </div>
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Email</Text>
+                    {/* <Text style={{ color: 'red' }}> *</Text> */}
+                    <Input
+                        name="email"
+                        value={formData.email}
+                        onChange={handleInputChange}
+                        placeholder="Enter Email Number"
+                        readOnly={props.readOnly}
+                        maxLength={15}
+                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
+                    />
+                </div>
                 {/* Contact Type */}
                 {/* <div style={{ marginBottom: 12 }}>
                     <Text strong>Contact Type</Text>