chore: organize names and folders to better fit
This commit is contained in:
Rodolfo Ruiz
156
src/public/clients/AddOrEditClientsForm.jsx
Normal file
156
src/public/clients/AddOrEditClientsForm.jsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Button, TextField, Grid, Avatar, Typography, Paper } from '@mui/material';
|
||||
|
||||
export default function AddOrEditClientsForm({ onAdd, initialData, onCancel }) {
|
||||
const [client, setClient] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
company: '',
|
||||
avatar: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setClient(initialData);
|
||||
} else {
|
||||
setClient({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
company: '',
|
||||
avatar: ''
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setClient((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setClient((prev) => ({ ...prev, avatar: reader.result }));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (onAdd) {
|
||||
onAdd(client);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ px: 2, py: 3 }}>
|
||||
<Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} gap={4}>
|
||||
{/* Left visual panel */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
bgcolor: '#f9f9f9',
|
||||
p: 2,
|
||||
borderRadius: 2,
|
||||
flex: 1,
|
||||
minWidth: '400px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
{client.fullName || 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
{client.email || 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
{client.phone || 'N/A'}
|
||||
</Typography>
|
||||
{client.avatar ? (
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={client.avatar}
|
||||
sx={{ width: '100%', height: 280, borderRadius: 2 }}
|
||||
imgProps={{ style: { objectFit: 'cover', width: '100%', height: '100%' } }}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 240,
|
||||
bgcolor: '#e0e0e0',
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary">Image Preview</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box mt={2}>
|
||||
<Button component="label" className="button-transparent" fullWidth >
|
||||
Upload Image
|
||||
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Right input panel */}
|
||||
<Box flex={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Full Name"
|
||||
name="fullName"
|
||||
value={client.fullName}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={client.email}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Phone"
|
||||
name="phone"
|
||||
value={client.phone}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Address"
|
||||
name="address"
|
||||
value={client.address}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Company"
|
||||
name="company"
|
||||
value={client.company}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
|
||||
<Button onClick={onCancel} className='button-transparent'>Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
187
src/public/clients/Clients.jsx
Normal file
187
src/public/clients/Clients.jsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import SectionContainer from '../../components/SectionContainer.jsx';
|
||||
import { useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
|
||||
import AddOrEditClientsForm from './AddOrEditClientsForm.jsx';
|
||||
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import '../../App.css';
|
||||
|
||||
export default function Clients() {
|
||||
const [rows, setRows] = useState([
|
||||
{
|
||||
id: 1,
|
||||
avatar: '/c2.jpg',
|
||||
fullName: 'Anna Wintour',
|
||||
email: 'anna@fendi.com',
|
||||
phone: '+1 555-1234',
|
||||
address: '123 Fashion Blvd, NY',
|
||||
company: 'Fendi Casa'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
avatar: '/c3.jpg',
|
||||
fullName: 'Karl Lagerfeld',
|
||||
email: 'karl@fendi.com',
|
||||
phone: '+1 555-5678',
|
||||
address: '456 Style Ave, Paris',
|
||||
company: 'Fendi Casa'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
avatar: '/c4.jpg',
|
||||
fullName: 'Donatella Versace',
|
||||
email: 'donatella@fendi.com',
|
||||
phone: '+1 555-9999',
|
||||
address: '789 Couture St, Milan',
|
||||
company: 'Fendi Casa'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
avatar: '/c5.jpg',
|
||||
fullName: 'Giorgio Armani',
|
||||
email: 'giorgio@fendi.com',
|
||||
phone: '+1 555-8888',
|
||||
address: '101 Luxury Rd, Milan',
|
||||
company: 'Fendi Casa'
|
||||
}
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingClient, setEditingClient] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
|
||||
const handleAddOrEditClient = (client) => {
|
||||
if (editingClient) {
|
||||
// Update existing
|
||||
setRows(rows.map((row) => (row.id === editingClient.id ? { ...editingClient, ...client } : row)));
|
||||
} else {
|
||||
// Add new
|
||||
const id = rows.length + 1;
|
||||
setRows([...rows, { id, company: 'Fendi casa', ...client }]);
|
||||
}
|
||||
setOpen(false);
|
||||
setEditingClient(null);
|
||||
};
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingClient(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
setRows(rows.filter((row) => row.id !== rowToDelete.id));
|
||||
setRowToDelete(null);
|
||||
setConfirmOpen(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
field: 'avatar',
|
||||
headerName: '',
|
||||
width: 100,
|
||||
renderCell: (params) => (
|
||||
<Avatar
|
||||
src={params.value || '/favicon.png'}
|
||||
sx={{ width: 48, height: 48 }}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{ field: 'fullName', headerName: 'Full Name', flex: 1 },
|
||||
{ field: 'email', headerName: 'Email', flex: 1.5 },
|
||||
{ field: 'phone', headerName: 'Phone', flex: 1 },
|
||||
{ field: 'address', headerName: 'Address', flex: 1.5 },
|
||||
{ field: 'company', headerName: 'Company', flex: 1 },
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
height="100%"
|
||||
gap={2}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color="#26201AFF">
|
||||
Clients
|
||||
</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingClient(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingClient ? 'Edit Client' : 'Add Client'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditClientsForm onAdd={handleAddOrEditClient} initialData={editingClient} onCancel={() => { setOpen(false); setEditingClient(null); }} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete{' '}
|
||||
<strong>{rowToDelete?.fullName}</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={confirmDelete} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
getRowHeight={() => 60}
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({ top: 4, bottom: 4 })}
|
||||
/>
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" className="button-gold" onClick={() => setOpen(true)}>
|
||||
Add Client
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
80
src/public/mongo/AddOrEditAdminForm.jsx
Normal file
80
src/public/mongo/AddOrEditAdminForm.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Button, TextField, MenuItem } from '@mui/material';
|
||||
import { createExternalData, updateExternalData } from '../../api/mongo/actions';
|
||||
|
||||
export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
status: 'Active'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData({ ...initialData });
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
status: 'Active'
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (initialData) {
|
||||
await updateExternalData(formData);
|
||||
} else {
|
||||
await createExternalData(formData);
|
||||
}
|
||||
if (onAdd) onAdd();
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<Box sx={{ py: 2 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
select
|
||||
label="Status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value="Active">Active</MenuItem>
|
||||
<MenuItem value="Inactive">Inactive</MenuItem>
|
||||
</TextField>
|
||||
<Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
|
||||
<Button onClick={onCancel} className="button-transparent">Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
179
src/public/mongo/Admin.jsx
Normal file
179
src/public/mongo/Admin.jsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import SectionContainer from '../../components/SectionContainer';
|
||||
import { useEffect, useState, useRef } 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 AddOrEditAdminForm from './AddOrEditAdminForm';
|
||||
import { getExternalData, deleteExternalData } from '../../api/mongo/actions';
|
||||
import useApiToast from '../../hooks/useApiToast';
|
||||
|
||||
const columnsBase = [
|
||||
{ field: 'name', headerName: 'Name', flex: 2 },
|
||||
{ field: 'description', headerName: 'Description', flex: 2 },
|
||||
{ field: 'status', headerName: 'Status', width: 120 },
|
||||
{
|
||||
field: 'createdAt',
|
||||
headerName: 'Created At',
|
||||
width: 120,
|
||||
valueFormatter: (params) => {
|
||||
const date = params?.value;
|
||||
return date ? new Date(date).toLocaleString() : '—';
|
||||
}
|
||||
},
|
||||
{ field: 'createdBy', headerName: 'Created By', flex: 1 },
|
||||
{
|
||||
field: 'updatedAt',
|
||||
headerName: 'Updated At',
|
||||
width: 120,
|
||||
valueFormatter: (params) => {
|
||||
const date = params?.value;
|
||||
return date ? new Date(date).toLocaleString() : '—';
|
||||
}
|
||||
},
|
||||
{ field: 'updatedBy', headerName: 'Updated By', flex: 1 },
|
||||
];
|
||||
|
||||
export default function Admin() {
|
||||
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(() => {
|
||||
if (!hasLoaded.current) {
|
||||
loadData();
|
||||
hasLoaded.current = true;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingData(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
try {
|
||||
await deleteExternalData(rowToDelete._Id);
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error('Delete failed:', error);
|
||||
} finally {
|
||||
setConfirmOpen(false);
|
||||
setRowToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const data = await getExternalData();
|
||||
const safeData = Array.isArray(data) ? data : [];
|
||||
setRows(safeData);
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
handleError(error, 'Failed to load data');
|
||||
setRows([]);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" alignItems="center" justifyContent="flex-end" height="100%" gap={2}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color='#26201AFF'>Admin</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingData ? 'Edit Item' : 'Add Item'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditAdminForm
|
||||
onAdd={async () => {
|
||||
await loadData();
|
||||
setOpen(false);
|
||||
setEditingData(null);
|
||||
}}
|
||||
initialData={editingData}
|
||||
onCancel={() => {
|
||||
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}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({ top: 4, bottom: 4 })}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
|
||||
Add Item
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
163
src/public/products/AddOrEditProductForm.jsx
Normal file
163
src/public/products/AddOrEditProductForm.jsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Button, TextField, Grid, Avatar, Typography, Paper } from '@mui/material';
|
||||
import { handleDecimalInputKeyDown } from '../../utils/validation';
|
||||
|
||||
export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
|
||||
const [product, setProduct] = useState({
|
||||
name: '',
|
||||
price: '',
|
||||
provider: '',
|
||||
stock: '',
|
||||
category: '',
|
||||
representation: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setProduct(initialData);
|
||||
} else {
|
||||
setProduct({
|
||||
name: '',
|
||||
price: '',
|
||||
provider: '',
|
||||
stock: '',
|
||||
category: '',
|
||||
representation: ''
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setProduct((prev) => ({
|
||||
...prev,
|
||||
[name]: name === 'price' || name === 'stock' ? Number(value) : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setProduct((prev) => ({ ...prev, representation: reader.result }));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (onAdd) {
|
||||
onAdd(product);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ px: 2, py: 3 }}>
|
||||
<Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} gap={4}>
|
||||
{/* Left visual panel */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
bgcolor: '#f9f9f9',
|
||||
p: 2,
|
||||
borderRadius: 2,
|
||||
flex: 1,
|
||||
minWidth: '400px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
{product.name || 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
{product.provider || 'N/A'}
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
{product.price ? `$${product.price.toFixed(2)}` : '$0.00'}
|
||||
</Typography>
|
||||
{product.representation ? (
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={product.representation}
|
||||
sx={{ width: '100%', height: 280, borderRadius: 2 }}
|
||||
imgProps={{ style: { objectFit: 'cover', width: '100%', height: '100%' } }}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 240,
|
||||
bgcolor: '#e0e0e0',
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary">Image Preview</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box mt={2}>
|
||||
<Button component="label" className="button-transparent" fullWidth >
|
||||
Upload Image
|
||||
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Right input panel */}
|
||||
<Box flex={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Product Name"
|
||||
name="name"
|
||||
value={product.name}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Price"
|
||||
name="price"
|
||||
type="number"
|
||||
value={product.price}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
onKeyDown={handleDecimalInputKeyDown}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Provider"
|
||||
name="provider"
|
||||
value={product.provider}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Stock"
|
||||
name="stock"
|
||||
type="number"
|
||||
value={product.stock}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
onKeyDown={handleDecimalInputKeyDown}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Category"
|
||||
name="category"
|
||||
value={product.category}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
|
||||
<Button onClick={onCancel} className='button-transparent'>Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
179
src/public/products/Products.jsx
Normal file
179
src/public/products/Products.jsx
Normal file
@@ -0,0 +1,179 @@
|
||||
|
||||
import SectionContainer from '../../components/SectionContainer.jsx';
|
||||
import { useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
|
||||
import AddOrEditProductForm from './AddOrEditProductForm.jsx';
|
||||
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import '../../App.css'
|
||||
|
||||
const columnsBase = [
|
||||
{
|
||||
field: 'representation',
|
||||
headerName: '',
|
||||
flex: 2,
|
||||
renderCell: (params) => {
|
||||
const { representation, name, provider, price } = params.row;
|
||||
return (
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box
|
||||
component="img"
|
||||
src={representation || '/favicon.png'}
|
||||
alt={name}
|
||||
sx={{ width: 120, height: 140, borderRadius: 1, objectFit: 'cover' }}
|
||||
/>
|
||||
<Box>
|
||||
<Typography fontWeight={700}>{name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">{provider}</Typography>
|
||||
<Typography variant="h6" color="text.secondary">${Number(price).toFixed(2)}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ field: 'company', headerName: 'Company', flex: 1 },
|
||||
{ field: 'category', headerName: 'Category', flex: 1 },
|
||||
{ field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
|
||||
];
|
||||
|
||||
export default function Products({ children, maxWidth = 'lg', sx = {} }) {
|
||||
const [rows, setRows] = useState([
|
||||
{ id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/1.jpg' },
|
||||
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/2.jpg' },
|
||||
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/3.jpg' },
|
||||
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/4.jpg' },
|
||||
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/5.jpg' }
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingProduct, setEditingProduct] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
|
||||
const handleAddOrEditProduct = (product) => {
|
||||
if (editingProduct) {
|
||||
// Update existing
|
||||
setRows(rows.map((row) => (row.id === editingProduct.id ? { ...editingProduct, ...product } : row)));
|
||||
} else {
|
||||
// Add new
|
||||
const id = rows.length + 1;
|
||||
setRows([...rows, { id, company: 'Fendi casa', ...product }]);
|
||||
}
|
||||
setOpen(false);
|
||||
setEditingProduct(null);
|
||||
};
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingProduct(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
setRows(rows.filter((row) => row.id !== rowToDelete.id));
|
||||
setRowToDelete(null);
|
||||
setConfirmOpen(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
height="100%"
|
||||
gap={2}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color='#26201AFF'>
|
||||
Products
|
||||
</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(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={confirmDelete} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
getRowHeight={() => 140}
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({
|
||||
top: 8,
|
||||
bottom: 8,
|
||||
})}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
|
||||
Add Product
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
92
src/public/providers/AddOrEditProviderForm.jsx
Normal file
92
src/public/providers/AddOrEditProviderForm.jsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Button, TextField, Avatar, Typography, Paper } from '@mui/material';
|
||||
|
||||
export default function AddOrEditProviderForm({ onAdd, initialData, onCancel }) {
|
||||
const [provider, setProvider] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
location: '',
|
||||
category: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setProvider(initialData);
|
||||
} else {
|
||||
setProvider({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
location: '',
|
||||
category: '',
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setProvider((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (onAdd) {
|
||||
onAdd(provider);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ px: 2, py: 3 }}>
|
||||
<Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} gap={4}>
|
||||
<Box flex={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
name="name"
|
||||
value={provider.name}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={provider.email}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Phone"
|
||||
name="phone"
|
||||
value={provider.phone}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Location"
|
||||
name="location"
|
||||
value={provider.location}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Category"
|
||||
name="category"
|
||||
value={provider.category}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
|
||||
<Button onClick={onCancel} className="button-transparent">Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
173
src/public/providers/Providers.jsx
Normal file
173
src/public/providers/Providers.jsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import SectionContainer from '../../components/SectionContainer.jsx';
|
||||
import { useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
|
||||
import AddOrEditProviderForm from './AddOrEditProviderForm.jsx';
|
||||
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import '../../App.css';
|
||||
|
||||
const columnsBase = [
|
||||
{ field: 'name', headerName: 'Name', flex: 1 },
|
||||
{ field: 'location', headerName: 'Location', flex: 1 },
|
||||
{ field: 'category', headerName: 'Category', flex: 1 },
|
||||
{ field: 'email', headerName: 'Email', flex: 1 },
|
||||
{ field: 'phone', headerName: 'Phone', flex: 1 }
|
||||
];
|
||||
|
||||
export default function Providers({ children, maxWidth = 'lg', sx = {} }) {
|
||||
const [rows, setRows] = useState([
|
||||
{
|
||||
id: 1,
|
||||
name: '2G2 S.R.L.',
|
||||
email: 'info@2g2.it',
|
||||
phone: '+39 055 123456',
|
||||
location: 'Via Alessandro Volta, 29, 50041, Calenzano',
|
||||
category: 'Fabrics',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '3MC S.R.L.',
|
||||
email: 'contact@3mc.it',
|
||||
phone: '+39 055 654321',
|
||||
location: 'Via Mugellese, 20/22, 50013, Campi Bisenzio',
|
||||
category: 'FJ, Metal & Hard Accessories',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'A.M.F. S.P.A.',
|
||||
email: 'info@amfspa.it',
|
||||
phone: '+39 0424 789012',
|
||||
location: 'Via Bortolo Sacchi, 54/58, 36061, Bassano del Grappa',
|
||||
category: 'Leather Goods',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'AB CREATIVE S.R.L.S.',
|
||||
email: 'hello@abcreative.it',
|
||||
phone: '+39 055 987654',
|
||||
location: 'Via Della Pace Mondiale, 100, 50018, Scandicci',
|
||||
category: 'Material Embellishment',
|
||||
}
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingProvider, setEditingProvider] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
|
||||
const handleAddOrEditProvider = (provider) => {
|
||||
if (editingProvider) {
|
||||
setRows(rows.map((row) => (row.id === editingProvider.id ? { ...editingProvider, ...provider } : row)));
|
||||
} else {
|
||||
const id = rows.length + 1;
|
||||
setRows([...rows, { id, company: provider.name, ...provider }]);
|
||||
}
|
||||
setOpen(false);
|
||||
setEditingProvider(null);
|
||||
};
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingProvider(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
setRows(rows.filter((row) => row.id !== rowToDelete.id));
|
||||
setRowToDelete(null);
|
||||
setConfirmOpen(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" alignItems="center" justifyContent="flex-end" height="100%" gap={2}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color='#26201AFF'>
|
||||
Providers
|
||||
</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingProvider(null); }} fullWidth>
|
||||
<DialogTitle>{editingProvider ? 'Edit Provider' : 'Add Provider'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditProviderForm onAdd={handleAddOrEditProvider} initialData={editingProvider} onCancel={() => { setOpen(false); setEditingProvider(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={confirmDelete} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({ top: 8, bottom: 8 })}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
|
||||
Add Provider
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user