chore: add new forniture page
This commit is contained in:
Rodolfo Ruiz
254
src/private/fornitures/FurnitureVariantManagement.jsx
Normal file
254
src/private/fornitures/FurnitureVariantManagement.jsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import SectionContainer from '../../components/SectionContainer';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import {
|
||||
Typography, Button, Dialog, DialogTitle, DialogContent,
|
||||
IconButton, Box
|
||||
} from '@mui/material';
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import AddOrEditFurnitureVariantForm from './AddOrEditFurnitureVariantForm';
|
||||
import FurnitureVariantApi from '../../api/furnitureVariantApi';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import useApiToast from '../../hooks/useApiToast';
|
||||
|
||||
const columnsBase = [
|
||||
{ field: 'modelId', headerName: 'Model Id', width: 260 },
|
||||
{ field: 'name', headerName: 'Name', width: 220 },
|
||||
{ field: 'color', headerName: 'Color', width: 160 },
|
||||
{ field: 'line', headerName: 'Line', width: 160 },
|
||||
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
|
||||
{ field: 'price', headerName: 'Price', width: 120, type: 'number',
|
||||
valueFormatter: (p) => p?.value != null ? Number(p.value).toFixed(2) : '—'
|
||||
},
|
||||
{ field: 'currency', headerName: 'Currency', width: 120 },
|
||||
{ field: 'categoryId', headerName: 'Category Id', width: 280 },
|
||||
{ field: 'providerId', headerName: 'Provider Id', width: 280 },
|
||||
{
|
||||
field: 'attributes.material',
|
||||
headerName: 'Material',
|
||||
width: 160,
|
||||
valueGetter: (p) => p?.row?.attributes?.material ?? '—'
|
||||
},
|
||||
{
|
||||
field: 'attributes.legs',
|
||||
headerName: 'Legs',
|
||||
width: 160,
|
||||
valueGetter: (p) => p?.row?.attributes?.legs ?? '—'
|
||||
},
|
||||
{
|
||||
field: 'attributes.origin',
|
||||
headerName: 'Origin',
|
||||
width: 160,
|
||||
valueGetter: (p) => p?.row?.attributes?.origin ?? '—'
|
||||
},
|
||||
{ field: 'status', headerName: 'Status', width: 120 },
|
||||
{
|
||||
field: 'createdAt',
|
||||
headerName: 'Created At',
|
||||
width: 180,
|
||||
valueFormatter: (p) => p?.value ? new Date(p.value).toLocaleString() : '—'
|
||||
},
|
||||
{ field: 'createdBy', headerName: 'Created By', width: 160, valueGetter: (p) => p?.row?.createdBy ?? '—' },
|
||||
{
|
||||
field: 'updatedAt',
|
||||
headerName: 'Updated At',
|
||||
width: 180,
|
||||
valueFormatter: (p) => p?.value ? new Date(p.value).toLocaleString() : '—'
|
||||
},
|
||||
{ field: 'updatedBy', headerName: 'Updated By', width: 160, valueGetter: (p) => p?.row?.updatedBy ?? '—' },
|
||||
];
|
||||
|
||||
export default function FurnitureVariantManagement() {
|
||||
const { user } = useAuth();
|
||||
const token = user?.thalosToken || localStorage.getItem('thalosToken');
|
||||
const apiRef = useRef(null);
|
||||
|
||||
const [rows, setRows] = useState([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingData, setEditingData] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
const { handleError } = useApiToast();
|
||||
const hasLoaded = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiRef.current = new FurnitureVariantApi(token);
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasLoaded.current) {
|
||||
loadData();
|
||||
hasLoaded.current = true;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const data = await apiRef.current.getAllVariants();
|
||||
setRows(Array.isArray(data) ? data : []);
|
||||
} catch (err) {
|
||||
console.error('Error loading variants:', err);
|
||||
handleError(err, 'Failed to load furniture variants');
|
||||
setRows([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
if (!params?.row) return;
|
||||
const r = params.row;
|
||||
const normalized = {
|
||||
_id: r._id || r._Id || '',
|
||||
id: r.id || r.Id || '',
|
||||
modelId: r.modelId ?? '',
|
||||
name: r.name ?? '',
|
||||
color: r.color ?? '',
|
||||
line: r.line ?? '',
|
||||
stock: r.stock ?? 0,
|
||||
price: r.price ?? 0,
|
||||
currency: r.currency ?? 'USD',
|
||||
categoryId: r.categoryId ?? '',
|
||||
providerId: r.providerId ?? '',
|
||||
attributes: {
|
||||
material: r?.attributes?.material ?? '',
|
||||
legs: r?.attributes?.legs ?? '',
|
||||
origin: r?.attributes?.origin ?? '',
|
||||
},
|
||||
status: r.status ?? 'Active',
|
||||
};
|
||||
setEditingData(normalized);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
try {
|
||||
if (!apiRef.current || !rowToDelete?._id) throw new Error('Missing API or id');
|
||||
// If your inventory BFF uses soft delete via Update (status=Inactive), do this:
|
||||
const payload = {
|
||||
_Id: rowToDelete._id || rowToDelete._Id,
|
||||
modelId: rowToDelete.modelId,
|
||||
name: rowToDelete.name,
|
||||
color: rowToDelete.color,
|
||||
line: rowToDelete.line,
|
||||
stock: rowToDelete.stock,
|
||||
price: rowToDelete.price,
|
||||
currency: rowToDelete.currency,
|
||||
categoryId: rowToDelete.categoryId,
|
||||
providerId: rowToDelete.providerId,
|
||||
attributes: {
|
||||
material: rowToDelete?.attributes?.material ?? '',
|
||||
legs: rowToDelete?.attributes?.legs ?? '',
|
||||
origin: rowToDelete?.attributes?.origin ?? '',
|
||||
},
|
||||
status: 'Inactive',
|
||||
};
|
||||
// Prefer update soft-delete; if you truly have DELETE, switch to apiRef.current.deleteVariant({ _Id: ... })
|
||||
await apiRef.current.updateVariant(payload);
|
||||
await loadData();
|
||||
} catch (e) {
|
||||
console.error('Delete failed:', e);
|
||||
} finally {
|
||||
setConfirmOpen(false);
|
||||
setRowToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" alignItems="center" justifyContent="flex-start" height="100%" gap={1}>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#DFCCBC',
|
||||
color: '#26201A',
|
||||
'&:hover': { backgroundColor: '#C2B2A4' },
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleEditClick(params)}
|
||||
>
|
||||
<EditRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#FBE9E7',
|
||||
color: '#C62828',
|
||||
'&:hover': { backgroundColor: '#EF9A9A' },
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleDeleteClick(params?.row)}
|
||||
>
|
||||
<DeleteRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
...columnsBase,
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingData ? 'Edit Furniture Variant' : 'Add Furniture Variant'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditFurnitureVariantForm
|
||||
initialData={editingData}
|
||||
onCancel={() => { setOpen(false); setEditingData(null); }}
|
||||
onAdd={async () => {
|
||||
await loadData();
|
||||
setOpen(false);
|
||||
setEditingData(null);
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete <strong>{rowToDelete?.name}</strong>?
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
|
||||
<Button onClick={() => setConfirmOpen(false)} className="button-transparent">Cancel</Button>
|
||||
<Button variant="contained" onClick={handleConfirmDelete} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2} sx={{ width: '100%', overflowX: 'auto' }}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({ top: 4, bottom: 4 })}
|
||||
getRowId={(row) => row._id || row.id || row.modelId}
|
||||
autoHeight
|
||||
disableColumnMenu
|
||||
getRowHeight={() => 'auto'}
|
||||
sx={{
|
||||
'& .MuiDataGrid-cell': { display: 'flex', alignItems: 'center' },
|
||||
'& .MuiDataGrid-columnHeader': { display: 'flex', alignItems: 'center' },
|
||||
}}
|
||||
/>
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" className="button-gold" onClick={() => setOpen(true)}>
|
||||
Add Variant
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user