diff --git a/src/api/notification.jsx b/src/api/notification.jsx
new file mode 100644
index 0000000..9aab0c5
--- /dev/null
+++ b/src/api/notification.jsx
@@ -0,0 +1,9 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+export const getAllNotification = async () => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: 'notification',
+    });
+    return response.data;
+};
diff --git a/src/pages/master/brandDevice/EditBrandDevice.jsx b/src/pages/master/brandDevice/EditBrandDevice.jsx
index 8366cef..67fda5e 100644
--- a/src/pages/master/brandDevice/EditBrandDevice.jsx
+++ b/src/pages/master/brandDevice/EditBrandDevice.jsx
@@ -1,6 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal, ConfigProvider } from 'antd';
+import {
+    Divider,
+    Typography,
+    Button,
+    Steps,
+    Form,
+    Row,
+    Col,
+    Card,
+    Spin,
+    Modal,
+    ConfigProvider,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { getBrandById, updateBrand } from '../../../api/master-brand';
@@ -48,12 +60,10 @@ const EditBrandDevice = () => {
     const [solutionForm] = Form.useForm();
     const [sparepartForm] = Form.useForm();
 
-    const {
-        errorCodeFields,
-        addErrorCode,
-        removeErrorCode,
-        editErrorCode,
-    } = useErrorCodeLogic(errorCodeForm, fileList);
+    const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
+        errorCodeForm,
+        fileList
+    );
 
     const {
         solutionFields,
@@ -83,14 +93,14 @@ const EditBrandDevice = () => {
 
     // Handlers for sparepart image upload
     const handleSparepartImageUpload = (fieldKey, imageData) => {
-        setSparepartImages(prev => ({
+        setSparepartImages((prev) => ({
             ...prev,
-            [fieldKey]: imageData
+            [fieldKey]: imageData,
         }));
     };
 
     const handleSparepartImageRemove = (fieldKey) => {
-        setSparepartImages(prev => {
+        setSparepartImages((prev) => {
             const newImages = { ...prev };
             delete newImages[fieldKey];
             return newImages;
@@ -159,17 +169,19 @@ const EditBrandDevice = () => {
                               path_icon: ec.path_icon || '',
                               status: ec.is_active,
                               solution: ec.solution || [],
-                              errorCodeIcon: ec.path_icon ? {
-                                  name: 'icon',
-                                  uploadPath: ec.path_icon,
-                                  url: (() => {
-                                      const pathParts = ec.path_icon.split('/');
-                                      const folder = pathParts[0];
-                                      const filename = pathParts.slice(1).join('/');
-                                      return getFileUrl(folder, filename);
-                                  })(),
-                                  type_solution: 'image'
-                              } : null,
+                              errorCodeIcon: ec.path_icon
+                                  ? {
+                                        name: 'icon',
+                                        uploadPath: ec.path_icon,
+                                        url: (() => {
+                                            const pathParts = ec.path_icon.split('/');
+                                            const folder = pathParts[0];
+                                            const filename = pathParts.slice(1).join('/');
+                                            return getFileUrl(folder, filename);
+                                        })(),
+                                        type_solution: 'image',
+                                    }
+                                  : null,
                           }))
                         : [];
 
@@ -332,7 +344,7 @@ const EditBrandDevice = () => {
 
             // Load sparepart images
             const newSparepartImages = {};
-            record.sparepart.forEach(sparepart => {
+            record.sparepart.forEach((sparepart) => {
                 if (sparepart.sparepart_image) {
                     newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
                 }
@@ -367,7 +379,7 @@ const EditBrandDevice = () => {
 
             // Load sparepart images
             const newSparepartImages = {};
-            record.sparepart.forEach(sparepart => {
+            record.sparepart.forEach((sparepart) => {
                 if (sparepart.sparepart_image) {
                     newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
                 }
@@ -381,34 +393,81 @@ const EditBrandDevice = () => {
         }
     };
 
-    const handleAddErrorCode = (newErrorCode) => {
-        // Include the current icon in the error code
-        const errorCodeWithIcon = {
-            ...newErrorCode,
-            errorCodeIcon: errorCodeIcon
-        };
+    const handleAddErrorCode = async () => {
+        try {
+            // Validate error code form
+            const errorCodeValues = await errorCodeForm.validateFields();
 
-        let updatedErrorCodes;
-        if (editingErrorCodeKey) {
-            updatedErrorCodes = errorCodes.map((item) =>
-                item.key === editingErrorCodeKey ? errorCodeWithIcon : item
-            );
-            NotifOk({
-                icon: 'success',
-                title: 'Berhasil',
-                message: 'Error code berhasil diupdate!',
-            });
-        } else {
-            updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
-            NotifOk({
-                icon: 'success',
-                title: 'Berhasil',
-                message: 'Error code berhasil ditambahkan!',
+            // Get solution data from solution form
+            const solutionData = getSolutionData();
+
+            // Get sparepart data from sparepart form
+            const sparepartData = getSparepartData();
+
+            if (solutionData.length === 0) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Perhatian',
+                    message: 'Setiap error code harus memiliki minimal 1 solution!',
+                });
+                return;
+            }
+
+            // Create complete error code object
+            const newErrorCode = {
+                error_code: errorCodeValues.error_code,
+                error_code_name: errorCodeValues.error_code_name,
+                error_code_description: errorCodeValues.error_code_description,
+                error_code_color: errorCodeValues.error_code_color || '#000000',
+                path_icon: errorCodeIcon?.uploadPath || '',
+                status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
+                solution: solutionData,
+                sparepart: sparepartData,
+                errorCodeIcon: errorCodeIcon,
+                key: editingErrorCodeKey || `temp-${Date.now()}`,
+            };
+
+            let updatedErrorCodes;
+            if (editingErrorCodeKey) {
+                // Update existing error code
+                updatedErrorCodes = errorCodes.map((item) => {
+                    if (item.key === editingErrorCodeKey) {
+                        return {
+                            ...item,
+                            ...newErrorCode,
+                            error_code_id: item.error_code_id || newErrorCode.error_code_id,
+                        };
+                    }
+                    return item;
+                });
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Error code berhasil diupdate!',
+                });
+            } else {
+                // Add new error code
+                updatedErrorCodes = [...errorCodes, newErrorCode];
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Error code berhasil ditambahkan!',
+                });
+            }
+
+            setErrorCodes(updatedErrorCodes);
+
+            // Delay form reset to prevent data loss
+            setTimeout(() => {
+                resetErrorCodeForm();
+            }, 100);
+        } catch (error) {
+            NotifAlert({
+                icon: 'warning',
+                title: 'Perhatian',
+                message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
             });
         }
-
-        setErrorCodes(updatedErrorCodes);
-        resetErrorCodeForm();
     };
 
     const resetErrorCodeForm = () => {
@@ -552,7 +611,11 @@ const EditBrandDevice = () => {
                         </Col>
                         <Col span={8}>
                             <Card
-                                title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
+                                title={
+                                    <Title level={5} style={{ margin: 0 }}>
+                                        Solutions
+                                    </Title>
+                                }
                                 size="small"
                             >
                                 <Form
@@ -581,7 +644,11 @@ const EditBrandDevice = () => {
                         </Col>
                         <Col span={8}>
                             <Card
-                                title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
+                                title={
+                                    <Title level={5} style={{ margin: 0 }}>
+                                        Spareparts
+                                    </Title>
+                                }
                                 size="small"
                             >
                                 <Form
diff --git a/src/pages/master/brandDevice/component/BrandForm.jsx b/src/pages/master/brandDevice/component/BrandForm.jsx
index 046045b..2c7227e 100644
--- a/src/pages/master/brandDevice/component/BrandForm.jsx
+++ b/src/pages/master/brandDevice/component/BrandForm.jsx
@@ -28,11 +28,11 @@ const BrandForm = ({ form, formData, onValuesChange, isEdit = false }) => {
 
             <Form.Item label="Brand Code" name="brand_code">
                 <Input
-                    placeholder={isEdit ? 'Brand Code Auto Fill' : 'Brand Code'}
-                    disabled={isEdit}
+                    placeholder={'Auto Fill Brand Code'}
+                    disabled={true}
                     style={{
-                        backgroundColor: isEdit ? '#f5f5f5' : 'white',
-                        cursor: isEdit ? 'not-allowed' : 'text'
+                        backgroundColor: '#f5f5f5',
+                        cursor: 'not-allowed'
                     }}
                 />
             </Form.Item>
diff --git a/src/pages/master/brandDevice/component/ListBrandDevice.jsx b/src/pages/master/brandDevice/component/ListBrandDevice.jsx
index b21df9e..4128dfb 100644
--- a/src/pages/master/brandDevice/component/ListBrandDevice.jsx
+++ b/src/pages/master/brandDevice/component/ListBrandDevice.jsx
@@ -157,12 +157,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
             icon: 'question',
             title: 'Konfirmasi',
             message: 'Apakah anda yakin hapus data "' + param.brand_name + '" ?',
-            onConfirm: () => handleDelete(param.brand_id),
+            onConfirm: () => handleDelete(param.brand_id, param.brand_name),
             onCancel: () => {},
         });
     };
 
-    const handleDelete = async (brand_id) => {
+    const handleDelete = async (brand_id, brand_name) => {
         try {
             const response = await deleteBrand(brand_id);
 
@@ -170,7 +170,7 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
-                    message: response.message || 'Data Brand Device berhasil dihapus.',
+                    message: `Brand ${brand_name} deleted successfully.`,
                 });
                 doFilter(); // Refresh data
             } else {
@@ -278,4 +278,4 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
     );
 });
 
-export default ListBrandDevice;
\ No newline at end of file
+export default ListBrandDevice;
diff --git a/src/pages/master/brandDevice/component/SparepartForm.jsx b/src/pages/master/brandDevice/component/SparepartForm.jsx
index a6c70a1..696dbc8 100644
--- a/src/pages/master/brandDevice/component/SparepartForm.jsx
+++ b/src/pages/master/brandDevice/component/SparepartForm.jsx
@@ -1,5 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Divider, Typography, Switch, Space, Card, Upload, message } from 'antd';
+import {
+    Form,
+    Input,
+    Button,
+    Divider,
+    Typography,
+    Switch,
+    Space,
+    Card,
+    Upload,
+    message,
+} from 'antd';
 import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
 import { uploadFile } from '../../../../api/file-uploads';
 
@@ -15,7 +26,7 @@ const SparepartForm = ({
     onSparepartImageUpload,
     onSparepartImageRemove,
     sparepartImages = {},
-    isReadOnly = false
+    isReadOnly = false,
 }) => {
     const [fieldStatuses, setFieldStatuses] = useState({});
 
@@ -32,7 +43,7 @@ const SparepartForm = ({
     useEffect(() => {
         // Update field statuses when form changes
         const newStatuses = {};
-        sparepartFields.forEach(field => {
+        sparepartFields.forEach((field) => {
             newStatuses[field.key] = getFieldValue(field.key);
         });
         setFieldStatuses(newStatuses);
@@ -55,21 +66,25 @@ const SparepartForm = ({
 
         try {
             const fileExtension = file.name.split('.').pop().toLowerCase();
-            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
+                fileExtension
+            );
             const fileType = isImageFile ? 'image' : 'pdf';
             const folder = 'images';
 
             const uploadResponse = await uploadFile(file, folder);
-            const imagePath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
+            const imagePath =
+                uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
 
             if (imagePath) {
-                onSparepartImageUpload && onSparepartImageUpload(fieldKey, {
-                    name: file.name,
-                    uploadPath: imagePath,
-                    fileExtension,
-                    isImage: isImageFile,
-                    size: file.size,
-                });
+                onSparepartImageUpload &&
+                    onSparepartImageUpload(fieldKey, {
+                        name: file.name,
+                        uploadPath: imagePath,
+                        fileExtension,
+                        isImage: isImageFile,
+                        size: file.size,
+                    });
                 message.success(`${file.name} uploaded successfully!`);
             } else {
                 message.error(`Failed to upload ${file.name}`);
@@ -106,48 +121,40 @@ const SparepartForm = ({
                         size="small"
                         style={{ marginBottom: 16 }}
                         title={
-                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                }}
+                            >
                                 <Text strong>Sparepart {index + 1}</Text>
                                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                                    <Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle>
-                                        <Switch
-                                            disabled={isReadOnly}
-                                            size="small"
-                                            onChange={(checked) => {
-                                                onSparepartStatusChange && onSparepartStatusChange(field.key, checked);
-                                                setFieldStatuses(prev => ({ ...prev, [field.key]: checked }));
-                                            }}
-                                            style={{
-                                                backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf'
-                                            }}
-                                        />
-                                    </Form.Item>
-                                    <Text style={{ fontSize: 12, color: '#666' }}>
-                                        {fieldStatuses[field.key] ? 'Active' : 'Inactive'}
-                                    </Text>
+                                    {!isReadOnly && sparepartFields.length > 1 && (
+                                        <div style={{ textAlign: 'right' }}>
+                                            <Button
+                                                type="text"
+                                                danger
+                                                icon={<DeleteOutlined />}
+                                                onClick={() => onRemoveSparepartField(field.key)}
+                                            />
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         }
                     >
-                        <Form
-                            layout="vertical"
-                            style={{ border: 'none' }}
-                        >
+                        <Form layout="vertical" style={{ border: 'none' }}>
                             {/* Sparepart Name */}
                             <Form.Item
                                 name={[field.name, 'name']}
                                 rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
                             >
-                                <Input
-                                    placeholder="Enter sparepart name"
-                                    disabled={isReadOnly}
-                                />
+                                <Input placeholder="Enter sparepart name" disabled={isReadOnly} />
                             </Form.Item>
 
                             {/* Description */}
-                            <Form.Item
-                                name={[field.name, 'description']}
-                            >
+                            <Form.Item name={[field.name, 'description']}>
                                 <Input.TextArea
                                     placeholder="Enter sparepart description (optional)"
                                     rows={2}
@@ -169,14 +176,26 @@ const SparepartForm = ({
                                         </Button>
                                     </Upload>
                                 ) : (
-                                    <div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}>
+                                    <div
+                                        style={{
+                                            padding: '8px 12px',
+                                            border: '1px solid #d9d9d9',
+                                            borderRadius: 4,
+                                        }}
+                                    >
                                         <Text type="secondary">No upload allowed</Text>
                                     </div>
                                 )}
 
                                 {sparepartImages[field.key] && (
                                     <div style={{ marginTop: 8 }}>
-                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 8,
+                                            }}
+                                        >
                                             <img
                                                 src={sparepartImages[field.key].uploadPath}
                                                 alt="Sparepart Image"
@@ -189,10 +208,16 @@ const SparepartForm = ({
                                                 }}
                                             />
                                             <div>
-                                                <Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text>
+                                                <Text style={{ fontSize: 12 }}>
+                                                    {sparepartImages[field.key].name}
+                                                </Text>
                                                 <br />
                                                 <Text type="secondary" style={{ fontSize: 10 }}>
-                                                    Size: {(sparepartImages[field.key].size / 1024).toFixed(1)} KB
+                                                    Size:{' '}
+                                                    {(
+                                                        sparepartImages[field.key].size / 1024
+                                                    ).toFixed(1)}{' '}
+                                                    KB
                                                 </Text>
                                             </div>
                                             {!isReadOnly && (
@@ -209,24 +234,6 @@ const SparepartForm = ({
                                     </div>
                                 )}
                             </Form.Item>
-
-                            {/* Delete Button */}
-                            {!isReadOnly && sparepartFields.length > 1 && (
-                                <div style={{ textAlign: 'right' }}>
-                                    <Button
-                                        type="text"
-                                        danger
-                                        icon={<DeleteOutlined />}
-                                        onClick={() => onRemoveSparepartField(field.key)}
-                                        style={{
-                                            borderColor: '#ff4d4f',
-                                            color: '#ff4d4f'
-                                        }}
-                                    >
-                                        Remove
-                                    </Button>
-                                </div>
-                            )}
                         </Form>
                     </Card>
                 ))}
@@ -243,17 +250,9 @@ const SparepartForm = ({
                         </Button>
                     </Form.Item>
                 )}
-
-                {!isReadOnly && (
-                    <div style={{ marginTop: 16 }}>
-                        <Text type="secondary">
-                            * Add at least one sparepart for this error code.
-                        </Text>
-                    </div>
-                )}
             </Form>
         </div>
     );
 };
 
-export default SparepartForm;
\ No newline at end of file
+export default SparepartForm;
diff --git a/src/pages/notification/IndexNotification.jsx b/src/pages/notification/IndexNotification.jsx
index 1c5ab9f..664cd45 100644
--- a/src/pages/notification/IndexNotification.jsx
+++ b/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 { Form, Typography } from 'antd';
+import { Typography } from 'antd';
 import ListNotification from './component/ListNotification';
 import DetailNotification from './component/DetailNotification';
 
@@ -10,7 +10,6 @@ const { Text } = Typography;
 const IndexNotification = memo(function IndexNotification() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
 
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
@@ -36,19 +35,14 @@ const IndexNotification = memo(function IndexNotification() {
     useEffect(() => {
         if (actionMode === 'preview') {
             setIsModalVisible(true);
-            if (selectedData) {
-                form.setFieldsValue(selectedData);
-            }
         } else {
             setIsModalVisible(false);
-            form.resetFields();
         }
-    }, [actionMode, selectedData, form]);
+    }, [actionMode]);
 
     const handleCancel = () => {
         setActionMode('list');
         setSelectedData(null);
-        form.resetFields();
     };
 
     return (
@@ -62,7 +56,6 @@ const IndexNotification = memo(function IndexNotification() {
             <DetailNotification
                 visible={isModalVisible}
                 onCancel={handleCancel}
-                form={form}
                 selectedData={selectedData}
             />
         </React.Fragment>
diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 433bdc6..2fb225c 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -1,5 +1,18 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Row, Col, Card, Badge, Input, Typography, Space, Divider, Modal, Tag, message } from 'antd';
+import {
+    Button,
+    Row,
+    Col,
+    Card,
+    Badge,
+    Input,
+    Typography,
+    Space,
+    Divider,
+    Modal,
+    Tag,
+    message,
+} from 'antd';
 import {
     CloseCircleFilled,
     WarningFilled,
@@ -22,72 +35,63 @@ import {
     ExclamationCircleOutlined,
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import { getAllNotification } from '../../../api/notification';
 
 const { Text, Paragraph, Link } = Typography;
 
-// Dummy data untuk notifikasi device
-const initialDeviceNotifications = [
-    {
-        id: 1,
-        type: 'critical',
-        title: 'Compressor Unit A',
-        issue: 'Overheat detected (85°C)',
-        description: '⚠️ Compressor Unit A - Overheat Detected (85°C) 🚨',
-        timestamp: '04-11-2025 11.39 WIB',
-        location: 'Lantai 2, Area Produksi A, Zona 3',
-        details: 'Terjadi kenaikan suhu melebihi ambang batas pada Compressor Unit A. Pengecekan potensi kerusakan dibutuhkan.',
-        link: 'https://tinyurl.com/compA85',
-        subsection: 'Air Dryer A',
-        value: '85° C',
-        threshold: '≤75° C',
-        isRead: false,
-        plc: 'PLC-001',
-        status: 'Butuh Info lebih',
-        tag: 'A1-TEMP',
-    },
-    {
-        id: 2,
-        type: 'warning',
-        title: 'Compressor Unit C',
-        issue: 'Pressure slightly high (7.2 bar)',
-        description: '🔧 Compressor Unit C - Pressure High (7.2 bar)',
-        timestamp: '04-11-2025 11.30 WIB',
-        location: 'Lantai 1, Area Produksi C, Zona 1',
-        details: 'Tekanan mendekati ambang batas atas. Perlu monitoring lebih lanjut oleh engineer.',
-        link: 'https://tinyurl.com/compC72',
-        subsection: 'Main Compressor',
-        value: '7.2 bar',
-        threshold: '<7.5 bar',
-        isRead: false,
-        plc: 'PLC-002',
-        status: 'Monitoring',
-        tag: 'C1-PRESSURE',
-    },
-    {
-        id: 3,
-        type: 'resolved',
-        title: 'Compressor Unit B',
-        issue: 'Vibration issue resolved',
-        description: '✅ Compressor Unit B - Vibration Resolved',
-        timestamp: '04-11-2025 10.05 WIB',
-        location: 'Lantai 2, Area Produksi B, Zona 2',
-        details: 'Getaran pada Unit B telah kembali normal setelah perbaikan.',
-        link: 'https://tinyurl.com/compBresolved',
-        subsection: 'Motor Bearing',
-        value: 'Normal',
-        threshold: 'N/A',
-        isRead: true,
-        plc: 'PLC-003',
-        status: 'Resolved',
-        tag: 'B1-VIBRATION',
-    },
-];
+// Transform API response to component format
+const transformNotificationData = (apiData) => {
+    return apiData.map((item, index) => ({
+        id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
+        type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
+        title: item.device_name || 'Unknown Device',
+        issue: item.error_code_name || 'Unknown Error',
+        description: `${item.error_code} - ${item.error_code_name}`,
+        timestamp:
+            new Date(item.created_at).toLocaleString('id-ID', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            }) + ' WIB',
+        location: item.device_location || 'Location not specified',
+        details: item.message_error_issue || 'No details available',
+        link: '#', // Will be updated when API provides link
+        subsection: item.solution_name || 'N/A',
+        isRead: item.is_read,
+        status: item.is_read ? 'Resolved' : item.is_delivered ? 'Delivered' : 'Pending',
+        tag: item.error_code,
+        errorCode: item.error_code,
+        solutionName: item.solution_name,
+        typeSolution: item.type_solution,
+        pathSolution: item.path_solution,
+    }));
+};
 
 // Dummy data untuk user history
 const userHistoryData = [
-    { id: 1, name: 'John Doe', phone: '081234567890', status: 'Delivered', timestamp: '04-11-2025 11:40 WIB' },
-    { id: 2, name: 'Jane Smith', phone: '087654321098', status: 'Delivered', timestamp: '04-11-2025 11:41 WIB' },
-    { id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
+    {
+        id: '1',
+        name: 'John Doe',
+        phone: '081234567890',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:40 WIB',
+    },
+    {
+        id: '2',
+        name: 'Jane Smith',
+        phone: '087654321098',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:41 WIB',
+    },
+    {
+        id: '3',
+        name: 'Peter Jones',
+        phone: '082345678901',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:42 WIB',
+    },
 ];
 
 // Dummy data untuk log history
@@ -97,16 +101,16 @@ const logHistoryData = [
         timestamp: '04-11-2025 11:55 WIB',
         addedBy: {
             name: 'Budi Santoso',
-            phone: '081122334455'
+            phone: '081122334455',
         },
-        description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.'
+        description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
     },
     {
         id: 2,
         timestamp: '04-11-2025 11:45 WIB',
         addedBy: {
             name: 'John Doe',
-            phone: '081234567890'
+            phone: '081234567890',
         },
         description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
     },
@@ -115,15 +119,14 @@ const logHistoryData = [
         timestamp: '04-11-2025 11:40 WIB',
         addedBy: {
             name: 'Jane Smith',
-            phone: '087654321098'
+            phone: '087654321098',
         },
         description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
-    }
+    },
 ];
 
-
 const ListNotification = memo(function ListNotification(props) {
-    const [notifications, setNotifications] = useState(initialDeviceNotifications);
+    const [notifications, setNotifications] = useState([]);
     const [activeTab, setActiveTab] = useState('all');
     const [searchTerm, setSearchTerm] = useState('');
     const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
@@ -131,19 +134,41 @@ const ListNotification = memo(function ListNotification(props) {
     const [selectedNotification, setSelectedNotification] = useState(null);
     const navigate = useNavigate();
 
+    // Fetch notifications from API
+    const fetchNotifications = async () => {
+        try {
+            const response = await getAllNotification();
+            if (response && response.data) {
+                const transformedData = transformNotificationData(response.data);
+                setNotifications(transformedData);
+            }
+        } catch (error) {
+            console.error('Error fetching notifications:', error);
+            setNotifications([]);
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (!token) {
             navigate('/signin');
+            return;
         }
-    }, [navigate]);
+
+        // Fetch notifications on component mount
+        fetchNotifications();
+    }, []);
 
     const getIconAndColor = (type) => {
         switch (type) {
-            case 'critical': return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' };
-            case 'warning': return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' };
-            case 'resolved': return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' };
-            default: return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' };
+            case 'critical':
+                return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' };
+            case 'warning':
+                return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' };
+            case 'resolved':
+                return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' };
+            default:
+                return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' };
         }
     };
 
@@ -156,25 +181,37 @@ const ListNotification = memo(function ListNotification(props) {
             cancelText: 'Cancel',
             onOk() {
                 console.log('Resending notification:', notification.id);
-                // Di sini Anda bisa menambahkan logika pemanggilan API
-                message.success(`Notification for "${notification.title}" has been resent successfully.`);
+
+                message.success(
+                    `Notification for "${notification.title}" has been resent successfully.`
+                );
             },
             onCancel() {
                 console.log('Resend cancelled');
             },
         });
     };
+
     const handleMarkAsRead = (id) => {
         setNotifications((prev) =>
-            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+            prev.map((n) =>
+                n.id === id ? { ...n, isRead: true, type: 'resolved', status: 'Resolved' } : n
+            )
         );
     };
 
     const filteredNotifications = notifications
-        .filter(n => (activeTab === 'all' || (activeTab === 'unread' && !n.isRead) || (activeTab === 'read' && n.isRead)))
-        .filter(n => {
+        .filter((n) => {
+            const matchesTab =
+                activeTab === 'all' ||
+                (activeTab === 'unread' && !n.isRead) ||
+                (activeTab === 'read' && n.isRead);
+            return matchesTab;
+        })
+        .filter((n) => {
             if (!searchTerm) return true;
-            const searchableText = `${n.title} ${n.issue} ${n.description} ${n.location} ${n.details}`.toLowerCase();
+            const searchableText =
+                `${n.title} ${n.issue} ${n.description} ${n.location} ${n.details}`.toLowerCase();
             return searchableText.includes(searchTerm.toLowerCase());
         });
 
@@ -196,7 +233,9 @@ const ListNotification = memo(function ListNotification(props) {
     const renderDeviceNotifications = () => (
         <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
             {filteredNotifications.length === 0 ? (
-                <div style={{ textAlign: 'center', padding: '40px 0', color: '#8c8c8c' }}>Tidak ada notifikasi</div>
+                <div style={{ textAlign: 'center', padding: '40px 0', color: '#8c8c8c' }}>
+                    Tidak ada notifikasi
+                </div>
             ) : (
                 filteredNotifications.map((notification) => {
                     const { IconComponent, color, bgColor } = getIconAndColor(notification.type);
@@ -211,47 +250,169 @@ const ListNotification = memo(function ListNotification(props) {
                             onClick={() => handleMarkAsRead(notification.id)}
                         >
                             <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
-                                <div style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: bgColor, color: color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '22px', flexShrink: 0 }}>
+                                <div
+                                    style={{
+                                        width: '40px',
+                                        height: '40px',
+                                        borderRadius: '50%',
+                                        backgroundColor: bgColor,
+                                        color: color,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        fontSize: '22px',
+                                        flexShrink: 0,
+                                    }}
+                                >
                                     <IconComponent style={{ fontSize: '22px' }} />
                                 </div>
                                 <div style={{ flex: 1 }}>
                                     <Row align="top">
                                         <Col flex="220px">
-                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    justifyContent: 'space-between',
+                                                    alignItems: 'flex-start',
+                                                }}
+                                            >
                                                 <div>
                                                     <Text strong>{notification.title}</Text>
-                                                    <div style={{ marginTop: '4px' }}><Text style={{ color }}>{notification.issue}</Text></div>
+                                                    <div style={{ marginTop: '4px' }}>
+                                                        <Text style={{ color }}>
+                                                            {notification.issue}
+                                                        </Text>
+                                                    </div>
                                                 </div>
-                                                {!notification.isRead && <Badge color="red" status="processing" style={{ marginLeft: '8px', marginTop: '4px' }} />}
+                                                {!notification.isRead && (
+                                                    <Badge
+                                                        color="red"
+                                                        status="processing"
+                                                        style={{
+                                                            marginLeft: '8px',
+                                                            marginTop: '4px',
+                                                        }}
+                                                    />
+                                                )}
                                             </div>
                                         </Col>
                                         <Col flex="auto">
-                                            <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '12px' }}>
-                                                <MailOutlined style={{ marginTop: '4px', color: '#1890ff' }} />
-                                                <Paragraph style={{ color: '#595959', margin: 0, flex: 1 }}>
-                                                    <Text strong>{notification.description}</Text><br />
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    gap: '8px',
+                                                    alignItems: 'flex-start',
+                                                    marginBottom: '12px',
+                                                }}
+                                            >
+                                                <MailOutlined
+                                                    style={{ marginTop: '4px', color: '#1890ff' }}
+                                                />
+                                                <Paragraph
+                                                    style={{ color: '#595959', margin: 0, flex: 1 }}
+                                                >
                                                     {notification.details}
                                                 </Paragraph>
                                             </div>
-                                            <Space direction="vertical" size={4} style={{ fontSize: '13px', color: '#8c8c8c' }}>
-                                                <Space><ClockCircleOutlined /><Text type="secondary">{notification.timestamp}</Text></Space>
-                                                <Space><EnvironmentOutlined /><Text type="secondary">{notification.location}</Text></Space>
+                                            <Space
+                                                direction="vertical"
+                                                size={4}
+                                                style={{ fontSize: '13px', color: '#8c8c8c' }}
+                                            >
                                                 <Space>
-                                                    <LinkOutlined /><Link href={notification.link} target="_blank">{notification.link}</Link>
+                                                    <ClockCircleOutlined />
+                                                    <Text type="secondary">
+                                                        {notification.timestamp}
+                                                    </Text>
+                                                </Space>
+                                                <Space>
+                                                    <EnvironmentOutlined />
+                                                    <Text type="secondary">
+                                                        {notification.location}
+                                                    </Text>
+                                                </Space>
+                                                <Space>
+                                                    <LinkOutlined />
+                                                    <Link href={notification.link} target="_blank">
+                                                        {notification.link}
+                                                    </Link>
                                                     <Button
-                                                        type="link" icon={<SendOutlined />} style={{ paddingLeft: '8px' }}
-                                                        onClick={(e) => { e.stopPropagation(); handleResend(notification); }}
+                                                        type="link"
+                                                        icon={<SendOutlined />}
+                                                        style={{ paddingLeft: '8px' }}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            handleResend(notification);
+                                                        }}
                                                     >
                                                         Resend
                                                     </Button>
                                                 </Space>
                                             </Space>
                                         </Col>
-                                        <Col flex="120px" style={{ textAlign: 'center' }} align="bottom">
-                                            <Space style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-                                                <Button type="text" icon={<UserOutlined style={{ color: '#1890ff' }} />} title="User History" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} onClick={(e) => { e.stopPropagation(); setModalContent('user'); }} />
-                                                <Button type="text" icon={<EyeOutlined style={{ color: '#1890ff' }} />} title="Details" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} onClick={(e) => { e.stopPropagation(); setModalContent('details'); setSelectedNotification(notification); }} />
-                                                <Button type="text" icon={<HistoryOutlined style={{ color: '#1890ff' }} />} title="Log History" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} onClick={(e) => { e.stopPropagation(); setModalContent('log'); }} />
+                                        <Col
+                                            flex="120px"
+                                            style={{ textAlign: 'center' }}
+                                            align="bottom"
+                                        >
+                                            <Space
+                                                style={{
+                                                    display: 'flex',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    height: '100%',
+                                                }}
+                                            >
+                                                <Button
+                                                    type="text"
+                                                    icon={
+                                                        <UserOutlined
+                                                            style={{ color: '#1890ff' }}
+                                                        />
+                                                    }
+                                                    title="User History"
+                                                    style={{
+                                                        border: '1px solid #1890ff',
+                                                        borderRadius: '4px',
+                                                    }}
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        setModalContent('user');
+                                                    }}
+                                                />
+                                                <Button
+                                                    type="text"
+                                                    icon={
+                                                        <EyeOutlined style={{ color: '#1890ff' }} />
+                                                    }
+                                                    title="Details"
+                                                    style={{
+                                                        border: '1px solid #1890ff',
+                                                        borderRadius: '4px',
+                                                    }}
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        setModalContent('details');
+                                                        setSelectedNotification(notification);
+                                                    }}
+                                                />
+                                                <Button
+                                                    type="text"
+                                                    icon={
+                                                        <HistoryOutlined
+                                                            style={{ color: '#1890ff' }}
+                                                        />
+                                                    }
+                                                    title="Log History"
+                                                    style={{
+                                                        border: '1px solid #1890ff',
+                                                        borderRadius: '4px',
+                                                    }}
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        setModalContent('log');
+                                                    }}
+                                                />
                                             </Space>
                                         </Col>
                                     </Row>
@@ -267,25 +428,31 @@ const ListNotification = memo(function ListNotification(props) {
     const renderUserHistory = () => (
         <>
             <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-                {userHistoryData.map(user => (
+                {userHistoryData.map((user) => (
                     <Card key={user.id} style={{ borderColor: '#91d5ff' }}>
                         <Row align="middle" justify="space-between">
                             <Col>
                                 <Space align="center">
                                     <Text strong>{user.name}</Text>
                                     <Text>|</Text>
-                                    <Text><MobileOutlined /> {user.phone}</Text>
+                                    <Text>
+                                        <MobileOutlined /> {user.phone}
+                                    </Text>
                                     <Text>|</Text>
                                     <Badge status="success" text={user.status} />
                                 </Space>
                                 <Divider style={{ margin: '8px 0' }} />
                                 <Space align="center">
                                     <CheckCircleFilled style={{ color: '#52c41a' }} />
-                                    <Text type="secondary">Success Delivered at {user.timestamp}</Text>
+                                    <Text type="secondary">
+                                        Success Delivered at {user.timestamp}
+                                    </Text>
                                 </Space>
                             </Col>
                             <Col>
-                                <Button type="primary" ghost icon={<SendOutlined />}>Resend</Button>
+                                <Button type="primary" ghost icon={<SendOutlined />}>
+                                    Resend
+                                </Button>
                             </Col>
                         </Row>
                     </Card>
@@ -298,19 +465,45 @@ const ListNotification = memo(function ListNotification(props) {
         <>
             <div style={{ padding: '0 16px', position: 'relative' }}>
                 {/* Garis vertikal yang menyambung */}
-                <div style={{
-                    position: 'absolute', top: '7px', left: '23px', bottom: '7px',
-                    width: '2px', backgroundColor: '#91d5ff', zIndex: 0
-                }}></div>
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '7px',
+                        left: '23px',
+                        bottom: '7px',
+                        width: '2px',
+                        backgroundColor: '#91d5ff',
+                        zIndex: 0,
+                    }}
+                ></div>
 
                 {logHistoryData.map((log, index) => (
-                    <Row key={log.id} wrap={false} style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}>
+                    <Row
+                        key={log.id}
+                        wrap={false}
+                        style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
+                    >
                         {/* Kolom Kiri: Branch/Timeline */}
-                        <Col style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', marginRight: '16px' }}>
-                            <div style={{
-                                width: '14px', height: '14px', backgroundColor: '#fff', border: '3px solid #1890ff',
-                                borderRadius: '50%', zIndex: 1, flexShrink: 0
-                            }}></div>
+                        <Col
+                            style={{
+                                position: 'relative',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                marginRight: '16px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    width: '14px',
+                                    height: '14px',
+                                    backgroundColor: '#fff',
+                                    border: '3px solid #1890ff',
+                                    borderRadius: '50%',
+                                    zIndex: 1,
+                                    flexShrink: 0,
+                                }}
+                            ></div>
                         </Col>
 
                         {/* Kolom Kanan: Card */}
@@ -321,18 +514,35 @@ const ListNotification = memo(function ListNotification(props) {
                                         <Space direction="vertical" size={4}>
                                             <Space>
                                                 <ClockCircleOutlined />
-                                                <Text type="secondary" style={{ fontSize: '12px' }}>Added at {log.timestamp}</Text>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>
+                                                    Added at {log.timestamp}
+                                                </Text>
                                             </Space>
                                             <div>
                                                 <Text strong>Added by: {log.addedBy.name}</Text>
-                                                <span style={{ marginLeft: '8px', border: '1px solid #52c41a', color: '#52c41a', padding: '2px 6px', borderRadius: '4px', fontSize: '12px' }}>
+                                                <span
+                                                    style={{
+                                                        marginLeft: '8px',
+                                                        border: '1px solid #52c41a',
+                                                        color: '#52c41a',
+                                                        padding: '2px 6px',
+                                                        borderRadius: '4px',
+                                                        fontSize: '12px',
+                                                    }}
+                                                >
                                                     <MobileOutlined /> {log.addedBy.phone}
                                                 </span>
                                             </div>
                                         </Space>
                                     </Col>
                                     <Col xs={24} md={12}>
-                                        <Paragraph style={{ color: '#595959', margin: 0, fontSize: '13px' }}>
+                                        <Paragraph
+                                            style={{
+                                                color: '#595959',
+                                                margin: 0,
+                                                fontSize: '13px',
+                                            }}
+                                        >
                                             {log.description}
                                         </Paragraph>
                                     </Col>
@@ -355,48 +565,79 @@ const ListNotification = memo(function ListNotification(props) {
                 <Row gutter={[16, 16]}>
                     {/* Kolom Kiri: Data Kompresor */}
                     <Col span={12}>
-                        <Card title="" size="small" style={{ height: '100%', borderColor: '#d4380d' }} bodyStyle={{ padding: '12px' }}>
+                        <Card
+                            title=""
+                            size="small"
+                            style={{ height: '100%', borderColor: '#d4380d' }}
+                            bodyStyle={{ padding: '12px' }}
+                        >
                             <Space direction="vertical" size="large" style={{ width: '100%' }}>
                                 <Row gutter={16} align="middle">
                                     <Col>
-                                        <div style={{
-                                            width: '32px',
-                                            height: '32px',
-                                            borderRadius: '50%',
-                                            backgroundColor: '#d4380d',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            color: '#ffffff',
-                                            fontSize: '18px'
-                                        }}><CloseOutlined /></div>
+                                        <div
+                                            style={{
+                                                width: '32px',
+                                                height: '32px',
+                                                borderRadius: '50%',
+                                                backgroundColor: '#d4380d',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                color: '#ffffff',
+                                                fontSize: '18px',
+                                            }}
+                                        >
+                                            <CloseOutlined />
+                                        </div>
                                     </Col>
                                     <Col>
                                         <Text>{selectedNotification.title}</Text>
-                                        <div style={{ marginTop: '2px' }}><Text strong style={{ fontSize: '16px' }}>{selectedNotification.issue}</Text></div>
+                                        <div style={{ marginTop: '2px' }}>
+                                            <Text strong style={{ fontSize: '16px' }}>
+                                                {selectedNotification.issue}
+                                            </Text>
+                                        </div>
                                     </Col>
                                 </Row>
                                 <div>
                                     <Text strong>Plant Subsection</Text>
                                     <div>{selectedNotification.subsection}</div>
-                                    <Text strong style={{ display: 'block', marginTop: '8px' }}>Time</Text>
+                                    <Text strong style={{ display: 'block', marginTop: '8px' }}>
+                                        Time
+                                    </Text>
                                     <div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
                                 </div>
 
-                                <div style={{
-                                    border: '1px solid #d4380d',
-                                    borderRadius: '4px',
-                                    padding: '8px',
-                                    background: 'linear-gradient(to right, #ffe7e6, #ffffff)'
-                                }}>
+                                <div
+                                    style={{
+                                        border: '1px solid #d4380d',
+                                        borderRadius: '4px',
+                                        padding: '8px',
+                                        background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
+                                    }}
+                                >
                                     <Row justify="space-around" align="middle">
                                         <Col>
-                                            <Text style={{ fontSize: '12px', color: color }}>Value</Text>
-                                            <div style={{ fontWeight: 'bold', fontSize: '16px', color: color }}>{selectedNotification.value.includes('°') ? selectedNotification.value : `${selectedNotification.value}° C`}</div>
+                                            <Text style={{ fontSize: '12px', color: color }}>
+                                                Value
+                                            </Text>
+                                            <div
+                                                style={{
+                                                    fontWeight: 'bold',
+                                                    fontSize: '16px',
+                                                    color: color,
+                                                }}
+                                            >
+                                                N/A
+                                            </div>
                                         </Col>
                                         <Col>
-                                            <Text type="secondary" style={{ fontSize: '12px' }}>Treshold</Text>
-                                            <div style={{ fontWeight: 500 }}>{selectedNotification.threshold.includes('°') ? selectedNotification.threshold : `${selectedNotification.threshold}° C`}</div>
+                                            <Text type="secondary" style={{ fontSize: '12px' }}>
+                                                Treshold
+                                            </Text>
+                                            <div style={{ fontWeight: 500 }}>
+                                                N/A
+                                            </div>
                                         </Col>
                                     </Row>
                                 </div>
@@ -414,11 +655,23 @@ const ListNotification = memo(function ListNotification(props) {
                                 </div>
                                 <div>
                                     <Text strong>Status</Text>
-                                    <div style={{ color: '#faad14', fontWeight: 500 }}>{selectedNotification.status}</div>
+                                    <div style={{ color: '#faad14', fontWeight: 500 }}>
+                                        {selectedNotification.status}
+                                    </div>
                                 </div>
                                 <div>
                                     <Text strong>Tag</Text>
-                                    <div style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '4px', display: 'inline-block' }}>{selectedNotification.tag}</div>
+                                    <div
+                                        style={{
+                                            fontFamily: 'monospace',
+                                            backgroundColor: '#f0f0f0',
+                                            padding: '2px 6px',
+                                            borderRadius: '4px',
+                                            display: 'inline-block',
+                                        }}
+                                    >
+                                        {selectedNotification.tag}
+                                    </div>
                                 </div>
                             </Space>
                         </Card>
@@ -427,26 +680,59 @@ const ListNotification = memo(function ListNotification(props) {
                 <div>
                     <Row gutter={[16, 16]}>
                         <Col span={8}>
-                            <Card style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }} bodyStyle={{ padding: '12px' }}>
+                            <Card
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                }}
+                                bodyStyle={{ padding: '12px' }}
+                            >
                                 <Space>
                                     <BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>Handling Guideline</Text>
+                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                        Handling Guideline
+                                    </Text>
                                 </Space>
                             </Card>
                         </Col>
                         <Col span={8}>
-                            <Card style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }} bodyStyle={{ padding: '12px' }}>
+                            <Card
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                }}
+                                bodyStyle={{ padding: '12px' }}
+                            >
                                 <Space>
                                     <ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>Spare Part</Text>
+                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                        Spare Part
+                                    </Text>
                                 </Space>
                             </Card>
                         </Col>
                         <Col span={8}>
-                            <Card style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }} bodyStyle={{ padding: '12px' }} onClick={() => setModalContent('log')}>
+                            <Card
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                }}
+                                bodyStyle={{ padding: '12px' }}
+                                onClick={() => setModalContent('log')}
+                            >
                                 <Space>
-                                    <HistoryOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>Log Activity</Text>
+                                    <HistoryOutlined
+                                        style={{ fontSize: '16px', color: '#1890ff' }}
+                                    />
+                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                        Log Activity
+                                    </Text>
                                 </Space>
                             </Card>
                         </Col>
@@ -456,56 +742,125 @@ const ListNotification = memo(function ListNotification(props) {
                             <Card size="small" style={{ height: '100%' }}>
                                 <Space direction="vertical" size="small" style={{ width: '100%' }}>
                                     <Card
-                                        size="small" bodyStyle={{ padding: '8px 12px' }} hoverable
-                                        extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}
+                                        size="small"
+                                        bodyStyle={{ padding: '8px 12px' }}
+                                        hoverable
+                                        extra={
+                                            <Text type="secondary" style={{ fontSize: '10px' }}>
+                                                PDF
+                                            </Text>
+                                        }
                                     >
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                            }}
+                                        >
                                             <div>
-                                                <Text style={{ fontSize: '12px', color: '#262626' }}>
-                                                    <FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf
+                                                <Text
+                                                    style={{ fontSize: '12px', color: '#262626' }}
+                                                >
+                                                    <FilePdfOutlined
+                                                        style={{ marginRight: '8px' }}
+                                                    />{' '}
+                                                    Error 303.pdf
                                                 </Text>
-                                                <Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block' }}>
+                                                <Link
+                                                    href="#"
+                                                    target="_blank"
+                                                    style={{ fontSize: '12px', display: 'block' }}
+                                                >
                                                     lihat disini
                                                 </Link>
                                             </div>
                                         </div>
                                     </Card>
                                     <Card
-                                        size="small" bodyStyle={{ padding: '8px 12px' }} hoverable
-                                        extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}
+                                        size="small"
+                                        bodyStyle={{ padding: '8px 12px' }}
+                                        hoverable
+                                        extra={
+                                            <Text type="secondary" style={{ fontSize: '10px' }}>
+                                                PDF
+                                            </Text>
+                                        }
                                     >
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                            }}
+                                        >
                                             <div>
-                                                <Text style={{ fontSize: '12px', color: '#262626' }}>
-                                                    <FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf
+                                                <Text
+                                                    style={{ fontSize: '12px', color: '#262626' }}
+                                                >
+                                                    <FilePdfOutlined
+                                                        style={{ marginRight: '8px' }}
+                                                    />{' '}
+                                                    Error 303.pdf
                                                 </Text>
-                                                <Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block' }}>
+                                                <Link
+                                                    href="#"
+                                                    target="_blank"
+                                                    style={{ fontSize: '12px', display: 'block' }}
+                                                >
                                                     lihat disini
                                                 </Link>
                                             </div>
                                         </div>
                                     </Card>
                                     <Card
-                                        size="small" bodyStyle={{ padding: '8px 12px' }} hoverable
-                                        extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}
+                                        size="small"
+                                        bodyStyle={{ padding: '8px 12px' }}
+                                        hoverable
+                                        extra={
+                                            <Text type="secondary" style={{ fontSize: '10px' }}>
+                                                PDF
+                                            </Text>
+                                        }
                                     >
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                            }}
+                                        >
                                             <div>
-                                                <Text style={{ fontSize: '12px', color: '#262626' }}>
-                                                    <FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf
+                                                <Text
+                                                    style={{ fontSize: '12px', color: '#262626' }}
+                                                >
+                                                    <FilePdfOutlined
+                                                        style={{ marginRight: '8px' }}
+                                                    />{' '}
+                                                    Error 303.pdf
                                                 </Text>
-                                                <Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block' }}>
+                                                <Link
+                                                    href="#"
+                                                    target="_blank"
+                                                    style={{ fontSize: '12px', display: 'block' }}
+                                                >
                                                     lihat disini
                                                 </Link>
                                             </div>
                                         </div>
                                     </Card>
                                     <Card
-                                        size="small" bodyStyle={{ padding: '8px 12px' }}
-                                        extra={<Text type="secondary" style={{ fontSize: '10px' }}>Text</Text>}
+                                        size="small"
+                                        bodyStyle={{ padding: '8px 12px' }}
+                                        extra={
+                                            <Text type="secondary" style={{ fontSize: '10px' }}>
+                                                Text
+                                            </Text>
+                                        }
                                     >
                                         <Paragraph style={{ fontSize: '12px', margin: 0 }}>
-                                            <Text strong>Error 303:</Text> Sensor suhu tidak merespon. Lakukan reset manual pada panel kontrol.
+                                            <Text strong>Error 303:</Text> Sensor suhu tidak
+                                            merespon. Lakukan reset manual pada panel kontrol.
                                         </Paragraph>
                                     </Card>
                                 </Space>
@@ -517,19 +872,64 @@ const ListNotification = memo(function ListNotification(props) {
                                     <Card size="small" bodyStyle={{ padding: '12px' }} hoverable>
                                         <Row gutter={16} align="top">
                                             <Col span={7} style={{ textAlign: 'center' }}>
-                                                <div style={{ width: '100%', height: '60px', backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px', marginBottom: '8px' }}>
-                                                    <ToolOutlined style={{ fontSize: '24px', color: '#bfbfbf' }} />
+                                                <div
+                                                    style={{
+                                                        width: '100%',
+                                                        height: '60px',
+                                                        backgroundColor: '#f0f0f0',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        borderRadius: '4px',
+                                                        marginBottom: '8px',
+                                                    }}
+                                                >
+                                                    <ToolOutlined
+                                                        style={{
+                                                            fontSize: '24px',
+                                                            color: '#bfbfbf',
+                                                        }}
+                                                    />
                                                 </div>
-                                                <Text style={{ fontSize: '12px', color: '#52c41a', fontWeight: 500 }}>Available</Text>
+                                                <Text
+                                                    style={{
+                                                        fontSize: '12px',
+                                                        color: '#52c41a',
+                                                        fontWeight: 500,
+                                                    }}
+                                                >
+                                                    Available
+                                                </Text>
                                             </Col>
                                             <Col span={17}>
-                                                <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                                                <Space
+                                                    direction="vertical"
+                                                    size={4}
+                                                    style={{ width: '100%' }}
+                                                >
                                                     <Text strong>Air Filter</Text>
-                                                    <Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>
-                                                        Filters incoming air to remove dust and impurities before compression.
+                                                    <Paragraph
+                                                        style={{
+                                                            fontSize: '12px',
+                                                            margin: 0,
+                                                            color: '#595959',
+                                                        }}
+                                                    >
+                                                        Filters incoming air to remove dust and
+                                                        impurities before compression.
                                                     </Paragraph>
-                                                    <div style={{ border: '1px solid #d9d9d9', borderRadius: '4px', padding: '4px 8px', fontSize: '11px', color: '#8c8c8c', marginTop: '8px' }}>
-                                                        Part No: AF-2024-X2 | Condition: New | Compatible with Model XR-60
+                                                    <div
+                                                        style={{
+                                                            border: '1px solid #d9d9d9',
+                                                            borderRadius: '4px',
+                                                            padding: '4px 8px',
+                                                            fontSize: '11px',
+                                                            color: '#8c8c8c',
+                                                            marginTop: '8px',
+                                                        }}
+                                                    >
+                                                        Part No: AF-2024-X2 | Condition: New |
+                                                        Compatible with Model XR-60
                                                     </div>
                                                 </Space>
                                             </Col>
@@ -538,19 +938,64 @@ const ListNotification = memo(function ListNotification(props) {
                                     <Card size="small" bodyStyle={{ padding: '12px' }} hoverable>
                                         <Row gutter={16} align="top">
                                             <Col span={7} style={{ textAlign: 'center' }}>
-                                                <div style={{ width: '100%', height: '60px', backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px', marginBottom: '8px' }}>
-                                                    <ToolOutlined style={{ fontSize: '24px', color: '#bfbfbf' }} />
+                                                <div
+                                                    style={{
+                                                        width: '100%',
+                                                        height: '60px',
+                                                        backgroundColor: '#f0f0f0',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        borderRadius: '4px',
+                                                        marginBottom: '8px',
+                                                    }}
+                                                >
+                                                    <ToolOutlined
+                                                        style={{
+                                                            fontSize: '24px',
+                                                            color: '#bfbfbf',
+                                                        }}
+                                                    />
                                                 </div>
-                                                <Text style={{ fontSize: '12px', color: '#ff4d4f', fontWeight: 500 }}>Not Available</Text>
+                                                <Text
+                                                    style={{
+                                                        fontSize: '12px',
+                                                        color: '#ff4d4f',
+                                                        fontWeight: 500,
+                                                    }}
+                                                >
+                                                    Not Available
+                                                </Text>
                                             </Col>
                                             <Col span={17}>
-                                                <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                                                <Space
+                                                    direction="vertical"
+                                                    size={4}
+                                                    style={{ width: '100%' }}
+                                                >
                                                     <Text strong>Compressor Oil</Text>
-                                                    <Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>
-                                                        Special synthetic oil to lubricate and cool down the compressor unit.
+                                                    <Paragraph
+                                                        style={{
+                                                            fontSize: '12px',
+                                                            margin: 0,
+                                                            color: '#595959',
+                                                        }}
+                                                    >
+                                                        Special synthetic oil to lubricate and cool
+                                                        down the compressor unit.
                                                     </Paragraph>
-                                                    <div style={{ border: '1px solid #d9d9d9', borderRadius: '4px', padding: '4px 8px', fontSize: '11px', color: '#8c8c8c', marginTop: '8px' }}>
-                                                        Part No: OL-SYN-550 | Condition: New | Compatible with Model XR-60
+                                                    <div
+                                                        style={{
+                                                            border: '1px solid #d9d9d9',
+                                                            borderRadius: '4px',
+                                                            padding: '4px 8px',
+                                                            fontSize: '11px',
+                                                            color: '#8c8c8c',
+                                                            marginTop: '8px',
+                                                        }}
+                                                    >
+                                                        Part No: OL-SYN-550 | Condition: New |
+                                                        Compatible with Model XR-60
                                                     </div>
                                                 </Space>
                                             </Col>
@@ -562,29 +1007,68 @@ const ListNotification = memo(function ListNotification(props) {
                         <Col span={8}>
                             <Card size="small" style={{ height: '100%' }}>
                                 <Space direction="vertical" size="small" style={{ width: '100%' }}>
-                                    <Card size="small" bodyStyle={{ padding: '8px 12px', backgroundColor: isAddingLog ? '#fafafa' : '#fff' }}>
-                                        <Space direction="vertical" style={{ width: '100%' }} size="small">
+                                    <Card
+                                        size="small"
+                                        bodyStyle={{
+                                            padding: '8px 12px',
+                                            backgroundColor: isAddingLog ? '#fafafa' : '#fff',
+                                        }}
+                                    >
+                                        <Space
+                                            direction="vertical"
+                                            style={{ width: '100%' }}
+                                            size="small"
+                                        >
                                             {isAddingLog && (
                                                 <>
-                                                    <Text strong style={{ fontSize: '12px' }}>Add New Log / Update Progress</Text>
-                                                    <Input.TextArea rows={2} placeholder="Tuliskan update penanganan di sini..." />
+                                                    <Text strong style={{ fontSize: '12px' }}>
+                                                        Add New Log / Update Progress
+                                                    </Text>
+                                                    <Input.TextArea
+                                                        rows={2}
+                                                        placeholder="Tuliskan update penanganan di sini..."
+                                                    />
                                                 </>
                                             )}
-                                            <Button type={isAddingLog ? "primary" : "dashed"} size="small" block icon={!isAddingLog && <PlusOutlined />} onClick={() => setIsAddingLog(!isAddingLog)}>
-                                                {isAddingLog ? "Submit Log" : "Add Log"}
+                                            <Button
+                                                type={isAddingLog ? 'primary' : 'dashed'}
+                                                size="small"
+                                                block
+                                                icon={!isAddingLog && <PlusOutlined />}
+                                                onClick={() => setIsAddingLog(!isAddingLog)}
+                                            >
+                                                {isAddingLog ? 'Submit Log' : 'Add Log'}
                                             </Button>
                                         </Space>
                                     </Card>
-                                    {logHistoryData.slice(0, 2).map(log => ( // Menampilkan 2 log terbaru sebagai pratinjau
-                                        <Card key={log.id} size="small" bodyStyle={{ padding: '8px 12px' }}>
-                                            <Paragraph style={{ fontSize: '12px', margin: 0 }} ellipsis={{ rows: 2 }}>
-                                                <Text strong>{log.addedBy.name}:</Text> {log.description}
-                                            </Paragraph>
-                                            <Text type="secondary" style={{ fontSize: '11px' }}>{log.timestamp}</Text>
-                                        </Card>
-                                    ))}
+                                    {logHistoryData.slice(0, 2).map(
+                                        (
+                                            log // Menampilkan 2 log terbaru sebagai pratinjau
+                                        ) => (
+                                            <Card
+                                                key={log.id}
+                                                size="small"
+                                                bodyStyle={{ padding: '8px 12px' }}
+                                            >
+                                                <Paragraph
+                                                    style={{ fontSize: '12px', margin: 0 }}
+                                                    ellipsis={{ rows: 2 }}
+                                                >
+                                                    <Text strong>{log.addedBy.name}:</Text>{' '}
+                                                    {log.description}
+                                                </Paragraph>
+                                                <Text type="secondary" style={{ fontSize: '11px' }}>
+                                                    {log.timestamp}
+                                                </Text>
+                                            </Card>
+                                        )
+                                    )}
                                     <div style={{ textAlign: 'center', paddingTop: '8px' }}>
-                                        <Button type="link" style={{ padding: 0 }} onClick={() => setModalContent('log')}>
+                                        <Button
+                                            type="link"
+                                            style={{ padding: 0 }}
+                                            onClick={() => setModalContent('log')}
+                                        >
                                             View All Log History
                                         </Button>
                                     </div>
@@ -602,31 +1086,67 @@ const ListNotification = memo(function ListNotification(props) {
             <Card>
                 <Row>
                     <Col xs={24}>
-                        <h2 style={{ fontSize: '20px', fontWeight: 600, margin: '0 0 4px 0', color: '#262626' }}>Notification</h2>
+                        <h2
+                            style={{
+                                fontSize: '20px',
+                                fontWeight: 600,
+                                margin: '0 0 4px 0',
+                                color: '#262626',
+                            }}
+                        >
+                            Notification
+                        </h2>
                         <p style={{ margin: '0 0 16px 0', color: '#8c8c8c', fontSize: '14px' }}>
                             Riwayat notifikasi yang dikirim ke engineer
                         </p>
 
-                        <Row justify="space-between" align="middle" style={{ marginBottom: '24px' }}>
+                        <Row
+                            justify="space-between"
+                            align="middle"
+                            style={{ marginBottom: '24px' }}
+                        >
                             <Col>
                                 <Input.Search
                                     placeholder="Search notifications..."
                                     onSearch={setSearchTerm}
                                     onChange={(e) => setSearchTerm(e.target.value)}
-                                    style={{ width: 300 }} 
+                                    style={{ width: 300 }}
                                 />
                             </Col>
                         </Row>
-                            <div style={{ borderBottom: '1px solid #f0f0f0', marginBottom: '24px' }}>
-                                <div style={{ display: 'flex', gap: '8px' }}>
-                                    <button onClick={() => setActiveTab('all')} style={tabButtonStyle(activeTab === 'all')}>All</button>
-                                    <button onClick={() => setActiveTab('unread')} style={{ ...tabButtonStyle(activeTab === 'unread'), display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                        Not read yet
-                                        {getUnreadCount() > 0 && <Badge count={getUnreadCount()} style={{ backgroundColor: '#ff4d4f' }} />}
-                                    </button>
-                                    <button onClick={() => setActiveTab('read')} style={tabButtonStyle(activeTab === 'read')}>Already read</button>
-                                </div>
+                        <div style={{ borderBottom: '1px solid #f0f0f0', marginBottom: '24px' }}>
+                            <div style={{ display: 'flex', gap: '8px' }}>
+                                <button
+                                    onClick={() => setActiveTab('all')}
+                                    style={tabButtonStyle(activeTab === 'all')}
+                                >
+                                    All
+                                </button>
+                                <button
+                                    onClick={() => setActiveTab('unread')}
+                                    style={{
+                                        ...tabButtonStyle(activeTab === 'unread'),
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px',
+                                    }}
+                                >
+                                    Not read yet
+                                    {getUnreadCount() > 0 && (
+                                        <Badge
+                                            count={getUnreadCount()}
+                                            style={{ backgroundColor: '#ff4d4f' }}
+                                        />
+                                    )}
+                                </button>
+                                <button
+                                    onClick={() => setActiveTab('read')}
+                                    style={tabButtonStyle(activeTab === 'read')}
+                                >
+                                    Already read
+                                </button>
                             </div>
+                        </div>
 
                         {renderDeviceNotifications()}
                     </Col>
@@ -637,7 +1157,15 @@ const ListNotification = memo(function ListNotification(props) {
                 title={
                     <div style={{ textAlign: 'center' }}>
                         {modalContent === 'details' ? (
-                            <div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '4px', padding: '4px 12px', margin: '0 -16px' }}>
+                            <div
+                                style={{
+                                    backgroundColor: '#f6ffed',
+                                    border: '1px solid #b7eb8f',
+                                    borderRadius: '4px',
+                                    padding: '4px 12px',
+                                    margin: '0 -16px',
+                                }}
+                            >
                                 <Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
                                     Error Notification Detail
                                 </Typography.Title>
@@ -663,14 +1191,20 @@ const ListNotification = memo(function ListNotification(props) {
                 width={modalContent === 'details' ? 900 : 700}
                 footer={
                     <div style={{ textAlign: 'right' }}>
-                        <Button type="primary" ghost onClick={() => {
-                            setModalContent(null);
-                            setSelectedNotification(null);
-                            // Reset state isAddingLog saat modal ditutup
-                            if (modalContent === 'details') {
-                                setIsAddingLog(false);
-                            }
-                        }}>Close</Button>
+                        <Button
+                            type="primary"
+                            ghost
+                            onClick={() => {
+                                setModalContent(null);
+                                setSelectedNotification(null);
+                                // Reset state isAddingLog saat modal ditutup
+                                if (modalContent === 'details') {
+                                    setIsAddingLog(false);
+                                }
+                            }}
+                        >
+                            Close
+                        </Button>
                     </div>
                 }
             >
@@ -682,4 +1216,4 @@ const ListNotification = memo(function ListNotification(props) {
     );
 });
 
-export default ListNotification;
\ No newline at end of file
+export default ListNotification;