feat: refactor plant section components to use sub-section terminology and improve modal handling

src/pages/master/plantSection/IndexPlantSection.jsx

@@ -11,34 +11,31 @@ const IndexPlantSection = memo(function IndexPlantSection() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
 
-    const [activeTab, setActiveTab] = useState('plantSection');
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
     const [readOnly, setReadOnly] = useState(false);
-    const [showModal, setShowmodal] = useState(false);
+    const [showModal, setShowModal] = useState(false);
 
     const setMode = (param) => {
-        setActionMode(param);
+        setShowModal(true);
         switch (param) {
             case 'add':
                 setReadOnly(false);
-                setShowmodal(true);
                 break;
 
             case 'edit':
                 setReadOnly(false);
-                setShowmodal(true);
                 break;
 
             case 'preview':
                 setReadOnly(true);
-                setShowmodal(true);
                 break;
 
             default:
-                setShowmodal(false);
+                setShowModal(false);
                 break;
         }
+        setActionMode(param);
     };
 
     useEffect(() => {
@@ -61,8 +58,6 @@ const IndexPlantSection = memo(function IndexPlantSection() {
                 selectedData={selectedData}
                 setSelectedData={setSelectedData}
                 readOnly={readOnly}
-                activeTab={activeTab}
-                setActiveTab={setActiveTab}
             />
             <DetailPlantSection
                 setActionMode={setMode}

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

@@ -1,6 +1,15 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
+import {
+    Modal,
+    Input,
+    Typography,
+    Switch,
+    Button,
+    ConfigProvider,
+    Divider,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
 
 const { Text } = Typography;
 
@@ -8,75 +17,14 @@ const DetailPlantSection = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
     const defaultData = {
-        plant_section_id: '',
+        sub_section_id: '',
-        plantName: '',
+        sub_section_code: '',
-        status: true,
+        sub_section_name: '',
+        is_active: 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({
@@ -85,25 +33,84 @@ const DetailPlantSection = (props) => {
         });
     };
 
-    const handleStatusChange = (value) => {
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.sub_section_name) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Plant Sub Section Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        try {
+            let response;
+            let payload;
+
+            if (props.actionMode === 'edit') {
+                payload = { 
+                    is_active: FormData.is_active,
+                    sub_section_name: FormData.sub_section_name
+                };
+                response = await updatePlantSection(FormData.sub_section_id, payload);
+            } else {
+                // Backend generates the code, so we only send the name and status
+                payload = {
+                    sub_section_name: FormData.sub_section_name,
+                    is_active: FormData.is_active,
+                }
+                response = await createPlantSection(payload);
+            }
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Plant Section berhasil ${action}.`,
+                });
+                props.setActionMode('list');
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server.',
+            });
+        } finally {
+            setConfirmLoading(false);
+        }
+    };
+    
+    const handleStatusToggle = (checked) => {
         setFormData({
             ...FormData,
-            status: value,
+            is_active: checked,
         });
     };
 
+
     useEffect(() => {
-        const token = localStorage.getItem('token');
+        if (props.selectedData) {
-        if (token) {
-            if (props.selectedData != null) {
             setFormData(props.selectedData);
         } else {
             setFormData(defaultData);
         }
-        } else {
+    }, [props.showModal, props.selectedData]);
-            // navigate('/signin'); // Uncomment if useNavigate is imported
-        }
-    }, [props.showModal]);
 
     return (
         <Modal
@@ -117,37 +124,27 @@ const DetailPlantSection = (props) => {
             open={props.showModal}
             onCancel={handleCancel}
             footer={[
-                <>
+                <React.Fragment key="modal-footer">
                     <ConfigProvider
                         theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
                             components: {
                                 Button: {
                                     defaultBg: 'white',
                                     defaultColor: '#23A55A',
                                     defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
-                                    defaultHoverBorderColor: '#23A55A',
                                 },
                             },
                         }}
                     >
-                        <Button onClick={handleCancel}>
+                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
-                            {props.actionMode === 'preview' ? 'Tutup' : 'Batal'}
-                        </Button>
                     </ConfigProvider>
                     <ConfigProvider
                         theme={{
-                            token: {
-                                colorBgContainer: '#209652',
-                            },
                             components: {
                                 Button: {
                                     defaultBg: '#23a55a',
                                     defaultColor: '#FFFFFF',
                                     defaultBorderColor: '#23a55a',
-                                    defaultHoverColor: '#FFFFFF',
-                                    defaultHoverBorderColor: '#23a55a',
                                 },
                             },
                         }}
@@ -158,54 +155,54 @@ const DetailPlantSection = (props) => {
                             </Button>
                         )}
                     </ConfigProvider>
-                </>,
+                </React.Fragment>,
             ]}
         >
             {FormData && (
                 <div>
-                    <div hidden>
+                    <div>
-                        <Text strong>Plant Section ID</Text>
+                        <div>
-                        <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>
-                        <div
+                        <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginTop: '8px',
-                            }}
-                        >
                             <div style={{ marginRight: '8px' }}>
                                 <Switch
                                     disabled={props.readOnly}
                                     style={{
-                                        backgroundColor:
+                                        backgroundColor: FormData.is_active ? '#23A55A' : '#bfbfbf',
-                                            FormData.status === true ? '#23A55A' : '#bfbfbf',
                                     }}
-                                    checked={FormData.status === true}
+                                    checked={FormData.is_active}
-                                    onChange={handleStatusChange}
+                                    onChange={handleStatusToggle}
                                 />
                             </div>
                             <div>
-                                <Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
+                                <Text>
+                                    {FormData.is_active ? 'Active' : 'Inactive'}
+                                </Text>
                             </div>
                         </div>
                     </div>
+                    <Divider style={{ margin: '12px 0' }} />
+
+                    {props.actionMode !== 'add' && (
                         <div style={{ marginBottom: 12 }}>
-                        <Text strong>Plant Name</Text>
+                            <Text strong>Plant Section Code</Text>
+                            <Input
+                                name="sub_section_code"
+                                value={FormData.sub_section_code}
+                                disabled
+                            />
+                        </div>
+                    )}
+
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Plant Sub Section Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
-                            name="plantName"
+                            name="sub_section_name"
-                            value={FormData.plantName}
+                            value={FormData.sub_section_name}
                             onChange={handleInputChange}
-                            placeholder="Enter Plant Name"
+                            placeholder="Enter Plant Sub Section Name"
                             readOnly={props.readOnly}
                         />
                     </div>

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

@@ -1,104 +1,67 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Tabs } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
     DeleteOutlined,
-    SearchOutlined,
     EyeOutlined,
+    SearchOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
+import { deletePlantSection, getAllPlantSection } from '../../../../api/master-plant-section';
 import TableList from '../../../../components/Global/TableList';
 
-// Dummy data for Plant Section
-const initialPlantSectionData = [
-    {
-        plant_section_id: 1,
-        plantName: 'Assembly',
-        status: 'Active',
-    },
-    {
-        plant_section_id: 2,
-        plantName: 'Assembly',
-        status: 'Active',
-    },
-    {
-        plant_section_id: 3,
-        plantName: 'Painting',
-        status: 'Active',
-    },
-    {
-        plant_section_id: 4,
-        plantName: 'Warehouse',
-        status: 'Inactive',
-    },
-];
-
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
-        title: 'No',
+        title: 'Section Code',
-        key: 'no',
+        dataIndex: 'sub_section_code',
-        width: '5%',
+        key: 'sub_section_code',
-        align: 'center',
+        width: '20%',
-        render: (_, __, index) => index + 1,
     },
     {
-        title: 'Plant Name',
+        title: 'Plant Sub Section Name',
-        dataIndex: 'plantName',
+        dataIndex: 'sub_section_name',
-        key: 'plantName',
+        key: 'sub_section_name',
-        width: '60%',
+        width: '40%',
     },
     {
         title: 'Status',
-        dataIndex: 'status',
+        dataIndex: 'is_active',
-        key: 'status',
+        key: 'is_active',
         width: '15%',
         align: 'center',
-        render: (_, { status }) => (
+        render: (status) => (
-            <>
+            <Tag color={status ? 'green' : 'red'}>
-                {status === 'Active' ? (
+                {status ? 'Active' : 'Inactive'}
-                    <Tag color={'green'} key={'status'}>
-                        Active
             </Tag>
-                ) : (
-                    <Tag color={'red'} key={'status'}>
-                        Inactive
-                    </Tag>
-                )}
-            </>
         ),
     },
     {
         title: 'Aksi',
-        key: 'action',
+        key: 'aksi',
         align: 'center',
-        width: '20%',
+        width: '15%',
         render: (_, record) => (
             <Space>
                 <Button
-                    icon={<EyeOutlined />}
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
                     onClick={() => showPreviewModal(record)}
-                    style={{
-                        color: '#1890ff',
-                        borderColor: '#1890ff',
-                    }}
                 />
                 <Button
-                    icon={<EditOutlined />}
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
                     onClick={() => showEditModal(record)}
-                    style={{
-                        color: '#faad14',
-                        borderColor: '#faad14',
-                    }}
                 />
                 <Button
+                    type="text"
                     danger
+                    style={{ borderColor: 'red' }}
                     icon={<DeleteOutlined />}
                     onClick={() => showDeleteDialog(record)}
-                    style={{
-                        borderColor: '#ff4d4f',
-                    }}
                 />
             </Space>
         ),
@@ -107,76 +70,35 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 
 const ListPlantSection = memo(function ListPlantSection(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
-    const [plantSectionData, setPlantSectionData] = useState(initialPlantSectionData);
+    const defaultFilter = { criteria: '' };
-
-    const defaultFilter = { search: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
-
     const navigate = useNavigate();
 
-    const getAllPlantSection = async (params) => {
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        const searchParam = params.get('search') || '';
-        const page = parseInt(params.get('page')) || 1;
-        const limit = parseInt(params.get('limit')) || 10;
-
-        let filteredPlantSections = plantSectionData;
-        if (searchParam) {
-            const searchLower = searchParam.toLowerCase();
-            filteredPlantSections = plantSectionData.filter(
-                (plant) =>
-                    plant.plantName.toLowerCase().includes(searchLower)
-            );
-        }
-
-        const totalData = filteredPlantSections.length;
-        const totalPages = Math.ceil(totalData / limit);
-        const startIndex = (page - 1) * limit;
-        const endIndex = startIndex + limit;
-        const paginatedData = filteredPlantSections.slice(startIndex, endIndex);
-
-        return {
-            status: 200,
-            statusCode: 200,
-            data: {
-                data: paginatedData,
-                total: totalData,
-                paging: {
-                    page: page,
-                    limit: limit,
-                    total: totalData,
-                    page_total: totalPages,
-                },
-            },
-        };
-    };
-
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode == 'list') {
+            if (props.actionMode === 'list') {
                 setFormDataFilter(defaultFilter);
                 doFilter();
             }
         } else {
             navigate('/signin');
         }
-    }, [props.actionMode, plantSectionData]);
+    }, [props.actionMode]);
 
     const doFilter = () => {
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchValue });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
@@ -198,26 +120,29 @@ const ListPlantSection = memo(function ListPlantSection(props) {
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
-            title: 'Konfirmasi',
+            title: 'Konfirmasi Hapus',
-            message: 'Apakah anda yakin hapus data "' + param.plantName + '" ?',
+            message: 'Plant Section "' + param.sub_section_name + '" akan dihapus?',
-            onConfirm: () => handleDelete(param.plant_section_id),
+            onConfirm: () => handleDelete(param.sub_section_id),
             onCancel: () => props.setSelectedData(null),
         });
     };
 
-    const handleDelete = async (plant_section_id) => {
+    const handleDelete = async (sub_section_id) => {
-        const plantToDelete = plantSectionData.find((plant) => plant.plant_section_id === plant_section_id);
+        const response = await deletePlantSection(sub_section_id);
-
+        if (response.statusCode === 200) {
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        const updatedPlants = plantSectionData.filter((plant) => plant.plant_section_id !== plant_section_id);
-        setPlantSectionData(updatedPlants);
-
             NotifAlert({
                 icon: 'success',
                 title: 'Berhasil',
-            message: `Data Plant Section "${plantToDelete?.plantName || ''}" berhasil dihapus.`,
+                message: 'Data Plant Section berhasil dihapus.',
             });
+            doFilter();
+        } else {
+            NotifAlert({
+                icon: 'error',
+                title: 'Gagal',
+                message: response?.message || 'Gagal Menghapus Data Plant Section',
+            });
+        }
     };
 
     return (
@@ -228,14 +153,13 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                         <Row justify="space-between" align="middle" gutter={[8, 8]}>
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
-                                    placeholder="Search plant section..."
+                                    placeholder="Search section by name or code..."
                                     value={searchValue}
                                     onChange={(e) => {
                                         const value = e.target.value;
                                         setSearchValue(value);
                                         if (value === '') {
-                                            setFormDataFilter({ search: '' });
+                                            handleSearchClear();
-                                            setTrigerFilter((prev) => !prev);
                                         }
                                     }}
                                     onSearch={handleSearch}
@@ -261,14 +185,11 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                                 <Space wrap size="small">
                                     <ConfigProvider
                                         theme={{
-                                            token: { colorBgContainer: '#E9F6EF' },
                                             components: {
                                                 Button: {
                                                     defaultBg: 'white',
                                                     defaultColor: '#23A55A',
                                                     defaultBorderColor: '#23A55A',
-                                                    defaultHoverColor: '#23A55A',
-                                                    defaultHoverBorderColor: '#23A55A',
                                                 },
                                             },
                                         }}
@@ -278,19 +199,18 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                                             onClick={() => showAddModal()}
                                             size="large"
                                         >
-                                            Tambah Plant Section
+                                            Tambah Data
                                         </Button>
                                     </ConfigProvider>
                                 </Space>
                             </Col>
                         </Row>
                     </Col>
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                    <Col xs={24} style={{ marginTop: '16px' }}>
                         <TableList
                             mobile
                             cardColor={'#42AAFF'}
-                            header={'plantName'}
+                            header={'sub_section_name'}
-                            subHeader={null}
                             showPreviewModal={showPreviewModal}
                             showEditModal={showEditModal}
                             showDeleteDialog={showDeleteDialog}