src/pages/master/plantSection/component/DetailPlantSection.jsx

@@ -10,6 +10,7 @@ const DetailPlantSection = (props) => {
     const defaultData = {
         plant_section_id: '',
         plantName: '',
+        sectionName: '',
         status: true,
     };
 
@@ -33,8 +34,19 @@ const DetailPlantSection = (props) => {
             return;
         }
 
+        if (!FormData.sectionName) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Section Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
         const payload = {
             plantName: FormData.plantName,
+            sectionName: FormData.sectionName,
             status: FormData.status,
         };
 
@@ -45,6 +57,7 @@ const DetailPlantSection = (props) => {
                 statusCode: FormData.plant_section_id ? 200 : 201,
                 data: {
                     plantName: FormData.plantName,
+                    sectionName: FormData.sectionName,
                 },
             };
 
@@ -54,7 +67,7 @@ const DetailPlantSection = (props) => {
                     title: 'Berhasil',
                     message: `Data Plant Section "${
                         response.data?.plantName || FormData.plantName
-                    }" berhasil ${FormData.plant_section_id ? 'diubah' : 'ditambahkan'}.`,
+                    } - ${response.data?.sectionName || FormData.sectionName}" berhasil ${FormData.plant_section_id ? 'diubah' : 'ditambahkan'}.`,
                 });
 
                 props.setActionMode('list');
@@ -207,10 +220,21 @@ const DetailPlantSection = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Section Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="sectionName"
+                            value={FormData.sectionName}
+                            onChange={handleInputChange}
+                            placeholder="Enter Section Name"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>
     );
 };
 
-export default DetailPlantSection;
+export default DetailPlantSection;

src/pages/master/plantSection/component/ListPlantSection.jsx

@@ -16,16 +16,25 @@ const initialPlantSectionData = [
     {
         plant_section_id: 1,
         plantName: 'Assembly',
+        sectionName: 'Line 1',
         status: 'Active',
     },
     {
         plant_section_id: 2,
-        plantName: 'Painting',
+        plantName: 'Assembly',
+        sectionName: 'Line 2',
         status: 'Active',
     },
     {
         plant_section_id: 3,
+        plantName: 'Painting',
+        sectionName: 'Booth A',
+        status: 'Active',
+    },
+    {
+        plant_section_id: 4,
         plantName: 'Warehouse',
+        sectionName: 'Receiving',
         status: 'Inactive',
     },
 ];
@@ -42,7 +51,13 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         title: 'Plant Name',
         dataIndex: 'plantName',
         key: 'plantName',
-        width: '65%',
+        width: '30%',
+    },
+    {
+        title: 'Section Name',
+        dataIndex: 'sectionName',
+        key: 'sectionName',
+        width: '30%',
     },
     {
         title: 'Status',
@@ -122,7 +137,8 @@ const ListPlantSection = memo(function ListPlantSection(props) {
             const searchLower = searchParam.toLowerCase();
             filteredPlantSections = plantSectionData.filter(
                 (plant) =>
-                    plant.plantName.toLowerCase().includes(searchLower)
+                    plant.plantName.toLowerCase().includes(searchLower) ||
+                    plant.sectionName.toLowerCase().includes(searchLower)
             );
         }
 
@@ -194,7 +210,7 @@ const ListPlantSection = memo(function ListPlantSection(props) {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi',
-            message: 'Apakah anda yakin hapus data "' + param.plantName + '" ?',
+            message: 'Apakah anda yakin hapus data "' + param.plantName + ' - ' + param.sectionName + '" ?',
             onConfirm: () => handleDelete(param.plant_section_id),
             onCancel: () => props.setSelectedData(null),
         });
@@ -211,7 +227,7 @@ const ListPlantSection = memo(function ListPlantSection(props) {
         NotifAlert({
             icon: 'success',
             title: 'Berhasil',
-            message: `Data Plant Section "${plantToDelete?.plantName || ''}" berhasil dihapus.`,
+            message: `Data Plant Section "${plantToDelete?.plantName || ''} - ${plantToDelete?.sectionName || ''}" berhasil dihapus.`,
         });
     };
 
@@ -285,6 +301,7 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                             mobile
                             cardColor={'#42AAFF'}
                             header={'plantName'}
+                            subHeader={'sectionName'}
                             showPreviewModal={showPreviewModal}
                             showEditModal={showEditModal}
                             showDeleteDialog={showDeleteDialog}
@@ -300,4 +317,4 @@ const ListPlantSection = memo(function ListPlantSection(props) {
     );
 });
 
-export default ListPlantSection;
+export default ListPlantSection;