Random UI fixes

package.json

@@ -25,6 +25,7 @@
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@shadcn/ui": "^0.0.4",
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
@@ -44,6 +45,7 @@
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.9.6",
         "recharts": "^2.15.4",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
         "vercel": "^25.2.0",

src/app/api/years/route.ts

@@ -0,0 +1,23 @@
+import { sql } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { yearlySchoolParticipation } from "@/lib/schema";
+
+export async function GET() {
+    try {
+        // Get distinct years that have data in yearlySchoolParticipation
+        const yearsWithData = await db
+            .selectDistinct({ year: yearlySchoolParticipation.year })
+            .from(yearlySchoolParticipation);
+
+        // Convert to a Set for O(1) lookup
+        const yearsSet = new Set(yearsWithData.map((row) => row.year));
+
+        return NextResponse.json({ yearsWithData: Array.from(yearsSet) });
+    } catch (error) {
+        return NextResponse.json(
+            { error: "Failed to fetch years with data" },
+            { status: 500 },
+        );
+    }
+}

src/app/globals.css

@@ -71,7 +71,7 @@
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    --primary: oklch(0.4878 0.2432 264.4);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);

src/app/graphs/loading.tsx

@@ -0,0 +1,5 @@
+import { GraphsPageSkeleton } from "@/components/skeletons/GraphsPageSkeleton";
+
+export default function Loading() {
+    return <GraphsPageSkeleton />;
+}