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

Compare commits

base: yogiedigital:lavoce
Branches Tags
yogiedigital:main yogiedigital:lavoce
..
compare: yogiedigital:f436865b7fe08b03d74ec675f9e071b913fb4821
Branches Tags
yogiedigital:lavoce yogiedigital:main

37 Commits
lavoce ... f436865b7f

Author SHA1 Message Date
Bragas Rexita Ecos Fernanda
f436865b7f Merge pull request 'lavoce' (#32) from lavoce into main 
Reviewed-on: #32
 2026-01-05 03:41:39 +00:00
Bragas Rexita Ecos Fernanda
48437c3c50 Merge pull request 'lavoce' (#30) from lavoce into main 
Reviewed-on: #30
 2025-12-31 03:20:51 +00:00
Bragas Rexita Ecos Fernanda
a33c9b3b92 Merge pull request 'lavoce' (#29) from lavoce into main 
Reviewed-on: #29
 2025-12-23 05:22:06 +00:00
Bragas Rexita Ecos Fernanda
58d1f5c7ab Merge pull request 'Repair and replace svg' (#28) from lavoce into main 
Reviewed-on: #28
 2025-12-22 09:38:05 +00:00
Bragas Rexita Ecos Fernanda
c10a5bf62d Merge pull request 'lavoce' (#27) from lavoce into main 
Reviewed-on: #27
 2025-12-22 09:28:34 +00:00
Bragas Rexita Ecos Fernanda
6cc5042956 Merge pull request 'repair' (#26) from lavoce into main 
Reviewed-on: #26
 2025-11-28 07:17:06 +00:00
Bragas Rexita Ecos Fernanda
5079f8d316 Merge pull request 'lavoce' (#25) from lavoce into main 
Reviewed-on: #25
 2025-11-28 07:12:41 +00:00
Bragas Rexita Ecos Fernanda
7073390de7 Merge pull request 'lavoce' (#24) from lavoce into main 
Reviewed-on: #24
 2025-11-28 05:50:36 +00:00
Bragas Rexita Ecos Fernanda
4226a24e79 Merge pull request 'lavoce' (#23) from lavoce into main 
Reviewed-on: #23
 2025-11-28 05:10:26 +00:00
Bragas Rexita Ecos Fernanda
038009433f Merge pull request 'lavoce' (#22) from lavoce into main 
Reviewed-on: #22
 2025-11-25 03:50:54 +00:00
Bragas Rexita Ecos Fernanda
64ba51b17c Merge pull request 'lavoce' (#21) from lavoce into main 
Reviewed-on: #21
 2025-11-20 03:44:05 +00:00
Bragas Rexita Ecos Fernanda
47d0638a42 Merge pull request 'lavoce' (#20) from lavoce into main 
Reviewed-on: #20
 2025-11-19 01:05:19 +00:00
Bragas Rexita Ecos Fernanda
d8c5f3ed44 Merge pull request 'lavoce' (#19) from lavoce into main 
Reviewed-on: #19
 2025-11-18 00:26:36 +00:00
Bragas Rexita Ecos Fernanda
affd9146bb Merge pull request 'lavoce' (#18) from lavoce into main 
Reviewed-on: #18
 2025-11-17 08:27:39 +00:00
Bragas Rexita Ecos Fernanda
4022b3f8f4 Merge pull request 'lavoce' (#17) from lavoce into main 
Reviewed-on: #17
 2025-11-10 07:57:17 +00:00
Bragas Rexita Ecos Fernanda
446a4e2b95 Merge pull request 'lavoce' (#16) from lavoce into main 
Reviewed-on: #16
 2025-11-10 06:33:35 +00:00
Bragas Rexita Ecos Fernanda
83a475c708 Merge pull request 'Repair beautiful apps' (#15) from lavoce into main 
Reviewed-on: #15
 2025-11-04 10:01:47 +00:00
Bragas Rexita Ecos Fernanda
ab1c510a77 Merge pull request 'Repair bg-signin' (#14) from lavoce into main 
Reviewed-on: #14
 2025-11-04 08:48:59 +00:00
yogiedigital
59859c6d18 Update public/web.config 2025-11-04 07:03:57 +00:00
yogiedigital
2bd27937dc Update public/web.config 2025-11-04 07:02:55 +00:00
yogiedigital
1058c660d6 Update public/web.config 2025-11-04 07:01:10 +00:00
yogiedigital
35b2167791 Update public/web.config 2025-11-04 06:53:05 +00:00
yogiedigital
ec676983d0 Update .gitignore 2025-11-04 06:51:39 +00:00
yogiedigital
c07c5f8235 Update .gitignore 2025-11-04 06:47:31 +00:00
Bragas Rexita Ecos Fernanda
b32ad97034 Merge pull request 'Add side bar menus mobile mode' (#13) from lavoce into main 
Reviewed-on: #13
 2025-11-04 06:42:09 +00:00
Bragas Rexita Ecos Fernanda
76244f6f6e Merge pull request 'lavoce' (#12) from lavoce into main 
Reviewed-on: #12
 2025-11-04 06:23:15 +00:00
Bragas Rexita Ecos Fernanda
0a128cbb3c Merge pull request 'lavoce' (#11) from lavoce into main 
Reviewed-on: #11
 2025-10-28 09:47:36 +00:00
Bragas Rexita Ecos Fernanda
bd4ab26680 Merge pull request 'lavoce' (#10) from lavoce into main 
Reviewed-on: #10
 2025-10-28 04:48:54 +00:00
Bragas Rexita Ecos Fernanda
3e728a1ff5 Merge pull request 'lavoce' (#9) from lavoce into main 
Reviewed-on: #9
 2025-10-27 03:48:58 +00:00
Bragas Rexita Ecos Fernanda
9db143972e Merge pull request 'lavoce' (#8) from lavoce into main 
Reviewed-on: #8
 2025-10-25 09:19:36 +00:00
Bragas Rexita Ecos Fernanda
029ea269a7 Merge pull request 'lavoce' (#7) from lavoce into main 
Reviewed-on: #7
 2025-10-24 05:43:32 +00:00
Bragas Rexita Ecos Fernanda
4cdaa042da Merge pull request 'lavoce' (#6) from lavoce into main 
Reviewed-on: #6
 2025-10-23 07:28:11 +00:00
Bragas Rexita Ecos Fernanda
56af2a16c0 Merge pull request 'update file svg to src assets' (#5) from lavoce into main 
Reviewed-on: #5
 2025-10-23 04:52:13 +00:00
Bragas Rexita Ecos Fernanda
deadf2ffb4 Merge pull request 'lavoce' (#4) from lavoce into main 
Reviewed-on: #4
 2025-10-23 04:27:57 +00:00
Bragas Rexita Ecos Fernanda
4da80c7089 Merge pull request 'lavoce' (#3) from lavoce into main 
Reviewed-on: #3
 2025-10-22 05:59:57 +00:00
yogiedigital
56e3ce78a6 Merge pull request 'lavoce' (#2) from lavoce into main 
Reviewed-on: #2
 2025-10-20 04:06:02 +00:00
yogiedigital
7c2a019dd2 Merge pull request 'lavoce' (#1) from lavoce into main 
Reviewed-on: #1
 2025-09-17 08:39:35 +00:00
8 changed files with 666 additions and 805 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

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

2
public/web.config
View File

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

40
src/api/notification.jsx
View File

@@ -46,15 +46,6 @@ const getNotificationLogByNotificationId = async (notificationId) => {
return response.data; 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 // Resend notification to specific user
const resendNotificationToUser = async (notificationId, userId) => { const resendNotificationToUser = async (notificationId, userId) => {
const response = await SendRequest({ const response = await SendRequest({
@@ -64,42 +55,11 @@ const resendNotificationToUser = async (notificationId, userId) => {
return response.data; 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 { export {
getAllNotification, getAllNotification,
getNotificationById, getNotificationById,
getNotificationDetail, getNotificationDetail,
createNotificationLog, createNotificationLog,
getNotificationLogByNotificationId, getNotificationLogByNotificationId,
updateIsRead,
resendNotificationToUser, resendNotificationToUser,
resendChatByUser,
resendChatAllUser,
searchData,
}; };

2
src/pages/blank/RedirectWa.jsx
View File

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

433
src/pages/master/brandDevice/AddBrandDevice.jsx
View File

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

16
src/pages/master/brandDevice/EditBrandDevice.jsx
View File

@@ -479,14 +479,14 @@ const EditBrandDevice = () => {
return; 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'; const solutionType = solution.type || 'text';

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

@@ -42,9 +42,6 @@ import {
getAllNotification, getAllNotification,
getNotificationLogByNotificationId, getNotificationLogByNotificationId,
getNotificationDetail, getNotificationDetail,
resendChatByUser,
resendChatAllUser,
searchData,
} from '../../../api/notification'; } from '../../../api/notification';
const { Text, Paragraph, Link: AntdLink } = Typography; const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -68,7 +65,6 @@ const transformNotificationData = (apiData) => {
: 'N/A', : 'N/A',
location: item.plant_sub_section_name || item.device_location || 'Location not specified', location: item.plant_sub_section_name || item.device_location || 'Location not specified',
details: item.device_name || '-', details: item.device_name || '-',
errId: item.notification_error_id || 0,
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
subsection: item.plant_sub_section_name || 'N/A', subsection: item.plant_sub_section_name || 'N/A',
isRead: item.is_read, 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}"?`, content: `Are you sure you want to resend the notification for "${notification.title}"?`,
okText: 'Resend', okText: 'Resend',
cancelText: 'Cancel', cancelText: 'Cancel',
async onOk() { onOk() {
console.log('Resending notification:', notification.id); console.log('Resending notification:', notification.id);
await resendChatAllUser(notification.errId);
message.success( message.success(
`Notification for "${notification.title}" has been resent successfully.` `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 = () => { const handleSearch = () => {
fetchSearch(searchValue); setSearchTerm(searchValue);
}; };
const handleSearchClear = () => { const handleSearchClear = () => {
setSearchValue(''); setSearchValue('');
fetchSearch(''); setSearchTerm('');
}; };
const getUnreadCount = () => notifications.filter((n) => !n.isRead).length; const getUnreadCount = () => notifications.filter((n) => !n.isRead).length;
@@ -325,16 +285,14 @@ const ListNotification = memo(function ListNotification(props) {
name: user.contact_name, name: user.contact_name,
phone: user.contact_phone, phone: user.contact_phone,
status: user.is_send ? 'Delivered' : 'Pending', 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',
day: '2-digit', month: '2-digit',
month: '2-digit', year: 'numeric',
year: 'numeric', hour: '2-digit',
hour: '2-digit', minute: '2-digit',
minute: '2-digit', }) + ' WIB'
})
.replace('.', ':') + ' WIB'
: 'N/A', : 'N/A',
})); }));
setUserHistoryData(transformedUsers); setUserHistoryData(transformedUsers);
@@ -421,7 +379,7 @@ const ListNotification = memo(function ListNotification(props) {
<Text strong>{notification.title}</Text> <Text strong>{notification.title}</Text>
<div style={{ marginTop: '4px' }}> <div style={{ marginTop: '4px' }}>
<Text style={{ color }}> <Text style={{ color }}>
Error Code {notification.issue} {notification.issue}
</Text> </Text>
</div> </div>
</div> </div>
@@ -647,8 +605,10 @@ const ListNotification = memo(function ListNotification(props) {
type="primary" type="primary"
ghost ghost
icon={<SendOutlined />} 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 Resend
@@ -734,8 +694,8 @@ const ListNotification = memo(function ListNotification(props) {
{/* Kolom Kanan: Card */} {/* Kolom Kanan: Card */}
<Col flex="auto"> <Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}> <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 direction="vertical" size={4}>
<Space> <Space>
<ClockCircleOutlined /> <ClockCircleOutlined />
@@ -746,16 +706,13 @@ const ListNotification = memo(function ListNotification(props) {
Added at {log.timestamp} Added at {log.timestamp}
</Text> </Text>
</Space> </Space>
<div> <div>
<Text strong> <Text strong>
{log.addedBy.name} Added by: {log.addedBy.name}
</Text> </Text>
</div>
<div>
<span <span
style={{ style={{
marginLeft: '8px',
border: '1px solid #52c41a', border: '1px solid #52c41a',
color: '#52c41a', color: '#52c41a',
padding: '2px 6px', padding: '2px 6px',
@@ -768,8 +725,7 @@ const ListNotification = memo(function ListNotification(props) {
</div> </div>
</Space> </Space>
</Col> </Col>
<Col xs={24} md={14}> <Col xs={24} md={12}>
<Text strong>Description:</Text>
<Paragraph <Paragraph
style={{ style={{
color: '#595959', color: '#595959',

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

@@ -14,8 +14,6 @@ import {
message, message,
Avatar, Avatar,
Tag, Tag,
Badge,
Divider,
} from 'antd'; } from 'antd';
import { import {
ArrowLeftOutlined, ArrowLeftOutlined,
@@ -35,16 +33,12 @@ import {
CheckCircleOutlined, CheckCircleOutlined,
SyncOutlined, SyncOutlined,
SendOutlined, SendOutlined,
MobileOutlined,
ClockCircleOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { import {
getNotificationDetail, getNotificationDetail,
createNotificationLog, createNotificationLog,
getNotificationLogByNotificationId, getNotificationLogByNotificationId,
updateIsRead,
resendNotificationToUser, resendNotificationToUser,
resendChatByUser,
} from '../../api/notification'; } from '../../api/notification';
const { Content } = Layout; const { Content } = Layout;
@@ -113,19 +107,8 @@ const getUsersFromNotification = (notification) => {
id: user.notification_error_user_id.toString(), id: user.notification_error_user_id.toString(),
name: user.contact_name, name: user.contact_name,
phone: user.contact_phone, phone: user.contact_phone,
status: user.is_send ? 'Delivered' : 'Pending', status: user.is_send ? 'sent' : 'pending',
loading: user.loading || false, 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 // Fetch log history
fetchLogHistory(notificationId); fetchLogHistory(notificationId);
// Fetch using the actual API
const resUpdate = await updateIsRead(notificationId);
} else { } else {
throw new Error('Notification not found'); throw new Error('Notification not found');
} }
@@ -394,7 +374,7 @@ const NotificationDetailTab = (props) => {
<Text>{notification.title}</Text> <Text>{notification.title}</Text>
<div style={{ marginTop: '2px' }}> <div style={{ marginTop: '2px' }}>
<Text strong style={{ fontSize: '16px' }}> <Text strong style={{ fontSize: '16px' }}>
Error Code {notification.issue} {notification.issue}
</Text> </Text>
</div> </div>
</Col> </Col>
@@ -482,56 +462,101 @@ const NotificationDetailTab = (props) => {
<Row align="middle" justify="space-between"> <Row align="middle" justify="space-between">
<Col> <Col>
<Space align="center"> <Space align="center">
<Text strong>{user.name}</Text> <Avatar
<Text>|</Text> size="large"
<Text> icon={<UserOutlined />}
<MobileOutlined /> {user.phone}
</Text>
<Text>|</Text>
<Badge
status={
user.status === 'Delivered'
? 'success'
: 'default'
}
text={user.status}
/> />
</Space> <div>
<Divider style={{ margin: '8px 0' }} /> <Text strong>{user.name}</Text>
<Space align="center"> <div
{user.status === 'Delivered' ? ( style={{
<CheckCircleFilled display: 'flex',
style={{ color: '#52c41a' }} alignItems: 'center',
/> gap: '4px',
) : ( }}
<ClockCircleOutlined >
style={{ color: '#faad14' }} <PhoneOutlined
/> style={{
)} color: '#8c8c8c',
<Text type="secondary"> }}
{user.status === 'Delivered' />
? 'Success Delivered at' <Text type="secondary">
: 'Status '}{' '} {user.phone}
{user.timestamp} </Text>
</Text> </div>
</div>
</Space> </Space>
</Col> </Col>
<Col> <Col>
<Col> <Space align="center" size="large">
{getStatusTag(user.status)}
<Button <Button
type="primary" type="primary"
ghost
icon={<SendOutlined />} 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 Resend
</Button> </Button>
</Col> </Space>
</Col> </Col>
</Row> </Row>
</Card> </Card>
@@ -542,407 +567,393 @@ const NotificationDetailTab = (props) => {
</Col> </Col>
</Row> </Row>
<Row gutter={[8, 8]}> <Row gutter={[8, 8]} style={{ marginBottom: 'px' }}>
<Col xs={24} md={8}> <Col xs={24} md={8}>
<div> <Card
<Card hoverable
hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}
bodyStyle={{ padding: '12px'}} >
> <Space>
<Space> <BookOutlined
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }}
style={{ fontSize: '16px', color: '#1890ff' }} />
/> <Text strong style={{ fontSize: '16px', color: '#262626' }}>
<Text Handling Guideline
strong </Text>
style={{ fontSize: '16px', color: '#262626' }} </Space>
> </Card>
Handling Guideline </Col>
</Text> <Col xs={24} md={8}>
</Space> <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>
<Space <Row gutter={[8, 8]} style={{ marginTop: '-12px' }}>
direction="vertical" <Col xs={24} md={8}>
size="small" <Card
style={{ width: '100%' }} size="small"
> title="Guideline Documents"
{notification.error_code?.solution && style={{ height: '100%' }}
notification.error_code.solution.length > 0 ? ( >
<> <Space
{notification.error_code.solution direction="vertical"
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif size="small"
.map((sol, index) => ( style={{ width: '100%' }}
<div >
key={ {notification.error_code?.solution &&
sol.brand_code_solution_id || notification.error_code.solution.length > 0 ? (
index <>
} {notification.error_code.solution
> .filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
{sol.path_document ? ( .map((sol, index) => (
<Card <div
size="small" key={
bodyStyle={{ sol.brand_code_solution_id || index
padding: '8px 12px', }
marginBottom: '4px', >
}} {sol.path_document ? (
hoverable <Card
extra={ size="small"
<Text bodyStyle={{
type="secondary" padding: '8px 12px',
style={{ marginBottom: '4px',
fontSize: }}
'10px', hoverable
}} extra={
> <Text
PDF type="secondary"
</Text>
}
>
<div
style={{ style={{
display: 'flex', fontSize: '10px',
justifyContent:
'space-between',
alignItems:
'center',
}} }}
> >
<div> PDF
<Text </Text>
style={{ }
fontSize:
'12px',
color: '#262626',
}}
>
<FilePdfOutlined
style={{
marginRight:
'8px',
}}
/>{' '}
{sol.file_upload_name ||
'Solution Document.pdf'}
</Text>
<Link
href={sol.path_document.replace(
'/detail-notification/pdf/',
'/notification-detail/pdf/'
)}
target="_blank"
style={{
fontSize:
'12px',
display:
'block',
}}
>
lihat disini
</Link>
</div>
</div>
</Card>
) : null}
{sol.type_solution === 'text' &&
sol.text_solution ? (
<Card
size="small"
title={
<Text strong>
{sol.solution_name}:
</Text>
}
bodyStyle={{
padding: '8px 12px',
marginBottom: '4px',
}}
extra={
<Text
type="secondary"
style={{
fontSize:
'10px',
}}
>
{sol.type_solution.toUpperCase()}
</Text>
}
>
<div>
<div
style={{
marginTop:
'4px',
}}
>
{sol.text_solution}
</div>
</div>
</Card>
) : null}
</div>
))}
</>
) : (
<div
style={{
textAlign: 'center',
padding: '20px',
color: '#8c8c8c',
}}
>
Tidak ada dokumen solusi tersedia
</div>
)}
</Space>
</Card>
</div>
</Col>
<Col xs={24} md={8}>
<div>
<Card
hoverable
bodyStyle={{ padding: '12px'}}
>
<Space>
<ToolOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text
strong
style={{ fontSize: '16px', color: '#262626' }}
>
Spare Part
</Text>
</Space>
<Space
direction="vertical"
size="small"
style={{ width: '100%' }}
>
{notification.spareparts &&
notification.spareparts.length > 0 ? (
notification.spareparts.map((sparepart, index) => (
<Card
size="small"
key={index}
bodyStyle={{ padding: '12px' }}
hoverable
>
<Row gutter={16} align="top">
<Col
span={7}
style={{ textAlign: 'center' }}
>
<div
style={{
width: '100%',
height: '60px',
backgroundColor: '#f0f0f0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px',
marginBottom: '8px',
}}
> >
<ToolOutlined
style={{
fontSize: '24px',
color: '#bfbfbf',
}}
/>
</div>
<Text
style={{
fontSize: '12px',
color:
sparepart.sparepart_stok ===
'Available' ||
sparepart.sparepart_stok ===
'available'
? '#52c41a'
: '#ff4d4f',
fontWeight: 500,
}}
>
{sparepart.sparepart_stok}
</Text>
</Col>
<Col span={17}>
<Space
direction="vertical"
size={4}
style={{ width: '100%' }}
>
<Text strong>
{sparepart.sparepart_name}
</Text>
<Paragraph
style={{
fontSize: '12px',
margin: 0,
color: '#595959',
}}
>
{sparepart.sparepart_description ||
'Deskripsi tidak tersedia'}
</Paragraph>
<div <div
style={{ style={{
border: '1px solid #d9d9d9', display: 'flex',
borderRadius: '4px', justifyContent:
padding: '4px 8px', 'space-between',
fontSize: '11px', alignItems: 'center',
color: '#8c8c8c',
marginTop: '8px',
}} }}
> >
Kode:{' '} <div>
{sparepart.sparepart_code} | <Text
Qty:{' '} style={{
{sparepart.sparepart_qty} | fontSize:
Unit:{' '} '12px',
{sparepart.sparepart_unit} color: '#262626',
}}
>
<FilePdfOutlined
style={{
marginRight:
'8px',
}}
/>{' '}
{sol.file_upload_name ||
'Solution Document.pdf'}
</Text>
<Link
href={sol.path_document.replace(
'/detail-notification/pdf/',
'/notification-detail/pdf/'
)}
target="_blank"
style={{
fontSize:
'12px',
display:
'block',
}}
>
lihat disini
</Link>
</div>
</div> </div>
</Space> </Card>
</Col> ) : null}
</Row> {sol.type_solution === 'text' &&
</Card> sol.text_solution ? (
)) <Card
) : ( size="small"
<div bodyStyle={{
style={{ padding: '8px 12px',
textAlign: 'center', marginBottom: '4px',
padding: '20px', }}
color: '#8c8c8c', extra={
}} <Text
> type="secondary"
Tidak ada spare parts terkait style={{
</div> fontSize: '10px',
)} }}
</Space> >
</Card> {sol.type_solution.toUpperCase()}
</div> </Text>
}
>
<div>
<Text strong>
{sol.solution_name}:
</Text>
<div
style={{
marginTop: '4px',
}}
>
{sol.text_solution}
</div>
</div>
</Card>
) : null}
</div>
))}
</>
) : (
<div
style={{
textAlign: 'center',
padding: '20px',
color: '#8c8c8c',
}}
>
Tidak ada dokumen solusi tersedia
</div>
)}
</Space>
</Card>
</Col> </Col>
<Col xs={24} md={8}> <Col xs={24} md={8}>
<div> <Card
<Card bodyStyle={{ padding: '12px'}}> size="small"
<Space> title="Required Spare Parts"
<HistoryOutlined style={{ height: '100%' }}
style={{ fontSize: '16px', color: '#1890ff' }} >
/> <Space
<Text direction="vertical"
strong size="small"
style={{ fontSize: '16px', color: '#262626' }} style={{ width: '100%' }}
>
{notification.spareparts &&
notification.spareparts.length > 0 ? (
notification.spareparts.map((sparepart, index) => (
<Card
size="small"
key={index}
bodyStyle={{ padding: '12px' }}
hoverable
>
<Row gutter={16} align="top">
<Col
span={7}
style={{ textAlign: 'center' }}
>
<div
style={{
width: '100%',
height: '60px',
backgroundColor: '#f0f0f0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px',
marginBottom: '8px',
}}
>
<ToolOutlined
style={{
fontSize: '24px',
color: '#bfbfbf',
}}
/>
</div>
<Text
style={{
fontSize: '12px',
color:
sparepart.sparepart_stok ===
'Available' ||
sparepart.sparepart_stok ===
'available'
? '#52c41a'
: '#ff4d4f',
fontWeight: 500,
}}
>
{sparepart.sparepart_stok}
</Text>
</Col>
<Col span={17}>
<Space
direction="vertical"
size={4}
style={{ width: '100%' }}
>
<Text strong>
{sparepart.sparepart_name}
</Text>
<Paragraph
style={{
fontSize: '12px',
margin: 0,
color: '#595959',
}}
>
{sparepart.sparepart_description ||
'Deskripsi tidak tersedia'}
</Paragraph>
<div
style={{
border: '1px solid #d9d9d9',
borderRadius: '4px',
padding: '4px 8px',
fontSize: '11px',
color: '#8c8c8c',
marginTop: '8px',
}}
>
Kode: {sparepart.sparepart_code}{' '}
| Qty: {sparepart.sparepart_qty}{' '}
| Unit:{' '}
{sparepart.sparepart_unit}
</div>
</Space>
</Col>
</Row>
</Card>
))
) : (
<div
style={{
textAlign: 'center',
padding: '20px',
color: '#8c8c8c',
}}
> >
Log Activity Tidak ada spare parts terkait
</Text> </div>
</Space> )}
</Space>
<Space </Card>
direction="vertical" </Col>
<Col span={8}>
<Card size="small" style={{ height: '100%' }}>
<Space
direction="vertical"
size="small"
style={{ width: '100%' }}
>
<Card
size="small" size="small"
style={{ width: '100%' }} bodyStyle={{
padding: '8px 12px',
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
}}
> >
<Space
direction="vertical"
style={{ width: '100%' }}
size="small"
>
{isAddingLog && (
<>
<Text strong style={{ fontSize: '12px' }}>
Add New Log / Update Progress
</Text>
<Input.TextArea
rows={2}
placeholder="Tuliskan update penanganan di sini..."
value={newLogDescription}
onChange={(e) =>
setNewLogDescription(e.target.value)
}
disabled={submitLoading}
/>
</>
)}
<Button
type={isAddingLog ? 'primary' : 'dashed'}
size="small"
block
icon={
submitLoading ? (
<LoadingOutlined />
) : (
!isAddingLog && <PlusOutlined />
)
}
onClick={
isAddingLog
? handleSubmitLog
: () => setIsAddingLog(true)
}
loading={submitLoading}
disabled={submitLoading}
>
{isAddingLog ? 'Submit Log' : 'Add Log'}
</Button>
{isAddingLog && (
<Button
size="small"
block
onClick={() => {
setIsAddingLog(false);
setNewLogDescription('');
}}
disabled={submitLoading}
>
Cancel
</Button>
)}
</Space>
</Card>
{logHistoryData.map((log) => (
<Card <Card
key={log.id}
size="small" size="small"
bodyStyle={{ bodyStyle={{
padding: '8px 12px', padding: '8px 12px',
backgroundColor: isAddingLog
? '#fafafa'
: '#fff',
}} }}
> >
<Space <Paragraph
direction="vertical" style={{ fontSize: '12px', margin: 0 }}
style={{ width: '100%' }} ellipsis={{ rows: 2 }}
size="small"
> >
{isAddingLog && ( <Text strong>{log.addedBy.name}:</Text>{' '}
<> {log.description}
<Text </Paragraph>
strong <Text type="secondary" style={{ fontSize: '11px' }}>
style={{ fontSize: '12px' }} {log.timestamp}
> </Text>
Add New Log / Update Progress
</Text>
<Input.TextArea
rows={2}
placeholder="Tuliskan update penanganan di sini..."
value={newLogDescription}
onChange={(e) =>
setNewLogDescription(
e.target.value
)
}
disabled={submitLoading}
/>
</>
)}
<Button
type={isAddingLog ? 'primary' : 'dashed'}
size="small"
block
icon={
submitLoading ? (
<LoadingOutlined />
) : (
!isAddingLog && <PlusOutlined />
)
}
onClick={
isAddingLog
? handleSubmitLog
: () => setIsAddingLog(true)
}
loading={submitLoading}
disabled={submitLoading}
>
{isAddingLog ? 'Submit Log' : 'Add Log'}
</Button>
{isAddingLog && (
<Button
size="small"
block
onClick={() => {
setIsAddingLog(false);
setNewLogDescription('');
}}
disabled={submitLoading}
>
Cancel
</Button>
)}
</Space>
</Card> </Card>
{logHistoryData.map((log) => ( ))}
<Card </Space>
key={log.id} </Card>
size="small"
bodyStyle={{
padding: '8px 12px',
}}
>
<Paragraph
style={{ fontSize: '12px', margin: 0 }}
// ellipsis={{ rows: 2 }}
>
<Text strong>{log.addedBy.name}:</Text>{' '}
{log.description}
</Paragraph>
<Text
type="secondary"
style={{ fontSize: '11px' }}
>
{log.timestamp}
</Text>
</Card>
))}
</Space>
</Card>
</div>
</Col> </Col>
</Row> </Row>
</Space> </Space>