Sponsors 1

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

@@ -3,6 +3,7 @@
 import {
   Calendar,
   ClipboardList,
+  Handshake,
   ScanLine,
   Settings,
   Star,
@@ -51,6 +52,11 @@ const eventNav = [
     url: "/admin/schedule",
     icon: Calendar,
   },
+  {
+    name: "Sponsors",
+    url: "/admin/sponsors",
+    icon: Handshake,
+  },
 ];
 
 const superAdminNav = [

client/web/src/pages/admin/index.ts

@@ -2,3 +2,4 @@ export { default as AllApplicantsPage } from "./all-applicants/AllApplicantsPage
 export { default as ReviewsPage } from "./reviews/ReviewsPage";
 export { default as ScansPage } from "./scans/ScansPage";
 export { default as SchedulePage } from "./schedule/SchedulePage";
+export { default as SponsorsPage } from "./sponsors/SponsorsPage";

client/web/src/pages/admin/sponsors/SponsorsPage.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { SponsorsTable } from "./components/SponsorsTable";
+import { useSponsorsStore } from "./store";
+
+export default function SponsorsPage() {
+  const {
+    sponsors,
+    loading,
+    saving,
+    fetch: fetchSponsors,
+    createSponsor,
+    updateSponsor,
+    deleteSponsor,
+    uploadLogo,
+  } = useSponsorsStore();
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchSponsors(controller.signal);
+    return () => controller.abort();
+  }, [fetchSponsors]);
+
+  if (loading && sponsors.length === 0) {
+    return (
+      <div className="space-y-6 overflow-auto">
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-32" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <Skeleton key={i} className="h-14 w-full" />
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <SponsorsTable
+        sponsors={sponsors}
+        saving={saving}
+        onCreateSponsor={createSponsor}
+        onUpdateSponsor={updateSponsor}
+        onDeleteSponsor={deleteSponsor}
+        onUploadLogo={uploadLogo}
+      />
+    </div>
+  );
+}

client/web/src/pages/admin/sponsors/api.ts

@@ -0,0 +1,56 @@
+import {
+  deleteRequest,
+  getRequest,
+  postRequest,
+  putRequest,
+} from "@/shared/lib/api";
+import type { ApiResponse } from "@/types";
+
+import type { Sponsor, SponsorListResponse, SponsorPayload } from "./types";
+
+export async function fetchSponsors(
+  signal?: AbortSignal,
+): Promise<ApiResponse<SponsorListResponse>> {
+  return getRequest<SponsorListResponse>("/admin/sponsors", "sponsors", signal);
+}
+
+export async function createSponsor(
+  payload: SponsorPayload,
+  signal?: AbortSignal,
+): Promise<ApiResponse<Sponsor>> {
+  return postRequest<Sponsor>("/admin/sponsors", payload, "sponsor", signal);
+}
+
+export async function updateSponsor(
+  id: string,
+  payload: SponsorPayload,
+  signal?: AbortSignal,
+): Promise<ApiResponse<Sponsor>> {
+  return putRequest<Sponsor>(
+    `/admin/sponsors/${id}`,
+    payload,
+    "sponsor",
+    signal,
+  );
+}
+
+export async function deleteSponsor(
+  id: string,
+  signal?: AbortSignal,
+): Promise<ApiResponse<unknown>> {
+  return deleteRequest<unknown>(`/admin/sponsors/${id}`, "sponsor", signal);
+}
+
+export async function uploadSponsorLogo(
+  sponsorId: string,
+  logoData: string,
+  contentType: string,
+  signal?: AbortSignal,
+): Promise<ApiResponse<Sponsor>> {
+  return putRequest<Sponsor>(
+    `/admin/sponsors/${sponsorId}/logo`,
+    { logo_data: logoData, content_type: contentType },
+    "sponsor logo",
+    signal,
+  );
+}