🐛 fix(headerComponent): change Sign out button to anchor tag for better accessibility and consistency

✨ feat(headerComponent): add Home link when on admin page for easier navigation
✨ feat(headerComponent): add Admin page link for easier navigation to admin page
🐛 fix(ApiKeysPage): handle case when api_keys.name is null or undefined by displaying "-" instead
🐛 fix(ApiKeysPage): handle case when api_keys.last_used_at is an invalid date by displaying "Never" instead
✨ feat(ApiKeysPage): add Total Uses column to display the total number of uses for each API key
🐛 fix(loginPage): set isAdmin context variable based on user's is_superuser property
🐛 fix(loginPage): increase delay before fetching logged user to 500ms for better user experience
🐛 fix(types): add total_uses property to ApiKey type to match backend response

src/frontend/src/components/headerComponent/index.tsx

@@ -32,29 +32,38 @@ export default function Header(): JSX.Element {
           <MenuBar flows={flows} tabId={tabId} />
         )}
         {!autoLogin && location.pathname !== `/flow/${tabId}` && (
-          <Button
+          <a
+          onClick={() => {
+            logout();
+            navigate("/login");
+          }}
+          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
+        >
+          Sign out
+        </a>
+        )}
+
+        {location.pathname === "/admin" && (
+          <a
             onClick={() => {
-              logout();
+              navigate("/");
-              navigate("/login");
             }}
-            className="mx-5 cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
-            variant="outline"
           >
-            Sign out
+            Home
-          </Button>
+          </a>
         )}
 
         {isAdmin &&
           !autoLogin &&
           location.pathname !== "/admin" &&
           location.pathname !== `/flow/${tabId}` && (
-            <Button
+            <a
-              className="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
-              onClick={() => navigate("/admin")}
+            onClick={() => navigate("/admin")}
-              variant="outline"
+          >
-            >
+            Admin page
-              Admin page
+          </a>
-            </Button>
           )}
       </div>
       <div className="round-button-div">

src/frontend/src/pages/ApiKeysPage/index.tsx

@@ -156,6 +156,7 @@ export default function ApiKeysPage() {
                                   </div>
                                 </ShadTooltip>
                               </TableHead>
+                              <TableHead className="h-10">Total Uses</TableHead>
                               <TableHead className="h-10 w-[100px]  text-right"></TableHead>
                             </TableRow>
                           </TableHeader>
@@ -167,7 +168,7 @@ export default function ApiKeysPage() {
                                     <TableCell className="truncate py-2">
                                       <ShadTooltip content={api_keys.name}>
                                         <span className="cursor-default">
-                                          {api_keys.name}
+                                          {api_keys.name ? api_keys.name : "-"}
                                         </span>
                                       </ShadTooltip>
                                     </TableCell>
@@ -177,18 +178,45 @@ export default function ApiKeysPage() {
                                       </span>
                                     </TableCell>
                                     <TableCell className="truncate py-2 ">
-                                      {moment(api_keys.created_at).format(
+                                      <ShadTooltip
-                                        "YYYY-MM-DD HH:mm"
+                                        side="top"
-                                      )}
+                                        content={moment(
-                                    </TableCell>
+                                          api_keys.created_at
-                                    <TableCell className="truncate py-2">
+                                        ).format("YYYY-MM-DD HH:mm")}
-                                      {moment(api_keys.last_used_at).format(
+                                      >
-                                        "YYYY-MM-DD HH:mm"
+                                        <div>
-                                      ) === "Invalid date"
+                                          {moment(api_keys.created_at).format(
-                                        ? "Never"
-                                        : moment(api_keys.last_used_at).format(
                                             "YYYY-MM-DD HH:mm"
                                           )}
+                                        </div>
+                                      </ShadTooltip>
+                                    </TableCell>
+                                    <TableCell className="truncate py-2">
+                                      <ShadTooltip
+                                        side="top"
+                                        content={
+                                          moment(api_keys.last_used_at).format(
+                                            "YYYY-MM-DD HH:mm"
+                                          ) === "Invalid date"
+                                            ? "Never"
+                                            : moment(
+                                                api_keys.last_used_at
+                                              ).format("YYYY-MM-DD HH:mm")
+                                        }
+                                      >
+                                        <div>
+                                          {moment(api_keys.last_used_at).format(
+                                            "YYYY-MM-DD HH:mm"
+                                          ) === "Invalid date"
+                                            ? "Never"
+                                            : moment(
+                                                api_keys.last_used_at
+                                              ).format("YYYY-MM-DD HH:mm")}
+                                        </div>
+                                      </ShadTooltip>
+                                    </TableCell>
+                                    <TableCell className="truncate py-2">
+                                      {api_keys.total_uses}
                                     </TableCell>
                                     <TableCell className="flex w-[100px] py-2 text-right">
                                       <div className="flex">

src/frontend/src/pages/loginPage/index.tsx

@@ -19,7 +19,7 @@ export default function LoginPage(): JSX.Element {
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
 
   const { password, username } = inputState;
-  const { login, getAuthentication, setUserData } = useContext(AuthContext);
+  const { login, getAuthentication, setUserData, setIsAdmin } = useContext(AuthContext);
   const navigate = useNavigate();
   const { setErrorData } = useContext(alertContext);
 
@@ -53,10 +53,12 @@ export default function LoginPage(): JSX.Element {
       setTimeout(() => {
         getLoggedUser()
           .then((user) => {
+            const isSuperUser = user.is_superuser;
+            setIsAdmin(isSuperUser);
             setUserData(user);
           })
           .catch((error) => {});
-      }, 1000);
+      }, 500);
     }
   }
 

src/frontend/src/types/components/index.ts

@@ -538,6 +538,7 @@ export type ApiKey = {
   name: string;
   created_at: string;
   last_used_at: string;
+  total_uses: number;
 };
 export type fetchErrorComponentType = {
   message: string;