update: project pages ui and api endpoints

Author: arnobt78

REACT_QUERY_MIGRATION_PLAN.md

@@ -12,7 +12,7 @@ const Page = () => (
       email: "",
       password: "",
       fullName: "",
-      universityId: 0,
+      universityId: undefined,
       universityCard: "",
     }}
     onSubmit={signUp}

REACT_QUERY_SETUP_GUIDE.md

@@ -16,7 +16,10 @@
  */
 
 import React, { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import config from "@/lib/config";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -64,13 +67,71 @@ const AccountRequestsClient = ({
   successMessage,
   errorMessage,
 }: AccountRequestsClientProps) => {
+  const router = useRouter();
+  const searchParamsHook = useSearchParams();
+  const queryClient = useQueryClient();
+
+  // Get current search params from URL
+  const currentSearch = searchParamsHook.get("search") || "";
+
+  const [localSearch, setLocalSearch] = useState(currentSearch);
+  const lastSyncedSearchRef = React.useRef(currentSearch);
+
+  // Sync localSearch with URL params when they change externally (e.g., browser back/forward)
+  // Only sync if the change didn't come from our own debounced update
+  React.useEffect(() => {
+    // Only sync if:
+    // 1. currentSearch changed from an external source (not our debounce)
+    // 2. localSearch matches the last synced value (user isn't actively typing)
+    // This prevents overwriting user input while typing
+    if (
+      currentSearch !== lastSyncedSearchRef.current &&
+      localSearch === lastSyncedSearchRef.current
+    ) {
+      setLocalSearch(currentSearch);
+      lastSyncedSearchRef.current = currentSearch;
+    }
+  }, [currentSearch, localSearch]);
+
+  // Debounce search input for instant filtering
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (localSearch !== currentSearch) {
+        const params = new URLSearchParams(searchParamsHook.toString());
+        const trimmedSearch = localSearch.trim();
+
+        if (trimmedSearch) {
+          params.set("search", trimmedSearch);
+        } else {
+          params.delete("search");
+        }
+
+        const newUrl = `/admin/account-requests?${params.toString()}`;
+        // Update ref before navigation to prevent sync effect from overwriting
+        lastSyncedSearchRef.current = trimmedSearch;
+        queryClient.invalidateQueries({ queryKey: ["pending-users"] });
+        router.replace(newUrl, { scroll: false });
+      }
+    }, 300); // 300ms debounce
+
+    return () => clearTimeout(timer);
+  }, [localSearch, currentSearch, searchParamsHook, queryClient, router]);
+
+  // Check if any filters are active
+  const hasActiveFilters = currentSearch;
+
+  // Only use initialData on first load (when no filters are active)
+  const initialUsersData = !hasActiveFilters && initialUsers
+    ? initialUsers
+    : undefined;
+
   // React Query hook with SSR initial data
   const {
     data: usersData,
     isLoading: usersLoading,
     isError: usersError,
     error: usersErrorData,
-  } = usePendingUsers(initialUsers);
+  } = usePendingUsers(initialUsersData, currentSearch || undefined);
 
   // React Query mutations
   const approveUserMutation = useApproveUser();
