diff --git a/src/pages/master/plantSection/IndexPlantSection.jsx b/src/pages/master/plantSection/IndexPlantSection.jsx
index 8f8520c..c3fdd8d 100644
--- a/src/pages/master/plantSection/IndexPlantSection.jsx
+++ b/src/pages/master/plantSection/IndexPlantSection.jsx
@@ -1,183 +1,79 @@
-
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { Form, Typography } from 'antd';
 import ListPlantSection from './component/ListPlantSection';
 import DetailPlantSection from './component/DetailPlantSection';
-
-import { NotifConfirmDialog, NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
-import { getAllPlantSection, createPlantSection, updatePlantSection, deletePlantSection } from '../../../api/master-plant-section';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
 
 const { Text } = Typography;
 
 const IndexPlantSection = memo(function IndexPlantSection() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
 
+    const [activeTab, setActiveTab] = useState('plantSection');
     const [actionMode, setActionMode] = useState('list');
-    const [editingKey, setEditingKey] = useState('');
-    const [editingRecord, setEditingRecord] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [selectedData, setSelectedData] = useState(null);
     const [readOnly, setReadOnly] = useState(false);
-    const [refreshList, setRefreshList] = useState(false);
+    const [showModal, setShowmodal] = useState(false);
+
+    const setMode = (param) => {
+        setActionMode(param);
+        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);
+                break;
+        }
+    };
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
                 { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
-                { title: <Text strong style={{ fontSize: '14px' }}>Plant Sub Section</Text> }
+                { title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
             ]);
         } else {
             navigate('/signin');
         }
-    }, [navigate, setBreadcrumbItems]);
-
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
-
-    const handleCancel = () => {
-        setActionMode('list');
-        setEditingKey('');
-        setEditingRecord(null);
-        form.resetFields();
-    };
-
-    const handleOk = async () => {
-        if (readOnly) {
-            handleCancel();
-            return;
-        }
-
-        try {
-            const values = await form.validateFields();
-
-            if (editingKey && editingRecord) {
-                // Update existing plant section
-                const response = await updatePlantSection(editingRecord.sub_section_id, values);
-
-                if (response.statusCode === 200) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: response.message || 'Data Sub Section berhasil diupdate.',
-                    });
-                    setRefreshList(!refreshList);
-                    handleCancel();
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal mengupdate data Sub Section.',
-                    });
-                }
-            } else {
-                // Create new plant section
-                const response = await createPlantSection(values);
-
-                if (response.statusCode === 200 || response.statusCode === 201) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: response.message || 'Data Sub Section berhasil ditambahkan.',
-                    });
-                    setRefreshList(!refreshList);
-                    handleCancel();
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal menambahkan data Sub Section.',
-                    });
-                }
-            }
-        } catch (error) {
-            console.error('Validate Failed:', error);
-            NotifAlert({
-                icon: 'error',
-                title: 'Validasi Gagal',
-                message: 'Mohon lengkapi semua field yang wajib diisi.',
-            });
-        }
-    };
-
-    const handleEdit = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.sub_section_id || record.key);
-        setEditingRecord(record);
-        setActionMode('edit');
-    };
-
-    const handlePreview = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.sub_section_id || record.key);
-        setEditingRecord(record);
-        setActionMode('preview');
-    };
-
-    const handleDelete = (record) => {
-        NotifConfirmDialog({
-            icon: 'question',
-            title: 'Konfirmasi',
-            message: `Apakah anda yakin ingin menghapus sub section "${record.sub_section_name}"?`,
-            onConfirm: async () => {
-                try {
-                    const response = await deletePlantSection(record.sub_section_id);
-
-                    if (response.statusCode === 200) {
-                        NotifOk({
-                            icon: 'success',
-                            title: 'Berhasil',
-                            message: response.message || `Sub section "${record.sub_section_name}" berhasil dihapus.`,
-                        });
-                        setRefreshList(!refreshList);
-                    } else {
-                        NotifAlert({
-                            icon: 'error',
-                            title: 'Gagal',
-                            message: response.message || 'Gagal menghapus data Sub Section.',
-                        });
-                    }
-                } catch (error) {
-                    console.error('Delete error:', error);
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: 'Terjadi kesalahan saat menghapus data.',
-                    });
-                }
-            },
-        });
-    };
+    }, []);
 
     return (
         <React.Fragment>
             <ListPlantSection
-                setActionMode={setActionMode}
-                handleEdit={handleEdit}
-                handleDelete={handleDelete}
-                handlePreview={handlePreview}
-                getAllPlantSection={getAllPlantSection}
-                refreshList={refreshList}
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
             />
             <DetailPlantSection
-                visible={isModalVisible}
-                onCancel={handleCancel}
-                onOk={handleOk}
-                form={form}
-                editingKey={editingKey}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
                 readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
             />
         </React.Fragment>
     );
 });
 
