Merge pull request 'lavoce' (#30) from lavoce into main

Reviewed-on: #30

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.config
 
 node_modules
 dist

public/web.config

@@ -3,7 +3,7 @@
     <system.webServer>
         <rewrite>
             <rules>
-                <rule name="reactViteSypiu">
+                <rule name="CallOfDuty">
                     <match url=".*" />
                     <conditions logicalGrouping="MatchAll">
                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

src/api/notification.jsx

@@ -46,15 +46,6 @@ const getNotificationLogByNotificationId = async (notificationId) => {
     return response.data;
 };
 
-// update is_read status
-const updateIsRead = async (notificationId) => {
-    const response = await SendRequest({
-        method: 'put',
-        prefix: `notification/${notificationId}`,
-    });
-    return response.data;
-};
-
 // Resend notification to specific user
 const resendNotificationToUser = async (notificationId, userId) => {
     const response = await SendRequest({
@@ -64,42 +55,11 @@ const resendNotificationToUser = async (notificationId, userId) => {
     return response.data;
 };
 
-// Resend Chat by User
-const resendChatByUser = async (notificationId, userPhone) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notification-user/resend/${notificationId}/${userPhone}`,
-    });
-    return response.data;
-};
-
-// Resend Chat All User
-const resendChatAllUser = async (notificationId) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notification/resend/${notificationId}`,
-    });
-    return response.data;
-};
-
-// Searching
-const searchData = async (queryParams) => {
-    const response = await SendRequest({
-        method: 'get',
-        prefix: `notification?criteria=${queryParams}`,
-    });
-    return response.data;
-};
-
 export {
     getAllNotification,
     getNotificationById,
     getNotificationDetail,
     createNotificationLog,
     getNotificationLogByNotificationId,
-    updateIsRead,
     resendNotificationToUser,
-    resendChatByUser,
-    resendChatAllUser,
-    searchData,
 };

src/components/Global/MqttConnection.jsx

@@ -2,16 +2,7 @@
 import mqtt from 'mqtt';
 
 const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
-const topics = [
+const topics = ['cod/air_dryer/air_dryer1'];
-    'PIU_COD/AIR_DRYER/OVERVIEW',
-    'PIU_COD/AIR_DRYER/AIR_DRYER_A',
-    'PIU_COD/AIR_DRYER/AIR_DRYER_B',
-    'PIU_COD/AIR_DRYER/AIR_DRYER_C',
-    'PIU_COD/COMPRESSOR/OVERVIEW',
-    'PIU_COD/COMPRESSOR/COMPRESSOR_A',
-    'PIU_COD/COMPRESSOR/COMPRESSOR_B',
-    'PIU_COD/COMPRESSOR/COMPRESSOR_C'
-];
 const options = {
     keepalive: 30,
     clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),

src/pages/blank/RedirectWa.jsx

@@ -26,7 +26,7 @@ export default function RedirectWa() {
 
         console.log('tes', response);
 
-        const tokenResult = JSON.stringify(response.data?.data?.accessToken);
+        const tokenResult = JSON.stringify(response.data?.accessToken);
 
         sessionStorage.setItem('token_redirect', tokenResult);
         response.data.auth = true;

src/pages/home/SvgAirDryerA.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_A_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_A_rev.svg';
-const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_A';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgAirDryerA = () => {
     return (

src/pages/home/SvgAirDryerB.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_B_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_B_rev.svg';
-const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_B';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgAirDryerB = () => {
     return (

src/pages/home/SvgAirDryerC.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_C_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_C_rev.svg';
-const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_C';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgAirDryerC = () => {
     return (

src/pages/home/SvgCompressorA.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorA_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgCompressorA = () => {
     return (

src/pages/home/SvgCompressorB.jsx

@@ -6,7 +6,7 @@ import SvgViewer from './SvgViewer';
 import filePathSvg from '../../assets/svg/compressorB_rev.svg';
 
 const { Text } = Typography;
-const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
+const topicMqtt = 'cod/air_dryer/air_dryer1';
 
 const SvgCompressorB = () => {
     return (

src/pages/home/SvgCompressorC.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorC_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgCompressorC = () => {
     return (

src/pages/home/SvgOverviewAirDryer.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-airdryer.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgOverviewAirDryer = () => {
     return (

src/pages/home/SvgOverviewCompressor.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-compressor.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgOverviewCompressor = () => {
     return (

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -13,18 +13,13 @@ import {
     Space,
     ConfigProvider,
 } from 'antd';
-import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import {
+    EditOutlined,
+    DeleteOutlined
+} from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import {
+import { getBrandById, createBrand, createErrorCode, getErrorCodesByBrandId, updateErrorCode, deleteErrorCode, deleteBrand } from '../../../api/master-brand';
-    getBrandById,
-    createBrand,
-    createErrorCode,
-    getErrorCodesByBrandId,
-    updateErrorCode,
-    deleteErrorCode,
-    deleteBrand,
-} from '../../../api/master-brand';
 import BrandForm from './component/BrandForm';
 import ErrorCodeForm from './component/ErrorCodeForm';
 import SolutionForm from './component/SolutionForm';
@@ -47,9 +42,7 @@ const AddBrandDevice = () => {
     const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const tab = searchParams.get('tab');
-    const [currentStep, setCurrentStep] = useState(
+    const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : (location.state?.phase || 0));
-        tab === 'error-codes' ? 1 : location.state?.phase || 0
-    );
     const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
     const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
     const [searchText, setSearchText] = useState('');
@@ -75,7 +68,7 @@ const AddBrandDevice = () => {
             const values = solutionForm.getFieldsValue(true);
             const solutions = [];
 
-            solutionFields.forEach((fieldKey) => {
+            solutionFields.forEach(fieldKey => {
                 let solution = null;
 
                 if (values.solution_items && values.solution_items[fieldKey]) {
@@ -92,16 +85,9 @@ const AddBrandDevice = () => {
                 if (solutionType === 'text') {
                     isValid = solution.text && solution.text.trim() !== '';
                 } else if (solutionType === 'file') {
-                    const hasPathSolution =
+                    const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== '';
-                        solution.path_solution && solution.path_solution.trim() !== '';
+                    const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0);
-                    const hasFileUpload =
+                    const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0);
-                        solution.fileUpload &&
-                        typeof solution.fileUpload === 'object' &&
-                        Object.keys(solution.fileUpload).length > 0;
-                    const hasFile =
-                        solution.file &&
-                        typeof solution.file === 'object' &&
-                        Object.keys(solution.file).length > 0;
                     isValid = hasPathSolution || hasFileUpload || hasFile;
                 }
 
@@ -132,9 +118,9 @@ const AddBrandDevice = () => {
                             text: '',
                             status: true,
                             file: null,
-                            fileUpload: null,
+                            fileUpload: null
-                        },
+                        }
-                    },
+                    }
                 });
             }, 100);
         }
@@ -142,6 +128,7 @@ const AddBrandDevice = () => {
     };
 
     const setSolutionsForExistingRecord = (solutions, targetForm) => {
+
         if (!targetForm || !solutions || solutions.length === 0) {
             return;
         }
@@ -166,14 +153,11 @@ const AddBrandDevice = () => {
                 fileObject = {
                     uploadPath: solution.path_solution || solution.path_document,
                     path_solution: solution.path_solution || solution.path_document,
-                    name:
+                    name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File',
-                        solution.file_upload_name ||
-                        (solution.path_solution || solution.path_document).split('/').pop() ||
-                        'File',
                     type_solution: solution.type_solution,
                     isExisting: true,
                     size: 0,
-                    url: solution.path_solution || solution.path_document,
+                    url: solution.path_solution || solution.path_document
                 };
             }
 
@@ -186,7 +170,7 @@ const AddBrandDevice = () => {
                 file: fileObject,
                 fileUpload: fileObject,
                 path_solution: solution.path_solution || solution.path_document || null,
-                fileName: solution.file_upload_name || null,
+                fileName: solution.file_upload_name || null
             };
         });
 
@@ -196,35 +180,28 @@ const AddBrandDevice = () => {
 
         setSolutionStatuses(newSolutionStatuses);
 
+
         targetForm.resetFields();
 
         setTimeout(() => {
             targetForm.setFieldsValue({
-                solution_items: solutionItems,
+                solution_items: solutionItems
             });
 
             setTimeout(() => {
-                Object.keys(solutionItems).forEach((key) => {
+                Object.keys(solutionItems).forEach(key => {
                     const solution = solutionItems[key];
                     targetForm.setFieldValue(['solution_items', key, 'name'], solution.name);
                     targetForm.setFieldValue(['solution_items', key, 'type'], solution.type);
                     targetForm.setFieldValue(['solution_items', key, 'text'], solution.text);
                     targetForm.setFieldValue(['solution_items', key, 'file'], solution.file);
-                    targetForm.setFieldValue(
+                    targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
-                        ['solution_items', key, 'fileUpload'],
-                        solution.fileUpload
-                    );
                     targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
-                    targetForm.setFieldValue(
+                    targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
-                        ['solution_items', key, 'path_solution'],
+                    targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
-                        solution.path_solution
-                    );
-                    targetForm.setFieldValue(
-                        ['solution_items', key, 'fileName'],
-                        solution.fileName
-                    );
                 });
 
+
                 const finalValues = targetForm.getFieldsValue();
             }, 100);
         }, 100);
@@ -232,14 +209,14 @@ const AddBrandDevice = () => {
 
     const handleAddSolutionField = () => {
         const newKey = Math.max(...solutionFields, 0) + 1;
-        setSolutionFields((prev) => [...prev, newKey]);
+        setSolutionFields(prev => [...prev, newKey]);
-        setSolutionTypes((prev) => ({ ...prev, [newKey]: 'text' }));
+        setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
-        setSolutionStatuses((prev) => ({ ...prev, [newKey]: true }));
+        setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
     };
 
     const handleRemoveSolutionField = (fieldKey) => {
         if (solutionFields.length > 1) {
-            setSolutionFields((prev) => prev.filter((key) => key !== fieldKey));
+            setSolutionFields(prev => prev.filter(key => key !== fieldKey));
             const newTypes = { ...solutionTypes };
             const newStatuses = { ...solutionStatuses };
             delete newTypes[fieldKey];
@@ -256,7 +233,7 @@ const AddBrandDevice = () => {
     };
 
     const handleSolutionTypeChange = (fieldKey, type) => {
-        setSolutionTypes((prev) => ({ ...prev, [fieldKey]: type }));
+        setSolutionTypes(prev => ({ ...prev, [fieldKey]: type }));
 
         if (type === 'file') {
             solutionForm.setFieldValue(['solution_items', fieldKey, 'text'], '');
@@ -269,7 +246,7 @@ const AddBrandDevice = () => {
     };
 
     const handleSolutionStatusChange = (fieldKey, status) => {
-        setSolutionStatuses((prev) => ({ ...prev, [fieldKey]: status }));
+        setSolutionStatuses(prev => ({ ...prev, [fieldKey]: status }));
     };
 
     const handleNextStep = async () => {
@@ -282,7 +259,7 @@ const AddBrandDevice = () => {
                 brand_type: brandValues.brand_type || '',
                 brand_manufacture: brandValues.brand_manufacture || '',
                 brand_model: brandValues.brand_model || '',
-                is_active: brandValues.is_active !== undefined ? brandValues.is_active : true,
+                is_active: brandValues.is_active !== undefined ? brandValues.is_active : true
             };
 
             const response = await createBrand(brandApiData);
@@ -291,7 +268,7 @@ const AddBrandDevice = () => {
                 const newBrandInfo = {
                     ...brandValues,
                     brand_id: response.data.brand_id,
-                    brand_code: response.data.brand_code,
+                    brand_code: response.data.brand_code
                 };
                 setBrandInfo(newBrandInfo);
                 setTemporaryBrandId(response.data.brand_id);
@@ -330,7 +307,8 @@ const AddBrandDevice = () => {
         if (isTemporaryBrand && temporaryBrandId) {
             try {
                 await deleteBrand(temporaryBrandId);
-            } catch (error) {}
+            } catch (error) {
+            }
         }
         navigate('/master/brand-device');
     };
@@ -382,6 +360,8 @@ const AddBrandDevice = () => {
         setTrigerFilter((prev) => !prev);
     };
 
+
+
     const resetErrorCodeForm = () => {
         errorCodeForm.resetFields();
         errorCodeForm.setFieldsValue({
@@ -411,16 +391,16 @@ const AddBrandDevice = () => {
                 return;
             }
 
-            // if (!solutionData || solutionData.length === 0) {
+            if (!solutionData || solutionData.length === 0) {
-            //     NotifAlert({
+                NotifAlert({
-            //         icon: 'warning',
+                    icon: 'warning',
-            //         title: 'Perhatian',
+                    title: 'Perhatian',
-            //         message: 'Setiap error code harus memiliki minimal 1 solution!',
+                    message: 'Setiap error code harus memiliki minimal 1 solution!',
-            //     });
+                });
-            //     return;
+                return;
-            // }
+            }
 
-            const formattedSolutions = solutionData.map((solution) => {
+            const formattedSolutions = solutionData.map(solution => {
                 const solutionType = solution.type || 'text';
 
                 let typeSolution = solutionType === 'text' ? 'text' : 'image';
@@ -442,11 +422,7 @@ const AddBrandDevice = () => {
                 } else {
                     formattedSolution.text_solution = '';
 
-                    formattedSolution.path_solution =
+                    formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || '';
-                        solution.path_solution ||
-                        solution.file?.uploadPath ||
-                        solution.fileUpload?.uploadPath ||
-                        '';
                 }
 
                 if (formattedSolution.brand_code_solution_id) {
@@ -464,7 +440,7 @@ const AddBrandDevice = () => {
                 path_icon: errorCodeIcon?.uploadPath || '',
                 is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
                 solution: formattedSolutions,
-                spareparts: selectedSparepartIds || [],
+                spareparts: selectedSparepartIds || []
             };
 
             let response;
@@ -480,13 +456,11 @@ const AddBrandDevice = () => {
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
-                    message: editingErrorCodeKey
+                    message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!',
-                        ? 'Error code berhasil diupdate!'
-                        : 'Error code berhasil ditambahkan!',
                 });
 
                 resetErrorCodeForm();
-                setTrigerFilter((prev) => !prev);
+                setTrigerFilter(prev => !prev);
             } else {
                 NotifAlert({
                     icon: 'error',
@@ -505,10 +479,12 @@ const AddBrandDevice = () => {
         }
     };
 
+
     const handleErrorCodeIconRemove = () => {
         setErrorCodeIcon(null);
     };
 
+
     const handleFinish = async () => {
         setConfirmLoading(true);
         try {
@@ -530,10 +506,10 @@ const AddBrandDevice = () => {
                     const response = await getErrorCodesByBrandId(brandInfo.brand_id, queryParams);
 
                     if (response && response.statusCode === 200 && response.data) {
-                        const freshErrorCodes = response.data.map((ec) => ({
+                        const freshErrorCodes = response.data.map(ec => ({
                             ...ec,
                             tempId: `existing_${ec.error_code_id}`,
-                            status: 'existing',
+                            status: 'existing'
                         }));
                         setApiErrorCodes(freshErrorCodes);
 
@@ -541,8 +517,7 @@ const AddBrandDevice = () => {
                             NotifAlert({
                                 icon: 'warning',
                                 title: 'Perhatian',
-                                message:
+                                message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
-                                    'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
                             });
                             return;
                         }
@@ -551,8 +526,7 @@ const AddBrandDevice = () => {
                             NotifAlert({
                                 icon: 'warning',
                                 title: 'Perhatian',
-                                message:
+                                message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
-                                    'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
                             });
                             return;
                         }
@@ -617,7 +591,11 @@ const AddBrandDevice = () => {
                             <Spin size="large" />
                         </div>
                     )}
-                    <BrandForm form={brandForm} isEdit={false} brandInfo={brandInfo} />
+                    <BrandForm
+                        form={brandForm}
+                        isEdit={false}
+                        brandInfo={brandInfo}
+                    />
                 </div>
             );
         }
@@ -657,39 +635,31 @@ const AddBrandDevice = () => {
                     </Col>
 
                     <Col xs={24} md={16} lg={16}>
-                        <div
+                        <div style={{
-                            style={{
+                            paddingLeft: '12px'
-                                paddingLeft: '12px',
+                        }}>
-                            }}
-                        >
                             <Card
                                 title={
-                                    <div
+                                    <div style={{
-                                        style={{
                                         display: 'flex',
                                         alignItems: 'center',
                                         justifyContent: 'space-between',
-                                            width: '100%',
+                                        width: '100%'
-                                        }}
+                                    }}>
-                                    >
+                                        <span style={{
-                                        <span
-                                            style={{
                                             fontSize: '16px',
                                             fontWeight: '600',
                                             color: '#262626',
                                             display: 'flex',
                                             alignItems: 'center',
-                                                gap: '8px',
+                                            gap: '8px'
-                                            }}
+                                        }}>
-                                        >
+                                            <span style={{
-                                            <span
-                                                style={{
                                                 width: '4px',
                                                 height: '20px',
                                                 backgroundColor: '#23A55A',
-                                                    borderRadius: '2px',
+                                                borderRadius: '2px'
-                                                }}
+                                            }}></span>
-                                            ></span>
                                             Error Code Form
                                         </span>
                                         <Button
@@ -705,51 +675,43 @@ const AddBrandDevice = () => {
                                                 padding: '0 24px',
                                                 fontWeight: '500',
                                                 boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
-                                                transition: 'all 0.3s ease',
+                                                transition: 'all 0.3s ease'
                                             }}
                                             onMouseEnter={(e) => {
-                                                e.target.style.boxShadow =
+                                                e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
-                                                    '0 4px 8px rgba(35, 165, 90, 0.3)';
                                             }}
                                             onMouseLeave={(e) => {
-                                                e.target.style.boxShadow =
+                                                e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
-                                                    '0 2px 4px rgba(35, 165, 90, 0.2)';
                                             }}
                                         >
-                                            {editingErrorCodeKey
+                                            {editingErrorCodeKey ? 'Update Error Code' : 'Save Error Code'}
-                                                ? 'Update Error Code'
-                                                : 'Save Error Code'}
                                         </Button>
                                     </div>
                                 }
                                 style={{
                                     width: '100%',
                                     boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
-                                    borderRadius: '12px',
+                                    borderRadius: '12px'
                                 }}
                                 styles={{
                                     body: { padding: '16px 24px 12px 24px' },
                                     header: {
                                         padding: '16px 24px',
                                         borderBottom: '1px solid #f0f0f0',
-                                        backgroundColor: '#fafafa',
+                                        backgroundColor: '#fafafa'
-                                    },
+                                    }
                                 }}
                             >
-                                <div
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                                    style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+                                    <div style={{
-                                >
-                                    <div
-                                        style={{
                                         padding: '16px',
                                         border: '1px solid #f0f0f0',
                                         borderRadius: '10px',
                                         backgroundColor: '#ffffff',
                                         marginBottom: '0',
                                         transition: 'all 0.3s ease',
-                                            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                        boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                        }}
+                                    }}>
-                                    >
                                         <ErrorCodeForm
                                             errorCodeForm={errorCodeForm}
                                             isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
@@ -762,42 +724,29 @@ const AddBrandDevice = () => {
 
                                     <Row gutter={[20, 0]} style={{ marginTop: '0' }}>
                                         <Col xs={24} md={12} lg={12}>
-                                            <div
+                                            <div style={{
-                                                style={{
                                                 padding: '16px',
                                                 border: '1px solid #f0f0f0',
                                                 borderRadius: '10px',
                                                 backgroundColor: '#ffffff',
                                                 transition: 'all 0.3s ease',
-                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                                }}
+                                            }}>
-                                            >
+                                                <div style={{
-                                                <div
-                                                    style={{
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
                                                     marginBottom: '12px',
                                                     paddingBottom: '8px',
-                                                        borderBottom: '1px solid #f5f5f5',
+                                                    borderBottom: '1px solid #f5f5f5'
-                                                    }}
+                                                }}>
-                                                >
+                                                    <div style={{
-                                                    <div
-                                                        style={{
                                                         width: '3px',
                                                         height: '16px',
                                                         backgroundColor: '#1890ff',
-                                                            borderRadius: '2px',
+                                                        borderRadius: '2px'
-                                                        }}
+                                                    }}></div>
-                                                    ></div>
+                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
-                                                    <h4
-                                                        style={{
-                                                            margin: 0,
-                                                            color: '#262626',
-                                                            fontSize: '14px',
-                                                            fontWeight: '600',
-                                                        }}
-                                                    >
                                                         Solution
                                                     </h4>
                                                 </div>
@@ -807,23 +756,14 @@ const AddBrandDevice = () => {
                                                     solutionTypes={solutionTypes}
                                                     solutionStatuses={solutionStatuses}
                                                     onAddSolutionField={handleAddSolutionField}
-                                                    onRemoveSolutionField={
+                                                    onRemoveSolutionField={handleRemoveSolutionField}
-                                                        handleRemoveSolutionField
-                                                    }
                                                     onSolutionTypeChange={handleSolutionTypeChange}
-                                                    onSolutionStatusChange={
+                                                    onSolutionStatusChange={handleSolutionStatusChange}
-                                                        handleSolutionStatusChange
+                                                    onSolutionFileUpload={(fileData) => {
-                                                    }
+                                                    }}
-                                                    onSolutionFileUpload={(fileData) => {}}
                                                     onFileView={(fileData) => {
-                                                        if (
+                                                        if (fileData && (fileData.url || fileData.uploadPath)) {
-                                                            fileData &&
+                                                            window.open(fileData.url || fileData.uploadPath, '_blank');
-                                                            (fileData.url || fileData.uploadPath)
-                                                        ) {
-                                                            window.open(
-                                                                fileData.url || fileData.uploadPath,
-                                                                '_blank'
-                                                            );
                                                         }
                                                     }}
                                                     isReadOnly={false}
@@ -832,55 +772,40 @@ const AddBrandDevice = () => {
                                             </div>
                                         </Col>
                                         <Col xs={24} md={12} lg={12}>
-                                            <div
+                                            <div style={{
-                                                style={{
                                                 padding: '16px',
                                                 border: '1px solid #f0f0f0',
                                                 borderRadius: '10px',
                                                 backgroundColor: '#ffffff',
                                                 transition: 'all 0.3s ease',
-                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                                }}
+                                            }}>
-                                            >
+                                                <div style={{
-                                                <div
-                                                    style={{
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
                                                     marginBottom: '12px',
                                                     paddingBottom: '8px',
-                                                        borderBottom: '1px solid #f5f5f5',
+                                                    borderBottom: '1px solid #f5f5f5'
-                                                    }}
+                                                }}>
-                                                >
+                                                    <div style={{
-                                                    <div
-                                                        style={{
                                                         width: '3px',
                                                         height: '16px',
                                                         backgroundColor: '#faad14',
-                                                            borderRadius: '2px',
+                                                        borderRadius: '2px'
-                                                        }}
+                                                    }}></div>
-                                                    ></div>
+                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
-                                                    <h4
-                                                        style={{
-                                                            margin: 0,
-                                                            color: '#262626',
-                                                            fontSize: '14px',
-                                                            fontWeight: '600',
-                                                        }}
-                                                    >
                                                         Sparepart Selection
                                                     </h4>
                                                 </div>
-                                                <div
+                                                <div style={{
-                                                    style={{
                                                     maxHeight: '45vh',
                                                     overflow: 'auto',
                                                     border: '1px solid #e8e8e8',
                                                     borderRadius: '8px',
                                                     padding: '12px',
-                                                        backgroundColor: '#fafafa',
+                                                    backgroundColor: '#fafafa'
-                                                    }}
+                                                }}>
-                                                >
                                                     <SparepartSelect
                                                         selectedSparepartIds={selectedSparepartIds}
                                                         onSparepartChange={setSelectedSparepartIds}
@@ -891,16 +816,15 @@ const AddBrandDevice = () => {
                                         </Col>
                                     </Row>
 
-                                    <div
+                                    <div style={{
-                                        style={{
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         padding: '16px 0 0 0',
                                         borderTop: '1px solid #f0f0f0',
-                                            marginTop: '12px',
+                                        marginTop: '12px'
-                                        }}
+                                    }}>
-                                    >
+
                                         {editingErrorCodeKey && (
                                             <Button
                                                 size="large"
@@ -913,7 +837,7 @@ const AddBrandDevice = () => {
                                                     height: '40px',
                                                     padding: '0 24px',
                                                     fontWeight: '500',
-                                                    transition: 'all 0.3s ease',
+                                                    transition: 'all 0.3s ease'
                                                 }}
                                                 onMouseEnter={(e) => {
                                                     e.target.style.borderColor = '#ff4d4f';
@@ -947,7 +871,7 @@ const AddBrandDevice = () => {
 
         setBreadcrumbItems([
             {
-                title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>,
+                title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
             },
             {
                 title: (
@@ -971,11 +895,12 @@ const AddBrandDevice = () => {
         if (location.state?.fromFileViewer && location.state.phase !== undefined) {
             setCurrentStep(location.state.phase);
         }
+
     }, [setBreadcrumbItems, navigate, searchParams, location.state]);
 
     useEffect(() => {
         if (brandInfo.brand_id && currentStep === 1) {
-            setTrigerFilter((prev) => !prev);
+            setTrigerFilter(prev => !prev);
         }
     }, [brandInfo.brand_id, currentStep]);
 
@@ -988,7 +913,8 @@ const AddBrandDevice = () => {
                         const errorCodes = response.data || [];
                         setApiErrorCodes(errorCodes);
                     }
-                } catch (error) {}
+                } catch (error) {
+                }
             }
         };
         fetchErrorCodes();
@@ -999,7 +925,8 @@ const AddBrandDevice = () => {
             if (isTemporaryBrand && temporaryBrandId && currentStep === 0) {
                 try {
                     await deleteBrand(temporaryBrandId);
-                } catch (error) {}
+                } catch (error) {
+                }
             }
         };
 
@@ -1010,6 +937,7 @@ const AddBrandDevice = () => {
         };
     }, [isTemporaryBrand, temporaryBrandId, currentStep]);
 
+
     return (
         <ConfigProvider
             theme={{
@@ -1060,9 +988,14 @@ const AddBrandDevice = () => {
                 <Divider />
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                     <div>
-                        <Button onClick={handleCancel}>Cancel</Button>
+                        <Button onClick={handleCancel}>
+                            Cancel
+                        </Button>
                         {currentStep === 1 && (
-                            <Button onClick={handlePrevStep} style={{ marginLeft: 8 }}>
+                            <Button
+                                onClick={handlePrevStep}
+                                style={{ marginLeft: 8 }}
+                            >
                                 Kembali ke Brand Info
                             </Button>
                         )}

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -479,14 +479,14 @@ const EditBrandDevice = () => {
                 return;
             }
 
-            // if (!solutionData || solutionData.length === 0) {
+            if (!solutionData || solutionData.length === 0) {
-            //     NotifAlert({
+                NotifAlert({
-            //         icon: 'warning',
+                    icon: 'warning',
-            //         title: 'Perhatian',
+                    title: 'Perhatian',
-            //         message: 'Setiap error code harus memiliki minimal 1 solution!',
+                    message: 'Setiap error code harus memiliki minimal 1 solution!',
-            //     });
+                });
-            //     return;
+                return;
-            // }
+            }
 
             const formattedSolutions = solutionData.map(solution => {
                 const solutionType = solution.type || 'text';

src/pages/notification/component/ListNotification.jsx

@@ -42,9 +42,6 @@ import {
     getAllNotification,
     getNotificationLogByNotificationId,
     getNotificationDetail,
-    resendChatByUser,
-    resendChatAllUser,
-    searchData,
 } from '../../../api/notification';
 
 const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -67,8 +64,7 @@ const transformNotificationData = (apiData) => {
               }) + ' WIB'
             : 'N/A',
         location: item.plant_sub_section_name || item.device_location || 'Location not specified',
-        details: item.device_name || '-',
+        details: item.message_error_issue || 'No details available',
-        errId: item.notification_error_id || 0,
         link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
         subsection: item.plant_sub_section_name || 'N/A',
         isRead: item.is_read,
@@ -199,9 +195,9 @@ const ListNotification = memo(function ListNotification(props) {
             content: `Are you sure you want to resend the notification for "${notification.title}"?`,
             okText: 'Resend',
             cancelText: 'Cancel',
-            async onOk() {
+            onOk() {
                 console.log('Resending notification:', notification.id);
-                await resendChatAllUser(notification.errId);
+
                 message.success(
                     `Notification for "${notification.title}" has been resent successfully.`
                 );
@@ -220,49 +216,13 @@ const ListNotification = memo(function ListNotification(props) {
         );
     };
 
-    const fetchSearch = async (data) => {
-        setLoading(true);
-        try {
-            const response = await searchData(data);
-            if (response && response.data) {
-                const transformedData = transformNotificationData(response.data);
-                setNotifications(transformedData);
-
-                // Update pagination with API response or calculate from data
-                if (response.paging) {
-                    setPagination({
-                        current_page: response.paging.current_page || page,
-                        current_limit: response.paging.current_limit || limit,
-                        total_limit: response.paging.total_limit || transformedData.length,
-                        total_page:
-                            response.paging.total_page || Math.ceil(transformedData.length / limit),
-                    });
-                } else {
-                    // Fallback: calculate pagination from data
-                    const totalItems = transformedData.length;
-                    setPagination((prev) => ({
-                        ...prev,
-                        current_page: page,
-                        current_limit: limit,
-                        total_limit: totalItems,
-                        total_page: Math.ceil(totalItems / limit),
-                    }));
-                }
-            }
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
     const handleSearch = () => {
-        fetchSearch(searchValue);
+        setSearchTerm(searchValue);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        fetchSearch('');
+        setSearchTerm('');
     };
 
     const getUnreadCount = () => notifications.filter((n) => !n.isRead).length;
@@ -325,16 +285,14 @@ const ListNotification = memo(function ListNotification(props) {
                     name: user.contact_name,
                     phone: user.contact_phone,
                     status: user.is_send ? 'Delivered' : 'Pending',
-                    timestamp: user.updated_at
+                    timestamp: user.created_at
-                        ? new Date(user.updated_at)
+                        ? new Date(user.created_at).toLocaleString('id-ID', {
-                              .toLocaleString('id-ID', {
                               day: '2-digit',
                               month: '2-digit',
                               year: 'numeric',
                               hour: '2-digit',
                               minute: '2-digit',
-                              })
+                          }) + ' WIB'
-                              .replace('.', ':') + ' WIB'
                         : 'N/A',
                 }));
                 setUserHistoryData(transformedUsers);
@@ -421,7 +379,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                         <Text strong>{notification.title}</Text>
                                                         <div style={{ marginTop: '4px' }}>
                                                             <Text style={{ color }}>
-                                                                Error Code {notification.issue}
+                                                                {notification.issue}
                                                             </Text>
                                                         </div>
                                                     </div>
@@ -438,7 +396,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                 </div>
                                             </Col>
                                             <Col flex="auto">
-                                                {/* <div
+                                                <div
                                                     style={{
                                                         display: 'flex',
                                                         gap: '8px',
@@ -461,18 +419,12 @@ const ListNotification = memo(function ListNotification(props) {
                                                     >
                                                         {notification.details}
                                                     </Paragraph>
-                                                </div> */}
+                                                </div>
                                                 <Space
                                                     direction="vertical"
                                                     size={4}
                                                     style={{ fontSize: '13px', color: '#8c8c8c' }}
                                                 >
-                                                    <Space>
-                                                        <MobileOutlined />
-                                                        <Text type="secondary">
-                                                            {notification.details}
-                                                        </Text>
-                                                    </Space>
                                                     <Space>
                                                         <ClockCircleOutlined />
                                                         <Text type="secondary">
@@ -486,10 +438,17 @@ const ListNotification = memo(function ListNotification(props) {
                                                         </Text>
                                                     </Space>
                                                     <Space>
+                                                        <LinkOutlined />
+                                                        <AntdLink
+                                                            href={notification.link}
+                                                            target="_blank"
+                                                        >
+                                                            {notification.link}
+                                                        </AntdLink>
                                                         <Button
                                                             type="link"
                                                             icon={<SendOutlined />}
-                                                            style={{ paddingLeft: '0px' }}
+                                                            style={{ paddingLeft: '8px' }}
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 handleResend(notification);
@@ -647,8 +606,10 @@ const ListNotification = memo(function ListNotification(props) {
                                         type="primary"
                                         ghost
                                         icon={<SendOutlined />}
-                                        onClick={async () => {
+                                        onClick={() => {
-                                            await resendChatByUser(user.id, user.phone);
+                                            message.info(
+                                                'Resend feature is not available yet. This feature is still under development.'
+                                            );
                                         }}
                                     >
                                         Resend
@@ -685,7 +646,7 @@ const ListNotification = memo(function ListNotification(props) {
                         padding: '0 16px',
                         position: 'relative',
                         border: '1px solid #f0f0f0',
-                        borderRadius: '4px',
+                        borderRadius: '4px'
                     }}
                 >
                     <div style={{ position: 'relative' }}>
@@ -734,8 +695,8 @@ const ListNotification = memo(function ListNotification(props) {
                                 {/* Kolom Kanan: Card */}
                                 <Col flex="auto">
                                     <Card size="small" style={{ borderColor: '#91d5ff' }}>
-                                        <Row gutter={[16, 8]} align="top">
+                                        <Row gutter={[16, 8]} align="middle">
-                                            <Col xs={24} md={10}>
+                                            <Col xs={24} md={12}>
                                                 <Space direction="vertical" size={4}>
                                                     <Space>
                                                         <ClockCircleOutlined />
@@ -746,16 +707,11 @@ const ListNotification = memo(function ListNotification(props) {
                                                             Added at {log.timestamp}
                                                         </Text>
                                                     </Space>
-
-                                                    <div>
-                                                        <Text strong>
-                                                            {log.addedBy.name}
-                                                        </Text>
-                                                    </div>
-
                                                     <div>
+                                                        <Text strong>Added by: {log.addedBy.name}</Text>
                                                         <span
                                                             style={{
+                                                                marginLeft: '8px',
                                                                 border: '1px solid #52c41a',
                                                                 color: '#52c41a',
                                                                 padding: '2px 6px',
@@ -768,8 +724,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                     </div>
                                                 </Space>
                                             </Col>
-                                            <Col xs={24} md={14}>
+                                            <Col xs={24} md={12}>
-                                                <Text strong>Description:</Text>
                                                 <Paragraph
                                                     style={{
                                                         color: '#595959',
@@ -1457,7 +1412,7 @@ const ListNotification = memo(function ListNotification(props) {
                             </div>
                         ) : (
                             <Typography.Title level={4} style={{ margin: 0 }}>
-                                {modalContent === 'user' && 'History User Notification'}
+                                {modalContent === 'user' && 'User History Notification'}
                                 {modalContent === 'log' && 'Log History Notification'}
                             </Typography.Title>
                         )}

src/pages/notification/component/UserHistoryModal.jsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import { Modal, Typography, Card, Row, Col, Avatar, Tag, Button, Space } from 'antd';
-import {
+import { UserOutlined, PhoneOutlined, CheckCircleOutlined, SyncOutlined, SendOutlined } from '@ant-design/icons';
-    UserOutlined,
-    PhoneOutlined,
-    CheckCircleOutlined,
-    SyncOutlined,
-    SendOutlined,
-} from '@ant-design/icons';
 
 const { Text } = Typography;
 
@@ -47,17 +41,9 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
     const getStatusTag = (status) => {
         switch (status) {
             case 'delivered':
-                return (
+                return <Tag icon={<CheckCircleOutlined />} color="success">Delivered</Tag>;
-                    <Tag icon={<CheckCircleOutlined />} color="success">
-                        Delivered
-                    </Tag>
-                );
             case 'sent':
-                return (
+                return <Tag icon={<SyncOutlined spin />} color="processing">Sent</Tag>;
-                    <Tag icon={<SyncOutlined spin />} color="processing">
-                        Sent
-                    </Tag>
-                );
             case 'failed':
                 return <Tag color="error">Failed</Tag>;
             default:
@@ -69,7 +55,7 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
         <Modal
             title={
                 <Text strong style={{ fontSize: '18px' }}>
-                    History User Notification
+                    User History Notification
                 </Text>
             }
             open={visible}
@@ -92,13 +78,7 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
                                         <Avatar size="large" icon={<UserOutlined />} />
                                         <div>
                                             <Text strong>{user.name}</Text>
-                                            <div
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                                style={{
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: '4px',
-                                                }}
-                                            >
                                                 <PhoneOutlined style={{ color: '#8c8c8c' }} />
                                                 <Text type="secondary">{user.phone}</Text>
                                             </div>

src/pages/notification/detail/UserHistory.jsx

@@ -1,37 +1,14 @@
 import React from 'react';
 import { Button, Row, Col, Card, Badge, Typography, Space, Divider } from 'antd';
-import {
+import { SendOutlined, MobileOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
-    SendOutlined,
-    MobileOutlined,
-    CheckCircleFilled,
-    ArrowLeftOutlined,
-} from '@ant-design/icons';
 
 const { Text } = Typography;
 
 // Dummy data for user history
 const userHistoryData = [
-    {
+    { id: 1, name: 'John Doe', phone: '081234567890', status: 'Delivered', timestamp: '04-11-2025 11:40 WIB' },
-        id: 1,
+    { id: 2, name: 'Jane Smith', phone: '087654321098', status: 'Delivered', timestamp: '04-11-2025 11:41 WIB' },
-        name: 'John Doe',
+    { id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
-        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',
-    },
 ];
 
 const UserHistory = ({ notification, onBack }) => {
@@ -41,9 +18,7 @@ const UserHistory = ({ notification, onBack }) => {
                 <Col>
                     <Space align="center">
                         <Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack} />
-                        <Typography.Title level={4} style={{ margin: 0 }}>
+                        <Typography.Title level={4} style={{ margin: 0 }}>User History Notification</Typography.Title>
-                            History User Notification
-                        </Typography.Title>
                     </Space>
                     <Text type="secondary" style={{ marginLeft: '40px' }}>
                         {notification.title} - {notification.issue}
@@ -52,34 +27,25 @@ const UserHistory = ({ notification, onBack }) => {
             </Row>
 
             <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-                {userHistoryData.map((user) => (
+                {userHistoryData.map(user => (
-                    <Card
+                    <Card key={user.id} style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}>
-                        key={user.id}
-                        style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}
-                    >
                         <Row align="middle" justify="space-between">
                             <Col>
                                 <Space align="center">
                                     <Text strong>{user.name}</Text>
                                     <Text>|</Text>
-                                    <Text>
+                                    <Text><MobileOutlined /> {user.phone}</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">
+                                    <Text type="secondary">Success Delivered at {user.timestamp}</Text>
-                                        Success Delivered at {user.timestamp}
-                                    </Text>
                                 </Space>
                             </Col>
                             <Col>
-                                <Button type="primary" ghost icon={<SendOutlined />}>
+                                <Button type="primary" ghost icon={<SendOutlined />}>Resend</Button>
-                                    Resend
-                                </Button>
                             </Col>
                         </Row>
                     </Card>

src/pages/notificationDetail/IndexNotificationDetail.jsx

@@ -14,8 +14,6 @@ import {
     message,
     Avatar,
     Tag,
-    Badge,
-    Divider,
 } from 'antd';
 import {
     ArrowLeftOutlined,
@@ -35,16 +33,12 @@ import {
     CheckCircleOutlined,
     SyncOutlined,
     SendOutlined,
-    MobileOutlined,
-    ClockCircleOutlined,
 } from '@ant-design/icons';
 import {
     getNotificationDetail,
     createNotificationLog,
     getNotificationLogByNotificationId,
-    updateIsRead,
     resendNotificationToUser,
-    resendChatByUser,
 } from '../../api/notification';
 
 const { Content } = Layout;
@@ -113,19 +107,8 @@ const getUsersFromNotification = (notification) => {
         id: user.notification_error_user_id.toString(),
         name: user.contact_name,
         phone: user.contact_phone,
-        status: user.is_send ? 'Delivered' : 'Pending',
+        status: user.is_send ? 'sent' : 'pending',
         loading: user.loading || false,
-        timestamp: user.updated_at
-            ? new Date(user.updated_at)
-                  .toLocaleString('id-ID', {
-                      day: '2-digit',
-                      month: '2-digit',
-                      year: 'numeric',
-                      hour: '2-digit',
-                      minute: '2-digit',
-                  })
-                  .replace('.', ':') + ' WIB'
-            : 'N/A',
     }));
 };
 
@@ -258,9 +241,6 @@ const NotificationDetailTab = (props) => {
 
                     // Fetch log history
                     fetchLogHistory(notificationId);
-
-                    // Fetch using the actual API
-                    const resUpdate = await updateIsRead(notificationId);
                 } else {
                     throw new Error('Notification not found');
                 }
@@ -394,7 +374,7 @@ const NotificationDetailTab = (props) => {
                                                 <Text>{notification.title}</Text>
                                                 <div style={{ marginTop: '2px' }}>
                                                     <Text strong style={{ fontSize: '16px' }}>
-                                                        Error Code {notification.issue}
+                                                        {notification.issue}
                                                     </Text>
                                                 </div>
                                             </Col>
@@ -482,56 +462,101 @@ const NotificationDetailTab = (props) => {
                                                     <Row align="middle" justify="space-between">
                                                         <Col>
                                                             <Space align="center">
+                                                                <Avatar
+                                                                    size="large"
+                                                                    icon={<UserOutlined />}
+                                                                />
+                                                                <div>
                                                                     <Text strong>{user.name}</Text>
-                                                                <Text>|</Text>
+                                                                    <div
-                                                                <Text>
+                                                                        style={{
-                                                                    <MobileOutlined /> {user.phone}
+                                                                            display: 'flex',
-                                                                </Text>
+                                                                            alignItems: 'center',
-                                                                <Text>|</Text>
+                                                                            gap: '4px',
-                                                                <Badge
+                                                                        }}
-                                                                    status={
+                                                                    >
-                                                                        user.status === 'Delivered'
+                                                                        <PhoneOutlined
-                                                                            ? 'success'
+                                                                            style={{
-                                                                            : 'default'
+                                                                                color: '#8c8c8c',
-                                                                    }
+                                                                            }}
-                                                                    text={user.status}
                                                                         />
-                                                            </Space>
-                                                            <Divider style={{ margin: '8px 0' }} />
-                                                            <Space align="center">
-                                                                {user.status === 'Delivered' ? (
-                                                                    <CheckCircleFilled
-                                                                        style={{ color: '#52c41a' }}
-                                                                    />
-                                                                ) : (
-                                                                    <ClockCircleOutlined
-                                                                        style={{ color: '#faad14' }}
-                                                                    />
-                                                                )}
                                                                         <Text type="secondary">
-                                                                    {user.status === 'Delivered'
+                                                                            {user.phone}
-                                                                        ? 'Success Delivered at'
-                                                                        : 'Status '}{' '}
-                                                                    {user.timestamp}
                                                                         </Text>
+                                                                    </div>
+                                                                </div>
                                                             </Space>
                                                         </Col>
                                                         <Col>
-                                                            <Col>
+                                                            <Space align="center" size="large">
+                                                                {getStatusTag(user.status)}
                                                                 <Button
                                                                     type="primary"
-                                                                    ghost
                                                                     icon={<SendOutlined />}
-                                                                    onClick={async () => {
+                                                                    size="small"
-                                                                        await resendChatByUser(
+                                                                    loading={user.loading}
-                                                                            user.id,
+                                                                    onClick={async (e) => {
-                                                                            user.phone
+                                                                        e.stopPropagation();
+                                                                        const userId = parseInt(user.id);
+                                                                        try {
+                                                                            // Update user status to show loading
+                                                                            const updatedUsers = notification.users.map(u =>
+                                                                                u.notification_error_user_id === userId
+                                                                                    ? { ...u, loading: true }
+                                                                                    : u
                                                                             );
+                                                                            setNotification({
+                                                                                ...notification,
+                                                                                users: updatedUsers
+                                                                            });
+
+                                                                            // Call the resend API
+                                                                            const response = await resendNotificationToUser(
+                                                                                notification.notification_error_id,
+                                                                                userId
+                                                                            );
+
+                                                                            if (response && response.statusCode === 200) {
+                                                                                message.success(`Notification resent to ${user.name}`);
+
+                                                                                // Update user status
+                                                                                const updatedUsersAfterSuccess = notification.users.map(u =>
+                                                                                    u.notification_error_user_id === userId
+                                                                                        ? {
+                                                                                            ...u,
+                                                                                            is_send: true,
+                                                                                            status: 'sent',
+                                                                                            loading: false
+                                                                                        }
+                                                                                        : { ...u, loading: false }
+                                                                                );
+                                                                                setNotification({
+                                                                                    ...notification,
+                                                                                    users: updatedUsersAfterSuccess
+                                                                                });
+                                                                            } else {
+                                                                                throw new Error(response?.message || 'Failed to resend notification');
+                                                                            }
+                                                                        } catch (error) {
+                                                                            console.error('Error resending notification:', error);
+                                                                            message.error(error.message || 'Failed to resend notification');
+
+                                                                            // Reset loading state
+                                                                            const resetUsers = notification.users.map(u =>
+                                                                                u.notification_error_user_id === userId
+                                                                                    ? { ...u, loading: false }
+                                                                                    : u
+                                                                            );
+                                                                            setNotification({
+                                                                                ...notification,
+                                                                                users: resetUsers
+                                                                            });
+                                                                        }
                                                                     }}
                                                                 >
                                                                     Resend
                                                                 </Button>
-                                                            </Col>
+                                                            </Space>
                                                         </Col>
                                                     </Row>
                                                 </Card>
@@ -542,25 +567,58 @@ const NotificationDetailTab = (props) => {
                             </Col>
                         </Row>
 
-                        <Row gutter={[8, 8]}>
+                        <Row gutter={[8, 8]} style={{ marginBottom: 'px' }}>
                             <Col xs={24} md={8}>
-                                <div>
                                 <Card
                                     hoverable
-                                        bodyStyle={{ padding: '12px'}}
+                                    bodyStyle={{ padding: '12px', textAlign: 'center' }}
                                 >
                                     <Space>
                                         <BookOutlined
                                             style={{ fontSize: '16px', color: '#1890ff' }}
                                         />
-                                            <Text
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                                strong
-                                                style={{ fontSize: '16px', color: '#262626' }}
-                                            >
                                             Handling Guideline
                                         </Text>
                                     </Space>
+                                </Card>
+                            </Col>
+                            <Col xs={24} md={8}>
+                                <Card
+                                    hoverable
+                                    bodyStyle={{ padding: '12px', textAlign: 'center' }}
+                                >
+                                    <Space>
+                                        <ToolOutlined
+                                            style={{ fontSize: '16px', color: '#1890ff' }}
+                                        />
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                            Spare Part
+                                        </Text>
+                                    </Space>
+                                </Card>
+                            </Col>
+                            <Col xs={24} md={8}>
+                                <Card bodyStyle={{ padding: '12px', textAlign: 'center' }}>
+                                    <Space>
+                                        <HistoryOutlined
+                                            style={{ fontSize: '16px', color: '#1890ff' }}
+                                        />
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                            Log Activity
+                                        </Text>
+                                    </Space>
+                                </Card>
+                            </Col>
+                        </Row>
 
+                        <Row gutter={[8, 8]} style={{ marginTop: '-12px' }}>
+                            <Col xs={24} md={8}>
+                                <Card
+                                    size="small"
+                                    title="Guideline Documents"
+                                    style={{ height: '100%' }}
+                                >
                                     <Space
                                         direction="vertical"
                                         size="small"
@@ -574,8 +632,7 @@ const NotificationDetailTab = (props) => {
                                                     .map((sol, index) => (
                                                         <div
                                                             key={
-                                                                    sol.brand_code_solution_id ||
+                                                                sol.brand_code_solution_id || index
-                                                                    index
                                                             }
                                                         >
                                                             {sol.path_document ? (
@@ -590,8 +647,7 @@ const NotificationDetailTab = (props) => {
                                                                         <Text
                                                                             type="secondary"
                                                                             style={{
-                                                                                    fontSize:
+                                                                                fontSize: '10px',
-                                                                                        '10px',
                                                                             }}
                                                                         >
                                                                             PDF
@@ -603,8 +659,7 @@ const NotificationDetailTab = (props) => {
                                                                             display: 'flex',
                                                                             justifyContent:
                                                                                 'space-between',
-                                                                                alignItems:
+                                                                            alignItems: 'center',
-                                                                                    'center',
                                                                         }}
                                                                     >
                                                                         <div>
@@ -647,11 +702,6 @@ const NotificationDetailTab = (props) => {
                                                             sol.text_solution ? (
                                                                 <Card
                                                                     size="small"
-                                                                        title={
-                                                                            <Text strong>
-                                                                                {sol.solution_name}:
-                                                                            </Text>
-                                                                        }
                                                                     bodyStyle={{
                                                                         padding: '8px 12px',
                                                                         marginBottom: '4px',
@@ -660,8 +710,7 @@ const NotificationDetailTab = (props) => {
                                                                         <Text
                                                                             type="secondary"
                                                                             style={{
-                                                                                    fontSize:
+                                                                                fontSize: '10px',
-                                                                                        '10px',
                                                                             }}
                                                                         >
                                                                             {sol.type_solution.toUpperCase()}
@@ -669,10 +718,12 @@ const NotificationDetailTab = (props) => {
                                                                     }
                                                                 >
                                                                     <div>
+                                                                        <Text strong>
+                                                                            {sol.solution_name}:
+                                                                        </Text>
                                                                         <div
                                                                             style={{
-                                                                                    marginTop:
+                                                                                marginTop: '4px',
-                                                                                        '4px',
                                                                             }}
                                                                         >
                                                                             {sol.text_solution}
@@ -696,26 +747,13 @@ const NotificationDetailTab = (props) => {
                                         )}
                                     </Space>
                                 </Card>
-                                </div>
                             </Col>
                             <Col xs={24} md={8}>
-                                <div>
                                 <Card
-                                        hoverable
+                                    size="small"
-                                        bodyStyle={{ padding: '12px'}}
+                                    title="Required Spare Parts"
+                                    style={{ height: '100%' }}
                                 >
-                                        <Space>
-                                            <ToolOutlined
-                                                style={{ fontSize: '16px', color: '#1890ff' }}
-                                            />
-                                            <Text
-                                                strong
-                                                style={{ fontSize: '16px', color: '#262626' }}
-                                            >
-                                                Spare Part
-                                            </Text>
-                                        </Space>
-
                                     <Space
                                         direction="vertical"
                                         size="small"
@@ -799,11 +837,9 @@ const NotificationDetailTab = (props) => {
                                                                         marginTop: '8px',
                                                                     }}
                                                                 >
-                                                                        Kode:{' '}
+                                                                    Kode: {sparepart.sparepart_code}{' '}
-                                                                        {sparepart.sparepart_code} |
+                                                                    | Qty: {sparepart.sparepart_qty}{' '}
-                                                                        Qty:{' '}
+                                                                    | Unit:{' '}
-                                                                        {sparepart.sparepart_qty} |
-                                                                        Unit:{' '}
                                                                     {sparepart.sparepart_unit}
                                                                 </div>
                                                             </Space>
@@ -824,23 +860,9 @@ const NotificationDetailTab = (props) => {
                                         )}
                                     </Space>
                                 </Card>
-                                </div>
                             </Col>
-                            <Col xs={24} md={8}>
+                            <Col span={8}>
-                                <div>
+                                <Card size="small" style={{ height: '100%' }}>
-                                    <Card bodyStyle={{ padding: '12px'}}>
-                                        <Space>
-                                            <HistoryOutlined
-                                                style={{ fontSize: '16px', color: '#1890ff' }}
-                                            />
-                                            <Text
-                                                strong
-                                                style={{ fontSize: '16px', color: '#262626' }}
-                                            >
-                                                Log Activity
-                                            </Text>
-                                        </Space>
-
                                     <Space
                                         direction="vertical"
                                         size="small"
@@ -850,9 +872,7 @@ const NotificationDetailTab = (props) => {
                                             size="small"
                                             bodyStyle={{
                                                 padding: '8px 12px',
-                                                    backgroundColor: isAddingLog
+                                                backgroundColor: isAddingLog ? '#fafafa' : '#fff',
-                                                        ? '#fafafa'
-                                                        : '#fff',
                                             }}
                                         >
                                             <Space
@@ -862,10 +882,7 @@ const NotificationDetailTab = (props) => {
                                             >
                                                 {isAddingLog && (
                                                     <>
-                                                            <Text
+                                                        <Text strong style={{ fontSize: '12px' }}>
-                                                                strong
-                                                                style={{ fontSize: '12px' }}
-                                                            >
                                                             Add New Log / Update Progress
                                                         </Text>
                                                         <Input.TextArea
@@ -873,9 +890,7 @@ const NotificationDetailTab = (props) => {
                                                             placeholder="Tuliskan update penanganan di sini..."
                                                             value={newLogDescription}
                                                             onChange={(e) =>
-                                                                    setNewLogDescription(
+                                                                setNewLogDescription(e.target.value)
-                                                                        e.target.value
-                                                                    )
                                                             }
                                                             disabled={submitLoading}
                                                         />
@@ -927,22 +942,18 @@ const NotificationDetailTab = (props) => {
                                             >
                                                 <Paragraph
                                                     style={{ fontSize: '12px', margin: 0 }}
-                                                        // ellipsis={{ rows: 2 }}
+                                                    ellipsis={{ rows: 2 }}
                                                 >
                                                     <Text strong>{log.addedBy.name}:</Text>{' '}
                                                     {log.description}
                                                 </Paragraph>
-                                                    <Text
+                                                <Text type="secondary" style={{ fontSize: '11px' }}>
-                                                        type="secondary"
-                                                        style={{ fontSize: '11px' }}
-                                                    >
                                                     {log.timestamp}
                                                 </Text>
                                             </Card>
                                         ))}
                                     </Space>
                                 </Card>
-                                </div>
                             </Col>
                         </Row>
                     </Space>