From 31628f5f6ed8806740d4dcf330eba4048ae4cbbf Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 13:47:12 +0000
Subject: [PATCH 1/8] ref: tailwind colours -> shadcn colours

---
 src/app/graphs/page.tsx                    | 48 +++++++++++-----------
 src/app/schools/[name]/page.tsx            | 26 ++++++------
 src/app/schools/page.tsx                   |  2 +-
 src/components/Breadcrumbs.tsx             |  6 +--
 src/components/Calendar.tsx                |  6 +--
 src/components/Checkbox.tsx                |  4 +-
 src/components/Dashboard.tsx               |  6 +--
 src/components/DataTableSchools.tsx        |  8 ++--
 src/components/FileUpload.tsx              |  4 +-
 src/components/GraphFilters.tsx            | 14 +++----
 src/components/InputField.tsx              | 10 ++---
 src/components/SchoolSearchbar.tsx         |  4 +-
 src/components/Sidebar.tsx                 | 18 ++++----
 src/components/Slider.tsx                  | 10 ++---
 src/components/SpreadsheetConfirmation.tsx |  2 +-
 src/components/SpreadsheetPreview.tsx      |  8 ++--
 src/components/SpreadsheetPreviewFail.tsx  |  6 +--
 src/components/SpreadsheetState.tsx        |  4 +-
 src/components/SpreadsheetStatusBar.tsx    |  4 +-
 src/components/Tooltip.tsx                 |  4 +-
 src/components/YearDropdown.tsx            |  2 +-
 src/components/ui/table.tsx                |  4 +-
 22 files changed, 100 insertions(+), 100 deletions(-)

diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index f466709..71baf84 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -310,9 +310,9 @@ export default function GraphsPage() {
     ).sort();
 
     return (
-        <div className="w-full min-h-screen flex bg-white">
+        <div className="w-full min-h-screen flex bg-background">
             {/* Left Sidebar - Filter Panel */}
-            <div className="flex flex-col border-r border-gray-200 p-8 bg-[#FCFCFC] w-70 h-screen overflow-y-auto sticky top-0 gap-12">
+            <div className="flex flex-col border-r border-border p-8 bg-card w-70 h-screen overflow-y-auto sticky top-0 gap-12">
                 <Breadcrumbs />
                 <GraphFilters
                     schools={schools}
@@ -324,18 +324,18 @@ export default function GraphsPage() {
             {/* Main Content Area */}
             <div className="flex-1 flex flex-col h-screen overflow-hidden">
                 {loading ? (
-                    <p className="text-xl text-gray-500 mt-20 text-center">
+                    <p className="text-xl text-muted-foreground mt-20 text-center">
                         Loading project data...
                     </p>
                 ) : (
                     <div className="flex flex-col gap-4 h-full overflow-hidden">
                         {/* Header */}
-                        <div className="flex items-center justify-between px-8 pt-4 flex-shrink-0">
-                            <h1 className="text-xl font-semibold text-gray-900">
+                        <div className="flex items-center justify-between px-8 pt-4 shrink-0">
+                            <h1 className="text-xl font-semibold text-foreground">
                                 Projects by {groupByLabels[filters.groupBy]}
                             </h1>
                             <div className="flex gap-3">
-                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-card border border-border rounded-md hover:bg-accent">
                                     <svg
                                         className="w-4 h-4"
                                         fill="none"
@@ -351,7 +351,7 @@ export default function GraphsPage() {
                                     </svg>
                                     Export
                                 </button>
-                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-card border border-border rounded-md hover:bg-accent">
                                     <svg
                                         className="w-4 h-4"
                                         fill="none"
@@ -371,14 +371,14 @@ export default function GraphsPage() {
                         </div>
 
                         {/* Chart Controls */}
-                        <div className="flex items-center justify-between px-8 py-3 flex-shrink-0">
+                        <div className="flex items-center justify-between px-8 py-3 shrink-0">
                             <div className="flex items-center">
                                 <button
                                     onClick={() => setChartType("line")}
                                     className={`px-4 py-2 text-sm font-medium rounded-l-md ${
                                         chartType === "line"
-                                            ? "text-blue-600 bg-blue-50 border border-blue-300 z-10"
-                                            : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
+                                            ? "text-primary bg-primary/10 border border-primary z-10"
+                                            : "text-foreground bg-card border border-border hover:bg-accent"
                                     }`}
                                 >
                                     <svg
@@ -400,8 +400,8 @@ export default function GraphsPage() {
                                     onClick={() => setChartType("bar")}
                                     className={`px-4 py-2 text-sm font-medium rounded-r-md -ml-px ${
                                         chartType === "bar"
-                                            ? "text-blue-600 bg-blue-50 border border-blue-300 z-10"
-                                            : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
+                                            ? "text-primary bg-primary/10 border border-primary z-10"
+                                            : "text-foreground bg-card border border-border hover:bg-accent"
                                     }`}
                                 >
                                     <svg
@@ -426,8 +426,8 @@ export default function GraphsPage() {
                                     onClick={() => setTimePeriod("3y")}
                                     className={`px-4 py-2 text-sm font-medium rounded-md ${
                                         timePeriod === "3y"
-                                            ? "text-blue-600 bg-blue-50 border border-blue-300"
-                                            : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
+                                            ? "text-primary bg-primary/10 border border-primary"
+                                            : "text-foreground bg-card border border-border hover:bg-accent"
                                     }`}
                                 >
                                     3y
@@ -436,8 +436,8 @@ export default function GraphsPage() {
                                     onClick={() => setTimePeriod("5y")}
                                     className={`px-4 py-2 text-sm font-medium rounded-md ${
                                         timePeriod === "5y"
-                                            ? "text-blue-600 bg-blue-50 border border-blue-300"
-                                            : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
+                                            ? "text-primary bg-primary/10 border border-primary"
+                                            : "text-foreground bg-card border border-border hover:bg-accent"
                                     }`}
                                 >
                                     5y
@@ -450,8 +450,8 @@ export default function GraphsPage() {
                                         <button
                                             className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md ${
                                                 timePeriod === "custom"
-                                                    ? "text-white bg-blue-600 hover:bg-blue-700"
-                                                    : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
+                                                    ? "text-primary-foreground bg-primary hover:bg-primary/90"
+                                                    : "text-foreground bg-card border border-border hover:bg-accent"
                                             }`}
                                         >
                                             <svg
@@ -491,7 +491,7 @@ export default function GraphsPage() {
                                             </h4>
                                             <div className="grid grid-cols-2 gap-4">
                                                 <div>
-                                                    <label className="text-xs text-gray-600 mb-1 block">
+                                                    <label className="text-xs text-muted-foreground mb-1 block">
                                                         Start Year
                                                     </label>
                                                     <input
@@ -509,13 +509,13 @@ export default function GraphsPage() {
                                                                     ) || 2020,
                                                             })
                                                         }
-                                                        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                                                        className="w-full px-3 py-2 border border-input rounded-md text-sm"
                                                         min="2000"
                                                         max={tempYearRange.end}
                                                     />
                                                 </div>
                                                 <div>
-                                                    <label className="text-xs text-gray-600 mb-1 block">
+                                                    <label className="text-xs text-muted-foreground mb-1 block">
                                                         End Year
                                                     </label>
                                                     <input
@@ -533,7 +533,7 @@ export default function GraphsPage() {
                                                                     ) || 2025,
                                                             })
                                                         }
-                                                        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                                                        className="w-full px-3 py-2 border border-input rounded-md text-sm"
                                                         min={
                                                             tempYearRange.start
                                                         }
@@ -571,7 +571,7 @@ export default function GraphsPage() {
                         </div>
 
                         {/* Chart Area */}
-                        <div className="flex-1 flex items-center justify-center px-8 bg-white overflow-auto">
+                        <div className="flex-1 flex items-center justify-center px-8 bg-background overflow-auto">
                             {chartType === "bar" ? (
                                 <BarGraph
                                     dataset={graphDataset}
@@ -592,7 +592,7 @@ export default function GraphsPage() {
                         </div>
 
                         {/* Footer */}
-                        <div className="flex flex-col justify-center items-end gap-3 px-8 pb-4 text-xs text-black flex-shrink-0">
+                        <div className="flex flex-col justify-center items-end gap-3 px-8 pb-4 text-xs text-foreground shrink-0">
                             <p className="font-medium">
                                 <span className="font-mono bg-gray/4 border rounded-sm border-gray/2 py-1 px-2">
                                     {Math.round(filteredProjectCount)}
diff --git a/src/app/schools/[name]/page.tsx b/src/app/schools/[name]/page.tsx
index c3fc7c7..60ceb4e 100644
--- a/src/app/schools/[name]/page.tsx
+++ b/src/app/schools/[name]/page.tsx
@@ -67,7 +67,7 @@ export default function SchoolProfilePage() {
     }
 
     return (
-        <div className="h-screen w-full bg-white overflow-y-auto flex justify-center">
+        <div className="h-screen w-full bg-background overflow-y-auto flex justify-center">
             <div className="w-full flex flex-col gap-8 py-8 max-w-5xl px-6">
                 <Breadcrumbs />
                 {/* Header with school name */}
@@ -112,12 +112,12 @@ export default function SchoolProfilePage() {
                 </div>
 
                 {/* Data table placeholder */}
-                <div className="border border-gray-200 rounded-lg p-6">
-                    <h2 className="text-xl font-semibold mb-4 text-gray-900">
+                <div className="border border-border rounded-lg p-6">
+                    <h2 className="text-xl font-semibold mb-4 text-foreground">
                         View and edit data
                     </h2>
-                    <div className="h-48 flex items-center justify-center bg-gray-50 rounded">
-                        <p className="text-sm text-gray-500">
+                    <div className="h-48 flex items-center justify-center bg-muted rounded">
+                        <p className="text-sm text-muted-foreground">
                             Data table placeholder
                         </p>
                     </div>
@@ -130,8 +130,8 @@ export default function SchoolProfilePage() {
 // Reusable stat card component
 function StatCard({ label, value }: { label: string; value: string }) {
     return (
-        <div className="flex flex-col items-center justify-center rounded-lg border border-gray-200 p-6 aspect-[247/138] gap-5">
-            <span className="text-sm text-gray-600">{label}</span>
+        <div className="flex flex-col items-center justify-center rounded-lg border border-border p-6 aspect-[247/138] gap-5">
+            <span className="text-sm text-muted-foreground">{label}</span>
             <span className="font-mono text-5xl font-bold leading-none">
                 {value}
             </span>
@@ -143,8 +143,8 @@ function StatCard({ label, value }: { label: string; value: string }) {
 function InfoRow({ label, value }: { label: string; value: string }) {
     return (
         <div>
-            <span className="font-semibold text-gray-900">{label}:</span>{" "}
-            <span className="text-gray-700">{value}</span>
+            <span className="font-semibold text-foreground">{label}:</span>{" "}
+            <span className="text-foreground">{value}</span>
         </div>
     );
 }
@@ -158,13 +158,13 @@ function PlaceholderCard({
     className?: string;
 }) {
     return (
-        <div className={`border border-gray-200 rounded-lg p-6 ${className}`}>
-            <div className="h-48 flex items-center justify-center bg-gray-50 rounded">
+        <div className={`border border-border rounded-lg p-6 ${className}`}>
+            <div className="h-48 flex items-center justify-center bg-muted rounded">
                 <div className="text-center">
-                    <p className="text-sm font-semibold text-gray-900">
+                    <p className="text-sm font-semibold text-foreground">
                         {title}
                     </p>
-                    <p className="text-sm text-gray-500 mt-2">
+                    <p className="text-sm text-muted-foreground mt-2">
                         Chart placeholder
                     </p>
                 </div>
diff --git a/src/app/schools/page.tsx b/src/app/schools/page.tsx
index 40e2b46..32b4b06 100644
--- a/src/app/schools/page.tsx
+++ b/src/app/schools/page.tsx
@@ -77,7 +77,7 @@ export default function SchoolsPage() {
 
                 <div className="mt-5 overflow-x-auto">
                     {error && (
-                        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700">
+                        <div className="mb-4 p-4 bg-destructive/10 border border-destructive rounded-md text-destructive">
                             {error}
                         </div>
                     )}
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 431af87..7e8bc05 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -39,7 +39,7 @@ export function Breadcrumbs() {
                 variant="ghost"
                 size="icon"
                 aria-label="Submit"
-                className="outline  hover:bg-gray-100"
+                className="outline  hover:bg-accent"
             >
                 <Link href={backArrowHref}>
                     <ArrowLeftIcon />
@@ -53,7 +53,7 @@ export function Breadcrumbs() {
                             className={
                                 pathname === "/"
                                     ? "text-mhd-black"
-                                    : "text-gray-400"
+                                    : "text-muted-foreground"
                             }
                         >
                             <Link href="/">OVERVIEW</Link>
@@ -72,7 +72,7 @@ export function Breadcrumbs() {
                                         className={
                                             isCurrent
                                                 ? "text-mhd-black"
-                                                : "text-gray-400"
+                                                : "text-muted-foreground"
                                         }
                                     >
                                         <Link href={href}>
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index b35be09..dd307b9 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -50,17 +50,17 @@ export default function MHDCalendar() {
                         onClick: () => handleSelect(date),
                     })}
                 />
-                <p className="mt-4 text-gray-600">
+                <p className="mt-4 text-muted-foreground">
                     Selected: {selectedDate ? selectedDate : "None"}
                 </p>
 
                 <button
                     onClick={handleSubmit}
-                    className="mt-2 px-4 py-2 bg-blue-500 text-white justify-center rounded-lg hover:bg-blue-600 transition"
+                    className="mt-2 px-4 py-2 bg-primary text-primary-foreground justify-center rounded-lg hover:bg-primary/90 transition"
                 >
                     Submit
                 </button>
-                {response && <p className="mt-2 text-gray-700">{response}</p>}
+                {response && <p className="mt-2 text-foreground">{response}</p>}
             </div>
         </div>
     );
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 841eb26..7201ad1 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -33,11 +33,11 @@ export default function Checkbox({
                 type="checkbox"
                 checked={isChecked || false}
                 onChange={handleChange}
-                className="peer appearance-none w-6 h-6 flex-shrink-0 border-2 border-gray-400 rounded transition-colors"
+                className="peer appearance-none w-6 h-6 flex-shrink-0 border-2 border-border rounded transition-colors"
             />
 
             {/* X overlay */}
-            <span className="absolute left-0 top-0 w-6 h-6 flex-shrink-0 flex items-center justify-center text-sm text-blue-900 font-extrabold text-lg pointer-events-none peer-checked:flex hidden">
+            <span className="absolute left-0 top-0 w-6 h-6 flex-shrink-0 flex items-center justify-center text-sm text-primary font-extrabold text-lg pointer-events-none peer-checked:flex hidden">
                 ✕
             </span>
 
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 0a32277..bd804d7 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -60,7 +60,7 @@ export default function Dashboard() {
                     <select
                         value={year}
                         onChange={(e) => setYear(parseInt(e.target.value))}
-                        className="border border-gray-300 rounded-lg px-3 md:px-4py-1.5 md:py-2 w-full text-sm md:text-base text-gray-700 shadow-sm"
+                        className="border border-input rounded-lg px-3 md:px-4py-1.5 md:py-2 w-full text-sm md:text-base text-foreground shadow-sm"
                     >
                         {[2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018].map(
                             (y) => (
@@ -73,7 +73,7 @@ export default function Dashboard() {
                 </div>
             </div>
 
-            {loading && <p className="text-gray-500">Loading...</p>}
+            {loading && <p className="text-muted-foreground">Loading...</p>}
 
             {stats && !loading && (
                 <div className="">
@@ -106,7 +106,7 @@ export default function Dashboard() {
 /* Statcard component used to display all totals */
 function StatCard({ label, value }: { label: string; value: number }) {
     return (
-        <div className="flex flex-col items-center justify-center rounded-lg border border-gray-200 py-6 gap-5">
+        <div className="flex flex-col items-center justify-center rounded-lg border border-border py-6 gap-5">
             <span className="text-xs">{label}</span>
             <span className="font-mono text-5xl font-bold leading-none">
                 {value}
diff --git a/src/components/DataTableSchools.tsx b/src/components/DataTableSchools.tsx
index 60441d4..7cb5349 100644
--- a/src/components/DataTableSchools.tsx
+++ b/src/components/DataTableSchools.tsx
@@ -80,8 +80,8 @@ export function SchoolsDataTable<TData, TValue>({
                                         key={header.id}
                                         className={
                                             header.index === 0
-                                                ? "sticky left-0 z-30 text-center bg-gray-100 border-r border-b min-w-[200px] w-[200px]"
-                                                : "text-center border-r border-b z-0 bg-gray-100"
+                                                ? "sticky left-0 z-30 text-center bg-muted border-r border-b min-w-[200px] w-[200px]"
+                                                : "text-center border-r border-b z-0 bg-muted"
                                         }
                                     >
                                         <div>
@@ -120,7 +120,7 @@ export function SchoolsDataTable<TData, TValue>({
                                         key={cell.id}
                                         className={
                                             cell.column.getIndex() === 0
-                                                ? " text-center sticky left-0 z-20 bg-gray-50 border-r border-b min-w-[200px] w-[200px]"
+                                                ? " text-center sticky left-0 z-20 bg-muted border-r border-b min-w-[200px] w-[200px]"
                                                 : " text-center z-0 border-b"
                                         }
                                     >
@@ -150,7 +150,7 @@ export function SchoolsDataTable<TData, TValue>({
                         <TableRow>
                             <TableCell
                                 colSpan={columns.length}
-                                className="h-24 text-center text-gray-500"
+                                className="h-24 text-center text-muted-foreground"
                             >
                                 No schools found
                             </TableCell>
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 123f699..1cc5a88 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -89,8 +89,8 @@ export default function FileUpload({ fileInfo, setFileInfo }: UploadProps) {
         >
             <button
                 onClick={handleClick}
-                className={`flex flex-col items-center justify-center gap-6 rounded-lg py-20 border-2 border-dashed border-gray-300 w-full hover:bg-gray-200 transition duration-300
-                    ${isDragging ? "bg-gray-200" : "bg-gray-100"}`}
+                className={`flex flex-col items-center justify-center gap-6 rounded-lg py-20 border-2 border-dashed border-border w-full hover:bg-accent transition duration-300
+                    ${isDragging ? "bg-accent" : "bg-muted"}`}
             >
                 <FileUploadIcon size={64} />
                 <div className="flex flex-col gap-1">
diff --git a/src/components/GraphFilters.tsx b/src/components/GraphFilters.tsx
index 8fe52f7..27f0618 100644
--- a/src/components/GraphFilters.tsx
+++ b/src/components/GraphFilters.tsx
@@ -241,7 +241,7 @@ export default function GraphFilters({
         <div className="mb-8 space-y-6">
             {/* Measured As */}
             <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-700">
+                <label className="block text-sm font-semibold mb-2 text-foreground">
                     Measured as
                 </label>
                 <Combobox
@@ -253,7 +253,7 @@ export default function GraphFilters({
 
             {/* Group By */}
             <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-700">
+                <label className="block text-sm font-semibold mb-2 text-foreground">
                     Group by
                 </label>
                 <Combobox
@@ -265,7 +265,7 @@ export default function GraphFilters({
 
             {/* Filter By */}
             <div>
-                <h2 className="text-sm font-semibold mb-3 text-gray-700">
+                <h2 className="text-sm font-semibold mb-3 text-foreground">
                     Filter by
                 </h2>
 
@@ -275,7 +275,7 @@ export default function GraphFilters({
                         {activeFilters.map((filter) => (
                             <div
                                 key={filter.key}
-                                className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 border border-gray-300 rounded-md text-sm cursor-pointer hover:bg-gray-200"
+                                className="inline-flex items-center gap-1 px-3 py-1 bg-muted border border-border rounded-md text-sm cursor-pointer hover:bg-accent"
                                 onClick={() => {
                                     // Open the corresponding accordion item
                                     if (
@@ -298,7 +298,7 @@ export default function GraphFilters({
 
                 {/* Add Filter Button */}
                 <button
-                    className="flex items-center gap-1 text-sm text-gray-700 hover:text-gray-900 mb-4"
+                    className="flex items-center gap-1 text-sm text-foreground hover:text-foreground mb-4"
                     onClick={() => {
                         if (showAllFilters) {
                             // Hide all non-active filters
@@ -371,7 +371,7 @@ export default function GraphFilters({
                                 </div>
                                 <button
                                     onClick={() => handleSchoolsChange([])}
-                                    className="mt-2 text-xs text-blue-600"
+                                    className="mt-2 text-xs text-primary"
                                 >
                                     Clear selection
                                 </button>
@@ -398,7 +398,7 @@ export default function GraphFilters({
                                 </div>
                                 <button
                                     onClick={() => handleCitiesChange([])}
-                                    className="mt-2 text-xs text-blue-600"
+                                    className="mt-2 text-xs text-primary"
                                 >
                                     Clear selection
                                 </button>
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 089f4d5..6bf046f 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -8,7 +8,7 @@ export default function Input() {
     const [questionDisplay, setQuestionDisplay] = useState("");
     const [answerDisplay, setAnswerDisplay] = useState("");
     const [buttonStyle, setButtonStyle] = useState(
-        "bg-[#22405D] hover:bg-[#457baf] text-white rounded-md w-30 h-10 my-2 display-block",
+        "bg-primary hover:bg-primary/90 text-primary-foreground rounded-md w-30 h-10 my-2 display-block",
     );
 
     // used to get rid of stuff like &quot; in the question string
@@ -28,16 +28,16 @@ export default function Input() {
     const styleClickedButton = () => {
         setButtonStyle(
             buttonStyle.replace(
-                "bg-[#22405D] hover:bg-[#457baf]",
-                "bg-[#1C334A]",
+                "bg-primary hover:bg-primary/90",
+                "bg-primary/80",
             ),
         );
     };
     const revertClickedButtonStyle = () => {
         setButtonStyle(
             buttonStyle.replace(
-                "bg-[#1C334A]",
-                "bg-[#22405D] hover:bg-[#457baf]",
+                "bg-primary/80",
+                "bg-primary hover:bg-primary/90",
             ),
         );
     };
diff --git a/src/components/SchoolSearchbar.tsx b/src/components/SchoolSearchbar.tsx
index 7b1c240..8f57d0d 100644
--- a/src/components/SchoolSearchbar.tsx
+++ b/src/components/SchoolSearchbar.tsx
@@ -33,13 +33,13 @@ export default function SchoolSearchBar({
 
     return (
         <div className={`relative ${className}`}>
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3 h-[30px]" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-3 h-[30px]" />
             <input
                 type="text"
                 value={search}
                 onChange={handleChange}
                 placeholder={placeholder}
-                className="w-full pl-8 py-1 font-normal text-sm border border-gray-300 rounded placeholder-gray-400 hover:border-gray-400 focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
+                className="w-full pl-8 py-1 font-normal text-sm border border-input rounded placeholder-muted-foreground hover:border-border focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
             />
         </div>
     );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a9a5686..732775b 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -67,7 +67,7 @@ export default function Sidebar() {
     ];
 
     return (
-        <aside className="h-full bg-white border-r border-gray-200 flex flex-col justify-between w-56 flex-shrink-0">
+        <aside className="h-full bg-card border-r border-border flex flex-col justify-between w-56 flex-shrink-0">
             <div className="flex-1 overflow-hidden">
                 <div className="px-6 py-5 flex items-center justify-center">
                     <h1>
@@ -82,7 +82,7 @@ export default function Sidebar() {
                 <div className="mt-4 px-3">
                     {sections.map((section) => (
                         <div key={section.title} className="mb-5">
-                            <p className="text-xs font-semibold text-gray-400 mb-2 px-2 overflow-hidden whitespace-nowrap">
+                            <p className="text-xs font-semibold text-muted-foreground mb-2 px-2 overflow-hidden whitespace-nowrap">
                                 {section.title}
                             </p>
 
@@ -107,8 +107,8 @@ export default function Sidebar() {
                                                         w-full flex items-center justify-between px-3 py-2 rounded-lg transition-colors
                                                         ${
                                                             isAnySubitemActive
-                                                                ? "text-black hover:bg-blue-50 hover:text-blue-900"
-                                                                : "text-gray-700 hover:bg-blue-50 hover:text-blue-900"
+                                                                ? "text-foreground hover:bg-accent hover:text-accent-foreground"
+                                                                : "text-foreground hover:bg-accent hover:text-accent-foreground"
                                                         }
                                                     `}
                                                 >
@@ -151,8 +151,8 @@ export default function Sidebar() {
                                                                             px-3 py-1.5 rounded-lg transition-colors text-sm
                                                                             ${
                                                                                 isActive
-                                                                                    ? "text-black font-semibold bg-blue-100"
-                                                                                    : "text-gray-600 hover:bg-blue-50 hover:text-blue-900"
+                                                                                    ? "text-foreground font-semibold bg-accent"
+                                                                                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                                                                             }
                                                                         `}
                                                                     >
@@ -179,8 +179,8 @@ export default function Sidebar() {
                                                     flex items-center gap-3 px-3 py-2 rounded-lg transition-colors
                                                     ${
                                                         isActive
-                                                            ? "text-black font-semibold bg-blue-100"
-                                                            : "text-gray-700 hover:bg-blue-50 hover:text-blue-900"
+                                                            ? "text-foreground font-semibold bg-accent"
+                                                            : "text-foreground hover:bg-accent hover:text-accent-foreground"
                                                     }
                                                 `}
                                             >
@@ -208,7 +208,7 @@ export default function Sidebar() {
                         className="w-full h-full object-cover"
                     />
                 </div>
-                <span className="text-sm font-medium text-gray-700 overflow-hidden whitespace-nowrap">
+                <span className="text-sm font-medium text-foreground overflow-hidden whitespace-nowrap">
                     Admin Name
                 </span>
             </div>
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 7780abe..665a4c4 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -44,10 +44,10 @@ export default function Slider({ min, max }: SliderProps) {
                         onChange={(e) => setValue(Number(e.target.value))}
                         className="w-80 h-2 appearance-none rounded-lg cursor-pointer accent-gray-700 mb-5"
                         style={{
-                            background: `linear-gradient(to right, 
-                        rgb(45, 46, 48) 0%, 
-                        rgb(45, 46, 48) ${fillPercent}%, 
-                        rgb(209,213,219) ${fillPercent}%, 
+                            background: `linear-gradient(to right,
+                        rgb(45, 46, 48) 0%,
+                        rgb(45, 46, 48) ${fillPercent}%,
+                        rgb(209,213,219) ${fillPercent}%,
                         rgb(209,213,219) 100%)`,
                         }}
                     />
@@ -56,7 +56,7 @@ export default function Slider({ min, max }: SliderProps) {
 
                 <button
                     onClick={fetchFromApi}
-                    className="rounded-lg h-12 w-40 bg-sky-900 m-2 flex items-center justify-center text-white text-lg m-4"
+                    className="rounded-lg h-12 w-40 bg-primary m-2 flex items-center justify-center text-primary-foreground text-lg m-4"
                 >
                     Submit
                 </button>
diff --git a/src/components/SpreadsheetConfirmation.tsx b/src/components/SpreadsheetConfirmation.tsx
index bb470f3..702c28c 100644
--- a/src/components/SpreadsheetConfirmation.tsx
+++ b/src/components/SpreadsheetConfirmation.tsx
@@ -71,7 +71,7 @@ export default function SpreadsheetConfirmation({
     return (
         <div className="flex flex-col items-left justify-left">
             <h1 className="text-2xl font-bold mt-8">Confirmation</h1>
-            <p className="text-gray-600 my-5">
+            <p className="text-muted-foreground my-5">
                 You are about to override data for {year} - are you sure you
                 want to do this? This action cannot be undone.
             </p>
diff --git a/src/components/SpreadsheetPreview.tsx b/src/components/SpreadsheetPreview.tsx
index aad811e..0e9535b 100644
--- a/src/components/SpreadsheetPreview.tsx
+++ b/src/components/SpreadsheetPreview.tsx
@@ -75,7 +75,7 @@ export default function SpreadsheetPreview({
         <>
             <div className="flex flex-col items-center gap-12">
                 <div className="flex flex-col items-center">
-                    <CircleCheck className="w-16 h-16 text-green-500" />
+                    <CircleCheck className="w-16 h-16 text-primary" />
                     <h2 className="text-xl font-bold mt-5">
                         Your file looks good
                     </h2>
@@ -84,8 +84,8 @@ export default function SpreadsheetPreview({
                     <div className="flex flex-col gap-2">
                         <div className="flex gap-4 items-center">
                             <p className="font-bold w-32">File</p>
-                            <div className="bg-gray-100 px-2 rounded border flex items-center gap-1">
-                                <FileChartColumn className="h-4 text-gray-600" />
+                            <div className="bg-muted px-2 rounded border flex items-center gap-1">
+                                <FileChartColumn className="h-4 text-muted-foreground" />
                                 <p>{fileName}</p>
                             </div>
                         </div>
@@ -102,7 +102,7 @@ export default function SpreadsheetPreview({
                     </div>
                     <div className="flex flex-col gap-2">
                         <h2 className="text-xl font-bold mt-5 ">Data sample</h2>
-                        <p className="text-gray-600">
+                        <p className="text-muted-foreground">
                             Here are the first 5 rows from your file
                         </p>
                     </div>
diff --git a/src/components/SpreadsheetPreviewFail.tsx b/src/components/SpreadsheetPreviewFail.tsx
index a3e4ae8..519555c 100644
--- a/src/components/SpreadsheetPreviewFail.tsx
+++ b/src/components/SpreadsheetPreviewFail.tsx
@@ -30,7 +30,7 @@ export default function SpreadsheetPreviewFail({
         <>
             <div className="flex flex-col items-center gap-12 max-w-lg">
                 <div className="flex flex-col items-center gap-2 w-full">
-                    <CircleX className="w-16 h-16 text-red-500" />
+                    <CircleX className="w-16 h-16 text-destructive" />
                     <h2 className="text-xl font-bold mt-5">
                         This file can&apos;t be imported
                     </h2>
@@ -41,8 +41,8 @@ export default function SpreadsheetPreviewFail({
                 <div className="flex flex-col gap-4 w-full">
                     <div className="flex gap-4 items-center">
                         <p className="font-bold w-32">File</p>
-                        <div className="bg-gray-100 px-2 rounded border flex items-center gap-1">
-                            <FileChartColumn className="h-4 text-gray-600" />
+                        <div className="bg-muted px-2 rounded border flex items-center gap-1">
+                            <FileChartColumn className="h-4 text-muted-foreground" />
                             <p>{fileName}</p>
                         </div>
                     </div>
diff --git a/src/components/SpreadsheetState.tsx b/src/components/SpreadsheetState.tsx
index 53e0707..8812a4b 100644
--- a/src/components/SpreadsheetState.tsx
+++ b/src/components/SpreadsheetState.tsx
@@ -276,7 +276,7 @@ export default function SpreadsheetState() {
             <div className="flex justify-between w-full pb-4">
                 {canPrevious && (
                     <button
-                        className="py-1 w-40 rounded-lg bg-white text-black border border-gray-300 hover:bg-gray-200 hover:cursor-pointer transition duration-300"
+                        className="py-1 w-40 rounded-lg bg-card text-foreground border border-border hover:bg-accent hover:cursor-pointer transition duration-300"
                         onClick={previous}
                         disabled={isSubmitting}
                     >
@@ -286,7 +286,7 @@ export default function SpreadsheetState() {
 
                 {canNext && (
                     <button
-                        className="ml-auto py-1 w-40 rounded-lg bg-blue-700 text-white hover:bg-blue-900 hover:cursor-pointer transition duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                        className="ml-auto py-1 w-40 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 hover:cursor-pointer transition duration-300 disabled:bg-muted disabled:cursor-not-allowed"
                         onClick={next}
                         disabled={isSubmitting}
                     >
diff --git a/src/components/SpreadsheetStatusBar.tsx b/src/components/SpreadsheetStatusBar.tsx
index 87bfe2e..305bd28 100644
--- a/src/components/SpreadsheetStatusBar.tsx
+++ b/src/components/SpreadsheetStatusBar.tsx
@@ -25,10 +25,10 @@ export default function StatusBar({
     hasError = false,
 }: StatusBarProps) {
     const fillPercentage = (tabIndex / maxTabs) * 100;
-    const barColor = hasError ? "bg-red-500" : "bg-blue-800";
+    const barColor = hasError ? "bg-destructive" : "bg-primary";
 
     return (
-        <div className="w-full h-3 bg-gray-300 rounded-full">
+        <div className="w-full h-3 bg-muted rounded-full">
             <div
                 className={`h-3 ${barColor} rounded-full transition-all duration-300`}
                 style={{ width: `${fillPercentage}%` }}
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index be089f4..3c1059e 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -82,7 +82,7 @@ export default function Tooltips() {
             <div
                 ref={refs.setFloating}
                 style={floatingStyles}
-                className={`bg-black text-white p-3 rounded-lg w-64 break-words transition-all duration-300 transform ${
+                className={`bg-popover text-popover-foreground p-3 rounded-lg w-64 break-words transition-all duration-300 transform ${
                     isHover || isFocused
                         ? "opacity-100 translate-y-0"
                         : "opacity-0 translate-y-1 pointer-events-none"
@@ -97,7 +97,7 @@ export default function Tooltips() {
                         top: middlewareData.arrow?.y,
                         [side]: "-4px",
                     }}
-                    className="w-2 h-2 rotate-45 bg-black"
+                    className="w-2 h-2 rotate-45 bg-popover"
                 />
             </div>
         </div>
diff --git a/src/components/YearDropdown.tsx b/src/components/YearDropdown.tsx
index 53ea137..a6d11ac 100644
--- a/src/components/YearDropdown.tsx
+++ b/src/components/YearDropdown.tsx
@@ -43,7 +43,7 @@ export default function YearDropdown({
         <select
             value={year ?? ""}
             onChange={handleChange}
-            className="border border-gray-300 rounded px-4 w-30 font-normal text-sm text-gray-600 h-[30px] hover:border-gray-400 focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
+            className="border border-input rounded px-4 w-30 font-normal text-sm text-muted-foreground h-[30px] hover:border-border focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
         >
             <option value="">Select a year</option>
             {years.map((y) => (
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index ae8bea9..0232d68 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -22,7 +22,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <thead
         ref={ref}
-        className={cn("bg-gray-50 [&_tr]:border-b", className)}
+        className={cn("bg-muted [&_tr]:border-b", className)}
         {...props}
     />
 ));
@@ -92,7 +92,7 @@ const TableCell = React.forwardRef<
     <td
         ref={ref}
         className={cn(
-            "h-10 px-2 text-left align-middle font-medium text-gray-700 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            "h-10 px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
             className,
         )}
         {...props}

From bd4ad2c92b6832267dc09859ccfaf6cc4fefff05 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 17:28:42 +0000
Subject: [PATCH 2/8] feat: indicator dot select

---
 src/app/api/years/route.ts      |  23 +++++
 src/app/graphs/page.tsx         |  10 +-
 src/components/YearDropdown.tsx |  75 ++++++++++----
 src/components/ui/select.tsx    | 168 ++++++++++++++++++++++++++++++++
 src/lib/schema.ts               |   2 +-
 5 files changed, 255 insertions(+), 23 deletions(-)
 create mode 100644 src/app/api/years/route.ts
 create mode 100644 src/components/ui/select.tsx

diff --git a/src/app/api/years/route.ts b/src/app/api/years/route.ts
new file mode 100644
index 0000000..b42499c
--- /dev/null
+++ b/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 },
+        );
+    }
+}
diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index 71baf84..2b6dcdd 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -10,17 +10,17 @@
  **************************************************************/
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
-import BarGraph, { BarDataset } from "@/components/BarGraph";
+import { useEffect, useMemo, useState } from "react";
+import BarGraph, { type BarDataset } from "@/components/BarGraph";
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import GraphFilters, { type Filters } from "@/components/GraphFilters";
 import LineGraph from "@/components/LineGraph";
-import GraphFilters, { Filters } from "@/components/GraphFilters";
+import { Button } from "@/components/ui/button";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { Breadcrumbs } from "@/components/Breadcrumbs";
 
 // define Project type
 type Project = {
diff --git a/src/components/YearDropdown.tsx b/src/components/YearDropdown.tsx
index a6d11ac..f3cf13d 100644
--- a/src/components/YearDropdown.tsx
+++ b/src/components/YearDropdown.tsx
@@ -12,7 +12,15 @@
 
 "use client";
 
-import React, { useState, useEffect } from "react";
+import type React from "react";
+import { useEffect, useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 
 type YearDropdownProps = {
     selectedYear?: number | null;
@@ -24,33 +32,66 @@ export default function YearDropdown({
     onYearChange,
 }: YearDropdownProps) {
     const [year, setYear] = useState<number | null>(null);
+    const [yearsWithData, setYearsWithData] = useState<Set<number>>(new Set());
 
     // Years from current year down to 10 years ago
     const currentYear = new Date().getFullYear();
     const years = Array.from({ length: 10 }, (_, i) => currentYear - i);
 
-    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const selected = e.target.value ? Number(e.target.value) : null;
+    useEffect(() => {
+        setYear(selectedYear ?? null);
+    }, [selectedYear]);
+
+    // Fetch years with data
+    useEffect(() => {
+        const fetchYearsWithData = async () => {
+            try {
+                const response = await fetch("/api/years");
+                if (response.ok) {
+                    const data = await response.json();
+                    setYearsWithData(new Set(data.yearsWithData));
+                }
+            } catch (error) {
+                // eslint-disable-next-line no-console
+                console.error("Failed to fetch years with data:", error);
+            }
+        };
+        fetchYearsWithData();
+    }, []);
+
+    const handleValueChange = (value: string) => {
+        const selected = value ? Number(value) : null;
         setYear(selected);
         onYearChange?.(selected);
     };
 
-    useEffect(() => {
-        setYear(selectedYear ?? null);
-    }, [selectedYear]);
+    const hasData = (year: number) => yearsWithData.has(year);
 
     return (
-        <select
-            value={year ?? ""}
-            onChange={handleChange}
-            className="border border-input rounded px-4 w-30 font-normal text-sm text-muted-foreground h-[30px] hover:border-border focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
+        <Select
+            value={year?.toString() ?? ""}
+            onValueChange={handleValueChange}
         >
-            <option value="">Select a year</option>
-            {years.map((y) => (
-                <option key={y} value={y}>
-                    {y}
-                </option>
-            ))}
-        </select>
+            <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select a year" />
+            </SelectTrigger>
+            <SelectContent>
+                {years.map((y) => (
+                    <SelectItem
+                        key={y}
+                        value={y.toString()}
+                        rightContent={
+                            <div
+                                className={`h-2 w-2 rounded-full shrink-0 ${
+                                    hasData(y) ? "bg-green-500" : "bg-red-500"
+                                }`}
+                            />
+                        }
+                    >
+                        {y}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
     );
 }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..fbe139a
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            className,
+        )}
+        {...props}
+    >
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn(
+            "flex cursor-default items-center justify-center py-1",
+            className,
+        )}
+        {...props}
+    >
+        <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn(
+            "flex cursor-default items-center justify-center py-1",
+            className,
+        )}
+        {...props}
+    >
+        <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+                "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+                position === "popper" &&
+                    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                className,
+            )}
+            position={position}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+                className={cn(
+                    "p-1",
+                    position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+                )}
+            >
+                {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+        ref={ref}
+        className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+        {...props}
+    />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+        rightContent?: React.ReactNode;
+    }
+>(({ className, children, rightContent, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            rightContent && "pr-12",
+            className,
+        )}
+        {...props}
+    >
+        <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </SelectPrimitive.ItemIndicator>
+        </span>
+        {rightContent && (
+            <span className="absolute right-8 flex items-center justify-center">
+                {rightContent}
+            </span>
+        )}
+
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+};
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index f505d2c..c112817 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -1,4 +1,4 @@
-import { pgTable, integer, text, serial, boolean } from "drizzle-orm/pg-core";
+import { boolean, integer, pgTable, serial, text } from "drizzle-orm/pg-core";
 
 // Represents metadata (relatively unchanging data) about a school
 export const schools = pgTable("schools", {

From 4a59562f59156f9726cce035b3b89096bad82fe1 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 17:34:21 +0000
Subject: [PATCH 3/8] feat: stop mobile users from using app

---
 src/app/layout.tsx                  | 11 +++++--
 src/components/FileUpload.tsx       |  7 +++--
 src/components/ResponsiveLayout.tsx | 49 +++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ResponsiveLayout.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 928222d..ed7a19a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 // src/app/layout.tsx
 import type { Metadata } from "next";
 import "./globals.css";
-import Sidebar from "@/components/Sidebar";
 
 import {
     interstate,
@@ -9,6 +8,8 @@ import {
     millerDisplay,
     millerText,
 } from "@/app/fonts";
+import ResponsiveLayout from "@/components/ResponsiveLayout";
+import Sidebar from "@/components/Sidebar";
 
 export const metadata: Metadata = {
     title: "MHD",
@@ -26,8 +27,12 @@ export default function RootLayout({
             className={`${millerBanner.variable} ${millerDisplay.variable} ${millerText.variable} ${interstate.variable}`}
         >
             <body className="font-sans flex flex-row h-screen">
-                <Sidebar />
-                <main className="flex-1 flex justify-center">{children}</main>
+                <ResponsiveLayout>
+                    <Sidebar />
+                    <main className="flex-1 flex justify-center">
+                        {children}
+                    </main>
+                </ResponsiveLayout>
             </body>
         </html>
     );
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 1cc5a88..288c886 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -12,8 +12,9 @@
 
 "use client";
 
-import React, { useRef, useState, useEffect } from "react";
 import { FileUp as FileUploadIcon } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 
 type UploadProps = {
     fileInfo?: File;
@@ -86,10 +87,12 @@ export default function FileUpload({ fileInfo, setFileInfo }: UploadProps) {
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
+            className="cursor-pointer"
         >
             <button
+                type="button"
                 onClick={handleClick}
-                className={`flex flex-col items-center justify-center gap-6 rounded-lg py-20 border-2 border-dashed border-border w-full hover:bg-accent transition duration-300
+                className={`flex flex-col items-center justify-center gap-6 rounded-lg py-20 border-2 border-dashed border-border w-full hover:bg-accent transition duration-300 cursor-pointer
                     ${isDragging ? "bg-accent" : "bg-muted"}`}
             >
                 <FileUploadIcon size={64} />
diff --git a/src/components/ResponsiveLayout.tsx b/src/components/ResponsiveLayout.tsx
new file mode 100644
index 0000000..d1f8e73
--- /dev/null
+++ b/src/components/ResponsiveLayout.tsx
@@ -0,0 +1,49 @@
+// Don't allow mobile users to access the app
+
+"use client";
+
+import { HeartCrack } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export default function ResponsiveLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const [isMobile, setIsMobile] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        const checkScreenSize = () => {
+            setIsMobile(window.innerWidth < 768); // md breakpoint is 768px
+        };
+
+        checkScreenSize();
+
+        window.addEventListener("resize", checkScreenSize);
+
+        return () => {
+            window.removeEventListener("resize", checkScreenSize);
+        };
+    }, []);
+
+    if (!mounted) {
+        return <>{children}</>;
+    }
+
+    if (isMobile) {
+        return (
+            <div className="flex items-center justify-center h-screen w-screen bg-background">
+                <div className="flex flex-col items-center gap-4">
+                    <HeartCrack className="h-6 w-6 text-foreground" />
+                    <p className="text-sm text-foreground text-center">
+                        We&apos;re sorry, screens of this size are unsupported
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return <>{children}</>;
+}

From cd6a42534115bc117abfc3620b6d35bf859c9637 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 17:43:06 +0000
Subject: [PATCH 4/8] feat: use toasts for error handling properly

---
 package-lock.json                   | 11 +++++++
 package.json                        |  1 +
 src/app/graphs/page.tsx             |  6 ++--
 src/app/layout.tsx                  |  2 ++
 src/app/schools/[name]/page.tsx     | 23 +++++++++++++--
 src/components/Dashboard.tsx        | 45 +++++++++++++++++------------
 src/components/InputField.tsx       | 41 ++++++++++++++++++++------
 src/components/SpreadsheetState.tsx | 21 +++++++++-----
 src/components/YearDropdown.tsx     |  5 ++--
 9 files changed, 112 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ac35a0..6f02968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,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",
@@ -13885,6 +13886,16 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sonner": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+            "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+                "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
         "node_modules/source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
diff --git a/package.json b/package.json
index 57b2258..5eca4f2 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,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",
diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index 2b6dcdd..6f95fc0 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -11,6 +11,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import BarGraph, { type BarDataset } from "@/components/BarGraph";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
 import GraphFilters, { type Filters } from "@/components/GraphFilters";
@@ -98,8 +99,9 @@ export default function GraphsPage() {
                 const data = await response.json();
                 setAllProjects(data);
             } catch (error) {
-                // eslint-disable-next-line no-console
-                console.error("Error:", error);
+                toast.error(
+                    "Failed to load project data. Please refresh the page.",
+                );
             } finally {
                 setLoading(false);
             }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ed7a19a..681cbb8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import { Toaster } from "sonner";
 import {
     interstate,
     millerBanner,
@@ -33,6 +34,7 @@ export default function RootLayout({
                         {children}
                     </main>
                 </ResponsiveLayout>
+                <Toaster />
             </body>
         </html>
     );
diff --git a/src/app/schools/[name]/page.tsx b/src/app/schools/[name]/page.tsx
index 60ceb4e..bfb9f05 100644
--- a/src/app/schools/[name]/page.tsx
+++ b/src/app/schools/[name]/page.tsx
@@ -11,8 +11,9 @@
 
 "use client";
 
-import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
 
 // interface such that data can be blank if API is loading
@@ -58,12 +59,28 @@ export default function SchoolProfilePage() {
             })
             .catch((error) => {
                 setError(error.message);
+                toast.error(
+                    "Failed to load school data. Redirecting to schools page.",
+                );
+                // Redirect after showing error
+                setTimeout(() => {
+                    router.push("/schools");
+                }, 2000);
             });
-    }, [schoolName]);
+    }, [schoolName, router]);
 
     // Redirect to schools page if school cannot be found
     if (error) {
-        router.push("/schools");
+        return (
+            <div className="h-screen w-full bg-background overflow-y-auto flex justify-center">
+                <div className="w-full flex flex-col gap-8 py-8 max-w-5xl px-6">
+                    <Breadcrumbs />
+                    <div className="p-4 bg-destructive/10 border border-destructive rounded-md text-destructive">
+                        {error}
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     return (
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index bd804d7..ec62262 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -11,7 +11,15 @@
 
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 
 type Stats = {
     totals: {
@@ -39,8 +47,8 @@ export default function Dashboard() {
                 const data = await res.json();
 
                 setStats(data.yearlyStats);
-            } catch (error) {
-                alert("Major error: big leagues are calling." + error);
+            } catch {
+                toast.error("Failed to load dashboard data. Please try again.");
             } finally {
                 setLoading(false);
             }
@@ -51,25 +59,26 @@ export default function Dashboard() {
 
     return (
         <div className="flex flex-col gap-8 w-full max-w-5xl px-6">
-            <div>{/* TO DO: Toast here (if we want) */}</div>
-            {/* Header and dropdown menu */}
             <h1 className="text-2xl font-semibold">Overview Dashboard</h1>
             <div className="">
-                {/* Dropdown menu */}
                 <div className="w-40">
-                    <select
-                        value={year}
-                        onChange={(e) => setYear(parseInt(e.target.value))}
-                        className="border border-input rounded-lg px-3 md:px-4py-1.5 md:py-2 w-full text-sm md:text-base text-foreground shadow-sm"
+                    <Select
+                        value={year.toString()}
+                        onValueChange={(value) => setYear(parseInt(value, 10))}
                     >
-                        {[2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018].map(
-                            (y) => (
-                                <option key={y} value={y}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select a year" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {[
+                                2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018,
+                            ].map((y) => (
+                                <SelectItem key={y} value={y.toString()}>
                                     {y}
-                                </option>
-                            ),
-                        )}
-                    </select>
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
                 </div>
             </div>
 
@@ -94,7 +103,7 @@ export default function Dashboard() {
                             label="# Schools"
                             value={stats.totals.total_schools}
                         />
-                        {/* TO DO: Once we store type of school, make this correct */}
+                        {/* TODO: Once we store type of school, make this correct */}
                         <StatCard label="% Highschool" value={12} />
                     </div>
                 </div>
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 6bf046f..1ffde1f 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 import { useState } from "react";
 
 export default function Input() {
     const [numInput, setNumInput] = useState<number | null>(null);
     const [questionDisplay, setQuestionDisplay] = useState("");
     const [answerDisplay, setAnswerDisplay] = useState("");
+    const [error, setError] = useState<string | null>(null);
     const [buttonStyle, setButtonStyle] = useState(
         "bg-primary hover:bg-primary/90 text-primary-foreground rounded-md w-30 h-10 my-2 display-block",
     );
@@ -45,6 +46,7 @@ export default function Input() {
     const handleSubmit = async () => {
         setQuestionDisplay("Loading...");
         setAnswerDisplay("");
+        setError(null);
         try {
             const response = await fetch(`/api/input-field?input=` + numInput);
             const data = await response.json();
@@ -58,22 +60,43 @@ export default function Input() {
                 }
                 setAnswerDisplay(answer);
             } else {
-                setQuestionDisplay("Error with your input, please try again");
+                setError("Error with your input, please try again");
             }
         } catch (error) {
-            setQuestionDisplay("Error with api response: " + error);
+            setError(
+                error instanceof Error
+                    ? `Error with api response: ${error.message}`
+                    : "Error with api response. Please try again.",
+            );
         }
     };
 
     return (
         <div className="flex flex-col gap-5 items-center w-[250px]">
             <p className="font-bold w-full text-left">Type Something</p>
-            <input
-                onChange={handleChange}
-                placeholder={"Input a number!"}
-                className="w-full px-4 placeholder-[#9d9d9d] py-2 border-2 border-[#D0CECE] rounded-[5px] hover:border-[#22405D] focus:border-[#22405D] focus:outline-none focus:ring-3 focus:ring-[#457BAF]/43"
-                required
-            />
+            <div className="w-full">
+                <input
+                    onChange={handleChange}
+                    placeholder={"Input a number!"}
+                    className={`w-full px-4 placeholder-[#9d9d9d] py-2 border-2 rounded-[5px] focus:outline-none focus:ring-3 focus:ring-[#457BAF]/43 ${
+                        error
+                            ? "border-destructive focus:border-destructive"
+                            : "border-[#D0CECE] hover:border-[#22405D] focus:border-[#22405D]"
+                    }`}
+                    required
+                    aria-invalid={error ? "true" : "false"}
+                    aria-describedby={error ? "input-error" : undefined}
+                />
+                {error && (
+                    <p
+                        id="input-error"
+                        className="mt-1 text-sm text-destructive"
+                        role="alert"
+                    >
+                        {error}
+                    </p>
+                )}
+            </div>
 
             <button
                 type="button"
diff --git a/src/components/SpreadsheetState.tsx b/src/components/SpreadsheetState.tsx
index 8812a4b..c3857e8 100644
--- a/src/components/SpreadsheetState.tsx
+++ b/src/components/SpreadsheetState.tsx
@@ -13,14 +13,15 @@
 
 "use client";
 
-import React, { ReactElement, useState, useEffect } from "react";
+import React, { type ReactElement, useEffect, useState } from "react";
+import { toast } from "sonner";
+import * as XLSX from "xlsx";
+import SpreadsheetStatusBar from "@/components/SpreadsheetStatusBar";
+import type { SpreadsheetData } from "@/types/spreadsheet";
 import SpreadsheetConfirmation from "./SpreadsheetConfirmation";
-import SpreadsheetUpload from "./SpreadsheetUpload";
 import SpreadsheetPreview from "./SpreadsheetPreview";
 import SpreadsheetPreviewFail from "./SpreadsheetPreviewFail";
-import SpreadsheetStatusBar from "@/components/SpreadsheetStatusBar";
-import * as XLSX from "xlsx";
-import type { SpreadsheetData } from "@/types/spreadsheet";
+import SpreadsheetUpload from "./SpreadsheetUpload";
 
 export default function SpreadsheetState() {
     const [file, setFile] = useState<File | undefined>();
@@ -98,7 +99,7 @@ export default function SpreadsheetState() {
 
     const handleSubmit = async () => {
         if (spreadsheetData.length === 0) {
-            alert("No data to upload.");
+            toast.warning("No data to upload.");
             return;
         }
 
@@ -118,7 +119,7 @@ export default function SpreadsheetState() {
 
             if (response.ok) {
                 const data = await response.json();
-                alert(
+                toast.success(
                     `Data uploaded successfully! Processed ${data.rowsProcessed || spreadsheetData.length - 1} rows.`,
                 );
             } else {
@@ -126,7 +127,11 @@ export default function SpreadsheetState() {
                 throw new Error(errorData.message || "Failed to upload data");
             }
         } catch (error) {
-            alert("Error uploading data: " + error);
+            toast.error(
+                error instanceof Error
+                    ? `Error uploading data: ${error.message}`
+                    : "Error uploading data. Please try again.",
+            );
         } finally {
             setIsSubmitting(false);
         }
diff --git a/src/components/YearDropdown.tsx b/src/components/YearDropdown.tsx
index f3cf13d..68f9010 100644
--- a/src/components/YearDropdown.tsx
+++ b/src/components/YearDropdown.tsx
@@ -12,8 +12,8 @@
 
 "use client";
 
-import type React from "react";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import {
     Select,
     SelectContent,
@@ -52,8 +52,7 @@ export default function YearDropdown({
                     setYearsWithData(new Set(data.yearsWithData));
                 }
             } catch (error) {
-                // eslint-disable-next-line no-console
-                console.error("Failed to fetch years with data:", error);
+                toast.error("Failed to load year data");
             }
         };
         fetchYearsWithData();

From 480f40c9c7fc1fcee5ceb900445a429d736cbe21 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 17:58:09 +0000
Subject: [PATCH 5/8] feat: start adding skeletons and clean up table page

---
 src/app/graphs/loading.tsx                    |  5 ++
 src/app/graphs/page.tsx                       | 13 +---
 src/app/page.tsx                              |  8 ++-
 src/app/schools/[name]/loading.tsx            |  5 ++
 src/app/schools/[name]/page.tsx               | 17 ++----
 src/app/schools/loading.tsx                   | 25 ++++++++
 src/app/schools/page.tsx                      | 13 ++--
 src/components/Columns.tsx                    | 59 +++++++++++--------
 src/components/Dashboard.tsx                  | 10 +---
 src/components/DataTableSchools.tsx           | 15 +----
 src/components/SchoolSearchbar.tsx            | 20 +++----
 src/components/SpreadsheetUpload.tsx          | 10 ++--
 src/components/YearDropdown.tsx               | 16 +++--
 .../skeletons/DashboardSkeleton.tsx           | 25 ++++++++
 .../skeletons/GraphsPageSkeleton.tsx          | 54 +++++++++++++++++
 src/components/skeletons/InfoRowSkeleton.tsx  |  9 +++
 .../skeletons/SchoolProfileSkeleton.tsx       | 53 +++++++++++++++++
 src/components/skeletons/StatCardSkeleton.tsx | 19 ++++++
 src/components/skeletons/TableSkeleton.tsx    | 51 ++++++++++++++++
 src/components/ui/input.tsx                   | 22 +++++++
 src/components/ui/skeleton.tsx                | 15 +++++
 21 files changed, 365 insertions(+), 99 deletions(-)
 create mode 100644 src/app/graphs/loading.tsx
 create mode 100644 src/app/schools/[name]/loading.tsx
 create mode 100644 src/app/schools/loading.tsx
 create mode 100644 src/components/skeletons/DashboardSkeleton.tsx
 create mode 100644 src/components/skeletons/GraphsPageSkeleton.tsx
 create mode 100644 src/components/skeletons/InfoRowSkeleton.tsx
 create mode 100644 src/components/skeletons/SchoolProfileSkeleton.tsx
 create mode 100644 src/components/skeletons/StatCardSkeleton.tsx
 create mode 100644 src/components/skeletons/TableSkeleton.tsx
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/skeleton.tsx

diff --git a/src/app/graphs/loading.tsx b/src/app/graphs/loading.tsx
new file mode 100644
index 0000000..9f044c0
--- /dev/null
+++ b/src/app/graphs/loading.tsx
@@ -0,0 +1,5 @@
+import { GraphsPageSkeleton } from "@/components/skeletons/GraphsPageSkeleton";
+
+export default function Loading() {
+    return <GraphsPageSkeleton />;
+}
diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index 6f95fc0..e74eada 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -74,7 +74,6 @@ const groupByLabels: Record<string, string> = {
 
 export default function GraphsPage() {
     const [allProjects, setAllProjects] = useState<Project[]>([]);
-    const [loading, setLoading] = useState(true);
     const [filters, setFilters] = useState<Filters>(defaultFilters);
     const [chartType, setChartType] = useState<"line" | "bar">("bar");
     const [timePeriod, setTimePeriod] = useState<
@@ -98,12 +97,10 @@ export default function GraphsPage() {
                 if (!response.ok) throw new Error("Failed to fetch");
                 const data = await response.json();
                 setAllProjects(data);
-            } catch (error) {
+            } catch {
                 toast.error(
                     "Failed to load project data. Please refresh the page.",
                 );
-            } finally {
-                setLoading(false);
             }
         };
         fetchProjects();
@@ -325,11 +322,7 @@ export default function GraphsPage() {
 
             {/* Main Content Area */}
             <div className="flex-1 flex flex-col h-screen overflow-hidden">
-                {loading ? (
-                    <p className="text-xl text-muted-foreground mt-20 text-center">
-                        Loading project data...
-                    </p>
-                ) : (
+                {allProjects.length > 0 ? (
                     <div className="flex flex-col gap-4 h-full overflow-hidden">
                         {/* Header */}
                         <div className="flex items-center justify-between px-8 pt-4 shrink-0">
@@ -610,7 +603,7 @@ export default function GraphsPage() {
                             </p>
                         </div>
                     </div>
-                )}
+                ) : null}
             </div>
         </div>
     );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cd23111..ea5a400 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,11 @@
+import { Suspense } from "react";
 import Dashboard from "@/components/Dashboard";
+import { DashboardSkeleton } from "@/components/skeletons/DashboardSkeleton";
 
 export default function Home() {
-    return <Dashboard />;
+    return (
+        <Suspense fallback={<DashboardSkeleton />}>
+            <Dashboard />
+        </Suspense>
+    );
 }
diff --git a/src/app/schools/[name]/loading.tsx b/src/app/schools/[name]/loading.tsx
new file mode 100644
index 0000000..047f55b
--- /dev/null
+++ b/src/app/schools/[name]/loading.tsx
@@ -0,0 +1,5 @@
+import { SchoolProfileSkeleton } from "@/components/skeletons/SchoolProfileSkeleton";
+
+export default function Loading() {
+    return <SchoolProfileSkeleton />;
+}
diff --git a/src/app/schools/[name]/page.tsx b/src/app/schools/[name]/page.tsx
index bfb9f05..16769f8 100644
--- a/src/app/schools/[name]/page.tsx
+++ b/src/app/schools/[name]/page.tsx
@@ -15,6 +15,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { SchoolProfileSkeleton } from "@/components/skeletons/SchoolProfileSkeleton";
 
 // interface such that data can be blank if API is loading
 type SchoolData = {
@@ -33,17 +34,7 @@ export default function SchoolProfilePage() {
 
     const router = useRouter();
 
-    // while API is loading, still display something
-    const [schoolData, setSchoolData] = useState<SchoolData>({
-        name: "...",
-        town: "...",
-        studentCount: "...",
-        teacherCount: "...",
-        projectCount: "...",
-        firstYear: "...",
-        instructionalModel: "...",
-    });
-
+    const [schoolData, setSchoolData] = useState<SchoolData | null>(null);
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
@@ -83,6 +74,10 @@ export default function SchoolProfilePage() {
         );
     }
 
+    if (!schoolData) {
+        return <SchoolProfileSkeleton />;
+    }
+
     return (
         <div className="h-screen w-full bg-background overflow-y-auto flex justify-center">
             <div className="w-full flex flex-col gap-8 py-8 max-w-5xl px-6">
diff --git a/src/app/schools/loading.tsx b/src/app/schools/loading.tsx
new file mode 100644
index 0000000..618960a
--- /dev/null
+++ b/src/app/schools/loading.tsx
@@ -0,0 +1,25 @@
+import { TableSkeleton } from "@/components/skeletons/TableSkeleton";
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+    return (
+        <div className="font-sans mt-5">
+            <div className="w-11/12 mx-auto">
+                <div className="flex items-center font-bold">
+                    <Breadcrumbs />
+                    <div className="flex-1 text-center">
+                        <Skeleton className="h-7 w-24 mx-auto" />
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <Skeleton className="h-10 w-[180px]" />
+                        <Skeleton className="h-10 w-64" />
+                    </div>
+                </div>
+                <div className="mt-5 overflow-x-auto">
+                    <TableSkeleton rows={10} cols={6} />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/schools/page.tsx b/src/app/schools/page.tsx
index 32b4b06..a583e53 100644
--- a/src/app/schools/page.tsx
+++ b/src/app/schools/page.tsx
@@ -12,23 +12,21 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { SchoolsDataTable } from "@/components/DataTableSchools";
-import { columns } from "@/components/Columns";
-import YearDropdown from "@/components/YearDropdown";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { columns } from "@/components/Columns";
+import { SchoolsDataTable } from "@/components/DataTableSchools";
 import SchoolSearchBar from "@/components/SchoolSearchbar";
+import YearDropdown from "@/components/YearDropdown";
 
 export default function SchoolsPage() {
     const [schoolInfo, setSchoolInfo] = useState([]);
     const [year, setYear] = useState<number | null>(2025);
     const [search, setSearch] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
         if (!year) return;
 
-        setIsLoading(true);
         setError(null);
 
         fetch(`/api/schools?year=` + year)
@@ -40,20 +38,18 @@ export default function SchoolsPage() {
             })
             .then((data) => {
                 setSchoolInfo(data);
-                setIsLoading(false);
             })
             .catch((error) => {
                 // eslint-disable-next-line no-console
                 console.log(error);
                 setError(error.message || "Failed to load school data");
-                setIsLoading(false);
             });
     }, [year]);
 
     return (
         <div className="font-sans mt-5">
             <div className="w-11/12 mx-auto">
-                <div className="flex items-center font-bold">
+                <div className="flex items-center">
                     {/*Table and charts need to be a toggle */}
                     <Breadcrumbs />
                     <div className="flex-1 text-center">
@@ -86,7 +82,6 @@ export default function SchoolsPage() {
                         data={schoolInfo}
                         globalFilter={search}
                         setGlobalFilter={setSearch}
-                        isLoading={isLoading}
                     />
                 </div>
             </div>
diff --git a/src/components/Columns.tsx b/src/components/Columns.tsx
index c140a74..6253a30 100644
--- a/src/components/Columns.tsx
+++ b/src/components/Columns.tsx
@@ -12,8 +12,15 @@
 
 "use client";
 
-import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+import type { ColumnDef } from "@tanstack/react-table";
+import {
+    ArrowDown,
+    ArrowUp,
+    ArrowUpDown,
+    ChevronDown,
+    ChevronsUpDown,
+    ChevronUp,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 export type Schools = {
@@ -47,11 +54,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     Name
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <ChevronsUpDown className="ml-2 h-4 w-4" />
                     )}
                 </Button>
             );
@@ -75,11 +82,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     City
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <ChevronsUpDown className="ml-2 h-4 w-4" />
                     )}
                 </Button>
             );
@@ -103,11 +110,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     Region
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4 " />
+                        <ChevronsUpDown className="ml-2 h-4 w-4 " />
                     )}
                 </Button>
             );
@@ -131,11 +138,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     Instruction Model
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4 " />
+                        <ChevronsUpDown className="ml-2 h-4 w-4 " />
                     )}
                 </Button>
             );
@@ -159,11 +166,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     Implementaion Model
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4 " />
+                        <ChevronsUpDown className="ml-2 h-4 w-4 " />
                     )}
                 </Button>
             );
@@ -187,11 +194,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     # Students
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4 " />
+                        <ChevronsUpDown className="ml-2 h-4 w-4 " />
                     )}
                 </Button>
             );
@@ -215,11 +222,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     # Teachers
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4 " />
+                        <ChevronsUpDown className="ml-2 h-4 w-4 " />
                     )}
                 </Button>
             );
@@ -243,11 +250,11 @@ export const columns: ColumnDef<Schools>[] = [
                 >
                     # Projects
                     {column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="ml-2 h-4 w-4" />
+                        <ChevronUp className="ml-2 h-4 w-4" />
                     ) : column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="ml-2 h-4 w-4" />
+                        <ChevronDown className="ml-2 h-4 w-4" />
                     ) : (
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <ChevronsUpDown className="ml-2 h-4 w-4" />
                     )}
                 </Button>
             );
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index ec62262..845e85a 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -35,11 +35,9 @@ type Stats = {
 export default function Dashboard() {
     const [year, setYear] = useState(2024);
     const [stats, setStats] = useState<Stats | null>(null);
-    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         const fetchStats = async (selectedYear: number) => {
-            setLoading(true);
             try {
                 const res = await fetch(
                     `/api/yearly-totals?year=${selectedYear}`,
@@ -49,8 +47,6 @@ export default function Dashboard() {
                 setStats(data.yearlyStats);
             } catch {
                 toast.error("Failed to load dashboard data. Please try again.");
-            } finally {
-                setLoading(false);
             }
         };
 
@@ -82,9 +78,7 @@ export default function Dashboard() {
                 </div>
             </div>
 
-            {loading && <p className="text-muted-foreground">Loading...</p>}
-
-            {stats && !loading && (
+            {stats ? (
                 <div className="">
                     <div className="grid grid-cols-3 gap-5">
                         <StatCard
@@ -107,7 +101,7 @@ export default function Dashboard() {
                         <StatCard label="% Highschool" value={12} />
                     </div>
                 </div>
-            )}
+            ) : null}
         </div>
     );
 }
diff --git a/src/components/DataTableSchools.tsx b/src/components/DataTableSchools.tsx
index 7cb5349..ecb839e 100644
--- a/src/components/DataTableSchools.tsx
+++ b/src/components/DataTableSchools.tsx
@@ -37,17 +37,13 @@ interface DataTableProps<TData, TValue> {
     data: TData[];
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
-    isLoading?: boolean;
 }
 
-import { Spinner } from "@/components/ui/spinner";
-
 export function SchoolsDataTable<TData, TValue>({
     columns,
     data,
     globalFilter,
     setGlobalFilter,
-    isLoading = false,
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -100,16 +96,7 @@ export function SchoolsDataTable<TData, TValue>({
                     ))}
                 </TableHeader>
                 <TableBody>
-                    {isLoading ? (
-                        <TableRow>
-                            <TableCell
-                                colSpan={columns.length}
-                                className="h-24"
-                            >
-                                <Spinner className="mx-auto size-8" />
-                            </TableCell>
-                        </TableRow>
-                    ) : table.getRowModel().rows?.length ? (
+                    {table.getRowModel().rows?.length ? (
                         table.getRowModel().rows.map((row) => (
                             <TableRow
                                 key={row.id}
diff --git a/src/components/SchoolSearchbar.tsx b/src/components/SchoolSearchbar.tsx
index 8f57d0d..bbbe5d3 100644
--- a/src/components/SchoolSearchbar.tsx
+++ b/src/components/SchoolSearchbar.tsx
@@ -12,8 +12,10 @@
 
 "use client";
 
-import React from "react";
 import { Search } from "lucide-react";
+import type React from "react";
+import { Input } from "@/components/ui/input";
+
 type SearchBarProps = {
     placeholder?: string;
     className?: string;
@@ -32,15 +34,11 @@ export default function SchoolSearchBar({
     };
 
     return (
-        <div className={`relative ${className}`}>
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-3 h-[30px]" />
-            <input
-                type="text"
-                value={search}
-                onChange={handleChange}
-                placeholder={placeholder}
-                className="w-full pl-8 py-1 font-normal text-sm border border-input rounded placeholder-muted-foreground hover:border-border focus:border-[#22405D] focus:outline-none focus:ring-2 focus:ring-[#457BAF]/20"
-            />
-        </div>
+        <Input
+            type="text"
+            value={search}
+            onChange={handleChange}
+            placeholder={placeholder}
+        />
     );
 }
diff --git a/src/components/SpreadsheetUpload.tsx b/src/components/SpreadsheetUpload.tsx
index 3b60f94..89f9db7 100644
--- a/src/components/SpreadsheetUpload.tsx
+++ b/src/components/SpreadsheetUpload.tsx
@@ -12,11 +12,10 @@
 
 "use client";
 
+import type React from "react";
 import FileUpload from "@/components/FileUpload";
 import YearDropdown from "@/components/YearDropdown";
 
-import React from "react";
-
 type UploadProps = {
     file?: File;
     setFile: React.Dispatch<React.SetStateAction<File | undefined>>;
@@ -32,7 +31,6 @@ export default function SpreadsheetUpload({
 }: UploadProps) {
     return (
         <div>
-            {/* Page Title */}
             <div className="flex flex-col gap-4">
                 <h1 className="text-2xl font-bold">Upload Spreadsheet</h1>
                 <h2 className="text-md">
@@ -41,7 +39,11 @@ export default function SpreadsheetUpload({
                 </h2>
                 <div className="flex flex-col gap-2">
                     <h2 className="text-base mt-4">Year</h2>
-                    <YearDropdown selectedYear={year} onYearChange={setYear} />
+                    <YearDropdown
+                        showDataIndicator={true}
+                        selectedYear={year}
+                        onYearChange={setYear}
+                    />
                 </div>
                 <div className="m-5" />
                 <FileUpload fileInfo={file} setFileInfo={setFile} />
diff --git a/src/components/YearDropdown.tsx b/src/components/YearDropdown.tsx
index 68f9010..8ee32c0 100644
--- a/src/components/YearDropdown.tsx
+++ b/src/components/YearDropdown.tsx
@@ -25,11 +25,13 @@ import {
 type YearDropdownProps = {
     selectedYear?: number | null;
     onYearChange?: (year: number | null) => void;
+    showDataIndicator?: boolean;
 };
 
 export default function YearDropdown({
     selectedYear,
     onYearChange,
+    showDataIndicator = false,
 }: YearDropdownProps) {
     const [year, setYear] = useState<number | null>(null);
     const [yearsWithData, setYearsWithData] = useState<Set<number>>(new Set());
@@ -80,11 +82,15 @@ export default function YearDropdown({
                         key={y}
                         value={y.toString()}
                         rightContent={
-                            <div
-                                className={`h-2 w-2 rounded-full shrink-0 ${
-                                    hasData(y) ? "bg-green-500" : "bg-red-500"
-                                }`}
-                            />
+                            showDataIndicator ? (
+                                <div
+                                    className={`h-2 w-2 rounded-full shrink-0 ${
+                                        hasData(y)
+                                            ? "bg-green-500"
+                                            : "bg-red-500"
+                                    }`}
+                                />
+                            ) : null
                         }
                     >
                         {y}
diff --git a/src/components/skeletons/DashboardSkeleton.tsx b/src/components/skeletons/DashboardSkeleton.tsx
new file mode 100644
index 0000000..3f7ee01
--- /dev/null
+++ b/src/components/skeletons/DashboardSkeleton.tsx
@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { StatCardSkeleton } from "./StatCardSkeleton";
+
+export function DashboardSkeleton() {
+    return (
+        <div className="flex flex-col gap-8 w-full max-w-5xl px-6">
+            {/* Header skeleton */}
+            <Skeleton className="h-8 w-64" />
+
+            {/* Dropdown skeleton */}
+            <div className="w-40">
+                <Skeleton className="h-10 w-full" />
+            </div>
+
+            {/* Stats cards */}
+            <div className="grid grid-cols-3 gap-5">
+                <StatCardSkeleton />
+                <StatCardSkeleton />
+                <StatCardSkeleton />
+                <StatCardSkeleton />
+                <StatCardSkeleton />
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/skeletons/GraphsPageSkeleton.tsx b/src/components/skeletons/GraphsPageSkeleton.tsx
new file mode 100644
index 0000000..8000882
--- /dev/null
+++ b/src/components/skeletons/GraphsPageSkeleton.tsx
@@ -0,0 +1,54 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function GraphsPageSkeleton() {
+    return (
+        <div className="w-full min-h-screen flex bg-background">
+            {/* Left Sidebar - Filter Panel */}
+            <div className="flex flex-col border-r border-border p-8 bg-card w-70 h-screen overflow-y-auto sticky top-0 gap-12">
+                <Skeleton className="h-6 w-32" />
+                <div className="space-y-6">
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-32 w-full" />
+                </div>
+            </div>
+
+            {/* Main Content Area */}
+            <div className="flex-1 flex flex-col h-screen overflow-hidden">
+                {/* Header */}
+                <div className="flex items-center justify-between px-8 pt-4 shrink-0">
+                    <Skeleton className="h-7 w-48" />
+                    <div className="flex gap-3">
+                        <Skeleton className="h-9 w-24" />
+                        <Skeleton className="h-9 w-24" />
+                    </div>
+                </div>
+
+                {/* Chart Controls */}
+                <div className="flex items-center justify-between px-8 py-3 shrink-0">
+                    <div className="flex items-center gap-2">
+                        <Skeleton className="h-9 w-20" />
+                        <Skeleton className="h-9 w-20" />
+                    </div>
+                    <div className="flex items-center gap-3">
+                        <Skeleton className="h-9 w-12" />
+                        <Skeleton className="h-9 w-12" />
+                        <Skeleton className="h-9 w-32" />
+                    </div>
+                </div>
+
+                {/* Chart Area */}
+                <div className="flex-1 flex items-center justify-center px-8 bg-background overflow-auto">
+                    <Skeleton className="h-[500px] w-full max-w-4xl" />
+                </div>
+
+                {/* Footer */}
+                <div className="flex flex-col justify-center items-end gap-3 px-8 pb-4 shrink-0">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-4 w-40" />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/skeletons/InfoRowSkeleton.tsx b/src/components/skeletons/InfoRowSkeleton.tsx
new file mode 100644
index 0000000..8495f2f
--- /dev/null
+++ b/src/components/skeletons/InfoRowSkeleton.tsx
@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function InfoRowSkeleton() {
+    return (
+        <div className="space-y-1">
+            <Skeleton className="h-5 w-32" />
+        </div>
+    );
+}
diff --git a/src/components/skeletons/SchoolProfileSkeleton.tsx b/src/components/skeletons/SchoolProfileSkeleton.tsx
new file mode 100644
index 0000000..90b42d1
--- /dev/null
+++ b/src/components/skeletons/SchoolProfileSkeleton.tsx
@@ -0,0 +1,53 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { InfoRowSkeleton } from "./InfoRowSkeleton";
+import { StatCardSkeletonWithAspect } from "./StatCardSkeleton";
+
+export function SchoolProfileSkeleton() {
+    return (
+        <div className="h-screen w-full bg-background overflow-y-auto flex justify-center">
+            <div className="w-full flex flex-col gap-8 py-8 max-w-5xl px-6">
+                {/* Breadcrumbs skeleton */}
+                <Skeleton className="h-6 w-48" />
+
+                {/* Header skeleton */}
+                <Skeleton className="h-8 w-64" />
+
+                {/* Stats cards */}
+                <div className="grid grid-cols-3 gap-8">
+                    <StatCardSkeletonWithAspect />
+                    <StatCardSkeletonWithAspect />
+                    <StatCardSkeletonWithAspect />
+                </div>
+
+                {/* School information */}
+                <div className="space-y-2 text-base">
+                    <InfoRowSkeleton />
+                    <InfoRowSkeleton />
+                    <InfoRowSkeleton />
+                </div>
+
+                {/* Placeholders for charts */}
+                <div className="grid grid-cols-3 gap-8">
+                    <div className="border border-border rounded-lg p-6 col-span-2">
+                        <div className="h-48 flex items-center justify-center bg-muted rounded">
+                            <Skeleton className="h-6 w-32" />
+                        </div>
+                    </div>
+                    <div className="border border-border rounded-lg p-6">
+                        <div className="h-48 flex items-center justify-center bg-muted rounded">
+                            <Skeleton className="h-6 w-24" />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Data table placeholder */}
+                <div className="border border-border rounded-lg p-6">
+                    <Skeleton className="h-7 w-48 mb-4" />
+                    <div className="h-48 flex items-center justify-center bg-muted rounded">
+                        <Skeleton className="h-4 w-32" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/skeletons/StatCardSkeleton.tsx b/src/components/skeletons/StatCardSkeleton.tsx
new file mode 100644
index 0000000..29b1e56
--- /dev/null
+++ b/src/components/skeletons/StatCardSkeleton.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function StatCardSkeleton() {
+    return (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-border py-6 gap-5">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-12 w-32" />
+        </div>
+    );
+}
+
+export function StatCardSkeletonWithAspect() {
+    return (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-border p-6 aspect-247/138 gap-5">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-12 w-32" />
+        </div>
+    );
+}
diff --git a/src/components/skeletons/TableSkeleton.tsx b/src/components/skeletons/TableSkeleton.tsx
new file mode 100644
index 0000000..a25f060
--- /dev/null
+++ b/src/components/skeletons/TableSkeleton.tsx
@@ -0,0 +1,51 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+type TableSkeletonProps = {
+    rows?: number;
+    cols?: number;
+};
+
+export function TableSkeleton({ rows = 8, cols = 5 }: TableSkeletonProps) {
+    return (
+        <div className="overflow-x-auto rounded-md border">
+            <div className="border-separate border-spacing-0">
+                {/* Header */}
+                <div className="sticky top-0 z-10 border-b bg-muted">
+                    <div className="flex">
+                        {Array.from({ length: cols }).map((_, c) => (
+                            <div
+                                key={c}
+                                className={`flex-1 p-4 border-r ${
+                                    c === 0
+                                        ? "sticky left-0 z-30 min-w-[200px] w-[200px]"
+                                        : ""
+                                }`}
+                            >
+                                <Skeleton className="h-4 w-24 mx-auto" />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                {/* Rows */}
+                <div className="divide-y">
+                    {Array.from({ length: rows }).map((_, r) => (
+                        <div key={r} className="flex">
+                            {Array.from({ length: cols }).map((_, c) => (
+                                <div
+                                    key={c}
+                                    className={`flex-1 p-4 border-r ${
+                                        c === 0
+                                            ? "sticky left-0 z-20 bg-muted min-w-[200px] w-[200px]"
+                                            : ""
+                                    }`}
+                                >
+                                    <Skeleton className="h-4 w-20 mx-auto" />
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..87d263d
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    className,
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..ff99118
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("animate-pulse rounded-md bg-primary/10", className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };

From ab19f86b3caa9d8d1bc99dc040a1890d7b8305c8 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 18:07:34 +0000
Subject: [PATCH 6/8] feat: make the schools page look boss

---
 src/app/layout.tsx                  |  4 +--
 src/app/schools/page.tsx            | 47 +++++++++++------------------
 src/components/Breadcrumbs.tsx      | 10 +++---
 src/components/Dashboard.tsx        |  4 +--
 src/components/DataTableSchools.tsx |  2 +-
 src/components/SchoolSearchbar.tsx  | 35 ++++++++++++++++-----
 src/components/ui/breadcrumb.tsx    |  2 +-
 src/components/ui/button.tsx        |  2 +-
 8 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 681cbb8..409b37b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,10 +27,10 @@ export default function RootLayout({
             lang="en"
             className={`${millerBanner.variable} ${millerDisplay.variable} ${millerText.variable} ${interstate.variable}`}
         >
-            <body className="font-sans flex flex-row h-screen">
+            <body className="font-sans flex flex-row h-screen overflow-hidden">
                 <ResponsiveLayout>
                     <Sidebar />
-                    <main className="flex-1 flex justify-center">
+                    <main className="flex-1 flex justify-center overflow-hidden">
                         {children}
                     </main>
                 </ResponsiveLayout>
diff --git a/src/app/schools/page.tsx b/src/app/schools/page.tsx
index a583e53..4b50b64 100644
--- a/src/app/schools/page.tsx
+++ b/src/app/schools/page.tsx
@@ -29,7 +29,7 @@ export default function SchoolsPage() {
 
         setError(null);
 
-        fetch(`/api/schools?year=` + year)
+        fetch(`/api/schools?year=${year}`)
             .then((response) => {
                 if (!response.ok) {
                     throw new Error(`Failed to fetch school data`);
@@ -40,43 +40,32 @@ export default function SchoolsPage() {
                 setSchoolInfo(data);
             })
             .catch((error) => {
-                // eslint-disable-next-line no-console
                 console.log(error);
                 setError(error.message || "Failed to load school data");
             });
     }, [year]);
 
     return (
-        <div className="font-sans mt-5">
-            <div className="w-11/12 mx-auto">
-                <div className="flex items-center">
-                    {/*Table and charts need to be a toggle */}
-                    <Breadcrumbs />
-                    <div className="flex-1 text-center">
-                        <h1 className="text-xl font-bold sm: pr-6">
-                            {" "}
-                            Schools{" "}
-                        </h1>
-                    </div>
+        <div className="font-sans h-full w-full max-w-full flex flex-col overflow-hidden px-6 py-5">
+            <div className="flex items-center shrink-0 pb-5">
+                <Breadcrumbs />
+                <div className="flex-1 text-center">
+                    <h1 className="text-xl font-bold sm: pr-6"> Schools </h1>
+                </div>
 
-                    <div className="flex items-center gap-4">
-                        <YearDropdown
-                            selectedYear={year}
-                            onYearChange={setYear}
-                        />
-                        <SchoolSearchBar
-                            search={search}
-                            setSearch={setSearch}
-                        />
-                    </div>
+                <div className="flex items-center gap-4">
+                    <YearDropdown selectedYear={year} onYearChange={setYear} />
+                    <SchoolSearchBar search={search} setSearch={setSearch} />
                 </div>
+            </div>
 
-                <div className="mt-5 overflow-x-auto">
-                    {error && (
-                        <div className="mb-4 p-4 bg-destructive/10 border border-destructive rounded-md text-destructive">
-                            {error}
-                        </div>
-                    )}
+            <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+                {error && (
+                    <div className="mb-4 p-4 bg-destructive/10 border border-destructive rounded-md text-destructive shrink-0">
+                        {error}
+                    </div>
+                )}
+                <div className="flex-1 overflow-hidden min-h-0">
                     <SchoolsDataTable
                         columns={columns}
                         data={schoolInfo}
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 7e8bc05..6efc768 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -12,9 +12,10 @@
 
 "use client";
 
-import React from "react";
+import { ArrowLeftIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import React from "react";
 import {
     Breadcrumb,
     BreadcrumbItem,
@@ -22,24 +23,21 @@ import {
     BreadcrumbList,
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-
 import { Button } from "@/components/ui/button";
 
-import { ArrowLeftIcon } from "lucide-react";
-
 export function Breadcrumbs() {
     const pathname = usePathname();
     const crumbTrail = pathname.split("/").filter((item) => item !== "");
     const backArrowHref = `/${crumbTrail.slice(0, crumbTrail.length - 1).join("/")}`;
 
     return (
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 font-semibold">
             <Button
                 asChild
                 variant="ghost"
                 size="icon"
                 aria-label="Submit"
-                className="outline  hover:bg-accent"
+                className="outline hover:bg-accent h-7 w-7"
             >
                 <Link href={backArrowHref}>
                     <ArrowLeftIcon />
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 845e85a..7a1c77d 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -33,7 +33,7 @@ type Stats = {
 };
 
 export default function Dashboard() {
-    const [year, setYear] = useState(2024);
+    const [year, setYear] = useState(() => new Date().getFullYear());
     const [stats, setStats] = useState<Stats | null>(null);
 
     useEffect(() => {
@@ -54,7 +54,7 @@ export default function Dashboard() {
     }, [year]);
 
     return (
-        <div className="flex flex-col gap-8 w-full max-w-5xl px-6">
+        <div className="flex flex-col gap-8 w-full px-6">
             <h1 className="text-2xl font-semibold">Overview Dashboard</h1>
             <div className="">
                 <div className="w-40">
diff --git a/src/components/DataTableSchools.tsx b/src/components/DataTableSchools.tsx
index ecb839e..d1d43ff 100644
--- a/src/components/DataTableSchools.tsx
+++ b/src/components/DataTableSchools.tsx
@@ -65,7 +65,7 @@ export function SchoolsDataTable<TData, TValue>({
     return (
         //Example code should be changed
         //border for school name column disappears when scrolling right
-        <div className="overflow-x-auto rounded-md border text-center max-h-[calc(100vh-100px)] overflow-y-auto">
+        <div className="h-full overflow-auto rounded-md border text-center">
             <Table className="border-separate border-spacing-0">
                 <TableHeader className="sticky top-0 z-10">
                     {table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/components/SchoolSearchbar.tsx b/src/components/SchoolSearchbar.tsx
index bbbe5d3..5feedc3 100644
--- a/src/components/SchoolSearchbar.tsx
+++ b/src/components/SchoolSearchbar.tsx
@@ -12,8 +12,9 @@
 
 "use client";
 
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import type React from "react";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
 type SearchBarProps = {
@@ -33,12 +34,32 @@ export default function SchoolSearchBar({
         setSearch(value);
     };
 
+    const handleClear = () => {
+        setSearch("");
+    };
+
     return (
-        <Input
-            type="text"
-            value={search}
-            onChange={handleChange}
-            placeholder={placeholder}
-        />
+        <div className={`relative ${className}`}>
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+            <Input
+                type="text"
+                value={search}
+                onChange={handleChange}
+                placeholder={placeholder}
+                className="pl-9 pr-9"
+            />
+            {search && (
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
+                    onClick={handleClear}
+                    aria-label="Clear search"
+                >
+                    <X className="h-4 w-4" />
+                </Button>
+            )}
+        </div>
     );
 }
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 4a4ed3a..040d802 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 5301880..547d803 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

From c125173de36f8cf2b4c19792e141d5dd7527d401 Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 18:57:27 +0000
Subject: [PATCH 7/8] feat: add Radix UI Tabs component and update styles for
 better UI consistency

---
 package-lock.json                             |  62 +++
 package.json                                  |   1 +
 src/app/globals.css                           |   2 +-
 src/app/graphs/page.tsx                       | 185 ++++-----
 src/app/schools/loading.tsx                   |  24 +-
 src/components/Breadcrumbs.tsx                |  13 +-
 src/components/Checkbox.tsx                   |  93 +++--
 src/components/Dashboard.tsx                  |   2 +-
 src/components/GraphFilters.tsx               | 199 ++++++---
 src/components/LineGraph.tsx                  | 388 ++++++++++++------
 src/components/SpreadsheetConfirmation.tsx    |  12 +-
 .../skeletons/DashboardSkeleton.tsx           |   2 +-
 src/components/skeletons/TableSkeleton.tsx    |   2 +-
 src/components/ui/tabs.tsx                    |  55 +++
 14 files changed, 706 insertions(+), 334 deletions(-)
 create mode 100644 src/components/ui/tabs.tsx

diff --git a/package-lock.json b/package-lock.json
index 6f02968..3004adc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,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",
@@ -1852,6 +1853,37 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-roving-focus": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+            "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-collection": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-direction": "1.1.1",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-controllable-state": "1.2.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-select": {
             "version": "2.2.6",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
@@ -1931,6 +1963,36 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-tabs": {
+            "version": "1.1.13",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+            "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-direction": "1.1.1",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-presence": "1.1.5",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-roving-focus": "1.1.11",
+                "@radix-ui/react-use-controllable-state": "1.2.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-callback-ref": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
diff --git a/package.json b/package.json
index 5eca4f2..8e23178 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/globals.css b/src/app/globals.css
index af5d1c3..f5dd97b 100644
--- a/src/app/globals.css
+++ b/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);
diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index e74eada..09e71e3 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -10,6 +10,14 @@
  **************************************************************/
 "use client";
 
+import {
+    BarChart,
+    Calendar,
+    CalendarDays,
+    ChartColumn,
+    ChevronDown,
+    LineChart,
+} from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import BarGraph, { type BarDataset } from "@/components/BarGraph";
@@ -22,6 +30,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 // define Project type
 type Project = {
@@ -75,7 +84,7 @@ const groupByLabels: Record<string, string> = {
 export default function GraphsPage() {
     const [allProjects, setAllProjects] = useState<Project[]>([]);
     const [filters, setFilters] = useState<Filters>(defaultFilters);
-    const [chartType, setChartType] = useState<"line" | "bar">("bar");
+    const [chartType, setChartType] = useState<"line" | "bar">("line");
     const [timePeriod, setTimePeriod] = useState<
         "all" | "3y" | "5y" | "custom"
     >("all");
@@ -106,6 +115,13 @@ export default function GraphsPage() {
         fetchProjects();
     }, []);
 
+    // Sync tempYearRange with yearRange only when popover opens in custom mode
+    useEffect(() => {
+        if (yearRangeOpen && timePeriod === "custom") {
+            setTempYearRange(yearRange);
+        }
+    }, [yearRangeOpen, timePeriod, yearRange]);
+
     // Calculate the current year range based on time period selection
     const currentYearRange = useMemo(() => {
         if (timePeriod === "custom") {
@@ -330,7 +346,11 @@ export default function GraphsPage() {
                                 Projects by {groupByLabels[filters.groupBy]}
                             </h1>
                             <div className="flex gap-3">
-                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-card border border-border rounded-md hover:bg-accent">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="flex items-center gap-2"
+                                >
                                     <svg
                                         className="w-4 h-4"
                                         fill="none"
@@ -345,8 +365,12 @@ export default function GraphsPage() {
                                         />
                                     </svg>
                                     Export
-                                </button>
-                                <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-card border border-border rounded-md hover:bg-accent">
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="flex items-center gap-2"
+                                >
                                     <svg
                                         className="w-4 h-4"
                                         fill="none"
@@ -361,123 +385,90 @@ export default function GraphsPage() {
                                         />
                                     </svg>
                                     Share
-                                </button>
+                                </Button>
                             </div>
                         </div>
 
                         {/* Chart Controls */}
                         <div className="flex items-center justify-between px-8 py-3 shrink-0">
                             <div className="flex items-center">
-                                <button
-                                    onClick={() => setChartType("line")}
-                                    className={`px-4 py-2 text-sm font-medium rounded-l-md ${
-                                        chartType === "line"
-                                            ? "text-primary bg-primary/10 border border-primary z-10"
-                                            : "text-foreground bg-card border border-border hover:bg-accent"
-                                    }`}
-                                >
-                                    <svg
-                                        className="w-4 h-4 inline mr-1"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
-                                        />
-                                    </svg>
-                                    Line
-                                </button>
-                                <button
-                                    onClick={() => setChartType("bar")}
-                                    className={`px-4 py-2 text-sm font-medium rounded-r-md -ml-px ${
-                                        chartType === "bar"
-                                            ? "text-primary bg-primary/10 border border-primary z-10"
-                                            : "text-foreground bg-card border border-border hover:bg-accent"
-                                    }`}
+                                <Tabs
+                                    value={chartType}
+                                    onValueChange={(value) =>
+                                        setChartType(value as "line" | "bar")
+                                    }
                                 >
-                                    <svg
-                                        className="w-4 h-4 inline mr-1"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-                                        />
-                                    </svg>
-                                    Bar
-                                </button>
+                                    <TabsList>
+                                        <TabsTrigger
+                                            value="line"
+                                            className="gap-2"
+                                        >
+                                            <LineChart className="w-4 h-4" />
+                                            Line
+                                        </TabsTrigger>
+                                        <TabsTrigger
+                                            value="bar"
+                                            className="gap-2"
+                                        >
+                                            <ChartColumn className="w-4 h-4" />
+                                            Bar
+                                        </TabsTrigger>
+                                    </TabsList>
+                                </Tabs>
                             </div>
 
-                            <div className="flex items-center gap-3">
-                                <button
-                                    onClick={() => setTimePeriod("3y")}
-                                    className={`px-4 py-2 text-sm font-medium rounded-md ${
+                            <div className="flex items-center">
+                                <Button
+                                    type="button"
+                                    variant={
                                         timePeriod === "3y"
-                                            ? "text-primary bg-primary/10 border border-primary"
-                                            : "text-foreground bg-card border border-border hover:bg-accent"
-                                    }`}
+                                            ? "default"
+                                            : "outline"
+                                    }
+                                    size="sm"
+                                    onClick={() => setTimePeriod("3y")}
+                                    className="rounded-l-md rounded-r-none border-r-0"
                                 >
                                     3y
-                                </button>
-                                <button
-                                    onClick={() => setTimePeriod("5y")}
-                                    className={`px-4 py-2 text-sm font-medium rounded-md ${
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant={
                                         timePeriod === "5y"
-                                            ? "text-primary bg-primary/10 border border-primary"
-                                            : "text-foreground bg-card border border-border hover:bg-accent"
-                                    }`}
+                                            ? "default"
+                                            : "outline"
+                                    }
+                                    size="sm"
+                                    onClick={() => setTimePeriod("5y")}
+                                    className="rounded-none border-l-0 border-r-0 -ml-px"
                                 >
                                     5y
-                                </button>
+                                </Button>
                                 <Popover
                                     open={yearRangeOpen}
                                     onOpenChange={setYearRangeOpen}
                                 >
                                     <PopoverTrigger asChild>
-                                        <button
-                                            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md ${
+                                        <Button
+                                            type="button"
+                                            variant={
                                                 timePeriod === "custom"
-                                                    ? "text-primary-foreground bg-primary hover:bg-primary/90"
-                                                    : "text-foreground bg-card border border-border hover:bg-accent"
-                                            }`}
+                                                    ? "default"
+                                                    : "outline"
+                                            }
+                                            size="sm"
+                                            onClick={() => {
+                                                if (timePeriod !== "custom") {
+                                                    setTimePeriod("custom");
+                                                }
+                                            }}
+                                            className="rounded-r-md rounded-l-none border-l-0 -ml-px flex items-center gap-2"
                                         >
-                                            <svg
-                                                className="w-4 h-4"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                                                />
-                                            </svg>
+                                            <CalendarDays />
                                             {currentYearRange.start} -{" "}
                                             {currentYearRange.end}
-                                            <svg
-                                                className="w-4 h-4"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M19 9l-7 7-7-7"
-                                                />
-                                            </svg>
-                                        </button>
+                                            <ChevronDown />
+                                        </Button>
                                     </PopoverTrigger>
                                     <PopoverContent className="w-80">
                                         <div className="space-y-4">
diff --git a/src/app/schools/loading.tsx b/src/app/schools/loading.tsx
index 618960a..9e3ca24 100644
--- a/src/app/schools/loading.tsx
+++ b/src/app/schools/loading.tsx
@@ -4,19 +4,19 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
     return (
-        <div className="font-sans mt-5">
-            <div className="w-11/12 mx-auto">
-                <div className="flex items-center font-bold">
-                    <Breadcrumbs />
-                    <div className="flex-1 text-center">
-                        <Skeleton className="h-7 w-24 mx-auto" />
-                    </div>
-                    <div className="flex items-center gap-4">
-                        <Skeleton className="h-10 w-[180px]" />
-                        <Skeleton className="h-10 w-64" />
-                    </div>
+        <div className="font-sans h-full w-full max-w-full flex flex-col overflow-hidden px-6 py-5">
+            <div className="flex items-center shrink-0 pb-5">
+                <Breadcrumbs />
+                <div className="flex-1 text-center">
+                    <Skeleton className="h-7 w-24 mx-auto" />
                 </div>
-                <div className="mt-5 overflow-x-auto">
+                <div className="flex items-center gap-4">
+                    <Skeleton className="h-10 w-[180px]" />
+                    <Skeleton className="h-10 w-64" />
+                </div>
+            </div>
+            <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+                <div className="flex-1 overflow-hidden min-h-0">
                     <TableSkeleton rows={10} cols={6} />
                 </div>
             </div>
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 6efc768..a0bc2e1 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -30,6 +30,15 @@ export function Breadcrumbs() {
     const crumbTrail = pathname.split("/").filter((item) => item !== "");
     const backArrowHref = `/${crumbTrail.slice(0, crumbTrail.length - 1).join("/")}`;
 
+    // Determine if we're on an Analysis page (map or graphs)
+    const isAnalysisPage = pathname === "/map" || pathname === "/graphs";
+    const firstBreadcrumbLabel = isAnalysisPage ? "ANALYSIS" : "OVERVIEW";
+    const firstBreadcrumbHref = isAnalysisPage
+        ? pathname === "/map"
+            ? "/map"
+            : "/graphs"
+        : "/";
+
     return (
         <div className="flex items-center gap-4 font-semibold">
             <Button
@@ -54,7 +63,9 @@ export function Breadcrumbs() {
                                     : "text-muted-foreground"
                             }
                         >
-                            <Link href="/">OVERVIEW</Link>
+                            <Link href={firstBreadcrumbHref}>
+                                {firstBreadcrumbLabel}
+                            </Link>
                         </BreadcrumbLink>
                     </BreadcrumbItem>
                     {crumbTrail.map((link, index) => {
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 7201ad1..d07f9db 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,53 +1,64 @@
-/***************************************************************
- *
- *         /api/components/Checkbox.tsx
- *
- *         Author: Chiara and Steven
- *         Date: 12/6/2025
- *
- *        Summary: checkbox component for filter selection
- **************************************************************/
+"use client";
 
-import React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { X } from "lucide-react";
+import type * as React from "react";
 
-type CheckboxProps = {
-    label: string;
-    onToggle?: (label: string, checked: boolean) => void;
+import { cn } from "@/lib/utils";
+
+type CustomCheckboxProps = {
     isChecked?: boolean;
+    onToggle?: (checked: boolean) => void;
 };
 
-export default function Checkbox({
-    label,
-    onToggle,
+type CheckboxProps = Omit<
+    React.ComponentProps<typeof CheckboxPrimitive.Root>,
+    "checked" | "onCheckedChange"
+> &
+    CustomCheckboxProps & {
+        checked?: boolean;
+        onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    };
+
+function Checkbox({
+    className,
     isChecked,
+    onToggle,
+    checked,
+    onCheckedChange,
+    ...props
 }: CheckboxProps) {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const isChecked = e.target.checked;
-        if (onToggle) onToggle(label, isChecked);
-    };
+    // Map isChecked to checked, and onToggle to onCheckedChange
+    const finalChecked = checked ?? isChecked;
+    const finalOnCheckedChange =
+        onCheckedChange ??
+        (onToggle
+            ? (checkedState: boolean | "indeterminate") => {
+                  // Convert CheckedState to boolean
+                  const isCheckedValue = checkedState === true;
+                  onToggle(isCheckedValue);
+              }
+            : undefined);
 
     return (
-        <label className="flex items-center space-x-3 relative cursor-pointer">
-            {/* Checkbox box */}
-            <input
-                type="checkbox"
-                checked={isChecked || false}
-                onChange={handleChange}
-                className="peer appearance-none w-6 h-6 flex-shrink-0 border-2 border-border rounded transition-colors"
-            />
-
-            {/* X overlay */}
-            <span className="absolute left-0 top-0 w-6 h-6 flex-shrink-0 flex items-center justify-center text-sm text-primary font-extrabold text-lg pointer-events-none peer-checked:flex hidden">
-                ✕
-            </span>
-
-            {/* Label text */}
-            <span
-                className="whitespace-nowrap overflow-hidden text-ellipsis"
-                title={label}
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            className={cn(
+                "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+                className,
+            )}
+            checked={finalChecked}
+            onCheckedChange={finalOnCheckedChange}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="grid place-content-center text-current transition-none"
             >
-                {label}
-            </span>
-        </label>
+                <X className="size-3.5" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
     );
 }
+
+export { Checkbox };
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 7a1c77d..4d269ea 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -54,7 +54,7 @@ export default function Dashboard() {
     }, [year]);
 
     return (
-        <div className="flex flex-col gap-8 w-full px-6">
+        <div className="flex flex-col gap-8 w-full px-6 py-10">
             <h1 className="text-2xl font-semibold">Overview Dashboard</h1>
             <div className="">
                 <div className="w-40">
diff --git a/src/components/GraphFilters.tsx b/src/components/GraphFilters.tsx
index 27f0618..19c9e4c 100644
--- a/src/components/GraphFilters.tsx
+++ b/src/components/GraphFilters.tsx
@@ -14,7 +14,6 @@
 "use client";
 
 import { useState } from "react";
-import Checkbox from "@/components/Checkbox";
 import { Combobox } from "@/components/Combobox";
 
 const measuredAsOptions = [
@@ -34,11 +33,12 @@ const groupByOptions = [
     { value: "project-type", label: "Project Type" },
 ];
 
+import { Checkbox } from "@/components/Checkbox";
 import {
     Accordion,
+    AccordionContent,
     AccordionItem,
     AccordionTrigger,
-    AccordionContent,
 } from "@/components/ui/accordion";
 
 export type Filters = {
@@ -241,7 +241,10 @@ export default function GraphFilters({
         <div className="mb-8 space-y-6">
             {/* Measured As */}
             <div>
-                <label className="block text-sm font-semibold mb-2 text-foreground">
+                <label
+                    htmlFor="measuredAs"
+                    className="block text-sm font-semibold mb-2 text-foreground"
+                >
                     Measured as
                 </label>
                 <Combobox
@@ -253,7 +256,10 @@ export default function GraphFilters({
 
             {/* Group By */}
             <div>
-                <label className="block text-sm font-semibold mb-2 text-foreground">
+                <label
+                    htmlFor="groupBy"
+                    className="block text-sm font-semibold mb-2 text-foreground"
+                >
                     Group by
                 </label>
                 <Combobox
@@ -265,7 +271,10 @@ export default function GraphFilters({
 
             {/* Filter By */}
             <div>
-                <h2 className="text-sm font-semibold mb-3 text-foreground">
+                <h2
+                    id="filterBy"
+                    className="text-sm font-semibold mb-3 text-foreground"
+                >
                     Filter by
                 </h2>
 
@@ -298,6 +307,7 @@ export default function GraphFilters({
 
                 {/* Add Filter Button */}
                 <button
+                    type="button"
                     className="flex items-center gap-1 text-sm text-foreground hover:text-foreground mb-4"
                     onClick={() => {
                         if (showAllFilters) {
@@ -336,16 +346,25 @@ export default function GraphFilters({
                         <AccordionItem value="gateway-cities">
                             <AccordionTrigger>Gateway Cities</AccordionTrigger>
                             <AccordionContent>
-                                <Checkbox
-                                    label="Gateway Cities"
-                                    isChecked={gatewayCities}
-                                    onToggle={(_, checked) => {
-                                        setGatewayCities(checked);
-                                        updateFilters({
-                                            gatewayCities: checked,
-                                        });
-                                    }}
-                                />
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        id="gateway-cities-checkbox"
+                                        checked={gatewayCities}
+                                        onCheckedChange={(checked) => {
+                                            const isChecked = checked === true;
+                                            setGatewayCities(isChecked);
+                                            updateFilters({
+                                                gatewayCities: isChecked,
+                                            });
+                                        }}
+                                    />
+                                    <label
+                                        htmlFor="gateway-cities-checkbox"
+                                        className="text-sm cursor-pointer"
+                                    >
+                                        Gateway Cities
+                                    </label>
+                                </div>
                             </AccordionContent>
                         </AccordionItem>
                     )}
@@ -357,16 +376,31 @@ export default function GraphFilters({
                             <AccordionContent>
                                 <div className="max-h-40 overflow-y-auto space-y-1 border rounded-md p-2">
                                     {schools.map((school) => (
-                                        <Checkbox
+                                        <div
                                             key={school}
-                                            label={school}
-                                            isChecked={selectedSchools.includes(
-                                                school,
-                                            )}
-                                            onToggle={
-                                                handleSchoolCheckboxToggle
-                                            }
-                                        />
+                                            className="flex items-center gap-2"
+                                        >
+                                            <Checkbox
+                                                id={`school-checkbox-${school}`}
+                                                checked={selectedSchools.includes(
+                                                    school,
+                                                )}
+                                                onCheckedChange={(checked) => {
+                                                    const isChecked =
+                                                        checked === true;
+                                                    handleSchoolCheckboxToggle(
+                                                        school,
+                                                        isChecked,
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                htmlFor={`school-checkbox-${school}`}
+                                                className="text-sm cursor-pointer"
+                                            >
+                                                {school}
+                                            </label>
+                                        </div>
                                     ))}
                                 </div>
                                 <button
@@ -386,14 +420,31 @@ export default function GraphFilters({
                             <AccordionContent>
                                 <div className="max-h-40 overflow-y-auto space-y-1 border rounded-md p-2">
                                     {cities.map((city) => (
-                                        <Checkbox
+                                        <div
                                             key={city}
-                                            label={city}
-                                            isChecked={selectedCities.includes(
-                                                city,
-                                            )}
-                                            onToggle={handleCityCheckboxToggle}
-                                        />
+                                            className="flex items-center gap-2"
+                                        >
+                                            <Checkbox
+                                                id={`city-checkbox-${city}`}
+                                                checked={selectedCities.includes(
+                                                    city,
+                                                )}
+                                                onCheckedChange={(checked) => {
+                                                    const isChecked =
+                                                        checked === true;
+                                                    handleCityCheckboxToggle(
+                                                        city,
+                                                        isChecked,
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                htmlFor={`city-checkbox-${city}`}
+                                                className="text-sm cursor-pointer"
+                                            >
+                                                {city}
+                                            </label>
+                                        </div>
                                     ))}
                                 </div>
                                 <button
@@ -412,26 +463,49 @@ export default function GraphFilters({
                             <AccordionTrigger>Project Type</AccordionTrigger>
                             <AccordionContent>
                                 <div className="space-y-1">
-                                    <Checkbox
-                                        label="Individual Projects"
-                                        isChecked={individualProjects}
-                                        onToggle={(_, checked) => {
-                                            setIndividualProjects(checked);
-                                            updateFilters({
-                                                individualProjects: checked,
-                                            });
-                                        }}
-                                    />
-                                    <Checkbox
-                                        label="Group Projects"
-                                        isChecked={groupProjects}
-                                        onToggle={(_, checked) => {
-                                            setGroupProjects(checked);
-                                            updateFilters({
-                                                groupProjects: checked,
-                                            });
-                                        }}
-                                    />
+                                    <div className="flex items-center gap-2">
+                                        <Checkbox
+                                            id="individual-projects-checkbox"
+                                            checked={individualProjects}
+                                            onCheckedChange={(checked) => {
+                                                const isChecked =
+                                                    checked === true;
+                                                setIndividualProjects(
+                                                    isChecked,
+                                                );
+                                                updateFilters({
+                                                    individualProjects:
+                                                        isChecked,
+                                                });
+                                            }}
+                                        />
+                                        <label
+                                            htmlFor="individual-projects-checkbox"
+                                            className="text-sm cursor-pointer"
+                                        >
+                                            Individual Projects
+                                        </label>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <Checkbox
+                                            id="group-projects-checkbox"
+                                            checked={groupProjects}
+                                            onCheckedChange={(checked) => {
+                                                const isChecked =
+                                                    checked === true;
+                                                setGroupProjects(isChecked);
+                                                updateFilters({
+                                                    groupProjects: isChecked,
+                                                });
+                                            }}
+                                        />
+                                        <label
+                                            htmlFor="group-projects-checkbox"
+                                            className="text-sm cursor-pointer"
+                                        >
+                                            Group Projects
+                                        </label>
+                                    </div>
                                 </div>
                             </AccordionContent>
                         </AccordionItem>
@@ -444,11 +518,24 @@ export default function GraphFilters({
                                 Teacher Participation
                             </AccordionTrigger>
                             <AccordionContent>
-                                <Checkbox
-                                    label="Enable Teacher Participation Filter"
-                                    onToggle={handleTeacherFilterToggle}
-                                    isChecked={teacherFilterEnabled}
-                                />
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        id="teacher-filter-checkbox"
+                                        onCheckedChange={(checked) =>
+                                            handleTeacherFilterToggle(
+                                                "Enable Teacher Participation Filter",
+                                                checked === true,
+                                            )
+                                        }
+                                        checked={teacherFilterEnabled}
+                                    />
+                                    <label
+                                        htmlFor="teacher-filter-checkbox"
+                                        className="text-sm cursor-pointer"
+                                    >
+                                        Enable Teacher Participation Filter
+                                    </label>
+                                </div>
 
                                 <div className="flex gap-2 mt-4">
                                     <select
diff --git a/src/components/LineGraph.tsx b/src/components/LineGraph.tsx
index 167a09d..a625c6d 100644
--- a/src/components/LineGraph.tsx
+++ b/src/components/LineGraph.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useRef, useEffect, useMemo } from "react";
 import * as d3 from "d3";
+import { useEffect, useMemo, useRef } from "react";
 
 export type GraphDataset = {
     label: string;
@@ -27,13 +27,24 @@ export default function MultiLineGraph({
         null,
         undefined
     > | null>(null);
+    const isFirstRender = useRef(true);
+    const groupsRef = useRef<{
+        xAxis?: d3.Selection<SVGGElement, unknown, null, undefined>;
+        yAxis?: d3.Selection<SVGGElement, unknown, null, undefined>;
+        xAxisLabel?: d3.Selection<SVGTextElement, unknown, null, undefined>;
+        yAxisLabel?: d3.Selection<SVGTextElement, unknown, null, undefined>;
+        lines?: d3.Selection<SVGGElement, unknown, null, undefined>;
+        dots?: d3.Selection<SVGGElement, unknown, null, undefined>;
+        legend?: d3.Selection<SVGGElement, unknown, null, undefined>;
+    }>({});
 
     // Memoize color scale to prevent re-running useEffect unnecessarily
     const colorScale = useMemo(() => d3.scaleOrdinal(d3.schemeCategory10), []);
 
     useEffect(() => {
         const svg = d3.select(svgRef.current);
-        if (!svg.node() || !wrapperRef.current) return;
+        const svgNode = svg.node();
+        if (!svgNode || !wrapperRef.current) return;
 
         // Create tooltip once (outside drawChart to prevent memory leak)
         if (!tooltipRef.current) {
@@ -49,14 +60,15 @@ export default function MultiLineGraph({
                 .style("border-radius", "0.375rem")
                 .style("font-size", "0.875rem")
                 .style("pointer-events", "none")
-                .style("transform", "translate(-50%, -125%)");
+                .style("transform", "translate(-50%, -125%)")
+                .style("z-index", "1000");
         }
 
         const tooltip = tooltipRef.current;
 
         if (datasets.length === 0) return;
 
-        const width = 1000;
+        const width = 900; // Match actual SVG width
         const height = 400;
         const margin = { top: 20, right: 20, bottom: 100, left: 60 };
 
@@ -64,12 +76,28 @@ export default function MultiLineGraph({
         const allPoints = datasets.flatMap((d) => d.data);
         if (allPoints.length === 0) return;
 
-        // Convert x values to numbers for scaling
-        const xValues = allPoints.map((d) => Number(d.x));
+        // Convert x values to numbers for scaling, filtering out invalid values
+        const xValues = allPoints
+            .map((d) => {
+                const num = Number(d.x);
+                return Number.isFinite(num) ? num : null;
+            })
+            .filter((v): v is number => v !== null);
+
+        if (xValues.length === 0) {
+            console.warn("LineGraph: No valid numeric x values found");
+            return;
+        }
+
+        const xExtent = d3.extent(xValues);
+        if (!xExtent[0] || !xExtent[1]) {
+            console.warn("LineGraph: Invalid x extent");
+            return;
+        }
 
         const x = d3
             .scaleLinear()
-            .domain(d3.extent(xValues) as [number, number])
+            .domain(xExtent as [number, number])
             .range([margin.left, width - margin.right]);
 
         const y = d3
@@ -77,166 +105,290 @@ export default function MultiLineGraph({
             .domain([0, d3.max(allPoints, (d) => d.y) || 10])
             .range([height - margin.bottom, margin.top]);
 
-        svg.selectAll("*").remove(); // Clear previous render
-
-        // X-axis
-        svg.append("g")
-            .attr("transform", `translate(0,${height - margin.bottom})`)
-            .call(
-                d3
-                    .axisBottom(x)
-                    .ticks(
-                        // Ensure reasonable number of x-axis ticks
-                        Math.min(
-                            Math.max(...xValues) - Math.min(...xValues),
-                            10,
-                        ),
-                    )
-                    .tickFormat(d3.format("d")),
-            )
-            .call((g) => g.selectAll(".tick line").remove())
-            .call((g) => g.select(".domain").remove());
-
-        // X-axis label
-        svg.append("text")
+        // Helper to position tooltip correctly
+        const positionTooltip = (
+            event: MouseEvent | FocusEvent,
+            d: { x: string | number; y: number },
+        ) => {
+            // Recalculate wrapper rect on each event to handle scrolling/resizing
+            const wrapperRect = wrapperRef.current?.getBoundingClientRect();
+            if (!wrapperRect) return;
+
+            let clientX: number;
+            let clientY: number;
+
+            if (event.type === "focus") {
+                // For keyboard focus, use the circle's position
+                const circle = event.target as SVGCircleElement;
+                const circleRect = circle.getBoundingClientRect();
+                clientX = circleRect.left + circleRect.width / 2;
+                clientY = circleRect.top + circleRect.height / 2;
+            } else {
+                // For mouse events, use the actual pointer position
+                const mouseEvent = event as MouseEvent;
+                clientX = mouseEvent.clientX;
+                clientY = mouseEvent.clientY;
+            }
+
+            // Convert to wrapper-relative coordinates
+            const wrapperX = clientX - wrapperRect.left;
+            const wrapperY = clientY - wrapperRect.top;
+
+            tooltip
+                .text(String(d.y))
+                .transition()
+                .duration(100)
+                .style("opacity", 1)
+                .style("left", `${wrapperX}px`)
+                .style("top", `${wrapperY}px`);
+        };
+
+        // Create stable groups if they don't exist
+        if (!groupsRef.current.xAxis) {
+            groupsRef.current.xAxis = svg
+                .append("g")
+                .attr("class", "x-axis")
+                .attr("transform", `translate(0,${height - margin.bottom})`);
+        }
+
+        if (!groupsRef.current.yAxis) {
+            groupsRef.current.yAxis = svg
+                .append("g")
+                .attr("class", "y-axis")
+                .attr("transform", `translate(${margin.left},0)`);
+        }
+
+        if (!groupsRef.current.xAxisLabel) {
+            groupsRef.current.xAxisLabel = svg
+                .append("text")
+                .attr("class", "x-axis-label")
+                .attr("text-anchor", "middle")
+                .attr("fill", "#555");
+        }
+
+        if (!groupsRef.current.yAxisLabel) {
+            groupsRef.current.yAxisLabel = svg
+                .append("text")
+                .attr("class", "y-axis-label")
+                .attr("transform", "rotate(-90)")
+                .attr("text-anchor", "middle")
+                .attr("fill", "#555");
+        }
+
+        if (!groupsRef.current.lines) {
+            groupsRef.current.lines = svg.append("g").attr("class", "lines");
+        }
+
+        if (!groupsRef.current.dots) {
+            groupsRef.current.dots = svg.append("g").attr("class", "dots");
+        }
+
+        if (!groupsRef.current.legend) {
+            groupsRef.current.legend = svg
+                .append("g")
+                .attr("class", "legend")
+                .attr(
+                    "transform",
+                    `translate(${margin.left}, ${height - margin.bottom + 60})`,
+                );
+        }
+
+        // Update X-axis
+        groupsRef.current.xAxis.call(
+            d3
+                .axisBottom(x)
+                .ticks(Math.min(width / 100, 10)) // Reasonable tick count based on width
+                .tickFormat(d3.format("d")),
+        );
+        groupsRef.current.xAxis.selectAll(".tick line").remove();
+        groupsRef.current.xAxis.select(".domain").remove();
+
+        // Update X-axis label
+        groupsRef.current.xAxisLabel
             .attr("x", margin.left + (width - margin.left - margin.right) / 2)
             .attr("y", height - margin.bottom + 40)
-            .attr("text-anchor", "middle")
-            .attr("fill", "#555")
             .text(xAxisLabel);
 
-        // Y-axis
+        // Update Y-axis
         const yTicks = y.ticks().filter((t) => Number.isInteger(t));
-        svg.append("g")
-            .attr("transform", `translate(${margin.left},0)`)
-            .call(
-                d3
-                    .axisLeft(y)
-                    .tickValues(yTicks)
-                    .tickSize(-width + margin.left + margin.right),
-            )
-            .call((g) => g.selectAll(".tick line").attr("stroke", "#ccc"))
-            .call((g) => g.select(".domain").remove())
-            .call((g) => g.selectAll(".tick text").attr("fill", "#555"));
-
-        // Y-axis label
-        svg.append("text")
-            .attr("transform", "rotate(-90)")
+        groupsRef.current.yAxis.call(
+            d3
+                .axisLeft(y)
+                .tickValues(yTicks)
+                .tickSize(-width + margin.left + margin.right),
+        );
+        groupsRef.current.yAxis.selectAll(".tick line").attr("stroke", "#ccc");
+        groupsRef.current.yAxis.select(".domain").remove();
+        groupsRef.current.yAxis.selectAll(".tick text").attr("fill", "#555");
+
+        // Update Y-axis label
+        groupsRef.current.yAxisLabel
             .attr("x", -margin.top - (height - margin.top - margin.bottom) / 2)
             .attr("y", 15)
-            .attr("text-anchor", "middle")
-            .attr("fill", "#555")
             .text(yAxisLabel);
 
         const lineGen = d3
             .line<{ x: string | number; y: number }>()
-            .x((d) => x(Number(d.x)))
+            .x((d) => {
+                const num = Number(d.x);
+                return Number.isFinite(num) ? x(num) : 0;
+            })
             .y((d) => y(d.y));
 
-        datasets.forEach((dataset) => {
-            const path = svg
-                .append("path")
-                .datum(dataset.data)
-                .attr("fill", "none")
-                .attr("stroke", colorScale(dataset.label))
-                .attr("stroke-width", 2)
-                .attr("d", lineGen);
-
-            // Animate line drawing with stroke-dasharray/offset trick
-            const length = path.node()?.getTotalLength() || 0;
-            path.attr("stroke-dasharray", `${length} ${length}`)
-                .attr("stroke-dashoffset", length)
-                .transition()
-                .duration(1500)
-                .attr("stroke-dashoffset", 0);
-        });
+        // Update lines using join pattern
+        if (!groupsRef.current.lines) return;
+        const lines = groupsRef.current.lines
+            .selectAll<SVGPathElement, GraphDataset>("path.line")
+            .data(datasets, (d: GraphDataset) => d.label);
+
+        lines.exit().remove();
 
-        datasets.forEach((dataset) => {
-            // Sanitize label for use in CSS class selector
+        const linesEnter = lines
+            .enter()
+            .append("path")
+            .attr("class", "line")
+            .attr("fill", "none")
+            .attr("stroke-width", 2);
+
+        const linesUpdate = linesEnter.merge(lines);
+
+        linesUpdate
+            .attr("stroke", (d) => colorScale(d.label))
+            .attr("d", (d) => lineGen(d.data));
+
+        // Animate line drawing only on first render
+        if (isFirstRender.current) {
+            linesUpdate.each(function () {
+                const path = d3.select(this);
+                const length = path.node()?.getTotalLength() || 0;
+                path.attr("stroke-dasharray", `${length} ${length}`)
+                    .attr("stroke-dashoffset", length)
+                    .transition()
+                    .duration(1500)
+                    .attr("stroke-dashoffset", 0);
+            });
+        }
+
+        // Update dots using join pattern
+        if (!groupsRef.current.dots) return;
+        const dotsGroups = groupsRef.current.dots
+            .selectAll<SVGGElement, GraphDataset>("g.dots-group")
+            .data(datasets, (d: GraphDataset) => d.label);
+
+        dotsGroups.exit().remove();
+
+        const dotsGroupsEnter = dotsGroups
+            .enter()
+            .append("g")
+            .attr("class", "dots-group");
+
+        const dotsGroupsUpdate = dotsGroupsEnter.merge(dotsGroups);
+
+        // Update circles within each group
+        dotsGroupsUpdate.each(function (dataset) {
             const safeLabel = dataset.label.replace(/[^a-zA-Z0-9-_]/g, "-");
+            const group = d3.select(this);
+            const circles = group
+                .selectAll<
+                    SVGCircleElement,
+                    { x: string | number; y: number }
+                >("circle")
+                .data(dataset.data, (d, i) => `${d.x}-${d.y}-${i}`);
 
-            svg.selectAll(`.dot-${safeLabel}`)
-                .data(dataset.data)
+            circles.exit().remove();
+
+            const circlesEnter = circles
                 .enter()
                 .append("circle")
-                .attr("class", `dot-${safeLabel}`)
-                .attr("cx", (d) => x(Number(d.x)))
-                .attr("cy", (d) => y(d.y))
                 .attr("r", 4)
                 .attr("fill", colorScale(dataset.label))
                 .style("cursor", "pointer")
                 .attr("tabindex", 0)
                 .on("mouseover focus", function (event, d) {
                     d3.select(this).transition().duration(100).attr("r", 6);
-                    tooltip
-                        .html(String(d.y))
-                        .transition()
-                        .duration(100)
-                        .style("opacity", 1)
-                        .style("left", `${x(Number(d.x))}px`)
-                        .style("top", `${y(d.y)}px`);
+                    positionTooltip(event, d);
                 })
                 .on("mouseout blur", function () {
                     d3.select(this).transition().duration(100).attr("r", 4);
                     tooltip.transition().duration(100).style("opacity", 0);
                 });
 
-            // Animate points appearing
-            svg.selectAll(`.dot-${safeLabel}`)
-                .attr("opacity", 0)
-                .transition()
-                .delay(500) // Stagger point animation after line draw
-                .duration(1000)
-                .attr("opacity", 1);
+            const circlesUpdate = circlesEnter.merge(circles);
+
+            circlesUpdate
+                .attr("cx", (d) => {
+                    const num = Number(d.x);
+                    return Number.isFinite(num) ? x(num) : 0;
+                })
+                .attr("cy", (d) => y(d.y));
+
+            // Animate points appearing only on first render
+            if (isFirstRender.current) {
+                circlesUpdate
+                    .attr("opacity", 0)
+                    .transition()
+                    .delay(500)
+                    .duration(1000)
+                    .attr("opacity", 1);
+            } else {
+                circlesUpdate.attr("opacity", 1);
+            }
         });
 
-        // Legend at bottom
-        const legendGroup = svg
-            .append("g")
-            .attr("class", "legend")
-            .attr(
-                "transform",
-                `translate(${margin.left}, ${height - margin.bottom + 60})`,
-            );
+        // Mark that first render is complete
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+        }
 
+        // Update legend using join pattern
         const legendWidth = width - margin.left - margin.right;
         const itemMargin = 10;
         const rowHeight = 20;
 
-        const legendItems = legendGroup
-            .selectAll("g.legend-item")
-            .data(datasets)
+        const legendItems = groupsRef.current.legend
+            .selectAll<SVGGElement, GraphDataset>("g.legend-item")
+            .data(datasets, (d) => d.label);
+
+        legendItems.exit().remove();
+
+        const legendItemsEnter = legendItems
             .enter()
             .append("g")
             .attr("class", "legend-item");
 
-        legendItems
-            .append("rect")
-            .attr("width", 12)
-            .attr("height", 12)
-            .attr("fill", (d) => colorScale(d.label));
+        legendItemsEnter.append("rect").attr("width", 12).attr("height", 12);
 
-        legendItems
+        legendItemsEnter
             .append("text")
             .attr("x", 16)
             .attr("y", 10)
-            .text((d) => d.label)
             .style("font-size", "12px")
             .attr("alignment-baseline", "middle");
 
+        const legendItemsUpdate = legendItemsEnter.merge(legendItems);
+
+        legendItemsUpdate
+            .select("rect")
+            .attr("fill", (d) => colorScale(d.label));
+
+        legendItemsUpdate.select("text").text((d) => d.label);
+
         // Position legend items, wrap to new line on overflow
-        let xOffset = 0;
-        let yOffset = 0;
-        legendItems.attr("transform", function () {
-            const itemWidth =
-                (this as SVGGElement).getBBox().width + itemMargin;
-            if (xOffset + itemWidth > legendWidth) {
-                xOffset = 0;
-                yOffset += rowHeight;
-            }
-            const transform = `translate(${xOffset}, ${yOffset})`;
-            xOffset += itemWidth;
-            return transform;
+        // Use requestAnimationFrame to ensure layout is complete before measuring
+        requestAnimationFrame(() => {
+            let xOffset = 0;
+            let yOffset = 0;
+            legendItemsUpdate.attr("transform", function () {
+                const bbox = (this as SVGGElement).getBBox();
+                const itemWidth = bbox.width + itemMargin;
+                if (xOffset + itemWidth > legendWidth && xOffset > 0) {
+                    xOffset = 0;
+                    yOffset += rowHeight;
+                }
+                const transform = `translate(${xOffset}, ${yOffset})`;
+                xOffset += itemWidth;
+                return transform;
+            });
         });
     }, [datasets, xAxisLabel, yAxisLabel, colorScale]);
 
diff --git a/src/components/SpreadsheetConfirmation.tsx b/src/components/SpreadsheetConfirmation.tsx
index 702c28c..c5f8bdb 100644
--- a/src/components/SpreadsheetConfirmation.tsx
+++ b/src/components/SpreadsheetConfirmation.tsx
@@ -11,9 +11,9 @@
  **************************************************************/
 "use client";
 
-import React, { useState, useEffect } from "react";
-import Checkbox from "./Checkbox";
-import { School, GraduationCap, User, FolderOpenDot } from "lucide-react";
+import { FolderOpenDot, GraduationCap, School, User } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Checkbox } from "@/components/Checkbox";
 import type { SpreadsheetData } from "@/types/spreadsheet";
 
 type ConfirmationProps = {
@@ -94,9 +94,11 @@ export default function SpreadsheetConfirmation({
                 </li>
                 <li className="mt-10">
                     <Checkbox
-                        label="I understand"
-                        onToggle={(_, confirmed) => setConfirmed(confirmed)}
+                        onCheckedChange={(checked: boolean) =>
+                            setConfirmed(checked)
+                        }
                     />
+                    <label htmlFor="confirmation-checkbox">I understand</label>
                 </li>
             </ul>
             <div className="mt-5"></div>
diff --git a/src/components/skeletons/DashboardSkeleton.tsx b/src/components/skeletons/DashboardSkeleton.tsx
index 3f7ee01..b3bae3b 100644
--- a/src/components/skeletons/DashboardSkeleton.tsx
+++ b/src/components/skeletons/DashboardSkeleton.tsx
@@ -3,7 +3,7 @@ import { StatCardSkeleton } from "./StatCardSkeleton";
 
 export function DashboardSkeleton() {
     return (
-        <div className="flex flex-col gap-8 w-full max-w-5xl px-6">
+        <div className="flex flex-col gap-8 w-full max-w-5xl px-6 py-10">
             {/* Header skeleton */}
             <Skeleton className="h-8 w-64" />
 
diff --git a/src/components/skeletons/TableSkeleton.tsx b/src/components/skeletons/TableSkeleton.tsx
index a25f060..d6194c0 100644
--- a/src/components/skeletons/TableSkeleton.tsx
+++ b/src/components/skeletons/TableSkeleton.tsx
@@ -7,7 +7,7 @@ type TableSkeletonProps = {
 
 export function TableSkeleton({ rows = 8, cols = 5 }: TableSkeletonProps) {
     return (
-        <div className="overflow-x-auto rounded-md border">
+        <div className="h-full overflow-auto rounded-md border text-center">
             <div className="border-separate border-spacing-0">
                 {/* Header */}
                 <div className="sticky top-0 z-10 border-b bg-muted">
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..16a74ae
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+            className,
+        )}
+        {...props}
+    />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+            className,
+        )}
+        {...props}
+    />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className,
+        )}
+        {...props}
+    />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

From db937cad578b3de6de4dc3ee2b89957f89f11d7d Mon Sep 17 00:00:00 2001
From: tika <48658947+tika@users.noreply.github.com>
Date: Mon, 22 Dec 2025 19:00:41 +0000
Subject: [PATCH 8/8] fix: checkbox

---
 src/components/Checkbox.tsx | 36 ++----------------------------------
 1 file changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index d07f9db..e7cd128 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,45 +1,15 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { X } from "lucide-react";
+import { CheckIcon, X } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-type CustomCheckboxProps = {
-    isChecked?: boolean;
-    onToggle?: (checked: boolean) => void;
-};
-
-type CheckboxProps = Omit<
-    React.ComponentProps<typeof CheckboxPrimitive.Root>,
-    "checked" | "onCheckedChange"
-> &
-    CustomCheckboxProps & {
-        checked?: boolean;
-        onCheckedChange?: (checked: boolean | "indeterminate") => void;
-    };
-
 function Checkbox({
     className,
-    isChecked,
-    onToggle,
-    checked,
-    onCheckedChange,
     ...props
-}: CheckboxProps) {
-    // Map isChecked to checked, and onToggle to onCheckedChange
-    const finalChecked = checked ?? isChecked;
-    const finalOnCheckedChange =
-        onCheckedChange ??
-        (onToggle
-            ? (checkedState: boolean | "indeterminate") => {
-                  // Convert CheckedState to boolean
-                  const isCheckedValue = checkedState === true;
-                  onToggle(isCheckedValue);
-              }
-            : undefined);
-
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
     return (
         <CheckboxPrimitive.Root
             data-slot="checkbox"
@@ -47,8 +17,6 @@ function Checkbox({
                 "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
                 className,
             )}
-            checked={finalChecked}
-            onCheckedChange={finalOnCheckedChange}
             {...props}
         >
             <CheckboxPrimitive.Indicator