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

update ui brand device

Browse Source
This commit is contained in:
Antony Kurniawan
2025-12-04 01:17:25 +07:00
parent 1bc98de564
commit f22e120204
15 changed files with 3132 additions and 1349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/App.jsx
View File

@@ -4,6 +4,7 @@ import SignIn from './pages/auth/SignIn';
import SignUp from './pages/auth/Signup'; import SignUp from './pages/auth/Signup';
import { ProtectedRoute } from './ProtectedRoute'; import { ProtectedRoute } from './ProtectedRoute';
import NotFound from './pages/blank/NotFound'; import NotFound from './pages/blank/NotFound';
import { BrandFormProvider } from './context/BrandFormContext';
// Dashboard // Dashboard
import Home from './pages/home/Home'; import Home from './pages/home/Home';
@@ -21,6 +22,7 @@ import IndexShift from './pages/master/shift/IndexShift';
// Brand device // Brand device
import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice'; import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice';
import EditBrandDevice from './pages/master/brandDevice/EditBrandDevice'; import EditBrandDevice from './pages/master/brandDevice/EditBrandDevice';
import AddEditErrorCode from './pages/master/brandDevice/AddEditErrorCode';
import ViewBrandDevice from './pages/master/brandDevice/ViewBrandDevice'; import ViewBrandDevice from './pages/master/brandDevice/ViewBrandDevice';
import ViewFilePage from './pages/master/brandDevice/ViewFilePage'; import ViewFilePage from './pages/master/brandDevice/ViewFilePage';
@@ -91,25 +93,37 @@ const App = () => {
<Route path="tag" element={<IndexTag />} /> <Route path="tag" element={<IndexTag />} />
<Route path="unit" element={<IndexUnit />} /> <Route path="unit" element={<IndexUnit />} />
<Route path="sparepart" element={<IndexSparepart />} /> <Route path="sparepart" element={<IndexSparepart />} />
<Route path="brand-device" element={<IndexBrandDevice />} />
<Route path="brand-device/add" element={<AddBrandDevice />} />
<Route path="brand-device/edit/:id" element={<EditBrandDevice />} />
<Route path="brand-device/view/:id" element={<ViewBrandDevice />} />
<Route
path="brand-device/edit/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="brand-device/view/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="brand-device/view/temp/files/:fileName"
element={<ViewFilePage />}
/>
<Route path="plant-sub-section" element={<IndexPlantSubSection />} /> <Route path="plant-sub-section" element={<IndexPlantSubSection />} />
<Route path="shift" element={<IndexShift />} /> <Route path="shift" element={<IndexShift />} />
<Route path="status" element={<IndexStatus />} /> <Route path="status" element={<IndexStatus />} />
{/* Brand Device Routes with BrandFormProvider */}
<Route path="brand-device/*" element={
<BrandFormProvider>
<Routes>
<Route path="" element={<IndexBrandDevice />} />
<Route path="add" element={<AddBrandDevice />} />
<Route path="edit/:id" element={<EditBrandDevice />} />
<Route path="view/:id" element={<ViewBrandDevice />} />
<Route
path="edit/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="view/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="view/temp/files/:fileName"
element={<ViewFilePage />}
/>
<Route path=":brandId/error-code/add" element={<AddEditErrorCode />} />
<Route path=":brandId/error-code/edit/:errorCodeId" element={<AddEditErrorCode />} />
<Route path="add/error-code/add" element={<AddEditErrorCode />} />
<Route path="add/error-code/edit/:errorCodeId" element={<AddEditErrorCode />} />
</Routes>
</BrandFormProvider>
} />
</Route> </Route>
<Route path="/report" element={<ProtectedRoute />}> <Route path="/report" element={<ProtectedRoute />}>

21
src/api/master-brand.jsx
View File

@@ -47,4 +47,23 @@ const deleteBrand = async (id) => {
return response.data; return response.data;
}; };
export { getAllBrands, getBrandById, createBrand, updateBrand, deleteBrand }; const getErrorCodesByBrandId = async (brandId, queryParams) => {
const query = queryParams ? `?${queryParams.toString()}` : '';
const response = await SendRequest({
method: 'get',
prefix: `error-code/brand/${brandId}${query}`,
});
return response.data;
};
const getErrorCodeById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `error-code/${id}`,
});
return response.data;
};
export { getAllBrands, getBrandById, createBrand, updateBrand, deleteBrand, getErrorCodesByBrandId, getErrorCodeById };

624
src/context/BrandFormContext.jsx Normal file
View File

