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

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

Browse Source 
Reviewed-on: #37
This commit is contained in:
Bragas Rexita Ecos Fernanda
2026-01-08 07:44:22 +00:00
parent 4d8af01316 6fdb259246
commit 03d5646565
4 changed files with 636 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,13 +13,18 @@ import {
Space, Space,
ConfigProvider, ConfigProvider,
} from 'antd'; } from 'antd';
import { import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
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 { getBrandById, createBrand, createErrorCode, getErrorCodesByBrandId, updateErrorCode, deleteErrorCode, deleteBrand } from '../../../api/master-brand'; import {
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';
@@ -42,7 +47,9 @@ 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(tab === 'error-codes' ? 1 : (location.state?.phase || 0)); const [currentStep, setCurrentStep] = useState(
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('');
@@ -68,7 +75,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]) {
@@ -85,9 +92,16 @@ 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 = solution.path_solution && solution.path_solution.trim() !== ''; const hasPathSolution =
const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0); solution.path_solution && solution.path_solution.trim() !== '';
const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0); 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;
isValid = hasPathSolution || hasFileUpload || hasFile; isValid = hasPathSolution || hasFileUpload || hasFile;
} }
@@ -118,9 +132,9 @@ const AddBrandDevice = () => {
text: '', text: '',
status: true, status: true,
file: null, file: null,
fileUpload: null fileUpload: null,
} },
} },
}); });
}, 100); }, 100);
} }
@@ -128,7 +142,6 @@ const AddBrandDevice = () => {
}; };
const setSolutionsForExistingRecord = (solutions, targetForm) => { const setSolutionsForExistingRecord = (solutions, targetForm) => {
if (!targetForm || !solutions || solutions.length === 0) { if (!targetForm || !solutions || solutions.length === 0) {
return; return;
} }
@@ -153,11 +166,14 @@ 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: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File', name:
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,
}; };
} }
@@ -170,7 +186,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,
}; };
}); });
@@ -180,28 +196,35 @@ 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(['solution_items', key, 'fileUpload'], solution.fileUpload); targetForm.setFieldValue(
['solution_items', key, 'fileUpload'],
solution.fileUpload
);
targetForm.setFieldValue(['solution_items', key, 'status'], solution.status); targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution); targetForm.setFieldValue(
targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName); ['solution_items', key, 'path_solution'],
solution.path_solution
);
targetForm.setFieldValue(
['solution_items', key, 'fileName'],
solution.fileName
);
}); });
const finalValues = targetForm.getFieldsValue(); const finalValues = targetForm.getFieldsValue();
}, 100); }, 100);
}, 100); }, 100);
@@ -209,14 +232,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];
@@ -233,7 +256,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'], '');
@@ -246,7 +269,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 () => {
@@ -259,7 +282,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);
@@ -268,7 +291,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);
@@ -307,8 +330,7 @@ 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');
}; };
@@ -360,8 +382,6 @@ const AddBrandDevice = () => {
setTrigerFilter((prev) => !prev); setTrigerFilter((prev) => !prev);
}; };
const resetErrorCodeForm = () => { const resetErrorCodeForm = () => {
errorCodeForm.resetFields(); errorCodeForm.resetFields();
errorCodeForm.setFieldsValue({ errorCodeForm.setFieldsValue({
@@ -391,16 +411,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';
@@ -422,7 +442,11 @@ const AddBrandDevice = () => {
} else { } else {
formattedSolution.text_solution = ''; formattedSolution.text_solution = '';
formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || ''; formattedSolution.path_solution =
solution.path_solution ||
solution.file?.uploadPath ||
solution.fileUpload?.uploadPath ||
'';
} }
if (formattedSolution.brand_code_solution_id) { if (formattedSolution.brand_code_solution_id) {
@@ -440,7 +464,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;
@@ -456,11 +480,13 @@ const AddBrandDevice = () => {
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!', message: editingErrorCodeKey
? 'Error code berhasil diupdate!'
: 'Error code berhasil ditambahkan!',
}); });
resetErrorCodeForm(); resetErrorCodeForm();
setTrigerFilter(prev => !prev); setTrigerFilter((prev) => !prev);
} else { } else {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',
@@ -479,12 +505,10 @@ const AddBrandDevice = () => {
} }
}; };
const handleErrorCodeIconRemove = () => { const handleErrorCodeIconRemove = () => {
setErrorCodeIcon(null); setErrorCodeIcon(null);
}; };
const handleFinish = async () => { const handleFinish = async () => {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
@@ -506,10 +530,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);
@@ -517,7 +541,8 @@ const AddBrandDevice = () => {
NotifAlert({ NotifAlert({
icon: 'warning', icon: 'warning',
title: 'Perhatian', title: 'Perhatian',
message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', message:
'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
}); });
return; return;
} }
@@ -526,7 +551,8 @@ const AddBrandDevice = () => {
NotifAlert({ NotifAlert({
icon: 'warning', icon: 'warning',
title: 'Perhatian', title: 'Perhatian',
message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', message:
'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
}); });
return; return;
} }
@@ -591,11 +617,7 @@ const AddBrandDevice = () => {
<Spin size="large" /> <Spin size="large" />
</div> </div>
)} )}
<BrandForm <BrandForm form={brandForm} isEdit={false} brandInfo={brandInfo} />
form={brandForm}
isEdit={false}
brandInfo={brandInfo}
/>
</div> </div>
); );
} }
@@ -635,31 +657,39 @@ const AddBrandDevice = () => {
</Col> </Col>
<Col xs={24} md={16} lg={16}> <Col xs={24} md={16} lg={16}>
<div style={{ <div
paddingLeft: '12px' style={{
}}> paddingLeft: '12px',
}}
>
<Card <Card
title={ title={
<div style={{ <div
display: 'flex', style={{
alignItems: 'center',
justifyContent: 'space-between',
width: '100%'
}}>
<span style={{
fontSize: '16px',
fontWeight: '600',
color: '#262626',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '8px' justifyContent: 'space-between',
}}> width: '100%',
<span style={{ }}
width: '4px', >
height: '20px', <span
backgroundColor: '#23A55A', style={{
borderRadius: '2px' fontSize: '16px',
}}></span> fontWeight: '600',
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
@@ -675,43 +705,51 @@ 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 = '0 4px 8px rgba(35, 165, 90, 0.3)'; e.target.style.boxShadow =
'0 4px 8px rgba(35, 165, 90, 0.3)';
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)'; e.target.style.boxShadow =
'0 2px 4px rgba(35, 165, 90, 0.2)';
}} }}
> >
{editingErrorCodeKey ? 'Update Error Code' : 'Save Error Code'} {editingErrorCodeKey
? '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 style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> <div
<div style={{ style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
padding: '16px', >
border: '1px solid #f0f0f0', <div
borderRadius: '10px', style={{
backgroundColor: '#ffffff', padding: '16px',
marginBottom: '0', border: '1px solid #f0f0f0',
transition: 'all 0.3s ease', borderRadius: '10px',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)' backgroundColor: '#ffffff',
}}> 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}
@@ -724,29 +762,42 @@ 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 style={{ <div
padding: '16px', style={{
border: '1px solid #f0f0f0', padding: '16px',
borderRadius: '10px', border: '1px solid #f0f0f0',
backgroundColor: '#ffffff', borderRadius: '10px',
transition: 'all 0.3s ease', backgroundColor: '#ffffff',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)' transition: 'all 0.3s ease',
}}> boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
<div style={{ }}
display: 'flex', >
alignItems: 'center', <div
gap: '8px', style={{
marginBottom: '12px', display: 'flex',
paddingBottom: '8px', alignItems: 'center',
borderBottom: '1px solid #f5f5f5' gap: '8px',
}}> marginBottom: '12px',
<div style={{ paddingBottom: '8px',
width: '3px', borderBottom: '1px solid #f5f5f5',
height: '16px', }}
backgroundColor: '#1890ff', >
borderRadius: '2px' <div
}}></div> style={{
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}> width: '3px',
height: '16px',
backgroundColor: '#1890ff',
borderRadius: '2px',
}}
></div>
<h4
style={{
margin: 0,
color: '#262626',
fontSize: '14px',
fontWeight: '600',
}}
>
Solution Solution
</h4> </h4>
</div> </div>
@@ -756,14 +807,23 @@ const AddBrandDevice = () => {
solutionTypes={solutionTypes} solutionTypes={solutionTypes}
solutionStatuses={solutionStatuses} solutionStatuses={solutionStatuses}
onAddSolutionField={handleAddSolutionField} onAddSolutionField={handleAddSolutionField}
onRemoveSolutionField={handleRemoveSolutionField} onRemoveSolutionField={
handleRemoveSolutionField
}
onSolutionTypeChange={handleSolutionTypeChange} onSolutionTypeChange={handleSolutionTypeChange}
onSolutionStatusChange={handleSolutionStatusChange} onSolutionStatusChange={
onSolutionFileUpload={(fileData) => { handleSolutionStatusChange
}} }
onSolutionFileUpload={(fileData) => {}}
onFileView={(fileData) => { onFileView={(fileData) => {
if (fileData && (fileData.url || fileData.uploadPath)) { if (
window.open(fileData.url || fileData.uploadPath, '_blank'); fileData &&
(fileData.url || fileData.uploadPath)
) {
window.open(
fileData.url || fileData.uploadPath,
'_blank'
);
} }
}} }}
isReadOnly={false} isReadOnly={false}
@@ -772,40 +832,55 @@ const AddBrandDevice = () => {
</div> </div>
</Col> </Col>
<Col xs={24} md={12} lg={12}> <Col xs={24} md={12} lg={12}>
<div style={{ <div
padding: '16px', style={{
border: '1px solid #f0f0f0', padding: '16px',
borderRadius: '10px', border: '1px solid #f0f0f0',
backgroundColor: '#ffffff', borderRadius: '10px',
transition: 'all 0.3s ease', backgroundColor: '#ffffff',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)' transition: 'all 0.3s ease',
}}> boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
<div style={{ }}
display: 'flex', >
alignItems: 'center', <div
gap: '8px', style={{
marginBottom: '12px', display: 'flex',
paddingBottom: '8px', alignItems: 'center',
borderBottom: '1px solid #f5f5f5' gap: '8px',
}}> marginBottom: '12px',
<div style={{ paddingBottom: '8px',
width: '3px', borderBottom: '1px solid #f5f5f5',
height: '16px', }}
backgroundColor: '#faad14', >
borderRadius: '2px' <div
}}></div> style={{
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}> width: '3px',
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 style={{ <div
maxHeight: '45vh', style={{
overflow: 'auto', maxHeight: '45vh',
border: '1px solid #e8e8e8', overflow: 'auto',
borderRadius: '8px', border: '1px solid #e8e8e8',
padding: '12px', borderRadius: '8px',
backgroundColor: '#fafafa' padding: '12px',
}}> backgroundColor: '#fafafa',
}}
>
<SparepartSelect <SparepartSelect
selectedSparepartIds={selectedSparepartIds} selectedSparepartIds={selectedSparepartIds}
onSparepartChange={setSelectedSparepartIds} onSparepartChange={setSelectedSparepartIds}
@@ -816,15 +891,16 @@ const AddBrandDevice = () => {
</Col> </Col>
</Row> </Row>
<div style={{ <div
display: 'flex', style={{
justifyContent: 'space-between', display: 'flex',
alignItems: 'center', justifyContent: 'space-between',
padding: '16px 0 0 0', alignItems: 'center',
borderTop: '1px solid #f0f0f0', padding: '16px 0 0 0',
marginTop: '12px' borderTop: '1px solid #f0f0f0',
}}> marginTop: '12px',
}}
>
{editingErrorCodeKey && ( {editingErrorCodeKey && (
<Button <Button
size="large" size="large"
@@ -837,7 +913,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';
@@ -871,7 +947,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: (
@@ -895,12 +971,11 @@ 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]);
@@ -913,8 +988,7 @@ const AddBrandDevice = () => {
const errorCodes = response.data || []; const errorCodes = response.data || [];
setApiErrorCodes(errorCodes); setApiErrorCodes(errorCodes);
} }
} catch (error) { } catch (error) {}
}
} }
}; };
fetchErrorCodes(); fetchErrorCodes();
@@ -925,8 +999,7 @@ const AddBrandDevice = () => {
if (isTemporaryBrand && temporaryBrandId && currentStep === 0) { if (isTemporaryBrand && temporaryBrandId && currentStep === 0) {
try { try {
await deleteBrand(temporaryBrandId); await deleteBrand(temporaryBrandId);
} catch (error) { } catch (error) {}
}
} }
}; };
@@ -937,7 +1010,6 @@ const AddBrandDevice = () => {
}; };
}, [isTemporaryBrand, temporaryBrandId, currentStep]); }, [isTemporaryBrand, temporaryBrandId, currentStep]);
return ( return (
<ConfigProvider <ConfigProvider
theme={{ theme={{
@@ -988,14 +1060,9 @@ const AddBrandDevice = () => {
<Divider /> <Divider />
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div> <div>
<Button onClick={handleCancel}> <Button onClick={handleCancel}>Cancel</Button>
Cancel
</Button>
{currentStep === 1 && ( {currentStep === 1 && (
<Button <Button onClick={handlePrevStep} style={{ marginLeft: 8 }}>
onClick={handlePrevStep}
style={{ marginLeft: 8 }}
>
Kembali ke Brand Info Kembali ke Brand Info
</Button> </Button>
)} )}
@@ -1034,4 +1101,4 @@ const AddBrandDevice = () => {
); );
}; };
export default AddBrandDevice; export default AddBrandDevice;

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';

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

@@ -384,7 +384,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 }}>
{notification.issue} Error Code {notification.issue}
</Text> </Text>
</div> </div>
</div> </div>
@@ -697,8 +697,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="middle"> <Row gutter={[16, 8]} align="top">
<Col xs={24} md={12}> <Col xs={24} md={10}>
<Space direction="vertical" size={4}> <Space direction="vertical" size={4}>
<Space> <Space>
<ClockCircleOutlined /> <ClockCircleOutlined />
@@ -709,13 +709,16 @@ const ListNotification = memo(function ListNotification(props) {
Added at {log.timestamp} Added at {log.timestamp}
</Text> </Text>
</Space> </Space>
<div> <div>
<Text strong> <Text strong>
Added by: {log.addedBy.name} {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',
@@ -728,7 +731,8 @@ const ListNotification = memo(function ListNotification(props) {
</div> </div>
</Space> </Space>
</Col> </Col>
<Col xs={24} md={12}> <Col xs={24} md={14}>
<Text strong>Description:</Text>
<Paragraph <Paragraph
style={{ style={{
color: '#595959', color: '#595959',

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

@@ -394,7 +394,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' }}>
{notification.issue} Error Code {notification.issue}
</Text> </Text>
</div> </div>
</Col> </Col>
@@ -542,393 +542,407 @@ const NotificationDetailTab = (props) => {
</Col> </Col>
</Row> </Row>
<Row gutter={[8, 8]} style={{ marginBottom: 'px' }}> <Row gutter={[8, 8]}>
<Col xs={24} md={8}> <Col xs={24} md={8}>
<Card <div>
hoverable <Card
bodyStyle={{ padding: '12px', textAlign: 'center' }} hoverable
> bodyStyle={{ padding: '12px'}}
<Space>
<BookOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Handling Guideline
</Text>
</Space>
</Card>
</Col>
<Col xs={24} md={8}>
<Card
hoverable
bodyStyle={{ padding: '12px', textAlign: 'center' }}
>
<Space>
<ToolOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Spare Part
</Text>
</Space>
</Card>
</Col>
<Col xs={24} md={8}>
<Card bodyStyle={{ padding: '12px', textAlign: 'center' }}>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Log Activity
</Text>
</Space>
</Card>
</Col>
</Row>
<Row gutter={[8, 8]} style={{ marginTop: '-12px' }}>
<Col xs={24} md={8}>
<Card
size="small"
title="Guideline Documents"
style={{ height: '100%' }}
>
<Space
direction="vertical"
size="small"
style={{ width: '100%' }}
> >
{notification.error_code?.solution && <Space>
notification.error_code.solution.length > 0 ? ( <BookOutlined
<> style={{ fontSize: '16px', color: '#1890ff' }}
{notification.error_code.solution />
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif <Text
.map((sol, index) => ( strong
<div style={{ fontSize: '16px', color: '#262626' }}
key={ >
sol.brand_code_solution_id || index Handling Guideline
} </Text>
> </Space>
{sol.path_document ? (
<Card <Space
size="small" direction="vertical"
bodyStyle={{ size="small"
padding: '8px 12px', style={{ width: '100%' }}
marginBottom: '4px', >
}} {notification.error_code?.solution &&
hoverable notification.error_code.solution.length > 0 ? (
extra={ <>
<Text {notification.error_code.solution
type="secondary" .filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
style={{ .map((sol, index) => (
fontSize: '10px', <div
}} key={
> sol.brand_code_solution_id ||
PDF index
</Text> }
} >
> {sol.path_document ? (
<div <Card
style={{ size="small"
display: 'flex', bodyStyle={{
justifyContent: padding: '8px 12px',
'space-between', marginBottom: '4px',
alignItems: 'center',
}} }}
> hoverable
<div> extra={
<Text <Text
type="secondary"
style={{ style={{
fontSize: fontSize:
'12px', '10px',
color: '#262626',
}} }}
> >
<FilePdfOutlined PDF
style={{
marginRight:
'8px',
}}
/>{' '}
{sol.file_upload_name ||
'Solution Document.pdf'}
</Text> </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"
bodyStyle={{
padding: '8px 12px',
marginBottom: '4px',
}}
extra={
<Text
type="secondary"
style={{
fontSize: '10px',
}}
>
{sol.type_solution.toUpperCase()}
</Text>
}
>
<div>
<Text strong>
{sol.solution_name}:
</Text>
<div <div
style={{ style={{
marginTop: '4px', display: 'flex',
justifyContent:
'space-between',
alignItems:
'center',
}} }}
> >
{sol.text_solution} <div>
<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> </div>
</div> </Card>
</Card> ) : null}
) : null} {sol.type_solution === 'text' &&
</div> sol.text_solution ? (
))} <Card
</> size="small"
) : ( title={
<div <Text strong>
style={{ {sol.solution_name}:
textAlign: 'center', </Text>
padding: '20px', }
color: '#8c8c8c', bodyStyle={{
}} padding: '8px 12px',
> marginBottom: '4px',
Tidak ada dokumen solusi tersedia }}
</div> extra={
)} <Text
</Space> type="secondary"
</Card> 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>
<Col xs={24} md={8}> <Col xs={24} md={8}>
<Card <div>
size="small" <Card
title="Required Spare Parts" hoverable
style={{ height: '100%' }} bodyStyle={{ padding: '12px'}}
>
<Space
direction="vertical"
size="small"
style={{ width: '100%' }}
> >
{notification.spareparts && <Space>
notification.spareparts.length > 0 ? ( <ToolOutlined
notification.spareparts.map((sparepart, index) => ( style={{ fontSize: '16px', color: '#1890ff' }}
<Card />
size="small" <Text
key={index} strong
bodyStyle={{ padding: '12px' }} style={{ fontSize: '16px', color: '#262626' }}
hoverable >
> Spare Part
<Row gutter={16} align="top"> </Text>
<Col </Space>
span={7}
style={{ textAlign: 'center' }} <Space
> direction="vertical"
<div size="small"
style={{ style={{ width: '100%' }}
width: '100%', >
height: '60px', {notification.spareparts &&
backgroundColor: '#f0f0f0', notification.spareparts.length > 0 ? (
display: 'flex', notification.spareparts.map((sparepart, index) => (
alignItems: 'center', <Card
justifyContent: 'center', size="small"
borderRadius: '4px', key={index}
marginBottom: '8px', bodyStyle={{ padding: '12px' }}
}} hoverable
>
<Row gutter={16} align="top">
<Col
span={7}
style={{ textAlign: 'center' }}
> >
<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', width: '100%',
height: '60px',
backgroundColor: '#f0f0f0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px', borderRadius: '4px',
padding: '4px 8px', marginBottom: '8px',
fontSize: '11px',
color: '#8c8c8c',
marginTop: '8px',
}} }}
> >
Kode: {sparepart.sparepart_code}{' '} <ToolOutlined
| Qty: {sparepart.sparepart_qty}{' '} style={{
| Unit:{' '} fontSize: '24px',
{sparepart.sparepart_unit} color: '#bfbfbf',
}}
/>
</div> </div>
</Space> <Text
</Col> style={{
</Row> fontSize: '12px',
</Card> color:
)) sparepart.sparepart_stok ===
) : ( 'Available' ||
<div sparepart.sparepart_stok ===
style={{ 'available'
textAlign: 'center', ? '#52c41a'
padding: '20px', : '#ff4d4f',
color: '#8c8c8c', fontWeight: 500,
}} }}
> >
Tidak ada spare parts terkait {sparepart.sparepart_stok}
</div> </Text>
)} </Col>
</Space> <Col span={17}>
</Card> <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',
}}
>
Tidak ada spare parts terkait
</div>
)}
</Space>
</Card>
</div>
</Col> </Col>
<Col xs={24} md={8}> <Col xs={24} md={8}>
<Card size="small" style={{ height: '100%' }}> <div>
<Space <Card bodyStyle={{ padding: '12px'}}>
direction="vertical" <Space>
size="small" <HistoryOutlined
style={{ width: '100%' }} style={{ fontSize: '16px', color: '#1890ff' }}
> />
<Card <Text
size="small" strong
bodyStyle={{ style={{ fontSize: '16px', color: '#262626' }}
padding: '8px 12px',
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
}}
>
<Space
direction="vertical"
style={{ width: '100%' }}
size="small"
> >
{isAddingLog && ( Log Activity
<> </Text>
<Text strong style={{ fontSize: '12px' }}> </Space>
Add New Log / Update Progress
</Text> <Space
<Input.TextArea direction="vertical"
rows={2} size="small"
placeholder="Tuliskan update penanganan di sini..." style={{ width: '100%' }}
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',
}} }}
> >
<Paragraph <Space
style={{ fontSize: '12px', margin: 0 }} direction="vertical"
ellipsis={{ rows: 2 }} style={{ width: '100%' }}
size="small"
> >
<Text strong>{log.addedBy.name}:</Text>{' '} {isAddingLog && (
{log.description} <>
</Paragraph> <Text
<Text type="secondary" style={{ fontSize: '11px' }}> strong
{log.timestamp} style={{ fontSize: '12px' }}
</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) => (
</Space> <Card
</Card> key={log.id}
size="small"
bodyStyle={{
padding: '8px 12px',
}}
>
<Paragraph
style={{ fontSize: '12px', margin: 0 }}
// ellipsis={{ rows: 2 }}
>
<Text strong>{log.addedBy.name}:</Text>{' '}
{log.description}
</Paragraph>
<Text
type="secondary"
style={{ fontSize: '11px' }}
>
{log.timestamp}
</Text>
</Card>
))}
</Space>
</Card>
</div>
</Col> </Col>
</Row> </Row>
</Space> </Space>