Added table renderer on API Keys page

src/frontend/src/components/tableAutoCellRender/index.tsx

@@ -24,6 +24,7 @@ export default function TableAutoCellRender({
         }
         break;
       case "string":
+        console.log(isTimeStampString(value), value);
         if (isTimeStampString(value)) {
           return <DateReader date={value} />;
         }

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

@@ -30,6 +30,8 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKey } from "../../types/components";
+import TableComponent from "../../components/tableComponent";
+import TableAutoCellRender from "../../components/tableAutoCellRender";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
@@ -48,7 +50,10 @@ export default function ApiKeysPage() {
     if (userData) {
       getApiKey()
         .then((keys: [ApiKey]) => {
-          keysList.current = keys["api_keys"];
+          keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({
+            ...apikey,
+            last_used_at: apikey.last_used_at ?? "Never",
+          }));
           setUserId(keys["user_id"]);
           setLoadingKeys(false);
         })
@@ -89,6 +94,26 @@ export default function ApiKeysPage() {
     );
   }
 
+  const columnDefs = [
+    { headerName: "Name", field: "name", cellRenderer: TableAutoCellRender },
+    { headerName: "Key", field: "api_key", cellRenderer: TableAutoCellRender },
+    {
+      headerName: "Created",
+      field: "created_at",
+      cellRenderer: TableAutoCellRender,
+    },
+    {
+      headerName: "Last Used",
+      field: "last_used_at",
+      cellRenderer: TableAutoCellRender,
+    },
+    {
+      headerName: "Total Uses",
+      field: "total_uses",
+      cellRenderer: TableAutoCellRender,
+    },
+  ];
+
   return (
     <>
       <Header></Header>
@@ -128,14 +153,23 @@ export default function ApiKeysPage() {
                   )}
                   <div
                     className={
-                      "max-h-[15rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
+                      "h-[30rem] max-h-[35rem]  rounded-md border-2 bg-muted custom-scroll" +
                       (loadingKeys ? " border-0" : "")
                     }
                   >
                     {keysList.current &&
                       keysList.current.length > 0 &&
                       !loadingKeys && (
-                        <Table className={"table-fixed bg-muted outline-1"}>
+                        <>
+                          <TableComponent
+                            pagination
+                            columnDefs={columnDefs}
+                            rowData={keysList.current}
+                          />
+                        </>
+                      )}
+                  </div>
+                  {/* <Table className={"table-fixed bg-muted outline-1"}>
                     <TableHeader
                       className={
                         loadingKeys
@@ -259,10 +293,7 @@ export default function ApiKeysPage() {
                         )}
                       </TableBody>
                     )}
-                        </Table>
-                      )}
-                  </div>
-
+                  </Table> */}
                   <div className="flex items-center justify-between">
                     <div>
                       <SecretKeyModal

src/frontend/src/utils/utils.ts

@@ -345,8 +345,10 @@ export function freezeObject(obj: any) {
   return JSON.parse(JSON.stringify(obj));
 }
 export function isTimeStampString(str: string): boolean {
-  const timestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3}Z)?$/;
-  return timestampRegex.test(str);
+  const timestampRegexA = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3}Z)?$/;
+  const timestampRegexB = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{6})?$/;
+
+  return timestampRegexA.test(str) || timestampRegexB.test(str);
 }
 
 export function extractColumnsFromRows(