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

30:70 interface brand device

Browse Source
This commit is contained in:
Vinix
2025-10-28 12:20:54 +07:00
parent 1d408ef3c1
commit 9a483aa873
2 changed files with 193 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,16 +49,29 @@ const AddBrandDevice = () => {
handleSolutionStatusChange, handleSolutionStatusChange,
resetSolutionFields, resetSolutionFields,
checkFirstSolutionValid, checkFirstSolutionValid,
setSolutionsForExistingRecord setSolutionsForExistingRecord,
} = useErrorCodeLogic(errorCodeForm, fileList); } = useErrorCodeLogic(errorCodeForm, fileList);
useEffect(() => { useEffect(() => {
setBreadcrumbItems([ setBreadcrumbItems([
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> }, { 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')}
>
Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
Tambah Brand Device
</span>
),
}, },
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>Tambah Brand Device</span> }
]); ]);
}, [setBreadcrumbItems, navigate]); }, [setBreadcrumbItems, navigate]);
@@ -71,25 +84,29 @@ const AddBrandDevice = () => {
await brandForm.validateFields(); await brandForm.validateFields();
setCurrentStep(1); setCurrentStep(1);
} catch (error) { } catch (error) {
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' }); NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
} }
}; };
const handleFinish = async () => { const handleFinish = async () => {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
const transformedErrorCodes = errorCodes.map(ec => ({ const transformedErrorCodes = errorCodes.map((ec) => ({
error_code: ec.error_code, error_code: ec.error_code,
error_code_name: ec.error_code_name || '', error_code_name: ec.error_code_name || '',
error_code_description: ec.error_code_description || '', error_code_description: ec.error_code_description || '',
is_active: ec.status !== undefined ? ec.status : true, is_active: ec.status !== undefined ? ec.status : true,
solution: (ec.solution || []).map(sol => ({ solution: (ec.solution || []).map((sol) => ({
solution_name: sol.solution_name, solution_name: sol.solution_name,
type_solution: sol.type_solution, type_solution: sol.type_solution,
text_solution: sol.text_solution || '', text_solution: sol.text_solution || '',
path_solution: sol.path_solution || '', path_solution: sol.path_solution || '',
is_active: sol.is_active !== false is_active: sol.is_active !== false,
})) })),
})); }));
const finalFormData = { const finalFormData = {
@@ -98,23 +115,26 @@ const AddBrandDevice = () => {
brand_model: formData.brand_model || '', brand_model: formData.brand_model || '',
brand_manufacture: formData.brand_manufacture, brand_manufacture: formData.brand_manufacture,
is_active: formData.is_active, is_active: formData.is_active,
error_code: transformedErrorCodes.length > 0 ? transformedErrorCodes : [ error_code:
{ transformedErrorCodes.length > 0
error_code: "DEFAULT", ? transformedErrorCodes
error_code_name: "Default Error Code", : [
error_code_description: "Default error description", {
is_active: true, error_code: 'DEFAULT',
solution: [ error_code_name: 'Default Error Code',
{ error_code_description: 'Default error description',
solution_name: "Default Solution", is_active: true,
type_solution: "text", solution: [
text_solution: "Default solution text", {
path_solution: "", solution_name: 'Default Solution',
is_active: true type_solution: 'text',
} text_solution: 'Default solution text',
] path_solution: '',
} is_active: true,
] },
],
},
],
}; };
const response = await createBrand(finalFormData); const response = await createBrand(finalFormData);
@@ -135,9 +155,9 @@ const AddBrandDevice = () => {
} }
} catch (error) { } catch (error) {
NotifAlert({ NotifAlert({
icon: "error", icon: 'error',
title: "Gagal", title: 'Gagal',
message: error.message || "Gagal menyimpan data. Silakan coba lagi.", message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
}); });
} finally { } finally {
setConfirmLoading(false); setConfirmLoading(false);
@@ -178,12 +198,14 @@ const AddBrandDevice = () => {
const handleAddErrorCode = async (newErrorCode) => { const handleAddErrorCode = async (newErrorCode) => {
if (editingErrorCodeKey) { if (editingErrorCodeKey) {
const updatedCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item); const updatedCodes = errorCodes.map((item) =>
item.key === editingErrorCodeKey ? newErrorCode : item
);
setErrorCodes(updatedCodes); setErrorCodes(updatedCodes);
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil diupdate!' message: 'Error code berhasil diupdate!',
}); });
} else { } else {
const updatedCodes = [...errorCodes, newErrorCode]; const updatedCodes = [...errorCodes, newErrorCode];
@@ -191,7 +213,7 @@ const AddBrandDevice = () => {
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil ditambahkan!' message: 'Error code berhasil ditambahkan!',
}); });
} }
@@ -203,7 +225,7 @@ const AddBrandDevice = () => {
errorCodeForm.setFieldsValue({ errorCodeForm.setFieldsValue({
status: true, status: true,
solution_status_0: true, solution_status_0: true,
solution_type_0: 'text' solution_type_0: 'text',
}); });
setFileList([]); setFileList([]);
resetSolutionFields(); resetSolutionFields();
@@ -220,16 +242,16 @@ const AddBrandDevice = () => {
NotifAlert({ NotifAlert({
icon: 'warning', icon: 'warning',
title: 'Perhatian', title: 'Perhatian',
message: 'Setiap brand harus memiliki minimal 1 error code!' message: 'Setiap brand harus memiliki minimal 1 error code!',
}); });
return; return;
} }
setErrorCodes(errorCodes.filter(item => item.key !== key)); setErrorCodes(errorCodes.filter((item) => item.key !== key));
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil dihapus!' message: 'Error code berhasil dihapus!',
}); });
}; };
@@ -248,12 +270,17 @@ const AddBrandDevice = () => {
const handleSolutionFileUpload = async (file) => { const handleSolutionFileUpload = async (file) => {
try { try {
const isAllowedType = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'].includes(file.type); const isAllowedType = [
'application/pdf',
'image/jpeg',
'image/png',
'image/gif',
].includes(file.type);
if (!isAllowedType) { if (!isAllowedType) {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',
title: 'Error', title: 'Error',
message: `${file.name} bukan file PDF atau gambar yang diizinkan.` message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
}); });
return; return;
} }
@@ -271,17 +298,17 @@ const AddBrandDevice = () => {
file.solution_name = file.name; file.solution_name = file.name;
file.solutionId = solutionFields[0]; file.solutionId = solutionFields[0];
file.type_solution = fileType; file.type_solution = fileType;
setFileList(prevList => [...prevList, file]); setFileList((prevList) => [...prevList, file]);
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: `${file.name} berhasil diupload!` message: `${file.name} berhasil diupload!`,
}); });
} else { } else {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',
title: 'Gagal', title: 'Gagal',
message: `Gagal mengupload ${file.name}` message: `Gagal mengupload ${file.name}`,
}); });
} }
} catch (error) { } catch (error) {
@@ -289,13 +316,13 @@ const AddBrandDevice = () => {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',
title: 'Error', title: 'Error',
message: `Gagal mengupload ${file.name}. Silakan coba lagi.` message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
}); });
} }
}; };
const handleFileRemove = (file) => { const handleFileRemove = (file) => {
const newFileList = fileList.filter(item => item.uid !== file.uid); const newFileList = fileList.filter((item) => item.uid !== file.uid);
setFileList(newFileList); setFileList(newFileList);
}; };
@@ -305,7 +332,9 @@ const AddBrandDevice = () => {
<BrandForm <BrandForm
form={brandForm} form={brandForm}
formData={formData} formData={formData}
onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} onValuesChange={(changedValues, allValues) =>
setFormData((prev) => ({ ...prev, ...allValues }))
}
isEdit={false} isEdit={false}
/> />
); );
@@ -314,17 +343,22 @@ const AddBrandDevice = () => {
if (currentStep === 1) { if (currentStep === 1) {
return ( return (
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col span={8}>
<Title level={5} style={{ marginBottom: 16 }}> <Title level={5} style={{ marginBottom: 16 }}>
{isErrorCodeFormReadOnly {isErrorCodeFormReadOnly
? 'View Error Code' ? 'View Error Code'
: (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code') : editingErrorCodeKey
} ? 'Edit Error Code'
: 'Tambah Error Code'}
</Title> </Title>
<Form <Form
form={errorCodeForm} form={errorCodeForm}
layout="vertical" layout="vertical"
initialValues={{ status: true, solution_status_0: true, solution_type_0: 'text' }} initialValues={{
status: true,
solution_status_0: true,
solution_type_0: 'text',
}}
onValuesChange={checkFirstSolutionValid} onValuesChange={checkFirstSolutionValid}
> >
<ErrorCodeForm <ErrorCodeForm
@@ -350,7 +384,7 @@ const AddBrandDevice = () => {
/> />
</Form> </Form>
</Col> </Col>
<Col span={12}> <Col span={16}>
<ErrorCodeTable <ErrorCodeTable
errorCodes={errorCodes} errorCodes={errorCodes}
loading={loading} loading={loading}
@@ -368,14 +402,14 @@ const AddBrandDevice = () => {
return ( return (
<Card> <Card>
<Title level={4} style={{ margin: '0 0 24px 0' }}>Tambah Brand Device</Title> <Title level={4} style={{ margin: '0 0 24px 0' }}>
Tambah Brand Device
</Title>
<Steps current={currentStep} style={{ marginBottom: 24 }}> <Steps current={currentStep} style={{ marginBottom: 24 }}>
<Step title="Brand Device Details" /> <Step title="Brand Device Details" />
<Step title="Error Codes" /> <Step title="Error Codes" />
</Steps> </Steps>
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>{renderStepContent()}</div>
{renderStepContent()}
</div>
<Divider /> <Divider />
<FormActions <FormActions
currentStep={currentStep} currentStep={currentStep}

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

@@ -50,7 +50,7 @@ const EditBrandDevice = () => {
handleSolutionStatusChange, handleSolutionStatusChange,
resetSolutionFields, resetSolutionFields,
checkFirstSolutionValid, checkFirstSolutionValid,
setSolutionsForExistingRecord setSolutionsForExistingRecord,
} = useErrorCodeLogic(errorCodeForm, fileList); } = useErrorCodeLogic(errorCodeForm, fileList);
useEffect(() => { useEffect(() => {
@@ -61,7 +61,8 @@ const EditBrandDevice = () => {
return; return;
} }
const savedPhase = location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`); const savedPhase =
location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`);
if (savedPhase) { if (savedPhase) {
setCurrentStep(parseInt(savedPhase)); setCurrentStep(parseInt(savedPhase));
localStorage.removeItem(`brand_device_edit_${id}_last_phase`); localStorage.removeItem(`brand_device_edit_${id}_last_phase`);
@@ -70,9 +71,22 @@ const EditBrandDevice = () => {
setBreadcrumbItems([ setBreadcrumbItems([
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> }, { 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')}
>
Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
Edit Brand Device
</span>
),
}, },
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>Edit Brand Device</span> }
]); ]);
try { try {
@@ -90,20 +104,21 @@ const EditBrandDevice = () => {
brand_code: brandData.brand_code, brand_code: brandData.brand_code,
}; };
const existingErrorCodes = brandData.error_code ? brandData.error_code.map((ec, index) => ({ const existingErrorCodes = brandData.error_code
key: `existing-${ec.error_code_id}`, ? brandData.error_code.map((ec, index) => ({
error_code_id: ec.error_code_id, key: `existing-${ec.error_code_id}`,
error_code: ec.error_code, error_code_id: ec.error_code_id,
error_code_name: ec.error_code_name || '', error_code: ec.error_code,
error_code_description: ec.error_code_description || '', error_code_name: ec.error_code_name || '',
status: ec.is_active, error_code_description: ec.error_code_description || '',
solution: ec.solution || [] status: ec.is_active,
})) : []; solution: ec.solution || [],
}))
: [];
setFormData(newFormData); setFormData(newFormData);
brandForm.setFieldsValue(newFormData); brandForm.setFieldsValue(newFormData);
setErrorCodes(existingErrorCodes); setErrorCodes(existingErrorCodes);
} else { } else {
NotifAlert({ NotifAlert({
icon: 'error', icon: 'error',
@@ -135,7 +150,11 @@ const EditBrandDevice = () => {
await brandForm.validateFields(); await brandForm.validateFields();
setCurrentStep(1); setCurrentStep(1);
} catch (error) { } catch (error) {
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' }); NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
} }
}; };
@@ -148,19 +167,19 @@ const EditBrandDevice = () => {
brand_model: formData.brand_model || '', brand_model: formData.brand_model || '',
brand_manufacture: formData.brand_manufacture, brand_manufacture: formData.brand_manufacture,
is_active: formData.is_active, is_active: formData.is_active,
error_code: errorCodes.map(ec => ({ error_code: errorCodes.map((ec) => ({
error_code: ec.error_code, error_code: ec.error_code,
error_code_name: ec.error_code_name || '', error_code_name: ec.error_code_name || '',
error_code_description: ec.error_code_description || '', error_code_description: ec.error_code_description || '',
is_active: ec.status !== undefined ? ec.status : true, is_active: ec.status !== undefined ? ec.status : true,
solution: (ec.solution || []).map(sol => ({ solution: (ec.solution || []).map((sol) => ({
solution_name: sol.solution_name, solution_name: sol.solution_name,
type_solution: sol.type_solution, type_solution: sol.type_solution,
text_solution: sol.text_solution || '', text_solution: sol.text_solution || '',
path_solution: sol.path_solution || '', path_solution: sol.path_solution || '',
is_active: sol.is_active !== false is_active: sol.is_active !== false,
})) })),
})) })),
}; };
const response = await updateBrand(id, finalFormData); const response = await updateBrand(id, finalFormData);
@@ -182,9 +201,9 @@ const EditBrandDevice = () => {
} }
} catch (error) { } catch (error) {
NotifAlert({ NotifAlert({
icon: "error", icon: 'error',
title: "Gagal", title: 'Gagal',
message: error.message || "Gagal mengupdate data. Silakan coba lagi.", message: error.message || 'Gagal mengupdate data. Silakan coba lagi.',
}); });
} finally { } finally {
setConfirmLoading(false); setConfirmLoading(false);
@@ -226,22 +245,23 @@ const EditBrandDevice = () => {
} }
}; };
const handleAddErrorCode = (newErrorCode) => { const handleAddErrorCode = (newErrorCode) => {
let updatedErrorCodes; let updatedErrorCodes;
if (editingErrorCodeKey) { if (editingErrorCodeKey) {
updatedErrorCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item); updatedErrorCodes = errorCodes.map((item) =>
item.key === editingErrorCodeKey ? newErrorCode : item
);
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil diupdate!' message: 'Error code berhasil diupdate!',
}); });
} else { } else {
updatedErrorCodes = [...errorCodes, newErrorCode]; updatedErrorCodes = [...errorCodes, newErrorCode];
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil ditambahkan!' message: 'Error code berhasil ditambahkan!',
}); });
} }
@@ -254,7 +274,7 @@ const EditBrandDevice = () => {
errorCodeForm.setFieldsValue({ errorCodeForm.setFieldsValue({
status: true, status: true,
solution_status_0: true, solution_status_0: true,
solution_type_0: 'text' solution_type_0: 'text',
}); });
setFileList([]); setFileList([]);
resetSolutionFields(); resetSolutionFields();
@@ -267,17 +287,17 @@ const EditBrandDevice = () => {
NotifAlert({ NotifAlert({
icon: 'warning', icon: 'warning',
title: 'Perhatian', title: 'Perhatian',
message: 'Setiap brand harus memiliki minimal 1 error code!' message: 'Setiap brand harus memiliki minimal 1 error code!',
}); });
return; return;
} }
const updatedErrorCodes = errorCodes.filter(item => item.key !== key); const updatedErrorCodes = errorCodes.filter((item) => item.key !== key);
setErrorCodes(updatedErrorCodes); setErrorCodes(updatedErrorCodes);
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: 'Error code berhasil dihapus!' message: 'Error code berhasil dihapus!',
}); });
}; };
@@ -297,7 +317,7 @@ const EditBrandDevice = () => {
editingErrorCodeKey: editingErrorCodeKey, editingErrorCodeKey: editingErrorCodeKey,
isErrorCodeFormReadOnly: isErrorCodeFormReadOnly, isErrorCodeFormReadOnly: isErrorCodeFormReadOnly,
solutionsToDelete: Array.from(solutionsToDelete), solutionsToDelete: Array.from(solutionsToDelete),
currentSolutionData: window.currentSolutionData || {} currentSolutionData: window.currentSolutionData || {},
}; };
localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData)); localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData));
@@ -314,11 +334,11 @@ const EditBrandDevice = () => {
}; };
const handleSolutionFileUpload = (file) => { const handleSolutionFileUpload = (file) => {
setFileList(prevList => [...prevList, file]); setFileList((prevList) => [...prevList, file]);
}; };
const handleFileRemove = (file) => { const handleFileRemove = (file) => {
const newFileList = fileList.filter(item => item.uid !== file.uid); const newFileList = fileList.filter((item) => item.uid !== file.uid);
setFileList(newFileList); setFileList(newFileList);
}; };
@@ -328,7 +348,9 @@ const EditBrandDevice = () => {
<BrandForm <BrandForm
form={brandForm} form={brandForm}
formData={formData} formData={formData}
onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} onValuesChange={(changedValues, allValues) =>
setFormData((prev) => ({ ...prev, ...allValues }))
}
isEdit={true} isEdit={true}
/> />
); );
@@ -337,17 +359,24 @@ const EditBrandDevice = () => {
if (currentStep === 1) { if (currentStep === 1) {
return ( return (
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col span={8}>
<Title level={5} style={{ marginBottom: 16 }}> <Title level={5} style={{ marginBottom: 16 }}>
{isErrorCodeFormReadOnly {isErrorCodeFormReadOnly
? (editingErrorCodeKey ? 'View Error Code' : 'Error Code Form') ? editingErrorCodeKey
: (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code') ? 'View Error Code'
} : 'Error Code Form'
: editingErrorCodeKey
? 'Edit Error Code'
: 'Tambah Error Code'}
</Title> </Title>
<Form <Form
form={errorCodeForm} form={errorCodeForm}
layout="vertical" layout="vertical"
initialValues={{ status: true, solution_status_0: true, solution_type_0: 'text' }} initialValues={{
status: true,
solution_status_0: true,
solution_type_0: 'text',
}}
onValuesChange={checkFirstSolutionValid} onValuesChange={checkFirstSolutionValid}
> >
<ErrorCodeForm <ErrorCodeForm
@@ -373,16 +402,17 @@ const EditBrandDevice = () => {
/> />
</Form> </Form>
</Col> </Col>
<Col span={12}> <Col span={16}>
<ErrorCodeTable <ErrorCodeTable
errorCodes={loading ? errorCodes={
Array.from({ length: 3 }, (_, index) => ({ loading
key: `loading-${index}`, ? Array.from({ length: 3 }, (_, index) => ({
error_code: 'Loading...', key: `loading-${index}`,
error_code_name: 'Loading...', error_code: 'Loading...',
solution: [] error_code_name: 'Loading...',
})) : solution: [],
errorCodes }))
: errorCodes
} }
loading={loading} loading={loading}
onPreview={handlePreviewErrorCode} onPreview={handlePreviewErrorCode}
@@ -399,32 +429,41 @@ const EditBrandDevice = () => {
return ( return (
<Card> <Card>
<Title level={4} style={{ margin: '0 0 24px 0' }}>Edit Brand Device</Title> <Title level={4} style={{ margin: '0 0 24px 0' }}>
Edit Brand Device
</Title>
<Steps current={currentStep} style={{ marginBottom: 24 }}> <Steps current={currentStep} style={{ marginBottom: 24 }}>
<Step title="Brand Device Details" /> <Step title="Brand Device Details" />
<Step title="Error Codes" /> <Step title="Error Codes" />
</Steps> </Steps>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{loading && ( {loading && (
<div style={{ <div
position: 'absolute', style={{
top: 0, position: 'absolute',
left: 0, top: 0,
right: 0, left: 0,
bottom: 0, right: 0,
backgroundColor: 'rgba(255, 255, 255, 0.6)', bottom: 0,
backdropFilter: 'blur(0.8px)', backgroundColor: 'rgba(255, 255, 255, 0.6)',
filter: 'blur(0.5px)', backdropFilter: 'blur(0.8px)',
display: 'flex', filter: 'blur(0.5px)',
justifyContent: 'center', display: 'flex',
alignItems: 'center', justifyContent: 'center',
zIndex: 10, alignItems: 'center',
borderRadius: '8px' zIndex: 10,
}}> borderRadius: '8px',
}}
>
<Spin size="large" /> <Spin size="large" />
</div> </div>
)} )}
<div style={{ filter: loading ? 'blur(0.5px)' : 'none', transition: 'filter 0.3s ease' }}> <div
style={{
filter: loading ? 'blur(0.5px)' : 'none',
transition: 'filter 0.3s ease',
}}
>
{renderStepContent()} {renderStepContent()}
</div> </div>
</div> </div>