feat: update shift management with jadwal shift integration and improved error handling

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -1,60 +1,66 @@
-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';
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Input, ConfigProvider, Card, Table, Space } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    EyeOutlined,
+} from '@ant-design/icons';
+import { NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
 
 const ListJadwalShift = (props) => {
-    const [data, setData] = useState([]);
-    const [loading, setLoading] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
 
-    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);
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
         }
+    }, [navigate]);
+
+    const handleSearch = (value) => {
+        console.log('Search value:', value);
     };
 
-    const handleAdd = () => {
-        props.setSelectedData(null);
-        props.setActionMode('add');
+    const handleSearchClear = () => {
+        setSearchValue('');
     };
 
-    const handleEdit = (record) => {
+    const showPreviewModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (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 });
-        }
+    const showAddModal = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
     };
 
-    useEffect(() => {
-        if(props.actionMode === 'list') {
-            fetchData();
-        }
-    }, [props.actionMode]);
+    const showDeleteDialog = (record) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin ingin menghapus data jadwal shift untuk "${record.nama_employee}"?`,
+            onConfirm: () => props.onDelete(record.id),
+        });
+    };
 
     const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
         {
             title: 'Nama Shift',
             dataIndex: 'nama_shift',
@@ -83,35 +89,97 @@ const ListJadwalShift = (props) => {
         {
             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>
+            align: 'center',
+            width: '15%',
+            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 filteredData = props.jadwalShiftData.filter(item =>
+        item.nama_employee.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.username.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.nama_shift.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
     return (
-        <div>
-            <Button type="primary" onClick={handleAdd} style={{ marginBottom: 16 }}>
-                Tambah Jadwal Shift
-            </Button>
-            <Table
-                columns={columns}
-                dataSource={data}
-                loading={loading}
-                rowKey="id"
-            />
-        </div>
+        <Card>
+            <Row justify="space-between" align="middle" gutter={[16, 16]}>
+                <Col xs={24} sm={12} md={10} lg={8}>
+                    <Input.Search
+                        placeholder="Cari jadwal 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 Jadwal Shift
+                        </Button>
+                    </ConfigProvider>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: 16 }}>
+                <Col span={24}>
+                    <Table
+                        columns={columns}
+                        dataSource={filteredData}
+                        loading={props.loading}
+                        rowKey="id"
+                    />
+                </Col>
+            </Row>
+        </Card>
     );
 };