v1.5.0

app/admin/cycles/[id]/cycle-dashboard.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import AdminDashboard from '@/components/AdminDashboard';
+import NominationsManager from '@/components/NominationsManager';
+import SettingsForm from '@/app/admin/settings/settings-form';
+import { EndorsementsView } from './endorsements-view';
+import { Settings } from '@/lib/data/settings';
+import { Endorsement, Nomination, Application } from '@prisma/client';
+
+type NominationWithCommunity = Nomination & {
+  communityConstituency: { name: string } | null;
+};
+
+type ApplicationWithCount = Application & {
+  nominationCount: number;
+  endorsementCount: number;
+  communityConstituency: { name: string } | null;
+};
+
+type ApplicationWithNominations = Application & {
+  nominations: NominationWithCommunity[];
+  endorsements: Endorsement[];
+  nominationCount: number;
+  communityConstituency: { name: string } | null;
+};
+
+interface CycleDashboardCycle {
+  id: string;
+  name: string;
+  isActive: boolean;
+}
+
+interface CycleDashboardProps {
+  cycle: CycleDashboardCycle;
+  applications: ApplicationWithCount[];
+  getApplicationDetails: (id: string) => Promise<ApplicationWithNominations | null>;
+  nominations: NominationWithCommunity[];
+  endorsements: Endorsement[];
+  settings: Settings | null;
+}
+
+export function CycleDashboard({
+  cycle,
+  applications,
+  getApplicationDetails,
+  nominations,
+  endorsements,
+  settings,
+}: CycleDashboardProps) {
+  const defaultSettings: Settings = settings ?? {
+    id: '',
+    requiredNominations: 15,
+    maxCommunityNominations: 7,
+    endorsementRequired: false,
+    endorsementsOpen: true,
+    applicationDeadline: null,
+    applicationsOpen: true,
+    nominationsOpen: true,
+    customMessage: null,
+    cycleId: cycle.id,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+
+  return (
+    <div className="container max-w-[1600px] mx-auto py-3 sm:py-6 px-3 sm:px-4">
+      {/* Header */}
+      <div className="mb-6">
+        <Link
+          href="/admin/cycles"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
+        >
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Cycle Archive
+        </Link>
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">{cycle.name}</h1>
+          <Badge variant={cycle.isActive ? 'success' : 'secondary'}>
+            {cycle.isActive ? 'Active' : 'Inactive'}
+          </Badge>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="applications">
+        <TabsList className="mb-6 w-full">
+          <TabsTrigger value="applications">Applications</TabsTrigger>
+          <TabsTrigger value="nominations">Nominations</TabsTrigger>
+          <TabsTrigger value="endorsements">Endorsements</TabsTrigger>
+          {settings !== null && (
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          )}
+        </TabsList>
+
+        <TabsContent value="applications">
+          <AdminDashboard
+            applications={applications}
+            getApplicationDetails={getApplicationDetails}
+            settings={defaultSettings}
+          />
+        </TabsContent>
+
+        <TabsContent value="nominations">
+          <NominationsManager
+            nominations={nominations}
+            settings={defaultSettings}
+          />
+        </TabsContent>
+
+        <TabsContent value="endorsements">
+          <EndorsementsView endorsements={endorsements} />
+        </TabsContent>
+
+        {settings !== null && (
+          <TabsContent value="settings">
+            <SettingsForm settings={settings} readOnly />
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  );
+}

app/admin/cycles/[id]/endorsements-view.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { Endorsement } from '@prisma/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+interface EndorsementsViewProps {
+  endorsements: Endorsement[];
+}
+
+export function EndorsementsView({ endorsements }: EndorsementsViewProps) {
+  return (
+    <div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Endorsements ({endorsements.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {endorsements.length === 0 ? (
+            <p className="text-muted-foreground text-center py-8">
+              No endorsements for this cycle.
+            </p>
+          ) : (
+            <div className="overflow-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Applicant</TableHead>
+                    <TableHead>Endorser</TableHead>
+                    <TableHead>Endorser Email</TableHead>
+                    <TableHead>Defining Traits</TableHead>
+                    <TableHead>Leadership Qualities</TableHead>
+                    <TableHead>Areas for Development</TableHead>
+                    <TableHead>Submitted</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {endorsements.map((endorsement) => (
+                    <TableRow key={endorsement.id}>
+                      <TableCell className="font-medium">
+                        {endorsement.applicantName}
+                      </TableCell>
+                      <TableCell>{endorsement.endorserName}</TableCell>
+                      <TableCell className="text-muted-foreground text-sm">
+                        {endorsement.endorserEmail}
+                      </TableCell>
+                      <TableCell className="max-w-[200px] truncate text-sm">
+                        {endorsement.definingTraits}
+                      </TableCell>
+                      <TableCell className="max-w-[200px] truncate text-sm">
+                        {endorsement.leadershipQualities}
+                      </TableCell>
+                      <TableCell className="max-w-[200px] truncate text-sm">
+                        {endorsement.areasForDevelopment}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground text-sm">
+                        {new Date(endorsement.createdAt).toLocaleDateString()}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/admin/cycles/[id]/page.tsx

@@ -0,0 +1,52 @@
+import { notFound, redirect } from 'next/navigation';
+import { createClient } from '@/lib/supabase/server';
+import { getCycleById } from '@/lib/data/cycles';
+import {
+  getApplicationsWithNominationCountsByCycleId,
+  getApplicationWithNominationsByCycleId,
+} from '@/lib/data/applications';
+import { getNominationsByCycleId } from '@/lib/data/nominations';
+import { getEndorsementsByCycleId } from '@/lib/data/endorsements';
+import { getSettingsByCycleId } from '@/lib/data/settings';
+import { CycleDashboard } from './cycle-dashboard';
+
+interface CyclePageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function CyclePage({ params }: CyclePageProps) {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect('/login');
+  }
+
+  const { id } = await params;
+
+  const cycle = await getCycleById(id);
+
+  if (!cycle) {
+    notFound();
+  }
+
+  const [applications, nominations, endorsements, settings] = await Promise.all([
+    getApplicationsWithNominationCountsByCycleId(id),
+    getNominationsByCycleId(id),
+    getEndorsementsByCycleId(id),
+    getSettingsByCycleId(id),
+  ]);
+
+  return (
+    <CycleDashboard
+      cycle={cycle}
+      applications={applications}
+      getApplicationDetails={getApplicationWithNominationsByCycleId.bind(null, id)}
+      nominations={nominations}
+      endorsements={endorsements}
+      settings={settings}
+    />
+  );
+}

app/admin/cycles/create-cycle-modal.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import { createCycle } from '@/lib/actions/cycles';
+import { isActionError } from '@/lib/actions/utils';
+
+const createCycleSchema = z.object({
+  name: z.string().min(1, 'Cycle name is required'),
+});
+
+type CreateCycleFormData = z.infer<typeof createCycleSchema>;
+
+interface CreateCycleModalProps {
+  onClose: () => void;
+}
+
+export function CreateCycleModal({ onClose }: CreateCycleModalProps) {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<CreateCycleFormData>({
+    resolver: zodResolver(createCycleSchema),
+  });
+
+  const handleCreate = (setActive: boolean) =>
+    handleSubmit(async (data) => {
+      const result = await createCycle(data.name, setActive);
+      if (isActionError(result)) {
+        setError('root', { message: result.error });
+      } else {
+        toast.success(
+          setActive
+            ? `Cycle "${data.name}" created and set as active`
+            : `Cycle "${data.name}" created`
+        );
+        onClose();
+      }
+    });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <Card className="w-full max-w-md mx-4">
+        <CardHeader>
+          <CardTitle>Create New Cycle</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {errors.root && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{errors.root.message}</AlertDescription>
+            </Alert>
+          )}
+          <div>
+            <Label htmlFor="cycle-name">Cycle Name</Label>
+            <Input
+              id="cycle-name"
+              {...register('name')}
+              placeholder="e.g. Fall 2025"
+              disabled={isSubmitting}
+              autoFocus
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive mt-1">{errors.name.message}</p>
+            )}
+          </div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+            <Button type="button" variant="outline" onClick={onClose} disabled={isSubmitting}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCreate(false)}
+              disabled={isSubmitting}
+            >
+              Create as Inactive
+            </Button>
+            <Button type="button" onClick={handleCreate(true)} disabled={isSubmitting}>
+              Create & Set Active
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}