Charts and Filter adjustments

src/app/api/reports/chart-preview/route.ts

@@ -6,11 +6,16 @@ import { generateChartModel, type StoredChart } from "@/lib/generateChart";
 function parseStoredChart(input: unknown): StoredChart | null {
     if (!input || typeof input !== "object") return null;
 
-    const { title, filters } = input as Record<string, unknown>;
+    const { title, chartType, filters } = input as {
+      title: string;
+      chartType: string;
+      filters: unknown;
+    };
     if (typeof title !== "string" || !title.trim()) return null;
 
     return {
         title: title.trim(),
+        chartType,
         filters:
             typeof filters === "string" && filters.trim().length > 0
                 ? filters

src/app/api/reports/in-progress/route.ts

@@ -7,17 +7,23 @@ import { headers } from "next/headers";
 
 type ChartEntry = {
     title: string;
+    chartType: string;
     filters: string | null;
 };
 
 function parseChartEntry(input: unknown): ChartEntry | null {
     if (!input || typeof input !== "object") return null;
-    const { title, filters } = input as Record<string, unknown>;
+    const { title, chartType, filters } = input as {
+      title: string;
+      chartType: string;
+      filters: unknown;
+    };
 
     if (typeof title !== "string" || !title.trim()) return null;
 
     return {
         title: title.trim(),
+        chartType,
         filters:
             typeof filters === "string" && filters.trim().length
                 ? filters.trim()

src/app/reports/education/page.tsx

@@ -6,7 +6,7 @@ export default function Education(){
 
         <div className="w-full">
 
-           <div className="sticky top-0 min-h-[40px] bg-white top-0 flex justify-between py-3 drop-shadow-sm z-50">
+           <div className="sticky top-0 min-h-10 bg-white flex justify-between py-3 drop-shadow-sm z-50">
                         <FilterBar />
                         {/* {userName || "John Doe"} */}
             </div>

src/app/reports/housing/housing-client.tsx

@@ -8,6 +8,7 @@ import LineChart from "./linechart";
 import DaysHousedBarChart from "./barchart2";
 import LocationBarChart from "./locationchart";
 import useFilters, { type FilterState } from "@/lib/filterStore";
+import formatTitle, { formattedFilters } from "@/lib/formatChartTitle";
 
 export type FilterSummary = Pick<
     FilterState,
@@ -90,31 +91,35 @@ export default function HousingClient({ data }: { data: HousingRecord[] }) {
             />
             <div className="grid grid-cols-1 items-start gap-8 p-10 lg:grid-cols-2">
                 <Chart
-                    title="Family Intake Over Time"
+                    title = {formatTitle(filterState, "Family Intake")}
+                    chartType="family-intake-bar"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
                     <FamilyIntakeBarChart data={filteredData} />
                 </Chart>
 
                 <Chart
-                    title="Families Housed Over Time"
+                    title = {formatTitle(filterState, "Families Housed")}
+                    chartType="families-housed-line"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
                     <LineChart data={filteredData} />
                 </Chart>
 
                 <Chart
-                    title="Days to House Distribution"
+                    title = {formatTitle(filterState, "Days to House Distribution")}
+                    chartType="days-to-house-bar"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
                     <DaysHousedBarChart data={filteredData} />
                 </Chart>
 
                 <Chart
-                    title="Active vs Housed Families by Location"
+                    title = {formatTitle(filterState, "Active vs Housed Families by Location")}
+                    chartType="location-bar"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
@@ -126,25 +131,3 @@ export default function HousingClient({ data }: { data: HousingRecord[] }) {
         </div>
     );
 }
-
-function formattedFilters(filters: FilterSummary) {
-    const parts: string[] = [];
-    if (
-        filters.timeframe === "custom" &&
-        filters.customRange?.from &&
-        filters.customRange?.to
-    ) {
-        parts.push(
-            `${filters.customRange.from.toLocaleDateString()} - ${filters.customRange.to.toLocaleDateString()}`
-        );
-    } else {
-        parts.push(filters.timeframe);
-    }
-    if (filters.selectedSchools.length) {
-        parts.push(`${filters.selectedSchools.length} schools`);
-    }
-    if (filters.selectedLocations.length) {
-        parts.push(`${filters.selectedLocations.length} locations`);
-    }
-    return parts.join(" • ");
-}

src/app/reports/housing/page.tsx

@@ -20,7 +20,7 @@ const final_Data = filtered_Data.map((d) => ({
 export default function Housing() {
     return (
         <div>
-            <div className="sticky top-0 min-h-[40px] bg-white top-0 flex justify-between py-3 drop-shadow-sm z-50">
+            <div className="sticky top-0 min-h-10 bg-white flex justify-between py-3 drop-shadow-sm z-50">
                         <FilterBar />
                         {/* {userName || "John Doe"} */}
             </div>

src/app/reports/overview/overview-client.tsx

@@ -9,10 +9,11 @@ import DaysHousedBarChart from "../housing/barchart2";
 import useFilters, { type FilterState } from "@/lib/filterStore";
 import { filterRecords } from "@/lib/applyFilters";
 import { type HousingRecord } from "../housing/housing-client";
+import formatTitle, { formattedFilters } from "@/lib/formatChartTitle";
 
 export type OverviewRecord = HousingRecord;
 
-type FilterSummary = Pick<
+export type FilterSummary = Pick<
     FilterState,
     | "selectedLocations"
     | "selectedSchools"
@@ -75,23 +76,26 @@ export default function OverviewClient({ data }: { data: OverviewRecord[] }) {
             />
             <div className="grid grid-cols-1 items-start gap-8 p-10 lg:grid-cols-2">
                 <Chart
-                    title="Family Intake Over Time"
+                    title = {formatTitle(filterState, "Family Intake")}
+                    chartType="family-intake-bar"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
                     <FamilyIntakeBarChart data={filteredData} />
                 </Chart>
 
                 <Chart
-                    title="Families Housed Over Time"
+                    title={formatTitle(filterState, "Family Housed")}
+                    chartType="families-housed-line"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
                     <LineChart data={filteredData} />
                 </Chart>
 
                 <Chart
-                    title="Days to House Distribution"
+                    title={formatTitle(filterState, "Days to House Distribution")}
+                    chartType="days-to-house-bar"
                     appliedFilters={formattedFilters(filterState)}
                     filterState={filterState}
                 >
@@ -101,25 +105,3 @@ export default function OverviewClient({ data }: { data: OverviewRecord[] }) {
         </div>
     );
 }
-
-function formattedFilters(filters: FilterSummary) {
-    const parts: string[] = [];
-    if (
-        filters.timeframe === "custom" &&
-        filters.customRange?.from &&
-        filters.customRange?.to
-    ) {
-        parts.push(
-            `${filters.customRange.from.toLocaleDateString()} - ${filters.customRange.to.toLocaleDateString()}`
-        );
-    } else {
-        parts.push(filters.timeframe);
-    }
-    if (filters.selectedSchools.length) {
-        parts.push(`${filters.selectedSchools.length} schools`);
-    }
-    if (filters.selectedLocations.length) {
-        parts.push(`${filters.selectedLocations.length} locations`);
-    }
-    return parts.join(" • ");
-}

src/app/reports/schools/schools-client.tsx

@@ -10,6 +10,7 @@ import HousingSourceChart from "./housingsource";
 import StudentsByCityChart from "./studentsbycity";
 import useFilters, { type FilterState } from "@/lib/filterStore";
 import { filterRecords } from "@/lib/applyFilters";
+import formatTitle, { formattedFilters } from "@/lib/formatChartTitle";
 
 export type SchoolRecord = {
     id: number;
@@ -92,31 +93,35 @@ export default function SchoolsClient({ data }: { data: SchoolRecord[] }) {
             </div>
             <div className="grid grid-cols-1 items-start gap-8 p-10 lg:grid-cols-2">
                 <Chart
-                    title="Partner Schools & Homeless Student Counts"
+                    title = {formatTitle(filterState, "Partner Schools & Homeless Student Counts")}
+                    chartType="partner-schools-bar"
                     appliedFilters={formattedFilters(filterState)}
                 >
                     <div className="overflow-y-auto max-h-150 w-full min-w-0">
                         <PartnerAndHomeless data={filteredData} />
                     </div>
                 </Chart>
                 <Chart
-                    title="Schools by City"
+                    title = {formatTitle(filterState, "Schools by City")}
+                    chartType="schools-by-city-bar"
                     appliedFilters={formattedFilters(filterState)}
                 >
                     <div className="overflow-y-auto max-h-150 w-full min-w-0">
                         <SchoolsByCityChart data={filteredData} />
                     </div>
                 </Chart>
                 <Chart
-                    title="Housing Sources"
+                    title = {formatTitle(filterState, "Housing Sources")}
+                    chartType="housing-sources-donut"
                     appliedFilters={formattedFilters(filterState)}
                 >
                     <div className="overflow-y-auto max-h-150 w-full min-w-0">
                     <HousingSourceChart data={filteredData} />
                     </div>
                 </Chart>
                 <Chart
-                    title="Students by City"
+                    title = {formatTitle(filterState, "Students by City")}
+                    chartType="students-by-city-bar"
                     appliedFilters={formattedFilters(filterState)}
                 >
                     <div className="overflow-y-auto max-h-150 w-full min-w-0">
@@ -127,25 +132,3 @@ export default function SchoolsClient({ data }: { data: SchoolRecord[] }) {
         </>
     );
 }
-
-function formattedFilters(filters: FilterSummary) {
-    const parts: string[] = [];
-    if (
-        filters.timeframe === "custom" &&
-        filters.customRange?.from &&
-        filters.customRange?.to
-    ) {
-        parts.push(
-            `${filters.customRange.from.toLocaleDateString()} - ${filters.customRange.to.toLocaleDateString()}`
-        );
-    } else {
-        parts.push(filters.timeframe);
-    }
-    if (filters.selectedSchools.length) {
-        parts.push(`${filters.selectedSchools.length} schools`);
-    }
-    if (filters.selectedLocations.length) {
-        parts.push(`${filters.selectedLocations.length} locations`);
-    }
-    return parts.join(" • ");
-}