refactor: convert repository to monorepo with npm workspaces

Restructured the repository into a monorepo to better organize application code
and maintenance scripts.

## Workspace Structure
- web-app: Next.js application (all app code moved from root)
- housekeeping: Database backup and maintenance scripts

## Key Changes
- Moved all application code to web-app/ using git mv
- Moved database scripts to housekeeping/ workspace
- Updated Dockerfile for monorepo build process
- Updated docker-compose files (volume paths: ./web-app/etc/hosts/)
- Updated .gitignore for workspace-level node_modules
- Updated documentation (README.md, CLAUDE.md, CHANGELOG.md)

## Migration Impact
- Root package.json now manages workspaces
- Build commands delegate to web-app workspace
- All file history preserved via git mv
- Docker build process updated for workspace structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

web-app/app/ui/Pagination.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export const generatePagination = (availableYears: number[], currentYear:number) => {
+
+  const [firstYear, secondYear, thirdYear] = availableYears;
+  const [lastYear, yearBeforeLast1, yearBeforeLast2] = [...availableYears].reverse();
+  const currentYearIndex = availableYears.indexOf(currentYear);
+
+  // If the current year is among the first 3 years,
+  // show the first 3 and ellipsis
+  if (currentYearIndex < 2) {
+    return [firstYear, secondYear, thirdYear, '...'];
+  }
+
+  // If the current year is among the last 2 years,
+  // ellipsis and last 3 years.
+  if (currentYearIndex > availableYears.length - 3) {
+    return ['...', yearBeforeLast2, yearBeforeLast1, lastYear];
+  }
+
+  // If the current year is somewhere in the middle,
+  // show the first year, an ellipsis, the current year and its neighbors,
+  // another ellipsis, and the last year.
+  return [
+    '...',
+    availableYears[currentYearIndex - 1],
+    currentYear,
+    availableYears[currentYearIndex + 1],
+    '...',
+  ];
+};
+
+export default function Pagination({ availableYears } : { availableYears: number[] }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // don't show pagination if there's less than 2 years available
+  if(availableYears.length < 2) {
+    return null;
+  }
+
+  const showAllPages = availableYears.length < 5;
+
+  const createYearURL = (yearNumber: number | string | undefined) => {
+    if(!yearNumber) return "/";
+
+    const params = new URLSearchParams(searchParams);
+    params.set('year', yearNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  }
+
+  const currentYear = Number(searchParams.get('year')) || 1;
+  
+  const selectedYears = showAllPages ? availableYears : generatePagination(availableYears, currentYear);
+
+  const latestYear = availableYears[0];
+  const earliestYear = availableYears[availableYears.length-1];
+
+  return (
+    <>
+      <div className="join">
+        {
+          // If there are more than 3 years, show the left arrow.
+          !showAllPages &&
+            <YearArrow
+              direction="left"
+              href={createYearURL(latestYear)}
+              isDisabled={currentYear === latestYear}
+            />
+        }
+
+        <div className="flex -space-x-px">
+          {selectedYears.map((year, index) => {
+            let position: 'first' | 'last' | 'single' | 'middle' | undefined;
+
+            if (index === 0) position = 'first';
+            if (index === selectedYears.length - 1) position = 'last';
+            if (selectedYears.length === 1) position = 'single';
+            if (year === '...') position = 'middle';
+
+            return (
+              <YearNumber
+                key={`year-number-${year}-${index}`}
+                href={createYearURL(year)}
+                year={year}
+                position={position}
+                isActive={currentYear === year}
+              />
+            );
+          })}
+        </div>
+
+        {
+          // If there are more than 3 years, show the left arrow.
+          !showAllPages &&
+          <YearArrow
+            direction="right"
+            href={createYearURL(earliestYear)}
+            isDisabled={currentYear === earliestYear}
+            />
+        }
+
+      </div>
+    </>
+  );
+}
+
+function YearNumber({
+  year,
+  href,
+  isActive,
+  position,
+}: {
+  year: number | string;
+  href: string;
+  position?: 'first' | 'last' | 'middle' | 'single';
+  isActive: boolean;
+}) {
+  return(<Link href={href} className={`join-item btn ${ isActive ? 'btn-active' : '' } ${ position === 'middle' ? 'btn-disabled' : '' }`}>{year}</Link>);
+}
+
+function YearArrow({
+  href,
+  direction,
+  isDisabled,
+}: {
+  href: string;
+  direction: 'left' | 'right';
+  isDisabled?: boolean;
+}) {
+
+  const icon = direction === 'left' ? "⏴" : "⏵";
+  return (<Link className={`join-item btn ${isDisabled ? "btn-disabled" : ""}`} href={href}>{icon}</Link>);
+}