add plant section management with list and detail views

2025-10-09 10:50:27 +07:00
parent 8ef1bdb142
commit e13539618b
5 changed files with 466 additions and 0 deletions
--- a/src/pages/master/plantSection/component/ListPlantSection.jsx
+++ b/src/pages/master/plantSection/component/ListPlantSection.jsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
+import TableList from '../../../../components/Global/TableList';
+
+const ListPlantSection = ({ 
+    setActionMode, 
+    handleEdit, 
+    handleDelete,
+    handlePreview,
+    getAllPlantSection
+}) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [formDataFilter, setFormDataFilter] = useState({ search: '' });
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const columns = [
+        {
+            title: 'No',
+            dataIndex: 'key',
+            key: 'key',
+            width: '5%',
+            render: (text, record, index) => index + 1,
+        },
+        {
+            title: 'Kode Plant',
+            dataIndex: 'kode_plant',
+            key: 'kode_plant',
+        },
+        {
+            title: 'Nama Plant',
+            dataIndex: 'nama_plant',
+            key: 'nama_plant',
+        },
+        {
+            title: 'Lokasi Plant',
+            dataIndex: 'lokasi_plant',
+            key: 'lokasi_plant',
+        },
+        {
+            title: 'Deskripsi',
+            dataIndex: 'deskripsi',
+            key: 'deskripsi',
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            render: (_, record) => (
+                <Space size="middle">
+                    <Button type="text" icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
+                    <Button type="text" icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
+                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
+                </Space>
+            ),
+        },
+    ];
+
+    const handleSearch = () => {
+        setFormDataFilter({ search: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        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 kode, nama, atau lokasi..."
+                        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}
+                />
+            </Col>
+        </Card>
+    );
+};
+
+export default ListPlantSection;