apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

common component props

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-05-18 16:00:43 +05:30
parent ceaeca70cc
commit 340cb6628d
15 changed files with 303 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Dashboard.tsx
View File

@@ -161,7 +161,6 @@ export default function Dashboard() {
config={configuration}
data={data}
isFetching={report.isFetching}
onFlowChange={handleFlowChange}
/>
</Box>
);

36
src/components/Dashboard/Dashboard.models.ts
View File

@@ -19,27 +19,23 @@ export interface DashboardState {
export interface DashboardStateSetters {
setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
toggleFlow: () => void;
togglePeriodType: () => void;
toggleComparison: () => void;
}
export interface DashboardSection {
id: string;
title?: string;
summary?: string;
title: string;
component: React.ComponentType<any>;
summary?: string;
settings?: Record<string, any>;
isList?: boolean;
style?: {
size?: number;
[key: string]: any;
};
}
export interface ColorDefinition {
primary: string;
background?: string;
text?: string;
background: string;
text: string;
}
export interface ThemeAwarePalette {
@@ -49,14 +45,28 @@ export interface ThemeAwarePalette {
export interface DashboardConfig {
sections: DashboardSection[];
style?: {
palette?: Record<DashboardFlow, ThemeAwarePalette>;
style: {
palette: Record<DashboardFlow, ThemeAwarePalette>;
};
}
export interface DashboardProps {
config: DashboardConfig;
data: ReportData;
isFetching?: boolean;
onFlowChange?: (state: DashboardState) => void;
isFetching: boolean;
}
export interface ComponentProps extends DashboardSection {
reportData: ReportData;
state: DashboardState;
stateSetters: DashboardStateSetters;
isFetching: boolean;
colorScheme: {
primary: string;
light: string;
text: string;
};
}

154
src/components/Dashboard/Dashboard.tsx
View File

@@ -1,8 +1,23 @@
import * as React from "react";
import DashboardView from "./Dashboard.view";
import {
Box,
Container,
Grid,
ToggleButton,
ToggleButtonGroup,
Button
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { DashboardProps, DashboardState, DashboardStateSetters } from "./Dashboard.models";
export default function Dashboard(props: DashboardProps) {
export default function Dashboard({
config,
data,
isFetching,
}: DashboardProps) {
const theme = useTheme();
const themeMode = theme.palette.mode;
const [state, setState] = React.useState<DashboardState>({
flow: "outflows",
periodType: "rolling",
@@ -11,20 +26,11 @@ export default function Dashboard(props: DashboardProps) {
comparison: false,
});
const toggleFlow = (
event: React.MouseEvent<HTMLElement>,
newFlow: "outflows" | "inflows" | null
) => {
if (newFlow === null) return;
setState(prev => {
if (prev.flow === newFlow) return prev;
const next = { ...prev, flow: newFlow };
props.onFlowChange?.(next);
return next;
});
const toggleFlow = () => {
setState(prev => ({
...prev,
flow: prev.flow === "outflows" ? "inflows" : "outflows",
}));
};
const togglePeriodType = () => {
@@ -52,17 +58,119 @@ export default function Dashboard(props: DashboardProps) {
const stateSetters: DashboardStateSetters = {
togglePeriodType,
toggleComparison,
toggleFlow,
setSelectedPeriodId,
setSelectedGroupKey,
};
const { flow, selectedGroupKey } = state;
const colors = React.useMemo(() => {
const palette = config.style.palette[flow];
const modeColors = palette[themeMode];
return {
primary: modeColors.primary,
light: modeColors.background || alpha(modeColors.primary, 0.1),
text:
modeColors.text ||
(themeMode === "light" ? theme.palette.text.primary : "#fff"),
};
// if (modeColors) {
// return {
// primary: modeColors.primary,
// light: modeColors.background || alpha(modeColors.primary, 0.1),
// text:
// modeColors.text ||
// (themeMode === "light" ? theme.palette.text.primary : "#fff"),
// };
// }
//
// const themeColor =
// flow === "outflows" ? 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, flow, themeMode, theme.palette]);
return (
<DashboardView
{...props}
state={state}
setState={setState}
toggleFlow={toggleFlow}
stateSetters={stateSetters}
/>
<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",
flexDirection: "column",
alignItems: "center",
mb: 3,
}}
>
<ToggleButtonGroup
value={flow}
exclusive
onChange={toggleFlow}
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="outflows">Outflows</ToggleButton>
<ToggleButton value="inflows">Inflows</ToggleButton>
</ToggleButtonGroup>
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
<Button
size="small"
sx={{ mt: 1, textTransform: "none" }}
onClick={() => setSelectedGroupKey(null)}
>
Clear Drill-down
</Button>
)}
</Box>
<Grid container spacing={4}>
{config.sections.map((section) => {
const Component = section.component;
return (
<Grid key={section.id} size={12}>
<Component
{...section}
reportData={data}
state={state}
stateSetters={stateSetters}
isFetching={isFetching}
colorScheme={colors}
/>
</Grid>
);
})}
</Grid>
</Container>
);
}

129
src/components/Dashboard/Dashboard.view.tsx
View File

@@ -1,129 +0,0 @@
import * as React from "react";
import {
Box,
Container,
Grid,
Typography,
ToggleButton,
ToggleButtonGroup,
Button
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { GroupKey } from "../../features/report";
import { DashboardProps, DashboardState, DashboardStateSetters } from "./Dashboard.models";
interface ViewProps extends DashboardProps {
state: DashboardState;
setState: React.Dispatch<React.SetStateAction<DashboardState>>;
toggleFlow: (event: React.MouseEvent<HTMLElement>, newFlow: "outflows" | "inflows" | null) => void;
stateSetters: DashboardStateSetters;
}
export default function DashboardView({
config,
data,
state,
setState,
toggleFlow,
stateSetters,
}: ViewProps) {
const theme = useTheme();
const themeMode = theme.palette.mode;
const { flow, selectedGroupKey } = state;
const { setSelectedGroupKey } = stateSetters;
// Resolve colors with fallbacks
const colors = React.useMemo(() => {
const palette = config.style?.palette?.[flow];
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 = flow === 'outflows' ? 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, flow, 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", flexDirection: "column", alignItems: "center", mb: 3 }}>
<ToggleButtonGroup
value={flow}
exclusive
onChange={toggleFlow}
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="outflows">Outflows</ToggleButton>
<ToggleButton value="inflows">Inflows</ToggleButton>
</ToggleButtonGroup>
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
<Button
size="small"
sx={{ mt: 1, textTransform: "none" }}
onClick={() => setSelectedGroupKey(null)}
>
Clear Drill-down
</Button>
)}
</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}>
<Component
{...section.settings}
header={section.title}
summary={section.summary}
reportData={data}
title={section.title}
accentColor={colors.primary}
colorScheme={colors}
// State management
state={state}
stateSetters={stateSetters}
isFetching={arguments[0].isFetching}
/>
</Grid>
);
})}
</Grid>
</Container>
);
}

6
src/components/HistoryChart/HistoryChart.models.ts
View File

@@ -1,5 +1,3 @@
import { ComponentProps } from "../report.props";
export interface _ChartDataPoint {
id: string;
label: string;
@@ -10,7 +8,3 @@ export interface _ChartDataPoint {
export interface ChartDataPoint extends _ChartDataPoint {
compare?: _ChartDataPoint;
}
export interface HistoryChartProps extends ComponentProps {
tabs: string[];
}

21
src/components/HistoryChart/HistoryChart.props.ts Normal file
View File

@@ -0,0 +1,21 @@
import * as React from "react";
import { ComponentProps } from "../Dashboard";
import { ChartDataPoint } from "./HistoryChart.models";
export interface HistoryChartProps extends ComponentProps {
settings: {
tabs: string[];
};
}
export interface HistoryChartViewProps extends HistoryChartProps {
activeTab: string;
setActiveTab: (v: string) => void;
currentData: ChartDataPoint[];
visibleData: ChartDataPoint[];
maxAmount: number;
visibleCount: number;
startIndex: number;
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
activeDataKey: string;
}

8
src/components/HistoryChart/HistoryChart.tsx
View File

@@ -1,18 +1,22 @@
import * as React from "react";
import { HistoryChartProps } from "./HistoryChart.models";
import HistoryChartView from "./HistoryChart.view";
import { buildChartData, tabToKey } from "./HistoryChart.adapter";
import { HistoryChartProps } from "./HistoryChart.props";
export default function HistoryChart(props: HistoryChartProps) {
const {
tabs,
settings,
reportData,
state,
stateSetters,
isFetching,
} = props;
const { flow, comparison, selectedPeriodId } = state;
const { setSelectedPeriodId } = stateSetters;
const { tabs } = settings;
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
const [startIndex, setStartIndex] = React.useState(0);

60
src/components/HistoryChart/HistoryChart.view.tsx
View File

@@ -11,43 +11,31 @@ import IconButton from "@mui/material/IconButton";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import {
ChartDataPoint,
HistoryChartProps,
} from "./HistoryChart.models";
HistoryChartViewProps,
} from "./HistoryChart.props";
import { formatDisplay } from "./HistoryChart.utils";
interface ViewProps extends HistoryChartProps {
activeTab: string;
setActiveTab: (v: string) => void;
currentData: ChartDataPoint[];
visibleData: ChartDataPoint[];
maxAmount: number;
visibleCount: number;
startIndex: number;
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
activeDataKey: string;
}
export default function HistoryChartView({
title,
summary,
settings,
export default function HistoryChartView(props: ViewProps) {
const {
header,
summary,
tabs,
colorScheme,
state,
stateSetters,
isFetching,
state,
stateSetters,
colorScheme,
activeTab,
setActiveTab,
currentData,
visibleData,
maxAmount,
visibleCount,
startIndex,
setStartIndex,
activeDataKey,
} = props;
activeTab,
setActiveTab,
currentData,
visibleData,
maxAmount,
visibleCount,
startIndex,
setStartIndex,
activeDataKey,
}: HistoryChartViewProps) {
const { flow, periodType, selectedPeriodId, comparison } = state;
const { togglePeriodType, setSelectedPeriodId, toggleComparison } = stateSetters;
@@ -89,13 +77,13 @@ export default function HistoryChartView(props: ViewProps) {
border: "1px solid",
borderColor: "divider",
bgcolor: isDark ? "background.paper" : colorScheme.light,
opacity: props.isFetching ? 0.6 : 1,
opacity: isFetching ? 0.6 : 1,
transition: "opacity 0.3s ease",
pointerEvents: props.isFetching ? "none" : "auto",
pointerEvents: isFetching ? "none" : "auto",
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom>
{header}
{title}
</Typography>
{summary && (
@@ -105,7 +93,7 @@ export default function HistoryChartView(props: ViewProps) {
)}
<ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} fullWidth sx={{ mb: 4 }}>
{tabs.map((tab) => (
{settings.tabs.map((tab) => (
<ToggleButton key={tab} value={tab}>
{tab}
</ToggleButton>

14
src/components/ProgressCard/ProgressCard.props.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ComponentProps } from "../Dashboard";
export interface ProgressCardProps extends ComponentProps {
settings: {
compact: boolean;
};
}
export interface ProgressCardViewProps extends ProgressCardProps {
progressAmount: number;
totalAmount: number;
selected: boolean;
onClick: () => void;
}

25
src/components/ProgressCard/ProgressCard.tsx
View File

@@ -1,25 +0,0 @@
import * as React from "react";
import ProgressCardView from "./ProgressCard.view";
import { ProgressCardProps } from "./ProgressCard.models";
import { getPercentage, formatCurrency } from "../report.helpers";
export default function ProgressCard(props: ProgressCardProps) {
const { progressAmount, totalAmount, compact = false } = props;
const percentage = getPercentage(progressAmount, totalAmount);
const formattedProgress = formatCurrency(progressAmount);
const formattedTotal = formatCurrency(totalAmount);
return (
<ProgressCardView
{...props}
percentage={percentage}
formattedProgress={formattedProgress}
formattedTotal={formattedTotal}
compact={compact}
selected={props.selected}
onClick={props.onClick}
/>
);
}

114
src/components/ProgressCard/ProgressCard.view.tsx
View File

@@ -8,93 +8,83 @@ import {
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;
selected?: boolean;
onClick?: () => void;
}
import { getPercentage, formatCurrency } from "../report.helpers";
import { ProgressCardViewProps } from "./ProgressCard.props";
export default function ProgressCardView({
header,
colorTheme = "info",
percentage,
formattedProgress,
formattedTotal,
compact = false,
title,
settings,
isFetching,
colorScheme,
progressAmount,
totalAmount,
selected,
onClick,
}: ViewProps) {
}: ProgressCardViewProps) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const percentage = getPercentage(progressAmount, totalAmount);
const formattedProgress = formatCurrency(progressAmount);
const formattedTotal = formatCurrency(totalAmount);
return (
<Paper
elevation={compact ? 2 : 4}
elevation={settings.compact ? 2 : 4}
onClick={onClick}
sx={{
width: "100%",
p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
borderRadius: compact ? 3 : 4,
cursor: onClick ? "pointer" : "default",
p: settings.compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
borderRadius: settings.compact ? 3 : 4,
transform: selected ? "scale(1.02)" : "scale(1)",
transition: "transform 0.2s ease, box-shadow 0.2s ease",
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%)`;
},
bgcolor: isDark ? "background.paper" : colorScheme.light,
color: "#fff",
display: "flex",
flexDirection: "column",
alignItems: compact ? "flex-start" : "center",
alignItems: settings.compact ? "flex-start" : "center",
justifyContent: "center",
position: "relative",
overflow: "hidden",
border: selected
border: selected
? `2px solid #fff`
: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
boxShadow: (theme) => {
const baseShadow = `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
}`;
return selected
? `${baseShadow}, 0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette[colorTheme]?.main || theme.palette.primary.main}`
: baseShadow;
},
opacity: arguments[0].isFetching ? 0.6 : 1,
pointerEvents: arguments[0].isFetching ? "none" : "auto",
: isDark
? "1px solid rgba(255,255,255,0.1)"
: "none",
boxShadow: "none",
opacity: isFetching ? 0.6 : 1,
pointerEvents: isFetching ? "none" : "auto",
}}
>
<Typography
variant={compact ? "body2" : "subtitle1"}
fontWeight={700}
sx={{
opacity: 0.95,
mb: compact ? 1.5 : 2,
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
<Typography
variant={settings.compact ? "body2" : "subtitle1"}
fontWeight={700}
sx={{
opacity: 0.95,
mb: settings.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'
textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.3)" : "none",
}}
>
{header}
{title}
</Typography>
<Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
<Box sx={{ mb: settings.compact ? 2 : 3, width: "100%" }}>
<Typography
variant={compact ? "h5" : "h3"}
variant={settings.compact ? "h5" : "h3"}
fontWeight={900}
sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
sx={{
mb: 0.5,
lineHeight: 1.2,
textShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "none",
}}
>
{formattedProgress}
</Typography>
@@ -108,24 +98,24 @@ export default function ProgressCardView({
/>
<Typography
variant={compact ? "caption" : "body2"}
variant={settings.compact ? "caption" : "body2"}
sx={{
opacity: 0.85,
fontWeight: 500,
display: "block",
color: "rgba(255,255,255,0.9)"
color: "rgba(255,255,255,0.9)",
}}
>
of {formattedTotal}
</Typography>
</Box>
<Box sx={{ width: "100%", mt: 'auto' }}>
<Box sx={{ width: "100%", mt: "auto" }}>
<LinearProgress
variant="determinate"
value={percentage}
sx={{
height: compact ? 6 : 10,
height: settings.compact ? 6 : 10,
borderRadius: 5,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: "rgba(0, 0, 0, 0.25)",
@@ -133,7 +123,7 @@ export default function ProgressCardView({
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
backgroundColor: "#fff",
boxShadow: '0 0 8px rgba(255,255,255,0.4)'
boxShadow: "0 0 8px rgba(255,255,255,0.4)",
},
}}
/>

36
src/components/ProgressCard/TopPayees.tsx
View File

@@ -1,21 +1,19 @@
import * as React from "react";
import { Box, Paper, Typography } from "@mui/material";
import { ComponentProps } from "../report.props";
import ProgressCard from "./ProgressCard";
import ProgressCardView from "./ProgressCard.view";
import { extractTopPayees } from "./TopPayees.adapter";
import { ProgressCardProps } from "./ProgressCard.props";
interface Props extends ComponentProps {
compact?: boolean;
}
export default function TopPayees(props: ProgressCardProps) {
const {
title,
export default function TopPayees({
reportData,
state,
stateSetters,
header,
compact = true,
isFetching,
}: Props) {
reportData,
state,
stateSetters,
isFetching,
} = props
const { flow, selectedPeriodId, selectedGroupKey } = state;
const { setSelectedGroupKey } = stateSetters;
@@ -39,7 +37,7 @@ export default function TopPayees({
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom>
{header}
{title}
</Typography>
<Box
@@ -54,17 +52,15 @@ export default function TopPayees({
}}
>
{items.map((item) => {
const isSelected = selectedGroupKey?.payee?.includes(item.name);
const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
return (
<ProgressCard
<ProgressCardView
{...props}
key={item.name}
header={item.name}
title={item.name}
progressAmount={item.amount}
totalAmount={total}
compact={compact}
colorTheme={flow === "outflows" ? "error" : "success"}
selected={isSelected}
isFetching={isFetching}
onClick={() => {
if (setSelectedGroupKey) {
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};

36
src/components/ProgressCard/TopTags.tsx
View File

@@ -1,21 +1,19 @@
import * as React from "react";
import { Box, Paper, Typography } from "@mui/material";
import { ComponentProps } from "../report.props";
import ProgressCard from "./ProgressCard";
import ProgressCardView from "./ProgressCard.view";
import { extractTopTags } from "./TopTags.adapter";
import { ProgressCardProps } from "./ProgressCard.props";
interface Props extends ComponentProps {
compact?: boolean;
}
export default function TopTags(props: ProgressCardProps) {
const {
title,
export default function TopTags({
reportData,
state,
stateSetters,
header,
compact = true,
isFetching,
}: Props) {
reportData,
state,
stateSetters,
isFetching,
} = props
const { flow, selectedPeriodId, selectedGroupKey } = state;
const { setSelectedGroupKey } = stateSetters;
@@ -39,7 +37,7 @@ export default function TopTags({
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom>
{header}
{title}
</Typography>
<Box
@@ -54,17 +52,15 @@ export default function TopTags({
}}
>
{items.map((item) => {
const isSelected = selectedGroupKey?.tags?.includes(item.tag);
const isSelected = !!selectedGroupKey?.tags?.includes(item.tag);
return (
<ProgressCard
<ProgressCardView
{...props}
key={item.tag}
header={item.tag}
title={item.tag}
progressAmount={item.amount}
totalAmount={total}
compact={compact}
colorTheme={flow === "outflows" ? "error" : "success"}
selected={isSelected}
isFetching={isFetching}
onClick={() => {
if (setSelectedGroupKey) {
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};

17
src/components/report.props.ts
View File

@@ -1,17 +0,0 @@
import { ReportData } from "../features/report";
import { DashboardState, DashboardStateSetters } from "./Dashboard";
export interface ComponentProps {
reportData: ReportData;
state: DashboardState;
stateSetters: DashboardStateSetters;
isFetching?: boolean;
header: string;
summary?: string;
accentColor?: string;
colorScheme?: {
primary: string;
light: string;
text: string;
};
}

12
src/dashboard-config.ts
View File

@@ -14,9 +14,6 @@ export const configuration: DashboardConfig = {
settings: {
tabs: ["Weekly", "Monthly"],
},
style: {
size: 12,
},
},
{
id: "top-categories",
@@ -25,9 +22,6 @@ export const configuration: DashboardConfig = {
settings: {
compact: true,
},
style: {
size: 12,
},
},
{
id: "top-payees",
@@ -36,17 +30,11 @@ export const configuration: DashboardConfig = {
settings: {
compact: true,
},
style: {
size: 12,
},
},
{
id: "items",
title: 'Recent Transactions',
component: LatestItems,
style: {
size: 12,
},
},
],
style: {