-export default IndexPlantSection;
+export default IndexPlantSection;
\ No newline at end of file
diff --git a/src/pages/master/plantSection/component/DetailPlantSection.jsx b/src/pages/master/plantSection/component/DetailPlantSection.jsx
index b0ce132..ad73a82 100644
--- a/src/pages/master/plantSection/component/DetailPlantSection.jsx
+++ b/src/pages/master/plantSection/component/DetailPlantSection.jsx
@@ -1,75 +1,7 @@
-import React from 'react';
-import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
+import React, { memo } from 'react';
 
-const { Text } = Typography;
+const DetailPlantSection = memo(function DetailPlantSection(props) {
+    return null;
+});
 
-const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
-    const modalTitle = readOnly
-        ? 'Preview Sub Section'
-        : editingKey
-        ? 'Edit Sub Section'
-        : 'Tambah Sub Section';
-
-    return (
-        <Modal
-            title={modalTitle}
-            visible={visible}
-            onCancel={onCancel}
-            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={onCancel}>Batal</Button>
-                    </ConfigProvider>
-                    <ConfigProvider
-                        theme={{
-                            token: {
-                                colorBgContainer: '#209652',
-                            },
-                            components: {
-                                Button: {
-                                    defaultBg: '#23a55a',
-                                    defaultColor: '#FFFFFF',
-                                    defaultBorderColor: '#23a55a',
-                                    defaultHoverColor: '#FFFFFF',
-                                    defaultHoverBorderColor: '#23a55a',
-                                },
-                            },
-                        }}
-                    >
-                        {!readOnly && <Button onClick={onOk}>Simpan</Button>}
-                    </ConfigProvider>
-                </React.Fragment>,
-            ]}
-            destroyOnClose
-        >
-            <Form form={form} layout="vertical" name="form_in_modal">
-                <div style={{ marginBottom: 12 }}>
-                    <Text strong>Nama Sub Section</Text>
-                    <Text style={{ color: 'red' }}> *</Text>
-                    <Form.Item
-                        name="sub_section_name"
-                        rules={[{ required: true, message: 'Silakan masukkan nama sub section!' }]}
-                        style={{ marginBottom: 0 }}
-                    >
-                        <Input readOnly={readOnly} placeholder="Masukkan Nama Sub Section" />
-                    </Form.Item>
-                </div>
-            </Form>
-        </Modal>
-    );
-};
-
-export default DetailPlantSection;
+export default DetailPlantSection;
\ No newline at end of file
diff --git a/src/pages/master/plantSection/component/ListPlantSection.jsx b/src/pages/master/plantSection/component/ListPlantSection.jsx
index e8c14f8..33d34e1 100644
--- a/src/pages/master/plantSection/component/ListPlantSection.jsx
+++ b/src/pages/master/plantSection/component/ListPlantSection.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Tabs } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -7,156 +7,314 @@ import {
     SearchOutlined,
     EyeOutlined,
 } from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
 import TableList from '../../../../components/Global/TableList';
 
-const ListPlantSection = ({
-    setActionMode,
-    handleEdit,
-    handleDelete,
-    handlePreview,
-    getAllPlantSection,
-    refreshList,
-}) => {
-    const [searchValue, setSearchValue] = useState('');
-    const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
+// Dummy data for Plant Section
+const initialPlantSectionData = [
+    {
+        plant_section_id: 1,
+        plantName: 'Assembly',
+        sectionName: 'Line 1',
+        status: 'Active',
+    },
+    {
+        plant_section_id: 2,
+        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',
+    },
+];
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Plant Name',
+        dataIndex: 'plantName',
+        key: 'plantName',
+        width: '30%',
+    },
+    {
+        title: 'Section Name',
+        dataIndex: 'sectionName',
+        key: 'sectionName',
+        width: '30%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'status',
+        key: 'status',
+        width: '15%',
+        align: 'center',
+        render: (_, { status }) => (
+            <>
+                {status === 'Active' ? (
+                    <Tag color={'green'} key={'status'}>
+                        Active
+                    </Tag>
+                ) : (
+                    <Tag color={'red'} key={'status'}>
+                        Inactive
+                    </Tag>
+                )}
+            </>
+        ),
+    },
+    {
+        title: 'Aksi',
+        key: 'action',
+        align: 'center',
+        width: '20%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    icon={<EyeOutlined />}
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListPlantSection = memo(function ListPlantSection(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const [plantSectionData, setPlantSectionData] = useState(initialPlantSectionData);
+
+    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) ||
+                    plant.sectionName.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,
+                },
+            },
+        };
+    };
 
-    // Sync refreshList from parent to trigger table refresh
     useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode == 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode, plantSectionData]);
