feat: implement shift management with CRUD operations and local storage integration

src/pages/master/shift/component/ListShift.jsx

@@ -1,21 +1,17 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Col, Row, Input, ConfigProvider, Card, Tag } from 'antd';
+import { Button, Col, Row, Input, ConfigProvider, Card, Tag, Table, Space } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
     DeleteOutlined,
     SearchOutlined,
     EyeOutlined,
+    SyncOutlined,
 } from '@ant-design/icons';
-import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { 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();
 
@@ -26,19 +22,14 @@ const ListShift = (props) => {
         }
     }, [navigate]);
 
-    const doFilter = () => {
-        setTrigerFilter((prev) => !prev);
-    };
-
     const handleSearch = (value) => {
-        setFormDataFilter({ search: value });
-        doFilter();
+        // This will be handled by the parent component if server-side search is needed
+        console.log('Search value:', value);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter(defaultFilter);
-        doFilter();
+        // This will be handled by the parent component if server-side search is needed
     };
 
     const showPreviewModal = (record) => {
@@ -61,24 +52,10 @@ const ListShift = (props) => {
             icon: 'question',
             title: 'Konfirmasi',
             message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
-            onConfirm: () => handleDelete(record.id),
+            onConfirm: () => props.onDelete(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',
@@ -114,15 +91,40 @@ const ListShift = (props) => {
             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>
+                <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.shiftData.filter(item => 
+        item.nama_shift.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
     return (
         <Card>
             <Row justify="space-between" align="middle" gutter={[16, 16]}>
@@ -166,11 +168,11 @@ const ListShift = (props) => {
             </Row>
             <Row style={{ marginTop: 16 }}>
                 <Col span={24}>
-                    <TableList
-                        getData={getAllShift}
-                        queryParams={formDataFilter}
-                        columns={columns}
-                        triger={trigerFilter}
+                    <Table 
+                        columns={columns} 
+                        dataSource={filteredData} 
+                        loading={props.loading} 
+                        rowKey="id"
                     />
                 </Col>
             </Row>