fixing card list master status

src/pages/master/status/IndexStatus.jsx

@@ -13,45 +13,73 @@ const IndexStatus = memo(function IndexStatus() {
 
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
     const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+
+    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;
+        }
+        setActionMode(param);
+    };
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
-                { title: <Text strong>• Master</Text> },
-                { title: <Text strong>Status</Text> }
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • Master
+                        </Text>
+                    ),
+                },
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            Status
+                        </Text>
+                    ),
+                },
             ]);
         } else {
             navigate('/signin');
         }
-    }, [navigate, setBreadcrumbItems]);
-
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
+    }, []);
 
     return (
         <React.Fragment>
-            {actionMode === 'list' &&
+            {actionMode === 'list' && (
                 <ListStatus
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
                     actionMode={actionMode}
+                    setActionMode={setMode}
+                    selectedData={selectedData}
+                    setSelectedData={setSelectedData}
+                    readOnly={readOnly}
                 />
-            }
+            )}
             <DetailStatus
-                showModal={isModalVisible}
-                setActionMode={setActionMode}
+                setActionMode={setMode}
                 selectedData={selectedData}
                 setSelectedData={setSelectedData}
                 readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
             />
         </React.Fragment>
     );