+
+    const doFilter = () => {
         setTrigerFilter((prev) => !prev);
-    }, [refreshList]);
-
-    const columns = [
-        {
-            title: 'No',
-            dataIndex: 'sub_section_id',
-            key: 'sub_section_id',
-            width: '8%',
-            render: (text, record, index) => index + 1,
-        },
-        {
-            title: 'Kode Sub Section',
-            dataIndex: 'sub_section_code',
-            key: 'sub_section_code',
-            width: '20%',
-        },
-        {
-            title: 'Nama Sub Section',
-            dataIndex: 'sub_section_name',
-            key: 'sub_section_name',
-            width: '35%',
-        },
-
-        {
-            title: 'Aksi',
-            key: 'action',
-            width: '10%',
-            render: (_, record) => (
-                <Space size="middle">
-                    <Button
-                        type="text"
-                        style={{ borderColor: '#1890ff' }}
-                        icon={<EyeOutlined style={{ color: '#1890ff' }} />}
-                        onClick={() => handlePreview(record)}
-                    />
-                    <Button
-                        type="text"
-                        style={{ borderColor: '#faad14' }}
-                        icon={<EditOutlined style={{ color: '#faad14' }} />}
-                        onClick={() => handleEdit(record)}
-                    />
-                    <Button
-                        type="text"
-                        danger
-                        style={{ borderColor: 'red' }}
-                        icon={<DeleteOutlined />}
-                        onClick={() => handleDelete(record)}
-                    />
-                </Space>
-            ),
-        },
-    ];
+    };
 
     const handleSearch = () => {
-        setFormDataFilter({ criteria: searchValue });
+        setFormDataFilter({ search: searchValue });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ criteria: '' });
+        setFormDataFilter({ search: '' });
         setTrigerFilter((prev) => !prev);
     };
 
-    return (
-        <Card>
-            <Row justify="space-between" align="middle" gutter={[8, 8]}>
-                <Col xs={24} sm={24} md={12} lg={12}>
-                    <Input.Search
-                        placeholder="Cari berdasarkan nama sub section..."
-                        value={searchValue}
-                        onChange={(e) => {
-                            const value = e.target.value;
-                            setSearchValue(value);
-                            if (value === '') {
-                                handleSearchClear();
-                            }
-                        }}
-                        onSearch={handleSearch}
-                        allowClear={{
-                            clearIcon: <span onClick={handleSearchClear}>✕</span>,
-                        }}
-                        enterButton={
-                            <Button
-                                type="primary"
-                                icon={<SearchOutlined />}
-                                style={{
-                                    backgroundColor: '#23A55A',
-                                    borderColor: '#23A55A',
-                                }}
-                            >
-                                Search
-                            </Button>
-                        }
-                        size="large"
-                    />
-                </Col>
-                <Col>
-                    <ConfigProvider
-                        theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
-                            components: {
-                                Button: {
-                                    defaultBg: 'white',
-                                    defaultColor: '#23A55A',
-                                    defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
-                                    defaultHoverBorderColor: '#23A55A',
-                                },
-                            },
-                        }}
-                    >
-                        <Button
-                            icon={<PlusOutlined />}
-                            onClick={() => setActionMode('add')}
-                            size="large"
-                        >
-                            Tambah Data
-                        </Button>
-                    </ConfigProvider>
-                </Col>
-            </Row>
-            <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
-                <TableList
-                    getData={getAllPlantSection}
-                    queryParams={formDataFilter}
-                    columns={columns}
-                    triger={trigerFilter}
-                    refreshList={refreshList}
-                />
-            </Col>
-        </Card>
-    );
-};
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
 
-export default ListPlantSection;
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus data "' + param.plantName + ' - ' + param.sectionName + '" ?',
+            onConfirm: () => handleDelete(param.plant_section_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (plant_section_id) => {
+        const plantToDelete = plantSectionData.find((plant) => plant.plant_section_id === plant_section_id);
+
+        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 || ''} - ${plantToDelete?.sectionName || ''}" berhasil dihapus.`,
+        });
+    };
+
+    return (
+        <React.Fragment>
+            <Card>
+                <Row>
+                    <Col xs={24}>
+                        <Row justify="space-between" align="middle" gutter={[8, 8]}>
+                            <Col xs={24} sm={24} md={12} lg={12}>
+                                <Input.Search
+                                    placeholder="Search plant section..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        if (value === '') {
+                                            setFormDataFilter({ search: '' });
+                                            setTrigerFilter((prev) => !prev);
+                                        }
+                                    }}
+                                    onSearch={handleSearch}
+                                    allowClear={{
+                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                                    }}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Plant Section
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'plantName'}
+                            subHeader={'sectionName'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllPlantSection}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListPlantSection;
\ No newline at end of file