feat: add shift management functionality with CRUD operations and UI components

2025-10-13 02:25:16 +07:00
parent af6c6de301
commit 54290baaac
10 changed files with 864 additions and 1 deletions
--- a/src/pages/master/shift/component/ListShift.jsx
+++ b/src/pages/master/shift/component/ListShift.jsx
@@ -0,0 +1,181 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Input, ConfigProvider, Card, Tag } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    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';
+import { getAllShift, deleteShift } from '../../../../api/master-shift';
+
+const ListShift = (props) => {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
+        }
+    }, [navigate]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = (value) => {
+        setFormDataFilter({ search: value });
+        doFilter();
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter(defaultFilter);
+        doFilter();
+    };
+
+    const showPreviewModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (record) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
+            onConfirm: () => handleDelete(record.id),
+        });
+    };
+
+    const handleDelete = async (id) => {
+        try {
+            const response = await deleteShift(id);
+            if (response.statusCode === 200) {
+                NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus' });
+                doFilter();
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message });
+        }
+    };
+
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Nama Shift',
+            dataIndex: 'nama_shift',
+            key: 'nama_shift',
+        },
+        {
+            title: 'Jam Shift',
+            dataIndex: 'jam_shift',
+            key: 'jam_shift',
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            align: 'center',
+            render: (status) => (
+                <Tag color={status ? 'green' : 'red'}>
+                    {status ? 'Active' : 'Inactive'}
+                </Tag>
+            ),
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            align: 'center',
+            width: '15%',
+            render: (_, record) => (
+                <ConfigProvider theme={{ token: { colorBgContainer: 'transparent' } }}>
+                    <Button icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} />
+                    <Button icon={<EditOutlined />} onClick={() => showEditModal(record)} />
+                    <Button icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} danger />
+                </ConfigProvider>
+            ),
+        },
+    ];
+
+    return (
+        <Card>
+            <Row justify="space-between" align="middle" gutter={[16, 16]}>
+                <Col xs={24} sm={12} md={10} lg={8}>
+                    <Input.Search
+                        placeholder="Cari nama shift..."
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        onSearch={handleSearch}
+                        allowClear={{
+                            clearIcon: <span onClick={handleSearchClear}>x</span>,
+                        }}
+                        enterButton={<Button type="primary" icon={<SearchOutlined />} style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}>Cari</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={showAddModal}
+                            size="large"
+                        >
+                            Tambah Shift
+                        </Button>
+                    </ConfigProvider>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: 16 }}>
+                <Col span={24}>
+                    <TableList
+                        getData={getAllShift}
+                        queryParams={formDataFilter}
+                        columns={columns}
+                        triger={trigerFilter}
+                    />
+                </Col>
+            </Row>
+        </Card>
+    );
+};
+
+export default memo(ListShift);