basic user listing

2024-04-22 18:00:59 -04:00
parent f37a4b9c9e
commit 7856e76b15
5 changed files with 110 additions and 1 deletions
@@ -0,0 +1,77 @@
+import { User as U } from "@prisma/client";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+export default function Admin() {
+  const [users, setUsers] = useState<User[]>();
+
+  useEffect(() => {
+    // fetch users
+    fetch("/api/v1/users")
+      .then((res) => res.json())
+      .then((data) => setUsers(data.response));
+  }, []);
+
+  return (
+    <div className="max-w-5xl mx-auto mt-5 px-5">
+      <div className="gap-2 inline-flex items-center">
+        <Link
+          href="/dashboard"
+          className="text-neutral btn btn-square btn-sm btn-ghost"
+        >
+          <i className="bi-chevron-left text-xl"></i>
+        </Link>
+        <p className="capitalize text-3xl font-thin inline">
+          User Administration
+        </p>
+      </div>
+
+      <div className="divider my-3"></div>
+
+      {users && users.length > 0 ? (
+        <div className="overflow-x-auto whitespace-nowrap w-full">
+          <table className="table table-zebra w-full">
+            <thead>
+              <tr>
+                <th></th>
+                <th>Username</th>
+                {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                  <th>Email</th>
+                )}
+                {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                  <th>Subscribed</th>
+                )}
+                <th>Created At</th>
+                <th>Updated At</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user, index) => (
+                <tr key={user.id}>
+                  <td>{index + 1}</td>
+                  <td>{user.username}</td>
+                  {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                    <td>{user.email}</td>
+                  )}
+                  {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                    <td>{user.subscriptions.active ? "Yes" : "No"}</td>
+                  )}
+                  <td>{new Date(user.createdAt).toLocaleString()}</td>
+                  <td>{new Date(user.updatedAt).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p>No users found.</p>
+      )}
+    </div>
+  );
+}