@@ -0,0 +1,624 @@
import React, { createContext, useContext, useReducer } from 'react';
import { NotifAlert } from '../components/Global/ToastNotif';
// Initial state
const initialState = {
brandId: null,
routeBrandId: null,
errorCodeId: null,
currentStep: 1,
brandInfo: {
brand_name: '',
brand_type: '',
brand_manufacture: '',
brand_model: '',
is_active: true
},
tempErrorCodes: [],
existingErrorCodes: [],
currentErrorCode: null,
isLoading: false,
error: null,
lastSaved: null
};
// Action types
const SET_BRAND_INFO = 'SET_BRAND_INFO';
const SET_BRAND_ID = 'SET_BRAND_ID';
const SET_ROUTE_BRAND_ID = 'SET_ROUTE_BRAND_ID';
const SET_ERROR_CODE_ID = 'SET_ERROR_CODE_ID';
const SET_CURRENT_STEP = 'SET_CURRENT_STEP';
const UPDATE_BRAND_FIELD = 'UPDATE_BRAND_FIELD';
const ADD_ERROR_CODE = 'ADD_ERROR_CODE';
const UPDATE_ERROR_CODE = 'UPDATE_ERROR_CODE';
const DELETE_ERROR_CODE = 'DELETE_ERROR_CODE';
const MARK_AS_DELETED = 'MARK_AS_DELETED';
const SET_TEMP_ERROR_CODES = 'SET_TEMP_ERROR_CODES';
const SET_EXISTING_ERROR_CODES = 'SET_EXISTING_ERROR_CODES';
const MERGE_ERROR_CODES = 'MERGE_ERROR_CODES';
const SET_CURRENT_ERROR_CODE = 'SET_CURRENT_ERROR_CODE';
const SET_LOADING = 'SET_LOADING';
const SET_ERROR = 'SET_ERROR';
const RESET_FORM = 'RESET_FORM';
const SET_LAST_SAVED = 'SET_LAST_SAVED';
// Reducer function
const brandFormReducer = (state, action) => {
switch (action.type) {
case SET_BRAND_INFO:
return {
...state,
brandInfo: action.payload
};
case SET_BRAND_ID:
return {
...state,
brandId: action.payload
};
case SET_ROUTE_BRAND_ID:
return {
...state,
routeBrandId: action.payload
};
case SET_ERROR_CODE_ID:
return {
...state,
errorCodeId: action.payload
};
case SET_CURRENT_STEP:
return {
...state,
currentStep: action.payload
};
case UPDATE_BRAND_FIELD:
return {
...state,
brandInfo: {
...state.brandInfo,
[action.payload.field]: action.payload.value
}
};
case ADD_ERROR_CODE:
const newErrorCode = {
tempId: Date.now(),
error_code: '',
error_code_name: '',
error_code_description: '',
error_code_color: '#000000ff',
path_icon: '',
is_active: true,
solutions: [],
spareparts: [],
status: 'new',
created_at: new Date().toISOString()
};
return {
...state,
tempErrorCodes: [...state.tempErrorCodes, newErrorCode]
};
case UPDATE_ERROR_CODE:
const { tempId, data } = action.payload;
if (tempId.startsWith('existing_')) {
return {
...state,
existingErrorCodes: state.existingErrorCodes.map(ec =>
`existing_${ec.error_code_id}` === tempId
? {
...ec,
...data,
status: 'modified',
updated_at: new Date().toISOString()
}
: ec
)
};
} else {
// Update in tempErrorCodes
return {
...state,
tempErrorCodes: state.tempErrorCodes.map(ec =>
ec.tempId === tempId
? {
...ec,
...data,
status: ec.status === 'new' ? 'new' : 'modified',
updated_at: new Date().toISOString()
}
: ec
)
};
}
case DELETE_ERROR_CODE:
return {
...state,
tempErrorCodes: state.tempErrorCodes.filter(ec => ec.tempId !== action.payload)
};
case MARK_AS_DELETED:
const deleteTempId = action.payload;
// Check if it's an existing error code (format: existing_${error_code_id})
if (deleteTempId.startsWith('existing_')) {
return {
...state,
existingErrorCodes: state.existingErrorCodes.map(ec =>
`existing_${ec.error_code_id}` === deleteTempId
? {
...ec,
status: 'deleted',
is_active: false,
deleted_at: new Date().toISOString()
}
: ec
)
};
} else {
return {
...state,
tempErrorCodes: state.tempErrorCodes.map(ec =>
ec.tempId === deleteTempId
? {
...ec,
status: 'deleted',
is_active: false,
deleted_at: new Date().toISOString()
}
: ec
)
};
}
case SET_TEMP_ERROR_CODES:
return {
...state,
tempErrorCodes: action.payload
};
case SET_EXISTING_ERROR_CODES:
return {
...state,
existingErrorCodes: action.payload
};
case MERGE_ERROR_CODES:
return {
...state,
existingErrorCodes: action.payload.existing || [],
tempErrorCodes: action.payload.temporary || []
};
case SET_LOADING:
return {
...state,
isLoading: action.payload
};
case SET_ERROR:
return {
...state,
error: action.payload
};
case RESET_FORM:
return { ...initialState, lastSaved: state.lastSaved };
case SET_CURRENT_ERROR_CODE:
return {
...state,
currentErrorCode: action.payload
};
case SET_LAST_SAVED:
return {
...state,
lastSaved: action.payload
};
default:
return state;
}
};
// Create context
const BrandFormContext = createContext();
export const BrandFormProvider = ({ children }) => {
const [state, dispatch] = useReducer(brandFormReducer, initialState);
// Actions
const actions = {
setBrandId: (brandId) => {
dispatch({ type: SET_BRAND_ID, payload: brandId });
},
setRouteBrandId: (routeBrandId) => {
dispatch({ type: SET_ROUTE_BRAND_ID, payload: routeBrandId });
},
setErrorCodeId: (errorCodeId) => {
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
},
setCurrentStep: (step) => {
dispatch({ type: SET_CURRENT_STEP, payload: step });
},
getCurrentBrandId: () => {
return state.brandId || state.routeBrandId;
},
setBrandInfo: (brandInfo) => {
dispatch({ type: SET_BRAND_INFO, payload: brandInfo });
},
updateBrandField: (field, value) => {
dispatch({ type: UPDATE_BRAND_FIELD, payload: { field, value } });
},
addErrorCode: (errorCodeData = {}) => {
const defaultErrorCode = {
tempId: Date.now(),
error_code: '',
error_code_name: '',
error_code_description: '',
error_code_color: '#000000ff',
path_icon: '',
is_active: true,
solutions: [],
spareparts: [],
status: 'new',
created_at: new Date().toISOString()
};
const newErrorCode = { ...defaultErrorCode, ...errorCodeData };
dispatch({ type: ADD_ERROR_CODE, payload: newErrorCode });
},
updateErrorCode: (tempId, data) => {
dispatch({ type: UPDATE_ERROR_CODE, payload: { tempId, data } });
},
deleteErrorCode: (tempId, isPermanent = false) => {
if (isPermanent) {
dispatch({ type: DELETE_ERROR_CODE, payload: tempId });
} else {
dispatch({ type: MARK_AS_DELETED, payload: tempId });
}
},
markAsDeleted: (tempId) => {
dispatch({ type: MARK_AS_DELETED, payload: tempId });
},
setTempErrorCodes: (errorCodes) => {
dispatch({ type: SET_TEMP_ERROR_CODES, payload: errorCodes });
},
setExistingErrorCodes: (errorCodes) => {
dispatch({ type: SET_EXISTING_ERROR_CODES, payload: errorCodes });
},
mergeErrorCodes: (existing, temporary) => {
dispatch({ type: MERGE_ERROR_CODES, payload: { existing, temporary } });
},
setLoading: (isLoading) => {
dispatch({ type: SET_LOADING, payload: isLoading });
},
setError: (error) => {
dispatch({ type: SET_ERROR, payload: error });
},
resetForm: () => {
dispatch({ type: RESET_FORM });
},
setLastSaved: (timestamp) => {
dispatch({ type: SET_LAST_SAVED, payload: timestamp });
},
setCurrentErrorCode: (errorCode) => {
dispatch({ type: SET_CURRENT_ERROR_CODE, payload: errorCode });
},
// Initialize context with route parameters
initializeFromRoute: (routeBrandId, errorCodeId = null) => {
dispatch({ type: SET_ROUTE_BRAND_ID, payload: routeBrandId });
if (errorCodeId) {
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
}
},
// Navigate to specific step with parameter handling
navigateToStep: (step, brandId = null, errorCodeId = null) => {
dispatch({ type: SET_CURRENT_STEP, payload: step });
if (brandId) {
dispatch({ type: SET_BRAND_ID, payload: brandId });
}
if (errorCodeId) {
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
}
},
// Utility functions
getErrorCodeByTempId: (tempId) => {
return state.tempErrorCodes.find(ec => ec.tempId === tempId);
},
getActiveErrorCodes: () => {
return state.tempErrorCodes.filter(ec => ec.status !== 'deleted');
},
getModifiedErrorCodes: () => {
return state.tempErrorCodes.filter(ec =>
ec.status === 'new' || ec.status === 'modified' || ec.status === 'deleted'
);
},
hasChanges: () => {
return state.tempErrorCodes.some(ec =>
ec.status === 'new' || ec.status === 'modified' || ec.status === 'deleted'
);
},
validateForm: () => {
const errors = {};
// Validate brand info
if (!state.brandInfo.brand_name?.trim()) {
errors.brand = 'Brand name is required';
NotifAlert({
icon: 'warning',
title: 'Validasi Gagal',
message: 'Brand name wajib diisi!',
});
return { isValid: false, errors };
}
if (!state.brandInfo.brand_manufacture?.trim()) {
errors.brand_manufacture = 'Brand manufacture is required';
NotifAlert({
icon: 'warning',
title: 'Validasi Gagal',
message: 'Brand manufacture wajib diisi!',
});
return { isValid: false, errors };
}
const allActiveErrorCodes = [
...state.existingErrorCodes,
...state.tempErrorCodes.filter(ec => ec.status !== 'deleted')
];
if (allActiveErrorCodes.length === 0) {
errors.errorCodes = 'At least one error code is required';
NotifAlert({
icon: 'warning',
title: 'Validasi Gagal',
message: 'Brand harus memiliki minimal 1 error code!',
});
return { isValid: false, errors };
}
// Validate each error code
allActiveErrorCodes.forEach((ec, index) => {
if (!ec.error_code?.trim()) {
errors[`errorCode_${ec.tempId || ec.error_code_id}`] = 'Error code is required';
}
if (!ec.error_code_name?.trim()) {
errors[`errorCodeName_${ec.tempId || ec.error_code_id}`] = 'Error code name is required';
}
let solutionsToCheck = [];
if (ec.solution && Array.isArray(ec.solution)) {
solutionsToCheck = ec.solution;
} else if (ec.solutions && Array.isArray(ec.solutions)) {
solutionsToCheck = ec.solutions;
}
if (solutionsToCheck.length > 0) {
const activeSolutions = solutionsToCheck.filter(sol => sol.status !== 'deleted');
if (activeSolutions.length === 0) {
errors[`solutions_${ec.tempId || ec.error_code_id}`] = 'Setiap error code harus memiliki minimal 1 solution';
}
} else {
errors[`solutions_${ec.tempId || ec.error_code_id}`] = 'Setiap error code harus memiliki minimal 1 solution';
}
if (ec.spareparts && Array.isArray(ec.spareparts)) {
ec.spareparts.forEach((sp, spIndex) => {
if (sp === undefined || sp === null || sp === '') {
console.error(`❌ Error Code ${index}, Sparepart ${spIndex}: sparepart_id is undefined, null, or empty`);
}
});
}
});
if (Object.keys(errors).length > 0) {
NotifAlert({
icon: 'warning',
title: 'Validasi Gagal',
message: 'Perbaiki error yang ada sebelum melanjutkan!',
});
}
return { isValid: Object.keys(errors).length === 0, errors };
},
prepareSubmissionData: (userId) => {
const allErrorCodes = [
...state.existingErrorCodes.map(ec => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing'
})),
...state.tempErrorCodes
];
const finalErrorCodes = allErrorCodes
.filter(ec => ec.status !== 'deleted')
.map(ec => {
const cleanedCode = {
error_code: ec.error_code || '',
error_code_name: ec.error_code_name || '',
error_code_description: ec.error_code_description || '',
error_code_color: ec.error_code_color || '#000000',
path_icon: ec.path_icon || '',
is_active: ec.is_active === true ? 1 : 0,
solution: [],
spareparts: []
};
if (ec.error_code_id && ec.status === 'existing') {
cleanedCode.error_code_id = parseInt(ec.error_code_id);
}
// Handle both solution and solutions fields for compatibility
let solutions = [];
if (ec.solution && Array.isArray(ec.solution)) {
solutions = ec.solution;
} else if (ec.solutions && Array.isArray(ec.solutions)) {
solutions = ec.solutions;
}
if (solutions.length > 0) {
cleanedCode.solution = solutions
.filter(sol => sol && sol.solution_name)
.map(sol => ({
solution_name: sol.solution_name || '',
type_solution: sol.type_solution || 'text',
text_solution: sol.text_solution || '',
path_solution: sol.path_solution || '',
is_active: sol.is_active === true ? 1 : 0
}));
}
if (ec.spareparts && Array.isArray(ec.spareparts)) {
cleanedCode.spareparts = ec.spareparts
.filter(sp => sp !== undefined && sp !== null && sp !== '' && sp !== 0)
.map(sp => {
let sparepartId = 0;
if (typeof sp === 'object' && sp !== null) {
sparepartId = sp.sparepart_id || sp.id || sp.sparepartId || 0;
} else if (typeof sp === 'string' || typeof sp === 'number') {
sparepartId = parseInt(sp) || 0;
}
return parseInt(sparepartId) || 0;
})
.filter(id => id > 0);
}
return cleanedCode;
});
const submissionData = {
brand_name: state.brandInfo.brand_name || '',
brand_type: state.brandInfo.brand_type || '',
brand_manufacture: state.brandInfo.brand_manufacture || '',
brand_model: state.brandInfo.brand_model || '',
is_active: state.brandInfo.is_active === true ? 1 : 0,
error_code: finalErrorCodes,
updated_by: parseInt(userId) || 1
};
// console.log(' Prepared flat submission data:', JSON.stringify(submissionData, null, 2));
return submissionData;
},
getAllErrorCodes: () => {
return [
...state.existingErrorCodes.map(ec => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing'
})),
...state.tempErrorCodes
];
},
getErrorCodeById: (id) => {
const existingCode = state.existingErrorCodes.find(ec => ec.error_code_id == id);
if (existingCode) {
return {
...existingCode,
tempId: `existing_${existingCode.error_code_id}`,
status: 'existing'
};
}
return state.tempErrorCodes.find(ec => ec.tempId == id);
},
// Enhanced error code management
loadErrorCodesForBrand: async (brandId) => {
dispatch({ type: SET_LOADING, payload: true });
try {
const { getErrorCodesByBrandId } = await import('../api/master-brand');
const response = await getErrorCodesByBrandId(brandId);
if (response && response.data) {
dispatch({ type: SET_EXISTING_ERROR_CODES, payload: response.data });
}
return response;
} catch (error) {
dispatch({ type: SET_ERROR, payload: error.message });
throw error;
} finally {
dispatch({ type: SET_LOADING, payload: false });
}
},
// Smart navigation helper
navigateToErrorCodes: (brandId) => {
const currentId = brandId || state.brandId || state.routeBrandId;
if (currentId) {
dispatch({ type: SET_BRAND_ID, payload: currentId });
dispatch({ type: SET_CURRENT_STEP, payload: 2 });
return currentId;
}
return null;
},
editErrorCode: (errorCodeId, brandId) => {
const currentBrandId = brandId || state.brandId || state.routeBrandId;
if (currentBrandId && errorCodeId) {
dispatch({ type: SET_BRAND_ID, payload: currentBrandId });
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
dispatch({ type: SET_CURRENT_STEP, payload: 3 });
return { brandId: currentBrandId, errorCodeId };
}
return null;
}
};
const value = {
...state,
...actions
};
return (
<BrandFormContext.Provider value={value}>
{children}
</BrandFormContext.Provider>
);
};
export const useBrandForm = () => {
const context = useContext(BrandFormContext);
if (!context) {
throw new Error('useBrandForm must be used within a BrandFormProvider');
}
return context;
};
export default BrandFormContext;

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

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { import {
Divider, Divider,
Typography, Typography,
@@ -10,53 +10,54 @@ import {
Col, Col,
Card, Card,
Spin, Spin,
Table,
Tag, Tag,
Space, Space,
Input,
} from 'antd'; } from 'antd';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif'; import { EyeOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import TableList from '../../../components/Global/TableList';
import { ConfigProvider } from 'antd';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb'; import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { createBrand } from '../../../api/master-brand'; import { createBrand } from '../../../api/master-brand';
import BrandForm from './component/BrandForm'; import BrandForm from './component/BrandForm';
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
import SolutionForm from './component/SolutionForm';
import FormActions from './component/FormActions';
import ListErrorCode from './component/ListErrorCode';
import { useErrorCodeLogic } from './hooks/errorCode';
import { useSolutionLogic } from './hooks/solution'; import { useSolutionLogic } from './hooks/solution';
import { EditOutlined, DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons'; import { useBrandForm } from '../../../context/BrandFormContext';
import { useBrandDeviceLogic } from './hooks/useBrandDeviceLogic';
const { Title } = Typography; const { Title } = Typography;
const { Step } = Steps; const { Step } = Steps;
const AddBrandDevice = () => { const AddBrandDevice = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { setBreadcrumbItems } = useBreadcrumb(); const { setBreadcrumbItems } = useBreadcrumb();
const [brandForm] = Form.useForm(); const [brandForm] = Form.useForm();
const [errorCodeForm] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState(false);
const [currentStep, setCurrentStep] = useState(0);
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
brand_name: '',
brand_type: '',
brand_model: '',
brand_manufacture: '',
is_active: true,
});
const [errorCodes, setErrorCodes] = useState([]);
const [pendingErrorCodes, setPendingErrorCodes] = useState([]);
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [solutionForm] = Form.useForm(); const [solutionForm] = Form.useForm();
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]); const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null); const [loading, setLoading] = useState(false);
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [searchValue, setSearchValue] = useState('');
const [searchText, setSearchText] = useState('');
const [trigerFilter, setTrigerFilter] = useState(false);
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic( // Context integration
errorCodeForm, const {
[] brandId,
); brandInfo,
setBrandInfo,
tempErrorCodes,
addErrorCode,
updateErrorCode,
deleteErrorCode,
prepareSubmissionData,
validateForm,
resetForm,
} = useBrandForm();
// Use step from query parameter or context
const tab = searchParams.get('tab');
const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : 0);
const { const {
solutionFields, solutionFields,
@@ -64,7 +65,6 @@ const AddBrandDevice = () => {
solutionStatuses, solutionStatuses,
solutionsToDelete, solutionsToDelete,
firstSolutionValid, firstSolutionValid,
checkFirstSolutionValid,
handleAddSolutionField, handleAddSolutionField,
handleRemoveSolutionField, handleRemoveSolutionField,
handleSolutionTypeChange, handleSolutionTypeChange,
@@ -74,6 +74,354 @@ const AddBrandDevice = () => {
setSolutionsForExistingRecord, setSolutionsForExistingRecord,
} = useSolutionLogic(solutionForm); } = useSolutionLogic(solutionForm);
// Navigation functions
const handleNextStep = async () => {
try {
await brandForm.validateFields();
setCurrentStep(1);
} catch (error) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
}
};
const handlePrevStep = () => {
setCurrentStep(0);
};
const handleCancel = () => {
navigate('/master/brand-device');
};
const handleAddErrorCode = () => {
navigate(`/master/brand-device/add/error-code/add`);
};
const handleEditErrorCodeNavigate = (record) => {
const errorCodeId = record.status === 'existing' ? record.error_code_id : record.tempId;
if (errorCodeId) {
navigate(`/master/brand-device/add/error-code/edit/${errorCodeId}`);
}
};
const handleDeleteErrorCode = (record) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Apakah Anda yakin ingin menghapus error code "${record.error_code}"?`,
onConfirm: () => {
const tempId = record.tempId || `existing_${record.error_code_id}`;
deleteErrorCode(tempId, false); // false = soft delete
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus!',
});
setTrigerFilter(prev => !prev);
},
onCancel: () => {}
});
};
const handlePreviewErrorCode = (record) => {
console.log('Preview error code:', record);
};
const handleSearch = () => {
setSearchText(searchValue);
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setSearchText('');
setTrigerFilter((prev) => !prev);
};
const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
setBrandInfo(allValues);
}, [setBrandInfo]);
const getErrorCodesData = async (params) => {
try {
const search = params.get('search') || '';
const page = parseInt(params.get('page')) || 1;
const limit = parseInt(params.get('limit')) || 10;
const allErrorCodes = tempErrorCodes.filter(ec => ec.status !== 'deleted');
let filteredData = allErrorCodes;
if (searchText) {
filteredData = allErrorCodes.filter(ec =>
ec.error_code.toLowerCase().includes(searchText.toLowerCase()) ||
ec.error_code_name.toLowerCase().includes(searchText.toLowerCase())
);
}
const startIndex = 0;
const endIndex = startIndex + limit;
const paginatedData = filteredData.slice(startIndex, endIndex);
return {
data: paginatedData,
pagination: {
current_page: page,
current_limit: limit,
total_limit: filteredData.length,
total_page: Math.ceil(filteredData.length / limit),
}
};
} catch (error) {
console.error('Error getting error codes data:', error);
return {
data: [],
pagination: {
current_page: 1,
current_limit: 10,
total_limit: 0,
total_page: 0,
}
};
}
};
// Error code columns
const errorCodeColumns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Error Code',
dataIndex: 'error_code',
key: 'error_code',
width: '20%',
render: (text, record) => (
<Space>
{text}
{record.status === 'new' && <Tag color="green">New</Tag>}
</Space>
),
},
{
title: 'Error Name',
dataIndex: 'error_code_name',
key: 'error_code_name',
width: '25%',
},
{
title: 'Description',
dataIndex: 'error_code_description',
key: 'error_code_description',
width: '30%',
ellipsis: true,
},
{
title: 'Actions',
key: 'actions',
width: '20%',
render: (_, record) => (
<Space>
<Button
type="text"
icon={<EyeOutlined />}
onClick={() => showPreviewModal(record)}
size="small"
/>
<Button
type="text"
icon={<EditOutlined />}
onClick={() => showEditModal(record)}
size="small"
/>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)}
size="small"
/>
</Space>
),
},
];
// Query params for table
const queryParams = useMemo(() => {
const params = new URLSearchParams();
params.set('page', '1');
params.set('limit', '10');
if (searchValue) {
params.set('search', searchValue);
}
return params;
}, [searchValue]);
const handleFinish = async () => {
setConfirmLoading(true);
try {
// Validate form using context
const validation = validateForm();
if (!validation.isValid) {
return;
}
const submissionData = prepareSubmissionData(1);
const response = await createBrand(submissionData);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || 'Brand Device berhasil ditambahkan.',
});
resetForm();
navigate('/master/brand-device');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal menambahkan Brand Device',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
});
} finally {
setConfirmLoading(false);
}
};
const renderStepContent = () => {
if (currentStep === 0) {
return (
<div style={{ position: 'relative' }}>
{loading && (
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 10,
borderRadius: '8px',
}}
>
<Spin size="large" />
</div>
)}
<BrandForm
form={brandForm}
onValuesChange={handleBrandFormValuesChange}
isEdit={false}
showSparepartSection={true}
/>
</div>
);
}
if (currentStep === 1) {
return (
<Card>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search error codes..."
value={searchText}
onChange={(e) => {
const value = e.target.value;
setSearchText(value);
setSearchValue(value);
if (value === '') {
setTrigerFilter((prev) => !prev);
}
}}
onSearch={handleSearch}
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
/>
</Col>
<Col>
<Space wrap size="small">
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
>
<Button
icon={<PlusOutlined />}
onClick={handleAddErrorCode}
size="large"
>
Add Error Code
</Button>
</ConfigProvider>
</Space>
</Col>
</Row>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
mobile
cardColor={'#42AAFF'}
header={'error_code'}
showPreviewModal={handlePreviewErrorCode}
showEditModal={handleEditErrorCodeNavigate}
showDeleteDialog={handleDeleteErrorCode}
getData={getErrorCodesData}
queryParams={queryParams}
columns={errorCodeColumns(handlePreviewErrorCode, handleEditErrorCodeNavigate, handleDeleteErrorCode)}
triger={trigerFilter}
/>
</Col>
</Row>
</Card>
);
}
return null;
};
useEffect(() => { useEffect(() => {
setBreadcrumbItems([ setBreadcrumbItems([
{ {
@@ -99,390 +447,6 @@ const AddBrandDevice = () => {
]); ]);
}, [setBreadcrumbItems, navigate]); }, [setBreadcrumbItems, navigate]);
const handleCancel = () => {
navigate('/master/brand-device');
};
const handleNextStep = async () => {
try {
const currentFormData = await brandForm.validateFields();
setFormData({
brand_name: currentFormData.brand_name,
brand_type: currentFormData.brand_type || '',
brand_model: currentFormData.brand_model || '',
brand_manufacture: currentFormData.brand_manufacture || '',
is_active: currentFormData.is_active,
});
setCurrentStep(1);
} catch (error) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
}
};
const handleFinish = async () => {
setConfirmLoading(true);
try {
const transformedErrorCodes = pendingErrorCodes.length > 0 ? pendingErrorCodes.map(ec => ({
error_code: ec.error_code,
error_code_name: ec.error_code_name,
error_code_description: ec.error_code_description || '',
error_code_color: ec.error_code_color || '#ad4141ff',
path_icon: ec.path_icon || '',
is_active: ec.status !== undefined ? ec.status : true,
solution: (ec.solution || []).map(sol => ({
solution_name: sol.solution_name,
type_solution: sol.type_solution,
text_solution: sol.text_solution || '',
path_solution: sol.path_solution || '',
is_active: sol.is_active
}))
})) : [];
const brandData = {
brand_name: formData.brand_name,
brand_type: formData.brand_type || '',
brand_model: formData.brand_model || '',
brand_manufacture: formData.brand_manufacture || '',
is_active: formData.is_active,
spareparts: selectedSparepartIds,
error_code: transformedErrorCodes,
};
const response = await createBrand(brandData);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || 'Brand Device berhasil ditambahkan.',
});
navigate('/master/brand-device');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal menambahkan Brand Device',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
});
} finally {
setConfirmLoading(false);
}
};
const handlePreviewErrorCode = (record) => {
errorCodeForm.setFieldsValue({
error_code: record.error_code,
error_code_name: record.error_code_name,
error_code_description: record.error_code_description,
error_code_color: record.error_code_color,
status: record.status,
});
setErrorCodeIcon(record.errorCodeIcon || null);
setIsErrorCodeFormReadOnly(true);
setEditingErrorCodeKey(record.key);
if (record.solution && record.solution.length > 0) {
setSolutionsForExistingRecord(record.solution, solutionForm);
} else {
resetSolutionFields();
}
};
const handleEditErrorCode = (record) => {
errorCodeForm.setFieldsValue({
error_code: record.error_code,
error_code_name: record.error_code_name,
error_code_description: record.error_code_description,
error_code_color: record.error_code_color,
status: record.status,
});
setErrorCodeIcon(record.errorCodeIcon || null);
setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(record.key);
if (record.solution && record.solution.length > 0) {
setSolutionsForExistingRecord(record.solution, solutionForm);
}
const formElement = document.querySelector('.ant-form');
if (formElement) {
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
const handleAddErrorCode = async () => {
try {
const errorCodeValues = await errorCodeForm.validateFields();
const solutionData = getSolutionData();
// Validate error code fields
if (!errorCodeValues.error_code || !errorCodeValues.error_code_name) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Error code dan error name wajib diisi!',
});
return;
}
// Validate solution data
if (!solutionData || solutionData.length === 0) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap error code harus memiliki minimal 1 solution!',
});
return;
}
// Validate each solution has name
const invalidSolution = solutionData.find(sol => !sol.solution_name || sol.solution_name.trim() === '');
if (invalidSolution) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap solution harus memiliki nama!',
});
return;
}
const newErrorCode = {
error_code: errorCodeValues.error_code,
error_code_name: errorCodeValues.error_code_name,
error_code_description: errorCodeValues.error_code_description,
error_code_color: errorCodeValues.error_code_color || '#000000',
path_icon: errorCodeIcon?.uploadPath || '',
is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
solution: solutionData,
errorCodeIcon: errorCodeIcon,
key: editingErrorCodeKey || `temp-${Date.now()}`,
};
let updatedPendingErrorCodes;
if (editingErrorCodeKey) {
updatedPendingErrorCodes = pendingErrorCodes.map((item) => {
if (item.key === editingErrorCodeKey) {
return {
...item,
...newErrorCode,
error_code_id: item.error_code_id || newErrorCode.error_code_id,
};
}
return item;
});
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil diupdate!',
});
} else {
updatedPendingErrorCodes = [...pendingErrorCodes, newErrorCode];
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil ditambahkan!',
});
}
setPendingErrorCodes(updatedPendingErrorCodes);
setErrorCodes(updatedPendingErrorCodes);
setTimeout(() => {
resetErrorCodeForm();
}, 100);
} catch (error) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
});
}
};
const resetErrorCodeForm = () => {
errorCodeForm.resetFields();
errorCodeForm.setFieldsValue({
status: true,
});
setErrorCodeIcon(null);
resetSolutionFields();
setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(null);
};
const handleDeleteErrorCode = async (key) => {
if (errorCodes.length <= 1) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap brand harus memiliki minimal 1 error code!',
});
return;
}
const updatedErrorCodes = errorCodes.filter((item) => item.key !== key);
setErrorCodes(updatedErrorCodes);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus!',
});
};
const handleCreateNewErrorCode = () => {
resetErrorCodeForm();
resetSolutionFields();
setErrorCodeIcon(null);
setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(null);
};
const handleErrorCodeIconUpload = (iconData) => {
setErrorCodeIcon(iconData);
};
const handleErrorCodeIconRemove = () => {
setErrorCodeIcon(null);
};
const renderStepContent = () => {
if (currentStep === 0) {
return (
<BrandForm
form={brandForm}
formData={formData}
onValuesChange={(changedValues, allValues) =>
setFormData((prev) => ({ ...prev, ...allValues }))
}
isEdit={false}
selectedSparepartIds={selectedSparepartIds}
onSparepartChange={setSelectedSparepartIds}
showSparepartSection={true}
/>
);
}
if (currentStep === 1) {
return (
<>
<Row gutter={24}>
<Col span={6}>
<Card
title={
<Title level={5} style={{ margin: 0 }}>
{isErrorCodeFormReadOnly
? editingErrorCodeKey
? 'View Error Code'
: 'Error Code Form'
: editingErrorCodeKey
? 'Edit Error Code'
: 'Error Code'}
</Title>
}
size="small"
>
<Form
form={errorCodeForm}
layout="vertical"
initialValues={{
status: true,
}}
>
<ErrorCodeSimpleForm
errorCodeForm={errorCodeForm}
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
errorCodeIcon={errorCodeIcon}
onErrorCodeIconUpload={handleErrorCodeIconUpload}
onErrorCodeIconRemove={handleErrorCodeIconRemove}
onAddErrorCode={handleAddErrorCode}
/>
</Form>
</Card>
</Col>
<Col span={6}>
<Card
title={
<Title level={5} style={{ margin: 0 }}>
Solutions
</Title>
}
size="small"
>
<Form
form={solutionForm}
layout="vertical"
initialValues={{
solution_status_0: true,
solution_type_0: 'text',
}}
onValuesChange={checkFirstSolutionValid}
>
<SolutionForm
solutionForm={solutionForm}
solutionFields={solutionFields}
solutionTypes={solutionTypes}
solutionStatuses={solutionStatuses}
firstSolutionValid={firstSolutionValid}
onAddSolutionField={handleAddSolutionField}
onRemoveSolutionField={handleRemoveSolutionField}
onSolutionTypeChange={handleSolutionTypeChange}
onSolutionStatusChange={handleSolutionStatusChange}
checkFirstSolutionValid={checkFirstSolutionValid}
isReadOnly={isErrorCodeFormReadOnly}
/>
</Form>
</Card>
</Col>
<Col span={12}>
<Card
title={
<Title level={5} style={{ margin: 0 }}>
Error Codes ({errorCodes.length})
</Title>
}
size="small"
>
<ListErrorCode
errorCodes={errorCodes}
loading={loading}
onPreview={handlePreviewErrorCode}
onEdit={handleEditErrorCode}
onDelete={handleDeleteErrorCode}
/>
<div style={{ marginTop: 16, textAlign: 'center' }}>
<Button
type="dashed"
onClick={handleCreateNewErrorCode}
style={{
width: '100%',
borderColor: '#23A55A',
color: '#23A55A'
}}
>
+ Add New Error Code
</Button>
</div>
</Card>
</Col>
</Row>
</>
);
}
return null;
};
return ( return (
<Card> <Card>
<Title level={4} style={{ margin: '0 0 24px 0' }}> <Title level={4} style={{ margin: '0 0 24px 0' }}>
@@ -524,15 +488,48 @@ const AddBrandDevice = () => {
</div> </div>
</div> </div>
<Divider /> <Divider />
<FormActions <div style={{ display: 'flex', justifyContent: 'space-between' }}>
currentStep={currentStep} <div>
onPreviousStep={() => setCurrentStep(currentStep - 1)} <Button onClick={handleCancel}>
onNextStep={handleNextStep} Cancel
onSave={handleFinish} </Button>
onCancel={handleCancel} {currentStep === 1 && (
confirmLoading={confirmLoading} <Button
isEditMode={false} onClick={handlePrevStep}
/> style={{ marginLeft: 8 }}
>
Back to Brand Info
</Button>
)}
</div>
<div>
{currentStep === 0 && (
<Button
type="primary"
onClick={handleNextStep}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Next to Error Codes
</Button>
)}
{currentStep === 1 && (
<Button
type="primary"
onClick={handleFinish}
loading={confirmLoading}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Save Brand Device
</Button>
)}
</div>
</div>
</Card> </Card>
); );
}; };

588
src/pages/master/brandDevice/AddEditErrorCode.jsx Normal file
View File

@@ -0,0 +1,588 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
Card,
Typography,
Button,
Form,
Row,
Col,
Spin,
Upload,
} from 'antd';
import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons';
import { getBrandById, getErrorCodeById, updateBrand, getErrorCodesByBrandId } from '../../../api/master-brand';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { useBrandForm } from '../../../context/BrandFormContext';
import { uploadFile } from '../../../api/file-uploads';
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
import SolutionForm from './component/SolutionForm';
import { useSolutionLogic } from './hooks/solution';
import SingleSparepartSelect from './component/SingleSparepartSelect';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
const { Title } = Typography;
const AddEditErrorCode = () => {
const navigate = useNavigate();
const { brandId: routeBrandId, errorCodeId } = useParams();
const { setBreadcrumbItems } = useBreadcrumb();
// Use BrandForm context
const {
brandId: contextBrandId,
routeBrandId: contextRouteBrandId,
setRouteBrandId,
setErrorCodeId,
initializeFromRoute,
tempErrorCodes,
existingErrorCodes,
addErrorCode,
updateErrorCode,
setCurrentErrorCode
} = useBrandForm();
// Use brandId from context first, fallback to route
const currentBrandId = contextBrandId || routeBrandId;
// Forms
const [errorCodeForm] = Form.useForm();
const [solutionForm] = Form.useForm();
const [loading, setLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
const [isEdit, setIsEdit] = useState(false);
const [fileList, setFileList] = useState([]);
const {
solutionFields,
solutionTypes,
solutionStatuses,
solutionsToDelete,
firstSolutionValid,
handleAddSolutionField,
handleRemoveSolutionField,
handleSolutionTypeChange,
handleSolutionStatusChange,
resetSolutionFields,
getSolutionData,
setSolutionsForExistingRecord,
} = useSolutionLogic(solutionForm);
useEffect(() => {
const isEditMode = errorCodeId && errorCodeId !== 'add';
setIsEdit(isEditMode);
// Initialize context with route parameters
if (routeBrandId) {
initializeFromRoute(routeBrandId, errorCodeId);
}
setBreadcrumbItems([
{
title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
},
{
title: (
<span
style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
onClick={() => navigate('/master/brand-device')}
>
Brand Device
</span>
),
},
{
title: (
<span
style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
onClick={() => navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`)}
>
Edit Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
{isEditMode ? 'Edit Error Code' : 'Add Error Code'}
</span>
),
},
]);
if (isEditMode && errorCodeId) {
// For existing error codes, construct the proper tempId format
const tempId = errorCodeId.startsWith('existing_') ? errorCodeId : `existing_${errorCodeId}`;
loadExistingErrorCode(tempId);
}
}, [currentBrandId, errorCodeId, navigate, setBreadcrumbItems]);
const loadExistingErrorCode = async (tempId) => {
try {
setLoading(true);
// console.log(' Looking for error code with tempId:', tempId);
// console.log(' Available error codes in context:', tempErrorCodes);
// Find error code in tempErrorCodes first
let existingErrorCode = tempErrorCodes.find(ec => ec.tempId === tempId);
// If not found, check in existingErrorCodes with format existing_${error_code_id}
if (!existingErrorCode && tempId.startsWith('existing_')) {
const errorId = tempId.replace('existing_', '');
existingErrorCode = existingErrorCodes.find(ec => ec.error_code_id == errorId);
if (existingErrorCode) {
existingErrorCode = {
...existingErrorCode,
tempId: tempId
};
}
}
// console.log(' Found error code in context:', existingErrorCode);
if (existingErrorCode) {
errorCodeForm.setFieldsValue({
error_code: existingErrorCode.error_code,
error_code_name: existingErrorCode.error_code_name || '',
error_code_description: existingErrorCode.error_code_description || '',
error_code_color: existingErrorCode.error_code_color || '#000000',
status: existingErrorCode.is_active !== false,
});
if (existingErrorCode.path_icon) {
setErrorCodeIcon({
name: existingErrorCode.path_icon.split('/').pop(),
uploadPath: existingErrorCode.path_icon,
url: existingErrorCode.path_icon,
});
}
if (existingErrorCode.solution && existingErrorCode.solution.length > 0) {
// console.log('🔍 Setting solutions from context:', existingErrorCode.solution);
setSolutionsForExistingRecord(existingErrorCode.solution, solutionForm);
}
if (existingErrorCode.spareparts && existingErrorCode.spareparts.length > 0) {
// console.log('🔍 Setting spareparts from context:', existingErrorCode.spareparts);
setSelectedSparepartIds(existingErrorCode.spareparts);
}
} else {
// console.log('🔍 Error code not found in context, trying API...');
let errorIdToUse = tempId;
// Extract the actual error_code_id from tempId format
if (tempId.startsWith('existing_')) {
errorIdToUse = tempId.replace('existing_', '');
}
const errorCodeResponse = await getErrorCodeById(errorIdToUse);
if (errorCodeResponse && errorCodeResponse.statusCode === 200) {
const errorData = errorCodeResponse.data;
if (errorData) {
errorCodeForm.setFieldsValue({
error_code: errorData.error_code,
error_code_name: errorData.error_code_name || '',
error_code_description: errorData.error_code_description || '',
error_code_color: errorData.error_code_color || '#000000',
status: errorData.is_active !== false,
});
if (errorData.path_icon) {
setErrorCodeIcon({
name: errorData.path_icon.split('/').pop(),
uploadPath: errorData.path_icon,
url: errorData.path_icon,
});
}
// Set solutions from API data (include file data)
if (errorData.solution && errorData.solution.length > 0) {
setSolutionsForExistingRecord(errorData.solution, solutionForm);
}
// Set spareparts from API data
if (errorData.spareparts && errorData.spareparts.length > 0) {
const sparepartIds = errorData.spareparts.map(sp => sp.sparepart_id);
setSelectedSparepartIds(sparepartIds);
}
// Don't add to context - this is existing data from API
// The context should already have this error code from the brand data loading
}
} else {
// console.log('🔍 API Response error or not found:', errorCodeResponse);
errorCodeForm.setFieldsValue({
error_code: '',
error_code_name: '',
error_code_description: '',
error_code_color: '#000000',
status: true,
});
NotifAlert({
icon: 'warning',
title: 'Peringatan',
message: 'Error code not found. Creating new error code.',
});
}
}
} catch (error) {
console.error('Failed to load error code:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Failed to load error code data',
});
} finally {
setLoading(false);
}
};
const handleSave = async () => {
try {
await errorCodeForm.validateFields();
const solutionValues = solutionForm.getFieldsValue();
const firstSolutionPath = `solution_items,${solutionFields[0]?.key || 0}`;
const firstSolution = solutionValues[firstSolutionPath];
let isValid = false;
if (firstSolution && firstSolution.name && firstSolution.name.trim() !== '') {
const firstSolutionType = solutionTypes[solutionFields[0]?.key || 0];
if (firstSolutionType === 'text') {
isValid = firstSolution.text && firstSolution.text.trim() !== '';
} else {
isValid = true;
}
}
if (!isValid) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap lengkapi minimal 1 solution',
});
return;
}
const errorCodeValues = errorCodeForm.getFieldsValue();
const solutionData = getSolutionData();
// Determine the correct tempId for editing
let updateTempId;
if (isEdit) {
// For existing error codes, find the correct tempId
if (errorCodeId && !errorCodeId.startsWith('pending-')) {
// Look for existing error code in context
const existingEc = existingErrorCodes.find(ec => ec.error_code_id == errorCodeId);
if (existingEc && existingEc.tempId) {
updateTempId = existingEc.tempId;
} else {
updateTempId = `existing_${errorCodeId}`;
}
} else {
updateTempId = errorCodeId;
}
} else {
updateTempId = Date.now().toString();
}
const currentErrorCode = {
tempId: updateTempId,
error_code_id: isEdit && errorCodeId && !errorCodeId.startsWith('pending-') ? errorCodeId : null,
error_code: errorCodeValues.error_code || '',
error_code_name: errorCodeValues.error_code_name || '',
error_code_description: errorCodeValues.error_code_description || '',
error_code_color: errorCodeValues.error_code_color || '#000000',
path_icon: errorCodeIcon?.uploadPath || '',
is_active: errorCodeValues.status !== undefined ? errorCodeValues.status : true,
solution: solutionData || [],
spareparts: selectedSparepartIds || [],
errorCodeIcon: errorCodeIcon,
};
if (isEdit) {
updateErrorCode(updateTempId, currentErrorCode);
} else {
addErrorCode(currentErrorCode);
}
NotifOk({
icon: 'success',
title: 'Berhasil',
message: isEdit ? 'Error Code berhasil diupdate!' : 'Error Code berhasil ditambahkan!',
});
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
} catch (error) {
console.error('Error saving error code:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Gagal menyimpan error code. Silakan coba lagi.',
});
}
};
const handleCancel = () => {
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
};
const handleErrorCodeIconUpload = async (file) => {
if (!file) return null;
try {
const folder = 'images';
const response = await uploadFile(file, folder);
if (response && response.statusCode === 200) {
const iconData = {
name: file.name,
uploadPath: response.data.path_document,
url: response.data.path_document,
};
setErrorCodeIcon(iconData);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code icon uploaded successfully',
});
return iconData;
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Failed to upload error code icon',
});
return null;
}
} catch (error) {
console.error('Error uploading icon:', error);
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Failed to upload error code icon',
});
return null;
}
};
const handleErrorCodeIconRemove = () => {
setErrorCodeIcon(null);
};
const handleSolutionFileUpload = async (file, solutionKey) => {
if (!file) return null;
try {
// Determine folder based on file type
const fileExtension = file.name.split('.').pop().toLowerCase();
const folder = ['pdf'].includes(fileExtension) ? 'pdf' : 'images';
const response = await uploadFile(file, folder);
if (response && response.statusCode === 200) {
const fileData = {
name: file.name,
uploadPath: response.data.path_document,
url: response.data.path_document,
size: file.size,
type: file.type,
};
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Solution file uploaded successfully',
});
return fileData;
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Failed to upload solution file',
});
return null;
}
} catch (error) {
console.error('Error uploading solution file:', error);
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Failed to upload solution file',
});
return null;
}
};
const handleSolutionFileView = (fileData) => {
if (fileData && fileData.url) {
window.open(fileData.url, '_blank');
}
};
const resetForm = () => {
errorCodeForm.resetFields();
errorCodeForm.setFieldsValue({
status: true,
});
setErrorCodeIcon(null);
resetSolutionFields();
setSelectedSparepartIds([]);
};
return (
<Card>
{/* Header */}
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 24
}}>
<Title level={4} style={{ margin: 0 }}>
{isEdit ? 'Edit Error Code' : 'Add Error Code'}
</Title>
<Button
icon={<ArrowLeftOutlined />}
onClick={handleCancel}
>
Back to Brand Device
</Button>
</div>
{/* Content */}
<div style={{ position: 'relative', minHeight: 500 }}>
{loading && (
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 10,
}}
>
<Spin size="large" />
</div>
)}
<Row gutter={[24, 24]}>
{/* Error Code Form */}
<Col xs={24} lg={8}>
<Card
title="Error Code Details"
size="small"
style={{ height: 'fit-content' }}
>
<Form
form={errorCodeForm}
layout="vertical"
initialValues={{
status: true,
error_code_color: '#000000',
}}
>
<ErrorCodeSimpleForm
errorCodeForm={errorCodeForm}
isErrorCodeFormReadOnly={false}
errorCodeIcon={errorCodeIcon}
onErrorCodeIconUpload={handleErrorCodeIconUpload}
onErrorCodeIconRemove={handleErrorCodeIconRemove}
/>
</Form>
</Card>
</Col>
{/* Solutions Form */}
<Col xs={24} lg={8}>
<Card
title="Solutions"
size="small"
style={{ height: 'fit-content' }}
>
<Form
form={solutionForm}
layout="vertical"
initialValues={{
solution_items: [{
status: true,
type: 'text',
}]
}}
>
<SolutionForm
solutionForm={solutionForm}
solutionFields={solutionFields}
solutionTypes={solutionTypes}
solutionStatuses={solutionStatuses}
firstSolutionValid={firstSolutionValid}
checkFirstSolutionValid={() => {
// console.log('🔍 checkFirstSolutionValid function:', typeof checkFirstSolutionValid);
return checkFirstSolutionValid();
}}
onAddSolutionField={handleAddSolutionField}
onRemoveSolutionField={handleRemoveSolutionField}
onSolutionTypeChange={handleSolutionTypeChange}
onSolutionStatusChange={handleSolutionStatusChange}
onSolutionFileUpload={handleSolutionFileUpload}
onFileView={handleSolutionFileView}
fileList={fileList}
isReadOnly={false}
/>
</Form>
</Card>
</Col>
{/* Sparepart Selection */}
<Col xs={24} lg={8}>
<Card
title="Spareparts"
size="small"
style={{ height: 'fit-content' }}
>
<SingleSparepartSelect
selectedSparepartIds={selectedSparepartIds}
onSparepartChange={setSelectedSparepartIds}
isReadOnly={false}
brandId={currentBrandId}
/>
</Card>
</Col>
</Row>
{/* Save Button */}
<div style={{ marginTop: 24, textAlign: 'right' }}>
<Button
type="primary"
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
onClick={handleSave}
>
{isEdit ? 'Update Error Code' : 'Save Error Code'}
</Button>
</div>
</div>
</Card>
);
};
export default AddEditErrorCode;

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

