maint & seat-allocation fix

Author: pranavgawaii

app/admin/layout.tsx

@@ -2,11 +2,6 @@ import { requireRole } from "@/lib/auth";
 import type { ReactNode } from "react";
 import { AdminSidebar } from "@/components/admin/admin-sidebar";
 import { BespokeLayout } from "@/components/ui/bespoke-layout";
-import Link from "next/link";
-import { createClient } from "@/lib/supabase/server";
-import Image from "next/image";
-import { UserProfileMenu } from "@/components/student/user-profile-menu";
-import { Bell } from "lucide-react";
 import { DashboardHeader } from "@/components/layouts/DashboardHeader";
 
 export default async function AdminLayout({
@@ -15,27 +10,35 @@ export default async function AdminLayout({
   children: ReactNode;
 }) {
   const { user, role } = await requireRole("admin");
-  // const supabase = await createClient(); // Not needed if we don't query more
 
   if (!user) return null; // Should not happen due to redirect
 
   // In a real app we might have an 'admins' table, but for now we'll use user metadata or email
   const adminName = user.user_metadata?.name || "Administrator";
+  const navItems = [
+    { href: "/admin", label: "Dashboard" },
+    { href: "/admin/students", label: "Students" },
+    { href: "/admin/companies", label: "Companies" },
+    { href: "/admin/seat-allocation", label: "Seat Allocation" },
+    { href: "/admin/messages", label: "Broadcasts" },
+    { href: "/admin/settings", label: "Settings" }
+  ];
 
   return (
     <BespokeLayout>
       <DashboardHeader
-        role={role as any}
+        role={role}
         userName={adminName}
         userEmail={user.email}
         avatarUrl={user.user_metadata?.avatar_url}
         homeUrl="/admin"
         messagesUrl="/admin/messages"
+        mobileNavItems={navItems}
       />
       <div className="flex flex-1 overflow-hidden">
         <AdminSidebar />
-        <main className="flex-1 overflow-y-auto bg-neutral-50/30 p-8">
-          <div className="max-w-7xl mx-auto space-y-8">{children}</div>
+        <main className="flex-1 overflow-y-auto bg-neutral-50/30 py-4 px-0 sm:py-6 sm:px-6 lg:py-8 lg:px-8">
+          <div className="max-w-none sm:max-w-7xl mx-0 sm:mx-auto space-y-8">{children}</div>
         </main>
       </div>
     </BespokeLayout>

app/admin/seat-allocation/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { SeatAllocationPage } from "@/components/admin/seat-allocation-page";
+
+export const metadata: Metadata = {
+  title: "Seat Allocation | PlacePro Admin",
+  description: "Run and publish seat allocation sessions for labs and students."
+};
+
+export default function AdminSeatAllocationRoute() {
+  return <SeatAllocationPage />;
+}

app/admin/settings/page.tsx

@@ -174,7 +174,7 @@ export default function AdminSettingsPage() {
     const isSuperAdmin = role === "super_admin";
 
     return (
-        <div className="max-w-6xl mx-auto pb-20">
+        <div className="max-w-none sm:max-w-6xl mx-0 sm:mx-auto pb-20 px-0 sm:px-0">
             <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
                 <div>
                     <h1 className="text-3xl font-bold tracking-tight text-neutral-900">System Control</h1>
@@ -188,26 +188,29 @@ export default function AdminSettingsPage() {
             </div>
 
             <Tabs defaultValue="profile" className="w-full space-y-8">
-                <TabsList className="bg-neutral-100/50 p-1 border-2 border-black rounded-lg w-fit">
+                <TabsList className="bg-neutral-100/50 p-1 border-2 border-black rounded-lg w-full flex flex-wrap gap-2 sm:w-fit">
                     <TabsTrigger
                         value="profile"
-                        className="data-[state=active]:bg-black data-[state=active]:text-white font-bold px-6 py-2 rounded-md transition-all"
+                        activeIndicatorClassName="bg-black shadow-none"
+                        className="data-[state=active]:text-white font-bold px-4 py-2 rounded-md transition-all w-full sm:w-auto"
                     >
                         <UserIcon className="w-4 h-4 mr-2" />
                         Admin Profile
                     </TabsTrigger>
                     {isSuperAdmin && (
                         <TabsTrigger
                             value="admins"
-                            className="data-[state=active]:bg-black data-[state=active]:text-white font-bold px-6 py-2 rounded-md transition-all"
+                            activeIndicatorClassName="bg-black shadow-none"
+                            className="data-[state=active]:text-white font-bold px-4 py-2 rounded-md transition-all w-full sm:w-auto"
                         >
                             <ShieldCheck className="w-4 h-4 mr-2" />
                             User Management
                         </TabsTrigger>
                     )}
                     <TabsTrigger
                         value="security"
-                        className="data-[state=active]:bg-black data-[state=active]:text-white font-bold px-6 py-2 rounded-md transition-all"
+                        activeIndicatorClassName="bg-black shadow-none"
+                        className="data-[state=active]:text-white font-bold px-4 py-2 rounded-md transition-all w-full sm:w-auto"
                     >
                         <Lock className="w-4 h-4 mr-2" />
                         Security
@@ -306,22 +309,22 @@ export default function AdminSettingsPage() {
                                 <CardDescription>Manage password and authentication tokens.</CardDescription>
                             </CardHeader>
                             <CardContent className="pt-6 space-y-6">
-                                <div className="flex items-center justify-between p-5 border rounded-2xl bg-neutral-50/50 border-dashed border-neutral-300">
+                                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-5 border rounded-2xl bg-neutral-50/50 border-dashed border-neutral-300">
                                     <div className="space-y-1">
                                         <p className="text-sm font-bold text-neutral-900">Admin Password Reset</p>
                                         <p className="text-xs text-neutral-500 font-medium">Sends a secure 1-time link to {user?.email}</p>
                                     </div>
                                     <Button
                                         variant="outline"
-                                        className="border-black font-bold h-10 px-6 active:translate-y-0.5 transition-all hover:bg-black hover:text-white"
+                                        className="border-black font-bold h-10 px-6 active:translate-y-0.5 transition-all hover:bg-black hover:text-white w-full sm:w-auto"
                                         onClick={handleResetPassword}
                                         disabled={isResetting}
                                     >
                                         {isResetting ? "Processing..." : "Initiate Reset"}
                                     </Button>
                                 </div>
 
-                                <div className="flex items-center justify-between p-5 border rounded-2xl bg-neutral-50/50 border-dashed border-neutral-300 opacity-60 grayscale cursor-not-allowed">
+                                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-5 border rounded-2xl bg-neutral-50/50 border-dashed border-neutral-300 opacity-60 grayscale cursor-not-allowed">
                                     <div className="space-y-1">
                                         <p className="text-sm font-bold text-neutral-900">Multi-Factor Auth (MFA)</p>
                                         <p className="text-xs text-neutral-500 font-medium">Add an extra layer of security via Authenticator app.</p>
@@ -337,12 +340,12 @@ export default function AdminSettingsPage() {
                                 <h4 className="font-bold text-sm uppercase tracking-wider">Danger Zone</h4>
                             </div>
                             <Separator className="bg-red-200" />
-                            <div className="flex items-center justify-between">
+                            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                 <div className="space-y-1">
                                     <p className="text-sm font-bold text-red-900">Sign out from all devices</p>
                                     <p className="text-xs text-red-600 font-medium">This will terminate all active administrative sessions.</p>
                                 </div>
-                                <Button variant="destructive" className="font-bold h-9 bg-red-600 hover:bg-red-700">
+                                <Button variant="destructive" className="font-bold h-9 bg-red-600 hover:bg-red-700 w-full sm:w-auto">
                                     Logout All
                                 </Button>
                             </div>

app/api/auth/login/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { createClient as createServerClient } from "@/lib/supabase/server";
+import type { UserRole } from "@/types/database.types";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const loginSchema = z.object({
+  email: z.string().email("Please enter a valid email address."),
+  password: z.string().min(1, "Password is required.")
+});
+
+const isAdminRole = (role: UserRole | null) => role === "admin" || role === "super_admin";
+
+export async function POST(request: Request) {
+  const body = (await request.json().catch(() => null)) as unknown;
+  const parsed = loginSchema.safeParse(body);
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: parsed.error.issues[0]?.message ?? "Invalid login payload."
+      },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const supabase = await createServerClient();
+    const { email, password } = parsed.data;
+
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password
+    });
+
+    if (error || !data.user) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: error?.message ?? "Invalid login credentials."
+        },
+        { status: 401 }
+      );
+    }
+
+    const { data: roleRow, error: roleError } = await supabase
+      .from("user_roles")
+      .select("role, is_active")
+      .eq("user_id", data.user.id)
+      .maybeSingle();
+
+    if (roleError || !roleRow || !roleRow.is_active) {
+      await supabase.auth.signOut();
+
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Your account is inactive or role is missing."
+        },
+        { status: 403 }
+      );
+    }
+
+    const role = roleRow.role as UserRole;
+
+    return NextResponse.json(
+      {
+        success: true,
+        role,
+        redirectTo: isAdminRole(role) ? "/admin/students" : "/student/dashboard"
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unable to sign in.";
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: message
+      },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -107,6 +107,17 @@
     flex-direction: column;
 }
 
+@media (max-width: 640px) {
+    .bespoke-frame {
+        border-left: 0;
+        border-right: 0;
+        max-width: 100%;
+        margin: 0;
+        height: auto;
+        overflow: visible;
+    }
+}
+
 .nav-line {
     border-bottom: 2px solid #000;
 }
@@ -241,4 +252,4 @@
 
 .hover-logo-3d {
     perspective: 1000px;
-}
+}

app/page.tsx

@@ -71,15 +71,15 @@ export default function LandingPage() {
 
   return (
     <div className="min-h-screen w-full bg-white flex justify-center selection:bg-black selection:text-white">
-      <div className="flex w-full max-w-7xl border-x-2 border-black relative text-black bg-white font-sans antialiased overflow-x-hidden">
+      <div className="flex w-full max-w-none sm:max-w-7xl border-x-0 sm:border-x-2 border-black relative text-black bg-white font-sans antialiased overflow-x-hidden">
 
         {/* Decorative Sidebars */}
         <div className="hidden lg:block w-[64px] border-r-2 border-black dot-matrix-pattern relative shrink-0" />
 
         <div className="flex-1 flex flex-col relative technical-grid bg-white">
           <LandingNavbar />
 
-          <main className="flex-1 flex flex-col items-center relative z-10 px-4">
+          <main className="flex-1 flex flex-col items-center relative z-10 px-0 sm:px-4">
             <LandingHero />
             <InstitutionalArchitecture />
           </main>

app/student/companies/[id]/page.tsx

@@ -162,7 +162,7 @@ export default function CompanyDetailPage() {
                 <Skeleton className="h-10 w-32" />
                 <div className="space-y-4">
                     <Skeleton className="h-40 w-full rounded-xl" />
-                    <div className="grid grid-cols-3 gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                         <Skeleton className="h-96 col-span-2 rounded-xl" />
                         <Skeleton className="h-96 col-span-1 rounded-xl" />
                     </div>
@@ -177,7 +177,7 @@ export default function CompanyDetailPage() {
         <div className="min-h-screen bg-neutral-50/50 pb-20 font-sans">
             {/* Clean Header */}
             <div className="bg-white border-b border-neutral-200">
-                <div className="max-w-6xl mx-auto px-6 py-8">
+                <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
                     <div className="mb-6">
                         <Link href="/student/companies">
                             <Button variant="ghost" size="sm" className="pl-0 text-neutral-500 hover:text-black gap-2">
@@ -265,7 +265,7 @@ export default function CompanyDetailPage() {
                 </div>
             </div>
 
-            <div className="max-w-6xl mx-auto px-6 py-8">
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
 
                     {/* Left Column: Information */}
@@ -303,17 +303,17 @@ export default function CompanyDetailPage() {
 
                         {/* Eligibility Breakdown */}
                         <div className="card-border bg-white rounded-lg overflow-hidden">
-                            <div className="px-6 py-4 border-b border-neutral-100">
+                            <div className="px-4 sm:px-6 py-4 border-b border-neutral-100">
                                 <h2 className="text-lg font-semibold text-neutral-900">Eligibility Criteria</h2>
                             </div>
                             <div className="overflow-x-auto">
-                                <table className="w-full text-left text-sm">
+                                <table className="min-w-[720px] w-full text-left text-sm">
                                     <thead className="bg-neutral-50 text-neutral-500">
                                         <tr>
-                                            <th className="px-6 py-3 font-medium text-xs uppercase tracking-wide">Criteria</th>
-                                            <th className="px-6 py-3 font-medium text-xs uppercase tracking-wide">Required</th>
-                                            <th className="px-6 py-3 font-medium text-xs uppercase tracking-wide">Your Profile</th>
-                                            <th className="px-6 py-3 font-medium text-xs uppercase tracking-wide text-right">Status</th>
+                                            <th className="px-4 sm:px-6 py-3 font-medium text-xs uppercase tracking-wide">Criteria</th>
+                                            <th className="px-4 sm:px-6 py-3 font-medium text-xs uppercase tracking-wide">Required</th>
+                                            <th className="px-4 sm:px-6 py-3 font-medium text-xs uppercase tracking-wide">Your Profile</th>
+                                            <th className="px-4 sm:px-6 py-3 font-medium text-xs uppercase tracking-wide text-right">Status</th>
                                         </tr>
                                     </thead>
                                     <tbody className="divide-y divide-neutral-100">
@@ -326,10 +326,10 @@ export default function CompanyDetailPage() {
                                             { label: "Profile Status", req: "Complete", val: student.profile_complete ? "Complete" : "Incomplete", pass: !!student.profile_complete }
                                         ].map((row, i) => (
                                             <tr key={i} className="hover:bg-neutral-50/50">
-                                                <td className="px-6 py-4 font-medium text-neutral-900">{row.label}</td>
-                                                <td className="px-6 py-4 text-neutral-600">{row.req}</td>
-                                                <td className="px-6 py-4 text-neutral-600">{row.val}</td>
-                                                <td className="px-6 py-4 text-right">
+                                                <td className="px-4 sm:px-6 py-4 font-medium text-neutral-900">{row.label}</td>
+                                                <td className="px-4 sm:px-6 py-4 text-neutral-600">{row.req}</td>
+                                                <td className="px-4 sm:px-6 py-4 text-neutral-600">{row.val}</td>
+                                                <td className="px-4 sm:px-6 py-4 text-right">
                                                     {row.pass ?
                                                         <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-100 text-[10px] font-medium px-2 py-0.5 rounded-md">
                                                             Qualified

app/student/companies/page.tsx

@@ -175,7 +175,7 @@ export default function StudentCompaniesPage() {
                                         </div>
                                     </div>
 
-                                    <div className="flex items-center justify-between md:justify-end gap-6 pl-[4.5rem] md:pl-0">
+                                    <div className="flex items-center justify-between md:justify-end gap-6 pl-0 md:pl-[4.5rem]">
                                         <div className="flex flex-col items-start md:items-end gap-1.5">
                                             <div className="flex items-center gap-1.5 text-xs font-medium text-neutral-600">
                                                 <span className="bg-neutral-50 px-2.5 py-1 rounded-md text-[11px] border border-neutral-100 font-semibold text-neutral-700">