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

lavoce #23

Merged
bragaz_rexita merged 7 commits from lavoce into main 2025-11-28 05:10:27 +00:00
Conversation 0 Commits 7 Files Changed 9 +942 -345
9 changed files with 942 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/defaultSparepartImg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

16
src/api/notification.jsx
View File

@@ -1,9 +1,21 @@
import { SendRequest } from '../components/Global/ApiRequest';
export const getAllNotification = async () => {
const getAllNotification = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: 'notification',
prefix: `notification?${queryParams.toString()}`,
});
return response.data;
};
const getNotificationById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `notification/${id}`,
});
return response.data;
};
export { getAllNotification, getNotificationById };

19
src/components/Global/TableList.jsx
View File

@@ -20,6 +20,9 @@ const TableList = memo(function TableList({
fieldColor,
firstLoad = true,
columnDynamic = false,
cardComponent, // New prop for custom card component
onStockUpdate, // Prop to pass to card component
onGetData, // Callback to execute when data is received
}) {
const [gridLoading, setGridLoading] = useState(false);
@@ -103,7 +106,14 @@ const TableList = memo(function TableList({
setColumnsDynamic([...defaultColumns, ...numericColumns]);
}
setData(resData?.data ?? []);
const fetchedData = resData?.data ?? [];
// Panggil callback jika disediakan
if (onGetData && typeof onGetData === 'function') {
onGetData(fetchedData);
}
setData(fetchedData);
const pagingData = resData?.paging;
@@ -142,6 +152,9 @@ const TableList = memo(function TableList({
const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
// Use the custom card component if provided, otherwise default to CardList
const CardViewComponent = cardComponent || CardList;
return (
<div>
<Segmented
@@ -153,7 +166,7 @@ const TableList = memo(function TableList({
onChange={setViewMode}
/>
{(isMobile && mobile) || viewMode === 'card' ? (
<CardList
<CardViewComponent
cardColor={cardColor}
fieldColor={fieldColor}
data={data}
@@ -162,6 +175,7 @@ const TableList = memo(function TableList({
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
onStockUpdate={onStockUpdate}
/>
) : (
<Row gutter={24} style={{ marginTop: '16px' }}>
@@ -200,3 +214,4 @@ const TableList = memo(function TableList({
});
export default TableList;

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

@@ -159,7 +159,7 @@ const EditBrandDevice = () => {
sparepart: ec.sparepart || [],
errorCodeIcon: ec.path_icon
? {
name: 'icon',
name: ec.path_icon.split('/').pop(), // Ambil nama file dari path
uploadPath: ec.path_icon,
url: (() => {
const pathParts = ec.path_icon.split('/');

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

@@ -152,7 +152,7 @@ const ErrorCodeSimpleForm = ({
<div style={{ marginTop: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<img
src={errorCodeIcon.uploadPath}
src={errorCodeIcon.url || errorCodeIcon.uploadPath}
alt="Error Code Icon"
style={{
width: 50,

476
src/pages/master/sparepart/component/DetailSparepart.jsx
View File

@@ -1,14 +1,40 @@
import React, { useState, useEffect } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, message } from 'antd';
import {
Modal,
Input,
Select,
Divider,
Typography,
Button,
ConfigProvider,
Upload,
Row,
Col,
Image,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createSparepart, updateSparepart } from '../../../../api/sparepart';
import { uploadFile } from '../../../../api/file-uploads';
import { validateRun } from '../../../../Utils/validate';
const { Text } = Typography;
const { TextArea } = Input;
const getBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
const DetailSparepart = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [fileList, setFileList] = useState([]);
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const defaultData = {
sparepart_id: '',
@@ -18,7 +44,8 @@ const DetailSparepart = (props) => {
sparepart_item_type: '',
sparepart_unit: '',
sparepart_merk: '',
sparepart_stok: '',
sparepart_stok: '0',
sparepart_foto: '',
};
const [formData, setFormData] = useState(defaultData);
@@ -26,60 +53,200 @@ const DetailSparepart = (props) => {
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
setFileList([]);
};
const handlePreviewCancel = () => setPreviewOpen(false);
const handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview);
setPreviewOpen(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'sparepart_name', label: 'Sparepart Name', required: true },
{ field: 'sparepart_model', label: 'Sparepart Model', required: true },
{ field: 'sparepart_unit', label: 'Sparepart Unit', required: true },
{ field: 'sparepart_merk', label: 'Sparepart Merk', required: true },
{ field: 'sparepart_stok', label: 'Sparepart Stok', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
});
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
setConfirmLoading(false);
})
)
return;
try {
let imageUrl = formData.sparepart_foto;
const newFile = fileList.length > 0 ? fileList[0] : null;
if (newFile && newFile.originFileObj) {
console.log('Uploading file:', newFile.originFileObj);
const uploadResponse = await uploadFile(newFile.originFileObj, 'images');
// Log untuk debugging
console.log('Upload response:', uploadResponse);
// Cek berbagai kemungkinan struktur respons dari API
let uploadedUrl = null;
// Cek berbagai kemungkinan struktur respons dari API
// Cek langsung properti file_url atau url
if (uploadResponse && typeof uploadResponse === 'object') {
// Cek jika uploadResponse langsung memiliki file_url
if (uploadResponse.file_url) {
uploadedUrl = uploadResponse.file_url;
}
// Cek jika uploadResponse memiliki data yang berisi file_url
else if (uploadResponse.data && uploadResponse.data.file_url) {
uploadedUrl = uploadResponse.data.file_url;
}
// Cek jika uploadResponse memiliki data yang berisi url
else if (uploadResponse.data && uploadResponse.data.url) {
uploadedUrl = uploadResponse.data.url;
}
// Cek jika uploadResponse langsung memiliki url
else if (uploadResponse.url) {
uploadedUrl = uploadResponse.url;
}
// Cek jika uploadResponse.data adalah string URL
else if (uploadResponse.data && typeof uploadResponse.data === 'string') {
uploadedUrl = uploadResponse.data;
}
// Cek jika uploadResponse.data adalah objek yang berisi file URL dalam format berbeda
else if (uploadResponse.data && typeof uploadResponse.data === 'object') {
// Cek kemungkinan nama field lain
if (uploadResponse.data.file) {
uploadedUrl = uploadResponse.data.file;
} else if (uploadResponse.data.filename) {
// Jika hanya nama file dikembalikan, bangun URL
const baseUrl = import.meta.env.VITE_API_SERVER || '';
uploadedUrl = `${baseUrl}/uploads/images/${uploadResponse.data.filename}`;
} else if (uploadResponse.data.path) {
uploadedUrl = uploadResponse.data.path;
} else if (uploadResponse.data.location) {
uploadedUrl = uploadResponse.data.location;
}
// Tambahkan kemungkinan lain berdasarkan struktur respons umum
else if (uploadResponse.data.filePath) {
uploadedUrl = uploadResponse.data.filePath;
} else if (uploadResponse.data.file_path) {
uploadedUrl = uploadResponse.data.file_path;
} else if (uploadResponse.data.publicUrl) {
uploadedUrl = uploadResponse.data.publicUrl;
} else if (uploadResponse.data.public_url) {
uploadedUrl = uploadResponse.data.public_url;
}
// Berdasarkan log yang ditampilkan, API mengembalikan path_document atau path_solution
else if (uploadResponse.data.path_document) {
uploadedUrl = uploadResponse.data.path_document;
} else if (uploadResponse.data.path_solution) {
uploadedUrl = uploadResponse.data.path_solution;
} else if (uploadResponse.data.file_upload_name) {
// Jika hanya nama file dikembalikan, bangun URL
const baseUrl = import.meta.env.VITE_API_SERVER || '';
uploadedUrl = `${baseUrl}/uploads/images/${uploadResponse.data.file_upload_name}`;
}
}
}
// Jika respons adalah string, mungkin itu adalah URL
else if (uploadResponse && typeof uploadResponse === 'string') {
uploadedUrl = uploadResponse;
}
if (uploadedUrl) {
console.log('Successfully extracted image URL:', uploadedUrl);
imageUrl = uploadedUrl;
} else {
console.error('Upload response structure:', uploadResponse);
console.error('Available properties:', Object.keys(uploadResponse || {}));
console.error('Response type:', typeof uploadResponse);
console.error(
'Is response an object?',
uploadResponse && typeof uploadResponse === 'object'
);
if (uploadResponse && typeof uploadResponse === 'object') {
console.error('Response keys:', Object.keys(uploadResponse));
console.error(
'Response data keys:',
uploadResponse.data
? Object.keys(uploadResponse.data)
: 'No data property'
);
}
// Tampilkan notifikasi bahwa upload gagal tapi lanjutkan penyimpanan
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Upload gambar gagal. Data akan disimpan tanpa gambar.',
});
// Gunakan URL gambar yang sebelumnya jika ada, atau kosongkan
imageUrl = formData.sparepart_foto || '';
}
} else if (fileList.length === 0) {
// Jika tidak ada file di fileList (termasuk saat user menghapus file), gunakan gambar default
imageUrl = '/assets/defaultSparepartImg.jpg';
}
// Payload hanya berisi field yang tidak kosong untuk menghindari error validasi
const payload = {
sparepart_name: formData.sparepart_name,
sparepart_description: formData.sparepart_description,
sparepart_model: formData.sparepart_model,
sparepart_item_type: formData.sparepart_item_type,
sparepart_unit: formData.sparepart_unit,
sparepart_merk: formData.sparepart_merk,
sparepart_stok: formData.sparepart_stok,
sparepart_name: formData.sparepart_name, // Wajib
};
// 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;
}
console.log('Sending payload:', payload);
const response = formData.sparepart_id
? await updateSparepart(formData.sparepart_id, payload)
: await createSparepart(payload);
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const sparepartName = response.data?.sparepart_name || formData.sparepart_name;
console.log('API response:', response);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Sparepart "${sparepartName}" berhasil ${
message: `Data Sparepart berhasil ${
formData.sparepart_id ? 'diubah' : 'ditambahkan'
}.`,
});
props.setActionMode('list');
setFileList([]);
} else {
NotifAlert({
icon: 'error',
@@ -101,35 +268,47 @@ const DetailSparepart = (props) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
setFormData({ ...formData, [name]: value });
};
const handleFieldChange = (name, value) => {
setFormData({
...formData,
[name]: value,
});
};
const handleStatusToggle = (event) => {
const isChecked = event;
setFormData({
...formData,
is_active: isChecked ? true : false,
});
const handleSelectChange = (name, value) => {
setFormData({ ...formData, [name]: value });
};
useEffect(() => {
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: fileName,
status: 'done',
url: fullUrl,
},
]);
} else {
setFileList([]);
}
} else {
setFormData(defaultData);
setFileList([]);
}
}, [props.showModal, props.selectedData, props.actionMode]);
const uploadButton = (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<Modal
title={`${
@@ -153,7 +332,6 @@ const DetailSparepart = (props) => {
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
},
},
}}
@@ -162,9 +340,7 @@ const DetailSparepart = (props) => {
</ConfigProvider>
<ConfigProvider
theme={{
token: {
colorBgContainer: '#209652',
},
token: { colorBgContainer: '#209652' },
components: {
Button: {
defaultBg: '#23a55a',
@@ -187,103 +363,125 @@ const DetailSparepart = (props) => {
>
{formData && (
<div>
<div hidden>
<Text strong>Sparepart ID</Text>
<Input
name="sparepart_id"
value={formData.sparepart_id}
onChange={handleInputChange}
disabled
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_name"
value={formData.sparepart_name}
onChange={handleInputChange}
placeholder="Enter Sparepart Name"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Description</Text>
<TextArea
name="sparepart_description"
value={formData.sparepart_description}
onChange={handleInputChange}
placeholder="Enter Sparepart Description (Optional)"
readOnly={props.readOnly}
rows={4}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Model</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_model"
value={formData.sparepart_model}
onChange={handleInputChange}
placeholder="Enter Sparepart Model"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Item Type</Text>
<Input
name="sparepart_item_type"
value={formData.sparepart_item_type}
onChange={handleInputChange}
placeholder="Enter Sparepart Item Type"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Unit</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_unit"
value={formData.sparepart_unit}
onChange={handleInputChange}
placeholder="Enter Sparepart Unit"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Merk</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_merk"
value={formData.sparepart_merk}
onChange={handleInputChange}
placeholder="Enter Sparepart Merk"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Sparepart Stok</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_stok"
value={formData.sparepart_stok}
onChange={handleInputChange}
placeholder="Enter Sparepart Stok"
readOnly={props.readOnly}
type="number"
/>
</div>
<Row gutter={[16, 16]}>
<Col span={12}>
<Text strong>Sparepart Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sparepart_name"
value={formData.sparepart_name}
onChange={handleInputChange}
placeholder="Enter Sparepart Name"
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Item Type</Text>
<Select
name="sparepart_item_type"
value={formData.sparepart_item_type}
onChange={(value) =>
handleSelectChange('sparepart_item_type', value)
}
placeholder="Select Item Type"
disabled={props.readOnly}
style={{ width: '100%' }}
>
<Select.Option value="Air Dryer">Air Dryer</Select.Option>
<Select.Option value="Compressor">Compressor</Select.Option>
</Select>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={12}>
<Text strong>Stock</Text>
<Input
name="sparepart_stok"
value={formData.sparepart_stok}
onChange={handleInputChange}
placeholder="Initial stock quantity"
readOnly={props.readOnly}
type="number"
/>
</Col>
<Col span={12}>
<Text strong>Unit</Text>
<Input
name="sparepart_unit"
value={formData.sparepart_unit}
onChange={handleInputChange}
placeholder="e.g., pcs, box, roll"
readOnly={props.readOnly}
/>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Text strong>Foto</Text>
<Upload
listType="picture-card"
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
beforeUpload={() => false}
maxCount={1}
disabled={props.readOnly}
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={handlePreviewCancel}
>
<img alt="preview" style={{ width: '100%' }} src={previewImage} />
</Modal>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={12}>
<Text strong>Brand</Text>
<Input
name="sparepart_merk"
value={formData.sparepart_merk}
onChange={handleInputChange}
placeholder="Enter Brand (Optional)"
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Model</Text>
<Input
name="sparepart_model"
value={formData.sparepart_model}
onChange={handleInputChange}
placeholder="Enter Model (Optional)"
readOnly={props.readOnly}
/>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Text strong>Description</Text>
<TextArea
name="sparepart_description"
value={formData.sparepart_description}
onChange={handleInputChange}
placeholder="Enter Description (Optional)"
readOnly={props.readOnly}
rows={3}
/>
</Col>
</Row>
</div>
)}
</Modal>
);
};
export default DetailSparepart;
export default DetailSparepart;

9
src/pages/master/sparepart/component/ListSparepart.jsx
View File

@@ -13,6 +13,7 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
import { useNavigate } from 'react-router-dom';
import { deleteSparepart, getAllSparepart } from '../../../../api/sparepart';
import TableList from '../../../../components/Global/TableList';
import SparepartCardList from './SparepartCardList'; // Import the new custom card component
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
@@ -265,6 +266,14 @@ const ListSparepart = memo(function ListSparepart(props) {
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}
cardComponent={SparepartCardList} // Pass the custom component here
onStockUpdate={doFilter}
onGetData={(data) => {
if(data && data.length > 0) {
console.log('Sample sparepart data from API:', data[0]);
console.log('Available fields:', Object.keys(data[0] || {}));
}
}} // Log untuk debugging field-field yang tersedia
/>
</Col>
</Row>

335
src/pages/master/sparepart/component/SparepartCardList.jsx Normal file
View File

@@ -0,0 +1,335 @@
import React, { useState } from 'react';
import dayjs from 'dayjs';
import { Card, Button, Row, Col, Typography, Divider, Tag, Space, InputNumber, Input } from 'antd';
import { EditOutlined, DeleteOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { updateSparepart } from '../../../../api/sparepart';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
const { Text, Title } = Typography;
const SparepartCardList = ({
data,
header,
showPreviewModal,
showEditModal,
showDeleteDialog,
fieldColor,
cardColor,
onStockUpdate, // Prop to refresh the list
}) => {
const [updateQuantities, setUpdateQuantities] = useState({});
const [loadingQuantities, setLoadingQuantities] = useState({});
const handleQuantityChange = (id, value) => {
const newQuantities = { ...updateQuantities };
newQuantities[id] = value;
setUpdateQuantities(newQuantities);
};
const handleUpdateStock = async (item) => {
const quantityToAdd = updateQuantities[item.sparepart_id] || 0;
if (quantityToAdd === 0) {
NotifAlert({
icon: 'info',
title: 'Info',
message: 'Please change the quantity first.',
});
return;
}
const newStock = Number(item.sparepart_stok) + quantityToAdd;
if (newStock < 0) {
NotifAlert({ icon: 'error', title: 'Error', message: 'Stock cannot be negative.' });
return;
}
setLoadingQuantities((prev) => ({ ...prev, [item.sparepart_id]: true }));
const payload = {
sparepart_stok: newStock.toString(), // Convert number to string as required by API
};
// Hanya tambahkan field jika nilainya tidak kosong untuk menghindari validasi error
if (item.sparepart_unit && item.sparepart_unit.trim() !== '') {
payload.sparepart_unit = item.sparepart_unit;
}
if (item.sparepart_merk && item.sparepart_merk.trim() !== '') {
payload.sparepart_merk = item.sparepart_merk;
}
if (item.sparepart_model && item.sparepart_model.trim() !== '') {
payload.sparepart_model = item.sparepart_model;
}
if (item.sparepart_description && item.sparepart_description.trim() !== '') {
payload.sparepart_description = item.sparepart_description;
}
try {
const response = await updateSparepart(item.sparepart_id, payload);
// Periksa apakah response valid sebelum mengakses propertinya
if (response && response.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Success',
message: 'Stock updated successfully.',
});
if (onStockUpdate) {
onStockUpdate();
}
handleQuantityChange(item.sparepart_id, 0); // Reset quantity
} else {
NotifAlert({
icon: 'error',
title: 'Failed',
message: response?.message || 'Failed to update stock.',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'An error occurred.',
});
} finally {
setLoadingQuantities((prev) => ({ ...prev, [item.sparepart_id]: false }));
}
};
return (
<Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
{data.map((item) => {
const quantity = updateQuantities[item.sparepart_id] || 0;
const isLoading = loadingQuantities[item.sparepart_id] || false;
return (
<Col xs={24} sm={12} md={8} lg={6} key={item.sparepart_id || item.key}>
<Card
style={{
borderRadius: '8px',
overflow: 'hidden',
border: `1px solid ${
fieldColor ? item[fieldColor] : cardColor || '#E0E0E0'
}`,
}}
bodyStyle={{ padding: 0 }}
>
<Row>
<Col span={8}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
padding: '16px 8px',
height: '100%',
}}
>
{item.sparepart_item_type && (
<Tag
color="blue"
style={{
marginBottom: '8px',
}}
>
{item.sparepart_item_type}
</Tag>
)}
<div
style={{
backgroundColor: '#f0f0f0',
width: '100%',
paddingTop: '100%', /* Ini membuat tinggi sama dengan lebar (aspect ratio 1:1) */
position: 'relative',
borderRadius: '4px',
overflow: 'hidden',
}}
>
{(() => {
// Debug: log the image path construction
let imgSrc;
if (item.sparepart_foto) {
if (item.sparepart_foto.startsWith('http')) {
imgSrc = item.sparepart_foto;
} else {
// Gunakan format file URL seperti di brandDevice
const fileName = item.sparepart_foto.split('/').pop();
// 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={{
width: '100%',
height: '100%',
objectFit: 'cover', // Mengisi container dan crop sisi berlebih
}}
onError={(e) => {
console.error('Image failed to load:', imgSrc);
e.target.src = 'https://via.placeholder.com/150';
}}
onLoad={() => console.log('Image loaded successfully:', imgSrc)}
/>
</div>
);
})()}
</div>
</div>
</Col>
<Col span={16}>
<div
style={{
padding: '16px',
position: 'relative',
height: '100%',
}}
>
<div
style={{
position: 'absolute',
top: 8,
right: 8,
display: 'flex',
gap: '8px',
}}
>
{showEditModal && (
<Button
style={{
color: '#faad14',
borderColor: '#faad14',
}}
icon={<EditOutlined />}
key="edit"
onClick={() => showEditModal(item)}
size="small"
/>
)}
{showDeleteDialog && (
<Button
icon={<DeleteOutlined />}
key="delete"
onClick={() => showDeleteDialog(item)}
size="small"
danger
/>
)}
</div>
<Title
level={5}
style={{
margin: 0,
marginBottom: '8px',
paddingRight: '60px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item[header]}
</Title>
<Text type="secondary">
Available Stock: {item.sparepart_stok || '0'}
</Text>
<Divider style={{ margin: '8px 0' }} />
<Space
align="center"
style={{
marginBottom: '8px',
display: 'flex',
justifyContent: 'center',
}}
>
<Button
icon={<MinusOutlined />}
onClick={() =>
handleQuantityChange(
item.sparepart_id,
quantity - 1
)
}
disabled={isLoading}
style={{ width: 28, height: 28 }}
/>
<Text
strong
style={{ padding: '0 8px', fontSize: '16px' }}
>
{quantity}
</Text>
<Button
icon={<PlusOutlined />}
onClick={() =>
handleQuantityChange(
item.sparepart_id,
quantity + 1
)
}
disabled={isLoading}
style={{ width: 28, height: 28 }}
/>
<Text type="secondary">
{item.sparepart_unit
? ` / ${item.sparepart_unit}`
: ' / pcs'}
</Text>
</Space>
<Button
type={quantity === 0 ? 'default' : 'primary'}
size="small"
style={{ width: '100%' }}
onClick={() => handleUpdateStock(item)}
loading={isLoading}
>
Update Stock
</Button>
<br />
<Text
type="secondary"
style={{
fontSize: '12px',
marginTop: '8px',
display: 'inline-block',
}}
>
Last updated:{' '}
{item.updated_at
? dayjs(item.updated_at).format('DD MMM YYYY')
: 'N/A'}
</Text>
</div>
</Col>
</Row>
</Card>
</Col>
);
})}
</Row>
);
};
export default SparepartCardList;

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

@@ -146,21 +146,43 @@ const ListNotification = memo(function ListNotification(props) {
const navigate = useNavigate();
// Fetch notifications from API
const fetchNotifications = async () => {
const fetchNotifications = async (page = 1, limit = 10, isRead = null) => {
setLoading(true);
try {
const response = await getAllNotification();
const queryParams = new URLSearchParams({
page: page.toString(),
limit: limit.toString(),
});
if (isRead !== null) {
queryParams.append('is_read', isRead.toString());
}
const response = await getAllNotification(queryParams);
if (response && response.data) {
const transformedData = transformNotificationData(response.data);
setNotifications(transformedData);
// Update pagination with mock data (since API doesn't provide pagination info)
const totalItems = transformedData.length;
setPagination((prev) => ({
...prev,
total_limit: totalItems,
total_page: Math.ceil(totalItems / prev.current_limit),
}));
// Update pagination with API response or calculate from data
if (response.paging) {
setPagination({
current_page: response.paging.current_page || page,
current_limit: response.paging.current_limit || limit,
total_limit: response.paging.total_limit || transformedData.length,
total_page:
response.paging.total_page || Math.ceil(transformedData.length / limit),
});
} else {
// Fallback: calculate pagination from data
const totalItems = transformedData.length;
setPagination((prev) => ({
...prev,
current_page: page,
current_limit: limit,
total_limit: totalItems,
total_page: Math.ceil(totalItems / limit),
}));
}
}
} catch (error) {
console.error('Error fetching notifications:', error);
@@ -178,13 +200,10 @@ const ListNotification = memo(function ListNotification(props) {
current_page: page,
current_limit: pageSize,
}));
};
// Get paginated notifications
const getPaginatedNotifications = () => {
const startIndex = (pagination.current_page - 1) * pagination.current_limit;
const endIndex = startIndex + pagination.current_limit;
return filteredNotifications.slice(startIndex, endIndex);
// Fetch notifications with new pagination
const isReadFilter = activeTab === 'read' ? true : activeTab === 'unread' ? false : null;
fetchNotifications(page, pageSize, isReadFilter);
};
useEffect(() => {
@@ -194,9 +213,10 @@ const ListNotification = memo(function ListNotification(props) {
return;
}
// Fetch notifications on component mount
fetchNotifications();
}, []);
// Fetch notifications on component mount and when tab changes
const isReadFilter = activeTab === 'read' ? true : activeTab === 'unread' ? false : null;
fetchNotifications(pagination.current_page, pagination.current_limit, isReadFilter);
}, [activeTab]);
const getIconAndColor = (type) => {
switch (type) {
@@ -248,22 +268,17 @@ const ListNotification = memo(function ListNotification(props) {
setSearchTerm('');
};
const filteredNotifications = notifications
.filter((n) => {
const matchesTab =
activeTab === 'all' ||
(activeTab === 'unread' && !n.isRead) ||
(activeTab === 'read' && n.isRead);
return matchesTab;
})
.filter((n) => {
if (!searchTerm) return true;
// Search by title and error code name
const getUnreadCount = () => notifications.filter((n) => !n.isRead).length;
// Filter notifications based on search term
const getFilteredNotifications = () => {
if (!searchTerm) return notifications;
// Search by title and error code name
return notifications.filter((n) => {
const searchableText = `${n.title} ${n.issue}`.toLowerCase();
return searchableText.includes(searchTerm.toLowerCase());
});
const getUnreadCount = () => notifications.filter((n) => !n.isRead).length;
};
const tabButtonStyle = (isActive) => ({
padding: '12px 16px',
@@ -279,8 +294,7 @@ const ListNotification = memo(function ListNotification(props) {
});
const renderDeviceNotifications = () => {
const paginatedNotifications = getPaginatedNotifications();
const filteredNotifications = getFilteredNotifications();
return (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
{filteredNotifications.length === 0 ? (
@@ -288,200 +302,215 @@ const ListNotification = memo(function ListNotification(props) {
Tidak ada notifikasi
</div>
) : (
paginatedNotifications.map((notification) => {
const { IconComponent, color, bgColor } = getIconAndColor(notification.type);
return (
<Card
key={notification.id}
style={{
backgroundColor: notification.isRead ? '#ffffff' : '#f6f9ff',
borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
cursor: 'pointer',
}}
onClick={() => handleMarkAsRead(notification.id)}
>
<div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
filteredNotifications.map((notification) => {
const { IconComponent, color, bgColor } = getIconAndColor(
notification.type
);
return (
<Card
key={notification.id}
style={{
backgroundColor: notification.isRead ? '#ffffff' : '#f6f9ff',
borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
cursor: 'pointer',
}}
onClick={() => handleMarkAsRead(notification.id)}
>
<div
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: bgColor,
color: color,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '22px',
flexShrink: 0,
gap: '16px',
alignItems: 'flex-start',
}}
>
<IconComponent style={{ fontSize: '22px' }} />
</div>
<div style={{ flex: 1 }}>
<Row align="top">
<Col flex="220px">
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
}}
>
<div>
<Text strong>{notification.title}</Text>
<div style={{ marginTop: '4px' }}>
<Text style={{ color }}>
{notification.issue}
</Text>
<div
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: bgColor,
color: color,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '22px',
flexShrink: 0,
}}
>
<IconComponent style={{ fontSize: '22px' }} />
</div>
<div style={{ flex: 1 }}>
<Row align="top">
<Col flex="220px">
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
}}
>
<div>
<Text strong>{notification.title}</Text>
<div style={{ marginTop: '4px' }}>
<Text style={{ color }}>
{notification.issue}
</Text>
</div>
</div>
{!notification.isRead && (
<Badge
color="red"
status="processing"
style={{
marginLeft: '8px',
marginTop: '4px',
}}
/>
)}
</div>
{!notification.isRead && (
<Badge
color="red"
status="processing"
</Col>
<Col flex="auto">
<div
style={{
display: 'flex',
gap: '8px',
alignItems: 'flex-start',
marginBottom: '12px',
}}
>
<MailOutlined
style={{
marginLeft: '8px',
marginTop: '4px',
color: '#1890ff',
}}
/>
)}
</div>
</Col>
<Col flex="auto">
<div
style={{
display: 'flex',
gap: '8px',
alignItems: 'flex-start',
marginBottom: '12px',
}}
>
<MailOutlined
style={{ marginTop: '4px', color: '#1890ff' }}
/>
<Paragraph
style={{ color: '#595959', margin: 0, flex: 1 }}
>
{notification.details}
</Paragraph>
</div>
<Space
direction="vertical"
size={4}
style={{ fontSize: '13px', color: '#8c8c8c' }}
>
<Space>
<ClockCircleOutlined />
<Text type="secondary">
{notification.timestamp}
</Text>
</Space>
<Space>
<EnvironmentOutlined />
<Text type="secondary">
{notification.location}
</Text>
</Space>
<Space>
<LinkOutlined />
<AntdLink
href={notification.link}
target="_blank"
>
{notification.link}
</AntdLink>
<Button
type="link"
icon={<SendOutlined />}
style={{ paddingLeft: '8px' }}
onClick={(e) => {
e.stopPropagation();
handleResend(notification);
<Paragraph
style={{
color: '#595959',
margin: 0,
flex: 1,
}}
>
Resend
</Button>
{notification.details}
</Paragraph>
</div>
<Space
direction="vertical"
size={4}
style={{ fontSize: '13px', color: '#8c8c8c' }}
>
<Space>
<ClockCircleOutlined />
<Text type="secondary">
{notification.timestamp}
</Text>
</Space>
<Space>
<EnvironmentOutlined />
<Text type="secondary">
{notification.location}
</Text>
</Space>
<Space>
<LinkOutlined />
<AntdLink
href={notification.link}
target="_blank"
>
{notification.link}
</AntdLink>
<Button
type="link"
icon={<SendOutlined />}
style={{ paddingLeft: '8px' }}
onClick={(e) => {
e.stopPropagation();
handleResend(notification);
}}
>
Resend
</Button>
</Space>
</Space>
</Space>
</Col>
<Col
flex="120px"
style={{ textAlign: 'center' }}
align="bottom"
>
<Space
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}
</Col>
<Col
flex="120px"
style={{ textAlign: 'center' }}
align="bottom"
>
<Button
type="text"
icon={
<UserOutlined
style={{ color: '#1890ff' }}
/>
}
title="User History"
<Space
style={{
border: '1px solid #1890ff',
borderRadius: '4px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}
onClick={(e) => {
e.stopPropagation();
setModalContent('user');
}}
/>
<RouterLink
to={`/detail-notification/${
notification.id.split('-')[1]
}`}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
<Button
type="text"
icon={
<EyeOutlined
<UserOutlined
style={{ color: '#1890ff' }}
/>
}
title="Details"
title="User History"
style={{
border: '1px solid #1890ff',
borderRadius: '4px',
}}
onClick={(e) => {
e.stopPropagation();
setModalContent('user');
}}
/>
</RouterLink>
<Button
type="text"
icon={
<HistoryOutlined
style={{ color: '#1890ff' }}
<RouterLink
to={`/detail-notification/${
notification.id.split('-')[1]
}`}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
<Button
type="text"
icon={
<EyeOutlined
style={{ color: '#1890ff' }}
/>
}
title="Details"
style={{
border: '1px solid #1890ff',
borderRadius: '4px',
}}
/>
}
title="Log History"
style={{
border: '1px solid #1890ff',
borderRadius: '4px',
}}
onClick={(e) => {
e.stopPropagation();
setModalContent('log');
}}
/>
</Space>
</Col>
</Row>
</RouterLink>
<Button
type="text"
icon={
<HistoryOutlined
style={{ color: '#1890ff' }}
/>
}
title="Log History"
style={{
border: '1px solid #1890ff',
borderRadius: '4px',
}}
onClick={(e) => {
e.stopPropagation();
setModalContent('log');
}}
/>
</Space>
</Col>
</Row>
</div>
</div>
</div>
</Card>
);
})
)}
</Card>
);
})
)}
</Space>
);
};
@@ -1212,16 +1241,15 @@ const ListNotification = memo(function ListNotification(props) {
</div>
</div>
<Spin spinning={loading}>
{renderDeviceNotifications()}
</Spin>
<Spin spinning={loading}>{renderDeviceNotifications()}</Spin>
{/* PAGINATION */}
<Row justify="space-between" align="middle" style={{ marginTop: '16px' }}>
<Col>
<div>
Menampilkan {pagination.current_limit} data halaman{' '}
{pagination.current_page} dari total {pagination.total_limit} data
{pagination.current_page} dari total {pagination.total_limit}{' '}
data
</div>
</Col>
<Col>