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/jadwalShift/component/ListJadwalShift.jsx
+++ b/src/pages/jadwalShift/component/ListJadwalShift.jsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { Button, Table, Space, Popconfirm } from 'antd';
+import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+
+const ListJadwalShift = (props) => {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            const response = await getAllJadwalShift(new URLSearchParams());
+            if (response.data && response.data.data) {
+                setData(response.data.data);
+            } else {
+                setData([]);
+            }
+        } catch (error) {
+            console.error("Failed to fetch shift schedule data:", error);
+            setData([]); // Set data to empty array on error
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleAdd = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+    };
+
+    const handleEdit = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('edit');
+    };
+
+    const handleDelete = async (id) => {
+        try {
+            const response = await deleteJadwalShift(id);
+            if (response.statusCode === 200) {
+                NotifOk({ icon: 'success', title: 'Berhasil', message: 'Data jadwal shift berhasil dihapus' });
+                fetchData();
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message });
+        }
+    };
+
+    useEffect(() => {
+        if(props.actionMode === 'list') {
+            fetchData();
+        }
+    }, [props.actionMode]);
+
+    const columns = [
+        {
+            title: 'Nama Shift',
+            dataIndex: 'nama_shift',
+            key: 'nama_shift',
+        },
+        {
+            title: 'Jam Shift',
+            dataIndex: 'jam_shift',
+            key: 'jam_shift',
+        },
+        {
+            title: 'Username',
+            dataIndex: 'username',
+            key: 'username',
+        },
+        {
+            title: 'Nama Employee',
+            dataIndex: 'nama_employee',
+            key: 'nama_employee',
+        },
+        {
+            title: 'WhatsApp',
+            dataIndex: 'whatsapp',
+            key: 'whatsapp',
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button type="primary" onClick={() => handleEdit(record)}>Edit</Button>
+                    <Popconfirm
+                        title="Hapus data jadwal shift?"
+                        description="Apakah anda yakin untuk menghapus data jadwal shift ini?"
+                        onConfirm={() => handleDelete(record.id)}
+                        okText="Yes"
+                        cancelText="No"
+                    >
+                        <Button danger>Delete</Button>
+                    </Popconfirm>
+                </Space>
+            ),
+        },
+    ];
+
+    return (
+        <div>
+            <Button type="primary" onClick={handleAdd} style={{ marginBottom: 16 }}>
+                Tambah Jadwal Shift
+            </Button>
+            <Table
+                columns={columns}
+                dataSource={data}
+                loading={loading}
+                rowKey="id"
+            />
+        </div>
+    );
+};
+
+export default ListJadwalShift;