feat: replace LogHistoryModal with LogHistoryCard and update DetailNotification for improved log history display

src/pages/notification/IndexNotification.jsx

@@ -1,7 +1,7 @@
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
-import { Typography } from 'antd';
+import { Typography, Row, Col } from 'antd';
 import ListNotification from './component/ListNotification';
 import DetailNotification from './component/DetailNotification';
 
@@ -10,10 +10,7 @@ const { Text } = Typography;
 const IndexNotification = memo(function IndexNotification() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-
-    const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
 
     useEffect(() => {
         const token = localStorage.getItem('token');
@@ -32,33 +29,34 @@ const IndexNotification = memo(function IndexNotification() {
         }
     }, [navigate, setBreadcrumbItems]);
 
-    useEffect(() => {
-        if (actionMode === 'preview') {
-            setIsModalVisible(true);
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
-
-    const handleCancel = () => {
-        setActionMode('list');
+    const handleCloseDetail = () => {
         setSelectedData(null);
     };
 
+    // This handler will be passed to ListNotification to update the selected item
+    const handleSelectNotification = (data) => {
+        setSelectedData(data);
+    };
+
     return (
-        <React.Fragment>
-            <ListNotification
-                actionMode={actionMode}
-                setActionMode={setActionMode}
-                selectedData={selectedData}
-                setSelectedData={setSelectedData}
-            />
-            <DetailNotification
-                visible={isModalVisible}
-                onCancel={handleCancel}
-                selectedData={selectedData}
-            />
-        </React.Fragment>
+        <Row gutter={16}>
+            <Col span={selectedData ? 16 : 24}>
+                <ListNotification
+                    // The setActionMode is likely not needed anymore,
+                    // but we pass the selection handler
+                    setActionMode={() => {}} // Keep prop for safety, but can be empty
+                    setSelectedData={handleSelectNotification}
+                />
+            </Col>
+            {selectedData && (
+                <Col span={8}>
+                    <DetailNotification
+                        selectedData={selectedData}
+                        onClose={handleCloseDetail}
+                    />
+                </Col>
+            )}
+        </Row>
     );
 });