Feat/reviews

client/web/src/pages/admin/_shared/AppSidebar.tsx

@@ -5,7 +5,6 @@ import {
   CircleCheck,
   CircleHelp,
   ClipboardList,
-  Mail,
   ScanLine,
   Settings,
   Star,
@@ -67,6 +66,11 @@ const eventNav = [
 ];
 
 const superAdminNav = [
+  {
+    name: "Reviews",
+    url: "/admin/sa/reviews",
+    icon: Star,
+  },
   {
     name: "User Management",
     url: "/admin/sa/user-management",
@@ -77,16 +81,6 @@ const superAdminNav = [
     url: "/admin/sa/application",
     icon: ClipboardList,
   },
-  {
-    name: "Reviews",
-    url: "/admin/sa/reviews",
-    icon: Star,
-  },
-  {
-    name: "Emails",
-    url: "/admin/sa/emails",
-    icon: Mail,
-  },
 ];
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

client/web/src/pages/admin/all-applicants/AllApplicantsPage.tsx

@@ -59,11 +59,10 @@ export default function AllApplicantsPage() {
     const timer = setTimeout(() => {
       fetchApplications({
         search: searchInput.length >= 2 ? searchInput : "",
-        status: currentStatus,
       });
     }, 500);
     return () => clearTimeout(timer);
-  }, [searchInput, fetchApplications, currentStatus]);
+  }, [searchInput, fetchApplications]);
 
   const handleClosePanel = useCallback(() => {
     setSelectedApplicationId(null);
@@ -152,6 +151,7 @@ export default function AllApplicantsPage() {
               {currentSearch && <span>matching "{currentSearch}"</span>}
             </CardDescription>
           </CardHeader>
+          <hr className="border-border -mb-2" />
           <CardContent className="p-0 flex-1 overflow-auto">
             <ApplicationsTable
               applications={applications}

client/web/src/pages/admin/all-applicants/api.ts

@@ -33,6 +33,10 @@ export async function fetchApplications(
     queryParams.set("search", params.search);
   }
 
+  if (params?.sort_by) {
+    queryParams.set("sort_by", params.sort_by);
+  }
+
   const queryString = queryParams.toString();
   const endpoint = `/admin/applications${queryString ? `?${queryString}` : ""}`;
 

client/web/src/pages/admin/all-applicants/components/ApplicationDetailPanel.tsx

@@ -1,10 +1,15 @@
-import { X } from "lucide-react";
+import { ClipboardPen, X } from "lucide-react";
 import { memo } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { Application } from "@/types";
 
 import { formatName, getStatusColor } from "../utils";
@@ -23,15 +28,17 @@ interface ApplicationDetailPanelProps {
   application: Application | null;
   loading: boolean;
   onClose: () => void;
+  onGrade?: () => void;
 }
 
 export const ApplicationDetailPanel = memo(function ApplicationDetailPanel({
   application,
   loading,
   onClose,
+  onGrade,
 }: ApplicationDetailPanelProps) {
   return (
-    <Card className="w-1/2 shrink-0 rounded-l-none border-l-0 flex flex-col max-h-[calc(100vh-180px)] py-0! gap-0!">
+    <Card className="w-1/2 shrink-0 rounded-l-none border-l-0 flex flex-col h-full py-0! gap-0!">
       <div className="flex items-center justify-between shrink-0 bg-gray-50 border-b px-4 py-3 rounded-tr-xl">
         <div className="flex items-center gap-2">
           {loading ? (
@@ -47,14 +54,31 @@ export const ApplicationDetailPanel = memo(function ApplicationDetailPanel({
             </>
           ) : null}
         </div>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="cursor-pointer"
-          onClick={onClose}
-        >
-          <X className="h-4 w-4" />
-        </Button>
+        <div className="flex items-center gap-1">
+          {onGrade && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="cursor-pointer"
+                  onClick={onGrade}
+                >
+                  <ClipboardPen className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Grade applicant</TooltipContent>
+            </Tooltip>
+          )}
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="cursor-pointer"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
       <CardContent className="flex-1 overflow-auto py-4">
         {loading ? (

client/web/src/pages/admin/all-applicants/components/StatusFilterTabs.tsx

@@ -33,7 +33,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="all"
           disabled={loading}
-          className="font-normal cursor-pointer rounded-sm"
+          className="font-light cursor-pointer rounded-sm"
         >
           All
           {stats && (
@@ -45,7 +45,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="draft"
           disabled={loading}
-          className="font-normal cursor-pointer"
+          className="font-light cursor-pointer"
         >
           Draft
           {stats && stats.draft > 0 && (
@@ -57,7 +57,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="submitted"
           disabled={loading}
-          className="font-normal cursor-pointer"
+          className="font-light cursor-pointer"
         >
           Submitted
           {stats && stats.submitted > 0 && (
@@ -69,7 +69,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="accepted"
           disabled={loading}
-          className="font-normal cursor-pointer"
+          className="font-light cursor-pointer"
         >
           Accepted
           {stats && stats.accepted > 0 && (
@@ -81,7 +81,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="waitlisted"
           disabled={loading}
-          className="font-normal cursor-pointer"
+          className="font-light cursor-pointer"
         >
           Waitlisted
           {stats && stats.waitlisted > 0 && (
@@ -93,7 +93,7 @@ export const StatusFilterTabs = memo(function StatusFilterTabs({
         <TabsTrigger
           value="rejected"
           disabled={loading}
-          className="font-normal cursor-pointer"
+          className="font-light cursor-pointer"
         >
           Rejected
           {stats && stats.rejected > 0 && (

client/web/src/pages/admin/all-applicants/types.ts

@@ -24,6 +24,11 @@ export interface ApplicationListItem {
   created_at: string;
   updated_at: string;
   ai_percent: number | null;
+  accept_votes: number;
+  reject_votes: number;
+  waitlist_votes: number;
+  reviews_assigned: number;
+  reviews_completed: number;
 }
 
 export interface ApplicationListResult {
@@ -43,9 +48,16 @@ export interface ApplicationStats {
   acceptance_rate: number;
 }
 
+export type ApplicationSortBy =
+  | "created_at"
+  | "accept_votes"
+  | "reject_votes"
+  | "waitlist_votes";
+
 export interface FetchParams {
   cursor?: string;
   status?: ApplicationStatus | null;
   direction?: "forward" | "backward";
   search?: string;
+  sort_by?: ApplicationSortBy;
 }