From c55d3f23c69d8afdee3d786b91b480cc2a9d7cf8 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Mon, 18 Dec 2023 15:12:51 +0530
Subject: [PATCH] manage users css and features

---
 src/App.css                                 |   9 ++
 src/components/manage_users/ManageUsers.tsx | 150 +++++++++++++++++---
 2 files changed, 136 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index f0dc828..903bd77 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,4 +21,13 @@
 
 .select-field {
   width : 35%;
+}
+
+.manageusers-table-header-style .css-1ygcj2i-MuiTableCell-root{
+  background-color: #171716;
+  color: white;
+}
+
+.activeCell {
+  color: green !important;
 }
\ No newline at end of file
diff --git a/src/components/manage_users/ManageUsers.tsx b/src/components/manage_users/ManageUsers.tsx
index 30ba0d5..31e2e88 100644
--- a/src/components/manage_users/ManageUsers.tsx
+++ b/src/components/manage_users/ManageUsers.tsx
@@ -36,8 +36,8 @@ export default function ManageUsers(){
     const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
     const [data, setData] = useState<Row[]>(initialData);
     const [open, setOpen] = useState(false);
-    const [selectedRow, setSelectedRow] = useState<Row>({ id: 0, name: '', age: 0 });
-    const [newRow, setNewRow] = useState<Row>({ id: 0, name: '', age: 0 });
+    const [selectedRow, setSelectedRow] = useState<any>();
+    const [newRow, setNewRow] = useState<any>();
   
     const handleEdit = (row: Row) => {
       setSelectedRow(row);
@@ -78,22 +78,17 @@ export default function ManageUsers(){
       setNewRow({ ...newRow, [name]: value });
     };
   
-
-  
-    console.log(manageUsersResponse,"dsjhgfsdugf")
     return(
         <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
             <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
-                <div>
-                
-
+                {/* <div> */}
                 <TableContainer component={Paper}>
                     <Table>
-                    <TableHead>
+                    <TableHead className="manageusers-table-header-style">
                         <TableRow>
                             <TableCell>
-                                <Button variant="contained" startIcon={<AddIcon />} onClick={handleOpen}>
-                                    Add New Row
+                                <Button variant="contained" sx={{bgcolor:'white',color:'#1e1e1e', fontWeight:600}} startIcon={<AddIcon />} onClick={handleOpen}>
+                                    New
                                 </Button>
                             </TableCell>
                             <TableCell>Name</TableCell>
@@ -116,47 +111,156 @@ export default function ManageUsers(){
                             <TableCell>{row.username}</TableCell>
                             <TableCell>{row.email_id}</TableCell>
                             <TableCell>{row.last_login}</TableCell>
-                            <TableCell>{row.active}</TableCell>
-                            
+                            <TableCell>{row.active==true?'Active':'Inactive'}</TableCell>
                         </TableRow>
                         ))}
                     </TableBody>
                     </Table>
                 </TableContainer>
 
-                <Dialog className='projectScreen-background' open={open} onClose={handleClose}>
-                    <DialogTitle>{selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
-                    <DialogContent>
+                <Dialog  open={open} onClose={handleClose}>
+                    <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
+                    <DialogContent sx={{bgcolor:'rgb(24 24 23)'}}>
                     <TextField
+                        variant="standard"
                         autoFocus
+                        sx={{input: { color: 'white' },
+                            "& label": {
+                            color: "white"
+                        },
+                        "& label.Mui-focused": {
+                            color: "white"
+                        },
+                        "& .MuiInput-underline:after": {
+                            borderBottomColor: "white"
+                        },
+                        "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                            borderColor: "white"
+                            }},
+                            "&:hover fieldset": {
+                                borderColor: "white",
+                                borderWidth: 2
+                            },
+                            "&.Mui-focused fieldset": {
+                                borderColor: "white"
+                            }
+                        }}
                         margin="dense"
                         label="Name"
                         type="text"
                         fullWidth
                         name="name"
-                        value={selectedRow.name}
+                        value={selectedRow && selectedRow.username}
                         onChange={handleChange}
                     />
                     <TextField
+                    variant="standard"
+                    sx={{input: { color: 'white' },
+                            "& label": {
+                            color: "white"
+                        },
+                        "& label.Mui-focused": {
+                            color: "white"
+                        },
+                        "& .MuiInput-underline:after": {
+                            borderBottomColor: "white"
+                        },
+                        "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                            borderColor: "white"
+                            }},
+                            "&:hover fieldset": {
+                                borderColor: "white",
+                                borderWidth: 2
+                            },
+                            "&.Mui-focused fieldset": {
+                                borderColor: "white"
+                            }
+                        }}
                         margin="dense"
-                        label="Age"
+                        label="Email"
+                        // type="number"
+                        fullWidth
+                        name="age"
+                        value={selectedRow && selectedRow.email_id}
+                        onChange={handleChange}
+                    />
+                    <TextField
+                    sx={{input: { color: 'white' },
+                        "& label": {
+                        color: "white"
+                        },
+                        "& label.Mui-focused": {
+                            color: "white"
+                        },
+                        "& .MuiInput-underline:after": {
+                            borderBottomColor: "white"
+                        },
+                        "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                            borderColor: "white"
+                            }},
+                            "&:hover fieldset": {
+                                borderColor: "white",
+                                borderWidth: 2
+                            },
+                            "&.Mui-focused fieldset": {
+                                borderColor: "white"
+                            }
+                        }}
+                    variant="standard"
+                        margin="dense"
+                        label="Last Login"
+                        type="last_login"
+                        fullWidth
+                        name="last_login"
+                        value={selectedRow && selectedRow.last_login}
+                        onChange={handleChange}
+                    />
+                      <TextField
+                      sx={{input: { color: 'white' },
+                      "& label": {
+                      color: "white"
+                        },
+                        "& label.Mui-focused": {
+                            color: "white"
+                        },
+                        "& .MuiInput-underline:after": {
+                            borderBottomColor: "white"
+                        },
+                        "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                            borderColor: "white"
+                            }},
+                            "&:hover fieldset": {
+                                borderColor: "white",
+                                borderWidth: 2
+                            },
+                            "&.Mui-focused fieldset": {
+                                borderColor: "white"
+                            }
+                        }}
+                      variant="standard"
+                        margin="dense"
+                        label="Active"
                         type="number"
                         fullWidth
                         name="age"
-                        value={selectedRow.age}
+                        value={selectedRow && selectedRow.active}
                         onChange={handleChange}
                     />
                     </DialogContent>
-                    <DialogActions>
+                    <DialogActions sx={{bgcolor:'rgb(24 24 23)'}}>
                     <Button onClick={handleClose} color="primary">
                         Cancel
                     </Button>
-                    <Button onClick={handleSave} color="primary">
+                    {/* <Button onClick={handleSave} color="primary">
                         Save
-                    </Button>
+                    </Button> */}
                     </DialogActions>
                 </Dialog>
-                </div>
+                {/* </div> */}
             </Paper>
         </Paper>
     )