118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
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 EditRoundedIcon from '@mui/icons-material/EditRounded';
|
|
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
|
import '../../App.css';
|
|
|
|
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,
|
|
}}
|
|
>
|
|
<EditRoundedIcon fontSize="small" />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
sx={{
|
|
backgroundColor: '#FBE9E7',
|
|
color: '#C62828',
|
|
'&:hover': { backgroundColor: '#EF9A9A' },
|
|
borderRadius: 2,
|
|
p: 1,
|
|
}}
|
|
>
|
|
<DeleteRoundedIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
)
|
|
}
|
|
];
|
|
|
|
export default function Clients() {
|
|
const [rows, setRows] = useState([
|
|
{
|
|
id: 1,
|
|
avatar: '/client1.jpg',
|
|
fullName: 'Anna Wintour',
|
|
email: 'anna@fendi.com',
|
|
phone: '+1 555-1234',
|
|
address: '123 Fashion Blvd, NY',
|
|
company: 'Fendi Casa'
|
|
},
|
|
{
|
|
id: 2,
|
|
avatar: '/client2.jpg',
|
|
fullName: 'Karl Lagerfeld',
|
|
email: 'karl@fendi.com',
|
|
phone: '+1 555-5678',
|
|
address: '456 Style Ave, Paris',
|
|
company: 'Fendi Casa'
|
|
},
|
|
{
|
|
id: 3,
|
|
avatar: '',
|
|
fullName: 'Donatella Versace',
|
|
email: 'donatella@fendi.com',
|
|
phone: '+1 555-9999',
|
|
address: '789 Couture St, Milan',
|
|
company: 'Fendi Casa'
|
|
}
|
|
]);
|
|
|
|
return (
|
|
<SectionContainer sx={{ width: '100%' }}>
|
|
<Typography variant="h4" gutterBottom color="#26201AFF">
|
|
Clients
|
|
</Typography>
|
|
<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">
|
|
Add Client
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</SectionContainer>
|
|
);
|
|
} |