major refactor of the dashboard and react-openapi integration (#1)

## 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/dashboard-config.ts

@@ -0,0 +1,70 @@
+import HistoryChart from "./components/HistoryChart";
+import LatestItems from "./components/LatestItems";
+import { DashboardConfig } from "./components/Dashboard";
+import TopTags from "./components/ProgressCard/TopTags";
+
+export const configuration: DashboardConfig = {
+  sections: [
+    {
+      id: "breakdown",
+      title: "Breakdown",
+      summary: "Interactive chronological tracking",
+      component: HistoryChart,
+      settings: {
+        tabs: ["Weekly", "Monthly"],
+        // tabs: ["Weekly", "Monthly", "Yearly", "Financial Year", "All Time"],
+      },
+      style: {
+        size: 12,
+      },
+    },
+    {
+      id: "top-payees",
+      title: 'Top Payees',
+      component: TopTags,
+      settings: {
+        compact: true,
+      },
+      style: {
+        size: 12,
+      },
+    },
+    // {
+    //   id: "latest",
+    //   title: 'Recent Transactions',
+    //   component: LatestItems,
+    //   dataKey: "latest",
+    //   style: {
+    //     size: 12,
+    //   },
+    // },
+  ],
+  style: {
+    palette: {
+      expense: {
+        light: {
+          primary: "#d32f2f",
+          background: "#fdecea",
+          text: "#b71c1c"
+        },
+        dark: {
+          primary: "#f44336",
+          background: "rgba(244, 67, 54, 0.15)",
+          text: "#ffcdd2"
+        }
+      },
+      income: {
+        light: {
+          primary: "#2e7d32",
+          background: "#e8f5e9",
+          text: "#1b5e20"
+        },
+        dark: {
+          primary: "#4caf50",
+          background: "rgba(76, 175, 80, 0.15)",
+          text: "#c8e6c9"
+        }
+      }
+    }
+  }
+};