Admin

.env.example

@@ -26,3 +26,6 @@ AUTH_GITHUB_SECRET=""
 # Prisma
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
 DATABASE_URL="file:./db.sqlite"
+
+# Admin IDs
+ADMIN_FER=""

package.json

@@ -25,11 +25,13 @@
     "@auth/prisma-adapter": "^2.7.2",
     "@hookform/resolvers": "^5.0.1",
     "@prisma/client": "^6.5.0",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-navigation-menu": "^1.2.11",
     "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
     "@t3-oss/env-nextjs": "^0.12.0",
     "@tanstack/react-query": "^5.69.0",
     "@trpc/client": "^11.0.0",

prisma/schema.prisma

@@ -93,7 +93,7 @@ model Course {
   name     String  @unique // Calculus 2
   code     String  @unique // MAC2312
   url      String?
-  count    Int     @default(0)
+  count    Int     @default(1)
   pending  Boolean @default(true)
   notes    Note[]
 }

src/app/admin/ApprovedCourseTable.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { api } from "~/trpc/react";
+
+const ITEMS_PER_PAGE = 10;
+
+export default function ApprovedCourseTable() {
+  const [approvedPage, setApprovedPage] = useState(1);
+
+  const {data: courses, isLoading, error } = api.admin.getAllApprovedCourses.useQuery();
+
+  const handleEdit = (id: string) => {
+    console.log("Edit:", id);
+  };
+
+  const paginate = <T,>(data: T[], page: number) =>
+    data.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE);
+
+  const renderPagination = (
+    totalItems: number,
+    currentPage: number,
+    setPage: (n: number) => void,
+  ) => {
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+    if (totalPages <= 1) return null;
+
+    return (
+      <div className="mt-4 flex justify-center space-x-2">
+        {Array.from({ length: totalPages }, (_, i) => (
+          <button
+            key={i}
+            onClick={() => setPage(i + 1)}
+            className={`cursor-pointer rounded border px-3 py-1 ${
+              currentPage === i + 1
+                ? "bg-blue-600 text-white"
+                : "bg-white hover:bg-gray-100"
+            }`}
+          >
+            {i + 1}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="overflow-x-auto">
+        <table className="min-w-full rounded-lg border border-gray-200 bg-white shadow">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="px-4 py-2 text-left">Name</th>
+              <th className="px-4 py-2 text-left">Code</th>
+              <th className="px-4 py-2 text-left">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr>
+                <td colSpan={4} className="py-4 text-center">
+                  Loading...
+                </td>
+              </tr>
+            ) : error ? (
+              <tr>
+                <td colSpan={4} className="py-4 text-center text-red-500">
+                  Error loading courses
+                </td>
+              </tr>
+            ) : courses && courses.length > 0 ? (
+              paginate(courses, approvedPage).map((course) => (
+                <tr key={course.id} className="border-t">
+                  <td className="px-4 py-2">{course.name}</td>
+                  <td className="px-4 py-2">
+                    {course.code.replace(/^([A-Z]{3})(\d{4})$/, "$1 $2")}
+                  </td>
+                  <td className="px-4 py-2">
+                    <button
+                      onClick={() => handleEdit(course.id)}
+                      className="cursor-pointer rounded bg-yellow-500 px-3 py-1 text-white hover:bg-yellow-600"
+                    >
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={4} className="py-4 text-center">
+                  No Approved Courses
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {courses &&
+        renderPagination(courses.length, approvedPage, setApprovedPage)}
+    </>
+  );
+}