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:
127
src/components/ProgressCard/ProgressCard.view.tsx
Normal file
127
src/components/ProgressCard/ProgressCard.view.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user