add editing rank to admin

client/ecommerce/package.json

@@ -16,6 +16,7 @@
     "@mui/icons-material": "^5.15.1",
     "@mui/joy": "^5.0.0-beta.19",
     "@mui/material": "^5.15.1",
+    "@mui/x-data-grid": "^7.4.0",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.4.0",
     "@tanstack/react-query": "^5.14.2",

client/ecommerce/src/api/axios.tsx

@@ -360,3 +360,10 @@ export const fetchUsers = async () => {
   const response = await axiosApi.get<UserWithAvatar[]>("users");
   return response.data;
 };
+
+export const grantAdminRoleFor = async (
+  userId: number
+): Promise<MutationData> => {
+  const response = await axiosApi.patch(`users/grantAdmin/${userId}`);
+  return response.data;
+};

client/ecommerce/src/components/AdminDashboard/People/PeopleList.tsx

@@ -2,20 +2,22 @@ import { Box, Divider } from "@mui/material";
 import { UserWithAvatar } from "../../../types/types";
 import { PersonCard } from "./PersonCard";
 import { useDisplayPplWithoutMe } from "../../../utils/DisplayPplWithoutMe";
+import React from "react";
 
 type Props = {
   users: UserWithAvatar[];
 };
 
 export const PeopleList = ({ users }: Props) => {
   const filteredUsers = useDisplayPplWithoutMe(users);
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
-      {filteredUsers.map((user) => (
-        <>
+      {filteredUsers.map((user, index) => (
+        <React.Fragment key={index}>
           <PersonCard user={user} />
           <Divider />
-        </>
+        </React.Fragment>
       ))}
     </Box>
   );

client/ecommerce/src/components/AdminDashboard/People/PersonCard.tsx

@@ -2,15 +2,28 @@ import { Box, Button, Card, CardMedia, Typography } from "@mui/material";
 import { UserWithAvatar } from "../../../types/types";
 import { RenderAvatar } from "../../RenderAvatar";
 import { useDisplayPplWithoutMe } from "../../../utils/DisplayPplWithoutMe";
+import { useState } from "react";
+import { PersonEditDialog } from "./PersonEditDialog";
 
 type Props = {
   user: UserWithAvatar;
 };
 
 export const PersonCard = ({ user }: Props) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const handleDialogOpen = () => setDialogOpen(true);
+  const handleDialogClose = () => setDialogOpen(false);
   return (
     <Box>
-      <Box sx={{ display: "flex", gap: "10px", justifyContent: 'center', alignItems: 'center' }}>
+      <Box
+        sx={{
+          display: "flex",
+          gap: "10px",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
         <RenderAvatar user={user} height="48px" width="48px" />
         <Box sx={{ display: "flex", flexDirection: "column" }}>
           <Typography>{user.username}</Typography>
@@ -20,7 +33,13 @@ export const PersonCard = ({ user }: Props) => {
         </Box>
 
         <Box sx={{ marginLeft: "auto" }}>
-          <Button sx={{ textTransform: "none", color: '#007782' }}>Edit</Button>
+          <Button
+            onClick={handleDialogOpen}
+            sx={{ textTransform: "none", color: "#007782" }}
+          >
+            Edit
+          </Button>
+          <PersonEditDialog open={dialogOpen} handleClose={handleDialogClose} user={user}/>
         </Box>
       </Box>
     </Box>