diff --git a/src/app/api/area/[areaId]/events/route.ts b/src/app/api/area/[areaId]/events/route.ts
new file mode 100644
index 0000000..3032982
--- /dev/null
+++ b/src/app/api/area/[areaId]/events/route.ts
@@ -0,0 +1,46 @@
+/**
+ * Area events API route.
+ *
+ * Responsibilities:
+ * - Validate the area id from the route param.
+ * - Parse and normalize query-string date filters.
+ * - Delegate data fetching to the BigQuery layer.
+ * - Translate invalid input and not-found states into HTTP responses.
+ */
+import { NextResponse } from "next/server";
+import { getPageData } from "@/lib/bq/areas";
+import { getSessionUser } from "@/lib/auth/server";
+
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ areaId?: string }> },
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const params = await context.params;
+  const rawId = params?.areaId;
+  const areaId = Number(rawId);
+
+  if (!rawId || !Number.isFinite(areaId) || areaId <= 0) {
+    return NextResponse.json({ error: "Invalid area id" }, { status: 400 });
+  }
+
+  const { searchParams } = new URL(request.url);
+
+  const opts = {
+    range: searchParams.get("range") || undefined,
+    startDate: searchParams.get("startDate") || undefined,
+    endDate: searchParams.get("endDate") || undefined,
+  };
+
+  const data = await getPageData(areaId, user.email, opts);
+
+  if (!data.info) {
+    return NextResponse.json({ error: "Area not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(data, { status: 200 });
+}
diff --git a/src/app/api/sector/[sectorId]/events/route.ts b/src/app/api/sector/[sectorId]/events/route.ts
new file mode 100644
index 0000000..a54a918
--- /dev/null
+++ b/src/app/api/sector/[sectorId]/events/route.ts
@@ -0,0 +1,46 @@
+/**
+ * Sector events API route.
+ *
+ * Responsibilities:
+ * - Validate the sector id from the route param.
+ * - Parse and normalize query-string date filters.
+ * - Delegate data fetching to the BigQuery layer.
+ * - Translate invalid input and not-found states into HTTP responses.
+ */
+import { NextResponse } from "next/server";
+import { getPageData } from "@/lib/bq/sectors";
+import { getSessionUser } from "@/lib/auth/server";
+
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ sectorId?: string }> },
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const params = await context.params;
+  const rawId = params?.sectorId;
+  const sectorId = Number(rawId);
+
+  if (!rawId || !Number.isFinite(sectorId) || sectorId <= 0) {
+    return NextResponse.json({ error: "Invalid sector id" }, { status: 400 });
+  }
+
+  const { searchParams } = new URL(request.url);
+
+  const opts = {
+    range: searchParams.get("range") || undefined,
+    startDate: searchParams.get("startDate") || undefined,
+    endDate: searchParams.get("endDate") || undefined,
+  };
+
+  const data = await getPageData(sectorId, user.email, opts);
+
+  if (!data.info) {
+    return NextResponse.json({ error: "Sector not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(data, { status: 200 });
+}
diff --git a/src/app/stats/ao/[aoId]/page.tsx b/src/app/stats/ao/[aoId]/page.tsx
index 33691ca..a5d4952 100644
--- a/src/app/stats/ao/[aoId]/page.tsx
+++ b/src/app/stats/ao/[aoId]/page.tsx
@@ -10,6 +10,7 @@
 import { loadAOData } from "./loader";
 import { PageHeader } from "@/components/pageHeader";
 import { AOPageWrapper } from "@/components/ao/PageWrapper";
+import { Breadcrumb } from "@/components/breadcrumb";
 import { Card, CardHeader, CardBody, CardFooter } from "@heroui/card";
 import Link from "next/link";
 import { getSessionUser, requireAuth } from "@/lib/auth/server";
@@ -161,6 +162,23 @@ export default async function AODetailPage({
   return (
     <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
       <div className="grid grid-cols-1 gap-6 w-full max-w-6xl pb-6 px-4">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            { label: "Nation", href: "/stats/nation" },
+            ...(aoData.info?.region_id && aoData.info?.region_name
+              ? [
+                  {
+                    label: aoData.info.region_name,
+                    href: `/stats/region/${aoData.info.region_id}`,
+                  },
+                ]
+              : []),
+            { label: aoData.info?.ao_name ?? "AO" },
+          ]}
+        />
+
         {/* Page Header */}
         <PageHeader
           image={aoData.info?.logo_url ?? undefined}
diff --git a/src/app/stats/area/[areaId]/loader.ts b/src/app/stats/area/[areaId]/loader.ts
new file mode 100644
index 0000000..2e7e038
--- /dev/null
+++ b/src/app/stats/area/[areaId]/loader.ts
@@ -0,0 +1,54 @@
+/**
+ * Area stats data loader.
+ *
+ * Responsibilities:
+ * - Call the BigQuery area data function.
+ * - Normalize BigQuery response (unwrap value wrappers, convert bigints).
+ * - Fail gracefully by returning null on error.
+ */
+import {
+  AreaData,
+  AreaInfo,
+  AreaSummary,
+  AreaRegionBreakdown,
+  ChartData,
+} from "@/lib/types";
+import { getPageData } from "@/lib/bq/areas";
+
+type AreaFilterOpts = {
+  range?: string;
+  startDate?: string;
+  endDate?: string;
+};
+
+export async function loadAreaData(
+  areaId: number,
+  userIdentifier?: string,
+  filters?: AreaFilterOpts,
+): Promise<AreaData | null> {
+  try {
+    const areaData = await getPageData(areaId, userIdentifier, filters);
+
+    const mergedPlain = JSON.parse(
+      JSON.stringify(areaData, (_k, v) => {
+        if (v && typeof v === "object" && "value" in v) return v.value;
+        if (typeof v === "bigint") return Number(v);
+        return v;
+      }),
+    ) as AreaData;
+
+    const mergedSafe: AreaData = {
+      info: mergedPlain.info as AreaInfo,
+      summary: mergedPlain.summary as AreaSummary,
+      regionBreakdown: (mergedPlain.regionBreakdown ??
+        []) as AreaRegionBreakdown[],
+      charts: (mergedPlain.charts ?? []) as ChartData[],
+    };
+
+    return mergedSafe;
+  } catch (err) {
+    console.error(`Error fetching Area data (area=${areaId}):`, err);
+  }
+
+  return null;
+}
diff --git a/src/app/stats/area/[areaId]/loading.tsx b/src/app/stats/area/[areaId]/loading.tsx
new file mode 100644
index 0000000..df0991b
--- /dev/null
+++ b/src/app/stats/area/[areaId]/loading.tsx
@@ -0,0 +1,35 @@
+/**
+ * Loading skeleton for the Area stats page.
+ */
+function SkeletonCard({ height = "h-40" }: { height?: string }) {
+  return (
+    <div
+      className={`rounded-lg mb-6 bg-gray-200 dark:bg-gray-800 animate-pulse ${height}`}
+    />
+  );
+}
+
+function SkeletonSection({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 gap-6 w-full max-w-6xl px-4">
+      {children}
+    </div>
+  );
+}
+
+export default function Loading() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
+      <SkeletonSection>
+        <SkeletonCard height="h-16" />
+      </SkeletonSection>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 w-full max-w-6xl px-4">
+        <SkeletonCard height="h-52" />
+        <SkeletonCard height="h-52" />
+      </div>
+      <SkeletonSection>
+        <SkeletonCard height="h-64" />
+      </SkeletonSection>
+    </main>
+  );
+}
diff --git a/src/app/stats/area/[areaId]/page.tsx b/src/app/stats/area/[areaId]/page.tsx
new file mode 100644
index 0000000..989ef3a
--- /dev/null
+++ b/src/app/stats/area/[areaId]/page.tsx
@@ -0,0 +1,111 @@
+/****
+ * Area stats page.
+ *
+ * Responsibilities:
+ * - Parse route params.
+ * - Load area data via the BQ loader.
+ * - Render either an empty-state message or the full area dashboard.
+ */
+
+import { loadAreaData } from "./loader";
+import { PageHeader } from "@/components/pageHeader";
+import { AreaSummaryCard } from "@/components/area/SummaryCard";
+import { RegionBreakdownCard } from "@/components/area/RegionBreakdownCard";
+import { AreaChartsCard } from "@/components/area/ChartsCard";
+import { Card, CardHeader, CardBody } from "@heroui/card";
+import { getSessionUser, requireAuth } from "@/lib/auth/server";
+import { Breadcrumb } from "@/components/breadcrumb";
+
+interface PageProps {
+  params: Promise<{ areaId: string }>;
+}
+
+export default async function AreaDetailPage({ params }: PageProps) {
+  await requireAuth();
+  const user = await getSessionUser();
+  if (!user) throw new Error("User should never be null after requireAuth");
+
+  const { areaId } = await params;
+  const areaData = await loadAreaData(Number(areaId), user.email);
+
+  if (!areaData?.info) {
+    return (
+      <main className="min-h-screen flex items-center justify-center px-4 pt-10 pb-10 bg-gradient-to-b from-background to-default-50">
+        <Card
+          className="w-full max-w-3xl bg-background/80 dark:bg-default-100/60"
+          shadow="lg"
+        >
+          <CardHeader className="flex flex-col gap-3">
+            <h1 className="text-2xl font-bold tracking-tight text-center">
+              Area Data Not Available
+            </h1>
+            <p className="text-sm text-foreground/70 text-center max-w-xl mx-auto">
+              This area exists, but no data is currently available to display.
+            </p>
+          </CardHeader>
+          <CardBody className="text-sm text-foreground/80">
+            <p>
+              This usually means the regions within this area have not yet
+              migrated to <strong>F3 Nation Data</strong>.
+            </p>
+          </CardBody>
+        </Card>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
+      <div className="grid grid-cols-1 gap-6 w-full max-w-6xl pb-6 px-4">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            { label: "Nation", href: "/stats/nation" },
+            ...(areaData.info.sector_id && areaData.info.sector_name
+              ? [
+                  {
+                    label: areaData.info.sector_name,
+                    href: `/stats/sector/${areaData.info.sector_id}`,
+                  },
+                ]
+              : []),
+            { label: areaData.info.area_name },
+          ]}
+        />
+
+        {/* Page Header */}
+        <PageHeader
+          image={areaData.info.logo_url ?? undefined}
+          name={`F3 ${areaData.info.area_name}`}
+          link={
+            areaData.info.sector_id
+              ? `/stats/sector/${areaData.info.sector_id}`
+              : undefined
+          }
+          linkName={areaData.info.sector_name ?? undefined}
+        />
+
+        {/* WIP disclaimer */}
+        <div className="w-full rounded-lg border border-warning-300 bg-warning-50 dark:bg-warning-900/20 px-4 py-3 text-sm text-warning-800 dark:text-warning-300">
+          <strong>Work in progress:</strong> This page is not the final version.
+          Data and layout are subject to change.
+        </div>
+
+        {/* Summary */}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 w-full max-w-6xl">
+          <AreaSummaryCard summary={areaData.summary!} />
+        </div>
+        {/* Region breakdown */}
+        <div className="grid grid-cols-1 gap-6 w-full max-w-6xl">
+          <RegionBreakdownCard regions={areaData.regionBreakdown || []} />
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 gap-6 w-full max-w-6xl hidden">
+          <AreaChartsCard charts={areaData.charts || []} />
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/stats/nation/page.tsx b/src/app/stats/nation/page.tsx
index 301d260..5830f81 100644
--- a/src/app/stats/nation/page.tsx
+++ b/src/app/stats/nation/page.tsx
@@ -4,11 +4,15 @@ import { Card, CardHeader, CardBody } from "@heroui/card";
 import { Chip } from "@heroui/chip";
 import { Progress } from "@heroui/progress";
 import { Skeleton } from "@heroui/skeleton";
+import { Breadcrumb } from "@/components/breadcrumb";
 
 export default function PlaceholderPage() {
   return (
     <main className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-default-50 px-4">
       <div className="w-full max-w-4xl space-y-6">
+        <Breadcrumb
+          items={[{ label: "Home", href: "/" }, { label: "Nation" }]}
+        />
         <Card className="shadow-lg">
           <CardHeader>
             <div className="w-full flex flex-col gap-3">
diff --git a/src/app/stats/pax/[paxId]/page.tsx b/src/app/stats/pax/[paxId]/page.tsx
index 41c7abc..6d92007 100644
--- a/src/app/stats/pax/[paxId]/page.tsx
+++ b/src/app/stats/pax/[paxId]/page.tsx
@@ -10,6 +10,7 @@
 import { loadPaxData } from "./loader";
 import { PageHeader } from "@/components/pageHeader";
 import { PAXPageWrapper } from "@/components/pax/PageWrapper";
+import { Breadcrumb } from "@/components/breadcrumb";
 import { Card, CardHeader, CardBody, CardFooter } from "@heroui/card";
 import Link from "next/link";
 import { getSessionUser, requireAuth } from "@/lib/auth/server";
@@ -176,6 +177,22 @@ export default async function PaxDetailPage({
   return (
     <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
       <div className="grid grid-cols-1 gap-6 w-full max-w-6xl pb-6 px-4">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            ...(paxData.info?.home_region_id && paxData.info?.home_region_name
+              ? [
+                  {
+                    label: paxData.info.home_region_name,
+                    href: `/stats/region/${paxData.info.home_region_id}`,
+                  },
+                ]
+              : []),
+            { label: paxData.info?.f3_name ?? "PAX" },
+          ]}
+        />
+
         {/* Page Header */}
         <PageHeader
           image={paxData.info?.avatar_url ?? undefined}
diff --git a/src/app/stats/region/[regionId]/page.tsx b/src/app/stats/region/[regionId]/page.tsx
index 3657191..f77f81b 100644
--- a/src/app/stats/region/[regionId]/page.tsx
+++ b/src/app/stats/region/[regionId]/page.tsx
@@ -10,6 +10,7 @@
 import { loadRegionData } from "./loader";
 import { PageHeader } from "@/components/pageHeader";
 import { RegionalPageWrapper } from "@/components/region/PageWrapper";
+import { Breadcrumb } from "@/components/breadcrumb";
 import { Card, CardHeader, CardBody, CardFooter } from "@heroui/card";
 import Link from "next/link";
 import { getSessionUser, requireAuth } from "@/lib/auth/server";
@@ -169,6 +170,23 @@ export default async function RegionDetailPage({
   return (
     <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
       <div className="grid grid-cols-1 gap-6 w-full max-w-6xl pb-6 px-4">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            { label: "Nation", href: "/stats/nation" },
+            ...(regionData.info?.area_id && regionData.info?.area_name
+              ? [
+                  {
+                    label: regionData.info.area_name,
+                    href: `/stats/area/${regionData.info.area_id}`,
+                  },
+                ]
+              : []),
+            { label: regionData.info?.region_name ?? "Region" },
+          ]}
+        />
+
         {/* Page Header */}
         <PageHeader
           image={regionData.info?.logo_url ?? undefined}
diff --git a/src/app/stats/sector/[sectorId]/loader.ts b/src/app/stats/sector/[sectorId]/loader.ts
new file mode 100644
index 0000000..1eb95aa
--- /dev/null
+++ b/src/app/stats/sector/[sectorId]/loader.ts
@@ -0,0 +1,53 @@
+/**
+ * Sector stats data loader.
+ *
+ * Responsibilities:
+ * - Call the BigQuery sector data function.
+ * - Normalize BigQuery response (unwrap value wrappers, convert bigints).
+ * - Fail gracefully by returning null on error.
+ */
+import {
+  SectorData,
+  SectorInfo,
+  SectorSummary,
+  SectorAreaBreakdown,
+  ChartData,
+} from "@/lib/types";
+import { getPageData } from "@/lib/bq/sectors";
+
+type SectorFilterOpts = {
+  range?: string;
+  startDate?: string;
+  endDate?: string;
+};
+
+export async function loadSectorData(
+  sectorId: number,
+  userIdentifier?: string,
+  filters?: SectorFilterOpts,
+): Promise<SectorData | null> {
+  try {
+    const sectorData = await getPageData(sectorId, userIdentifier, filters);
+
+    const mergedPlain = JSON.parse(
+      JSON.stringify(sectorData, (_k, v) => {
+        if (v && typeof v === "object" && "value" in v) return v.value;
+        if (typeof v === "bigint") return Number(v);
+        return v;
+      }),
+    ) as SectorData;
+
+    const mergedSafe: SectorData = {
+      info: mergedPlain.info as SectorInfo,
+      summary: mergedPlain.summary as SectorSummary,
+      areaBreakdown: (mergedPlain.areaBreakdown ?? []) as SectorAreaBreakdown[],
+      charts: (mergedPlain.charts ?? []) as ChartData[],
+    };
+
+    return mergedSafe;
+  } catch (err) {
+    console.error(`Error fetching Sector data (sector=${sectorId}):`, err);
+  }
+
+  return null;
+}
diff --git a/src/app/stats/sector/[sectorId]/loading.tsx b/src/app/stats/sector/[sectorId]/loading.tsx
new file mode 100644
index 0000000..112875e
--- /dev/null
+++ b/src/app/stats/sector/[sectorId]/loading.tsx
@@ -0,0 +1,35 @@
+/**
+ * Loading skeleton for the Sector stats page.
+ */
+function SkeletonCard({ height = "h-40" }: { height?: string }) {
+  return (
+    <div
+      className={`rounded-lg mb-6 bg-gray-200 dark:bg-gray-800 animate-pulse ${height}`}
+    />
+  );
+}
+
+function SkeletonSection({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 gap-6 w-full max-w-6xl px-4">
+      {children}
+    </div>
+  );
+}
+
+export default function Loading() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
+      <SkeletonSection>
+        <SkeletonCard height="h-16" />
+      </SkeletonSection>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 w-full max-w-6xl px-4">
+        <SkeletonCard height="h-52" />
+        <SkeletonCard height="h-52" />
+      </div>
+      <SkeletonSection>
+        <SkeletonCard height="h-64" />
+      </SkeletonSection>
+    </main>
+  );
+}
diff --git a/src/app/stats/sector/[sectorId]/page.tsx b/src/app/stats/sector/[sectorId]/page.tsx
new file mode 100644
index 0000000..951400f
--- /dev/null
+++ b/src/app/stats/sector/[sectorId]/page.tsx
@@ -0,0 +1,100 @@
+/****
+ * Sector stats page.
+ *
+ * Responsibilities:
+ * - Parse route params.
+ * - Load sector data via the BQ loader.
+ * - Render either an empty-state message or the full sector dashboard.
+ */
+
+import { loadSectorData } from "./loader";
+import { PageHeader } from "@/components/pageHeader";
+import { SectorSummaryCard } from "@/components/sector/SummaryCard";
+import { AreaBreakdownCard } from "@/components/sector/AreaBreakdownCard";
+import { SectorChartsCard } from "@/components/sector/ChartsCard";
+import { Card, CardHeader, CardBody } from "@heroui/card";
+import { getSessionUser, requireAuth } from "@/lib/auth/server";
+import { Breadcrumb } from "@/components/breadcrumb";
+
+interface PageProps {
+  params: Promise<{ sectorId: string }>;
+}
+
+export default async function SectorDetailPage({ params }: PageProps) {
+  await requireAuth();
+  const user = await getSessionUser();
+  if (!user) throw new Error("User should never be null after requireAuth");
+
+  const { sectorId } = await params;
+  const sectorData = await loadSectorData(Number(sectorId), user.email);
+
+  if (!sectorData?.info) {
+    return (
+      <main className="min-h-screen flex items-center justify-center px-4 pt-10 pb-10 bg-gradient-to-b from-background to-default-50">
+        <Card
+          className="w-full max-w-3xl bg-background/80 dark:bg-default-100/60"
+          shadow="lg"
+        >
+          <CardHeader className="flex flex-col gap-3">
+            <h1 className="text-2xl font-bold tracking-tight text-center">
+              Sector Data Not Available
+            </h1>
+            <p className="text-sm text-foreground/70 text-center max-w-xl mx-auto">
+              This sector exists, but no data is currently available to display.
+            </p>
+          </CardHeader>
+          <CardBody className="text-sm text-foreground/80">
+            <p>
+              This usually means the areas and regions within this sector have
+              not yet migrated to <strong>F3 Nation Data</strong>.
+            </p>
+          </CardBody>
+        </Card>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start pt-10 pb-10">
+      <div className="grid grid-cols-1 gap-6 w-full max-w-6xl pb-6 px-4">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            { label: "Nation", href: "/stats/nation" },
+            { label: sectorData.info.sector_name },
+          ]}
+        />
+
+        {/* Page Header — links up to Nation */}
+        <PageHeader
+          image={sectorData.info.logo_url ?? undefined}
+          name={`F3 ${sectorData.info.sector_name}`}
+          link="/stats/nation"
+          linkName="F3 Nation"
+        />
+
+        {/* WIP disclaimer */}
+        <div className="w-full rounded-lg border border-warning-300 bg-warning-50 dark:bg-warning-900/20 px-4 py-3 text-sm text-warning-800 dark:text-warning-300">
+          <strong>Work in progress:</strong> This page is not the final version.
+          Data and layout are subject to change.
+        </div>
+
+        {/* Summary */}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 w-full max-w-6xl">
+          <SectorSummaryCard summary={sectorData.summary!} />
+        </div>
+
+        {/* Area breakdown */}
+        <div className="grid grid-cols-1 gap-6 w-full max-w-6xl">
+          <AreaBreakdownCard areas={sectorData.areaBreakdown || []} />
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 gap-6 w-full max-w-6xl hidden">
+          <SectorChartsCard charts={sectorData.charts || []} />
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/area/ChartsCard.tsx b/src/components/area/ChartsCard.tsx
new file mode 100644
index 0000000..f2b1d38
--- /dev/null
+++ b/src/components/area/ChartsCard.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+/**
+ * AreaChartsCard
+ *
+ * Displays aggregate PAX and Q trend charts for an Area.
+ */
+
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { ChartData } from "@/lib/types";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type AreaChartsCardProps = {
+  charts: ChartData[];
+};
+
+export function AreaChartsCard({ charts }: AreaChartsCardProps) {
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Area Charts</div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-6">
+        {charts.length > 0 ? (
+          <ResponsiveContainer width="100%" aspect={1.618}>
+            <BarChart
+              data={charts}
+              margin={{ top: 5, right: 0, left: 0, bottom: 5 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="date" />
+              <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
+              <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
+              <Tooltip />
+              <Legend />
+              <Bar
+                yAxisId="left"
+                dataKey="unique_pax_count"
+                fill="#8884d8"
+                radius={[10, 10, 0, 0]}
+              />
+              <Bar
+                yAxisId="right"
+                dataKey="unique_q_count"
+                fill="#82ca9d"
+                radius={[10, 10, 0, 0]}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        ) : (
+          <div className="text-center text-muted py-10">
+            No chart data available for this area.
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/components/area/RegionBreakdownCard.tsx b/src/components/area/RegionBreakdownCard.tsx
new file mode 100644
index 0000000..552f3d2
--- /dev/null
+++ b/src/components/area/RegionBreakdownCard.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * RegionBreakdownCard
+ *
+ * Displays a table of child regions within an Area, each with their
+ * aggregate stats. Each region name links to its detail page.
+ */
+
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { Link } from "@heroui/link";
+import { AreaRegionBreakdown } from "@/lib/types";
+import { formatNumber } from "@/lib/utils";
+
+type RegionBreakdownCardProps = {
+  regions: AreaRegionBreakdown[];
+};
+
+function renderStat(value?: number, decimals?: number) {
+  if (typeof value !== "number") return "—";
+  return formatNumber(value, decimals);
+}
+
+export function RegionBreakdownCard({ regions }: RegionBreakdownCardProps) {
+  if (!regions || regions.length === 0) {
+    return (
+      <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+        <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+          <div className="font-semibold text-xl">Regions</div>
+        </CardHeader>
+        <Divider />
+        <CardBody className="px-6 py-6 text-center text-foreground/50 text-sm">
+          No region data available.
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Regions</div>
+        <div className="text-sm text-foreground/50">
+          {regions.length} regions
+        </div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-0 py-0 overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b dark:border-white/10 light:border-black/10">
+              <th className="text-left px-6 py-3 font-medium text-foreground/70">
+                Region
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Workouts
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                AOs
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Active PAX
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Unique PAX
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Unique Qs
+              </th>
+              <th className="text-right px-6 py-3 font-medium text-foreground/70">
+                Avg PAX
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {regions.map((region, idx) => (
+              <tr
+                key={region.region_id}
+                className={`border-b dark:border-white/5 light:border-black/5 hover:bg-default-100/40 transition-colors ${
+                  idx === regions.length - 1 ? "border-0" : ""
+                }`}
+              >
+                <td className="px-6 py-3">
+                  <Link
+                    href={`/stats/region/${region.region_id}`}
+                    className="font-medium text-primary hover:underline"
+                  >
+                    F3 {region.region_name}
+                  </Link>
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(region.event_count)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(region.ao_count)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(region.active_pax)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(region.unique_pax)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(region.unique_qs)}
+                </td>
+                <td className="text-right px-6 py-3">
+                  {renderStat(region.pax_count_average, 1)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/components/area/SummaryCard.tsx b/src/components/area/SummaryCard.tsx
new file mode 100644
index 0000000..885c827
--- /dev/null
+++ b/src/components/area/SummaryCard.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+/**
+ * AreaSummaryCard
+ *
+ * Displays high-level aggregate statistics for an Area
+ * (workouts, regions, AOs, PAX counts, Q counts, etc.).
+ */
+
+import { useEffect, useState } from "react";
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { AreaSummary } from "@/lib/types";
+import { formatNumber } from "@/lib/utils";
+import { HelpIcon } from "@/components/icons";
+import { Tooltip } from "@heroui/tooltip";
+import { Popover, PopoverTrigger, PopoverContent } from "@heroui/popover";
+
+type AreaSummaryCardProps = {
+  summary: AreaSummary;
+};
+
+function renderStat(value?: number, decimals?: number, suffix?: string) {
+  if (typeof value !== "number") return "Unknown";
+  const formatted = formatNumber(value, decimals);
+  return suffix ? `${formatted} ${suffix}` : formatted;
+}
+
+export function AreaSummaryCard({ summary }: AreaSummaryCardProps) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 640px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+
+    if (typeof mq.addEventListener === "function") {
+      mq.addEventListener("change", update);
+      return () => mq.removeEventListener("change", update);
+    }
+
+    mq.addListener(update);
+    return () => mq.removeListener(update);
+  }, []);
+
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Area Summary</div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-6">
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Total Events:</span>
+          <span>{renderStat(summary.event_count, undefined, "Workouts")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Regions:</span>
+          <span>{renderStat(summary.region_count, undefined, "Regions")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">AO Count:</span>
+          <span>{renderStat(summary.ao_count, undefined, "AOs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary flex items-center">
+            Active PAX:
+            {isMobile ? (
+              <Popover placement="bottom-start">
+                <PopoverTrigger>
+                  <span className="inline-flex cursor-pointer items-center">
+                    <HelpIcon className="inline-block ml-1 text-default" />
+                  </span>
+                </PopoverTrigger>
+                <PopoverContent className="max-w-[260px] p-2 text-sm">
+                  Number of active PAX in the area over last 30 days
+                </PopoverContent>
+              </Popover>
+            ) : (
+              <Tooltip content="Number of active PAX in the area over last 30 days">
+                <span className="inline-flex cursor-help items-center">
+                  <HelpIcon className="inline-block ml-1 text-default" />
+                </span>
+              </Tooltip>
+            )}
+          </span>
+          <span>{renderStat(summary.active_pax, undefined, "PAX")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Unique PAX:</span>
+          <span>{renderStat(summary.unique_pax, undefined, "PAX")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Unique Qs:</span>
+          <span>{renderStat(summary.unique_qs, undefined, "Qs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">FNGs:</span>
+          <span>{renderStat(summary.fng_count, undefined, "FNGs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2">
+          <span className="text-primary">Average PAX:</span>
+          <span>{renderStat(summary.pax_count_average, 2, "PAX")}</span>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
new file mode 100644
index 0000000..d575a53
--- /dev/null
+++ b/src/components/breadcrumb.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  BreadcrumbItem,
+  Breadcrumbs as HeroBreadcrumbs,
+} from "@heroui/breadcrumbs";
+import { useRouter } from "next/navigation";
+
+export type BreadcrumbEntry = {
+  label: string;
+  href?: string;
+};
+
+type Props = {
+  items: BreadcrumbEntry[];
+};
+
+/**
+ * Navigation bar with a back button on the left and a breadcrumb trail on
+ * the right. Intended for PWA use where the browser back button is hidden.
+ */
+export function Breadcrumb({ items }: Props) {
+  const router = useRouter();
+
+  return (
+    <div className="flex items-center justify-between w-full">
+      <button
+        onClick={() => router.back()}
+        className="flex items-center gap-1 text-sm text-foreground/60 hover:text-foreground transition-colors"
+      >
+        ← Back
+      </button>
+
+      <HeroBreadcrumbs className="text-sm">
+        {items.map((item, i) => (
+          <BreadcrumbItem
+            key={i}
+            href={item.href}
+            isCurrent={i === items.length - 1}
+          >
+            {item.label}
+          </BreadcrumbItem>
+        ))}
+      </HeroBreadcrumbs>
+    </div>
+  );
+}
diff --git a/src/components/sector/AreaBreakdownCard.tsx b/src/components/sector/AreaBreakdownCard.tsx
new file mode 100644
index 0000000..c5744fd
--- /dev/null
+++ b/src/components/sector/AreaBreakdownCard.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+/**
+ * AreaBreakdownCard
+ *
+ * Displays a table of child areas within a Sector, each with their
+ * aggregate stats. Each area name links to its detail page.
+ */
+
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { Link } from "@heroui/link";
+import { SectorAreaBreakdown } from "@/lib/types";
+import { formatNumber } from "@/lib/utils";
+
+type AreaBreakdownCardProps = {
+  areas: SectorAreaBreakdown[];
+};
+
+function renderStat(value?: number, decimals?: number) {
+  if (typeof value !== "number") return "—";
+  return formatNumber(value, decimals);
+}
+
+export function AreaBreakdownCard({ areas }: AreaBreakdownCardProps) {
+  if (!areas || areas.length === 0) {
+    return (
+      <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+        <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+          <div className="font-semibold text-xl">Areas</div>
+        </CardHeader>
+        <Divider />
+        <CardBody className="px-6 py-6 text-center text-foreground/50 text-sm">
+          No area data available.
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Areas</div>
+        <div className="text-sm text-foreground/50">{areas.length} areas</div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-0 py-0 overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b dark:border-white/10 light:border-black/10">
+              <th className="text-left px-6 py-3 font-medium text-foreground/70">
+                Area
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Workouts
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                AOs
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Active PAX
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Unique PAX
+              </th>
+              <th className="text-right px-4 py-3 font-medium text-foreground/70">
+                Unique Qs
+              </th>
+              <th className="text-right px-6 py-3 font-medium text-foreground/70">
+                Avg PAX
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {areas.map((area, idx) => (
+              <tr
+                key={area.area_id}
+                className={`border-b dark:border-white/5 light:border-black/5 hover:bg-default-100/40 transition-colors ${
+                  idx === areas.length - 1 ? "border-0" : ""
+                }`}
+              >
+                <td className="px-6 py-3">
+                  <Link
+                    href={`/stats/area/${area.area_id}`}
+                    className="font-medium text-primary hover:underline"
+                  >
+                    F3 {area.area_name}
+                  </Link>
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(area.event_count)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(area.ao_count)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(area.active_pax)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(area.unique_pax)}
+                </td>
+                <td className="text-right px-4 py-3">
+                  {renderStat(area.unique_qs)}
+                </td>
+                <td className="text-right px-6 py-3">
+                  {renderStat(area.pax_count_average, 1)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/components/sector/ChartsCard.tsx b/src/components/sector/ChartsCard.tsx
new file mode 100644
index 0000000..c18ff3d
--- /dev/null
+++ b/src/components/sector/ChartsCard.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+/**
+ * SectorChartsCard
+ *
+ * Displays aggregate PAX and Q trend charts for a Sector.
+ */
+
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { ChartData } from "@/lib/types";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type SectorChartsCardProps = {
+  charts: ChartData[];
+};
+
+export function SectorChartsCard({ charts }: SectorChartsCardProps) {
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Sector Charts</div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-6">
+        {charts.length > 0 ? (
+          <ResponsiveContainer width="100%" aspect={1.618}>
+            <BarChart
+              data={charts}
+              margin={{ top: 5, right: 0, left: 0, bottom: 5 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="date" />
+              <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
+              <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
+              <Tooltip />
+              <Legend />
+              <Bar
+                yAxisId="left"
+                dataKey="unique_pax_count"
+                fill="#8884d8"
+                radius={[10, 10, 0, 0]}
+              />
+              <Bar
+                yAxisId="right"
+                dataKey="unique_q_count"
+                fill="#82ca9d"
+                radius={[10, 10, 0, 0]}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        ) : (
+          <div className="text-center text-muted py-10">
+            No chart data available for this sector.
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/components/sector/SummaryCard.tsx b/src/components/sector/SummaryCard.tsx
new file mode 100644
index 0000000..4f9b180
--- /dev/null
+++ b/src/components/sector/SummaryCard.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+/**
+ * SectorSummaryCard
+ *
+ * Displays high-level aggregate statistics for a Sector
+ * (workouts, areas, AOs, PAX counts, Q counts, etc.).
+ */
+
+import { useEffect, useState } from "react";
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Divider } from "@heroui/divider";
+import { SectorSummary } from "@/lib/types";
+import { formatNumber } from "@/lib/utils";
+import { HelpIcon } from "@/components/icons";
+import { Tooltip } from "@heroui/tooltip";
+import { Popover, PopoverTrigger, PopoverContent } from "@heroui/popover";
+
+type SectorSummaryCardProps = {
+  summary: SectorSummary;
+};
+
+function renderStat(value?: number, decimals?: number, suffix?: string) {
+  if (typeof value !== "number") return "Unknown";
+  const formatted = formatNumber(value, decimals);
+  return suffix ? `${formatted} ${suffix}` : formatted;
+}
+
+export function SectorSummaryCard({ summary }: SectorSummaryCardProps) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 640px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+
+    if (typeof mq.addEventListener === "function") {
+      mq.addEventListener("change", update);
+      return () => mq.removeEventListener("change", update);
+    }
+
+    mq.addListener(update);
+    return () => mq.removeListener(update);
+  }, []);
+
+  return (
+    <Card className="bg-background/60 dark:bg-default-100/50" shadow="md">
+      <CardHeader className="flex justify-between items-center px-6 lg:min-h-16">
+        <div className="font-semibold text-xl">Sector Summary</div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="px-6">
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Total Events:</span>
+          <span>{renderStat(summary.event_count, undefined, "Workouts")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Areas:</span>
+          <span>{renderStat(summary.area_count, undefined, "Areas")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">AO Count:</span>
+          <span>{renderStat(summary.ao_count, undefined, "AOs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary flex items-center">
+            Active PAX:
+            {isMobile ? (
+              <Popover placement="bottom-start">
+                <PopoverTrigger>
+                  <span className="inline-flex cursor-pointer items-center">
+                    <HelpIcon className="inline-block ml-1 text-default" />
+                  </span>
+                </PopoverTrigger>
+                <PopoverContent className="max-w-[260px] p-2 text-sm">
+                  Number of active PAX in the sector over last 30 days
+                </PopoverContent>
+              </Popover>
+            ) : (
+              <Tooltip content="Number of active PAX in the sector over last 30 days">
+                <span className="inline-flex cursor-help items-center">
+                  <HelpIcon className="inline-block ml-1 text-default" />
+                </span>
+              </Tooltip>
+            )}
+          </span>
+          <span>{renderStat(summary.active_pax, undefined, "PAX")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Unique PAX:</span>
+          <span>{renderStat(summary.unique_pax, undefined, "PAX")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">Unique Qs:</span>
+          <span>{renderStat(summary.unique_qs, undefined, "Qs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2 border-b light:border-black/10 dark:border-white/10">
+          <span className="text-primary">FNGs:</span>
+          <span>{renderStat(summary.fng_count, undefined, "FNGs")}</span>
+        </div>
+        <div className="flex justify-between py-1 pb-2">
+          <span className="text-primary">Average PAX:</span>
+          <span>{renderStat(summary.pax_count_average, 2, "PAX")}</span>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/lib/bq/areas.ts b/src/lib/bq/areas.ts
new file mode 100644
index 0000000..eaf7609
--- /dev/null
+++ b/src/lib/bq/areas.ts
@@ -0,0 +1,368 @@
+import { queryBigQuery } from "@/lib/db";
+import {
+  AreaInfo,
+  AreaSummary,
+  AreaRegionBreakdown,
+  ChartData,
+} from "@/lib/types";
+
+type EventFilterOpts = {
+  range?: string;
+  startDate?: string; // 'YYYY-MM-DD'
+  endDate?: string; // 'YYYY-MM-DD'
+};
+
+/**
+ * Convert a named range into UTC YYYY-MM-DD start/end strings.
+ * Identical logic to regions.ts.
+ */
+function buildRangeDates(range: string | undefined): {
+  startDate?: string;
+  endDate?: string;
+} {
+  const now = new Date();
+  const todayUTC = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()),
+  );
+  const dayOfWeek = todayUTC.getUTCDay();
+  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+  const mondayThisWeek = new Date(
+    todayUTC.getTime() + mondayOffset * 24 * 60 * 60 * 1000,
+  );
+
+  let start: Date | undefined;
+  let end: Date | undefined;
+
+  switch (range) {
+    case "YTD":
+      start = new Date(Date.UTC(todayUTC.getUTCFullYear(), 0, 1));
+      break;
+    case "This Week":
+      start = mondayThisWeek;
+      break;
+    case "Last Week":
+      start = new Date(mondayThisWeek.getTime() - 7 * 24 * 60 * 60 * 1000);
+      end = new Date(mondayThisWeek.getTime() - 1 * 24 * 60 * 60 * 1000);
+      break;
+    case "This Month":
+      start = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth(), 1),
+      );
+      break;
+    case "Last Month":
+      start = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth() - 1, 1),
+      );
+      end = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth(), 0),
+      );
+      break;
+    case "Last 90 Days":
+      start = new Date(todayUTC.getTime() - 90 * 24 * 60 * 60 * 1000);
+      break;
+    case "Last 180 Days":
+      start = new Date(todayUTC.getTime() - 180 * 24 * 60 * 60 * 1000);
+      break;
+    case "Prior Year":
+      start = new Date(Date.UTC(todayUTC.getUTCFullYear() - 1, 0, 1));
+      end = new Date(Date.UTC(todayUTC.getUTCFullYear() - 1, 11, 31));
+      break;
+    default:
+      break;
+  }
+
+  return {
+    startDate: start?.toISOString().split("T")[0],
+    endDate: end?.toISOString().split("T")[0],
+  };
+}
+
+function buildDateFilterClauses(opts?: EventFilterOpts): string[] {
+  const rangeDates = buildRangeDates(opts?.range);
+  const startDate = opts?.startDate ?? rangeDates.startDate;
+  const endDate = opts?.endDate ?? rangeDates.endDate;
+
+  const clauses: string[] = [];
+
+  if (startDate && endDate) {
+    clauses.push(
+      `event_date BETWEEN DATE('${startDate}') AND DATE('${endDate}')`,
+    );
+  } else if (startDate) {
+    clauses.push(`event_date >= DATE('${startDate}')`);
+  } else if (endDate) {
+    clauses.push(`event_date <= DATE('${endDate}')`);
+  }
+
+  return clauses;
+}
+
+export async function searchAreasByName(
+  q: string,
+  userIdentifier?: string,
+  includeInactive = false,
+): Promise<AreaInfo[]> {
+  const term = (q || "").trim();
+  if (term.length < 2) return [];
+
+  const escapedTerm = term.replace(/'/g, "''").toLowerCase();
+
+  const query = `-- AREA SEARCH
+    SELECT
+      area_id,
+      area_name,
+      logo_url,
+      is_active
+    FROM pv_areas
+    WHERE area_name IS NOT NULL
+      AND LOWER(area_name) LIKE '%${escapedTerm}%'
+      ${includeInactive ? "" : "AND is_active = TRUE"}
+    ORDER BY area_name
+    LIMIT 50
+  `;
+
+  const results = await queryBigQuery<AreaInfo>(
+    query,
+    userIdentifier,
+    `search areas by name: ${q}`,
+  );
+  return results ?? [];
+}
+
+export async function getPageData(
+  areaId: number,
+  userIdentifier?: string,
+  opts?: EventFilterOpts,
+): Promise<{
+  info: AreaInfo | null;
+  summary: AreaSummary | null;
+  regionBreakdown: AreaRegionBreakdown[] | null;
+  charts: ChartData[] | null;
+}> {
+  // Build date-only WHERE clauses for the events CTE.
+  const dateFilterClauses = buildDateFilterClauses(opts);
+  const dateFilterSql = dateFilterClauses.length
+    ? `AND ${dateFilterClauses.join("\n      AND ")}`
+    : "";
+
+  // Determine chart granularity.
+  const rangeDates = buildRangeDates(opts?.range);
+  const effectiveStart = opts?.startDate ?? rangeDates.startDate;
+  const effectiveEnd =
+    opts?.endDate ??
+    rangeDates.endDate ??
+    new Date().toISOString().split("T")[0];
+  const daysDiff = effectiveStart
+    ? (new Date(effectiveEnd).getTime() - new Date(effectiveStart).getTime()) /
+      86_400_000
+    : Infinity;
+  const chartGranularity =
+    daysDiff > 365 ? "monthly" : daysDiff > 180 ? "weekly" : "daily";
+  const truncUnit =
+    chartGranularity === "monthly"
+      ? "MONTH"
+      : chartGranularity === "weekly"
+        ? "WEEK(MONDAY)"
+        : "DAY";
+  const spineInterval =
+    chartGranularity === "monthly"
+      ? "INTERVAL 1 MONTH"
+      : chartGranularity === "weekly"
+        ? "INTERVAL 1 WEEK"
+        : "INTERVAL 1 DAY";
+
+  const query = `-- AREA PAGE LOAD
+    WITH
+      events AS (
+        SELECT
+          event_id,
+          event_date,
+          pax_count,
+          fng_count,
+          ao_org_id,
+          region_org_id,
+          region_name,
+          attendance
+        FROM pv_events
+        WHERE area_org_id = ${areaId}
+          ${dateFilterSql}
+      ),
+      attendance_flat AS (
+        SELECT
+          e.event_id,
+          e.event_date,
+          e.region_org_id,
+          a.user_id,
+          a.q_ind
+        FROM events e
+        LEFT JOIN UNNEST(e.attendance) a
+        WHERE a.user_id IS NOT NULL
+      ),
+
+      -- Region-level event aggregates
+      region_event_stats AS (
+        SELECT
+          region_org_id,
+          ANY_VALUE(region_name) AS region_name,
+          COUNT(DISTINCT event_id) AS event_count,
+          COUNT(DISTINCT ao_org_id) AS ao_count,
+          SUM(COALESCE(fng_count, 0)) AS fng_count,
+          AVG(CAST(pax_count AS FLOAT64)) AS pax_count_average
+        FROM events
+        GROUP BY region_org_id
+      ),
+      -- Region-level attendance aggregates
+      region_attendance_stats AS (
+        SELECT
+          region_org_id,
+          COUNT(
+            DISTINCT IF(
+              event_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY),
+              user_id,
+              NULL)) AS active_pax,
+          COUNT(DISTINCT user_id) AS unique_pax,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_qs
+        FROM attendance_flat
+        GROUP BY region_org_id
+      ),
+
+      -- Area-level aggregates
+      area_event_metrics AS (
+        SELECT
+          COUNT(DISTINCT event_id) AS event_count,
+          COUNT(DISTINCT region_org_id) AS region_count,
+          COUNT(DISTINCT ao_org_id) AS ao_count,
+          SUM(COALESCE(fng_count, 0)) AS fng_count,
+          AVG(CAST(pax_count AS FLOAT64)) AS pax_count_average
+        FROM events
+      ),
+      area_attendance_metrics AS (
+        SELECT
+          COUNT(
+            DISTINCT IF(
+              event_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY),
+              user_id,
+              NULL)) AS active_pax,
+          COUNT(DISTINCT user_id) AS unique_pax,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_qs
+        FROM attendance_flat
+      ),
+
+      -- Chart aggregation
+      period_event_agg AS (
+        SELECT
+          DATE_TRUNC(event_date, ${truncUnit}) AS period,
+          SUM(pax_count) AS pax_count,
+          SUM(fng_count) AS fng_count,
+          SUM((SELECT COUNTIF(a.q_ind = 1) FROM UNNEST(attendance) a)) AS q_count
+        FROM events
+        GROUP BY period
+      ),
+      period_attendance_agg AS (
+        SELECT
+          DATE_TRUNC(event_date, ${truncUnit}) AS period,
+          COUNT(DISTINCT user_id) AS unique_pax_count,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_q_count
+        FROM attendance_flat
+        GROUP BY period
+      ),
+      period_agg AS (
+        SELECT
+          ea.period,
+          ea.pax_count,
+          ea.fng_count,
+          ea.q_count,
+          COALESCE(aa.unique_pax_count, 0) AS unique_pax_count,
+          COALESCE(aa.unique_q_count, 0) AS unique_q_count
+        FROM period_event_agg ea
+        LEFT JOIN period_attendance_agg aa USING (period)
+      ),
+      date_spine AS (
+        SELECT d AS date
+        FROM UNNEST(
+          GENERATE_DATE_ARRAY(
+            (SELECT MIN(period) FROM period_agg),
+            (SELECT MAX(period) FROM period_agg),
+            ${spineInterval}
+          )
+        ) AS d
+      )
+    SELECT
+      -- Area info
+      (
+        SELECT AS STRUCT
+          area_id, area_name, sector_id, sector_name, logo_url, is_active, regions
+        FROM pv_areas
+        WHERE area_id = ${areaId}
+        LIMIT 1
+      ) AS areaInfo,
+
+      -- Area-level summary
+      (
+        SELECT AS STRUCT
+          em.event_count,
+          em.region_count,
+          em.ao_count,
+          am.active_pax,
+          am.unique_pax,
+          am.unique_qs,
+          em.fng_count,
+          em.pax_count_average
+        FROM area_event_metrics em
+        CROSS JOIN area_attendance_metrics am
+      ) AS summary,
+
+      -- Region breakdown
+      (
+        SELECT
+          ARRAY_AGG(
+            STRUCT(
+              res.region_org_id AS region_id,
+              res.region_name,
+              res.event_count,
+              res.ao_count,
+              COALESCE(ras.active_pax, 0) AS active_pax,
+              COALESCE(ras.unique_pax, 0) AS unique_pax,
+              COALESCE(ras.unique_qs, 0) AS unique_qs,
+              res.fng_count,
+              res.pax_count_average
+            )
+            ORDER BY res.event_count DESC
+          )
+        FROM region_event_stats res
+        LEFT JOIN region_attendance_stats ras USING (region_org_id)
+      ) AS regionBreakdown,
+
+      -- Charts with gap-filling
+      (
+        SELECT
+          ARRAY_AGG(
+            STRUCT(
+              ds.date AS date,
+              COALESCE(pa.pax_count, 0) AS pax_count,
+              COALESCE(pa.fng_count, 0) AS fng_count,
+              COALESCE(pa.q_count, 0) AS q_count,
+              COALESCE(pa.unique_pax_count, 0) AS unique_pax_count,
+              COALESCE(pa.unique_q_count, 0) AS unique_q_count
+            )
+            ORDER BY ds.date ASC
+          )
+        FROM date_spine ds
+        LEFT JOIN period_agg pa ON pa.period = ds.date
+      ) AS charts;
+  `;
+
+  const results = await queryBigQuery<{
+    areaInfo: AreaInfo;
+    summary: AreaSummary;
+    regionBreakdown: AreaRegionBreakdown[];
+    charts: ChartData[];
+  }>(query, userIdentifier, `fetch area data for area ${areaId}`);
+
+  return {
+    info: results?.[0]?.areaInfo || null,
+    summary: results?.[0]?.summary || null,
+    regionBreakdown: results?.[0]?.regionBreakdown || null,
+    charts: results?.[0]?.charts || null,
+  };
+}
diff --git a/src/lib/bq/sectors.ts b/src/lib/bq/sectors.ts
new file mode 100644
index 0000000..a082b3b
--- /dev/null
+++ b/src/lib/bq/sectors.ts
@@ -0,0 +1,366 @@
+import { queryBigQuery } from "@/lib/db";
+import {
+  SectorInfo,
+  SectorSummary,
+  SectorAreaBreakdown,
+  ChartData,
+} from "@/lib/types";
+
+type EventFilterOpts = {
+  range?: string;
+  startDate?: string; // 'YYYY-MM-DD'
+  endDate?: string; // 'YYYY-MM-DD'
+};
+
+/**
+ * Convert a named range into UTC YYYY-MM-DD start/end strings.
+ */
+function buildRangeDates(range: string | undefined): {
+  startDate?: string;
+  endDate?: string;
+} {
+  const now = new Date();
+  const todayUTC = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()),
+  );
+  const dayOfWeek = todayUTC.getUTCDay();
+  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+  const mondayThisWeek = new Date(
+    todayUTC.getTime() + mondayOffset * 24 * 60 * 60 * 1000,
+  );
+
+  let start: Date | undefined;
+  let end: Date | undefined;
+
+  switch (range) {
+    case "YTD":
+      start = new Date(Date.UTC(todayUTC.getUTCFullYear(), 0, 1));
+      break;
+    case "This Week":
+      start = mondayThisWeek;
+      break;
+    case "Last Week":
+      start = new Date(mondayThisWeek.getTime() - 7 * 24 * 60 * 60 * 1000);
+      end = new Date(mondayThisWeek.getTime() - 1 * 24 * 60 * 60 * 1000);
+      break;
+    case "This Month":
+      start = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth(), 1),
+      );
+      break;
+    case "Last Month":
+      start = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth() - 1, 1),
+      );
+      end = new Date(
+        Date.UTC(todayUTC.getUTCFullYear(), todayUTC.getUTCMonth(), 0),
+      );
+      break;
+    case "Last 90 Days":
+      start = new Date(todayUTC.getTime() - 90 * 24 * 60 * 60 * 1000);
+      break;
+    case "Last 180 Days":
+      start = new Date(todayUTC.getTime() - 180 * 24 * 60 * 60 * 1000);
+      break;
+    case "Prior Year":
+      start = new Date(Date.UTC(todayUTC.getUTCFullYear() - 1, 0, 1));
+      end = new Date(Date.UTC(todayUTC.getUTCFullYear() - 1, 11, 31));
+      break;
+    default:
+      break;
+  }
+
+  return {
+    startDate: start?.toISOString().split("T")[0],
+    endDate: end?.toISOString().split("T")[0],
+  };
+}
+
+function buildDateFilterClauses(opts?: EventFilterOpts): string[] {
+  const rangeDates = buildRangeDates(opts?.range);
+  const startDate = opts?.startDate ?? rangeDates.startDate;
+  const endDate = opts?.endDate ?? rangeDates.endDate;
+
+  const clauses: string[] = [];
+
+  if (startDate && endDate) {
+    clauses.push(
+      `event_date BETWEEN DATE('${startDate}') AND DATE('${endDate}')`,
+    );
+  } else if (startDate) {
+    clauses.push(`event_date >= DATE('${startDate}')`);
+  } else if (endDate) {
+    clauses.push(`event_date <= DATE('${endDate}')`);
+  }
+
+  return clauses;
+}
+
+export async function searchSectorsByName(
+  q: string,
+  userIdentifier?: string,
+  includeInactive = false,
+): Promise<SectorInfo[]> {
+  const term = (q || "").trim();
+  if (term.length < 2) return [];
+
+  const escapedTerm = term.replace(/'/g, "''").toLowerCase();
+
+  const query = `-- SECTOR SEARCH
+    SELECT
+      sector_id,
+      sector_name,
+      logo_url,
+      is_active
+    FROM pv_sectors
+    WHERE sector_name IS NOT NULL
+      AND LOWER(sector_name) LIKE '%${escapedTerm}%'
+      ${includeInactive ? "" : "AND is_active = TRUE"}
+    ORDER BY sector_name
+    LIMIT 50
+  `;
+
+  const results = await queryBigQuery<SectorInfo>(
+    query,
+    userIdentifier,
+    `search sectors by name: ${q}`,
+  );
+  return results ?? [];
+}
+
+export async function getPageData(
+  sectorId: number,
+  userIdentifier?: string,
+  opts?: EventFilterOpts,
+): Promise<{
+  info: SectorInfo | null;
+  summary: SectorSummary | null;
+  areaBreakdown: SectorAreaBreakdown[] | null;
+  charts: ChartData[] | null;
+}> {
+  const dateFilterClauses = buildDateFilterClauses(opts);
+  const dateFilterSql = dateFilterClauses.length
+    ? `AND ${dateFilterClauses.join("\n      AND ")}`
+    : "";
+
+  // Determine chart granularity.
+  const rangeDates = buildRangeDates(opts?.range);
+  const effectiveStart = opts?.startDate ?? rangeDates.startDate;
+  const effectiveEnd =
+    opts?.endDate ??
+    rangeDates.endDate ??
+    new Date().toISOString().split("T")[0];
+  const daysDiff = effectiveStart
+    ? (new Date(effectiveEnd).getTime() - new Date(effectiveStart).getTime()) /
+      86_400_000
+    : Infinity;
+  const chartGranularity =
+    daysDiff > 365 ? "monthly" : daysDiff > 180 ? "weekly" : "daily";
+  const truncUnit =
+    chartGranularity === "monthly"
+      ? "MONTH"
+      : chartGranularity === "weekly"
+        ? "WEEK(MONDAY)"
+        : "DAY";
+  const spineInterval =
+    chartGranularity === "monthly"
+      ? "INTERVAL 1 MONTH"
+      : chartGranularity === "weekly"
+        ? "INTERVAL 1 WEEK"
+        : "INTERVAL 1 DAY";
+
+  const query = `-- SECTOR PAGE LOAD
+    WITH
+      events AS (
+        SELECT
+          event_id,
+          event_date,
+          pax_count,
+          fng_count,
+          ao_org_id,
+          area_org_id,
+          area_name,
+          attendance
+        FROM pv_events
+        WHERE sector_org_id = ${sectorId}
+          ${dateFilterSql}
+      ),
+      attendance_flat AS (
+        SELECT
+          e.event_id,
+          e.event_date,
+          e.area_org_id,
+          a.user_id,
+          a.q_ind
+        FROM events e
+        LEFT JOIN UNNEST(e.attendance) a
+        WHERE a.user_id IS NOT NULL
+      ),
+
+      -- Area-level event aggregates
+      area_event_stats AS (
+        SELECT
+          area_org_id,
+          ANY_VALUE(area_name) AS area_name,
+          COUNT(DISTINCT event_id) AS event_count,
+          COUNT(DISTINCT ao_org_id) AS ao_count,
+          SUM(COALESCE(fng_count, 0)) AS fng_count,
+          AVG(CAST(pax_count AS FLOAT64)) AS pax_count_average
+        FROM events
+        GROUP BY area_org_id
+      ),
+      -- Area-level attendance aggregates
+      area_attendance_stats AS (
+        SELECT
+          area_org_id,
+          COUNT(
+            DISTINCT IF(
+              event_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY),
+              user_id,
+              NULL)) AS active_pax,
+          COUNT(DISTINCT user_id) AS unique_pax,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_qs
+        FROM attendance_flat
+        GROUP BY area_org_id
+      ),
+
+      -- Sector-level aggregates
+      sector_event_metrics AS (
+        SELECT
+          COUNT(DISTINCT event_id) AS event_count,
+          COUNT(DISTINCT area_org_id) AS area_count,
+          COUNT(DISTINCT ao_org_id) AS ao_count,
+          SUM(COALESCE(fng_count, 0)) AS fng_count,
+          AVG(CAST(pax_count AS FLOAT64)) AS pax_count_average
+        FROM events
+      ),
+      sector_attendance_metrics AS (
+        SELECT
+          COUNT(
+            DISTINCT IF(
+              event_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY),
+              user_id,
+              NULL)) AS active_pax,
+          COUNT(DISTINCT user_id) AS unique_pax,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_qs
+        FROM attendance_flat
+      ),
+
+      -- Chart aggregation
+      period_event_agg AS (
+        SELECT
+          DATE_TRUNC(event_date, ${truncUnit}) AS period,
+          SUM(pax_count) AS pax_count,
+          SUM(fng_count) AS fng_count,
+          SUM((SELECT COUNTIF(a.q_ind = 1) FROM UNNEST(attendance) a)) AS q_count
+        FROM events
+        GROUP BY period
+      ),
+      period_attendance_agg AS (
+        SELECT
+          DATE_TRUNC(event_date, ${truncUnit}) AS period,
+          COUNT(DISTINCT user_id) AS unique_pax_count,
+          COUNT(DISTINCT IF(q_ind = 1, user_id, NULL)) AS unique_q_count
+        FROM attendance_flat
+        GROUP BY period
+      ),
+      period_agg AS (
+        SELECT
+          ea.period,
+          ea.pax_count,
+          ea.fng_count,
+          ea.q_count,
+          COALESCE(aa.unique_pax_count, 0) AS unique_pax_count,
+          COALESCE(aa.unique_q_count, 0) AS unique_q_count
+        FROM period_event_agg ea
+        LEFT JOIN period_attendance_agg aa USING (period)
+      ),
+      date_spine AS (
+        SELECT d AS date
+        FROM UNNEST(
+          GENERATE_DATE_ARRAY(
+            (SELECT MIN(period) FROM period_agg),
+            (SELECT MAX(period) FROM period_agg),
+            ${spineInterval}
+          )
+        ) AS d
+      )
+    SELECT
+      -- Sector info
+      (
+        SELECT AS STRUCT
+          sector_id, sector_name, logo_url, is_active, areas
+        FROM pv_sectors
+        WHERE sector_id = ${sectorId}
+        LIMIT 1
+      ) AS sectorInfo,
+
+      -- Sector-level summary
+      (
+        SELECT AS STRUCT
+          em.event_count,
+          em.area_count,
+          em.ao_count,
+          am.active_pax,
+          am.unique_pax,
+          am.unique_qs,
+          em.fng_count,
+          em.pax_count_average
+        FROM sector_event_metrics em
+        CROSS JOIN sector_attendance_metrics am
+      ) AS summary,
+
+      -- Area breakdown
+      (
+        SELECT
+          ARRAY_AGG(
+            STRUCT(
+              aes.area_org_id AS area_id,
+              aes.area_name,
+              aes.event_count,
+              aes.ao_count,
+              COALESCE(aas.active_pax, 0) AS active_pax,
+              COALESCE(aas.unique_pax, 0) AS unique_pax,
+              COALESCE(aas.unique_qs, 0) AS unique_qs,
+              aes.fng_count,
+              aes.pax_count_average
+            )
+            ORDER BY aes.event_count DESC
+          )
+        FROM area_event_stats aes
+        LEFT JOIN area_attendance_stats aas USING (area_org_id)
+      ) AS areaBreakdown,
+
+      -- Charts with gap-filling
+      (
+        SELECT
+          ARRAY_AGG(
+            STRUCT(
+              ds.date AS date,
+              COALESCE(pa.pax_count, 0) AS pax_count,
+              COALESCE(pa.fng_count, 0) AS fng_count,
+              COALESCE(pa.q_count, 0) AS q_count,
+              COALESCE(pa.unique_pax_count, 0) AS unique_pax_count,
+              COALESCE(pa.unique_q_count, 0) AS unique_q_count
+            )
+            ORDER BY ds.date ASC
+          )
+        FROM date_spine ds
+        LEFT JOIN period_agg pa ON pa.period = ds.date
+      ) AS charts;
+  `;
+
+  const results = await queryBigQuery<{
+    sectorInfo: SectorInfo;
+    summary: SectorSummary;
+    areaBreakdown: SectorAreaBreakdown[];
+    charts: ChartData[];
+  }>(query, userIdentifier, `fetch sector data for sector ${sectorId}`);
+
+  return {
+    info: results?.[0]?.sectorInfo || null,
+    summary: results?.[0]?.summary || null,
+    areaBreakdown: results?.[0]?.areaBreakdown || null,
+    charts: results?.[0]?.charts || null,
+  };
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 0f8b908..733138a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -243,6 +243,100 @@ export interface PaxAOBreakdown {
   total_q_count: number; // Number of Qs (leaders) held by the AO
 }
 
+/* =========================================================== */
+/*               AREA-SPECIFIC TYPES BELOW                     */
+/* =========================================================== */
+
+// AREA DATA MODEL
+export interface AreaData {
+  info: AreaInfo | null;
+  summary: AreaSummary | null;
+  regionBreakdown: AreaRegionBreakdown[] | null;
+  charts: ChartData[] | null;
+}
+
+/* USED ONLY FOR AREA INFO */
+export interface AreaInfo {
+  area_id: number;
+  area_name: string;
+  sector_id: number | null;
+  sector_name: string | null;
+  logo_url: string | null;
+  is_active: boolean;
+  regions: { region_id: number; region_name: string; is_active: boolean }[];
+}
+
+/* USED ONLY FOR AREA SUMMARY STATS */
+export interface AreaSummary {
+  event_count: number;
+  region_count: number;
+  ao_count: number;
+  active_pax: number;
+  unique_pax: number;
+  unique_qs: number;
+  fng_count: number;
+  pax_count_average: number;
+}
+
+/* USED FOR AREA REGION BREAKDOWN */
+export interface AreaRegionBreakdown {
+  region_id: number;
+  region_name: string;
+  event_count: number;
+  ao_count: number;
+  active_pax: number;
+  unique_pax: number;
+  unique_qs: number;
+  fng_count: number;
+  pax_count_average: number;
+}
+
+/* =========================================================== */
+/*              SECTOR-SPECIFIC TYPES BELOW                    */
+/* =========================================================== */
+
+// SECTOR DATA MODEL
+export interface SectorData {
+  info: SectorInfo | null;
+  summary: SectorSummary | null;
+  areaBreakdown: SectorAreaBreakdown[] | null;
+  charts: ChartData[] | null;
+}
+
+/* USED ONLY FOR SECTOR INFO */
+export interface SectorInfo {
+  sector_id: number;
+  sector_name: string;
+  logo_url: string | null;
+  is_active: boolean;
+  areas: { area_id: number; area_name: string; is_active: boolean }[];
+}
+
+/* USED ONLY FOR SECTOR SUMMARY STATS */
+export interface SectorSummary {
+  event_count: number;
+  area_count: number;
+  ao_count: number;
+  active_pax: number;
+  unique_pax: number;
+  unique_qs: number;
+  fng_count: number;
+  pax_count_average: number;
+}
+
+/* USED FOR SECTOR AREA BREAKDOWN */
+export interface SectorAreaBreakdown {
+  area_id: number;
+  area_name: string;
+  event_count: number;
+  ao_count: number;
+  active_pax: number;
+  unique_pax: number;
+  unique_qs: number;
+  fng_count: number;
+  pax_count_average: number;
+}
+
 /* ========================================================== */
 /*                  AO-SPECIFIC TYPES BELOW                    */
 /* =========================================================== */