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/hooks/useResource.ts

@@ -1,16 +1,22 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
 import { ResourceConfig } from "../types/config";
+import { ConfigContext } from "../providers/ConfigContext";
+import * as React from "react";
 
-export function useResource<T = any>(config: ResourceConfig) {
+export function useResource<T = any>(config: ResourceConfig | undefined) {
   const queryClient = useQueryClient();
-  const { name, endpoint, primaryKey } = config;
+  
+  // Return empty/disabled hooks if config is missing
+  const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
 
   // --- READ ALL ---
   const useList = (params?: any) => 
     useQuery({
       queryKey: [name, "list", params],
       queryFn: async () => {
+        if (!endpoint) return { data: [], total: 0 };
+        console.log('params:', params);
         // @ts-ignore
         const res = await api.get<T[]>(endpoint, { params });
         const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
@@ -18,7 +24,8 @@ export function useResource<T = any>(config: ResourceConfig) {
             data: res.data, 
             total: isNaN(total as any) ? undefined : total 
         };
-      }
+      },
+      enabled: !!endpoint,
     });
 
   // --- READ ONE ---
@@ -26,18 +33,19 @@ export function useResource<T = any>(config: ResourceConfig) {
     useQuery({
       queryKey: [name, "detail", id],
       queryFn: async () => {
-        if (!id) return null;
+        if (!id || !endpoint) return null;
         // @ts-ignore
         const res = await api.get<T>(`${endpoint}/${id}`);
         return res.data;
       },
-      enabled: !!id,
+      enabled: !!id && !!endpoint,
     });
 
   // --- CREATE ---
   const useCreate = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.post<T>(endpoint, data);
         return res.data;
@@ -51,6 +59,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const useUpdate = () =>
     useMutation({
       mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.put<T>(`${endpoint}/${id}`, data);
         return res.data;
@@ -67,6 +76,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const useDelete = () =>
     useMutation({
       mutationFn: async (id: string) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         await api.delete(`${endpoint}/${id}`);
         return id;
       },
@@ -79,6 +89,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const getListQueryOptions = (params?: any) => ({
     queryKey: [name, "list", params],
     queryFn: async () => {
+      if (!endpoint) return { data: [], total: 0 };
       // @ts-ignore
       const res = await api.get<T[]>(endpoint, { params });
       const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
@@ -87,6 +98,7 @@ export function useResource<T = any>(config: ResourceConfig) {
           total: isNaN(total as any) ? undefined : total 
       };
     },
+    enabled: !!endpoint,
   });
 
   // --- READ ME ---
@@ -94,16 +106,19 @@ export function useResource<T = any>(config: ResourceConfig) {
     useQuery({
       queryKey: [name, "me"],
       queryFn: async () => {
+        if (!endpoint) return null;
         // @ts-ignore
         const res = await api.get<T>(`${endpoint}/me`);
         return res.data;
       },
+      enabled: !!endpoint,
     });
 
   // --- UPDATE ME ---
   const useUpdateMe = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.put<T>(`${endpoint}/me`, data);
         return res.data;
@@ -125,3 +140,10 @@ export function useResource<T = any>(config: ResourceConfig) {
     getListQueryOptions,
   };
 }
+
+export function useResourceByName<T = any>(name: string) {
+  const config = React.useContext(ConfigContext);
+  const resourceConfig = config?.resources.find((r) => r.name === name);
+  return useResource<T>(resourceConfig);
+}
+