feat: implement admin user table - fix #230 (#231)

openhotel · Jan 1, 2025 · 4eec714 · 4eec714
1 parent 23dfc88
commit 4eec714
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 57 deletions.
diff --git a/app/client/package.json b/app/client/package.json
@@ -9,7 +9,7 @@
     "vite-tsconfig-paths": "4.3.2"
   },
   "dependencies": {
-    "@oh/components": "npm:@jsr/[email protected].9",
+    "@oh/components": "npm:@jsr/[email protected].13",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-refresh": "1.3.6",
     "js-cookie": "3.0.5",

diff --git a/app/client/src/modules/home/components/admin/components/users/users.component.tsx b/app/client/src/modules/home/components/admin/components/users/users.component.tsx
@@ -5,68 +5,68 @@ import dayjs from "dayjs";
 
 //@ts-ignore
 import styles from "./users.module.scss";
+import { TableComponent } from "@oh/components";
 
 export const UsersComponent = () => {
   const { users } = useAdmin();
 
-  const verifiedUsers = useMemo(
-    () => users.filter(($user) => $user.verified),
-    [users],
-  );
   const today = dayjs(Date.now());
 
-  const temporalUsers = useMemo(
-    () =>
-      users
-        .filter(($user) => !$user.verified)
-        .map(($user) => {
-          const expireAt = dayjs($user.createdAt).add(1, "day");
+  return (
+    <div className={styles.users}>
+      <TableComponent
+        title="Users"
+        searchable={true}
+        pageRows={20}
+        data={users.map((user) => {
+          const expireAt = dayjs(user.createdAt).add(1, "day");
           const remainingMinutes = expireAt.diff(today, "minutes");
 
           return {
-            ...$user,
-            remainingTime: `${Math.floor(remainingMinutes / 60)} hours ${remainingMinutes % 60} minutes`,
+            ...user,
+            admin: user.admin ? "✔️" : "❌",
+            otp: user.otp ? "✔️" : "❌",
+            verified: user.verified
+              ? "✔️"
+              : `❌ ${Math.floor(remainingMinutes / 60)} hours ${remainingMinutes % 60} minutes`,
           };
-        }),
-    [users, today],
-  );
-
-  return (
-    <div className={styles.users}>
-      <div>
-        <h3>Users ({verifiedUsers.length})</h3>
-        <div className={styles.list}>
-          {verifiedUsers.map((user) => (
-            <div
-              className={cn(styles.item, {
-                [styles.admin]: user.admin,
-              })}
-              key={user.accountId}
-            >
-              <label>{new Date(user.createdAt).toISOString()}</label>
-              <label>{user.accountId}</label>
-              <label>{user.username}</label>
-              <label title={user.email}>{getCensoredEmail(user.email)}</label>
-              <label>{user.otp ? "2FA" : null}</label>
-              <label>{user.admin ? "ADMIN" : null}</label>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div>
-        <h3>Temp Users ({temporalUsers.length})</h3>
-        <div className={styles.list}>
-          {temporalUsers.map((user) => (
-            <div className={styles.item} key={user.accountId}>
-              <label>{new Date(user.createdAt).toISOString()}</label>
-              <label>{user.accountId}</label>
-              <label>{user.username}</label>
-              <label title={user.email}>{getCensoredEmail(user.email)}</label>
-              <div>{user.remainingTime} remaining</div>
-            </div>
-          ))}
-        </div>
-      </div>
+        })}
+        columns={[
+          {
+            key: "accountId",
+            label: "Account Id",
+          },
+          {
+            sortable: true,
+            key: "createdAt",
+            label: "Created At",
+          },
+          {
+            key: "email",
+            label: "Email",
+          },
+          {
+            sortable: true,
+            key: "username",
+            label: "Username",
+          },
+          {
+            sortable: true,
+            key: "admin",
+            label: "Admin",
+          },
+          {
+            sortable: true,
+            key: "otp",
+            label: "2FA",
+          },
+          {
+            sortable: true,
+            key: "verified",
+            label: "Verified",
+          },
+        ]}
+      />
     </div>
   );
 };
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
@@ -328,10 +328,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@oh/components@npm:@jsr/[email protected].9":
-  version "0.1.9"
-  resolved "https://npm.jsr.io/~/11/@jsr/oh__components/0.1.9.tgz#7BC94EE7E35B3934555E1D7555774C4E4BDD6E2E"
-  integrity sha512-EtowMjAIoOzYDUWCTuu1QHutFPgFBynieIcBg38LKc7m0gGH5zamEa5pL+Urp+DQphWoGSYoaaGAdhWsm5P09A==
+"@oh/components@npm:@jsr/[email protected].13":
+  version "0.1.13"
+  resolved "https://npm.jsr.io/~/11/@jsr/oh__components/0.1.13.tgz#EAF1CC8E6F0E53DFB4BC6722083E6631DF4F4A3E"
+  integrity sha512-QOL1GHXv+/rtiDhRCBb8zgfwnfwarllg5tEjGmfHXUxzmpHQCFGXsAsT2KIZXYXCaPcpk1/ByokRrY0wwF/Anw==
   dependencies:
     react "18.3.1"