feat: enhance jadwal shift management with improved component structure and dummy data handling

src/pages/jadwalShift/IndexJadwalShift.jsx

@@ -1,62 +1,74 @@
-import { useState, useEffect } from 'react';
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import ListJadwalShift from './component/ListJadwalShift';
 import DetailJadwalShift from './component/DetailJadwalShift';
-import { getAllJadwalShift, deleteJadwalShift } from '../../api/jadwal-shift';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexJadwalShift = memo(function IndexJadwalShift() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
 
-const IndexJadwalShift = () => {
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [jadwalShiftData, setJadwalShiftData] = useState([]);
-    const [loading, setLoading] = useState(false);
+    const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
 
-    const fetchData = async () => {
-        setLoading(true);
-        try {
-            const response = await getAllJadwalShift(new URLSearchParams());
-            if (response.data) {
-                setJadwalShiftData(response.data.data);
-            }
-        } catch (error) {
-            console.error("Error fetching jadwal shift data:", error);
+    const setMode = (param) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowModal(false);
+                break;
         }
-        setLoading(false);
+        setActionMode(param);
     };
 
     useEffect(() => {
-        fetchData();
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Jadwal</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Jadwal Shift</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
     }, []);
 
-    const handleDelete = async (id) => {
-        try {
-            await deleteJadwalShift(id);
-            fetchData();
-        } catch (error) {
-            console.error("Error deleting jadwal shift:", error);
-        }
-    };
-
     return (
-        <>
-            {actionMode === 'list' && (
-                <ListJadwalShift
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
-                    jadwalShiftData={jadwalShiftData}
-                    loading={loading}
-                    onDelete={handleDelete}
-                />
-            )}
-            {(actionMode === 'add' || actionMode === 'edit') && (
-                <DetailJadwalShift
-                    actionMode={actionMode}
-                    selectedData={selectedData}
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
-                    fetchData={fetchData}
-                />
-            )}
-        </>
+        <React.Fragment>
+            <ListJadwalShift
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailJadwalShift
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
     );
-};
+});
 
-export default IndexJadwalShift;
+export default IndexJadwalShift;