@@ -83,6 +144,29 @@ const AccountRequestsClient = ({
   // usePendingUsers returns User[] directly (not wrapped in UsersListResponse)
   const users: UserType[] = ((usersData ?? initialUsers) || []) as UserType[];
 
+  // Update search params in URL and trigger refetch
+  const updateSearchParams = (newParams: Record<string, string>) => {
+    const params = new URLSearchParams(searchParamsHook.toString());
+
+    Object.entries(newParams).forEach(([key, value]) => {
+      if (value && value !== "all") {
+        params.set(key, value);
+      } else {
+        params.delete(key);
+      }
+    });
+
+    queryClient.invalidateQueries({ queryKey: ["pending-users"] });
+    router.replace(`/admin/account-requests?${params.toString()}`, {
+      scroll: false,
+    });
+  };
+
+  const clearFilters = () => {
+    setLocalSearch("");
+    router.push("/admin/account-requests");
+  };
+
   // Handler functions for mutations
   const handleApproveUser = async (userId: string) => {
     const user = users.find((u) => u.id === userId);
@@ -153,7 +237,7 @@ const AccountRequestsClient = ({
       <div className="mx-auto max-w-7xl">
         {/* Header */}
         <div className="mb-8">
-          <div className="flex items-center justify-between">
+          <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900">
                 Account Requests
@@ -162,11 +246,30 @@ const AccountRequestsClient = ({
                 Review and approve pending user registrations
               </p>
             </div>
-            <div className="flex items-center space-x-2">
-              <div className="rounded-full bg-orange-100 px-3 py-1">
-                <span className="text-sm font-medium text-orange-800">
-                  {users.length} Pending
-                </span>
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+              {/* Search Input */}
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  const trimmedSearch = localSearch.trim();
+                  updateSearchParams({ search: trimmedSearch });
+                }}
+                className="flex-1 sm:min-w-[250px]"
+              >
+                <Input
+                  type="text"
+                  placeholder="Search by name, email, ID..."
+                  value={localSearch}
+                  onChange={(e) => setLocalSearch(e.target.value)}
+                  className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-500 focus:border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-300"
+                />
+              </form>
+              <div className="flex items-center space-x-2">
+                <div className="rounded-full bg-orange-100 px-3 py-1">
+                  <span className="text-sm font-medium text-orange-800">
+                    {users.length} Pending
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -210,11 +313,24 @@ const AccountRequestsClient = ({
                 <User className="size-12 text-gray-400" />
               </div>
               <h3 className="mb-2 text-lg font-medium text-gray-900">
-                No Pending Requests
+                {hasActiveFilters
+                  ? "No pending requests found matching your criteria."
+                  : "No Pending Requests"}
               </h3>
-              <p className="text-gray-500">
-                All account requests have been processed.
+              <p className="mb-4 text-gray-500">
+                {hasActiveFilters
+                  ? "Try adjusting your search terms."
+                  : "All account requests have been processed."}
               </p>
+              {hasActiveFilters && (
+                <Button
+                  variant="outline"
+                  onClick={clearFilters}
+                  className="mt-2 border-gray-300 text-gray-700 hover:bg-gray-100"
+                >
+                  Clear All Filters
+                </Button>
+              )}
             </CardContent>
           </Card>
         ) : (
@@ -269,30 +385,32 @@ const AccountRequestCard = ({
   return (
     <Card className="group border-0 shadow-md transition-all duration-300 hover:shadow-lg">
       <CardHeader className="pb-4">
-        <div className="flex items-start">
-          <div className="flex flex-1 items-center space-x-3">
+        <div className="space-y-3">
+          {/* Badge on its own row */}
+          <div className="flex justify-start">
+            <Badge
+              variant="pending"
+              className="flex items-center space-x-1"
+            >
+              <Clock className="size-3" />
+              <span>PENDING</span>
+            </Badge>
+          </div>
+          {/* Avatar and user info with full width */}
+          <div className="flex items-center space-x-3">
             <Avatar className="size-12">
               <AvatarImage src="" />
               <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 font-semibold text-white">
                 {getInitials(user.fullName)}
               </AvatarFallback>
             </Avatar>
-            <div className="flex-1">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900">
-                  {user.fullName}
-                </h3>
-                <Badge
-                  variant="pending"
-                  className="ml-2 flex items-center space-x-1"
-                >
-                  <Clock className="size-3" />
-                  <span>PENDING</span>
-                </Badge>
-              </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-gray-900 truncate">
+                {user.fullName}
+              </h3>
               <div className="flex items-center space-x-1 text-sm text-gray-500">
-                <Mail className="size-3" />
-                <span>{user.email}</span>
+                <Mail className="size-3 flex-shrink-0" />
+                <span className="truncate">{user.email}</span>
               </div>
             </div>
           </div>

app/(auth)/sign-up/page.tsx

@@ -14,7 +14,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { db } from "@/database/drizzle";
 import { borrowRecords, books, users } from "@/database/schema";
-import { eq, desc } from "drizzle-orm";
+import { eq, desc, and, or, sql } from "drizzle-orm";
 import { auth } from "@/auth";
 
 export const runtime = "nodejs";
@@ -73,14 +73,34 @@ export async function GET(request: NextRequest) {
     const { searchParams } = new URL(request.url);
 
     // Parse query parameters
+    const search = searchParams.get("search") || "";
     const status = searchParams.get("status") as
       | "PENDING"
       | "BORROWED"
       | "RETURNED"
       | null;
 
     // Build where conditions
-    const whereConditions = status ? [eq(borrowRecords.status, status)] : [];
+    const whereConditions = [];
+
+    // Status filter
+    if (status) {
+      whereConditions.push(eq(borrowRecords.status, status));
+    }
+
+    // Search condition - case-insensitive using ILIKE
+    if (search) {
+      const searchPattern = `%${search}%`;
+      whereConditions.push(
+        or(
+          sql`${books.title}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`,
+          sql`${books.author}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`,
+          sql`${users.fullName}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`,
+          sql`${users.email}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`,
+          sql`CAST(${users.universityId} AS TEXT) ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`
+        )
+      );
+    }
 
     // Fetch borrow records with user and book details
     const allBorrowRecords = await db
@@ -116,7 +136,9 @@ export async function GET(request: NextRequest) {
       .from(borrowRecords)
       .innerJoin(users, eq(borrowRecords.userId, users.id))
       .innerJoin(books, eq(borrowRecords.bookId, books.id))
-      .where(whereConditions.length > 0 ? whereConditions[0] : undefined)
+      .where(
+        whereConditions.length > 0 ? and(...whereConditions) : undefined
+      )
       .orderBy(desc(borrowRecords.createdAt));
 
     // Transform to BorrowRecordWithDetails format

app/admin/account-requests/AccountRequestsClient.tsx

@@ -0,0 +1,70 @@
+/**
+ * Books Genres API Route
+ *
+ * GET /api/books/genres
+ *
+ * Purpose: Get a list of unique genres from all books.
+ *
+ * Returns: Array of unique genre strings
+ *
+ * IMPORTANT: This route uses Node.js runtime (not Edge) because it needs database access
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/database/drizzle";
+import { books } from "@/database/schema";
+import { asc } from "drizzle-orm";
+import { headers } from "next/headers";
+import ratelimit from "@/lib/ratelimit";
+
+export const runtime = "nodejs";
+
+/**
+ * Get unique genres from all books
+ *
+ * @param _request - Next.js request object (unused)
+ * @returns JSON response with genres array
+ */
+export async function GET(_request: NextRequest) {
+  try {
+    // Rate limiting to prevent abuse
+    const ip = (await headers()).get("x-forwarded-for") || "127.0.0.1";
+    const { success } = await ratelimit.limit(ip);
+
+    if (!success) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Too Many Requests",
+          message: "Rate limit exceeded. Please try again later.",
+        },
+        { status: 429 }
+      );
+    }
+
+    // Get unique genres from all books
+    const genresResult = await db
+      .selectDistinct({ genre: books.genre })
+      .from(books)
+      .orderBy(asc(books.genre));
+
+    const genres = genresResult.map((g) => g.genre).filter(Boolean);
+
+    return NextResponse.json({
+      success: true,
+      genres,
+    });
+  } catch (error) {
+    console.error("Error fetching genres:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch genres",
+        message:
+          error instanceof Error ? error.message : "Unknown error occurred",
+      },
+      { status: 500 }
+    );
+  }
+}
+

app/api/admin/borrow-requests/route.ts

@@ -65,10 +65,14 @@ export async function GET(request: NextRequest) {
     // Build where conditions
     const whereConditions = [];
 
-    // Search condition
+    // Search condition - case-insensitive using ILIKE
     if (search) {
+      const searchPattern = `%${search}%`;
       whereConditions.push(
-        or(like(books.title, `%${search}%`), like(books.author, `%${search}%`))
+        or(
+          sql`${books.title}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`,
+          sql`${books.author}::text ILIKE ${sql.raw(`'${searchPattern.replace(/'/g, "''")}'`)}`
+        )
       );
     }