Refactor code structure for improved readability and maintainability

src/pages/master/sparepart/component/DetailSparepart.jsx

@@ -193,26 +193,38 @@ const DetailSparepart = (props) => {
                     // Gunakan URL gambar yang sebelumnya jika ada, atau kosongkan
                     imageUrl = formData.sparepart_foto || '';
                 }
-            } else if (fileList.length === 0 && formData.sparepart_id) {
+            } else if (fileList.length === 0) {
-                imageUrl = '';
+                // Jika tidak ada file di fileList (termasuk saat user menghapus file), gunakan gambar default
+                imageUrl = '/assets/defaultSparepartImg.jpg';
             }
 
-            // Kirim semua field yang dianggap required oleh API, bahkan jika kosong
+            // Payload hanya berisi field yang tidak kosong untuk menghindari error validasi
             const payload = {
                 sparepart_name: formData.sparepart_name, // Wajib
-                sparepart_description: formData.sparepart_description || '', // Diperlukan oleh API
-                sparepart_model: formData.sparepart_model || '', // Diperlukan oleh API
-                sparepart_item_type: formData.sparepart_item_type || '', // Diperlukan oleh API
-                sparepart_unit: formData.sparepart_unit || '', // Diperlukan oleh API
-                sparepart_merk: formData.sparepart_merk || '', // Diperlukan oleh API
             };
 
-            // Tambahkan field-field yang tidak dianggap required jika ada nilainya
+            // Tambahkan field-field secara kondisional hanya jika nilainya tidak kosong
+            if (formData.sparepart_description && formData.sparepart_description.trim() !== '') {
+                payload.sparepart_description = formData.sparepart_description;
+            }
+            if (formData.sparepart_model && formData.sparepart_model.trim() !== '') {
+                payload.sparepart_model = formData.sparepart_model;
+            }
+            if (formData.sparepart_item_type && formData.sparepart_item_type.trim() !== '') {
+                payload.sparepart_item_type = formData.sparepart_item_type;
+            }
+            if (formData.sparepart_unit && formData.sparepart_unit.trim() !== '') {
+                payload.sparepart_unit = formData.sparepart_unit;
+            }
+            if (formData.sparepart_merk && formData.sparepart_merk.trim() !== '') {
+                payload.sparepart_merk = formData.sparepart_merk;
+            }
             if (formData.sparepart_stok && formData.sparepart_stok.trim() !== '') {
                 payload.sparepart_stok = formData.sparepart_stok.toString();
             } else {
                 payload.sparepart_stok = '0'; // Set default value jika tidak diisi
             }
+            // Sertakan sparepart_foto hanya jika nilainya tidak kosong, agar tidak memicu validasi
             if (imageUrl && imageUrl.trim() !== '') {
                 payload.sparepart_foto = imageUrl;
             }
@@ -267,12 +279,18 @@ const DetailSparepart = (props) => {
         if (props.selectedData) {
             setFormData(props.selectedData);
             if (props.selectedData.sparepart_foto) {
+                // Buat URL lengkap dengan token untuk file yang sudah ada
+                const fileName = props.selectedData.sparepart_foto.split('/').pop();
+                const token = localStorage.getItem('token');
+                const baseURL = import.meta.env.VITE_API_SERVER || '';
+                const fullUrl = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
+
                 setFileList([
                     {
                         uid: '-1',
-                        name: props.selectedData.sparepart_foto.split('/').pop(),
+                        name: fileName,
                         status: 'done',
-                        url: props.selectedData.sparepart_foto,
+                        url: fullUrl,
                     },
                 ]);
             } else {

src/pages/master/sparepart/component/SparepartCardList.jsx

@@ -139,12 +139,10 @@ const SparepartCardList = ({
                                             style={{
                                                 backgroundColor: '#f0f0f0',
                                                 width: '100%',
-                                                padding: '8px',
+                                                paddingTop: '100%', /* Ini membuat tinggi sama dengan lebar (aspect ratio 1:1) */
+                                                position: 'relative',
                                                 borderRadius: '4px',
-                                                display: 'flex',
+                                                overflow: 'hidden',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                aspectRatio: '1 / 1',
                                             }}
                                         >
                                             {(() => {
@@ -156,23 +154,36 @@ const SparepartCardList = ({
                                                     } else {
                                                         // Gunakan format file URL seperti di brandDevice
                                                         const fileName = item.sparepart_foto.split('/').pop();
-                                                        // Gunakan API getFileUrl untuk mendapatkan URL yang benar
+
+                                                        // Jika filename adalah default file, gunakan dari public assets
+                                                        if (fileName === 'defaultSparepartImg.jpg') {
+                                                            imgSrc = `/assets/defaultSparepartImg.jpg`;
+                                                        } else {
+                                                            // Gunakan API getFileUrl untuk mendapatkan URL yang benar untuk file upload
                                                             const token = localStorage.getItem('token');
                                                             const baseURL = import.meta.env.VITE_API_SERVER || '';
                                                             imgSrc = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
                                                         }
+                                                    }
                                                     console.log('Image path being constructed:', imgSrc);
                                                 } else {
                                                     imgSrc = 'https://via.placeholder.com/150';
                                                 }
                                                 return (
+                                                    <div style={{
+                                                        position: 'absolute',
+                                                        top: 0,
+                                                        left: 0,
+                                                        width: '100%',
+                                                        height: '100%',
+                                                    }}>
                                                         <img
                                                             src={imgSrc}
                                                             alt={item[header]}
                                                             style={{
-                                                            maxWidth: '100%',
+                                                                width: '100%',
-                                                            maxHeight: '100%',
+                                                                height: '100%',
-                                                            objectFit: 'contain',
+                                                                objectFit: 'cover', // Mengisi container dan crop sisi berlebih
                                                             }}
                                                             onError={(e) => {
                                                                 console.error('Image failed to load:', imgSrc);
@@ -180,6 +191,7 @@ const SparepartCardList = ({
                                                             }}
                                                             onLoad={() => console.log('Image loaded successfully:', imgSrc)}
                                                         />
+                                                    </div>
                                                 );
                                             })()}
                                         </div>