don't show edit icon if user in list is admin

infra/staff/src/components/FamilyComponentTable.tsx

@@ -1,3 +1,4 @@
+import ModeIcon from "@mui/icons-material/Mode";
 import {
     Button,
     CircularProgress,
@@ -14,12 +15,14 @@ import { useEffect, useState } from "react";
 import { getEmail, getToken } from "../App";
 import { apiOrigin } from "../services/support";
 import CloseFamily from "./CloseFamily";
+import EditDialog from "./EditStorage";
 
 interface FamilyMember {
     id: string;
     email: string;
     status: string;
     usage: number;
+    storageLimit: number;
 }
 
 interface UserData {
@@ -33,8 +36,11 @@ interface UserData {
 const FamilyTableComponent: React.FC = () => {
     const [familyMembers, setFamilyMembers] = useState<FamilyMember[]>([]);
     const [closeFamilyOpen, setCloseFamilyOpen] = useState(false);
+    const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
+    const [editDialog, setEditDialog] = useState(false);
+    const [memID, selectedMemID] = useState<string>("");
 
     useEffect(() => {
         const fetchData = async () => {
@@ -53,9 +59,7 @@ const FamilyTableComponent: React.FC = () => {
                     throw new Error("Network response was not ok");
                 }
                 const userData = (await response.json()) as UserData; // Typecast to UserData interface
-                const members: FamilyMember[] =
-                    userData.details.familyData.members;
-                setFamilyMembers(members);
+                setFamilyMembers(userData.details.familyData.members);
             } catch (error) {
                 console.error("Error fetching family data:", error);
                 setError("No family data");
@@ -69,9 +73,9 @@ const FamilyTableComponent: React.FC = () => {
         );
     }, []);
 
-    const formatUsageToGB = (usage: number): string => {
-        const usageInGB = (usage / (1024 * 1024 * 1024)).toFixed(2);
-        return `${usageInGB} GB`;
+    const formatBytesToGB = (bytesValue: number): string => {
+        const valueInGB = (bytesValue / (1024 * 1024 * 1024)).toFixed(2);
+        return `${valueInGB} GB`;
     };
 
     const handleOpenCloseFamily = () => {
@@ -87,6 +91,13 @@ const FamilyTableComponent: React.FC = () => {
         handleOpenCloseFamily();
     };
 
+    const handleEditDialog = () => {
+        familyMembers.forEach((member) => {
+            selectedMemID(member.id);
+        });
+        setOpen(true);
+        setEditDialog(true);
+    };
     if (loading) {
         return <CircularProgress />;
     }
@@ -111,6 +122,9 @@ const FamilyTableComponent: React.FC = () => {
                 <Table aria-label="family-table">
                     <TableHead>
                         <TableRow>
+                            <TableCell>
+                                <b>ID</b>
+                            </TableCell>
                             <TableCell>
                                 <b>User</b>
                             </TableCell>
@@ -121,13 +135,17 @@ const FamilyTableComponent: React.FC = () => {
                                 <b>Usage</b>
                             </TableCell>
                             <TableCell>
-                                <b>ID</b>
+                                <b>Storage Limit</b>
+                            </TableCell>
+                            <TableCell>
+                                <b> </b>
                             </TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
                         {familyMembers.map((member) => (
                             <TableRow key={member.id}>
+                                <TableCell>{member.id}</TableCell>
                                 <TableCell>{member.email}</TableCell>
                                 <TableCell>
                                     <span
@@ -150,9 +168,29 @@ const FamilyTableComponent: React.FC = () => {
                                     </span>
                                 </TableCell>
                                 <TableCell>
-                                    {formatUsageToGB(member.usage)}
+                                    {formatBytesToGB(member.usage)}
                                 </TableCell>
-                                <TableCell>{member.id}</TableCell>
+                                <TableCell>
+                                    {formatBytesToGB(member.storageLimit)}
+                                </TableCell>
+                                {(member.status === "ADMIN" || member.status === "SELF" ) ? (
+                                    <span></span>
+                                ) : <TableCell>
+                                <div
+                                    onClick={handleEditDialog}
+                                    style={{
+                                        marginLeft: "8px",
+                                        cursor: "pointer",
+                                    }}
+                                >
+                                    <ModeIcon />
+                                    <EditDialog
+                                        open={editDialog}
+                                        setOpen={setEditDialog}
+                                        memberID={member.id}
+                                    ></EditDialog>
+                                </div>
+                            </TableCell>}
                             </TableRow>
                         ))}
                     </TableBody>