File diff suppressed because it is too large Load Diff

54
src/pages/master/brandDevice/component/BrandForm.jsx
View File

@@ -1,21 +1,14 @@
import React, { useState } from 'react'; import React from 'react';
import { Form, Input, Row, Col, Typography, Switch, Button, Card, Divider } from 'antd'; import { Form, Input, Row, Col, Typography, Switch } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import SingleSparepartSelect from './SingleSparepartSelect';
const { Text } = Typography; const { Text } = Typography;
const BrandForm = ({ const BrandForm = ({
form, form,
formData,
onValuesChange, onValuesChange,
isEdit = false, isEdit = false,
selectedSparepartIds = [],
onSparepartChange,
showSparepartSection = false
}) => { }) => {
const isActive = Form.useWatch('is_active', form) ?? formData.is_active ?? true; const isActive = Form.useWatch('is_active', form) ?? true;
const [showSparepart, setShowSparepart] = useState(showSparepartSection);
return ( return (
<div> <div>
@@ -23,7 +16,13 @@ const BrandForm = ({
layout="vertical" layout="vertical"
form={form} form={form}
onValuesChange={onValuesChange} onValuesChange={onValuesChange}
initialValues={formData} initialValues={{
brand_name: '',
brand_type: '',
brand_model: '',
brand_manufacture: '',
is_active: true,
}}
> >
<Form.Item label="Status"> <Form.Item label="Status">
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -83,39 +82,6 @@ const BrandForm = ({
</Col> </Col>
</Row> </Row>
</Form> </Form>
<Divider />
{/* Add Sparepart Button */}
<div style={{ marginTop: 16 }}>
<Button
type="dashed"
icon={<PlusOutlined />}
onClick={() => setShowSparepart(!showSparepart)}
style={{
width: '100%',
borderStyle: 'dashed',
marginBottom: showSparepart ? 16 : 0
}}
>
{showSparepart ? 'Hide Sparepart' : 'Add Sparepart'}
</Button>
</div>
{/* Sparepart Selection Section */}
{showSparepart && (
<Card
title="Brand Spareparts"
size="small"
style={{ marginTop: 16 }}
>
<SingleSparepartSelect
selectedSparepartIds={selectedSparepartIds}
onSparepartChange={onSparepartChange}
isReadOnly={false}
/>
</Card>
)}
</div> </div>
); );
}; };

483
src/pages/master/brandDevice/component/CustomSparepartCard.jsx Normal file
View File

@@ -0,0 +1,483 @@
import React, { useState } from 'react';
import { Card, Typography, Tag, Button, Modal, Row, Col, Space } from 'antd';
import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
const { Text, Title } = Typography;
const CustomSparepartCard = ({
sparepart,
isSelected = false,
isReadOnly = false,
showPreview = true,
showDelete = false,
onPreview,
onDelete,
onCardClick,
loading = false,
size = 'small',
style = {},
}) => {
const [previewModalVisible, setPreviewModalVisible] = useState(false);
// Construct image source with proper fallback
const getImageSrc = () => {
if (sparepart.sparepart_foto) {
if (sparepart.sparepart_foto.startsWith('http')) {
return sparepart.sparepart_foto;
} else {
const fileName = sparepart.sparepart_foto.split('/').pop();
if (fileName === 'defaultSparepartImg.jpg') {
return `/assets/defaultSparepartImg.jpg`;
} else {
const token = localStorage.getItem('token');
const baseURL = import.meta.env.VITE_API_SERVER || '';
return `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
}
}
}
return 'https://via.placeholder.com/150';
};
const handlePreview = () => {
if (onPreview) {
onPreview(sparepart);
} else {
setPreviewModalVisible(true);
}
};
const handleCardClick = () => {
if (!isReadOnly && onCardClick) {
onCardClick(sparepart);
}
};
const getCardActions = () => {
const actions = [];
// Preview button
if (showPreview) {
actions.push(
<Button
key="preview"
type="text"
icon={<EyeOutlined />}
title="Lihat Detail"
style={{ color: '#1890ff' }}
onClick={(e) => {
e.stopPropagation();
handlePreview();
}}
/>
);
}
// Delete button without confirmation
if (showDelete && !isReadOnly) {
actions.push(
<Button
key="delete"
type="text"
icon={<DeleteOutlined />}
title="Hapus"
style={{ color: '#ff4d4f' }}
onClick={(e) => {
e.stopPropagation();
onDelete?.(sparepart);
}}
/>
);
}
return actions;
};
// Get card styling based on size
const getCardStyle = () => {
const baseStyle = {
borderRadius: '12px',
overflow: 'hidden',
border: isSelected ? '2px solid #1890ff' : '1px solid #E0E0E0',
cursor: isReadOnly ? 'default' : 'pointer',
position: 'relative',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
transition: 'all 0.3s ease'
};
switch (size) {
case 'small':
return {
...baseStyle,
height: '180px',
minHeight: '180px'
};
case 'large':
return {
...baseStyle,
height: '280px',
minHeight: '280px'
};
default:
return {
...baseStyle,
height: '220px',
minHeight: '220px'
};
}
};
return (
<>
<Card
hoverable={!!onCardClick && !isReadOnly}
style={getCardStyle()}
bodyStyle={{
padding: 0,
height: 'calc(100% - 48px)',
display: 'flex',
flexDirection: 'column'
}}
actions={getCardActions()}
onClick={handleCardClick}
>
<div style={{ display: 'flex', height: '100%' }}>
{/* Image Section */}
<div style={{
width: size === 'small' ? '90px' : '110px',
flexShrink: 0,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: size === 'small' ? '12px' : '16px',
backgroundColor: '#fafafa',
borderRight: '1px solid #f0f0f0',
position: 'relative'
}}>
{sparepart.sparepart_item_type && (
<Tag
color="blue"
style={{
marginBottom: '8px',
fontSize: '10px',
fontWeight: 500
}}
>
{sparepart.sparepart_item_type}
</Tag>
)}
<div
style={{
width: size === 'small' ? '65px' : '75px',
height: size === 'small' ? '65px' : '75px',
backgroundColor: '#f0f0f0',
borderRadius: '8px',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid #e8e8e8'
}}
>
<img
src={getImageSrc()}
alt={sparepart.sparepart_name || 'Sparepart'}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
onError={(e) => {
e.target.src = 'https://via.placeholder.com/75';
}}
/>
</div>
{/* Selection Indicator */}
{isSelected && (
<div
style={{
position: 'absolute',
top: '8px',
right: '8px',
backgroundColor: '#52c41a',
borderRadius: '50%',
width: '18px',
height: '18px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
zIndex: 2
}}
>
<CheckOutlined style={{ color: 'white', fontSize: '10px' }} />
</div>
)}
</div>
{/* Content Section */}
<div style={{
flex: 1,
padding: size === 'small' ? '12px' : '16px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
overflow: 'hidden'
}}>
<div style={{ flex: 1, overflow: 'hidden' }}>
<Title
level={size === 'small' ? 5 : 4}
style={{
margin: `0 0 ${size === 'small' ? '6px' : '8px'} 0`,
fontSize: size === 'small' ? '12px' : '14px',
fontWeight: 600,
lineHeight: '1.4',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: size === 'small' ? 2 : 3,
WebkitBoxOrient: 'vertical'
}}
>
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
</Title>
{size !== 'small' && (
<>
<Text
type="secondary"
style={{
fontSize: '12px',
display: 'block',
marginBottom: '6px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
>
Stock: {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'} {sparepart.sparepart_unit || 'pcs'}
</Text>
<div style={{ marginBottom: '6px' }}>
<Text
code
style={{
fontSize: '11px',
backgroundColor: '#f5f5f5',
padding: '2px 6px',
borderRadius: '3px'
}}
>
{sparepart.sparepart_code || 'No code'}
</Text>
</div>
</>
)}
{size === 'small' && (
<Text
code
style={{
fontSize: '10px',
backgroundColor: '#f5f5f5',
display: 'block',
marginBottom: '4px'
}}
>
{sparepart.sparepart_code || 'No code'}
</Text>
)}
{(sparepart.sparepart_merk || sparepart.sparepart_model) && (
<div style={{
fontSize: size === 'small' ? '10px' : '11px',
color: '#666',
lineHeight: '1.4',
marginBottom: '4px'
}}>
{sparepart.sparepart_merk && (
<div>Brand: {sparepart.sparepart_merk}</div>
)}
{sparepart.sparepart_model && (
<div>Model: {sparepart.sparepart_model}</div>
)}
</div>
)}
</div>
<Text
type="secondary"
style={{
fontSize: size === 'small' ? '9px' : '10px',
marginTop: 'auto',
paddingTop: '4px',
borderTop: '1px solid #f0f0f0'
}}
>
{sparepart.updated_at && dayjs(sparepart.updated_at).format('DD MMM YYYY')}
</Text>
</div>
</div>
</Card>
{/* Preview Modal */}
<Modal
title="Sparepart Details"
open={previewModalVisible}
onCancel={() => setPreviewModalVisible(false)}
footer={[
<Button key="close" onClick={() => setPreviewModalVisible(false)}>
Close
</Button>
]}
width={700}
centered
bodyStyle={{ padding: '24px' }}
>
<Row gutter={[24, 24]}>
<Col span={8}>
<div style={{ textAlign: 'center' }}>
<div
style={{
backgroundColor: '#f0f0f0',
width: '200px',
height: '200px',
margin: '0 auto 16px',
position: 'relative',
borderRadius: '8px',
overflow: 'hidden',
border: '1px solid #E0E0E0',
}}
>
<img
src={getImageSrc()}
alt={sparepart.sparepart_name || 'Sparepart'}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
onError={(e) => {
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
}}
/>
</div>
{sparepart.sparepart_item_type && (
<Tag color="blue" style={{ marginTop: '12px' }}>
{sparepart.sparepart_item_type}
</Tag>
)}
</div>
</Col>
<Col span={16}>
<div>
<Title level={3} style={{ marginBottom: '16px' }}>
{sparepart.sparepart_name || 'Unnamed'}
</Title>
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
<Col span={12}>
<div style={{ marginBottom: '8px' }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Code:
</Text>
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
{sparepart.sparepart_code || 'N/A'}
</Text>
</div>
</Col>
<Col span={12}>
<div style={{ marginBottom: '8px' }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Status:
</Text>
<Tag
color={sparepart.is_active ? 'green' : 'red'}
style={{ marginLeft: '8px', fontSize: '14px' }}
>
{sparepart.is_active ? 'Active' : 'Inactive'}
</Tag>
</div>
</Col>
</Row>
{sparepart.sparepart_description && (
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Description:
</Text>
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
{sparepart.sparepart_description}
</Text>
</div>
)}
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Stock:
</Text>
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
{sparepart.sparepart_stock || sparepart.sparepart_stok || '0'}
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ' units'}
</Text>
</div>
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
{sparepart.sparepart_merk && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Brand:
</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
{sparepart.sparepart_merk}
</Text>
</div>
</Col>
)}
{sparepart.sparepart_model && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Model:
</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
{sparepart.sparepart_model}
</Text>
</div>
</Col>
)}
{sparepart.sparepart_unit && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Unit:
</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
{sparepart.sparepart_unit}
</Text>
</div>
</Col>
)}
</Row>
{sparepart.updated_at && (
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
<Text type="secondary" style={{ fontSize: '14px' }}>
Last updated: {dayjs(sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
</Text>
</div>
)}
</div>
</Col>
</Row>
</Modal>
</>
);
};
export default CustomSparepartCard;

297
src/pages/master/brandDevice/component/ErrorCodeTable.jsx Normal file
View File

@@ -0,0 +1,297 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Spin, Modal, Form, Typography } from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
EyeOutlined,
SolutionOutlined,
ToolOutlined,
} from '@ant-design/icons';
import { NotifAlert, NotifConfirmDialog, NotifOk } from '../../../../components/Global/ToastNotif';
import TableList from '../../../../components/Global/TableList';
const { Title } = Typography;
const columns = (onView, onEdit, onDelete) => [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Error Code',
dataIndex: 'error_code',
key: 'error_code',
width: '15%',
render: (text, record) => (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
{record.path_icon && (
<img
src={record.path_icon}
alt="icon"
style={{ width: 24, height: 24, objectFit: 'cover' }}
/>
)}
<span style={{
color: record.error_code_color || '#000000',
fontWeight: 'bold'
}}>
{text}
</span>
</div>
),
},
{
title: 'Error Name',
dataIndex: 'error_code_name',
key: 'error_code_name',
width: '25%',
},
{
title: 'Description',
dataIndex: 'error_code_description',
key: 'error_code_description',
width: '20%',
render: (text) => text || '-',
ellipsis: true,
},
{
title: 'Solutions',
key: 'solutions_count',
width: '10%',
align: 'center',
render: (_, record) => (
<Tag color="blue">
{record.solution ? record.solution.length : 0} Solutions
</Tag>
),
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
width: '12%',
align: 'center',
render: (_, record) => {
const statusColor = record.is_active ? 'green' : 'red';
const statusText = record.is_active ? 'Active' : 'Inactive';
// Show modification status if applicable
if (record.status === 'new') {
return (
<Space direction="vertical" size={2}>
<Tag color="blue" style={{ margin: 0 }}>NEW</Tag>
<Tag color={statusColor} style={{ margin: 0 }}>{statusText}</Tag>
</Space>
);
} else if (record.status === 'modified') {
return (
<Space direction="vertical" size={2}>
<Tag color="orange" style={{ margin: 0 }}>MODIFIED</Tag>
<Tag color={statusColor} style={{ margin: 0 }}>{statusText}</Tag>
</Space>
);
} else if (record.status === 'deleted') {
return (
<Space direction="vertical" size={2}>
<Tag color="red" style={{ margin: 0 }}>DELETED</Tag>
<Tag color="default" style={{ margin: 0 }}>Inactive</Tag>
</Space>
);
} else {
return (
<Tag color={statusColor}>
{statusText}
</Tag>
);
}
},
},
{
title: 'Action',
key: 'action',
align: 'center',
width: '15%',
render: (_, record) => (
<Space size="small">
<Button
icon={<EyeOutlined />}
onClick={() => onView(record)}
size="small"
style={{
color: '#1890ff',
borderColor: '#1890ff',
}}
title="View Details"
/>
<Button
icon={<EditOutlined />}
onClick={() => onEdit(record)}
size="small"
style={{
color: '#faad14',
borderColor: '#faad14',
}}
title="Edit Error Code"
/>
<Button
danger
icon={<DeleteOutlined />}
onClick={() => onDelete(record)}
size="small"
title="Delete Error Code"
/>
</Space>
),
},
];
const ErrorCodeTable = memo(function ErrorCodeTable({
errorCodes = [],
loading = false,
brandId,
onAddErrorCode,
onEditErrorCode,
onDeleteErrorCode,
onViewErrorCode,
trigger,
}) {
const [trigerFilter, setTrigerFilter] = useState(false);
const [formDataFilter, setFormDataFilter] = useState({ search: '' });
const [searchValue, setSearchValue] = useState('');
// Trigger table refresh when parent component data changes
useEffect(() => {
if (trigger !== undefined) {
setTrigerFilter(prev => !prev);
}
}, [trigger]);
// Simulate API data for error codes
const getErrorCodesData = async (params) => {
console.log('📋 ErrorCodeTable getErrorCodesData called with:', params);
console.log('📋 Available errorCodes:', errorCodes);
// This would be your actual API call
const filteredData = errorCodes.filter(code =>
!params.search ||
code.error_code.toLowerCase().includes(params.search.toLowerCase()) ||
code.error_code_name.toLowerCase().includes(params.search.toLowerCase())
);
console.log('📋 Filtered result:', filteredData);
return {
data: filteredData,
total: filteredData.length,
};
};
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
setTrigerFilter(prev => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ search: '' });
setTrigerFilter(prev => !prev);
};
return (
<Card
title="Error Codes"
size="small"
>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={16} lg={18}>
<Input.Search
placeholder="Search error code..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
setSearchValue(value);
if (value === '') {
setFormDataFilter({ search: '' });
setTrigerFilter(prev => !prev);
}
}}
onSearch={handleSearch}
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
style={{ marginBottom: 16 }}
/>
</Col>
<Col>
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
>
<Button
icon={<PlusOutlined />}
onClick={onAddErrorCode}
size="large"
>
Add Error Code
</Button>
</ConfigProvider>
</Col>
</Row>
</Col>
<Col xs={24}>
<TableList
mobile
cardColor={'#42AAFF'}
header={'error_code_name'}
showPreviewModal={onViewErrorCode}
showEditModal={onEditErrorCode}
showDeleteDialog={onDeleteErrorCode}
getData={getErrorCodesData}
queryParams={formDataFilter}
columns={columns(
onViewErrorCode,
onEditErrorCode,
onDeleteErrorCode
)}
triger={trigerFilter}
loading={loading}
/>
</Col>
</Row>
</Card>
);
});
export default ErrorCodeTable;

2
src/pages/master/brandDevice/component/ListBrandDevice.jsx
View File

@@ -250,7 +250,7 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
}} }}
size="large" size="large"
> >
Add Brand Device Add data
</Button> </Button>
</ConfigProvider> </ConfigProvider>
</Space> </Space>

394
src/pages/master/brandDevice/component/SingleSparepartSelect.jsx
View File

@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Select, Card, Typography, Tag, Spin, Empty, Button, Image, Row, Col, Modal } from 'antd'; import { Select, Typography, Tag, Spin, Empty, Button, Row, Col } from 'antd';
import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons'; import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { getAllSparepart } from '../../../../api/sparepart'; import { getAllSparepart } from '../../../../api/sparepart';
import dayjs from 'dayjs'; import CustomSparepartCard from './CustomSparepartCard';
const { Text, Title } = Typography; const { Text, Title } = Typography;
const { Option } = Select; const { Option } = Select;
@@ -16,7 +16,6 @@ const SingleSparepartSelect = ({
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [selectedSpareparts, setSelectedSpareparts] = useState([]); const [selectedSpareparts, setSelectedSpareparts] = useState([]);
const [dropdownOpen, setDropdownOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false);
const [previewModal, setPreviewModal] = useState({ visible: false, sparepart: null });
useEffect(() => { useEffect(() => {
fetchSpareparts(); fetchSpareparts();
@@ -102,219 +101,23 @@ const SingleSparepartSelect = ({
onSparepartChange(newSelectedIds); onSparepartChange(newSelectedIds);
}; };
const handlePreviewSparepart = (sparepart) => {
setPreviewModal({ visible: true, sparepart });
};
const handlePreviewModalClose = () => {
setPreviewModal({ visible: false, sparepart: null });
};
const renderSparepartCard = (sparepart, isSelected = false) => { const renderSparepartCard = (sparepart, isSelected = false) => {
const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id); const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
let imgSrc;
if (sparepart.sparepart_foto) {
if (sparepart.sparepart_foto.startsWith('http')) {
imgSrc = sparepart.sparepart_foto;
} else {
const fileName = sparepart.sparepart_foto.split('/').pop();
if (fileName === 'defaultSparepartImg.jpg') {
imgSrc = `/assets/defaultSparepartImg.jpg`;
} else {
const token = localStorage.getItem('token');
const baseURL = import.meta.env.VITE_API_SERVER || '';
imgSrc = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
}
}
} else {
imgSrc = 'https://via.placeholder.com/150';
}
return ( return (
<Col xs={24} sm={12} md={8} lg={6} key={sparepart.sparepart_id}> <Col xs={24} sm={24} md={12} lg={12} key={sparepart.sparepart_id}>
<Card <CustomSparepartCard
hoverable={!isSelected && !isReadOnly && !isAlreadySelected} sparepart={sparepart}
isSelected={isSelected}
isReadOnly={isReadOnly}
showPreview={true}
showDelete={isAlreadySelected && !isReadOnly} // Show delete only for already selected items
onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
style={{ style={{
borderRadius: '8px', border: isAlreadySelected ? '2px solid #52c41a' : undefined,
overflow: 'hidden',
border: isSelected ? '2px solid #1890ff' : isAlreadySelected ? '2px solid #52c41a' : '1px solid #E0E0E0',
}} }}
bodyStyle={{ padding: 0 }} />
onClick={!isSelected && !isReadOnly && !isAlreadySelected ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
actions={[
// Preview action (selalu available)
<EyeOutlined
key="preview"
style={{ color: '#1890ff' }}
onClick={(e) => {
e.stopPropagation();
handlePreviewSparepart(sparepart);
}}
/>,
// Delete action (hanya untuk selected items)
isSelected && !isReadOnly && (
<DeleteOutlined
key="delete"
style={{ color: '#ff1818' }}
onClick={(e) => {
e.stopPropagation();
handleRemoveSparepart(sparepart.sparepart_id);
}}
/>
),
].filter(Boolean)}
>
<Row>
<Col span={8}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
padding: '16px 8px',
height: '100%',
}}
>
{sparepart.sparepart_item_type && (
<Tag
color="blue"
style={{
marginBottom: '8px',
}}
>
{sparepart.sparepart_item_type}
</Tag>
)}
<div
style={{
backgroundColor: '#f0f0f0',
width: '100%',
paddingTop: '100%',
position: 'relative',
borderRadius: '4px',
overflow: 'hidden',
}}
>
<div style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}>
<img
src={imgSrc}
alt={sparepart.sparepart_name || 'Sparepart'}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
onError={(e) => {
e.target.src = 'https://via.placeholder.com/150';
}}
/>
</div>
{isAlreadySelected && (
<div
style={{
position: 'absolute',
top: 6,
right: 6,
backgroundColor: '#52c41a',
borderRadius: '50%',
width: 16,
height: 16,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
}}
>
<CheckOutlined style={{ color: 'white', fontSize: 8 }} />
</div>
)}
</div>
</div>
</Col>
<Col span={16}>
<div
style={{
padding: '16px',
height: '100%',
}}
>
{/* Title dengan proper hierarchy */}
<Title
level={5}
style={{
margin: 0,
marginBottom: '8px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: '16px',
}}
>
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
</Title>
{/* Stock Information */}
<Text type="secondary" style={{ fontSize: '14px', display: 'block', marginBottom: '8px' }}>
Available Stock: {sparepart.sparepart_stock || '0'}
</Text>
<div style={{ margin: '8px 0' }} />
{/* Code */}
<div style={{ marginBottom: '8px' }}>
<Text
code
style={{
fontSize: '12px',
backgroundColor: '#f5f5f5',
padding: '2px 6px',
borderRadius: '3px'
}}
>
{sparepart.sparepart_code || 'No code'}
</Text>
</div>
{/* Brand/Model/Unit Information */}
{(sparepart.sparepart_merk || sparepart.sparepart_model || sparepart.sparepart_unit) && (
<div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>
{sparepart.sparepart_merk && (
<div>Brand: {sparepart.sparepart_merk}</div>
)}
{sparepart.sparepart_model && (
<div>Model: {sparepart.sparepart_model}</div>
)}
{sparepart.sparepart_unit && (
<div>Unit: {sparepart.sparepart_unit}</div>
)}
</div>
)}
{/* Last Updated */}
{sparepart.updated_at && (
<Text
type="secondary"
style={{
fontSize: '11px',
marginTop: '8px',
display: 'block',
}}
>
Last updated: {dayjs(sparepart.updated_at).format('DD MMM YYYY')}
</Text>
)}
</div>
</Col>
</Row>
</Card>
</Col> </Col>
); );
}; };
@@ -360,7 +163,7 @@ const SingleSparepartSelect = ({
<Title level={5} style={{ marginBottom: 16 }}> <Title level={5} style={{ marginBottom: 16 }}>
Selected Spareparts ({selectedSpareparts.length}) Selected Spareparts ({selectedSpareparts.length})
</Title> </Title>
<Row gutter={[12, 12]}> <Row gutter={[16, 16]}>
{selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))} {selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
</Row> </Row>
</div> </div>
@@ -373,175 +176,6 @@ const SingleSparepartSelect = ({
)} )}
</div> </div>
</div> </div>
{/* Preview Modal */}
<Modal
title="Sparepart Details"
open={previewModal.visible}
onCancel={handlePreviewModalClose}
footer={[
<Button key="close" onClick={handlePreviewModalClose}>
Close
</Button>
]}
width={800}
centered
bodyStyle={{ padding: '24px' }}
>
{previewModal.sparepart && (
<Row gutter={[16, 16]}>
<Col span={8}>
<div style={{ textAlign: 'center' }}>
<div
style={{
backgroundColor: '#f0f0f0',
width: '200px',
height: '200px',
margin: '0 auto 16px',
position: 'relative',
borderRadius: '8px',
overflow: 'hidden',
border: '1px solid #E0E0E0',
}}
>
{previewModal.sparepart.sparepart_foto ? (
<img
src={previewModal.sparepart.sparepart_foto.startsWith('http')
? previewModal.sparepart.sparepart_foto
: `${import.meta.env.VITE_API_SERVER || ''}/file-uploads/images/${encodeURIComponent(previewModal.sparepart.sparepart_foto.split('/').pop())}?token=${encodeURIComponent(localStorage.getItem('token') || '')}`
}
alt={previewModal.sparepart.sparepart_name || 'Sparepart'}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
onError={(e) => {
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
}}
/>
) : (
<div style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '14px',
color: '#999'
}}>
No Image
</div>
)}
</div>
{previewModal.sparepart.sparepart_item_type && (
<Tag color="blue" style={{ marginTop: '8px' }}>
{previewModal.sparepart.sparepart_item_type}
</Tag>
)}
</div>
</Col>
<Col span={16}>
<div>
<Title level={4} style={{ marginBottom: '16px' }}>
{previewModal.sparepart.sparepart_name || 'Unnamed'}
</Title>
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Code:
</Text>
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_code || 'N/A'}
</Text>
</div>
{previewModal.sparepart.sparepart_description && (
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Description:
</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_description}
</Text>
</div>
)}
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Status:
</Text>
<Tag
color={previewModal.sparepart.is_active ? 'green' : 'red'}
style={{ marginLeft: '8px', fontSize: '13px' }}
>
{previewModal.sparepart.is_active ? 'Active' : 'Inactive'}
</Tag>
</div>
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
Stock:
</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_stock || '0'}
{previewModal.sparepart_unit ? ` ${previewModal.sparepart.unit}` : ' units'}
</Text>
</div>
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
{previewModal.sparepart.sparepart_merk && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
Brand:
</Text>
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_merk}
</Text>
</div>
</Col>
)}
{previewModal.sparepart.sparepart_model && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
Model:
</Text>
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_model}
</Text>
</div>
</Col>
)}
{previewModal.sparepart.sparepart_unit && (
<Col span={8}>
<div>
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
Unit:
</Text>
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
{previewModal.sparepart.sparepart_unit}
</Text>
</div>
</Col>
)}
</Row>
{previewModal.sparepart.updated_at && (
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
<Text type="secondary" style={{ fontSize: '13px' }}>
Last updated: {dayjs(previewModal.sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
</Text>
</div>
)}
</div>
</Col>
</Row>
)}
</Modal>
</> </>
); );
}; };

35
src/pages/master/brandDevice/component/SolutionForm.jsx
View File

@@ -10,18 +10,31 @@ const SolutionForm = ({
solutionFields, solutionFields,
solutionTypes, solutionTypes,
solutionStatuses, solutionStatuses,
fileList,
solutionsToDelete,
firstSolutionValid, firstSolutionValid,
onAddSolutionField, onAddSolutionField,
onRemoveSolutionField, onRemoveSolutionField,
onSolutionTypeChange, onSolutionTypeChange,
onSolutionStatusChange, onSolutionStatusChange,
checkFirstSolutionValid,
onSolutionFileUpload, onSolutionFileUpload,
onFileView, onFileView,
fileList,
isReadOnly = false, isReadOnly = false,
onAddSolution,
}) => { }) => {
// Debug props
console.log('🔍 SolutionForm props:', {
solutionFields,
solutionTypes,
solutionStatuses,
firstSolutionValid,
onAddSolutionField: typeof onAddSolutionField,
onRemoveSolutionField: typeof onRemoveSolutionField,
checkFirstSolutionValid: typeof checkFirstSolutionValid,
onSolutionFileUpload: typeof onSolutionFileUpload,
onFileView: typeof onFileView,
fileList: fileList ? fileList.length : 0
});
return ( return (
<div style={{ marginBottom: 0 }}> <div style={{ marginBottom: 0 }}>
<Form <Form
@@ -44,17 +57,17 @@ const SolutionForm = ({
overflowY: 'auto', overflowY: 'auto',
paddingRight: '8px' paddingRight: '8px'
}}> }}>
{solutionFields.map((field, index) => ( {solutionFields.map((field) => (
<SolutionFieldNew <SolutionFieldNew
key={field.key} key={field}
fieldKey={field.key} fieldKey={field}
fieldName={field.name} fieldName={['solution_items', field]}
index={index} index={field}
solutionType={solutionTypes[field.key]} solutionType={solutionTypes[field]}
solutionStatus={solutionStatuses[field.key]} solutionStatus={solutionStatuses[field]}
onTypeChange={onSolutionTypeChange} onTypeChange={onSolutionTypeChange}
onStatusChange={onSolutionStatusChange} onStatusChange={onSolutionStatusChange}
onRemove={() => onRemoveSolutionField(field.key)} onRemove={() => onRemoveSolutionField(field)}
onFileUpload={onSolutionFileUpload} onFileUpload={onSolutionFileUpload}
onFileView={onFileView} onFileView={onFileView}
fileList={fileList} fileList={fileList}

139
src/pages/master/brandDevice/component/SparepartCardSelect.jsx
View File

@@ -1,8 +1,9 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Image, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd'; import { Card, Row, Col, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import { getAllSparepart } from '../../../../api/sparepart'; import { getAllSparepart } from '../../../../api/sparepart';
import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand'; import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand';
import CustomSparepartCard from './CustomSparepartCard';
const { Text, Title } = Typography; const { Text, Title } = Typography;
@@ -196,121 +197,27 @@ const SparepartCardSelect = ({
) : ( ) : (
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
{filteredSpareparts.map(sparepart => ( {filteredSpareparts.map(sparepart => (
<Col span={8} key={sparepart.sparepart_id}> <Col xs={24} sm={12} md={12} lg={12} key={sparepart.sparepart_id}>
<Card <CustomSparepartCard
size="small" sparepart={sparepart}
hoverable isSelected={isSelected(sparepart.sparepart_id)}
style={{ isReadOnly={isReadOnly}
border: isSelected(sparepart.sparepart_id) showPreview={true}
? '2px solid #23A55A' showDelete={true}
: '1px solid #d9d9d9', onCardClick={() => handleSparepartToggle(sparepart.sparepart_id)}
backgroundColor: isSelected(sparepart.sparepart_id) onDelete={() => {
? '#f6ffed' // When delete button is clicked, remove from selection
: 'white', const newSelectedIds = selectedSparepartIds.filter(id => id !== sparepart.sparepart_id);
cursor: isReadOnly ? 'default' : 'pointer', onSparepartChange(newSelectedIds);
position: 'relative'
// Also remove from database if brandId exists
if (brandId) {
removeSparepartFromBrand(brandId, sparepart.sparepart_id)
.then(() => message.success('Sparepart removed successfully'))
.catch(error => message.error(error.message || 'Failed to remove sparepart'));
}
}} }}
onClick={() => handleSparepartToggle(sparepart.sparepart_id)} />
>
<div style={{ position: 'absolute', top: 8, right: 8 }}>
{isSelected(sparepart.sparepart_id) ? (
<CheckCircleOutlined
style={{
fontSize: '18px',
color: '#23A55A',
backgroundColor: 'white',
borderRadius: '50%'
}}
/>
) : (
<CloseCircleOutlined
style={{
fontSize: '18px',
color: '#d9d9d9',
backgroundColor: 'white',
borderRadius: '50%'
}}
/>
)}
</div>
<div style={{ textAlign: 'center', marginBottom: 12 }}>
<div style={{
width: '100%',
height: 120,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f5f5f5',
borderRadius: 8,
overflow: 'hidden'
}}>
{sparepart.sparepart_foto ? (
<Image
src={sparepart.sparepart_foto}
alt={sparepart.sparepart_name}
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain'
}}
preview={false}
fallback="/assets/defaultSparepartImg.jpg"
/>
) : (
<div style={{
color: '#bfbfbf',
fontSize: 12
}}>
No Image
</div>
)}
</div>
</div>
<div>
<Text
strong
style={{
display: 'block',
fontSize: '14px',
marginBottom: 4,
color: isSelected(sparepart.sparepart_id) ? '#23A55A' : 'inherit'
}}
>
{sparepart.sparepart_name}
</Text>
<Text
type="secondary"
style={{
fontSize: '12px',
display: 'block',
marginBottom: 4
}}
>
{sparepart.sparepart_description || 'No description'}
</Text>
<Space size="small" style={{ marginBottom: 4 }}>
<Tag color="blue" style={{ margin: 0 }}>
{sparepart.sparepart_code}
</Tag>
<Tag color="geekblue" style={{ margin: 0 }}>
{sparepart.sparepart_merk || 'N/A'}
</Tag>
</Space>
{sparepart.sparepart_model && (
<div style={{
fontSize: '12px',
color: '#666'
}}>
Model: {sparepart.sparepart_model}
</div>
)}
</div>
</Card>
</Col> </Col>
))} ))}
</Row> </Row>

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

@@ -11,8 +11,8 @@ const SparepartForm = ({
isReadOnly = false isReadOnly = false
}) => { }) => {
return ( return (
<div> <div style={{ minHeight: '400px' }}>
<Card size="small" title="Spareparts"> <Card title="Spareparts" style={{ minHeight: '100%' }}>
<SparepartCardSelect <SparepartCardSelect
selectedSparepartIds={selectedSparepartIds} selectedSparepartIds={selectedSparepartIds}
onSparepartChange={onSparepartChange} onSparepartChange={onSparepartChange}

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

@@ -1,18 +1,15 @@
import { useState } from 'react'; import { useState } from 'react';
export const useSolutionLogic = (solutionForm) => { export const useSolutionLogic = (solutionForm) => {
const [solutionFields, setSolutionFields] = useState([ const [solutionFields, setSolutionFields] = useState([0]);
{ name: ['solution_items', 0], key: 0 }
]);
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' }); const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true }); const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
const [solutionsToDelete, setSolutionsToDelete] = useState([]); const [solutionsToDelete, setSolutionsToDelete] = useState([]);
const handleAddSolutionField = () => { const handleAddSolutionField = () => {
const newKey = Date.now(); // Use timestamp for unique key const newKey = Date.now();
const newField = { name: ['solution_items', newKey], key: newKey };
setSolutionFields(prev => [...prev, newField]); setSolutionFields(prev => [...prev, newKey]);
setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' })); setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
setSolutionStatuses(prev => ({ ...prev, [newKey]: true })); setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
@@ -27,7 +24,7 @@ export const useSolutionLogic = (solutionForm) => {
const handleRemoveSolutionField = (key) => { const handleRemoveSolutionField = (key) => {
if (solutionFields.length <= 1) { if (solutionFields.length <= 1) {
return; // Keep at least one solution field return;
} }
setSolutionFields(prev => prev.filter(field => field.key !== key)); setSolutionFields(prev => prev.filter(field => field.key !== key));
@@ -67,13 +64,21 @@ export const useSolutionLogic = (solutionForm) => {
const checkFirstSolutionValid = () => { const checkFirstSolutionValid = () => {
const values = solutionForm.getFieldsValue(); const values = solutionForm.getFieldsValue();
const firstSolution = values.solution_items?.[0];
const firstField = solutionFields[0];
if (!firstField) {
return false;
}
const solutionKey = firstField.key || firstField;
const solutionPath = `solution_items,${solutionKey}`;
const firstSolution = values[solutionPath];
if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') { if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') {
return false; return false;
} }
if (solutionTypes[0] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) { if (solutionTypes[solutionKey] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
return false; return false;
} }
@@ -83,13 +88,12 @@ export const useSolutionLogic = (solutionForm) => {
const getSolutionData = () => { const getSolutionData = () => {
const values = solutionForm.getFieldsValue(); const values = solutionForm.getFieldsValue();
const result = solutionFields.map(field => { const result = solutionFields.map(key => {
const key = field.key; const solution = values[`solution_items,${key}`];
// Access form values using the key from field.name (AntD stores with comma)
const solutionPath = field.name.join(',');
const solution = values[solutionPath];
const validSolution = solution && solution.name && solution.name.trim() !== ''; if (!solution) return null;
const validSolution = solution.name && solution.name.trim() !== '';
if (validSolution) { if (validSolution) {
return { return {
@@ -97,7 +101,7 @@ export const useSolutionLogic = (solutionForm) => {
type_solution: solutionTypes[key] || 'text', type_solution: solutionTypes[key] || 'text',
text_solution: solution.text || '', text_solution: solution.text || '',
path_solution: solution.file || '', path_solution: solution.file || '',
is_active: solution.status !== false, // Use form value directly is_active: solution.status !== false,
}; };
} }
return null; return null;
@@ -109,14 +113,10 @@ export const useSolutionLogic = (solutionForm) => {
const setSolutionsForExistingRecord = (solutions, form) => { const setSolutionsForExistingRecord = (solutions, form) => {
if (!solutions || solutions.length === 0) return; if (!solutions || solutions.length === 0) return;
const newFields = solutions.map((solution, index) => ({ const newFields = solutions.map((solution, index) => solution.id || index);
name: ['solution_items', solution.id || index],
key: solution.id || index
}));
setSolutionFields(newFields); setSolutionFields(newFields);
// Set solution values
const solutionsValues = {}; const solutionsValues = {};
const newTypes = {}; const newTypes = {};
const newStatuses = {}; const newStatuses = {};