feat: add menu and event to show clients page, also add a basic clients page

2025-06-11 17:27:52 -06:00
parent c436e08b10
commit f4d7f86d1b
4 changed files with 140 additions and 11 deletions
--- a/src/private/clients/Clients.jsx
+++ b/src/private/clients/Clients.jsx
@@ -0,0 +1,118 @@
+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>
+  );
+}