From 34e38b39691c518863692022277a760454aec72a Mon Sep 17 00:00:00 2001
From: vinix <nzxtvinix@gmail.com>
Date: Tue, 18 Nov 2025 13:09:39 +0700
Subject: [PATCH] refactor: Improve code formatting and readability in
 SparepartForm component

---
 .../brandDevice/component/SparepartForm.jsx   | 141 +++++++++---------
 1 file changed, 70 insertions(+), 71 deletions(-)

diff --git a/src/pages/master/brandDevice/component/SparepartForm.jsx b/src/pages/master/brandDevice/component/SparepartForm.jsx
index a6c70a1..696dbc8 100644
--- a/src/pages/master/brandDevice/component/SparepartForm.jsx
+++ b/src/pages/master/brandDevice/component/SparepartForm.jsx
@@ -1,5 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Divider, Typography, Switch, Space, Card, Upload, message } from 'antd';
+import {
+    Form,
+    Input,
+    Button,
+    Divider,
+    Typography,
+    Switch,
+    Space,
+    Card,
+    Upload,
+    message,
+} from 'antd';
 import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
 import { uploadFile } from '../../../../api/file-uploads';
 
@@ -15,7 +26,7 @@ const SparepartForm = ({
     onSparepartImageUpload,
     onSparepartImageRemove,
     sparepartImages = {},
-    isReadOnly = false
+    isReadOnly = false,
 }) => {
     const [fieldStatuses, setFieldStatuses] = useState({});
 
@@ -32,7 +43,7 @@ const SparepartForm = ({
     useEffect(() => {
         // Update field statuses when form changes
         const newStatuses = {};
-        sparepartFields.forEach(field => {
+        sparepartFields.forEach((field) => {
             newStatuses[field.key] = getFieldValue(field.key);
         });
         setFieldStatuses(newStatuses);
@@ -55,21 +66,25 @@ const SparepartForm = ({
 
         try {
             const fileExtension = file.name.split('.').pop().toLowerCase();
-            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
+                fileExtension
+            );
             const fileType = isImageFile ? 'image' : 'pdf';
             const folder = 'images';
 
             const uploadResponse = await uploadFile(file, folder);
-            const imagePath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
+            const imagePath =
+                uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
 
             if (imagePath) {
-                onSparepartImageUpload && onSparepartImageUpload(fieldKey, {
-                    name: file.name,
-                    uploadPath: imagePath,
-                    fileExtension,
-                    isImage: isImageFile,
-                    size: file.size,
-                });
+                onSparepartImageUpload &&
+                    onSparepartImageUpload(fieldKey, {
+                        name: file.name,
+                        uploadPath: imagePath,
+                        fileExtension,
+                        isImage: isImageFile,
+                        size: file.size,
+                    });
                 message.success(`${file.name} uploaded successfully!`);
             } else {
                 message.error(`Failed to upload ${file.name}`);
@@ -106,48 +121,40 @@ const SparepartForm = ({
                         size="small"
                         style={{ marginBottom: 16 }}
                         title={
-                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                }}
+                            >
                                 <Text strong>Sparepart {index + 1}</Text>
                                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                                    <Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle>
-                                        <Switch
-                                            disabled={isReadOnly}
-                                            size="small"
-                                            onChange={(checked) => {
-                                                onSparepartStatusChange && onSparepartStatusChange(field.key, checked);
-                                                setFieldStatuses(prev => ({ ...prev, [field.key]: checked }));
-                                            }}
-                                            style={{
-                                                backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf'
-                                            }}
-                                        />
-                                    </Form.Item>
-                                    <Text style={{ fontSize: 12, color: '#666' }}>
-                                        {fieldStatuses[field.key] ? 'Active' : 'Inactive'}
-                                    </Text>
+                                    {!isReadOnly && sparepartFields.length > 1 && (
+                                        <div style={{ textAlign: 'right' }}>
+                                            <Button
+                                                type="text"
+                                                danger
+                                                icon={<DeleteOutlined />}
+                                                onClick={() => onRemoveSparepartField(field.key)}
+                                            />
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         }
                     >
-                        <Form
-                            layout="vertical"
-                            style={{ border: 'none' }}
-                        >
+                        <Form layout="vertical" style={{ border: 'none' }}>
                             {/* Sparepart Name */}
                             <Form.Item
                                 name={[field.name, 'name']}
                                 rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
                             >
-                                <Input
-                                    placeholder="Enter sparepart name"
-                                    disabled={isReadOnly}
-                                />
+                                <Input placeholder="Enter sparepart name" disabled={isReadOnly} />
                             </Form.Item>
 
                             {/* Description */}
-                            <Form.Item
-                                name={[field.name, 'description']}
-                            >
+                            <Form.Item name={[field.name, 'description']}>
                                 <Input.TextArea
                                     placeholder="Enter sparepart description (optional)"
                                     rows={2}
@@ -169,14 +176,26 @@ const SparepartForm = ({
                                         </Button>
                                     </Upload>
                                 ) : (
-                                    <div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}>
+                                    <div
+                                        style={{
+                                            padding: '8px 12px',
+                                            border: '1px solid #d9d9d9',
+                                            borderRadius: 4,
+                                        }}
+                                    >
                                         <Text type="secondary">No upload allowed</Text>
                                     </div>
                                 )}
 
                                 {sparepartImages[field.key] && (
                                     <div style={{ marginTop: 8 }}>
-                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 8,
+                                            }}
+                                        >
                                             <img
                                                 src={sparepartImages[field.key].uploadPath}
                                                 alt="Sparepart Image"
@@ -189,10 +208,16 @@ const SparepartForm = ({
                                                 }}
                                             />
                                             <div>
-                                                <Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text>
+                                                <Text style={{ fontSize: 12 }}>
+                                                    {sparepartImages[field.key].name}
+                                                </Text>
                                                 <br />
                                                 <Text type="secondary" style={{ fontSize: 10 }}>
-                                                    Size: {(sparepartImages[field.key].size / 1024).toFixed(1)} KB
+                                                    Size:{' '}
+                                                    {(
+                                                        sparepartImages[field.key].size / 1024
+                                                    ).toFixed(1)}{' '}
+                                                    KB
                                                 </Text>
                                             </div>
                                             {!isReadOnly && (
@@ -209,24 +234,6 @@ const SparepartForm = ({
                                     </div>
                                 )}
                             </Form.Item>
-
-                            {/* Delete Button */}
-                            {!isReadOnly && sparepartFields.length > 1 && (
-                                <div style={{ textAlign: 'right' }}>
-                                    <Button
-                                        type="text"
-                                        danger
-                                        icon={<DeleteOutlined />}
-                                        onClick={() => onRemoveSparepartField(field.key)}
-                                        style={{
-                                            borderColor: '#ff4d4f',
-                                            color: '#ff4d4f'
-                                        }}
-                                    >
-                                        Remove
-                                    </Button>
-                                </div>
-                            )}
                         </Form>
                     </Card>
                 ))}
@@ -243,17 +250,9 @@ const SparepartForm = ({
                         </Button>
                     </Form.Item>
                 )}
-
-                {!isReadOnly && (
-                    <div style={{ marginTop: 16 }}>
-                        <Text type="secondary">
-                            * Add at least one sparepart for this error code.
-                        </Text>
-                    </div>
-                )}
             </Form>
         </div>
     );
 };
 
-export default SparepartForm;
\ No newline at end of file
+export default SparepartForm;