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/LatestItems/LatestItems.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Avatar,
+  Typography,
+  Box,
+  Button,
+} from "@mui/material";
+
+export interface LatestItem {
+  id: string | number;
+  icon: React.ReactNode;
+  iconBgColor?: string;
+  title: string;
+  subtitle: string;
+  amount: string;
+  timeAgo: string;
+}
+
+export interface LatestItemsListProps {
+  title?: string;
+  items: LatestItem[];
+  onViewAll?: () => void;
+  accentColor: any;
+}
+
+export default function LatestItems({
+  title = "Recent Transactions",
+  items,
+  onViewAll,
+  accentColor,
+}: LatestItemsListProps) {
+  return (
+    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
+      {/* Header */}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, px: 2 }}>
+        <Typography variant="h6" fontWeight="bold">
+          {title}
+        </Typography>
+        {onViewAll && (
+          <Button
+            variant="text"
+            color="inherit"
+            size="small"
+            sx={{ textTransform: "none", color: "text.secondary", fontWeight: "medium" }}
+            onClick={onViewAll}
+          >
+            view all
+          </Button>
+        )}
+      </Box>
+
+      {/* List */}
+      <List disablePadding>
+        {items.map((item, index) => (
+          <ListItem
+            key={item.id}
+            sx={{
+              px: { xs: 1, sm: 2 },
+              py: 2,
+              mb: index !== items.length - 1 ? 1 : 0,
+              borderRadius: 3,
+              "&:hover": { bgcolor: "action.hover" },
+              transition: "background-color 0.2s ease",
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar
+                variant="rounded"
+                sx={{
+                  bgcolor: `${accentColor}22`,
+                  color: "inherit",
+                  width: 48,
+                  height: 48,
+                  borderRadius: 3,
+                  mr: 2,
+                }}
+              >
+                {item.icon}
+              </Avatar>
+            </ListItemAvatar>
+            
+            <ListItemText
+              primary={
+                <Typography variant="subtitle1" fontWeight={600} color="text.primary">
+                  {item.title}
+                </Typography>
+              }
+              secondary={
+                <Typography variant="body2" color="text.secondary">
+                  {item.subtitle}
+                </Typography>
+              }
+            />
+
+            <Box sx={{ textAlign: "right" }}>
+              <Typography variant="subtitle1" fontWeight={700} color="text.primary">
+                {item.amount}
+              </Typography>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+                {item.timeAgo}
+              </Typography>
+            </Box>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}