## 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>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import axios, { AxiosInstance } from "axios";
|
|
import { createApiClient } from "../../react-auth";
|
|
|
|
/**
|
|
* We expose a singleton-like getter/setter for the API clients
|
|
*/
|
|
let _api: AxiosInstance | null = null;
|
|
let _auth: AxiosInstance | null = null;
|
|
|
|
function withParamsSerializer(instance: AxiosInstance): AxiosInstance {
|
|
instance.defaults.paramsSerializer = {
|
|
serialize: (params) => {
|
|
const searchParams = new URLSearchParams();
|
|
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
if (Array.isArray(value)) {
|
|
value.forEach((v) => {
|
|
searchParams.append(key, String(v)); // NO []
|
|
});
|
|
} else if (value !== undefined && value !== null) {
|
|
searchParams.append(key, String(value));
|
|
}
|
|
});
|
|
|
|
return searchParams.toString();
|
|
},
|
|
};
|
|
|
|
return instance;
|
|
}
|
|
|
|
export const api = {
|
|
get: (...args: Parameters<AxiosInstance["get"]>) => {
|
|
if (!_api) throw new Error("API client not initialized");
|
|
return _api.get(...args);
|
|
},
|
|
post: (...args: Parameters<AxiosInstance["post"]>) => {
|
|
if (!_api) throw new Error("API client not initialized");
|
|
return _api.post(...args);
|
|
},
|
|
put: (...args: Parameters<AxiosInstance["put"]>) => {
|
|
if (!_api) throw new Error("API client not initialized");
|
|
return _api.put(...args);
|
|
},
|
|
delete: (...args: Parameters<AxiosInstance["delete"]>) => {
|
|
if (!_api) throw new Error("API client not initialized");
|
|
return _api.delete(...args);
|
|
},
|
|
};
|
|
|
|
export const auth = {
|
|
post: (...args: Parameters<AxiosInstance["post"]>) => {
|
|
if (!_auth) throw new Error("Auth client not initialized");
|
|
return _auth.post(...args);
|
|
},
|
|
get: (...args: Parameters<AxiosInstance["get"]>) => {
|
|
if (!_auth) throw new Error("Auth client not initialized");
|
|
return _auth.get(...args);
|
|
},
|
|
};
|
|
|
|
export function initializeApiClients(baseUrl: string, authBaseUrl: string) {
|
|
_api = withParamsSerializer(createApiClient(baseUrl));
|
|
_auth = withParamsSerializer(createApiClient(authBaseUrl));
|
|
}
|