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/components/ProgressCard/ProgressCard.models.ts

@@ -0,0 +1,8 @@
+export interface ProgressCardProps {
+  header: string;
+  summary?: string;
+  progressAmount: number;
+  totalAmount: number;
+  colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  compact?: boolean;
+}

src/components/ProgressCard/ProgressCard.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import ProgressCardView from "./ProgressCard.view";
+import { ProgressCardProps } from "./ProgressCard.models";
+import { getPercentage, formatCurrency } from "./ProgressCard.utils";
+
+export default function ProgressCard(props: ProgressCardProps) {
+  const { progressAmount, totalAmount, compact = false } = props;
+
+  const percentage = getPercentage(progressAmount, totalAmount);
+  
+  const formattedProgress = formatCurrency(progressAmount);
+  const formattedTotal = formatCurrency(totalAmount);
+
+  return (
+    <ProgressCardView
+      {...props}
+      percentage={percentage}
+      formattedProgress={formattedProgress}
+      formattedTotal={formattedTotal}
+      compact={compact}
+    />
+  );
+}

src/components/ProgressCard/ProgressCard.utils.ts

@@ -0,0 +1,15 @@
+export const getPercentage = (progressAmount: number, totalAmount: number) => {
+  if (!totalAmount) return 0;
+  return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
+};
+
+export const formatCurrency = (val: number) => {
+  const absVal = Math.abs(val);
+  if (absVal >= 100000) {
+    return `₹ ${(val / 100000).toFixed(2)}L`;
+  }
+  if (absVal >= 1000) {
+    return `₹ ${(val / 1000).toFixed(2)}k`;
+  }
+  return `₹ ${val.toFixed(2)}`;
+};

src/components/ProgressCard/ProgressCard.view.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+  Box,
+  Typography,
+  Paper,
+  LinearProgress,
+  Divider,
+  linearProgressClasses
+} from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
+import { ProgressCardProps } from "./ProgressCard.models";
+
+interface ViewProps extends ProgressCardProps {
+  percentage: number;
+  formattedProgress: string;
+  formattedTotal: string;
+}
+
+export default function ProgressCardView({
+  header,
+  colorTheme = "info",
+  percentage,
+  formattedProgress,
+  formattedTotal,
+  compact = false,
+}: ViewProps) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+    <Paper
+      elevation={compact ? 2 : 4}
+      sx={{
+        width: "100%",
+        p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
+        borderRadius: compact ? 3 : 4,
+        background: (theme) => {
+          const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main;
+          const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light;
+          return isDark
+            ? `linear-gradient(135deg, ${alpha(baseColor, 0.9)} 0%, ${alpha(baseColor, 0.3)} 100%)`
+            : `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`;
+        },
+        color: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: compact ? "flex-start" : "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
+        boxShadow: (theme) =>
+          `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
+            isDark
+              ? "rgba(0,0,0,0.5)"
+              : theme.palette[colorTheme]?.main || theme.palette.primary.main
+          }`,
+      }}
+    >
+      <Typography 
+        variant={compact ? "body2" : "subtitle1"} 
+        fontWeight={700} 
+        sx={{ 
+          opacity: 0.95, 
+          mb: compact ? 1.5 : 2, 
+          width: '100%', 
+          overflow: 'hidden', 
+          textOverflow: 'ellipsis', 
+          whiteSpace: 'nowrap',
+          letterSpacing: 0.5,
+          textShadow: isDark ? '0 1px 2px rgba(0,0,0,0.3)' : 'none'
+        }}
+      >
+        {header}
+      </Typography>
+
+      <Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
+        <Typography
+          variant={compact ? "h5" : "h3"}
+          fontWeight={900}
+          sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
+        >
+          {formattedProgress}
+        </Typography>
+
+        <Divider
+          sx={{
+            my: 1,
+            borderColor: "rgba(255,255,255,0.25)",
+            width: "100%",
+          }}
+        />
+
+        <Typography
+          variant={compact ? "caption" : "body2"}
+          sx={{
+            opacity: 0.85,
+            fontWeight: 500,
+            display: "block",
+            color: "rgba(255,255,255,0.9)"
+          }}
+        >
+          of {formattedTotal}
+        </Typography>
+      </Box>
+
+      <Box sx={{ width: "100%", mt: 'auto' }}>
+        <LinearProgress
+          variant="determinate"
+          value={percentage}
+          sx={{
+            height: compact ? 6 : 10,
+            borderRadius: 5,
+            [`&.${linearProgressClasses.colorPrimary}`]: {
+              backgroundColor: "rgba(0, 0, 0, 0.25)",
+            },
+            [`& .${linearProgressClasses.bar}`]: {
+              borderRadius: 5,
+              backgroundColor: "#fff",
+              boxShadow: '0 0 8px rgba(255,255,255,0.4)'
+            },
+          }}
+        />
+      </Box>
+    </Paper>
+  );
+}

src/components/ProgressCard/TopTags.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { Box } from "@mui/material";
+import { ReportData, ReportPeriod } from "../../features/report";
+import ProgressCard from "./ProgressCard";
+
+type Props = {
+  reportData: ReportData;
+  mode: "expense" | "income";
+  selectedPeriodId?: string | null;
+  compact?: boolean;
+};
+
+type DecoratedPeriod = ReportPeriod & {
+  id: string;
+  label: string;
+};
+
+function getAmount(p: ReportPeriod, mode: "expense" | "income") {
+  return mode === "expense" ? p.expenses.sum : p.incomes.sum;
+}
+
+function findPeriod(
+  periods: DecoratedPeriod[],
+  selectedPeriodId?: string | null
+) {
+  if (!periods.length) return null;
+
+  if (selectedPeriodId) {
+    const match = periods.find((p) => p.id === selectedPeriodId);
+    if (match) return match;
+  }
+
+  // fallback → latest
+  return periods.reduce((latest, p) =>
+    new Date(p.start).getTime() > new Date(latest.start).getTime()
+      ? p
+      : latest
+  );
+}
+
+export default function TopTags({
+  reportData,
+  mode,
+  selectedPeriodId,
+  compact = true
+}: Props) {
+  const { items, total } = React.useMemo(() => {
+    const tagMap = new Map<string, number>();
+
+    for (const bucket of reportData.buckets) {
+      const tags = bucket.group_key.tags;
+      if (!tags || tags.length === 0) continue;
+
+      // Prefer FULL if available
+      const fullPeriods = (bucket.periods.full || []) as DecoratedPeriod[];
+
+      const periodsToUse =
+        selectedPeriodId
+          ? Object.values(bucket.periods).flat() as DecoratedPeriod[]
+          : fullPeriods;
+
+      const period = findPeriod(periodsToUse, selectedPeriodId);
+      if (!period) continue;
+
+      const amount = getAmount(period, mode);
+
+      for (const tag of tags) {
+        tagMap.set(tag, (tagMap.get(tag) || 0) + amount);
+      }
+    }
+
+    const arr = Array.from(tagMap.entries()).map(([tag, amount]) => ({
+      tag,
+      amount
+    }));
+
+    arr.sort((a, b) => b.amount - a.amount);
+
+    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",
+        gridTemplateColumns: "repeat(4, 1fr)",
+        gap: 2
+      }}
+    >
+      {items.map((item) => (
+        <ProgressCard
+          key={item.tag}
+          header={item.tag}
+          progressAmount={item.amount}
+          totalAmount={total}
+          compact={compact}
+          colorTheme={mode === "expense" ? "error" : "success"}
+        />
+      ))}
+    </Box>
+  );
+}

src/components/ProgressCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProgressCard";
+export * from "./ProgressCard.models";