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>

react-openapi/Admin.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useAuth, AuthPage } from "../react-auth";
 import { UploadProvider } from "./providers/UploadProvider";
 import AdminLayout from "./components/AdminLayout";
@@ -13,17 +12,17 @@ import {
   Route,
   useNavigate,
   useParams,
-  Navigate,
 } from "react-router-dom";
 
-const queryClient = new QueryClient();
-
-// Create a context for the app config
-export const ConfigContext = React.createContext<AppConfig | null>(null);
+import { ConfigContext } from "./providers/ConfigContext";
 
 function Dashboard({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
+
+  const resources = config?.resources || [];
+  const visibleResources = resources.filter((res) => !res.hidden);
+
   return (
     <Box>
       <Typography variant="h4" gutterBottom>
@@ -41,7 +40,7 @@ function Dashboard({ basePath }: { basePath: string }) {
           mt: 4,
         }}
       >
-        {config?.resources.map((res) => (
+        {visibleResources.map((res) => (
           <Paper 
             key={res.name} 
             sx={{ 
@@ -69,6 +68,9 @@ function AdminApp({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
 
+  const resources = config?.resources || [];
+  const visibleResources = resources.filter((res) => !res.hidden);
+
   if (!currentUser) {
     return (
       <AuthPage
@@ -89,7 +91,7 @@ function AdminApp({ basePath }: { basePath: string }) {
       username={currentUser.username}
       onLogout={logout}
       onSelectResource={(name) => navigate(`/admin/${name}`)}
-      resources={config?.resources || []}
+      resources={visibleResources}
     >
       <Routes>
         <Route path="/" element={<Dashboard basePath={basePath} />} />
@@ -120,14 +122,17 @@ interface AdminProps {
 }
 
 export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {} }: AdminProps) {
-  const [config, setConfig] = React.useState<AppConfig | null>(null);
+  const existingConfig = React.useContext(ConfigContext);
+  const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
 
   React.useEffect(() => {
-    getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
-      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-      setConfig(cfg);
-    });
-  }, [resourceOverrides, profileConfig]);
+    if (!existingConfig) {
+      getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
+        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+        setConfig(cfg);
+      });
+    }
+  }, [resourceOverrides, profileConfig, existingConfig]);
 
   if (!config) {
     return (
@@ -144,13 +149,21 @@ export default function Admin({ basePath = "/admin", resourceOverrides = {}, pro
     );
   }
 
+  const content = (
+    <UploadProvider>
+      <AdminApp basePath={basePath} />
+    </UploadProvider>
+  );
+
+  // If we have an existing config, we are already inside a Provider and QueryClient
+  if (existingConfig) {
+    return content;
+  }
+
+  // Fallback for standalone usage
   return (
-    <QueryClientProvider client={queryClient}>
-      <ConfigContext.Provider value={config}>
-        <UploadProvider>
-          <AdminApp basePath={basePath} />
-        </UploadProvider>
-      </ConfigContext.Provider>
-    </QueryClientProvider>
+    <ConfigContext.Provider value={config}>
+      {content}
+    </ConfigContext.Provider>
   );
 }