update status active inactive

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

@@ -1,7 +1,216 @@
-import React, { memo } from 'react';
+import { useEffect, useState } from 'react';
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 
-const DetailPlantSection = memo(function DetailPlantSection(props) {
+const { Text } = Typography;
-    return null;
+
-});
+const DetailPlantSection = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        plant_section_id: '',
+        plantName: '',
+        status: true,
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.plantName) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Plant Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            plantName: FormData.plantName,
+            status: FormData.status,
+        };
+
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 500));
+
+            const response = {
+                statusCode: FormData.plant_section_id ? 200 : 201,
+                data: {
+                    plantName: FormData.plantName,
+                },
+            };
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Plant Section "${
+                        response.data?.plantName || FormData.plantName
+                    }" berhasil ${FormData.plant_section_id ? 'diubah' : 'ditambahkan'}.`,
+                });
+
+                props.setActionMode('list');
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
+        } catch (error) {
+            console.error('Save Plant Section Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
+            });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    const handleStatusChange = (value) => {
+        setFormData({
+            ...FormData,
+            status: value,
+        });
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.selectedData != null) {
+                setFormData(props.selectedData);
+            } else {
+                setFormData(defaultData);
+            }
+        } else {
+            // navigate('/signin'); // Uncomment if useNavigate is imported
+        }
+    }, [props.showModal]);
+
+    return (
+        <Modal
+            title={`${
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Plant Section`}
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={[
+                <>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#23A55A',
+                                    defaultHoverBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button onClick={handleCancel}>Batal</Button>
+                    </ConfigProvider>
+                    <ConfigProvider
+                        theme={{
+                            token: {
+                                colorBgContainer: '#209652',
+                            },
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                    defaultHoverColor: '#FFFFFF',
+                                    defaultHoverBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        {!props.readOnly && (
+                            <Button loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        )}
+                    </ConfigProvider>
+                </>,
+            ]}
+        >
+            {FormData && (
+                <div>
+                    <div hidden>
+                        <Text strong>Plant Section ID</Text>
+                        <Input
+                            name="plant_section_id"
+                            value={FormData.plant_section_id}
+                            onChange={handleInputChange}
+                            disabled
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Status</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginTop: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '8px' }}>
+                                <Switch
+                                    disabled={props.readOnly}
+                                    style={{
+                                        backgroundColor:
+                                            FormData.status === true ? '#23A55A' : '#bfbfbf',
+                                    }}
+                                    checked={FormData.status === true}
+                                    onChange={handleStatusChange}
+                                />
+                            </div>
+                            <div>
+                                <Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Plant Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="plantName"
+                            value={FormData.plantName}
+                            onChange={handleInputChange}
+                            placeholder="Enter Plant Name"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
 
 export default DetailPlantSection;

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

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