yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #29
This commit is contained in:
Bragas Rexita Ecos Fernanda
2025-12-23 05:22:06 +00:00
parent 58d1f5c7ab 016c77a586
commit a33c9b3b92
13 changed files with 888 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.jsx
View File

@@ -53,6 +53,7 @@ import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
// Image Viewer
import ImageViewer from './Utils/ImageViewer';
import RedirectWa from './pages/blank/RedirectWa';
const App = () => {
return (
@@ -72,6 +73,8 @@ const App = () => {
element={<IndexVerificationSparepart />}
/>
<Route path="/redirect" element={<RedirectWa />} />
{/* Protected Routes */}
<Route path="/dashboard" element={<ProtectedRoute />}>
<Route path="home" element={<Home />} />

13
src/components/Global/ApiRequest.jsx
View File

@@ -70,7 +70,18 @@ async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = t
},
};
const rawToken = localStorage.getItem('token');
const tokenRedirect = sessionStorage.getItem('token_redirect');
let rawToken = '';
if (tokenRedirect !== null) {
rawToken = tokenRedirect;
// console.log(`sessionStorage: ${tokenRedirect}`);
} else {
rawToken = localStorage.getItem('token');
// console.log(`localStorage: ${rawToken}`);
}
if (token && rawToken) {
const cleanToken = rawToken.replace(/"/g, '');
request.headers['Authorization'] = `Bearer ${cleanToken}`;

2
src/layout/LayoutMenu.jsx
View File

@@ -146,7 +146,7 @@ const allItems = [
{
key: 'master-sparepart',
icon: <ToolOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/sparepart">sparepart</Link>,
label: <Link to="/master/sparepart">Sparepart</Link>,
},
// {
// key: 'master-shift',

49
src/pages/blank/RedirectWa.jsx Normal file
View File

@@ -0,0 +1,49 @@
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { verifyRedirect } from '../../api/auth';
import { encryptData } from '../../components/Global/Formatter';
import NotFound from './NotFound';
import Waiting from './Waiting';
import NotificationDetailTab from '../notificationDetail/IndexNotificationDetail';
export default function RedirectWa() {
const [idData, setIdData] = useState(0);
const [ready, setReady] = useState(0);
const location = useLocation();
// URLSearchParams untuk ambil query
const queryParams = new URLSearchParams(location.search);
const token = queryParams.get('token');
const handleInitForm = async (encodedToken) => {
const originalToken = decodeURIComponent(encodedToken);
// console.log(originalToken);
const response = await verifyRedirect({
tokenRedirect: originalToken,
});
console.log('tes', response);
const tokenResult = JSON.stringify(response.data?.accessToken);
sessionStorage.setItem('token_redirect', tokenResult);
response.data.auth = true;
sessionStorage.setItem('session', encryptData(response?.data));
setIdData(response.data.data.idData);
setReady(1);
};
useEffect(() => {
handleInitForm(token);
}, [idData]);
if (ready == 0) return <Waiting />;
if (idData === 0) return <NotFound />;
return <NotificationDetailTab id={idData} />;
}

4
src/pages/jadwalShift/component/ListJadwalShift.jsx
View File

@@ -352,7 +352,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
<Title level={3}>Jadwal Shift</Title>
<Divider />
<Row>
{/* <Row>
<Col xs={24}>
<Row justify="end" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
@@ -383,7 +383,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
</Col>
</Row>
</Col>
</Row>
</Row> */}
<div style={{ marginTop: '24px' }}>
{loading ? (

1
src/pages/master/brandDevice/component/ListErrorCode.jsx
View File

@@ -214,7 +214,6 @@ const ListErrorCode = ({
marginBottom: 12,
height: '32px',
width: '100%',
maxWidth: '300px'
}}
/>

4
src/pages/master/brandDevice/component/SparepartSelect.jsx
View File

@@ -36,7 +36,7 @@ const SparepartSelect = ({
setLoading(true);
try {
const params = new URLSearchParams();
params.set('limit', '1000');
params.set('limit', '10');
if (searchQuery && searchQuery.trim() !== '') {
params.set('criteria', searchQuery.trim());
@@ -137,7 +137,7 @@ const SparepartSelect = ({
>
{spareparts
.filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
.slice(0, 5)
.slice(0, 10)
.map((sparepart) => (
<Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
<div>

263
src/pages/master/brandDevice/hooks/errorCode.js
View File

@@ -1,263 +0,0 @@
import { useState, useEffect } from 'react';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
export const useErrorCodeLogic = (errorCodeForm, fileList) => {
const [solutionFields, setSolutionFields] = useState([0]);
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
const [firstSolutionValid, setFirstSolutionValid] = useState(false);
const [solutionsToDelete, setSolutionsToDelete] = useState(new Set());
const checkPreviousSolutionValid = (currentSolutionIndex) => {
for (let i = 0; i < currentSolutionIndex; i++) {
const fieldId = solutionFields[i];
const solutionType = solutionTypes[fieldId];
const solutionName = errorCodeForm.getFieldValue(`solution_name_${fieldId}`);
if (!solutionName || solutionName.trim() === '') {
return false;
}
if (solutionType === 'text') {
const textSolution = errorCodeForm.getFieldValue(`text_solution_${fieldId}`);
if (!textSolution || textSolution.trim() === '') {
return false;
}
} else if (solutionType === 'file') {
const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
if (filesForSolution.length === 0) {
return false;
}
}
}
return true;
};
const checkFirstSolutionValid = () => {
if (solutionFields.length === 0) {
setFirstSolutionValid(false);
return false;
}
const isValid = checkPreviousSolutionValid(1);
setFirstSolutionValid(isValid);
return isValid;
};
const handleAddSolutionField = () => {
const currentSolutionCount = solutionFields.length;
const nextSolutionNumber = currentSolutionCount + 1;
if (!checkPreviousSolutionValid(currentSolutionCount)) {
let incompleteSolutionIndex = -1;
for (let i = 0; i < currentSolutionCount; i++) {
const fieldId = solutionFields[i];
const solutionType = solutionTypes[fieldId];
const solutionName = errorCodeForm.getFieldValue(`solution_name_${fieldId}`);
let hasContent = false;
if (solutionType === 'text') {
const textSolution = errorCodeForm.getFieldValue(`text_solution_${fieldId}`);
hasContent = textSolution && textSolution.trim();
} else if (solutionType === 'file') {
const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
hasContent = filesForSolution.length > 0;
}
if (!solutionName?.trim() || !hasContent) {
incompleteSolutionIndex = i + 1;
break;
}
}
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: `Harap lengkapi Solution ${incompleteSolutionIndex} terlebih dahulu sebelum menambah Solution ${nextSolutionNumber}!`
});
return;
}
const newId = `new-${Date.now()}`;
setSolutionFields(prev => [...prev, newId]);
setSolutionTypes(prev => ({ ...prev, [newId]: 'text' }));
setSolutionStatuses(prev => ({ ...prev, [newId]: true }));
errorCodeForm.setFieldValue(`solution_status_${newId}`, true);
errorCodeForm.setFieldValue(`solution_type_${newId}`, 'text');
};
const handleRemoveSolutionField = (id) => {
const isNewSolution = !id.toString().startsWith('existing-');
if (isNewSolution) {
if (solutionFields.length > 1) {
setSolutionFields(solutionFields.filter(fieldId => fieldId !== id));
setSolutionTypes(prev => {
const newTypes = { ...prev };
delete newTypes[id];
return newTypes;
});
setSolutionStatuses(prev => {
const newStatuses = { ...prev };
delete newStatuses[id];
return newStatuses;
});
setSolutionsToDelete(prev => {
const newSet = new Set(prev);
newSet.delete(id);
return newSet;
});
} else {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap error code harus memiliki minimal 1 solution!'
});
}
} else {
const solutionName = errorCodeForm.getFieldValue(`solution_name_${id}`);
const solutionType = solutionTypes[id];
let isEmpty = true;
const existingSolution = window.currentSolutionData?.[id];
const hasExistingData = existingSolution && (
(existingSolution.solution_name && existingSolution.solution_name.trim()) ||
(existingSolution.text_solution && existingSolution.text_solution.trim()) ||
(existingSolution.path_solution && existingSolution.path_solution.trim())
);
if (solutionType === 'text') {
const textSolution = errorCodeForm.getFieldValue(`text_solution_${id}`);
isEmpty = !solutionName?.trim() && !textSolution?.trim() && !hasExistingData;
} else if (solutionType === 'file') {
const filesForSolution = fileList.filter(file => file.solutionId === id);
isEmpty = !solutionName?.trim() && filesForSolution.length === 0 && !hasExistingData;
}
if (isEmpty) {
if (solutionFields.length > 1) {
setSolutionFields(solutionFields.filter(fieldId => fieldId !== id));
setSolutionTypes(prev => {
const newTypes = { ...prev };
delete newTypes[id];
return newTypes;
});
setSolutionStatuses(prev => {
const newStatuses = { ...prev };
delete newStatuses[id];
return newStatuses;
});
if (window.currentSolutionData) {
delete window.currentSolutionData[id];
}
setSolutionsToDelete(prev => {
const newSet = new Set(prev);
newSet.delete(id);
return newSet;
});
} else {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap error code harus memiliki minimal 1 solution!'
});
}
} else {
if (solutionFields.length > 1) {
setSolutionsToDelete(prev => new Set(prev).add(id));
const solutionElement = document.querySelector(`[data-solution-id="${id}"]`);
if (solutionElement) {
solutionElement.style.opacity = '0.5';
solutionElement.style.border = '2px dashed #ff4d4f';
}
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Solution ditandai untuk dihapus. Klik "Update Error Code" untuk menyimpan perubahan.'
});
} else {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap error code harus memiliki minimal 1 solution!'
});
}
}
}
};
const handleSolutionTypeChange = (fieldId, type) => {
setSolutionTypes(prev => ({ ...prev, [fieldId]: type }));
};
const handleSolutionStatusChange = (fieldId, status) => {
setSolutionStatuses(prev => ({
...prev,
[fieldId]: status
}));
};
const setSolutionsForExistingRecord = (solutions, errorCodeForm) => {
const newSolutionFields = [];
const newSolutionTypes = {};
const newSolutionStatuses = {};
const newSolutionData = {};
solutions.forEach((solution, index) => {
const fieldId = `existing-${index}`;
newSolutionFields.push(fieldId);
newSolutionTypes[fieldId] = solution.type_solution || 'text';
newSolutionStatuses[fieldId] = solution.is_active !== false;
newSolutionData[fieldId] = {
...solution
};
setTimeout(() => {
errorCodeForm.setFieldsValue({
[`solution_name_${fieldId}`]: solution.solution_name,
[`text_solution_${fieldId}`]: solution.text_solution || '',
[`solution_status_${fieldId}`]: solution.is_active !== false,
[`solution_type_${fieldId}`]: solution.type_solution === 'image' || solution.type_solution === 'pdf' ? 'file' : solution.type_solution
});
}, 100);
});
setSolutionFields(newSolutionFields);
setSolutionTypes(newSolutionTypes);
setSolutionStatuses(newSolutionStatuses);
window.currentSolutionData = newSolutionData;
};
const resetSolutionFields = () => {
setSolutionFields([0]);
setSolutionTypes({ 0: 'text' });
setSolutionStatuses({ 0: true });
setFirstSolutionValid(false);
setSolutionsToDelete(new Set());
};
useEffect(() => {
const timer = setTimeout(() => {
checkFirstSolutionValid();
}, 100);
return () => clearTimeout(timer);
}, [solutionFields, solutionTypes, fileList, errorCodeForm]);
return {
solutionFields,
solutionTypes,
solutionStatuses,
firstSolutionValid,
solutionsToDelete,
handleAddSolutionField,
handleRemoveSolutionField,
handleSolutionTypeChange,
handleSolutionStatusChange,
resetSolutionFields,
checkFirstSolutionValid,
setSolutionsForExistingRecord
};
};

453
src/pages/master/brandDevice/hooks/solution.js
View File

@@ -1,453 +0,0 @@
import { useState, useEffect } from 'react';
export const useSolutionLogic = (solutionForm) => {
const [solutionFields, setSolutionFields] = useState([0]);
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
const [solutionsToDelete, setSolutionsToDelete] = useState([]);
useEffect(() => {
setTimeout(() => {
if (solutionForm) {
solutionForm.setFieldsValue({
solution_items: {
0: {
name: 'Solution 1',
status: true,
type: 'text',
text: 'Solution description',
file: null,
fileUpload: null
}
}
});
}
}, 100);
}, [solutionForm]);
const handleAddSolutionField = () => {
const newKey = Date.now();
setSolutionFields(prev => [...prev, newKey]);
setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
setTimeout(() => {
const currentFormValues = solutionForm.getFieldsValue(true);
const existingNames = [];
Object.keys(currentFormValues).forEach(key => {
if (key.startsWith('solution_items,') || key.startsWith('solution_items.')) {
const solutionData = currentFormValues[key];
if (solutionData && solutionData.name) {
existingNames.push(solutionData.name);
}
}
});
if (currentFormValues.solution_items) {
Object.values(currentFormValues.solution_items).forEach(solution => {
if (solution && solution.name) {
existingNames.push(solution.name);
}
});
}
let solutionNumber = solutionFields.length + 1;
let defaultName = `Solution ${solutionNumber}`;
while (existingNames.includes(defaultName)) {
solutionNumber++;
defaultName = `Solution ${solutionNumber}`;
}
solutionForm.setFieldValue(['solution_items', newKey, 'name'], defaultName);
solutionForm.setFieldValue(['solution_items', newKey, 'type'], 'text');
solutionForm.setFieldValue(['solution_items', newKey, 'text'], 'Solution description');
solutionForm.setFieldValue(['solution_items', newKey, 'status'], true);
solutionForm.setFieldValue(['solution_items', newKey, 'file'], null);
solutionForm.setFieldValue(['solution_items', newKey, 'fileUpload'], null);
}, 100);
};
const handleRemoveSolutionField = (key) => {
if (solutionFields.length <= 1) {
return;
}
setSolutionFields(prev => prev.filter(field => field !== key));
const newTypes = { ...solutionTypes };
const newStatuses = { ...solutionStatuses };
delete newTypes[key];
delete newStatuses[key];
setSolutionTypes(newTypes);
setSolutionStatuses(newStatuses);
setTimeout(() => {
try {
solutionForm.setFieldValue(['solution_items', key], undefined);
solutionForm.setFieldValue(['solution_items', key, 'name'], undefined);
solutionForm.setFieldValue(['solution_items', key, 'type'], undefined);
solutionForm.setFieldValue(['solution_items', key, 'text'], undefined);
solutionForm.setFieldValue(['solution_items', key, 'status'], undefined);
solutionForm.setFieldValue(['solution_items', key, 'file'], undefined);
solutionForm.setFieldValue(['solution_items', key, 'fileUpload'], undefined);
} catch (error) {
}
}, 50);
};
const handleSolutionTypeChange = (key, value) => {
setSolutionTypes(prev => ({ ...prev, [key]: value }));
setTimeout(() => {
const fieldName = ['solution_items', key];
const currentSolutionData = solutionForm.getFieldsValue([fieldName]) || {};
const solutionData = currentSolutionData[`solution_items,${key}`] || currentSolutionData[`solution_items.${key}`] || {};
if (value === 'text') {
const updatedSolutionData = {
...solutionData,
fileUpload: null,
file: null,
path_solution: null,
fileName: null,
text: solutionData.text || 'Solution description'
};
solutionForm.setFieldValue([...fieldName, 'fileUpload'], null);
solutionForm.setFieldValue([...fieldName, 'file'], null);
solutionForm.setFieldValue([...fieldName, 'path_solution'], null);
solutionForm.setFieldValue([...fieldName, 'fileName'], null);
solutionForm.setFieldValue([...fieldName, 'text'], updatedSolutionData.text);
} else if (value === 'file') {
const updatedSolutionData = {
...solutionData,
text: '',
fileUpload: null,
file: null,
path_solution: null,
fileName: null
};
solutionForm.setFieldValue([...fieldName, 'text'], '');
solutionForm.setFieldValue([...fieldName, 'fileUpload'], null);
solutionForm.setFieldValue([...fieldName, 'file'], null);
solutionForm.setFieldValue([...fieldName, 'path_solution'], null);
solutionForm.setFieldValue([...fieldName, 'fileName'], null);
}
}, 0);
};
const handleSolutionStatusChange = (key, value) => {
setSolutionStatuses(prev => ({ ...prev, [key]: value }));
};
const resetSolutionFields = () => {
setSolutionFields([0]);
setSolutionTypes({ 0: 'text' });
setSolutionStatuses({ 0: true });
if (!solutionForm || !solutionForm.resetFields) {
return;
}
solutionForm.resetFields();
setTimeout(() => {
solutionForm.setFieldsValue({
solution_items: {
0: {
name: 'Solution 1',
status: true,
type: 'text',
text: 'Solution description',
file: null,
fileUpload: null
}
}
});
solutionForm.setFieldValue(['solution_items', 0, 'name'], 'Solution 1');
solutionForm.setFieldValue(['solution_items', 0, 'type'], 'text');
solutionForm.setFieldValue(['solution_items', 0, 'text'], 'Solution description');
solutionForm.setFieldValue(['solution_items', 0, 'status'], true);
solutionForm.setFieldValue(['solution_items', 0, 'file'], null);
solutionForm.setFieldValue(['solution_items', 0, 'fileUpload'], null);
}, 100);
};
const checkFirstSolutionValid = () => {
if (!solutionForm || !solutionForm.getFieldsValue) {
return false;
}
const values = solutionForm.getFieldsValue();
const firstField = solutionFields[0];
if (!firstField) {
return false;
}
const solutionKey = firstField.key || firstField;
const commaPath = `solution_items,${solutionKey}`;
const dotPath = `solution_items.${solutionKey}`;
const firstSolution = values[commaPath] || values[dotPath];
if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') {
return false;
}
if (solutionTypes[solutionKey] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
return false;
}
return true;
};
const getSolutionData = () => {
try {
const values = solutionForm.getFieldsValue(true);
const result = [];
solutionFields.forEach(key => {
let solution = null;
try {
solution = solutionForm.getFieldValue(['solution_items', key]);
} catch (error) {
}
if (!solution && values.solution_items && values.solution_items[key]) {
solution = values.solution_items[key];
}
if (!solution) {
const commaKey = `solution_items,${key}`;
solution = values[commaKey];
}
if (!solution) {
const dotKey = `solution_items.${key}`;
solution = values[dotKey];
}
if (!solution) {
const allKeys = Object.keys(values);
const foundKey = allKeys.find(k =>
k.includes(key.toString()) &&
k.includes('solution_items')
);
if (foundKey) {
solution = values[foundKey];
}
}
if (!solution) {
const rawValues = solutionForm.getFieldsValue();
if (rawValues.solution_items && rawValues.solution_items[key]) {
solution = rawValues.solution_items[key];
}
}
if (!solution) {
return;
}
const hasName = solution.name && solution.name.trim() !== '';
if (!hasName) {
return;
}
const solutionType = solutionTypes[key] || solution.type || 'text';
let isValidType = true;
if (solutionType === 'text') {
isValidType = solution.text && solution.text.trim() !== '';
if (!isValidType) {
return;
}
} else if (solutionType === 'file') {
const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== '';
const hasFileUpload = (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);
isValidType = hasPathSolution || hasFileUpload || hasFile;
if (!isValidType) {
return;
}
}
let pathSolution = '';
let fileObject = null;
const typeSolution = solutionTypes[key] || solution.type || 'text';
if (typeSolution === 'file') {
if (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0) {
pathSolution = solution.fileUpload.path_solution || solution.fileUpload.uploadPath || '';
fileObject = solution.fileUpload;
} else if (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0) {
pathSolution = solution.file.path_solution || solution.file.uploadPath || '';
fileObject = solution.file;
} else if (solution.file && typeof solution.file === 'string' && solution.file.trim() !== '') {
pathSolution = solution.file;
} else if (solution.path_solution && solution.path_solution.trim() !== '') {
pathSolution = solution.path_solution;
} else {
}
}
let finalTypeSolution = typeSolution;
if (typeSolution === 'file') {
if (fileObject && fileObject.type_solution) {
finalTypeSolution = fileObject.type_solution;
} else {
finalTypeSolution = 'image';
}
}
const finalSolution = {
solution_name: solution.name,
type_solution: finalTypeSolution,
is_active: solution.status !== false && solution.status !== undefined ? solution.status : (solutionStatuses[key] !== false),
};
if (typeSolution === 'text') {
finalSolution.text_solution = solution.text || '';
finalSolution.path_solution = '';
} else {
finalSolution.text_solution = '';
finalSolution.path_solution = pathSolution;
}
result.push(finalSolution);
});
return result;
} catch (error) {
return [];
}
};
const setSolutionsForExistingRecord = (solutions, form) => {
if (!solutions || solutions.length === 0) return;
const newFields = solutions.map((solution, index) => solution.id || index);
setSolutionFields(newFields);
const solutionsValues = {};
const newTypes = {};
const newStatuses = {};
solutions.forEach((solution, index) => {
const key = solution.brand_code_solution_id || solution.id || index;
let fileObject = null;
if (solution.path_solution && solution.path_solution.trim() !== '') {
const fileName = solution.file_upload_name || solution.path_solution.split('/').pop() || `file_${index}`;
fileObject = {
uploadPath: solution.path_solution,
path_solution: solution.path_solution,
name: fileName,
type_solution: solution.type_solution || 'image',
isExisting: true,
size: 0,
type: solution.type_solution === 'pdf' ? 'application/pdf' : 'image/jpeg',
fileExtension: solution.type_solution === 'pdf' ? 'pdf' : (fileName.split('.').pop().toLowerCase() || 'jpg')
};
}
const isFileType = solution.type_solution && solution.type_solution !== 'text' && fileObject;
solutionsValues[key] = {
name: solution.solution_name || '',
type: isFileType ? 'file' : 'text',
text: solution.text_solution || '',
file: fileObject,
fileUpload: fileObject,
status: solution.is_active !== false,
path_solution: solution.path_solution || ''
};
newTypes[key] = isFileType ? 'file' : 'text';
newStatuses[key] = solution.is_active !== false;
});
const nestedFormValues = {
solution_items: {}
};
Object.keys(solutionsValues).forEach(key => {
const solution = solutionsValues[key];
nestedFormValues.solution_items[key] = {
name: solution.name,
type: solution.type,
text: solution.text,
file: solution.file,
fileUpload: solution.fileUpload,
status: solution.status,
path_solution: solution.path_solution
};
});
form.setFieldsValue(nestedFormValues);
const fallbackFormValues = {};
Object.keys(solutionsValues).forEach(key => {
const solution = solutionsValues[key];
fallbackFormValues[`solution_items,${key}`] = {
name: solution.name,
type: solution.type,
text: solution.text,
file: solution.file,
fileUpload: solution.fileUpload,
status: solution.status,
path_solution: solution.path_solution
};
});
form.setFieldsValue(fallbackFormValues);
Object.keys(solutionsValues).forEach(key => {
const solution = solutionsValues[key];
form.setFieldValue([`solution_items,${key}`, 'name'], solution.name);
form.setFieldValue([`solution_items,${key}`, 'type'], solution.type);
form.setFieldValue([`solution_items,${key}`, 'text'], solution.text);
form.setFieldValue([`solution_items,${key}`, 'file'], solution.file);
form.setFieldValue([`solution_items,${key}`, 'fileUpload'], solution.fileUpload);
form.setFieldValue([`solution_items,${key}`, 'status'], solution.status);
form.setFieldValue([`solution_items,${key}`, 'path_solution'], solution.path_solution);
form.setFieldValue(['solution_items', key, 'name'], solution.name);
form.setFieldValue(['solution_items', key, 'type'], solution.type);
form.setFieldValue(['solution_items', key, 'text'], solution.text);
form.setFieldValue(['solution_items', key, 'file'], solution.file);
form.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
form.setFieldValue(['solution_items', key, 'status'], solution.status);
form.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
});
setSolutionTypes(newTypes);
setSolutionStatuses(newStatuses);
};
return {
solutionFields,
solutionTypes,
solutionStatuses,
solutionsToDelete,
firstSolutionValid: checkFirstSolutionValid(),
handleAddSolutionField,
handleRemoveSolutionField,
handleSolutionTypeChange,
handleSolutionStatusChange,
resetSolutionFields,
checkFirstSolutionValid,
getSolutionData,
setSolutionsForExistingRecord,
};
};

718
src/pages/notification/component/ListNotification.jsx
View File

@@ -38,7 +38,7 @@ import {
SearchOutlined,
} from '@ant-design/icons';
import { useNavigate, Link as RouterLink } from 'react-router-dom';
import { getAllNotification } from '../../../api/notification';
import { getAllNotification, getNotificationLogByNotificationId } from '../../../api/notification';
const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -47,17 +47,18 @@ const transformNotificationData = (apiData) => {
return apiData.map((item, index) => ({
id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
title: item.error_code?.error_code_name || item.device_name || 'Unknown Error',
title: item.error_code_name || 'Unknown Error',
issue: item.error_code || item.error_code_name || 'Unknown Error',
description: `${item.error_code} - ${item.error_code_name || ''}`,
timestamp:
item.created_at ? new Date(item.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB' : 'N/A',
timestamp: item.created_at
? new Date(item.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
: 'N/A',
location: item.plant_sub_section_name || item.device_location || 'Location not specified',
details: item.message_error_issue || 'No details available',
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
@@ -68,7 +69,10 @@ const transformNotificationData = (apiData) => {
errorCode: item.error_code,
solutionName: item.error_code?.solution?.[0]?.solution_name || 'N/A',
typeSolution: item.error_code?.solution?.[0]?.type_solution || 'N/A',
pathSolution: item.error_code?.solution?.[0]?.path_document || item.error_code?.solution?.[0]?.path_solution || 'N/A',
pathSolution:
item.error_code?.solution?.[0]?.path_document ||
item.error_code?.solution?.[0]?.path_solution ||
'N/A',
error_code: item.error_code,
}));
};
@@ -98,37 +102,6 @@ const userHistoryData = [
},
];
// Dummy data untuk log history
const logHistoryData = [
{
id: 1,
timestamp: '04-11-2025 11:55 WIB',
addedBy: {
name: 'Budi Santoso',
phone: '081122334455',
},
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
},
{
id: 2,
timestamp: '04-11-2025 11:45 WIB',
addedBy: {
name: 'John Doe',
phone: '081234567890',
},
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
},
{
id: 3,
timestamp: '04-11-2025 11:40 WIB',
addedBy: {
name: 'Jane Smith',
phone: '087654321098',
},
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
},
];
const ListNotification = memo(function ListNotification(props) {
const [notifications, setNotifications] = useState([]);
const [activeTab, setActiveTab] = useState('all');
@@ -138,6 +111,8 @@ const ListNotification = memo(function ListNotification(props) {
const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
const [isAddingLog, setIsAddingLog] = useState(false);
const [selectedNotification, setSelectedNotification] = useState(null);
const [logHistoryData, setLogHistoryData] = useState([]);
const [logLoading, setLogLoading] = useState(false);
const [pagination, setPagination] = useState({
current_page: 1,
current_limit: 10,
@@ -281,6 +256,40 @@ const ListNotification = memo(function ListNotification(props) {
});
};
// Fetch log history from API
const fetchLogHistory = async (notificationId) => {
try {
setLogLoading(true);
const response = await getNotificationLogByNotificationId(notificationId);
if (response && response.data) {
// Transform API data to component format
const transformedLogs = response.data.map((log) => ({
id: log.notification_error_log_id,
timestamp: log.created_at
? new Date(log.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
: 'N/A',
addedBy: {
name: log.contact_name || 'Unknown',
phone: log.contact_phone || 'N/A',
},
description: log.notification_error_log_description || '',
}));
setLogHistoryData(transformedLogs);
}
} catch (err) {
console.error('Error fetching log history:', err);
setLogHistoryData([]); // Set empty array on error
} finally {
setLogLoading(false);
}
};
const tabButtonStyle = (isActive) => ({
padding: '12px 16px',
border: 'none',
@@ -315,7 +324,6 @@ const ListNotification = memo(function ListNotification(props) {
borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
cursor: 'pointer',
}}
onClick={() => handleMarkAsRead(notification.id)}
>
<div
style={{
@@ -500,6 +508,15 @@ const ListNotification = memo(function ListNotification(props) {
}}
onClick={(e) => {
e.stopPropagation();
// Set the selected notification for the log history
const notificationId =
notification.id.split('-')[1];
setSelectedNotification(notification);
// Fetch log history for the selected notification
fetchLogHistory(notificationId);
setModalContent('log');
}}
/>
@@ -554,291 +571,314 @@ const ListNotification = memo(function ListNotification(props) {
const renderLogHistory = () => (
<>
<div style={{ padding: '0 16px', position: 'relative' }}>
{/* Garis vertikal yang menyambung */}
<div
style={{
position: 'absolute',
top: '7px',
left: '23px',
bottom: '7px',
width: '2px',
backgroundColor: '#91d5ff',
zIndex: 0,
}}
></div>
{logLoading ? (
<div style={{ textAlign: 'center', padding: '24px' }}>
<Spin size="large" />
</div>
) : logHistoryData.length === 0 ? (
<div style={{ textAlign: 'center', padding: '24px', color: '#8c8c8c' }}>
Tidak ada log history
</div>
) : (
<div style={{ padding: '0 16px', position: 'relative' }}>
{/* Garis vertikal yang menyambung */}
<div
style={{
position: 'absolute',
top: '7px',
left: '23px',
bottom: '7px',
width: '2px',
backgroundColor: '#91d5ff',
zIndex: 0,
}}
></div>
{logHistoryData.map((log, index) => (
<Row
key={log.id}
wrap={false}
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
>
{/* Kolom Kiri: Branch/Timeline */}
<Col
style={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: '16px',
}}
{logHistoryData.map((log, index) => (
<Row
key={log.id}
wrap={false}
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
>
<div
{/* Kolom Kiri: Branch/Timeline */}
<Col
style={{
width: '14px',
height: '14px',
backgroundColor: '#fff',
border: '3px solid #1890ff',
borderRadius: '50%',
zIndex: 1,
flexShrink: 0,
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: '16px',
}}
></div>
</Col>
{/* Kolom Kanan: Card */}
<Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}>
<Row gutter={[16, 8]} align="middle">
<Col xs={24} md={12}>
<Space direction="vertical" size={4}>
<Space>
<ClockCircleOutlined />
<Text type="secondary" style={{ fontSize: '12px' }}>
Added at {log.timestamp}
</Text>
</Space>
<div>
<Text strong>Added by: {log.addedBy.name}</Text>
<span
style={{
marginLeft: '8px',
border: '1px solid #52c41a',
color: '#52c41a',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
}}
>
<MobileOutlined /> {log.addedBy.phone}
</span>
</div>
</Space>
</Col>
<Col xs={24} md={12}>
<Paragraph
style={{
color: '#595959',
margin: 0,
fontSize: '13px',
}}
>
{log.description}
</Paragraph>
</Col>
</Row>
</Card>
</Col>
</Row>
))}
</div>
</>
);
const renderDetailsNotification = () => {
if (!selectedNotification) return null;
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
return (
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={[16, 8]}>
{/* Kolom Kiri: Data Kompresor */}
<Col span={12}>
<Card
title=""
size="small"
style={{ height: '100%', borderColor: '#d4380d' }}
bodyStyle={{ padding: '12px' }}
>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={16} align="middle">
<Col>
<div
<div
style={{
width: '14px',
height: '14px',
backgroundColor: '#fff',
border: '3px solid #1890ff',
borderRadius: '50%',
zIndex: 1,
flexShrink: 0,
}}
></div>
</Col>
{/* Kolom Kanan: Card */}
<Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}>
<Row gutter={[16, 8]} align="middle">
<Col xs={24} md={12}>
<Space direction="vertical" size={4}>
<Space>
<ClockCircleOutlined />
<Text
type="secondary"
style={{ fontSize: '12px' }}
>
Added at {log.timestamp}
</Text>
</Space>
<div>
<Text strong>Added by: {log.addedBy.name}</Text>
<span
style={{
marginLeft: '8px',
border: '1px solid #52c41a',
color: '#52c41a',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
}}
>
<MobileOutlined /> {log.addedBy.phone}
</span>
</div>
</Space>
</Col>
<Col xs={24} md={12}>
<Paragraph
style={{
width: '32px',
height: '32px',
borderRadius: '50%',
backgroundColor: '#d4380d',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#ffffff',
fontSize: '18px',
color: '#595959',
margin: 0,
fontSize: '13px',
}}
>
<CloseOutlined />
</div>
</Col>
<Col>
<Text>{selectedNotification.title}</Text>
<div style={{ marginTop: '2px' }}>
<Text strong style={{ fontSize: '16px' }}>
{selectedNotification.issue}
</Text>
</div>
{log.description}
</Paragraph>
</Col>
</Row>
<div>
<Text strong>Plant Subsection</Text>
<div>{selectedNotification.subsection}</div>
<Text strong style={{ display: 'block', marginTop: '8px' }}>
Date & Time
</Text>
<div>{selectedNotification.timestamp}</div>
</div>
<div
style={{
border: '1px solid #d4380d',
borderRadius: '4px',
padding: '8px',
background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
}}
>
<Row justify="space-around" align="middle">
<Col>
<Text style={{ fontSize: '12px', color: color }}>
Value
</Text>
<div
style={{
fontWeight: 'bold',
fontSize: '16px',
color: color,
}}
>
N/A
</div>
</Col>
<Col>
<Text type="secondary" style={{ fontSize: '12px' }}>
Treshold
</Text>
<div style={{ fontWeight: 500 }}>N/A</div>
</Col>
</Row>
</div>
</Space>
</Card>
</Col>
{/* Kolom Kanan: Informasi Teknis */}
<Col span={12}>
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div>
<Text strong>PLC</Text>
<div>{selectedNotification.plc}</div>
</div>
<div>
<Text strong>Status</Text>
<div style={{ color: '#faad14', fontWeight: 500 }}>
{selectedNotification.status}
</div>
</div>
<div>
<Text strong>Tag</Text>
<div
style={{
fontFamily: 'monospace',
backgroundColor: '#f0f0f0',
padding: '2px 6px',
borderRadius: '4px',
display: 'inline-block',
}}
>
{selectedNotification.tag}
</div>
</div>
</Space>
</Card>
</Col>
</Row>
<div>
<Row gutter={[16, 8]}>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Handling Guideline
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Spare Part
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
onClick={() => setModalContent('log')}
>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Log Activity
</Text>
</Space>
</Card>
</Col>
</Row>
<Row gutter={[16, 8]} style={{ marginTop: '0' }}>
<Col span={8}>
<Card size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<Card
size="small"
bodyStyle={{ padding: '8px 12px' }}
hoverable
extra={
<Text type="secondary" style={{ fontSize: '10px' }}>
PDF
</Text>
} >
))}
</div>
)}
</>
);
const renderDetailsNotification = () => {
if (!selectedNotification) return null;
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
return (
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={[16, 8]}>
{/* Kolom Kiri: Data Kompresor */}
<Col span={12}>
<Card
title=""
size="small"
style={{ height: '100%', borderColor: '#d4380d' }}
bodyStyle={{ padding: '12px' }}
>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={16} align="middle">
<Col>
<div
style={{
width: '32px',
height: '32px',
borderRadius: '50%',
backgroundColor: '#d4380d',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#ffffff',
fontSize: '18px',
}}
>
<CloseOutlined />
</div>
</Col>
<Col>
<Text>{selectedNotification.title}</Text>
<div style={{ marginTop: '2px' }}>
<Text strong style={{ fontSize: '16px' }}>
{selectedNotification.issue}
</Text>
</div>
</Col>
</Row>
<div>
<Text strong>Plant Subsection</Text>
<div>{selectedNotification.subsection}</div>
<Text strong style={{ display: 'block', marginTop: '8px' }}>
Date & Time
</Text>
<div>{selectedNotification.timestamp}</div>
</div>
<div
style={{
border: '1px solid #d4380d',
borderRadius: '4px',
padding: '8px',
background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
}}
>
<Row justify="space-around" align="middle">
<Col>
<Text style={{ fontSize: '12px', color: color }}>
Value
</Text>
<div
style={{
fontWeight: 'bold',
fontSize: '16px',
color: color,
}}
>
N/A
</div>
</Col>
<Col>
<Text type="secondary" style={{ fontSize: '12px' }}>
Treshold
</Text>
<div style={{ fontWeight: 500 }}>N/A</div>
</Col>
</Row>
</div>
</Space>
</Card>
</Col>
{/* Kolom Kanan: Informasi Teknis */}
<Col span={12}>
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div>
<Text strong>PLC</Text>
<div>{selectedNotification.plc}</div>
</div>
<div>
<Text strong>Status</Text>
<div style={{ color: '#faad14', fontWeight: 500 }}>
{selectedNotification.status}
</div>
</div>
<div>
<Text strong>Tag</Text>
<div
style={{
fontFamily: 'monospace',
backgroundColor: '#f0f0f0',
padding: '2px 6px',
borderRadius: '4px',
display: 'inline-block',
}}
>
{selectedNotification.tag}
</div>
</div>
</Space>
</Card>
</Col>
</Row>
<div>
<Row gutter={[16, 8]}>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Handling Guideline
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Spare Part
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
onClick={() => {
// Set the selected notification for the log history if not already set
if (selectedNotification) {
const notificationId =
selectedNotification.id.split('-')[1];
// Fetch log history for the selected notification
fetchLogHistory(notificationId);
}
setModalContent('log');
}}
>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Log Activity
</Text>
</Space>
</Card>
</Col>
</Row>
<Row gutter={[16, 8]} style={{ marginTop: '0' }}>
<Col span={8}>
<Card size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<Card
size="small"
bodyStyle={{ padding: '8px 12px' }}
hoverable
extra={
<Text type="secondary" style={{ fontSize: '10px' }}>
PDF
</Text>
}
>
<div
style={{
display: 'flex',
@@ -1129,24 +1169,40 @@ const ListNotification = memo(function ListNotification(props) {
</Button>
</Space>
</Card>
{logHistoryData.map((log) => (
<Card
key={log.id}
size="small"
bodyStyle={{ padding: '8px 12px' }}
{logLoading ? (
<div style={{ textAlign: 'center', padding: '12px' }}>
<Spin size="small" />
</div>
) : logHistoryData.length === 0 ? (
<div
style={{
textAlign: 'center',
padding: '12px',
color: '#8c8c8c',
}}
>
<Paragraph
style={{ fontSize: '12px', margin: 0 }}
ellipsis={{ rows: 2 }}
Tidak ada log history
</div>
) : (
logHistoryData.map((log) => (
<Card
key={log.id}
size="small"
bodyStyle={{ padding: '8px 12px' }}
>
<Text strong>{log.addedBy.name}:</Text>{' '}
{log.description}
</Paragraph>
<Text type="secondary" style={{ fontSize: '11px' }}>
{log.timestamp}
</Text>
</Card>
))}
<Paragraph
style={{ fontSize: '12px', margin: 0 }}
ellipsis={{ rows: 2 }}
>
<Text strong>{log.addedBy.name}:</Text>{' '}
{log.description}
</Paragraph>
<Text type="secondary" style={{ fontSize: '11px' }}>
{log.timestamp}
</Text>
</Card>
))
)}
</Space>
</Card>
</Col>

268
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

@@ -1,6 +1,20 @@
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input, message } from 'antd';
import {
Layout,
Card,
Row,
Col,
Typography,
Space,
Button,
Spin,
Result,
Input,
message,
Avatar,
Tag,
} from 'antd';
import {
ArrowLeftOutlined,
CloseCircleFilled,
@@ -15,10 +29,16 @@ import {
PlusOutlined,
UserOutlined,
LoadingOutlined,
PhoneOutlined,
CheckCircleOutlined,
SyncOutlined,
SendOutlined,
} from '@ant-design/icons';
import { getNotificationDetail, createNotificationLog, getNotificationLogByNotificationId } from '../../api/notification';
import UserHistoryModal from '../notification/component/UserHistoryModal';
import LogHistoryCard from '../notification/component/LogHistoryCard';
import {
getNotificationDetail,
createNotificationLog,
getNotificationLogByNotificationId,
} from '../../api/notification';
const { Content } = Layout;
const { Text, Paragraph, Link } = Typography;
@@ -39,12 +59,12 @@ const transformNotificationData = (apiData) => {
description: apiData.message_error_issue || 'No details available',
timestamp: apiData.created_at
? new Date(apiData.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
: 'N/A',
location: apiData.plant_sub_section_name || 'Location not specified',
details: apiData.message_error_issue || 'No details available',
@@ -62,9 +82,9 @@ const transformNotificationData = (apiData) => {
...activeSolution,
path_document: activeSolution.path_document
? activeSolution.path_document.replace(
'/detail-notification/pdf/',
'/notification-detail/pdf/'
)
'/detail-notification/pdf/',
'/notification-detail/pdf/'
)
: activeSolution.path_document,
}, // Include the active solution data with fixed URL
error_code: errorCodeData,
@@ -77,6 +97,58 @@ const transformNotificationData = (apiData) => {
};
};
// Dummy data baru untuk user history
const getDummyUsers = (notification) => {
if (!notification) return [];
return [
{
id: '1',
name: 'John Doe',
phone: '081234567890',
status: 'delivered',
},
{
id: '2',
name: 'Jane Smith',
phone: '082345678901',
status: 'sent',
},
{
id: '3',
name: 'Bob Johnson',
phone: '083456789012',
status: 'failed',
},
{
id: '4',
name: 'Alice Brown',
phone: '084567890123',
status: 'delivered',
},
];
};
const getStatusTag = (status) => {
switch (status) {
case 'delivered':
return (
<Tag icon={<CheckCircleOutlined />} color="success">
Delivered
</Tag>
);
case 'sent':
return (
<Tag icon={<SyncOutlined spin />} color="processing">
Sent
</Tag>
);
case 'failed':
return <Tag color="error">Failed</Tag>;
default:
return <Tag color="default">{status}</Tag>;
}
};
const getIconAndColor = (type) => {
switch (type) {
case 'critical':
@@ -90,13 +162,13 @@ const getIconAndColor = (type) => {
}
};
const NotificationDetailTab = () => {
const { notificationId } = useParams(); // Mungkin perlu disesuaikan jika route berbeda
const NotificationDetailTab = (props) => {
const params = useParams(); // Mungkin perlu disesuaikan jika route berbeda
const notificationId = props.id ?? params.notificationId;
const navigate = useNavigate();
const [notification, setNotification] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [modalContent, setModalContent] = useState(null); // 'user', atau null
const [isAddingLog, setIsAddingLog] = useState(false);
// Log history states
@@ -116,12 +188,12 @@ const NotificationDetailTab = () => {
id: log.notification_error_log_id,
timestamp: log.created_at
? new Date(log.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB'
: 'N/A',
addedBy: {
name: log.contact_name || 'Unknown',
@@ -251,26 +323,21 @@ const NotificationDetailTab = () => {
marginBottom: '24px',
}}
>
<Row justify="space-between" align="middle">
<Col>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/notification')}
style={{ paddingLeft: 0 }}
>
Back to notification list
</Button>
</Col>
<Col>
<Button
icon={<UserOutlined />}
onClick={() => setModalContent('user')}
>
User History
</Button>
</Col>
</Row>
{!props.id && (
<Row justify="space-between" align="middle">
<Col>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate('/notification')}
style={{ paddingLeft: 0 }}
>
Back to notification list
</Button>
</Col>
</Row>
)}
<div
style={{
backgroundColor: '#f6ffed',
@@ -387,13 +454,79 @@ const NotificationDetailTab = () => {
</Card>
</Col>
{/* Kolom Kanan: Log History */}
{/* Kolom Kanan: User History */}
<Col xs={24} lg={8}>
<LogHistoryCard
notificationData={notification}
logData={logHistoryData}
loading={logLoading}
/>
<Card title="User History" size="small" style={{ height: '100%' }}>
<div
style={{
maxHeight: '400px',
overflowY: 'auto',
padding: '2px',
}}
>
<Space
direction="vertical"
size={2}
style={{ width: '100%' }}
>
{getDummyUsers(notification).map((user) => (
<Card
key={user.id}
size="small"
style={{ width: '100%', margin: 0 }}
>
<Row align="middle" justify="space-between">
<Col>
<Space align="center">
<Avatar
size="large"
icon={<UserOutlined />}
/>
<div>
<Text strong>{user.name}</Text>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
}}
>
<PhoneOutlined
style={{
color: '#8c8c8c',
}}
/>
<Text type="secondary">
{user.phone}
</Text>
</div>
</div>
</Space>
</Col>
<Col>
<Space align="center" size="large">
{getStatusTag(user.status)}
<Button
type="primary"
icon={<SendOutlined />}
size="small"
onClick={(e) => {
e.stopPropagation();
console.log(
`Resend to ${user.name}`
);
}}
>
Resend
</Button>
</Space>
</Col>
</Row>
</Card>
))}
</Space>
</div>
</Card>
</Col>
</Row>
@@ -428,11 +561,8 @@ const NotificationDetailTab = () => {
</Space>
</Card>
</Col>
<Col xs={24} md={8} style={{ cursor: 'pointer' }}>
<Card
hoverable
bodyStyle={{ padding: '12px', textAlign: 'center' }}
>
<Col xs={24} md={8}>
<Card bodyStyle={{ padding: '12px', textAlign: 'center' }}>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
@@ -458,7 +588,7 @@ const NotificationDetailTab = () => {
style={{ width: '100%' }}
>
{notification.error_code?.solution &&
notification.error_code.solution.length > 0 ? (
notification.error_code.solution.length > 0 ? (
<>
{notification.error_code.solution
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
@@ -532,7 +662,7 @@ const NotificationDetailTab = () => {
</Card>
) : null}
{sol.type_solution === 'text' &&
sol.text_solution ? (
sol.text_solution ? (
<Card
size="small"
bodyStyle={{
@@ -593,7 +723,7 @@ const NotificationDetailTab = () => {
style={{ width: '100%' }}
>
{notification.spareparts &&
notification.spareparts.length > 0 ? (
notification.spareparts.length > 0 ? (
notification.spareparts.map((sparepart, index) => (
<Card
size="small"
@@ -631,7 +761,7 @@ const NotificationDetailTab = () => {
color:
sparepart.sparepart_stok ===
'Available' ||
sparepart.sparepart_stok ===
sparepart.sparepart_stok ===
'available'
? '#52c41a'
: '#ff4d4f',
@@ -722,7 +852,9 @@ const NotificationDetailTab = () => {
rows={2}
placeholder="Tuliskan update penanganan di sini..."
value={newLogDescription}
onChange={(e) => setNewLogDescription(e.target.value)}
onChange={(e) =>
setNewLogDescription(e.target.value)
}
disabled={submitLoading}
/>
</>
@@ -731,8 +863,18 @@ const NotificationDetailTab = () => {
type={isAddingLog ? 'primary' : 'dashed'}
size="small"
block
icon={submitLoading ? <LoadingOutlined /> : (!isAddingLog && <PlusOutlined />)}
onClick={isAddingLog ? handleSubmitLog : () => setIsAddingLog(true)}
icon={
submitLoading ? (
<LoadingOutlined />
) : (
!isAddingLog && <PlusOutlined />
)
}
onClick={
isAddingLog
? handleSubmitLog
: () => setIsAddingLog(true)
}
loading={submitLoading}
disabled={submitLoading}
>
@@ -780,12 +922,6 @@ const NotificationDetailTab = () => {
</Space>
</Card>
</Content>
<UserHistoryModal
visible={modalContent === 'user'}
onCancel={() => setModalContent(null)}
notificationData={notification}
/>
</Layout>
);
};

222
src/pages/report/report/component/ListReport.jsx
View File

@@ -9,6 +9,8 @@ import {
import { getAllPlantSection } from '../../../../api/master-plant-section';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
const { Text } = Typography;
@@ -54,9 +56,9 @@ const ListReport = memo(function ListReport(props) {
};
const fetchData = async (page = 1, pageSize = 10, showModal = false) => {
if (!plantSubSection) {
return;
}
// if (!plantSubSection) {
// return;
// }
if (showModal) {
setIsLoadingModal(true);
@@ -195,8 +197,34 @@ const ListReport = memo(function ListReport(props) {
fetchData(pagination.current, pagination.pageSize, false);
};
const handleSearch = () => {
fetchData(1, pagination.pageSize, true);
const handleSearch = async () => {
setIsLoadingModal(true);
try {
const formattedDateStart = startDate.format('YYYY-MM-DD');
const formattedDateEnd = endDate.format('YYYY-MM-DD');
const params = new URLSearchParams({
plant_sub_section_id: plantSubSection,
from: formattedDateStart,
to: formattedDateEnd,
interval: periode,
page: 1,
limit: 1000,
});
const pivotResponse = await getAllHistoryValueReportPivot(params);
// Jika response sukses, proses data
if (pivotResponse && pivotResponse.data) {
await fetchData(1, pagination.pageSize, false);
}
} catch (error) {
console.error('Error fetching data:', error);
// Error akan ditangkap oleh api-request.js dan muncul Swal otomatis
} finally {
setIsLoadingModal(false);
}
};
const handleReset = () => {
@@ -247,6 +275,168 @@ const ListReport = memo(function ListReport(props) {
{ value: 120, label: '2 Hour', disabled: false },
];
const exportToExcel = async () => {
if (pivotData.length === 0) {
alert('No data to export');
return;
}
const tagMapping = {};
valueReportData.forEach(item => {
if (item.tag_name && item.tag_number) {
tagMapping[item.tag_name] = item.tag_number;
}
});
const selectedSection = plantSubSectionList.find(
item => item.plant_sub_section_id === plantSubSection
);
const sectionName = selectedSection ? selectedSection.plant_sub_section_name : 'Unknown';
// Buat struktur pivot yang sama seperti di tabel
const timeMap = new Map();
const tagSet = new Set();
pivotData.forEach((row) => {
const tagName = row.id;
tagSet.add(tagName);
const dataPoints = row.data || [];
dataPoints.forEach((item) => {
if (item && typeof item === 'object' && 'x' in item && 'y' in item) {
const datetime = item.x;
if (!timeMap.has(datetime)) {
timeMap.set(datetime, {});
}
timeMap.get(datetime)[tagName] = item.y;
}
});
});
const sortedTimes = Array.from(timeMap.keys()).sort();
const sortedTags = Array.from(tagSet).sort();
const pivotTableData = sortedTimes.map((datetime) => {
const rowData = {
datetime: datetime,
};
sortedTags.forEach((tagName) => {
rowData[tagName] = timeMap.get(datetime)[tagName];
});
return rowData;
});
console.log('Excel Pivot data:', pivotTableData.slice(0, 5));
console.log('Total rows for Excel:', pivotTableData.length);
const workbook = new ExcelJS.Workbook();
const ws = workbook.addWorksheet('Pivot Report');
// Buat header info (3 baris pertama)
ws.addRow(['PT. PUPUK INDONESIA UTILITAS']);
ws.addRow(['GRESIK GAS COGENERATION PLANT']);
ws.addRow([`${sectionName}`]);
ws.addRow([]); // Baris kosong sebagai pemisah
// Buat header kolom dengan tag number
const headerRow = [
'Datetime',
...sortedTags.map(tag => tagMapping[tag] || tag)
];
ws.addRow(headerRow);
// Buat data rows - PERBAIKAN: Simpan sebagai number murni
pivotTableData.forEach((rowData) => {
const row = [dayjs(rowData.datetime).format('DD-MM-YYYY HH:mm')];
sortedTags.forEach((tagName) => {
const value = rowData[tagName];
// Simpan sebagai number, bukan string
if (value !== undefined && value !== null) {
row.push(Number(value));
} else {
row.push('-');
}
});
ws.addRow(row);
});
// Set column widths
ws.getColumn(1).width = 18; // Datetime column
for (let i = 2; i <= sortedTags.length + 1; i++) {
ws.getColumn(i).width = 12; // Tag columns
}
// Merge cells untuk header info
const totalCols = sortedTags.length + 1;
ws.mergeCells(1, 1, 1, totalCols); // Baris 1
ws.mergeCells(2, 1, 2, totalCols); // Baris 2
ws.mergeCells(3, 1, 3, totalCols); // Baris 3
// Style untuk header info (3 baris pertama - bold dan center)
for (let i = 1; i <= 3; i++) {
const cell = ws.getCell(i, 1);
cell.font = { bold: true, size: 12 };
cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
}
// Style untuk header kolom (bold, background color, center, border)
const headerRowIndex = 5; // Baris header
for (let col = 1; col <= totalCols; col++) {
const cell = ws.getCell(headerRowIndex, col);
cell.font = { bold: true, size: 11 };
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: 'FFDCDCDC' }
};
cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
}
// Style untuk data cells (border dan alignment) - PERBAIKAN: Format number dengan 2 desimal
for (let row = headerRowIndex + 1; row <= ws.rowCount; row++) {
for (let col = 1; col <= totalCols; col++) {
const cell = ws.getCell(row, col);
cell.alignment = {
horizontal: 'center',
vertical: 'middle',
wrapText: true
};
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
// Format number dengan 2 desimal untuk kolom value (kolom 2 dst)
if (col > 1) {
const cellValue = cell.value;
// Hanya set format number jika cell berisi angka
if (typeof cellValue === 'number') {
cell.numFmt = '0.00';
}
}
}
}
// Generate file name
const fileName = `Report_Pivot_${startDate.format('DD-MM-YYYY')}_to_${endDate.format('DD-MM-YYYY')}.xlsx`;
// Save file
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, fileName);
};
const exportToPDF = async () => {
if (pivotData.length === 0) {
alert('No data to export');
@@ -393,7 +583,7 @@ const ListReport = memo(function ListReport(props) {
doc.setFontSize(9);
doc.setFont('helvetica', 'bold');
doc.setFontSize(10);
doc.text(`Plant Section : ${sectionName}`, marginLeft + col1Width + col2Width / 2, 41, { align: 'center' });
doc.text(`${sectionName}`, marginLeft + col1Width + col2Width / 2, 38, { align: 'center' });
};
// Hitung total kolom tag chunks
@@ -534,7 +724,7 @@ const ListReport = memo(function ListReport(props) {
autoTable(doc, {
head: [headerRow],
body: pdfRows,
startY: isFirstPage ? 50 : 15,
startY: isFirstPage ? 43 : 15,
theme: 'grid',
rowPageBreak: 'avoid',
styles: {
@@ -542,7 +732,7 @@ const ListReport = memo(function ListReport(props) {
cellPadding: 1.5,
minCellHeight: 8,
lineColor: [0, 0, 0],
lineWidth: 0.1,
lineWidth: 0.5,
halign: 'center',
valign: 'middle',
overflow: 'linebreak',
@@ -554,7 +744,7 @@ const ListReport = memo(function ListReport(props) {
halign: 'center',
valign: 'middle',
lineColor: [0, 0, 0],
lineWidth: 0.3,
lineWidth: 0.5,
},
columnStyles: {
0: {
@@ -694,11 +884,23 @@ const ListReport = memo(function ListReport(props) {
type="primary"
icon={<DownloadOutlined />}
onClick={exportToPDF}
disabled={false}
disabled={pivotData.length === 0}
style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
>
Export PDF
</Button>
</Col>
<Col>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={exportToExcel}
disabled={pivotData.length === 0}
style={{ backgroundColor: '#28a745', borderColor: '#28a745' }}
>
Export Excel
</Button>
</Col>
<Col>
<Button
onClick={handleReset}

19
src/pages/report/trending/ReportTrending.jsx
View File

@@ -130,9 +130,26 @@ const ReportTrending = memo(function ReportTrending(props) {
}
};
// Fungsi untuk menentukan apakah rentang tanggal lebih dari 1 hari
const isMultipleDays = () => {
return !startDate.isSame(endDate, 'day');
};
// Format sumbu X yang otomatis menyesuaikan
const formatXAxis = (tickItem) => {
const date = new Date(tickItem);
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
// Jika rentang lebih dari 1 hari, tampilkan tanggal + waktu
if (isMultipleDays()) {
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return `${day}/${month} ${hours}:${minutes}`;
}
// Jika hanya 1 hari, tampilkan waktu saja
return `${hours}:${minutes}`;
};
const CustomTooltip = ({ active, payload, label }) => {