## 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>
150 lines
4.4 KiB
TypeScript
150 lines
4.4 KiB
TypeScript
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 | undefined) {
|
|
const queryClient = useQueryClient();
|
|
|
|
// 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;
|
|
return {
|
|
data: res.data,
|
|
total: isNaN(total as any) ? undefined : total
|
|
};
|
|
},
|
|
enabled: !!endpoint,
|
|
});
|
|
|
|
// --- READ ONE ---
|
|
const useRead = (id: string | null) =>
|
|
useQuery({
|
|
queryKey: [name, "detail", id],
|
|
queryFn: async () => {
|
|
if (!id || !endpoint) return null;
|
|
// @ts-ignore
|
|
const res = await api.get<T>(`${endpoint}/${id}`);
|
|
return res.data;
|
|
},
|
|
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;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
// --- UPDATE ---
|
|
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;
|
|
},
|
|
onSuccess: (updatedItem) => {
|
|
// @ts-ignore
|
|
const id = updatedItem[primaryKey];
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
|
|
},
|
|
});
|
|
|
|
// --- DELETE ---
|
|
const useDelete = () =>
|
|
useMutation({
|
|
mutationFn: async (id: string) => {
|
|
if (!endpoint) throw new Error("Endpoint not defined");
|
|
await api.delete(`${endpoint}/${id}`);
|
|
return id;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
// --- HELPERS FOR useQueries ---
|
|
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;
|
|
return {
|
|
data: res.data,
|
|
total: isNaN(total as any) ? undefined : total
|
|
};
|
|
},
|
|
enabled: !!endpoint,
|
|
});
|
|
|
|
// --- READ ME ---
|
|
const useMe = () =>
|
|
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;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "me"] });
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
return {
|
|
useList,
|
|
useRead,
|
|
useMe,
|
|
useCreate,
|
|
useUpdate,
|
|
useUpdateMe,
|
|
useDelete,
|
|
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);
|
|
}
|
|
|