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>
This commit is contained in:
134
src/components/Dashboard/Dashboard.view.tsx
Normal file
134
src/components/Dashboard/Dashboard.view.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { DashboardProps, DashboardState } from "./Dashboard.models";
|
||||
|
||||
interface ViewProps extends DashboardProps {
|
||||
state: DashboardState;
|
||||
setState: React.Dispatch<React.SetStateAction<DashboardState>>;
|
||||
toggleMode: () => void;
|
||||
togglePeriodType: () => void;
|
||||
setSelectedPeriodId: (id: string | null) => void;
|
||||
toggleComparison: () => void;
|
||||
}
|
||||
|
||||
export default function DashboardView({
|
||||
config,
|
||||
data,
|
||||
state,
|
||||
setState,
|
||||
toggleMode,
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
setSelectedPeriodId,
|
||||
}: ViewProps) {
|
||||
const theme = useTheme();
|
||||
const themeMode = theme.palette.mode;
|
||||
const { mode, periodType, comparison, selectedPeriodId } = state;
|
||||
|
||||
// Resolve colors with fallbacks
|
||||
const colors = React.useMemo(() => {
|
||||
const palette = config.style?.palette?.[mode];
|
||||
const modeColors = palette ? palette[themeMode] : null;
|
||||
|
||||
if (modeColors) {
|
||||
return {
|
||||
primary: modeColors.primary,
|
||||
light: modeColors.background || alpha(modeColors.primary, 0.1),
|
||||
text: modeColors.text || (themeMode === 'light' ? theme.palette.text.primary : '#fff')
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback to standard theme colors
|
||||
const themeColor = mode === 'expense' ? theme.palette.error : theme.palette.success;
|
||||
return {
|
||||
primary: themeColor.main,
|
||||
light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
|
||||
text: themeColor.main
|
||||
};
|
||||
}, [config.style?.palette, mode, themeMode, theme.palette]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
sx={{
|
||||
mt: 4,
|
||||
mb: 4,
|
||||
background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
transition: 'background 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
|
||||
<ToggleButtonGroup
|
||||
value={mode}
|
||||
exclusive
|
||||
onChange={toggleMode}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
"& .MuiToggleButton-root": {
|
||||
px: 3,
|
||||
textTransform: "none",
|
||||
color: "text.secondary"
|
||||
},
|
||||
"&.Mui-selected": {
|
||||
bgcolor: colors.primary,
|
||||
color: "white",
|
||||
borderColor: colors.primary
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="expense">Expenses</ToggleButton>
|
||||
<ToggleButton value="income">Income</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{config.sections.map((section) => {
|
||||
const Component = section.component;
|
||||
|
||||
return (
|
||||
<Grid key={section.id} size={section.style?.size || 12 as any}>
|
||||
{section.title && !section.isList && (
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Typography variant="h6" fontWeight={700}>
|
||||
{section.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Component
|
||||
{...section.settings}
|
||||
header={section.title}
|
||||
summary={section.summary}
|
||||
reportData={data}
|
||||
title={section.title}
|
||||
accentColor={colors.primary}
|
||||
colorScheme={colors}
|
||||
|
||||
// State management
|
||||
mode={mode}
|
||||
|
||||
periodType={periodType}
|
||||
comparison={comparison}
|
||||
selectedPeriodId={selectedPeriodId}
|
||||
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user