Fix pagination bounds in HistoryChart and add responsive grid to TopTags

## Summary

This MR introduces a major refactor of the dashboard and react-openapi integration, focusing on configurability, separation of concerns, and improved extensibility.

---

## Key Changes

### 1. OpenAPI / Admin Refactor

* Extracted `ConfigContext` into a dedicated provider.
* Introduced `AppProvider` to encapsulate:

  * Config loading
  * API client initialization
  * React Query setup
* Removed internal `QueryClientProvider` from `Admin` for better composability.
* `Admin` now supports both:

  * Standalone usage
  * Nested usage inside an existing provider

### 2. Resource System Improvements

* Added `hidden` flag to `ResourceConfig` and overrides.
* Admin UI now filters out hidden resources.
* Added `useResourceByName` helper for dynamic resource access.
* Improved `useResource`:

  * Handles undefined config safely
  * Adds guards for missing endpoints
  * Disables queries when endpoint is absent

### 3. API Client Enhancements

* Added custom `paramsSerializer`:

  * Serializes arrays without `[]`
  * Ensures backend-compatible query formats

### 4. Dashboard Architecture Overhaul

* Replaced hardcoded dashboard with **config-driven system**:

  * Introduced `ConfigurableDashboard`
  * Dashboard sections defined via config
* New state model:

  * `mode` (expense/income)
  * `periodType` (rolling/calendar)
  * `comparison`
  * `selectedPeriodId`

### 5. Component Refactor (View / Logic Split)

* Split major components into:

  * `.tsx` (logic/controller)
  * `.view.tsx` (presentation)
  * `.models.ts` (types)
* Applied to:

  * Dashboard
  * HistoryChart
  * ProgressCard
  * LatestItems

### 6. HistoryChart Redesign

* Fully rebuilt using report-driven data
* Supports:

  * Weekly / Monthly / Yearly / FY / Full views
  * Rolling vs Calendar periods
  * Comparison mode (auto-aligned offsets)
* Introduced:

  * Bucket merging logic
  * Dynamic comparison attachment

### 7. Reporting Integration

* Dashboard now powered by:

  * `useReport`
  * `prepareReport`
* Removes need for multiple manual API calls

### 8. UI / UX Improvements

* Theme-aware color system
* Dynamic accent colors per mode
* Cleaner layout using section-based rendering
* Improved selection and interaction in charts

### 9. Cleanup & Removals

* Removed legacy components:

  * Old `HistoryChart`
  * Old `ProgressCard`
* Simplified Header layout spacing

---

## Behavior Changes

* Hidden resources are no longer visible in Admin UI.
* Dashboard is now entirely configuration-driven.
* API query params for arrays no longer use `[]`.
* Resource hooks no longer crash on missing config.

---

## Risks / Considerations

* Dashboard depends on correct configuration structure.
* Hidden flag may unintentionally hide resources if misconfigured.
* Query param serialization change must align with backend expectations.

---

## Follow-ups

* Add typing improvements to remove `@ts-ignore` in `GenericForm`.
* Extend dashboard config with more reusable section presets.
* Add tests for report aggregation and comparison logic.

---

Reviewed-on: #1
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/components/HistoryChart/HistoryChart.view.tsx

@@ -58,19 +58,28 @@ export default function HistoryChartView(props: ViewProps) {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
 
+  const total = currentData.length;
+  const maxStartIndex = Math.max(total - visibleCount, 0);
+  const clampedStartIndex = Math.min(startIndex, maxStartIndex);
+
   const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
     if (newTab !== null) setActiveTab(newTab);
   };
 
-  const canGoLeft = startIndex > 0;
-  const canGoRight = startIndex + visibleCount < currentData.length;
+  const canGoLeft = clampedStartIndex > 0;
+  const canGoRight = clampedStartIndex < maxStartIndex;
 
   const handlePrev = () => {
-    if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
+    if (!canGoLeft) return;
+    setStartIndex((prev) => Math.max(prev - visibleCount, 0));
   };
 
   const handleNext = () => {
-    if (canGoRight) setStartIndex((prev) => prev + visibleCount);
+    if (!canGoRight) return;
+    setStartIndex((prev) => {
+      const next = prev + visibleCount;
+      return Math.min(next, maxStartIndex);
+    });
   };
 
   return (

src/components/ProgressCard/TopTags.tsx

@@ -76,14 +76,24 @@ export default function TopTags({
 
     arr.sort((a, b) => b.amount - a.amount);
 
-    const top = arr.slice(0, 5);
+    const top = arr.slice(0, 4);
     const total = top.reduce((sum, t) => sum + t.amount, 0);
 
     return { items: top, total };
   }, [reportData, mode, selectedPeriodId]);
 
   return (
-    <Box sx={{ display: "grid", gap: 2 }}>
+    <Box
+      sx={{
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "repeat(2, 1fr)",
+          md: "repeat(4, 1fr)"
+        },
+        gap: 2
+      }}
+    >
       {items.map((item) => (
         <ProgressCard
           key={item.tag}
@@ -91,6 +101,7 @@ export default function TopTags({
           progressAmount={item.amount}
           totalAmount={total}
           compact={compact}
+          colorTheme={mode === "expense" ? "error" : "success"}
         />
       ))}
     </Box>

src/dashboard-config.ts

@@ -22,7 +22,6 @@ export const configuration: DashboardConfig = {
       id: "top-payees",
       title: 'Top Payees',
       component: TopTags,
-      isList: true,
       settings: {
         compact: true,
       },

src/features/report/report.utils.ts

@@ -83,10 +83,7 @@ function buildLabel(
       return `${dayFmt.format(start)} - ${dayFmt.format(end)}`;
 
     case "monthly":
-      if (sameMonth(start, end)) {
-        return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
-      }
-      return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
+      return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
 
     case "yearly":
       return yearFmt.format(start);
@@ -110,8 +107,8 @@ function decoratePeriods(
 ): (ReportPeriod & { id: string; label: string })[] {
   return periods.map((p) => ({
     ...p,
-    id: buildPeriodId(type, new Date(p.start), new Date(p.end)),
-    label: buildLabel(type, new Date(p.start), new Date(p.end)),
+    id: buildPeriodId(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
+    label: buildLabel(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
   }));
 }