Compare commits
2 Commits
0.2.1
...
f025a7d9bf
| Author | SHA1 | Date | |
|---|---|---|---|
| f025a7d9bf | |||
| 052c5a3026 |
@@ -9,7 +9,6 @@
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<title>khata - Aetoskia</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -49,8 +49,8 @@ export default function EnhancedTable({
|
||||
config,
|
||||
data,
|
||||
total,
|
||||
paginationModel: externalPaginationModel,
|
||||
onPaginationModelChange: externalOnPaginationModelChange,
|
||||
paginationModel,
|
||||
onPaginationModelChange,
|
||||
loading = false,
|
||||
onEdit,
|
||||
onDelete,
|
||||
@@ -61,14 +61,6 @@ export default function EnhancedTable({
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isServer = config.filterOptions?.mode !== "client";
|
||||
const [internalPaginationModel, setInternalPaginationModel] = React.useState<GridPaginationModel>({
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const paginationModel = isServer ? externalPaginationModel : internalPaginationModel;
|
||||
const onPaginationModelChange = isServer ? externalOnPaginationModelChange : setInternalPaginationModel;
|
||||
|
||||
const columns: GridColDef[] = React.useMemo(() => {
|
||||
const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
|
||||
let muiType: 'string' | 'number' | 'boolean' | 'date' | 'dateTime' | 'singleSelect' = 'string';
|
||||
@@ -130,15 +122,6 @@ export default function EnhancedTable({
|
||||
return cols;
|
||||
}, [config, onDelete, navigate, onNavigateToResource]);
|
||||
|
||||
const mobilePageSize = 10;
|
||||
const [mobilePage, setMobilePage] = React.useState(0);
|
||||
const mobileTotalPages = Math.ceil(data.length / mobilePageSize) || 1;
|
||||
const mobileData = data.slice(mobilePage * mobilePageSize, (mobilePage + 1) * mobilePageSize);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (mobilePage >= mobileTotalPages) setMobilePage(0);
|
||||
}, [data.length, mobilePage, mobileTotalPages]);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box>
|
||||
@@ -149,7 +132,7 @@ export default function EnhancedTable({
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{mobileData.map((row) => (
|
||||
{data.map((row) => (
|
||||
<Box key={row[config.primaryKey] || Math.random()}>
|
||||
<MobileCardRow
|
||||
row={row}
|
||||
@@ -162,17 +145,6 @@ export default function EnhancedTable({
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 2, flexWrap: 'wrap' }}>
|
||||
<Button size="small" disabled={mobilePage === 0} onClick={() => setMobilePage(mobilePage - 1)}>
|
||||
Previous
|
||||
</Button>
|
||||
<Typography variant="body2" sx={{ alignSelf: 'center', px: 1 }}>
|
||||
Page {mobilePage + 1} of {mobileTotalPages}
|
||||
</Typography>
|
||||
<Button size="small" disabled={mobilePage >= mobileTotalPages - 1} onClick={() => setMobilePage(mobilePage + 1)}>
|
||||
Next
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -189,18 +161,20 @@ export default function EnhancedTable({
|
||||
rows={data || []}
|
||||
columns={columns}
|
||||
autoHeight
|
||||
paginationMode={isServer ? 'server' : 'client'}
|
||||
{...(isServer ? {
|
||||
rowCount: (() => {
|
||||
if (total !== undefined) return total;
|
||||
const page = paginationModel?.page || 0;
|
||||
const pageSize = paginationModel?.pageSize || 10;
|
||||
if (data.length < pageSize) {
|
||||
return page * pageSize + data.length;
|
||||
}
|
||||
return (page + 2) * pageSize;
|
||||
})(),
|
||||
} : {})}
|
||||
paginationMode={config.pagination ? 'server' : 'client'}
|
||||
rowCount={(() => {
|
||||
if (!config.pagination) return data.length;
|
||||
if (total !== undefined) return total;
|
||||
|
||||
// Graceful fallback for missing total count
|
||||
const page = paginationModel?.page || 0;
|
||||
const pageSize = paginationModel?.pageSize || 10;
|
||||
if (data.length < pageSize) {
|
||||
return page * pageSize + data.length;
|
||||
}
|
||||
// Enable 'Next' button by pretending there's at least one more page
|
||||
return (page + 2) * pageSize;
|
||||
})()}
|
||||
loading={loading}
|
||||
paginationModel={paginationModel || { page: 0, pageSize: 10 }}
|
||||
onPaginationModelChange={onPaginationModelChange}
|
||||
@@ -260,7 +234,7 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
||||
{field.label}
|
||||
</Typography>
|
||||
<Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
|
||||
<FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -1,313 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Paper,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import DoneIcon from "@mui/icons-material/Done";
|
||||
import FilterListIcon from "@mui/icons-material/FilterList";
|
||||
import { ResourceField, ResourceMode } from "../types/config";
|
||||
|
||||
function FilterAutocomplete({
|
||||
options,
|
||||
value,
|
||||
label,
|
||||
onChange,
|
||||
}: {
|
||||
options: string[];
|
||||
value: string[];
|
||||
label: string;
|
||||
onChange: (val: string[]) => void;
|
||||
}) {
|
||||
const listboxRef = React.useRef<HTMLUListElement>(null);
|
||||
const scrollPosRef = React.useRef(0);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [frozenValue, setFrozenValue] = React.useState<string[]>(value);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
setOpen(prev => {
|
||||
const next = !prev;
|
||||
setFrozenValue(value);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
const sortedOptions = React.useMemo(() => {
|
||||
const sel = new Set(frozenValue);
|
||||
const picked: string[] = [];
|
||||
const rest: string[] = [];
|
||||
for (const o of options) {
|
||||
if (sel.has(o)) picked.push(o);
|
||||
else rest.push(o);
|
||||
}
|
||||
return [...picked, ...rest];
|
||||
}, [options, frozenValue]);
|
||||
|
||||
return (
|
||||
<Autocomplete
|
||||
multiple
|
||||
freeSolo
|
||||
disableCloseOnSelect
|
||||
open={open}
|
||||
onOpen={toggleDropdown}
|
||||
onClose={toggleDropdown}
|
||||
options={sortedOptions}
|
||||
value={value}
|
||||
getOptionKey={(option) => option}
|
||||
onChange={(_, val) => onChange(val.length > 0 ? val : [])}
|
||||
ListboxProps={{
|
||||
ref: listboxRef,
|
||||
onScroll: (e) => { scrollPosRef.current = (e.target as HTMLUListElement).scrollTop; },
|
||||
}}
|
||||
renderOption={(props, option, { selected }) => {
|
||||
const { key, ...rest } = props;
|
||||
return (
|
||||
<li key={key} {...rest}>
|
||||
{selected ? <DoneIcon sx={{ fontSize: 14, mr: 1, color: 'primary.main' }} /> : <Box sx={{ width: 22, mr: 1 }} />}
|
||||
{option}
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
renderTags={(tagValue, getTagProps) => {
|
||||
const maxChips = 1;
|
||||
return (
|
||||
<>
|
||||
{tagValue.slice(0, maxChips).map((tag, index) => {
|
||||
const { key, ...tagProps } = getTagProps({ index });
|
||||
return <Chip
|
||||
key={key}
|
||||
{...tagProps}
|
||||
label={tag.length > 10 ? `${tag.slice(0, 8)}..` : tag}
|
||||
size="small"
|
||||
onClick={toggleDropdown}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
/>;
|
||||
})}
|
||||
{tagValue.length > maxChips && (
|
||||
<Chip
|
||||
label={`+${tagValue.length - maxChips}`}
|
||||
size="small"
|
||||
onClick={toggleDropdown}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} placeholder={`Add ${label}...`} />}
|
||||
sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function extractOptions(
|
||||
fieldName: string,
|
||||
field: ResourceField,
|
||||
data: any[]
|
||||
): string[] {
|
||||
const values = new Set<string>();
|
||||
|
||||
if (field.options) return field.options;
|
||||
if (!data) return [];
|
||||
|
||||
const pull = (item: any): string | null => {
|
||||
if (item == null) return null;
|
||||
if (typeof item === "string") return item;
|
||||
if (typeof item !== "object") return String(item);
|
||||
|
||||
const df = field.displayField;
|
||||
if (!df) { debugger; return null; }
|
||||
|
||||
if (Array.isArray(df)) {
|
||||
const parts = df.map((k) => item[k]).filter((v) => v != null);
|
||||
if (parts.length > 0) return parts.join(" ");
|
||||
} else {
|
||||
const v = item[df];
|
||||
if (v != null) return String(v);
|
||||
}
|
||||
|
||||
debugger;
|
||||
return null;
|
||||
};
|
||||
|
||||
for (const row of data) {
|
||||
const v = row[fieldName];
|
||||
if (v == null) continue;
|
||||
|
||||
if (Array.isArray(v)) {
|
||||
for (const el of v) {
|
||||
const label = pull(el);
|
||||
if (label) values.add(label);
|
||||
}
|
||||
} else {
|
||||
const label = pull(v);
|
||||
if (label) values.add(label);
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('extracted', fieldName, Array.from(values).sort())
|
||||
return Array.from(values).sort();
|
||||
}
|
||||
|
||||
function renderFilterInput(
|
||||
fieldName: string,
|
||||
field: ResourceField,
|
||||
options: string[],
|
||||
value: any,
|
||||
onChange: (key: string, val: any) => void
|
||||
) {
|
||||
const filterType = field.filterType;
|
||||
|
||||
if (filterType === "number-range") {
|
||||
const rangeVal = (value as { min?: string; max?: string }) || {};
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
<TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
|
||||
onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
|
||||
<TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
|
||||
onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (filterType === "date-range") {
|
||||
const rangeVal = (value as { start?: string; end?: string }) || {};
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
<TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
|
||||
onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
|
||||
<TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
|
||||
onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const selected = Array.isArray(value) ? value : [];
|
||||
|
||||
return (
|
||||
<FilterAutocomplete
|
||||
options={options}
|
||||
value={selected}
|
||||
label={field.label}
|
||||
onChange={(val) => onChange("value", val.length > 0 ? val : undefined)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export interface FilterBarProps {
|
||||
fields: Record<string, ResourceField>;
|
||||
filterableFields: string[];
|
||||
mode: ResourceMode;
|
||||
data?: any[];
|
||||
appliedValues: Record<string, any>;
|
||||
onApply: (values: Record<string, any>) => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export default function FilterBar({
|
||||
fields,
|
||||
filterableFields,
|
||||
data,
|
||||
appliedValues,
|
||||
onApply,
|
||||
onClear,
|
||||
}: FilterBarProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) setDraft({ ...appliedValues });
|
||||
}, [appliedValues, open]);
|
||||
|
||||
if (!filterableFields || filterableFields.length === 0) return null;
|
||||
|
||||
const activeCount = Object.keys(appliedValues).filter((k) => {
|
||||
const v = appliedValues[k];
|
||||
if (v == null || v === "") return false;
|
||||
if (typeof v === "object" && Object.values(v).every((x) => x == null || x === "")) return false;
|
||||
return true;
|
||||
}).length;
|
||||
|
||||
const handleApply = () => onApply({ ...draft });
|
||||
const handleClear = () => {
|
||||
setDraft({});
|
||||
onClear();
|
||||
};
|
||||
|
||||
const updateDraft = (fieldName: string, key: string, val: any) => {
|
||||
setDraft((prev) => {
|
||||
if (key === "value") {
|
||||
return { ...prev, [fieldName]: val };
|
||||
}
|
||||
const existing = prev[fieldName] || {};
|
||||
return { ...prev, [fieldName]: { ...existing, [key]: val } };
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ mb: 2, borderRadius: 2, overflow: "hidden" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
px: 2,
|
||||
py: 1,
|
||||
cursor: "pointer",
|
||||
"&:hover": { bgcolor: "action.hover" },
|
||||
}}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<FilterListIcon fontSize="small" color="action" />
|
||||
<Typography variant="subtitle2" fontWeight={600}>
|
||||
{open ? "Hide Filters" : "Show Filters"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{activeCount > 0 && (
|
||||
<Typography variant="caption" color="primary" fontWeight={600}>
|
||||
{activeCount} active
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{open && (
|
||||
<Box sx={{ px: 2, pb: 2, borderTop: "1px solid", borderColor: "divider", pt: 2 }}>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, alignItems: "flex-end" }}>
|
||||
{filterableFields.map((fieldName) => {
|
||||
const field = fields[fieldName];
|
||||
if (!field) return null;
|
||||
|
||||
const needsOptions = !field.filterType || field.filterType === "autocomplete" || field.filterType === "multiselect";
|
||||
const options = needsOptions ? extractOptions(fieldName, field, data ?? []) : [];
|
||||
const raw = draft[fieldName];
|
||||
|
||||
return (
|
||||
<Box key={fieldName} sx={{ display: "flex", flexDirection: "column", flex: { xs: '0 0 100%', sm: 1 }, minWidth: { sm: 200 } }}>
|
||||
<Box sx={{ typography: "caption", mb: 0.5, color: "text.secondary" }}>
|
||||
{field.label}
|
||||
</Box>
|
||||
{renderFilterInput(fieldName, field, options, raw, (key, val) =>
|
||||
updateDraft(fieldName, key, val)
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2, display: "flex", gap: 1 }}>
|
||||
<Button variant="contained" onClick={handleApply}>
|
||||
Apply
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={handleClear}>
|
||||
Clear
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import { Box, Paper, CircularProgress } from '@mui/material';
|
||||
import { Box, Typography, Paper, CircularProgress } from '@mui/material';
|
||||
import { ResourceConfig } from '../types/config';
|
||||
import type { ResourceField } from '../types/config';
|
||||
import { useResource } from '../hooks/useResource';
|
||||
import GenericForm from './GenericForm';
|
||||
import EnhancedTable from './EnhancedTable';
|
||||
import FilterBar from './FilterBar';
|
||||
import { useParams, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useParams, useLocation, useNavigate, Routes, Route } from 'react-router-dom';
|
||||
|
||||
interface ResourceViewProps {
|
||||
config: ResourceConfig;
|
||||
@@ -15,92 +13,6 @@ interface ResourceViewProps {
|
||||
|
||||
import { GridPaginationModel } from '@mui/x-data-grid';
|
||||
|
||||
function getFilterDisplayFields(field: ResourceField): string[] {
|
||||
if (!field.displayField) return [];
|
||||
return (Array.isArray(field.displayField) ? field.displayField : [field.displayField]).filter(
|
||||
(df): df is string => !!df
|
||||
);
|
||||
}
|
||||
|
||||
function applyClientFilters(
|
||||
data: any[],
|
||||
filters: Record<string, any>,
|
||||
fields: Record<string, ResourceField>
|
||||
): any[] {
|
||||
const entries = Object.entries(filters).filter(([_, v]) => {
|
||||
if (v == null || v === "" || (Array.isArray(v) && v.length === 0)) return false;
|
||||
if (typeof v === "object" && !Array.isArray(v) && Object.values(v).every((x) => x == null || x === "")) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
if (entries.length === 0) return data;
|
||||
|
||||
return data.filter((item) =>
|
||||
entries.every(([fieldName, filterValue]) => {
|
||||
const field = fields[fieldName];
|
||||
if (!field) return true;
|
||||
|
||||
const itemValue = item[fieldName];
|
||||
|
||||
if (typeof filterValue === "object" && !Array.isArray(filterValue)) {
|
||||
if (field.type === "number") {
|
||||
if (filterValue.min != null && filterValue.min !== "" && Number(itemValue) < Number(filterValue.min)) return false;
|
||||
if (filterValue.max != null && filterValue.max !== "" && Number(itemValue) > Number(filterValue.max)) return false;
|
||||
return true;
|
||||
}
|
||||
if (field.type === "datetime" || field.type === "date") {
|
||||
const itemTime = new Date(itemValue).getTime();
|
||||
if (filterValue.start && new Date(filterValue.start).getTime() > itemTime) return false;
|
||||
if (filterValue.end && new Date(filterValue.end).getTime() < itemTime) return false;
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (Array.isArray(filterValue)) {
|
||||
if (field.type === "array" && Array.isArray(itemValue)) {
|
||||
return itemValue.some((el: any) => {
|
||||
if (el != null && typeof el === "object") {
|
||||
const dispFields = getFilterDisplayFields(field);
|
||||
return dispFields.some((df) => filterValue.includes(String(el[df])));
|
||||
}
|
||||
return filterValue.includes(String(el));
|
||||
});
|
||||
}
|
||||
if (itemValue && typeof itemValue === "object") {
|
||||
const dispFields = getFilterDisplayFields(field);
|
||||
const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" ");
|
||||
return filterValue.includes(itemDisplay);
|
||||
}
|
||||
return filterValue.includes(String(itemValue));
|
||||
}
|
||||
|
||||
if (!filterValue) return true;
|
||||
|
||||
if (field.type === "boolean") {
|
||||
return String(itemValue) === filterValue;
|
||||
}
|
||||
|
||||
if (field.type === "array" && Array.isArray(itemValue)) {
|
||||
return itemValue.some((el: any) => {
|
||||
if (el != null && typeof el === "object") {
|
||||
const dispFields = getFilterDisplayFields(field);
|
||||
return dispFields.some((df) => String(el[df]) === String(filterValue));
|
||||
}
|
||||
return String(el) === String(filterValue);
|
||||
});
|
||||
}
|
||||
|
||||
if (itemValue && typeof itemValue === "object") {
|
||||
const dispFields = getFilterDisplayFields(field);
|
||||
return dispFields.some((df) => String(itemValue[df]) === String(filterValue));
|
||||
}
|
||||
|
||||
return String(itemValue) === String(filterValue);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
|
||||
const { id } = useParams();
|
||||
const location = useLocation();
|
||||
@@ -111,36 +23,26 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
|
||||
const isView = !!id && !isEdit;
|
||||
const isList = !id && !isCreate;
|
||||
|
||||
const isServer = config.filterOptions?.mode !== "client";
|
||||
|
||||
const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const [appliedFilters, setAppliedFilters] = React.useState<Record<string, any>>({});
|
||||
|
||||
const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
|
||||
|
||||
// Determine query parameters based on pagination config
|
||||
const queryParams = React.useMemo(() => {
|
||||
if (!isServer) return { limit: 10000 };
|
||||
if (!config.pagination) return {};
|
||||
return {
|
||||
skip: paginationModel.page * paginationModel.pageSize,
|
||||
limit: paginationModel.pageSize,
|
||||
};
|
||||
}, [isServer, paginationModel]);
|
||||
}, [config.pagination, paginationModel]);
|
||||
|
||||
const listQuery = useList(queryParams);
|
||||
const itemQuery = useRead(id || "");
|
||||
|
||||
const rawData = listQuery.data?.data || [];
|
||||
const totalCount = listQuery.data?.total;
|
||||
|
||||
const filteredData = React.useMemo(
|
||||
() => (isServer ? rawData : applyClientFilters(rawData, appliedFilters, config.fields)),
|
||||
[isServer, rawData, appliedFilters, config.fields]
|
||||
);
|
||||
|
||||
const paginatedData = listQuery.data || { data: [], total: undefined };
|
||||
const createMutation = useCreate();
|
||||
const updateMutation = useUpdate();
|
||||
const deleteMutation = useDelete();
|
||||
@@ -178,31 +80,18 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
|
||||
return (
|
||||
<Box>
|
||||
{isList ? (
|
||||
<Box>
|
||||
{!isServer && config.filterOptions?.fields && config.filterOptions.fields.length > 0 && (
|
||||
<FilterBar
|
||||
fields={config.fields}
|
||||
filterableFields={config.filterOptions.fields}
|
||||
mode={config.filterOptions?.mode || "server"}
|
||||
data={rawData}
|
||||
appliedValues={appliedFilters}
|
||||
onApply={setAppliedFilters}
|
||||
onClear={() => setAppliedFilters({})}
|
||||
/>
|
||||
)}
|
||||
<EnhancedTable
|
||||
config={config}
|
||||
data={filteredData}
|
||||
total={isServer ? totalCount : filteredData.length}
|
||||
paginationModel={isServer ? paginationModel : undefined}
|
||||
onPaginationModelChange={isServer ? setPaginationModel : undefined}
|
||||
loading={listQuery.isFetching}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onCreate={handleCreate}
|
||||
onNavigateToResource={(res, id) => navigate(`/admin/${res}/${id}`)}
|
||||
/>
|
||||
</Box>
|
||||
<EnhancedTable
|
||||
config={config}
|
||||
data={paginatedData.data || []}
|
||||
total={paginatedData.total}
|
||||
paginationModel={paginationModel}
|
||||
onPaginationModelChange={setPaginationModel}
|
||||
loading={listQuery.isFetching}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onCreate={handleCreate}
|
||||
onNavigateToResource={(res, id) => navigate(`/admin/${res}/${id}`)}
|
||||
/>
|
||||
) : (
|
||||
<Paper sx={{ p: 4 }}>
|
||||
<GenericForm
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { api } from "../api/client";
|
||||
import { ResourceConfig } from "../types/config";
|
||||
import { ConfigContext } from "../providers/ConfigContext";
|
||||
@@ -26,17 +26,16 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
|
||||
};
|
||||
},
|
||||
enabled: !!endpoint,
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
|
||||
// --- READ ONE ---
|
||||
const useRead = (id: string, params?: any | null) =>
|
||||
const useRead = (id: string | null) =>
|
||||
useQuery({
|
||||
queryKey: [name, "detail", id, params],
|
||||
queryKey: [name, "detail", id],
|
||||
queryFn: async () => {
|
||||
if (!id || !endpoint) return null;
|
||||
// @ts-ignore
|
||||
const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
|
||||
const res = await api.get<T>(`${endpoint}/${id}`);
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!id && !!endpoint,
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
export { default as Admin } from "./Admin";
|
||||
export { api, auth, initializeApiClients } from "./api/client";
|
||||
export { getAppConfig } from "./config";
|
||||
export type { AppConfig, ResourceConfig, ResourceField, ResourceMode } from "./types/config";
|
||||
export type { AppConfig, ResourceConfig, ResourceField } from "./types/config";
|
||||
export { AppProvider } from "./providers/AppProvider";
|
||||
export { ConfigContext, useConfig } from "./providers/ConfigContext";
|
||||
export { useResource, useResourceByName } from "./hooks/useResource";
|
||||
export { default as FilterBar } from "./components/FilterBar";
|
||||
|
||||
@@ -20,11 +20,8 @@ export interface ResourceField {
|
||||
displayField?: string | string[];
|
||||
formatter?: (value: any) => string;
|
||||
relation?: string; // Name of the target resource
|
||||
filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
|
||||
}
|
||||
|
||||
export type ResourceMode = "server" | "client";
|
||||
|
||||
export interface ResourceConfig {
|
||||
name: string;
|
||||
label: string;
|
||||
@@ -34,10 +31,6 @@ export interface ResourceConfig {
|
||||
fields: Record<string, ResourceField>;
|
||||
pagination?: boolean;
|
||||
hidden?: boolean;
|
||||
filterOptions?: {
|
||||
mode?: ResourceMode;
|
||||
fields?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
|
||||
@@ -7,15 +7,10 @@ export interface FieldOverride {
|
||||
displayField?: string | string[];
|
||||
display?: boolean;
|
||||
formatter?: (value: any) => string;
|
||||
filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
|
||||
}
|
||||
|
||||
export interface ResourceOverride {
|
||||
fields?: Record<string, FieldOverride>;
|
||||
pagination?: boolean;
|
||||
hidden?: boolean;
|
||||
filterOptions?: {
|
||||
mode?: "server" | "client";
|
||||
fields?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
@@ -154,21 +154,15 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
|
||||
|
||||
const resourceOverride = configuration[name] || {};
|
||||
|
||||
const fo = resourceOverride.filterOptions || {};
|
||||
|
||||
resources.push({
|
||||
name,
|
||||
label: schema.title || label,
|
||||
pluralLabel: pluralLabel,
|
||||
endpoint: listPath,
|
||||
primaryKey: "id",
|
||||
primaryKey: "id", // Strict default, no heuristics
|
||||
fields,
|
||||
pagination: resourceOverride.pagination,
|
||||
hidden: resourceOverride.hidden,
|
||||
filterOptions: {
|
||||
mode: fo.mode || "server",
|
||||
fields: fo.fields,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
48
src/AppTheme.tsx
Normal file
48
src/AppTheme.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import * as React from "react";
|
||||
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
||||
import { getDesignTokens } from "./shared-theme/themePrimitives";
|
||||
import { inputsCustomizations } from "./shared-theme/customizations/inputs";
|
||||
import { dataDisplayCustomizations } from "./shared-theme/customizations/dataDisplay";
|
||||
import { feedbackCustomizations } from "./shared-theme/customizations/feedback";
|
||||
import { navigationCustomizations } from "./shared-theme/customizations/navigation";
|
||||
import { surfacesCustomizations } from "./shared-theme/customizations/surfaces";
|
||||
|
||||
export const ColorModeContext = React.createContext({
|
||||
toggleColorMode: () => {},
|
||||
mode: "light" as "light" | "dark",
|
||||
});
|
||||
|
||||
export default function AppTheme({ children }: { children: React.ReactNode }) {
|
||||
const [mode, setMode] = React.useState<"light" | "dark">("light");
|
||||
|
||||
const colorMode = React.useMemo(
|
||||
() => ({
|
||||
toggleColorMode: () => {
|
||||
setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
|
||||
},
|
||||
mode,
|
||||
}),
|
||||
[mode]
|
||||
);
|
||||
|
||||
const theme = React.useMemo(
|
||||
() =>
|
||||
createTheme({
|
||||
...getDesignTokens(mode),
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
...feedbackCustomizations,
|
||||
...navigationCustomizations,
|
||||
...surfacesCustomizations,
|
||||
},
|
||||
}),
|
||||
[mode]
|
||||
);
|
||||
|
||||
return (
|
||||
<ColorModeContext.Provider value={colorMode}>
|
||||
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
||||
</ColorModeContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -3,236 +3,29 @@ import {
|
||||
Box,
|
||||
Container,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
TextField,
|
||||
Paper,
|
||||
Autocomplete,
|
||||
Button
|
||||
Alert
|
||||
} from "@mui/material";
|
||||
|
||||
import DashboardView from "./components/Dashboard";
|
||||
|
||||
import {
|
||||
DashboardState,
|
||||
DashboardStateSetters,
|
||||
DashboardFlow,
|
||||
} from "./components/Dashboard";
|
||||
|
||||
import ConfigurableDashboard from "./components/Dashboard";
|
||||
import { configuration } from "./dashboard-config";
|
||||
import {
|
||||
useReport,
|
||||
prepareReport,
|
||||
} from "./features/report";
|
||||
import { useResourceByName } from "../react-openapi";
|
||||
|
||||
function formatSnapshotDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [state, setState] = React.useState<DashboardState>({
|
||||
flow: "outflows",
|
||||
periodType: "rolling",
|
||||
selectedPeriodId: null,
|
||||
selectedGroupKey: null,
|
||||
comparison: false,
|
||||
});
|
||||
|
||||
const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
|
||||
const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
|
||||
|
||||
const [payeeInput, setPayeeInput] = React.useState<string[]>([]);
|
||||
const [tagsInput, setTagsInput] = React.useState<string[]>([]);
|
||||
|
||||
const [loadedPayees, setLoadedPayees] = React.useState<string[]>([]);
|
||||
const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
|
||||
|
||||
const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string | null>(null);
|
||||
|
||||
const { data: snapshotsData } = useResourceByName("reports").useList();
|
||||
const snapshotOptions = React.useMemo(() => {
|
||||
const options: { label: string; value: string | null }[] = [
|
||||
{ label: "Latest (auto)", value: null },
|
||||
];
|
||||
if (snapshotsData?.data) {
|
||||
for (const snap of snapshotsData.data) {
|
||||
options.push({
|
||||
label: `Snapshot from ${formatSnapshotDate(snap.created_at)}`,
|
||||
value: snap.snapshot_id,
|
||||
});
|
||||
}
|
||||
}
|
||||
return options;
|
||||
}, [snapshotsData]);
|
||||
|
||||
const selectedSnapshotOption = snapshotOptions.find((o) => o.value === selectedSnapshotId) ?? snapshotOptions[0];
|
||||
|
||||
const report = useReport({
|
||||
snapshot_id: selectedSnapshotId ?? undefined,
|
||||
periods: ["daily", "weekly", "monthly", "all"],
|
||||
flow: state.flow,
|
||||
payee: appliedPayees.length > 0 ? appliedPayees : undefined,
|
||||
tags: appliedTags.length > 0 ? appliedTags : undefined,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (report.data) {
|
||||
setLoadedPayees(prev => {
|
||||
const pSet = new Set<string>(prev);
|
||||
report.data.buckets.forEach((b: any) => {
|
||||
Object.values(b.periods).forEach((periodArray: any) => {
|
||||
periodArray?.forEach((p: any) => {
|
||||
p.metric?.transactions?.forEach((t: any) => {
|
||||
if (t.payee?.name) pSet.add(t.payee.name);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
return Array.from(pSet).sort();
|
||||
});
|
||||
|
||||
setLoadedTags(prev => {
|
||||
const tSet = new Set<string>(prev);
|
||||
report.data.buckets.forEach((b: any) => {
|
||||
Object.values(b.periods).forEach((periodArray: any) => {
|
||||
periodArray?.forEach((p: any) => {
|
||||
p.metric?.transactions?.forEach((t: any) => {
|
||||
t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
return Array.from(tSet).sort();
|
||||
});
|
||||
}
|
||||
}, [report.data]);
|
||||
|
||||
const toggleFlow =
|
||||
React.useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
flow:
|
||||
prev.flow ===
|
||||
"outflows"
|
||||
? "inflows"
|
||||
: "outflows",
|
||||
|
||||
selectedGroupKey:
|
||||
null,
|
||||
|
||||
selectedPeriodId:
|
||||
null,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setFlow =
|
||||
React.useCallback(
|
||||
(
|
||||
flow: DashboardFlow
|
||||
) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
flow,
|
||||
|
||||
selectedGroupKey:
|
||||
null,
|
||||
|
||||
selectedPeriodId:
|
||||
null,
|
||||
}));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const togglePeriodType =
|
||||
React.useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
periodType:
|
||||
prev.periodType ===
|
||||
"rolling"
|
||||
? "calendar"
|
||||
: "rolling",
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const toggleComparison =
|
||||
React.useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
comparison:
|
||||
!prev.comparison,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setSelectedPeriodId =
|
||||
React.useCallback(
|
||||
(
|
||||
selectedPeriodId: DashboardState["selectedPeriodId"]
|
||||
) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
selectedPeriodId,
|
||||
}));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const setSelectedGroupKey =
|
||||
React.useCallback(
|
||||
(
|
||||
selectedGroupKey: DashboardState["selectedGroupKey"]
|
||||
) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
|
||||
selectedGroupKey,
|
||||
}));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const stateSetters: DashboardStateSetters =
|
||||
React.useMemo(
|
||||
() => ({
|
||||
toggleFlow,
|
||||
|
||||
setFlow,
|
||||
|
||||
togglePeriodType,
|
||||
|
||||
toggleComparison,
|
||||
|
||||
setSelectedPeriodId,
|
||||
|
||||
setSelectedGroupKey,
|
||||
}),
|
||||
[
|
||||
toggleFlow,
|
||||
setFlow,
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
setSelectedPeriodId,
|
||||
setSelectedGroupKey,
|
||||
]
|
||||
);
|
||||
periods: ["weekly", "monthly", "full"],
|
||||
rolling: true,
|
||||
include_transactions: true,
|
||||
group_by: ["tags"],
|
||||
})
|
||||
|
||||
const isLoading = report.isLoading;
|
||||
const error = report.error;
|
||||
|
||||
if (isLoading && !report.data) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
|
||||
<CircularProgress />
|
||||
@@ -248,92 +41,15 @@ export default function Dashboard() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!report.data) {
|
||||
if (!report) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = prepareReport(report.data);
|
||||
const data = prepareReport(report.data?.data);
|
||||
return (
|
||||
<Box>
|
||||
<Container>
|
||||
<Paper
|
||||
sx={{
|
||||
mt: 4,
|
||||
p: 2,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
gap: 2,
|
||||
alignItems: { xs: "stretch", sm: "flex-end" },
|
||||
borderRadius: 4,
|
||||
mb: -2 // pull up to be closer to the dashboard container below
|
||||
}}
|
||||
elevation={0}
|
||||
variant="outlined"
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
|
||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
||||
Filter by Payee
|
||||
</Box>
|
||||
<Autocomplete
|
||||
multiple
|
||||
freeSolo
|
||||
options={loadedPayees}
|
||||
value={payeeInput}
|
||||
onChange={(_, val) => setPayeeInput(val as string[])}
|
||||
renderInput={(params) => <TextField {...params} placeholder="Add payees..." />}
|
||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
|
||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
||||
Filter by Tags
|
||||
</Box>
|
||||
<Autocomplete
|
||||
multiple
|
||||
freeSolo
|
||||
options={loadedTags}
|
||||
value={tagsInput}
|
||||
onChange={(_, val) => setTagsInput(val as string[])}
|
||||
renderInput={(params) => <TextField {...params} placeholder="Add tags..." />}
|
||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', minWidth: { sm: 220 } }}>
|
||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
||||
Snapshot
|
||||
</Box>
|
||||
<Autocomplete
|
||||
options={snapshotOptions}
|
||||
value={selectedSnapshotOption}
|
||||
onChange={(_, option) => setSelectedSnapshotId(option?.value ?? null)}
|
||||
getOptionLabel={(o) => o.label}
|
||||
isOptionEqualToValue={(o, v) => o.value === v.value}
|
||||
renderInput={(params) => <TextField {...params} placeholder="Select snapshot..." />}
|
||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setAppliedPayees(payeeInput);
|
||||
setAppliedTags(tagsInput);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
sx={{ height: 40, borderRadius: 2 }}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Paper>
|
||||
</Container>
|
||||
<DashboardView
|
||||
config={configuration}
|
||||
data={data}
|
||||
state={state}
|
||||
stateSetters={stateSetters}
|
||||
isFetching={report.isFetching}
|
||||
/>
|
||||
</Box>
|
||||
<ConfigurableDashboard
|
||||
config={configuration}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,336 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Paper,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
ToggleButtonGroup,
|
||||
ToggleButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Chip,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Snackbar,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
} from "@mui/material";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
import {
|
||||
useFetchRequestsList,
|
||||
useCreateFetchRequest,
|
||||
useDeleteFetchRequest,
|
||||
useUploadFile,
|
||||
} from "./features/fetch-requests";
|
||||
import type {
|
||||
FetchRequest,
|
||||
FetchRequestStatus,
|
||||
FileSource,
|
||||
EmailSource,
|
||||
} from "./features/fetch-requests";
|
||||
|
||||
const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
|
||||
pending: "default",
|
||||
processing: "info",
|
||||
raw_expenses_done: "primary",
|
||||
enriched_done: "warning",
|
||||
completed: "success",
|
||||
failed: "error",
|
||||
};
|
||||
|
||||
function formatDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString();
|
||||
}
|
||||
|
||||
export default function FetchRequests() {
|
||||
const [sourceType, setSourceType] = React.useState<"file" | "email">("file");
|
||||
const [accountName, setAccountName] = React.useState("");
|
||||
const [payorUsername, setPayorUsername] = React.useState("aetos");
|
||||
const [format, setFormat] = React.useState("");
|
||||
const [file, setFile] = React.useState<File | null>(null);
|
||||
const [uploadedPath, setUploadedPath] = React.useState<string | null>(null);
|
||||
const [fromEmail, setFromEmail] = React.useState("");
|
||||
const [subject, setSubject] = React.useState("");
|
||||
const [rawTerms, setRawTerms] = React.useState("");
|
||||
const [startDate, setStartDate] = React.useState("");
|
||||
const [endDate, setEndDate] = React.useState("");
|
||||
const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<FetchRequest | null>(null);
|
||||
|
||||
const { data: listData, isLoading, isFetching, refetch } = useFetchRequestsList();
|
||||
const createMutation = useCreateFetchRequest();
|
||||
const deleteMutation = useDeleteFetchRequest();
|
||||
const uploadMutation = useUploadFile();
|
||||
|
||||
const requests = listData?.data ?? [];
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) return;
|
||||
const result = await uploadMutation.mutateAsync(file);
|
||||
if (result?.saved_as) {
|
||||
setUploadedPath(result.saved_as);
|
||||
if (!format) setFormat(file.name.split(".").pop() || "");
|
||||
setSnackbar({ message: `File uploaded: ${result.saved_as}`, severity: "success" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!accountName) return;
|
||||
|
||||
let source: FileSource | EmailSource;
|
||||
|
||||
if (sourceType === "file") {
|
||||
if (!uploadedPath || !format) return;
|
||||
source = { path: uploadedPath, format } as FileSource;
|
||||
} else {
|
||||
if (!format) return;
|
||||
const emailSource: EmailSource = { format };
|
||||
if (fromEmail) emailSource.from_email = fromEmail;
|
||||
if (subject) emailSource.subject = subject;
|
||||
if (rawTerms.trim()) emailSource.raw_terms = rawTerms.split(",").map((s) => s.trim()).filter(Boolean);
|
||||
source = emailSource;
|
||||
}
|
||||
|
||||
try {
|
||||
await createMutation.mutateAsync({
|
||||
source,
|
||||
account_name: accountName,
|
||||
payor_username: payorUsername,
|
||||
...(startDate ? { start_date: new Date(startDate).toISOString() } : {}),
|
||||
...(endDate ? { end_date: new Date(endDate).toISOString() } : {}),
|
||||
});
|
||||
setSnackbar({ message: "Fetch request created", severity: "success" });
|
||||
resetForm();
|
||||
} catch (err: any) {
|
||||
setSnackbar({ message: err?.response?.data?.detail || "Failed to create fetch request", severity: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setAccountName("");
|
||||
setFormat("");
|
||||
setFile(null);
|
||||
setUploadedPath(null);
|
||||
setFromEmail("");
|
||||
setSubject("");
|
||||
setRawTerms("");
|
||||
setStartDate("");
|
||||
setEndDate("");
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(deleteTarget.id);
|
||||
setSnackbar({ message: "Fetch request deleted", severity: "success" });
|
||||
} catch {
|
||||
setSnackbar({ message: "Failed to delete", severity: "error" });
|
||||
}
|
||||
setDeleteTarget(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container sx={{ mt: 4, mb: 4 }}>
|
||||
<Typography variant="h5" fontWeight="bold" gutterBottom>
|
||||
Fetch Request Pipeline
|
||||
</Typography>
|
||||
|
||||
<Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
New Fetch Request
|
||||
</Typography>
|
||||
|
||||
<ToggleButtonGroup
|
||||
value={sourceType}
|
||||
exclusive
|
||||
onChange={(_, val) => val && setSourceType(val)}
|
||||
sx={{ mb: 3 }}
|
||||
size="small"
|
||||
>
|
||||
<ToggleButton value="file">File Upload</ToggleButton>
|
||||
<ToggleButton value="email">Email Fetch</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
{sourceType === "file" ? (
|
||||
<>
|
||||
<Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
|
||||
<Button variant="outlined" component="label" startIcon={<CloudUploadIcon />}>
|
||||
Choose File
|
||||
<input type="file" hidden onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
|
||||
</Button>
|
||||
<Typography variant="body2" sx={{ flex: 1, color: "text.secondary" }}>
|
||||
{file ? file.name : "No file selected"}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleUpload}
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
>
|
||||
{uploadMutation.isPending ? "Uploading..." : "Upload"}
|
||||
</Button>
|
||||
</Box>
|
||||
{uploadedPath && (
|
||||
<Alert severity="success" sx={{ py: 0 }}>
|
||||
Uploaded as: {uploadedPath}
|
||||
</Alert>
|
||||
)}
|
||||
<TextField label="Format (csv, pdf, ...)" value={format} onChange={(e) => setFormat(e.target.value)} size="small" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TextField label="Format" value={format} onChange={(e) => setFormat(e.target.value)} size="small" helperText="e.g. email, pdf, csv" />
|
||||
<TextField label="From Email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} size="small" />
|
||||
<TextField label="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} size="small" />
|
||||
<TextField label="Raw Terms" value={rawTerms} onChange={(e) => setRawTerms(e.target.value)} size="small" helperText="Comma-separated search terms" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<TextField label="Account Name" value={accountName} onChange={(e) => setAccountName(e.target.value)} size="small" required />
|
||||
<TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
<TextField
|
||||
label="Start Date"
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="End Date"
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCreate}
|
||||
disabled={createMutation.isPending || !accountName || (sourceType === "file" && (!uploadedPath || !format)) || (sourceType === "email" && !format)}
|
||||
>
|
||||
{createMutation.isPending ? "Creating..." : "Create Fetch Request"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ borderRadius: 4 }} variant="outlined">
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
Fetch Requests
|
||||
</Typography>
|
||||
<IconButton onClick={() => refetch()} disabled={isFetching}>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : requests.length === 0 ? (
|
||||
<Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
|
||||
No fetch requests yet
|
||||
</Box>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Fingerprint</TableCell>
|
||||
<TableCell>Source</TableCell>
|
||||
<TableCell>Account</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{requests.map((req: FetchRequest) => (
|
||||
<TableRow key={req.id}>
|
||||
<TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||||
{req.fingerprint}
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(req.fingerprint);
|
||||
setSnackbar({ message: "Copied!", severity: "success" });
|
||||
}}
|
||||
sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
|
||||
>
|
||||
<ContentCopyIcon sx={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{"path" in req.source ? "File" : "Email"}
|
||||
</TableCell>
|
||||
<TableCell>{req.account_name}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={req.status.replace(/_/g, " ")}
|
||||
color={statusColors[req.status]}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(req.created_at)}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={() => setDeleteTarget(req)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
<Snackbar
|
||||
open={!!snackbar}
|
||||
autoHideDuration={4000}
|
||||
onClose={() => setSnackbar(null)}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
||||
>
|
||||
{snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
|
||||
</Snackbar>
|
||||
|
||||
<Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
|
||||
<DialogTitle>Delete Fetch Request?</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
This will permanently delete the fetch request and all associated data.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
|
||||
<Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
|
||||
{deleteMutation.isPending ? "Deleting..." : "Delete"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -20,7 +20,7 @@ import DarkModeIcon from "@mui/icons-material/DarkMode";
|
||||
import LightModeIcon from "@mui/icons-material/LightMode";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../react-auth";
|
||||
import { ColorModeContext } from "./shared-theme/AppTheme";
|
||||
import { ColorModeContext } from "./AppTheme";
|
||||
|
||||
interface HeaderProps {
|
||||
routerMapping: {
|
||||
@@ -91,32 +91,6 @@ export default function Header({
|
||||
|
||||
<span style={{ flexGrow: 1 }} />
|
||||
|
||||
{/* NAV LINKS */}
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "none", md: "flex" },
|
||||
alignItems: "center",
|
||||
mr: 2,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ label: "Dashboard", path: "/dashboard" },
|
||||
{ label: "Fetch", path: "/fetch-requests" },
|
||||
{ label: "Reports", path: "/reports" },
|
||||
].map(({ label, path }) => (
|
||||
<Button
|
||||
key={path}
|
||||
color="inherit"
|
||||
onClick={() => navigate(path)}
|
||||
sx={{ textTransform: "none", fontWeight: 500, px: 1.5 }}
|
||||
size="small"
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* AUTH SECTION */}
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
|
||||
227
src/Home.tsx
227
src/Home.tsx
@@ -1,180 +1,70 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography, Button, Container, Grid, Paper, Chip } from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { Box, Typography, Button, Container, Stack } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import DashboardIcon from "@mui/icons-material/Dashboard";
|
||||
import SyncIcon from "@mui/icons-material/Sync";
|
||||
import BarChartIcon from "@mui/icons-material/BarChart";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
||||
import { useAuth } from "../react-auth";
|
||||
|
||||
interface FeatureCardProps {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
path: string;
|
||||
label?: string;
|
||||
accent: string;
|
||||
}
|
||||
|
||||
function FeatureCard({ icon, title, description, path, label, accent }: FeatureCardProps) {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
onClick={() => navigate(path)}
|
||||
sx={{
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
transition: "all 0.25s ease",
|
||||
"&::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 3,
|
||||
background: accent,
|
||||
opacity: 0,
|
||||
transition: "opacity 0.25s ease",
|
||||
},
|
||||
"&:hover": {
|
||||
transform: "translateY(-4px)",
|
||||
boxShadow: `0 12px 32px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.3 : 0.08)}`,
|
||||
borderColor: "transparent",
|
||||
"&::before": { opacity: 1 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 2,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: alpha(accent, 0.12),
|
||||
color: accent,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
<Typography variant="subtitle1" fontWeight={700}>
|
||||
{title}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ flex: 1, lineHeight: 1.6 }}>
|
||||
{description}
|
||||
</Typography>
|
||||
|
||||
{label && (
|
||||
<Chip
|
||||
label={label}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
sx={{ mt: 2, alignSelf: "flex-start", textTransform: "capitalize" }}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const { currentUser } = useAuth();
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <DashboardIcon />,
|
||||
title: "Dashboard",
|
||||
description: "Visualise inflows and outflows with interactive charts, drill into categories, and track trends over daily, weekly, and monthly periods.",
|
||||
path: "/dashboard",
|
||||
accent: theme.palette.mode === "dark" ? "#818cf8" : "#6366f1",
|
||||
},
|
||||
{
|
||||
icon: <SyncIcon />,
|
||||
title: "Fetch Requests",
|
||||
description: "Upload bank statements or configure email ingestion to auto-import transactions. Track pipeline status from pending through to completion.",
|
||||
path: "/fetch-requests",
|
||||
accent: theme.palette.mode === "dark" ? "#34d399" : "#10b981",
|
||||
},
|
||||
{
|
||||
icon: <BarChartIcon />,
|
||||
title: "Report Snapshots",
|
||||
description: "Generate cached report snapshots with custom filters — accounts, date ranges, amount bounds — then pin a snapshot on the dashboard for consistent comparisons.",
|
||||
path: "/reports",
|
||||
accent: theme.palette.mode === "dark" ? "#fbbf24" : "#f59e0b",
|
||||
},
|
||||
{
|
||||
icon: <SettingsIcon />,
|
||||
title: "Admin",
|
||||
description: "Full CRUD over accounts, expenses, tags, and payors. Manage your data programmatically through the OpenAPI-driven admin panel.",
|
||||
path: "/admin",
|
||||
accent: theme.palette.mode === "dark" ? "#e879f9" : "#d946ef",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: "calc(100vh - 64px)",
|
||||
width: "100%",
|
||||
minHeight: "calc(100vh - 64px)", // accounting for header
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
"&::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "-15%",
|
||||
left: "-8%",
|
||||
width: "45%",
|
||||
height: "55%",
|
||||
background: "radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)",
|
||||
top: "-20%",
|
||||
left: "-10%",
|
||||
width: "50%",
|
||||
height: "60%",
|
||||
background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%)",
|
||||
zIndex: 0,
|
||||
},
|
||||
"&::after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
bottom: "-15%",
|
||||
right: "-8%",
|
||||
width: "45%",
|
||||
height: "55%",
|
||||
background: "radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 70%)",
|
||||
bottom: "-20%",
|
||||
right: "-10%",
|
||||
width: "50%",
|
||||
height: "60%",
|
||||
background: "radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(0,0,0,0) 70%)",
|
||||
zIndex: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", py: 6 }}>
|
||||
<Box
|
||||
<Container maxWidth="lg" sx={{ position: "relative", zIndex: 1 }}>
|
||||
<Stack
|
||||
spacing={4}
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
mb: 6,
|
||||
p: { xs: 4, md: 8 },
|
||||
backdropFilter: "blur(20px)",
|
||||
backgroundColor: (theme) =>
|
||||
theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(255, 255, 255, 0.6)",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
borderRadius: 4,
|
||||
boxShadow: (theme) =>
|
||||
theme.palette.mode === "dark"
|
||||
? "0 8px 32px 0 rgba(0, 0, 0, 0.37)"
|
||||
: "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
fontSize: { xs: "2.5rem", sm: "3.5rem", md: "5rem" },
|
||||
background: "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)",
|
||||
fontSize: { xs: "3rem", md: "5rem" },
|
||||
background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
letterSpacing: "-0.03em",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
@@ -182,20 +72,14 @@ export default function Home() {
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="h6"
|
||||
variant="h5"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
maxWidth: 580,
|
||||
mx: "auto",
|
||||
lineHeight: 1.7,
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: "1rem", md: "1.15rem" },
|
||||
}}
|
||||
sx={{ maxWidth: "600px", lineHeight: 1.6 }}
|
||||
>
|
||||
Your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow.
|
||||
Your intelligent, extensible financial ledger. Control accounts, manage transactions, and track your data dynamically with our OpenAPI-driven architecture.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap" }}>
|
||||
<Box mt={4}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
@@ -203,44 +87,21 @@ export default function Home() {
|
||||
onClick={() => navigate("/dashboard")}
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.4,
|
||||
py: 1.5,
|
||||
borderRadius: "50px",
|
||||
fontWeight: 700,
|
||||
background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
|
||||
transition: "transform 0.2s ease, box-shadow 0.2s",
|
||||
fontWeight: "bold",
|
||||
background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
|
||||
transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
|
||||
"&:hover": {
|
||||
transform: "translateY(-2px)",
|
||||
boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.35)}`,
|
||||
transform: "translateY(-3px)",
|
||||
boxShadow: "0 8px 20px rgba(236,72,153,0.4)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Enter Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={() => navigate("/fetch-requests")}
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.4,
|
||||
borderRadius: "50px",
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
"&:hover": { borderWidth: 2 },
|
||||
}}
|
||||
>
|
||||
Import Data
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{features.map((f) => (
|
||||
<Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<FeatureCard {...f} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,273 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Paper,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Snackbar,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Chip,
|
||||
} from "@mui/material";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import AddCircleIcon from "@mui/icons-material/AddCircle";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
import {
|
||||
useReportSnapshotsList,
|
||||
useCreateSnapshot,
|
||||
useDeleteSnapshot,
|
||||
} from "./features/report-snapshots";
|
||||
import type { ReportSnapshot } from "./features/report-snapshots";
|
||||
|
||||
function formatDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString();
|
||||
}
|
||||
|
||||
export default function ReportSnapshots() {
|
||||
const [ignoreSelf, setIgnoreSelf] = React.useState(true);
|
||||
const [startDate, setStartDate] = React.useState("");
|
||||
const [endDate, setEndDate] = React.useState("");
|
||||
const [minAmount, setMinAmount] = React.useState("");
|
||||
const [maxAmount, setMaxAmount] = React.useState("");
|
||||
const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
|
||||
const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);
|
||||
|
||||
const { data: listData, isLoading, isFetching, refetch } = useReportSnapshotsList();
|
||||
const createMutation = useCreateSnapshot();
|
||||
const deleteMutation = useDeleteSnapshot();
|
||||
|
||||
const snapshots = listData?.data ?? [];
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
const result = await createMutation.mutateAsync({
|
||||
ignore_self: ignoreSelf || null,
|
||||
start_date: startDate ? new Date(startDate).toISOString() : null,
|
||||
end_date: endDate ? new Date(endDate).toISOString() : null,
|
||||
min_amount: minAmount ? parseFloat(minAmount) : null,
|
||||
max_amount: maxAmount ? parseFloat(maxAmount) : null,
|
||||
});
|
||||
const snapshotId = (result as any)?.snapshot_id;
|
||||
if (snapshotId) {
|
||||
setCreatedSnapshotId(snapshotId);
|
||||
setSnackbar({ message: `Snapshot created: ${snapshotId}`, severity: "success" });
|
||||
} else {
|
||||
setSnackbar({ message: "Snapshot created", severity: "success" });
|
||||
}
|
||||
resetForm();
|
||||
} catch (err: any) {
|
||||
setSnackbar({ message: err?.response?.data?.detail || "Failed to create snapshot", severity: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setIgnoreSelf(false);
|
||||
setStartDate("");
|
||||
setEndDate("");
|
||||
setMinAmount("");
|
||||
setMaxAmount("");
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(deleteTarget.snapshot_id);
|
||||
setSnackbar({ message: "Snapshot deleted", severity: "success" });
|
||||
} catch {
|
||||
setSnackbar({ message: "Failed to delete snapshot", severity: "error" });
|
||||
}
|
||||
setDeleteTarget(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container sx={{ mt: 4, mb: 4 }}>
|
||||
<Typography variant="h5" fontWeight="bold" gutterBottom>
|
||||
Report Snapshots
|
||||
</Typography>
|
||||
|
||||
<Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
Generate New Snapshot
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
|
||||
label="Ignore self-transfers"
|
||||
/>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
<TextField
|
||||
label="Start Date"
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="End Date"
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
<TextField
|
||||
label="Min Amount"
|
||||
type="number"
|
||||
value={minAmount}
|
||||
onChange={(e) => setMinAmount(e.target.value)}
|
||||
size="small"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="Max Amount"
|
||||
type="number"
|
||||
value={maxAmount}
|
||||
onChange={(e) => setMaxAmount(e.target.value)}
|
||||
size="small"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<AddCircleIcon />}
|
||||
onClick={handleCreate}
|
||||
disabled={createMutation.isPending}
|
||||
>
|
||||
{createMutation.isPending ? "Generating..." : "Generate Snapshot"}
|
||||
</Button>
|
||||
|
||||
{createdSnapshotId && (
|
||||
<Alert severity="success" onClose={() => setCreatedSnapshotId(null)}>
|
||||
Snapshot created: <strong>{createdSnapshotId}</strong>. Use it in the Dashboard snapshot selector.
|
||||
</Alert>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ borderRadius: 4 }} variant="outlined">
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
Existing Snapshots
|
||||
</Typography>
|
||||
<IconButton onClick={() => refetch()} disabled={isFetching}>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : snapshots.length === 0 ? (
|
||||
<Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
|
||||
No snapshots yet
|
||||
</Box>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Snapshot ID</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
<TableCell>Query</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{snapshots.map((snap: ReportSnapshot) => (
|
||||
<TableRow key={snap.id}>
|
||||
<TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||||
{snap.snapshot_id}
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(snap.snapshot_id);
|
||||
setSnackbar({ message: "Copied!", severity: "success" });
|
||||
}}
|
||||
sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
|
||||
>
|
||||
<ContentCopyIcon sx={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(snap.created_at)}</TableCell>
|
||||
<TableCell>
|
||||
{snap.query ? (
|
||||
<Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
|
||||
{snap.query.accounts && <Chip label={`${snap.query.accounts.length} account(s)`} size="small" variant="outlined" />}
|
||||
{snap.query.ignore_self && <Chip label="ignore_self" size="small" variant="outlined" />}
|
||||
{snap.query.start_date && <Chip label="start" size="small" variant="outlined" />}
|
||||
{snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
|
||||
</Box>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">—</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={() => setDeleteTarget(snap)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
<Snackbar
|
||||
open={!!snackbar}
|
||||
autoHideDuration={4000}
|
||||
onClose={() => setSnackbar(null)}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
||||
>
|
||||
{snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
|
||||
</Snackbar>
|
||||
|
||||
<Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
|
||||
<DialogTitle>Delete Snapshot?</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
This will permanently delete the report snapshot.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
|
||||
<Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
|
||||
{deleteMutation.isPending ? "Deleting..." : "Delete"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +1,51 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
ReportData,
|
||||
GroupKey,
|
||||
ReportData
|
||||
} from "../../features/report";
|
||||
|
||||
export type DashboardFlow = "outflows" | "inflows";
|
||||
export type DashboardMode = "expense" | "income";
|
||||
export type DashboardPeriodType = "rolling" | "calendar";
|
||||
export type DashboardSelectedPeriodId = string | null;
|
||||
|
||||
export interface DashboardState {
|
||||
flow: DashboardFlow;
|
||||
mode: DashboardMode;
|
||||
periodType: DashboardPeriodType;
|
||||
selectedPeriodId: DashboardSelectedPeriodId;
|
||||
selectedGroupKey: GroupKey | null;
|
||||
comparison: boolean;
|
||||
}
|
||||
|
||||
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;
|
||||
component: React.ComponentType<any>;
|
||||
title?: string;
|
||||
summary?: string;
|
||||
component: React.ComponentType<any>;
|
||||
settings?: Record<string, any>;
|
||||
isList?: boolean;
|
||||
style?: {
|
||||
size?: number;
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ColorDefinition {
|
||||
primary: string;
|
||||
background?: string;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export interface ThemeAwarePalette {
|
||||
light: ColorDefinition;
|
||||
dark: ColorDefinition;
|
||||
}
|
||||
|
||||
export interface DashboardConfig {
|
||||
sections: DashboardSection[];
|
||||
style?: {
|
||||
palette?: Record<DashboardMode, ThemeAwarePalette>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardViewProps {
|
||||
export interface DashboardProps {
|
||||
config: DashboardConfig;
|
||||
data: ReportData;
|
||||
state: DashboardState;
|
||||
stateSetters: DashboardStateSetters;
|
||||
isFetching: boolean;
|
||||
}
|
||||
|
||||
export interface ColorScheme {
|
||||
primary: string;
|
||||
surface: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface ComponentProps extends DashboardSection {
|
||||
reportData: ReportData;
|
||||
|
||||
state: DashboardState;
|
||||
stateSetters: DashboardStateSetters;
|
||||
isFetching: boolean;
|
||||
|
||||
colorScheme: ColorScheme;
|
||||
}
|
||||
|
||||
49
src/components/Dashboard/Dashboard.tsx
Normal file
49
src/components/Dashboard/Dashboard.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import * as React from "react";
|
||||
import DashboardView from "./Dashboard.view";
|
||||
import { DashboardProps, DashboardState } from "./Dashboard.models";
|
||||
|
||||
export default function Dashboard(props: DashboardProps) {
|
||||
const [state, setState] = React.useState<DashboardState>({
|
||||
mode: "expense",
|
||||
periodType: "rolling",
|
||||
selectedPeriodId: null,
|
||||
comparison: false,
|
||||
});
|
||||
|
||||
const toggleMode = () => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
mode: prev.mode === "expense" ? "income" : "expense",
|
||||
}));
|
||||
};
|
||||
|
||||
const togglePeriodType = () => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
periodType: prev.periodType === "rolling" ? "calendar" : "rolling",
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleComparison = () => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
comparison: !prev.comparison,
|
||||
}));
|
||||
};
|
||||
|
||||
const setSelectedPeriodId = (selectedPeriodId: typeof state.selectedPeriodId) => {
|
||||
setState(prev => ({ ...prev, selectedPeriodId }));
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardView
|
||||
{...props}
|
||||
state={state}
|
||||
setState={setState}
|
||||
toggleMode={toggleMode}
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -3,80 +3,92 @@ import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Button
|
||||
ToggleButtonGroup
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { DashboardViewProps } from "./Dashboard.models";
|
||||
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,
|
||||
stateSetters,
|
||||
isFetching,
|
||||
}: DashboardViewProps) {
|
||||
setState,
|
||||
toggleMode,
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
setSelectedPeriodId,
|
||||
}: ViewProps) {
|
||||
const theme = useTheme();
|
||||
const themeMode = theme.palette.mode;
|
||||
const { mode, periodType, comparison, selectedPeriodId } = state;
|
||||
|
||||
const {
|
||||
flow,
|
||||
selectedGroupKey,
|
||||
} = state;
|
||||
// Resolve colors with fallbacks
|
||||
const colors = React.useMemo(() => {
|
||||
const palette = config.style?.palette?.[mode];
|
||||
const modeColors = palette ? palette[themeMode] : null;
|
||||
|
||||
const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows;
|
||||
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, ${alpha(colorScheme.primary, theme.palette.mode === "dark" ? 0.06 : 0.04)} 0%, transparent 100%)`,
|
||||
background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
transition: "background 0.3s ease",
|
||||
transition: 'background 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
|
||||
<ToggleButtonGroup
|
||||
value={flow}
|
||||
value={mode}
|
||||
exclusive
|
||||
onChange={stateSetters.toggleFlow}
|
||||
onChange={toggleMode}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
"& .MuiToggleButton-root": {
|
||||
px: 3,
|
||||
textTransform: "none",
|
||||
color: "text.secondary",
|
||||
color: "text.secondary"
|
||||
},
|
||||
"&.Mui-selected": {
|
||||
bgcolor: colorScheme.primary,
|
||||
bgcolor: colors.primary,
|
||||
color: "white",
|
||||
borderColor: colorScheme.primary,
|
||||
borderColor: colors.primary
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="outflows">Outflows</ToggleButton>
|
||||
<ToggleButton value="inflows">Inflows</ToggleButton>
|
||||
<ToggleButton value="expense">Expenses</ToggleButton>
|
||||
<ToggleButton value="income">Income</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
sx={{ mt: 1, textTransform: "none" }}
|
||||
onClick={() => stateSetters.setSelectedGroupKey(null)}
|
||||
>
|
||||
Clear Drill-down
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
@@ -84,17 +96,34 @@ export default function DashboardView({
|
||||
const Component = section.component;
|
||||
|
||||
return (
|
||||
<Grid key={section.id} size={12}>
|
||||
<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}
|
||||
|
||||
{...section.settings}
|
||||
header={section.title}
|
||||
summary={section.summary}
|
||||
reportData={data}
|
||||
title={section.title}
|
||||
accentColor={colors.primary}
|
||||
colorScheme={colors}
|
||||
|
||||
state={state}
|
||||
stateSetters={stateSetters}
|
||||
isFetching={isFetching}
|
||||
// State management
|
||||
mode={mode}
|
||||
|
||||
colorScheme={colorScheme}
|
||||
periodType={periodType}
|
||||
comparison={comparison}
|
||||
selectedPeriodId={selectedPeriodId}
|
||||
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default } from "./Dashboard.view";
|
||||
export { default } from "./Dashboard";
|
||||
export * from "./Dashboard.models";
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import { ReportData } from "../../features/report";
|
||||
import {
|
||||
mergeBucketPeriods,
|
||||
getAmount,
|
||||
PeriodKey,
|
||||
} from "../report.helpers";
|
||||
import { ChartDataPoint } from "./HistoryChart.models";
|
||||
|
||||
// ─── Tab → PeriodKey ─────────────────────────────────────────
|
||||
|
||||
const TAB_TO_KEY: Record<string, PeriodKey> = {
|
||||
Daily: "daily",
|
||||
Weekly: "weekly",
|
||||
Monthly: "monthly",
|
||||
"All Time": "all",
|
||||
};
|
||||
|
||||
export function tabToKey(tab: string): PeriodKey {
|
||||
return TAB_TO_KEY[tab] ?? "all";
|
||||
}
|
||||
|
||||
// ─── Comparison ──────────────────────────────────────────────
|
||||
|
||||
function attachComparison(
|
||||
points: ChartDataPoint[],
|
||||
key: PeriodKey
|
||||
): ChartDataPoint[] {
|
||||
const getCompareIndex = (i: number) => {
|
||||
if (key === "daily") return i - 7;
|
||||
if (key === "weekly") return i - 4;
|
||||
if (key === "monthly") return i - 12;
|
||||
return -1;
|
||||
};
|
||||
|
||||
return points.map((p, i) => {
|
||||
const ci = getCompareIndex(i);
|
||||
|
||||
return {
|
||||
...p,
|
||||
compare:
|
||||
ci >= 0 && points[ci]
|
||||
? {
|
||||
id: points[ci].id,
|
||||
label: points[ci].label,
|
||||
amount: points[ci].amount,
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Main adapter ────────────────────────────────────────────
|
||||
|
||||
export function buildChartData(
|
||||
reportData: ReportData,
|
||||
key: PeriodKey,
|
||||
flow: "outflows" | "inflows",
|
||||
comparison: boolean
|
||||
): ChartDataPoint[] {
|
||||
const merged = mergeBucketPeriods(reportData.buckets, key);
|
||||
|
||||
let points: ChartDataPoint[] = merged.map((p) => ({
|
||||
id: p.id,
|
||||
label: p.label,
|
||||
amount: getAmount(p),
|
||||
}));
|
||||
|
||||
if (comparison) {
|
||||
points = attachComparison(points, key);
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
@@ -1,3 +1,10 @@
|
||||
import {
|
||||
DashboardMode,
|
||||
DashboardPeriodType,
|
||||
DashboardSelectedPeriodId
|
||||
} from "../Dashboard";
|
||||
import { ReportData } from "../../features/report";
|
||||
|
||||
export interface _ChartDataPoint {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -8,3 +15,26 @@ export interface _ChartDataPoint {
|
||||
export interface ChartDataPoint extends _ChartDataPoint {
|
||||
compare?: _ChartDataPoint;
|
||||
}
|
||||
|
||||
export interface HistoryChartProps {
|
||||
header: string;
|
||||
summary?: string;
|
||||
tabs: string[];
|
||||
|
||||
reportData: ReportData;
|
||||
|
||||
colorScheme: {
|
||||
primary: string;
|
||||
light: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
mode: DashboardMode;
|
||||
periodType: DashboardPeriodType;
|
||||
selectedPeriodId: DashboardSelectedPeriodId;
|
||||
comparison: boolean;
|
||||
|
||||
togglePeriodType: () => void;
|
||||
setSelectedPeriodId: (id: string | null) => void;
|
||||
toggleComparison: () => void;
|
||||
}
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,31 +1,146 @@
|
||||
import * as React from "react";
|
||||
import { HistoryChartProps, ChartDataPoint } from "./HistoryChart.models";
|
||||
import HistoryChartView from "./HistoryChart.view";
|
||||
import { buildChartData, tabToKey } from "./HistoryChart.adapter";
|
||||
import { HistoryChartProps } from "./HistoryChart.props";
|
||||
import { ReportPeriod } from "../../features/report";
|
||||
|
||||
type DecoratedPeriod = ReportPeriod & {
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
const TAB_TO_KEY: Record<string, "weekly" | "monthly" | "yearly" | "fyly" | "full"> = {
|
||||
Weekly: "weekly",
|
||||
Monthly: "monthly",
|
||||
Yearly: "yearly",
|
||||
'Financial Year': "fyly",
|
||||
'All Time': "full"
|
||||
};
|
||||
|
||||
function getAmount(p: ReportPeriod, mode: "expense" | "income") {
|
||||
return mode === "expense" ? p.expenses.sum : p.incomes.sum;
|
||||
}
|
||||
|
||||
function mergeMetric(a: any, b: any) {
|
||||
const sum = a.sum + b.sum;
|
||||
const count = a.count + b.count;
|
||||
|
||||
return {
|
||||
...a,
|
||||
sum,
|
||||
count,
|
||||
average: count > 0 ? sum / count : 0,
|
||||
transactions: a.transactions || b.transactions
|
||||
? [
|
||||
...(a.transactions || []),
|
||||
...(b.transactions || [])
|
||||
]
|
||||
: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mergeBuckets(
|
||||
buckets: any[],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
|
||||
): DecoratedPeriod[] {
|
||||
const map = new Map<string, DecoratedPeriod>();
|
||||
|
||||
for (const bucket of buckets) {
|
||||
const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
|
||||
|
||||
for (const p of periods) {
|
||||
const existing = map.get(p.id);
|
||||
|
||||
if (!existing) {
|
||||
map.set(p.id, {
|
||||
...p,
|
||||
expenses: { ...p.expenses },
|
||||
incomes: { ...p.incomes }
|
||||
});
|
||||
} else {
|
||||
map.set(p.id, {
|
||||
...existing,
|
||||
expenses: mergeMetric(existing.expenses, p.expenses),
|
||||
incomes: mergeMetric(existing.incomes, p.incomes)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values()).sort(
|
||||
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
|
||||
);
|
||||
}
|
||||
|
||||
function attachComparison(
|
||||
points: ChartDataPoint[],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
|
||||
): ChartDataPoint[] {
|
||||
const getCompareIndex = (i: number) => {
|
||||
if (key === "weekly") return i - 4;
|
||||
if (key === "monthly") return i - 12;
|
||||
if (key === "yearly") return i - 1;
|
||||
if (key === "fyly") return i - 1;
|
||||
return -1;
|
||||
};
|
||||
|
||||
return points.map((p, i) => {
|
||||
const ci = getCompareIndex(i);
|
||||
|
||||
return {
|
||||
...p,
|
||||
compare:
|
||||
ci >= 0 && points[ci]
|
||||
? {
|
||||
id: points[ci].id,
|
||||
label: points[ci].label,
|
||||
amount: points[ci].amount
|
||||
}
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function buildChartData(
|
||||
reportData: HistoryChartProps["reportData"],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full",
|
||||
mode: "expense" | "income",
|
||||
comparison: boolean
|
||||
): ChartDataPoint[] {
|
||||
const merged = mergeBuckets(reportData.buckets, key);
|
||||
console.log("Merged periods:", merged);
|
||||
|
||||
let points: ChartDataPoint[] = merged.map((p) => ({
|
||||
id: p.id,
|
||||
label: p.label,
|
||||
amount: getAmount(p, mode)
|
||||
}));
|
||||
|
||||
if (comparison) {
|
||||
points = attachComparison(points, key);
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
export default function HistoryChart(props: HistoryChartProps) {
|
||||
const {
|
||||
settings,
|
||||
tabs,
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
|
||||
isFetching,
|
||||
mode,
|
||||
periodType,
|
||||
comparison,
|
||||
selectedPeriodId,
|
||||
setSelectedPeriodId
|
||||
} = 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);
|
||||
|
||||
const activeDataKey = tabToKey(activeTab);
|
||||
const activeDataKey = TAB_TO_KEY[activeTab];
|
||||
|
||||
const currentData = React.useMemo(() => {
|
||||
return buildChartData(reportData, activeDataKey, flow, comparison);
|
||||
}, [reportData, activeDataKey, flow, comparison]);
|
||||
return buildChartData(reportData, activeDataKey, mode, comparison);
|
||||
}, [reportData, activeDataKey, mode, comparison]);
|
||||
|
||||
const maxAmount =
|
||||
currentData.length > 0
|
||||
@@ -40,10 +155,11 @@ export default function HistoryChart(props: HistoryChartProps) {
|
||||
: 1;
|
||||
|
||||
const visibleCountMap = {
|
||||
daily: 7,
|
||||
weekly: 6,
|
||||
monthly: 4,
|
||||
all: 4,
|
||||
yearly: 4,
|
||||
fyly: 4,
|
||||
full: 4,
|
||||
};
|
||||
|
||||
const visibleCount = visibleCountMap[activeDataKey] ?? 4;
|
||||
@@ -68,7 +184,7 @@ export default function HistoryChart(props: HistoryChartProps) {
|
||||
|
||||
React.useEffect(() => {
|
||||
setSelectedPeriodId(null);
|
||||
}, [activeTab]);
|
||||
}, [activeTab, periodType]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (
|
||||
|
||||
@@ -11,34 +11,49 @@ import IconButton from "@mui/material/IconButton";
|
||||
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
||||
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
||||
import {
|
||||
HistoryChartViewProps,
|
||||
} from "./HistoryChart.props";
|
||||
ChartDataPoint,
|
||||
HistoryChartProps,
|
||||
} from "./HistoryChart.models";
|
||||
import { formatDisplay } from "./HistoryChart.utils";
|
||||
|
||||
export default function HistoryChartView({
|
||||
title,
|
||||
summary,
|
||||
settings,
|
||||
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;
|
||||
}
|
||||
|
||||
state,
|
||||
stateSetters,
|
||||
isFetching,
|
||||
export default function HistoryChartView(props: ViewProps) {
|
||||
const {
|
||||
header,
|
||||
summary,
|
||||
tabs,
|
||||
colorScheme,
|
||||
|
||||
colorScheme,
|
||||
mode,
|
||||
periodType,
|
||||
selectedPeriodId,
|
||||
comparison,
|
||||
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
currentData,
|
||||
visibleData,
|
||||
maxAmount,
|
||||
visibleCount,
|
||||
startIndex,
|
||||
setStartIndex,
|
||||
activeDataKey,
|
||||
}: HistoryChartViewProps) {
|
||||
togglePeriodType,
|
||||
setSelectedPeriodId,
|
||||
toggleComparison,
|
||||
|
||||
const { flow, periodType, selectedPeriodId, comparison } = state;
|
||||
const { togglePeriodType, setSelectedPeriodId, toggleComparison } = stateSetters;
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
currentData,
|
||||
visibleData,
|
||||
maxAmount,
|
||||
visibleCount,
|
||||
startIndex,
|
||||
setStartIndex,
|
||||
activeDataKey,
|
||||
} = props;
|
||||
|
||||
const theme = useTheme();
|
||||
const isDark = theme.palette.mode === "dark";
|
||||
@@ -76,14 +91,11 @@ export default function HistoryChartView({
|
||||
boxShadow: "none",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: isDark ? "background.paper" : colorScheme.surface,
|
||||
opacity: isFetching ? 0.6 : 1,
|
||||
transition: "opacity 0.3s ease",
|
||||
pointerEvents: isFetching ? "none" : "auto",
|
||||
bgcolor: isDark ? "background.paper" : colorScheme.light,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
{summary && (
|
||||
@@ -93,7 +105,7 @@ export default function HistoryChartView({
|
||||
)}
|
||||
|
||||
<ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} fullWidth sx={{ mb: 4 }}>
|
||||
{settings.tabs.map((tab) => (
|
||||
{tabs.map((tab) => (
|
||||
<ToggleButton key={tab} value={tab}>
|
||||
{tab}
|
||||
</ToggleButton>
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import {
|
||||
formatCurrency,
|
||||
extractFilteredTransactions,
|
||||
} from "../report.helpers";
|
||||
import { LatestItem } from "./LatestItems.models";
|
||||
|
||||
// ─── Main adapter ────────────────────────────────────────────
|
||||
|
||||
export function buildLatestItems(
|
||||
reportData: ReportData,
|
||||
selectedPeriodId: string | null | undefined,
|
||||
selectedGroupKey: GroupKey | null | undefined,
|
||||
flow: "outflows" | "inflows"
|
||||
): LatestItem[] {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
|
||||
return txns
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.occurred_at).getTime() -
|
||||
new Date(a.occurred_at).getTime()
|
||||
)
|
||||
.map((t, index) => ({
|
||||
id: index + 1,
|
||||
title: t.payee.name,
|
||||
subtitle: t.tags.map((tag) => tag.name).join(", "),
|
||||
amount: formatCurrency(t.amount),
|
||||
timeAgo: new Date(t.occurred_at).toLocaleDateString("en-IN"),
|
||||
}));
|
||||
}
|
||||
@@ -1,7 +1,18 @@
|
||||
import * as React from "react";
|
||||
|
||||
export interface LatestItem {
|
||||
id: string | number;
|
||||
icon: React.ReactNode;
|
||||
iconBgColor?: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
amount: string;
|
||||
timeAgo: string;
|
||||
}
|
||||
|
||||
export interface LatestItemsListProps {
|
||||
title?: string;
|
||||
items: LatestItem[];
|
||||
onViewAll?: () => void;
|
||||
accentColor: string;
|
||||
}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import { ComponentProps } from "../Dashboard";
|
||||
import { LatestItem } from "./LatestItems.models";
|
||||
|
||||
export interface LatestItemsProps extends ComponentProps {}
|
||||
|
||||
export interface LatestItemsViewProps extends LatestItemsProps {
|
||||
items: LatestItem[];
|
||||
canExpand: boolean;
|
||||
onExpand: () => void;
|
||||
}
|
||||
@@ -1,40 +1,210 @@
|
||||
import * as React from "react";
|
||||
import { buildLatestItems } from "./LatestItems.adapter";
|
||||
import LatestItemsView from "./LatestItems.view";
|
||||
import { LatestItemsProps } from "./LatestItems.props";
|
||||
import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton
|
||||
} from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
export default function LatestItems(props: LatestItemsProps) {
|
||||
const {
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
isFetching,
|
||||
} = props;
|
||||
import { ReportData, Transaction, ReportPeriod } from "../../features/report";
|
||||
import { formatCurrency } from "../ProgressCard/ProgressCard.utils";
|
||||
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
type Props = {
|
||||
reportData: ReportData;
|
||||
mode: "expense" | "income";
|
||||
selectedPeriodId: string | null;
|
||||
accentColor: string;
|
||||
};
|
||||
|
||||
type DecoratedPeriod = ReportPeriod & {
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
function mergePeriods(
|
||||
reportData: ReportData,
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
|
||||
): DecoratedPeriod[] {
|
||||
const map = new Map<string, DecoratedPeriod>();
|
||||
|
||||
for (const bucket of reportData.buckets) {
|
||||
const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
|
||||
|
||||
for (const p of periods) {
|
||||
const existing = map.get(p.id);
|
||||
|
||||
if (!existing) {
|
||||
map.set(p.id, {
|
||||
...p,
|
||||
expenses: {
|
||||
...p.expenses,
|
||||
transactions: [...(p.expenses.transactions || [])],
|
||||
},
|
||||
incomes: {
|
||||
...p.incomes,
|
||||
transactions: [...(p.incomes.transactions || [])],
|
||||
},
|
||||
});
|
||||
} else {
|
||||
existing.expenses.transactions?.push(...(p.expenses.transactions || []));
|
||||
existing.incomes.transactions?.push(...(p.incomes.transactions || []));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
function extractTransactions(
|
||||
reportData: ReportData,
|
||||
selectedPeriodId: string | null,
|
||||
mode: "expense" | "income",
|
||||
): Transaction[] {
|
||||
let periods: DecoratedPeriod[] = [];
|
||||
|
||||
if (selectedPeriodId) {
|
||||
const prefix = selectedPeriodId.split(":")[0];
|
||||
|
||||
const map: any = {
|
||||
W: "weekly",
|
||||
M: "monthly",
|
||||
Y: "yearly",
|
||||
FY: "fyly",
|
||||
FULL: "full"
|
||||
};
|
||||
|
||||
const key = map[prefix];
|
||||
|
||||
periods = mergePeriods(reportData, key);
|
||||
const selected = periods.find(p => p.id === selectedPeriodId);
|
||||
|
||||
if (!selected) return [];
|
||||
|
||||
return mode === "expense"
|
||||
? (selected.expenses.transactions || [])
|
||||
: (selected.incomes.transactions || []);
|
||||
}
|
||||
|
||||
periods = mergePeriods(reportData, "full");
|
||||
|
||||
if (!periods.length) return [];
|
||||
|
||||
const full = periods[0];
|
||||
|
||||
return mode === "expense"
|
||||
? (full.expenses.transactions || [])
|
||||
: (full.incomes.transactions || []);
|
||||
}
|
||||
|
||||
export default function LatestItems({
|
||||
reportData,
|
||||
mode,
|
||||
selectedPeriodId,
|
||||
accentColor
|
||||
}: Props) {
|
||||
const [visibleCount, setVisibleCount] = React.useState(5);
|
||||
|
||||
// Reset count when flow changes to start clean
|
||||
React.useEffect(() => {
|
||||
setVisibleCount(5);
|
||||
}, [flow]);
|
||||
const items = React.useMemo(() => {
|
||||
const txns = extractTransactions(reportData, selectedPeriodId, mode);
|
||||
|
||||
const allItems = React.useMemo(() => {
|
||||
return buildLatestItems(reportData, selectedPeriodId, selectedGroupKey, flow);
|
||||
}, [reportData, selectedPeriodId, selectedGroupKey, flow]);
|
||||
return txns
|
||||
.filter((t) => (mode === "expense" ? t.amount < 0 : t.amount >= 0))
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.occurred_at).getTime() -
|
||||
new Date(a.occurred_at).getTime()
|
||||
)
|
||||
.map((t, index) => ({
|
||||
id: index + 1,
|
||||
title: t.payee.name,
|
||||
subtitle: t.tags.map((tag) => tag.name).join(", "),
|
||||
amount: formatCurrency(t.amount),
|
||||
timeAgo: new Date(t.occurred_at).toLocaleDateString("en-IN"),
|
||||
}));
|
||||
}, [reportData, selectedPeriodId, mode]);
|
||||
|
||||
const isPeriodSelected = Boolean(selectedPeriodId);
|
||||
|
||||
const visibleItems = React.useMemo(() => {
|
||||
return allItems.slice(0, visibleCount);
|
||||
}, [allItems, visibleCount]);
|
||||
if (!isPeriodSelected) return items.slice(0, 5);
|
||||
return items.slice(0, visibleCount);
|
||||
}, [items, isPeriodSelected, visibleCount]);
|
||||
|
||||
const canExpand = visibleCount < allItems.length;
|
||||
const canExpand = isPeriodSelected && visibleCount < items.length;
|
||||
|
||||
return (
|
||||
<LatestItemsView
|
||||
{...props}
|
||||
items={visibleItems}
|
||||
canExpand={canExpand}
|
||||
onExpand={() => setVisibleCount((prev) => prev + 5)}
|
||||
/>
|
||||
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
|
||||
<Box sx={{ mb: 2, px: 2 }}>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Recent Transactions
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<List disablePadding>
|
||||
{visibleItems.map((item, index) => (
|
||||
<ListItem
|
||||
key={item.id}
|
||||
sx={{
|
||||
px: { xs: 1, sm: 2 },
|
||||
py: 2,
|
||||
mb: index !== visibleItems.length - 1 ? 1 : 0,
|
||||
borderRadius: 3,
|
||||
"&:hover": { bgcolor: "action.hover" },
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
bgcolor: `${accentColor}22`,
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 3,
|
||||
mr: 2,
|
||||
}}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{item.subtitle}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
|
||||
<Box sx={{ textAlign: "right" }}>
|
||||
<Typography variant="subtitle1" fontWeight={700}>
|
||||
{item.amount}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{item.timeAgo}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ListItem>
|
||||
))}
|
||||
|
||||
{canExpand && (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setVisibleCount((prev) => prev + 5)}
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,93 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
} from "@mui/material";
|
||||
import { alpha } from "@mui/material/styles";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import { LatestItemsViewProps } from "./LatestItems.props";
|
||||
import LatestItemsListView from "./LatestItems.view";
|
||||
import { LatestItemsListProps } from "./LatestItems.models";
|
||||
|
||||
export default function LatestItemsView({
|
||||
items,
|
||||
title,
|
||||
canExpand,
|
||||
onExpand,
|
||||
isFetching,
|
||||
colorScheme,
|
||||
}: LatestItemsViewProps) {
|
||||
const accentColor = colorScheme?.primary || "";
|
||||
|
||||
return (
|
||||
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
|
||||
<Box sx={{ mb: 2, px: 2 }}>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
{title}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<List disablePadding>
|
||||
{items.map((item, index) => (
|
||||
<ListItem
|
||||
key={item.id}
|
||||
sx={{
|
||||
px: { xs: 1, sm: 2 },
|
||||
py: 2,
|
||||
mb: index !== items.length - 1 ? 1 : 0,
|
||||
borderRadius: 3,
|
||||
"&:hover": { bgcolor: "action.hover" },
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
bgcolor: alpha(accentColor, 0.13),
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 3,
|
||||
mr: 2,
|
||||
}}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{item.subtitle}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
|
||||
<Box sx={{ textAlign: "right" }}>
|
||||
<Typography variant="subtitle1" fontWeight={700}>
|
||||
{item.amount}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{item.timeAgo}
|
||||
</Typography>
|
||||
</Box>
|
||||
</ListItem>
|
||||
))}
|
||||
|
||||
{canExpand && (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
|
||||
<IconButton size="small" onClick={onExpand}>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</Box>
|
||||
);
|
||||
export default function LatestItemsList(props: LatestItemsListProps) {
|
||||
return <LatestItemsListView {...props} />;
|
||||
}
|
||||
|
||||
8
src/components/ProgressCard/ProgressCard.models.ts
Normal file
8
src/components/ProgressCard/ProgressCard.models.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface ProgressCardProps {
|
||||
header: string;
|
||||
summary?: string;
|
||||
progressAmount: number;
|
||||
totalAmount: number;
|
||||
colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
|
||||
compact?: boolean;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
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;
|
||||
}
|
||||
23
src/components/ProgressCard/ProgressCard.tsx
Normal file
23
src/components/ProgressCard/ProgressCard.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import * as React from "react";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { ProgressCardProps } from "./ProgressCard.models";
|
||||
import { getPercentage, formatCurrency } from "./ProgressCard.utils";
|
||||
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
15
src/components/ProgressCard/ProgressCard.utils.ts
Normal file
15
src/components/ProgressCard/ProgressCard.utils.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export const getPercentage = (progressAmount: number, totalAmount: number) => {
|
||||
if (!totalAmount) return 0;
|
||||
return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
|
||||
};
|
||||
|
||||
export const formatCurrency = (val: number) => {
|
||||
const absVal = Math.abs(val);
|
||||
if (absVal >= 100000) {
|
||||
return `₹ ${(val / 100000).toFixed(2)}L`;
|
||||
}
|
||||
if (absVal >= 1000) {
|
||||
return `₹ ${(val / 1000).toFixed(2)}k`;
|
||||
}
|
||||
return `₹ ${val.toFixed(2)}`;
|
||||
};
|
||||
@@ -8,79 +8,77 @@ import {
|
||||
linearProgressClasses
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { getPercentage, formatCurrency } from "../report.helpers";
|
||||
import { ProgressCardViewProps } from "./ProgressCard.props";
|
||||
import { ProgressCardProps } from "./ProgressCard.models";
|
||||
|
||||
interface ViewProps extends ProgressCardProps {
|
||||
percentage: number;
|
||||
formattedProgress: string;
|
||||
formattedTotal: string;
|
||||
}
|
||||
|
||||
export default function ProgressCardView({
|
||||
title,
|
||||
settings,
|
||||
|
||||
isFetching,
|
||||
|
||||
colorScheme,
|
||||
|
||||
progressAmount,
|
||||
totalAmount,
|
||||
selected,
|
||||
onClick,
|
||||
}: ProgressCardViewProps) {
|
||||
header,
|
||||
colorTheme = "info",
|
||||
percentage,
|
||||
formattedProgress,
|
||||
formattedTotal,
|
||||
compact = false,
|
||||
}: ViewProps) {
|
||||
const theme = useTheme();
|
||||
|
||||
const percentage = getPercentage(progressAmount, totalAmount);
|
||||
const formattedProgress = formatCurrency(progressAmount);
|
||||
const formattedTotal = formatCurrency(totalAmount);
|
||||
const isDark = theme.palette.mode === "dark";
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={settings.compact ? 2 : 4}
|
||||
onClick={onClick}
|
||||
elevation={compact ? 2 : 4}
|
||||
sx={{
|
||||
width: "100%",
|
||||
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",
|
||||
bgcolor: colorScheme.surface,
|
||||
color: colorScheme.text,
|
||||
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: settings.compact ? "flex-start" : "center",
|
||||
alignItems: compact ? "flex-start" : "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
border: selected
|
||||
? `2px solid ${colorScheme.primary}`
|
||||
: "1px solid",
|
||||
borderColor: selected ? colorScheme.primary : "divider",
|
||||
boxShadow: "none",
|
||||
opacity: isFetching ? 0.6 : 1,
|
||||
pointerEvents: isFetching ? "none" : "auto",
|
||||
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={settings.compact ? "body2" : "subtitle1"}
|
||||
variant={compact ? "body2" : "subtitle1"}
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
opacity: 0.95,
|
||||
mb: settings.compact ? 1.5 : 2,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
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'
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mb: settings.compact ? 2 : 3, width: "100%" }}>
|
||||
<Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
|
||||
<Typography
|
||||
variant={settings.compact ? "h5" : "h3"}
|
||||
variant={compact ? "h5" : "h3"}
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
mb: 0.5,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
|
||||
>
|
||||
{formattedProgress}
|
||||
</Typography>
|
||||
@@ -88,38 +86,38 @@ export default function ProgressCardView({
|
||||
<Divider
|
||||
sx={{
|
||||
my: 1,
|
||||
borderColor: "divider",
|
||||
borderColor: "rgba(255,255,255,0.25)",
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography
|
||||
variant={settings.compact ? "caption" : "body2"}
|
||||
variant={compact ? "caption" : "body2"}
|
||||
sx={{
|
||||
opacity: 0.85,
|
||||
fontWeight: 500,
|
||||
display: "block",
|
||||
color: alpha(colorScheme.text, 0.85),
|
||||
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: settings.compact ? 6 : 10,
|
||||
height: compact ? 6 : 10,
|
||||
borderRadius: 5,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: alpha(theme.palette.divider, 0.5),
|
||||
backgroundColor: "rgba(0, 0, 0, 0.25)",
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 5,
|
||||
backgroundColor: colorScheme.primary,
|
||||
boxShadow: `0 0 8px ${alpha(colorScheme.primary, 0.4)}`,
|
||||
backgroundColor: "#fff",
|
||||
boxShadow: '0 0 8px rgba(255,255,255,0.4)'
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import { GroupKey, ReportData } from "../../features/report";
|
||||
import {
|
||||
extractFilteredTransactions,
|
||||
aggregateTransactions,
|
||||
} from "../report.helpers";
|
||||
|
||||
export interface PayeeItem {
|
||||
name: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export function extractTopPayees(
|
||||
reportData: ReportData,
|
||||
flow: "outflows" | "inflows",
|
||||
selectedPeriodId?: string | null,
|
||||
selectedGroupKey?: GroupKey | null
|
||||
): { items: PayeeItem[]; total: number } {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
|
||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
||||
if (txn.payee && txn.payee.name) {
|
||||
return [txn.payee.name];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
return {
|
||||
items,
|
||||
total,
|
||||
};
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Box, Paper, Typography } from "@mui/material";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { extractTopPayees } from "./TopPayees.adapter";
|
||||
import { ProgressCardProps } from "./ProgressCard.props";
|
||||
|
||||
export default function TopPayees(props: ProgressCardProps) {
|
||||
const {
|
||||
title,
|
||||
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
|
||||
isFetching,
|
||||
} = props
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
const { setSelectedGroupKey } = stateSetters;
|
||||
|
||||
const { items, total } = React.useMemo(() => {
|
||||
return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
|
||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
p: { xs: 2.5, sm: 4 },
|
||||
borderRadius: 4,
|
||||
width: "100%",
|
||||
boxShadow: "none",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: "background.paper",
|
||||
opacity: isFetching ? 0.6 : 1,
|
||||
transition: "opacity 0.3s ease",
|
||||
pointerEvents: isFetching ? "none" : "auto",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(4, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
|
||||
return (
|
||||
<ProgressCardView
|
||||
{...props}
|
||||
key={item.name}
|
||||
title={item.name}
|
||||
progressAmount={item.amount}
|
||||
totalAmount={total}
|
||||
selected={isSelected}
|
||||
onClick={() => {
|
||||
if (setSelectedGroupKey) {
|
||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
||||
|
||||
if (isSelected) {
|
||||
delete newKey.payee;
|
||||
} else {
|
||||
newKey.payee = [item.name];
|
||||
}
|
||||
|
||||
setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import {
|
||||
extractFilteredTransactions,
|
||||
aggregateTransactions,
|
||||
} from "../report.helpers";
|
||||
|
||||
export interface TagItem {
|
||||
tag: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export function extractTopTags(
|
||||
reportData: ReportData,
|
||||
flow: "outflows" | "inflows",
|
||||
selectedPeriodId?: string | null,
|
||||
selectedGroupKey?: GroupKey | null
|
||||
): { items: TagItem[]; total: number } {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
|
||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
||||
if (txn.tags && txn.tags.length > 0) {
|
||||
return txn.tags.map((t) => (typeof t === "string" ? t : t.name));
|
||||
}
|
||||
return ["Untagged"];
|
||||
});
|
||||
|
||||
return {
|
||||
items: items.map((item) => ({ tag: item.name, amount: item.amount })),
|
||||
total,
|
||||
};
|
||||
}
|
||||
@@ -1,83 +1,109 @@
|
||||
import * as React from "react";
|
||||
import { Box, Paper, Typography } from "@mui/material";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { extractTopTags } from "./TopTags.adapter";
|
||||
import { ProgressCardProps } from "./ProgressCard.props";
|
||||
import { Box } from "@mui/material";
|
||||
import { ReportData, ReportPeriod } from "../../features/report";
|
||||
import ProgressCard from "./ProgressCard";
|
||||
|
||||
export default function TopTags(props: ProgressCardProps) {
|
||||
const {
|
||||
title,
|
||||
type Props = {
|
||||
reportData: ReportData;
|
||||
mode: "expense" | "income";
|
||||
selectedPeriodId?: string | null;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
type DecoratedPeriod = ReportPeriod & {
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
isFetching,
|
||||
} = props
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
const { setSelectedGroupKey } = stateSetters;
|
||||
function getAmount(p: ReportPeriod, mode: "expense" | "income") {
|
||||
return mode === "expense" ? p.expenses.sum : p.incomes.sum;
|
||||
}
|
||||
|
||||
const { items, total } = React.useMemo(() => {
|
||||
return extractTopTags(reportData, flow, selectedPeriodId, selectedGroupKey);
|
||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
||||
function findPeriod(
|
||||
periods: DecoratedPeriod[],
|
||||
selectedPeriodId?: string | null
|
||||
) {
|
||||
if (!periods.length) return null;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
p: { xs: 2.5, sm: 4 },
|
||||
borderRadius: 4,
|
||||
width: "100%",
|
||||
boxShadow: "none",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: "background.paper",
|
||||
opacity: isFetching ? 0.6 : 1,
|
||||
transition: "opacity 0.3s ease",
|
||||
pointerEvents: isFetching ? "none" : "auto",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
</Typography>
|
||||
if (selectedPeriodId) {
|
||||
const match = periods.find((p) => p.id === selectedPeriodId);
|
||||
if (match) return match;
|
||||
}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(4, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isSelected = !!selectedGroupKey?.tags?.includes(item.tag);
|
||||
return (
|
||||
<ProgressCardView
|
||||
{...props}
|
||||
key={item.tag}
|
||||
title={item.tag}
|
||||
progressAmount={item.amount}
|
||||
totalAmount={total}
|
||||
selected={isSelected}
|
||||
onClick={() => {
|
||||
if (setSelectedGroupKey) {
|
||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
||||
|
||||
if (isSelected) {
|
||||
delete newKey.tags;
|
||||
} else {
|
||||
newKey.tags = [item.tag];
|
||||
}
|
||||
|
||||
setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Paper>
|
||||
// fallback → latest
|
||||
return periods.reduce((latest, p) =>
|
||||
new Date(p.start).getTime() > new Date(latest.start).getTime()
|
||||
? p
|
||||
: latest
|
||||
);
|
||||
}
|
||||
|
||||
export default function TopTags({
|
||||
reportData,
|
||||
mode,
|
||||
selectedPeriodId,
|
||||
compact = true
|
||||
}: Props) {
|
||||
const { items, total } = React.useMemo(() => {
|
||||
const tagMap = new Map<string, number>();
|
||||
|
||||
for (const bucket of reportData.buckets) {
|
||||
const tags = bucket.group_key.tags;
|
||||
if (!tags || tags.length === 0) continue;
|
||||
|
||||
// Prefer FULL if available
|
||||
const fullPeriods = (bucket.periods.full || []) as DecoratedPeriod[];
|
||||
|
||||
const periodsToUse =
|
||||
selectedPeriodId
|
||||
? Object.values(bucket.periods).flat() as DecoratedPeriod[]
|
||||
: fullPeriods;
|
||||
|
||||
const period = findPeriod(periodsToUse, selectedPeriodId);
|
||||
if (!period) continue;
|
||||
|
||||
const amount = getAmount(period, mode);
|
||||
|
||||
for (const tag of tags) {
|
||||
tagMap.set(tag, (tagMap.get(tag) || 0) + amount);
|
||||
}
|
||||
}
|
||||
|
||||
const arr = Array.from(tagMap.entries()).map(([tag, amount]) => ({
|
||||
tag,
|
||||
amount
|
||||
}));
|
||||
|
||||
arr.sort((a, b) => b.amount - a.amount);
|
||||
|
||||
const top = arr.slice(0, 4);
|
||||
const total = top.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
return { items: top, total };
|
||||
}, [reportData, mode, selectedPeriodId]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(4, 1fr)"
|
||||
},
|
||||
gap: 2
|
||||
}}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<ProgressCard
|
||||
key={item.tag}
|
||||
header={item.tag}
|
||||
progressAmount={item.amount}
|
||||
totalAmount={total}
|
||||
compact={compact}
|
||||
colorTheme={mode === "expense" ? "error" : "success"}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default } from "./ProgressCard.view";
|
||||
export * from "./ProgressCard.props";
|
||||
export { default } from "./ProgressCard";
|
||||
export * from "./ProgressCard.models";
|
||||
|
||||
@@ -1,230 +0,0 @@
|
||||
import {
|
||||
ReportPeriod,
|
||||
ReportBucket,
|
||||
GroupKey,
|
||||
PeriodType,
|
||||
ReportData,
|
||||
Transaction,
|
||||
} from "../features/report";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────
|
||||
|
||||
export type PeriodKey = PeriodType;
|
||||
|
||||
export type DecoratedPeriod = ReportPeriod & {
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
// ─── Period helpers ───────────────────────────────────────────
|
||||
|
||||
const PREFIX_TO_KEY: Record<string, PeriodKey> = {
|
||||
D: "daily",
|
||||
W: "weekly",
|
||||
M: "monthly",
|
||||
ALL: "all",
|
||||
};
|
||||
|
||||
/**
|
||||
* Derive the period key from a decorated-period id.
|
||||
* E.g. `"W:2026-04-28_2026-05-04"` → `"weekly"`
|
||||
*/
|
||||
export function periodIdToKey(periodId: string): PeriodKey {
|
||||
const prefix = periodId.split(":")[0];
|
||||
return PREFIX_TO_KEY[prefix] ?? "all";
|
||||
}
|
||||
|
||||
// ─── Metric helpers ───────────────────────────────────────────
|
||||
|
||||
export function getAmount(period: ReportPeriod): number {
|
||||
return period.metric.sum;
|
||||
}
|
||||
|
||||
function mergeMetric(a: ReportPeriod["metric"], b: ReportPeriod["metric"]) {
|
||||
const sum = a.sum + b.sum;
|
||||
const count = a.count + b.count;
|
||||
|
||||
return {
|
||||
...a,
|
||||
sum,
|
||||
count,
|
||||
average: count > 0 ? sum / count : 0,
|
||||
transactions:
|
||||
a.transactions || b.transactions
|
||||
? [...(a.transactions || []), ...(b.transactions || [])]
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge periods with the same id across all buckets, summing
|
||||
* their metrics and concatenating transactions.
|
||||
*
|
||||
* Returns sorted by start date ascending.
|
||||
*/
|
||||
export function mergeBucketPeriods(
|
||||
buckets: ReportBucket[],
|
||||
key: PeriodKey
|
||||
): DecoratedPeriod[] {
|
||||
const map = new Map<string, DecoratedPeriod>();
|
||||
|
||||
for (const bucket of buckets) {
|
||||
const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
|
||||
|
||||
for (const p of periods) {
|
||||
const existing = map.get(p.id);
|
||||
|
||||
if (!existing) {
|
||||
map.set(p.id, {
|
||||
...p,
|
||||
metric: { ...p.metric },
|
||||
});
|
||||
} else {
|
||||
map.set(p.id, {
|
||||
...existing,
|
||||
metric: mergeMetric(existing.metric, p.metric),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values()).sort(
|
||||
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Formatting ───────────────────────────────────────────────
|
||||
|
||||
export const formatCurrency = (val: number) => {
|
||||
const absVal = Math.abs(val);
|
||||
if (absVal >= 100000) {
|
||||
return `₹ ${(val / 100000).toFixed(2)}L`;
|
||||
}
|
||||
if (absVal >= 1000) {
|
||||
return `₹ ${(val / 1000).toFixed(2)}k`;
|
||||
}
|
||||
return `₹ ${val.toFixed(2)}`;
|
||||
};
|
||||
|
||||
export const getPercentage = (progressAmount: number, totalAmount: number) => {
|
||||
if (!totalAmount) return 0;
|
||||
return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
|
||||
};
|
||||
|
||||
// ─── Group filtering ──────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check if a bucket's group_key matches the selected GroupKey.
|
||||
* Every dimension present in `selected` must exist in the bucket
|
||||
* and contain all the selected values.
|
||||
*/
|
||||
export function matchesGroupKey(
|
||||
bucket: ReportBucket,
|
||||
selected: GroupKey
|
||||
): boolean {
|
||||
for (const [dim, values] of Object.entries(selected)) {
|
||||
const bucketValues = bucket.group_key[dim];
|
||||
if (!bucketValues) return false;
|
||||
if (!(values as string[]).every((v) => bucketValues.includes(v)))
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return only buckets matching the selected group key,
|
||||
* or all buckets if no selection.
|
||||
*/
|
||||
export function filterBuckets(
|
||||
buckets: ReportBucket[],
|
||||
selectedGroupKey: GroupKey | null
|
||||
): ReportBucket[] {
|
||||
if (!selectedGroupKey) return buckets;
|
||||
return buckets.filter((b) => matchesGroupKey(b, selectedGroupKey));
|
||||
}
|
||||
|
||||
export function extractFilteredTransactions(
|
||||
reportData: ReportData,
|
||||
selectedPeriodId: string | null | undefined,
|
||||
selectedGroupKey: GroupKey | null | undefined
|
||||
): Transaction[] {
|
||||
let txns: Transaction[] = [];
|
||||
|
||||
if (selectedPeriodId) {
|
||||
const key = periodIdToKey(selectedPeriodId);
|
||||
const periods = mergeBucketPeriods(reportData.buckets, key);
|
||||
const selected = periods.find((p) => p.id === selectedPeriodId);
|
||||
txns = selected?.metric.transactions || [];
|
||||
} else {
|
||||
const periods = mergeBucketPeriods(reportData.buckets, "all");
|
||||
if (periods.length > 0) {
|
||||
const period = periods.reduce((latest, p) =>
|
||||
new Date(p.start).getTime() > new Date(latest.start).getTime()
|
||||
? p
|
||||
: latest
|
||||
, periods[0]);
|
||||
txns = period?.metric.transactions || [];
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedGroupKey) {
|
||||
txns = txns.filter((txn) => {
|
||||
let match = true;
|
||||
if (selectedGroupKey.tags && selectedGroupKey.tags.length > 0) {
|
||||
if (!txn.tags) {
|
||||
match = false;
|
||||
} else {
|
||||
const txnTags = txn.tags.map((t: any) =>
|
||||
typeof t === "string" ? t : t.name
|
||||
);
|
||||
if (
|
||||
!selectedGroupKey.tags.every((selectedTag) =>
|
||||
txnTags.includes(selectedTag)
|
||||
)
|
||||
) {
|
||||
match = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (match && selectedGroupKey.payee && selectedGroupKey.payee.length > 0) {
|
||||
if (!txn.payee || !txn.payee.name) {
|
||||
match = false;
|
||||
} else {
|
||||
if (!selectedGroupKey.payee.includes(txn.payee.name)) {
|
||||
match = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return match;
|
||||
});
|
||||
}
|
||||
|
||||
return txns;
|
||||
}
|
||||
|
||||
export function aggregateTransactions(
|
||||
transactions: Transaction[],
|
||||
keyExtractor: (txn: Transaction) => string[],
|
||||
limit = 4
|
||||
): { items: { name: string; amount: number }[]; total: number } {
|
||||
const map = new Map<string, number>();
|
||||
|
||||
for (const txn of transactions) {
|
||||
const keys = keyExtractor(txn);
|
||||
for (const key of keys) {
|
||||
map.set(key, (map.get(key) || 0) + txn.amount);
|
||||
}
|
||||
}
|
||||
|
||||
const items = Array.from(map.entries()).map(([name, amount]) => ({
|
||||
name,
|
||||
amount,
|
||||
}));
|
||||
|
||||
items.sort((a, b) => b.amount - a.amount);
|
||||
|
||||
const top = items.slice(0, limit);
|
||||
const total = top.reduce((sum, item) => sum + item.amount, 0);
|
||||
|
||||
return { items: top, total };
|
||||
}
|
||||
@@ -2,7 +2,6 @@ import HistoryChart from "./components/HistoryChart";
|
||||
import LatestItems from "./components/LatestItems";
|
||||
import { DashboardConfig } from "./components/Dashboard";
|
||||
import TopTags from "./components/ProgressCard/TopTags";
|
||||
import TopPayees from "./components/ProgressCard/TopPayees";
|
||||
|
||||
export const configuration: DashboardConfig = {
|
||||
sections: [
|
||||
@@ -13,28 +12,57 @@ export const configuration: DashboardConfig = {
|
||||
component: HistoryChart,
|
||||
settings: {
|
||||
tabs: ["Weekly", "Monthly"],
|
||||
// tabs: ["Weekly", "Monthly", "Yearly", "Financial Year", "All Time"],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "top-categories",
|
||||
title: 'Top Categories',
|
||||
component: TopTags,
|
||||
settings: {
|
||||
compact: true,
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "top-payees",
|
||||
title: 'Top Payees',
|
||||
component: TopPayees,
|
||||
component: TopTags,
|
||||
settings: {
|
||||
compact: true,
|
||||
},
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "items",
|
||||
title: 'Recent Transactions',
|
||||
component: LatestItems,
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
style: {
|
||||
palette: {
|
||||
expense: {
|
||||
light: {
|
||||
primary: "#d32f2f",
|
||||
background: "#fdecea",
|
||||
text: "#b71c1c"
|
||||
},
|
||||
dark: {
|
||||
primary: "#f44336",
|
||||
background: "rgba(244, 67, 54, 0.15)",
|
||||
text: "#ffcdd2"
|
||||
}
|
||||
},
|
||||
income: {
|
||||
light: {
|
||||
primary: "#2e7d32",
|
||||
background: "#e8f5e9",
|
||||
text: "#1b5e20"
|
||||
},
|
||||
dark: {
|
||||
primary: "#4caf50",
|
||||
background: "rgba(76, 175, 80, 0.15)",
|
||||
text: "#c8e6c9"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
export type FetchRequestStatus = "pending" | "processing" | "raw_expenses_done" | "enriched_done" | "completed" | "failed";
|
||||
|
||||
export interface FileSource {
|
||||
path: string;
|
||||
format: string;
|
||||
}
|
||||
|
||||
export interface EmailSource {
|
||||
format: string;
|
||||
from_email?: string;
|
||||
subject?: string;
|
||||
raw_terms?: string[];
|
||||
}
|
||||
|
||||
export interface FetchRequestCreate {
|
||||
source: FileSource | EmailSource;
|
||||
account_name: string;
|
||||
payor_username?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
}
|
||||
|
||||
export interface FetchRequest extends FetchRequestCreate {
|
||||
id: string;
|
||||
status: FetchRequestStatus;
|
||||
fingerprint: string;
|
||||
completed_at?: string | null;
|
||||
error_message?: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface UploadResult {
|
||||
original_filename: string;
|
||||
saved_as: string;
|
||||
content_type: string;
|
||||
url: string;
|
||||
absolute_path: string;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
export type {
|
||||
FetchRequest,
|
||||
FetchRequestCreate,
|
||||
FetchRequestStatus,
|
||||
FileSource,
|
||||
EmailSource,
|
||||
UploadResult,
|
||||
} from "./fetch-requests.models";
|
||||
export {
|
||||
useFetchRequestsList,
|
||||
useFetchRequest,
|
||||
useCreateFetchRequest,
|
||||
useDeleteFetchRequest,
|
||||
useUploadFile,
|
||||
} from "./useFetchRequests";
|
||||
@@ -1,43 +0,0 @@
|
||||
import { useResourceByName } from "../../../react-openapi";
|
||||
import { api } from "../../../react-openapi/api/client";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
|
||||
export function useFetchRequestsList(params?: {
|
||||
status?: string;
|
||||
account_name?: string;
|
||||
source_type?: string;
|
||||
}) {
|
||||
const { useList } = useResourceByName("fetch-requests");
|
||||
return useList(params);
|
||||
}
|
||||
|
||||
export function useFetchRequest(id: string) {
|
||||
const { useRead } = useResourceByName("fetch-requests");
|
||||
return useRead(id);
|
||||
}
|
||||
|
||||
export function useCreateFetchRequest() {
|
||||
const { useCreate } = useResourceByName("fetch-requests");
|
||||
return useCreate();
|
||||
}
|
||||
|
||||
export function useDeleteFetchRequest() {
|
||||
const { useDelete } = useResourceByName("fetch-requests");
|
||||
return useDelete();
|
||||
}
|
||||
|
||||
export function useUploadFile() {
|
||||
return useMutation({
|
||||
mutationFn: async (file: File) => {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const binary = new Uint8Array(arrayBuffer);
|
||||
const res = await api.post("/uploads", binary, {
|
||||
headers: {
|
||||
"Content-Type": file.type,
|
||||
"Content-Disposition": `attachment; filename="${file.name}"`,
|
||||
},
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export type {
|
||||
ReportSnapshot,
|
||||
ReportQuery,
|
||||
} from "./report-snapshots.models";
|
||||
export {
|
||||
useReportSnapshotsList,
|
||||
useCreateSnapshot,
|
||||
useDeleteSnapshot,
|
||||
} from "./useReportSnapshots";
|
||||
@@ -1,15 +0,0 @@
|
||||
export interface ReportQuery {
|
||||
accounts?: string[] | null;
|
||||
ignore_self?: boolean | null;
|
||||
start_date?: string | null;
|
||||
end_date?: string | null;
|
||||
min_amount?: number | null;
|
||||
max_amount?: number | null;
|
||||
}
|
||||
|
||||
export interface ReportSnapshot {
|
||||
id: string;
|
||||
snapshot_id: string;
|
||||
created_at: string;
|
||||
query?: ReportQuery;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { useResourceByName } from "../../../react-openapi";
|
||||
|
||||
export function useReportSnapshotsList() {
|
||||
const { useList } = useResourceByName("reports");
|
||||
return useList();
|
||||
}
|
||||
|
||||
export function useCreateSnapshot() {
|
||||
const { useCreate } = useResourceByName("reports");
|
||||
return useCreate();
|
||||
}
|
||||
|
||||
export function useDeleteSnapshot() {
|
||||
const { useDelete } = useResourceByName("reports");
|
||||
return useDelete();
|
||||
}
|
||||
@@ -4,11 +4,7 @@ export {
|
||||
export type {
|
||||
Transaction,
|
||||
ReportData,
|
||||
ReportBucket,
|
||||
ReportPeriod,
|
||||
ReportQuery,
|
||||
GroupKey,
|
||||
PeriodType,
|
||||
} from './report.models'
|
||||
export {
|
||||
prepareReport
|
||||
|
||||
@@ -1,40 +1,29 @@
|
||||
export interface Payor {
|
||||
id?: string;
|
||||
name: string;
|
||||
username: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface Payee {
|
||||
type: "merchant" | "person" | "transfer" | "other";
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Account {
|
||||
id: string;
|
||||
name: string;
|
||||
number: string;
|
||||
type: "cash" | "bank" | "credit_card" | "wallet" | "other";
|
||||
currency: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
parent_id?: string | null;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface Transaction {
|
||||
id: string;
|
||||
payor: Payor;
|
||||
payee: Payee;
|
||||
amount: number;
|
||||
account: Account;
|
||||
tags: Tag[];
|
||||
occurred_at: string;
|
||||
created_at: string;
|
||||
occurred_at: Date;
|
||||
}
|
||||
|
||||
// -----------------------------
|
||||
@@ -52,12 +41,12 @@ export interface ReportMetric {
|
||||
// Period
|
||||
// -----------------------------
|
||||
|
||||
export type PeriodType = "daily" | "weekly" | "monthly" | "all";
|
||||
|
||||
export interface ReportPeriod {
|
||||
start: string;
|
||||
end: string;
|
||||
metric: ReportMetric;
|
||||
start: Date;
|
||||
end: Date;
|
||||
|
||||
expenses: ReportMetric;
|
||||
incomes: ReportMetric;
|
||||
}
|
||||
|
||||
// -----------------------------
|
||||
@@ -65,48 +54,37 @@ export interface ReportPeriod {
|
||||
// -----------------------------
|
||||
|
||||
export type GroupKey = {
|
||||
[dimension: string]: string[];
|
||||
payee?: string[];
|
||||
tags?: string[];
|
||||
flow?: string[];
|
||||
};
|
||||
|
||||
export interface ReportBucket {
|
||||
group_key: GroupKey;
|
||||
|
||||
periods: {
|
||||
daily?: ReportPeriod[];
|
||||
weekly?: ReportPeriod[];
|
||||
monthly?: ReportPeriod[];
|
||||
all?: ReportPeriod[];
|
||||
yearly?: ReportPeriod[];
|
||||
fyly?: ReportPeriod[];
|
||||
full?: ReportPeriod[];
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------
|
||||
// Report Query
|
||||
// -----------------------------
|
||||
|
||||
export interface ReportQuery {
|
||||
accounts?: string[] | null;
|
||||
ignore_self?: boolean | null;
|
||||
start_date?: string | null;
|
||||
end_date?: string | null;
|
||||
min_amount?: number | null;
|
||||
max_amount?: number | null;
|
||||
}
|
||||
|
||||
// -----------------------------
|
||||
// Final Report
|
||||
// -----------------------------
|
||||
|
||||
export interface ReportData {
|
||||
snapshot_id?: string | null;
|
||||
periods: ("weekly" | "monthly" | "yearly" | "fyly" | "full")[];
|
||||
|
||||
flow?: "inflows" | "outflows" | null;
|
||||
rolling: boolean;
|
||||
report_date?: string;
|
||||
|
||||
periods: PeriodType[];
|
||||
group_by: ("payee" | "tags")[];
|
||||
|
||||
tags?: string[] | null;
|
||||
payee?: string[] | null;
|
||||
ignore_self: boolean;
|
||||
include_transactions: boolean;
|
||||
|
||||
buckets: ReportBucket[];
|
||||
|
||||
query: ReportQuery;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import {
|
||||
ReportData,
|
||||
ReportPeriod,
|
||||
PeriodType,
|
||||
ReportPeriod
|
||||
} from "./report.models";
|
||||
|
||||
/* ---------- ID BUILDING ---------- */
|
||||
@@ -14,7 +13,7 @@ function formatDate(d: Date): string {
|
||||
}
|
||||
|
||||
function buildPeriodId(
|
||||
type: PeriodType,
|
||||
type: "weekly" | "monthly" | "yearly" | "fyly" | "full",
|
||||
start: Date,
|
||||
end: Date
|
||||
): string {
|
||||
@@ -22,14 +21,16 @@ function buildPeriodId(
|
||||
const e = formatDate(end);
|
||||
|
||||
switch (type) {
|
||||
case "daily":
|
||||
return `D:${s}_${e}`;
|
||||
case "weekly":
|
||||
return `W:${s}_${e}`;
|
||||
case "monthly":
|
||||
return `M:${s}_${e}`;
|
||||
case "all":
|
||||
return `ALL:${s}_${e}`;
|
||||
case "yearly":
|
||||
return `Y:${s}_${e}`;
|
||||
case "fyly":
|
||||
return `FY:${s}_${e}`;
|
||||
case "full":
|
||||
return `FULL:${s}_${e}`;
|
||||
default:
|
||||
return `${s}_${e}`;
|
||||
}
|
||||
@@ -59,24 +60,40 @@ const yearFmt = new Intl.DateTimeFormat("en-GB", {
|
||||
timeZone: "UTC",
|
||||
});
|
||||
|
||||
function sameMonth(a: Date, b: Date) {
|
||||
return (
|
||||
a.getUTCFullYear() === b.getUTCFullYear() &&
|
||||
a.getUTCMonth() === b.getUTCMonth()
|
||||
);
|
||||
}
|
||||
|
||||
function buildLabel(
|
||||
type: PeriodType,
|
||||
type: "weekly" | "monthly" | "yearly" | "fyly" | "full",
|
||||
start: Date,
|
||||
end: Date
|
||||
): string {
|
||||
switch (type) {
|
||||
case "daily":
|
||||
return dayFmt.format(start);
|
||||
|
||||
case "weekly": {
|
||||
const sDay = start.getUTCDate();
|
||||
const m = monthFmt.format(start);
|
||||
return `${sDay} ${m}`;
|
||||
}
|
||||
case "weekly":
|
||||
if (sameMonth(start, end)) {
|
||||
const sDay = start.getUTCDate();
|
||||
const eDay = end.getUTCDate();
|
||||
const m = monthFmt.format(start);
|
||||
return `${sDay} ${m} - ${eDay} ${m}`;
|
||||
}
|
||||
return `${dayFmt.format(start)} - ${dayFmt.format(end)}`;
|
||||
|
||||
case "monthly":
|
||||
return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
|
||||
|
||||
case "yearly":
|
||||
return yearFmt.format(start);
|
||||
|
||||
case "fyly": {
|
||||
const startY = start.getUTCFullYear();
|
||||
const endY = end.getUTCFullYear();
|
||||
return `FY ${startY}–${String(endY).slice(-2)}`;
|
||||
}
|
||||
|
||||
default:
|
||||
return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
|
||||
}
|
||||
@@ -85,7 +102,7 @@ function buildLabel(
|
||||
/* ---------- MAIN ---------- */
|
||||
|
||||
function decoratePeriods(
|
||||
type: PeriodType,
|
||||
type: "weekly" | "monthly" | "yearly" | "fyly" | "full",
|
||||
periods: ReportPeriod[]
|
||||
): (ReportPeriod & { id: string; label: string })[] {
|
||||
return periods.map((p) => ({
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
import { useResourceByName } from "../../../react-openapi";
|
||||
|
||||
export interface ReportParams {
|
||||
snapshot_id?: string;
|
||||
periods?: ("daily" | "weekly" | "monthly" | "all")[];
|
||||
flow?: "inflows" | "outflows";
|
||||
payee?: string[];
|
||||
tags?: string[];
|
||||
periods?: ("weekly" | "monthly" | "yearly" | "fyly" | "full")[];
|
||||
rolling?: boolean;
|
||||
report_date?: string;
|
||||
group_by?: ("payee" | "tags")[];
|
||||
ignore_self?: boolean;
|
||||
include_transactions?: boolean;
|
||||
}
|
||||
|
||||
export function useReport(params: ReportParams) {
|
||||
const { useRead } = useResourceByName("reports");
|
||||
const { useList } = useResourceByName("reports");
|
||||
|
||||
return useRead(
|
||||
params.snapshot_id ? params.snapshot_id : "latest",
|
||||
{
|
||||
...params,
|
||||
periods: params.periods,
|
||||
}
|
||||
);
|
||||
return useList({
|
||||
...params,
|
||||
periods: params.periods,
|
||||
group_by: params.group_by,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -12,8 +12,6 @@ import {
|
||||
} from "@mui/material";
|
||||
import Home from './Home';
|
||||
import Dashboard from './Dashboard';
|
||||
import FetchRequests from './FetchRequests';
|
||||
import ReportSnapshots from './ReportSnapshots';
|
||||
import { Admin, AppProvider } from '../react-openapi';
|
||||
import { configuration, profileConfiguration } from './openapi-config';
|
||||
import { Buffer } from 'buffer';
|
||||
@@ -21,7 +19,7 @@ import process from 'process';
|
||||
import { AuthProvider } from "../react-auth";
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import AppTheme from './shared-theme/AppTheme';
|
||||
import AppTheme from './AppTheme';
|
||||
|
||||
window.Buffer = Buffer;
|
||||
window.process = process;
|
||||
@@ -35,8 +33,6 @@ const routerMapping = [
|
||||
{ path: "/", component: Home, headerTitle: "Home" },
|
||||
{ path: "/home", component: Home, headerTitle: "Home" },
|
||||
{ path: "/dashboard", component: Dashboard, headerTitle: "Dashboard" },
|
||||
{ path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
|
||||
{ path: "/reports", component: ReportSnapshots, headerTitle: "Reports" },
|
||||
{ path: "/admin/*", component: Admin, headerTitle: "Admin" },
|
||||
];
|
||||
|
||||
|
||||
@@ -2,14 +2,9 @@ import { ResourceOverride } from "../react-openapi/types/overrides";
|
||||
|
||||
export const configuration: Record<string, ResourceOverride> = {
|
||||
expenses: {
|
||||
filterOptions: {
|
||||
mode: "client",
|
||||
fields: ["account", "payee", "tags", "occurred_at", "amount"],
|
||||
},
|
||||
fields: {
|
||||
payee: {
|
||||
displayField: "name",
|
||||
filterType: "autocomplete",
|
||||
},
|
||||
payor: {
|
||||
display: false,
|
||||
@@ -17,14 +12,11 @@ export const configuration: Record<string, ResourceOverride> = {
|
||||
},
|
||||
account: {
|
||||
displayField: "name",
|
||||
filterType: "multiselect",
|
||||
},
|
||||
tags: {
|
||||
displayField: ["name", "icon"],
|
||||
filterType: "autocomplete",
|
||||
},
|
||||
occurred_at: {
|
||||
filterType: "date-range",
|
||||
formatter: (val: string) => {
|
||||
const date = new Date(val);
|
||||
const day = date.getDate();
|
||||
@@ -42,14 +34,15 @@ export const configuration: Record<string, ResourceOverride> = {
|
||||
return `${day}${suffix(day)} ${month} ${year}`;
|
||||
}
|
||||
},
|
||||
amount: {
|
||||
filterType: "number-range",
|
||||
},
|
||||
created_at: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
pagination: true,
|
||||
},
|
||||
reports: {
|
||||
hidden: true
|
||||
}
|
||||
};
|
||||
|
||||
export const profileConfiguration = {
|
||||
|
||||
@@ -1,103 +1,53 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
ThemeProvider,
|
||||
createTheme,
|
||||
CssBaseline,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import * as React from 'react';
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import type { ThemeOptions } from '@mui/material/styles';
|
||||
import { inputsCustomizations } from './customizations/inputs';
|
||||
import { dataDisplayCustomizations } from './customizations/dataDisplay';
|
||||
import { feedbackCustomizations } from './customizations/feedback';
|
||||
import { navigationCustomizations } from './customizations/navigation';
|
||||
import { surfacesCustomizations } from './customizations/surfaces';
|
||||
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
|
||||
|
||||
import { getDesignTokens } from "./themePrimitives";
|
||||
import { getSemanticColors } from "./themeConfig";
|
||||
|
||||
import { inputsCustomizations } from "./customizations/inputs";
|
||||
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
|
||||
import { feedbackCustomizations } from "./customizations/feedback";
|
||||
import { navigationCustomizations } from "./customizations/navigation";
|
||||
import { surfacesCustomizations } from "./customizations/surfaces";
|
||||
|
||||
export type ColorMode = "light" | "dark";
|
||||
|
||||
type ColorModeContextValue = {
|
||||
mode: ColorMode;
|
||||
setMode: (mode: ColorMode) => void;
|
||||
toggleColorMode: () => void;
|
||||
};
|
||||
|
||||
export const ColorModeContext =
|
||||
React.createContext<ColorModeContextValue>({
|
||||
mode: "light",
|
||||
setMode: () => {},
|
||||
toggleColorMode: () => {},
|
||||
});
|
||||
|
||||
type AppThemeProps = {
|
||||
interface AppThemeProps {
|
||||
children: React.ReactNode;
|
||||
defaultMode?: ColorMode;
|
||||
};
|
||||
|
||||
export default function AppTheme({
|
||||
children,
|
||||
defaultMode = "light",
|
||||
}: AppThemeProps) {
|
||||
const [mode, setMode] =
|
||||
React.useState<ColorMode>(defaultMode);
|
||||
|
||||
const toggleColorMode = React.useCallback(() => {
|
||||
setMode((prev) =>
|
||||
prev === "light" ? "dark" : "light"
|
||||
);
|
||||
}, []);
|
||||
|
||||
const contextValue = React.useMemo(
|
||||
() => ({
|
||||
mode,
|
||||
setMode,
|
||||
toggleColorMode,
|
||||
}),
|
||||
[mode, toggleColorMode]
|
||||
);
|
||||
|
||||
const semantic = React.useMemo(
|
||||
() => getSemanticColors(mode),
|
||||
[mode]
|
||||
);
|
||||
|
||||
const theme = React.useMemo(
|
||||
() =>
|
||||
createTheme({
|
||||
...getDesignTokens(mode),
|
||||
semantic,
|
||||
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
...feedbackCustomizations,
|
||||
...navigationCustomizations,
|
||||
...surfacesCustomizations,
|
||||
},
|
||||
}),
|
||||
[mode, semantic]
|
||||
);
|
||||
/**
|
||||
* This is for the docs site. You can ignore it or remove it.
|
||||
*/
|
||||
disableCustomTheme?: boolean;
|
||||
themeComponents?: ThemeOptions['components'];
|
||||
}
|
||||
|
||||
export default function AppTheme(props: AppThemeProps) {
|
||||
const { children, disableCustomTheme, themeComponents } = props;
|
||||
const theme = React.useMemo(() => {
|
||||
return disableCustomTheme
|
||||
? {}
|
||||
: createTheme({
|
||||
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
|
||||
cssVariables: {
|
||||
colorSchemeSelector: 'data-mui-color-scheme',
|
||||
cssVarPrefix: 'template',
|
||||
},
|
||||
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
|
||||
typography,
|
||||
shadows,
|
||||
shape,
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
...feedbackCustomizations,
|
||||
...navigationCustomizations,
|
||||
...surfacesCustomizations,
|
||||
...themeComponents,
|
||||
},
|
||||
});
|
||||
}, [disableCustomTheme, themeComponents]);
|
||||
if (disableCustomTheme) {
|
||||
return <React.Fragment>{children}</React.Fragment>;
|
||||
}
|
||||
return (
|
||||
<ColorModeContext.Provider value={contextValue}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Box
|
||||
sx={{
|
||||
"--bg-page": semantic.surface.page,
|
||||
"--bg-card": semantic.surface.card,
|
||||
"--bg-elevated": semantic.surface.elevated,
|
||||
"--border-default": semantic.border.default,
|
||||
"--border-subtle": semantic.border.subtle,
|
||||
"--text-primary": semantic.text.primary,
|
||||
"--text-secondary": semantic.text.secondary,
|
||||
"--text-muted": semantic.text.muted,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
</ColorModeContext.Provider>
|
||||
<ThemeProvider theme={theme} disableTransitionOnChange>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
89
src/shared-theme/ColorModeIconDropdown.tsx
Normal file
89
src/shared-theme/ColorModeIconDropdown.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import * as React from 'react';
|
||||
import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
|
||||
import LightModeIcon from '@mui/icons-material/LightModeRounded';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import { useColorScheme } from '@mui/material/styles';
|
||||
|
||||
export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
|
||||
const { mode, systemMode, setMode } = useColorScheme();
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
|
||||
setMode(targetMode);
|
||||
handleClose();
|
||||
};
|
||||
if (!mode) {
|
||||
return (
|
||||
<Box
|
||||
data-screenshot="toggle-mode"
|
||||
sx={(theme) => ({
|
||||
verticalAlign: 'bottom',
|
||||
display: 'inline-flex',
|
||||
width: '2.25rem',
|
||||
height: '2.25rem',
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
border: '1px solid',
|
||||
borderColor: (theme.vars || theme).palette.divider,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const resolvedMode = (systemMode || mode) as 'light' | 'dark';
|
||||
const icon = {
|
||||
light: <LightModeIcon />,
|
||||
dark: <DarkModeIcon />,
|
||||
}[resolvedMode];
|
||||
return (
|
||||
<React.Fragment>
|
||||
<IconButton
|
||||
data-screenshot="toggle-mode"
|
||||
onClick={handleClick}
|
||||
disableRipple
|
||||
size="small"
|
||||
aria-controls={open ? 'color-scheme-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? 'true' : undefined}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
slotProps={{
|
||||
paper: {
|
||||
variant: 'outlined',
|
||||
elevation: 0,
|
||||
sx: {
|
||||
my: '4px',
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
>
|
||||
<MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
|
||||
System
|
||||
</MenuItem>
|
||||
<MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
|
||||
Light
|
||||
</MenuItem>
|
||||
<MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
|
||||
Dark
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
28
src/shared-theme/ColorModeSelect.tsx
Normal file
28
src/shared-theme/ColorModeSelect.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import * as React from 'react';
|
||||
import { useColorScheme } from '@mui/material/styles';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectProps } from '@mui/material/Select';
|
||||
|
||||
export default function ColorModeSelect(props: SelectProps) {
|
||||
const { mode, setMode } = useColorScheme();
|
||||
if (!mode) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Select
|
||||
value={mode}
|
||||
onChange={(event) =>
|
||||
setMode(event.target.value as 'system' | 'light' | 'dark')
|
||||
}
|
||||
SelectDisplayProps={{
|
||||
// @ts-ignore
|
||||
'data-screenshot': 'toggle-mode',
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<MenuItem value="system">System</MenuItem>
|
||||
<MenuItem value="light">Light</MenuItem>
|
||||
<MenuItem value="dark">Dark</MenuItem>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
@@ -14,8 +14,8 @@ export const feedbackCustomizations: Components<Theme> = {
|
||||
color: orange[500],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: alpha(orange[900], 0.35),
|
||||
border: `1px solid ${alpha(orange[800], 0.3)}`,
|
||||
backgroundColor: `${alpha(orange[900], 0.5)}`,
|
||||
border: `1px solid ${alpha(orange[800], 0.5)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
|
||||
@@ -125,15 +125,15 @@ export const inputsCustomizations: Components<Theme> = {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
|
||||
borderColor: (theme.vars || theme).palette.divider,
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
|
||||
borderColor: 'hsla(0, 0%, 100%, 0.15)',
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
},
|
||||
@@ -183,12 +183,12 @@ export const inputsCustomizations: Components<Theme> = {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
color: 'hsl(0, 0%, 92%)',
|
||||
color: gray[50],
|
||||
'&:hover': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.08)',
|
||||
backgroundColor: gray[700],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.12)',
|
||||
backgroundColor: alpha(gray[700], 0.7),
|
||||
},
|
||||
}),
|
||||
},
|
||||
@@ -241,14 +241,14 @@ export const inputsCustomizations: Components<Theme> = {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
|
||||
borderColor: (theme.vars || theme).palette.divider,
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
'&:hover': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
|
||||
borderColor: 'hsla(0, 0%, 100%, 0.15)',
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
variants: [
|
||||
@@ -288,7 +288,7 @@ export const inputsCustomizations: Components<Theme> = {
|
||||
[`& .${toggleButtonGroupClasses.selected}`]: {
|
||||
color: '#fff',
|
||||
},
|
||||
boxShadow: `0 2px 8px ${alpha(brand[700], 0.3)}`,
|
||||
boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
@@ -302,7 +302,7 @@ export const inputsCustomizations: Components<Theme> = {
|
||||
fontWeight: 500,
|
||||
...theme.applyStyles('dark', {
|
||||
color: gray[400],
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
|
||||
[`&.${toggleButtonClasses.selected}`]: {
|
||||
color: brand[300],
|
||||
},
|
||||
|
||||
@@ -49,8 +49,9 @@ export const navigationCustomizations: Components<Theme> = {
|
||||
},
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
background: (theme.vars || theme).palette.background.paper,
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
|
||||
background: gray[900],
|
||||
boxShadow:
|
||||
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
|
||||
}),
|
||||
}),
|
||||
},
|
||||
@@ -83,17 +84,17 @@ export const navigationCustomizations: Components<Theme> = {
|
||||
|
||||
...theme.applyStyles('dark', {
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
borderColor: (theme.vars || theme).palette.divider,
|
||||
borderColor: gray[700],
|
||||
backgroundColor: (theme.vars || theme).palette.background.paper,
|
||||
boxShadow: 'inset 0 1px 0 hsla(0, 0%, 100%, 0.05)',
|
||||
boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
|
||||
'&:hover': {
|
||||
borderColor: 'hsla(0, 0%, 100%, 0.15)',
|
||||
borderColor: alpha(gray[700], 0.7),
|
||||
backgroundColor: (theme.vars || theme).palette.background.paper,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
[`&.${selectClasses.focused}`]: {
|
||||
outlineOffset: 0,
|
||||
borderColor: 'hsl(210, 55%, 55%)',
|
||||
borderColor: gray[900],
|
||||
},
|
||||
'&:before, &:after': {
|
||||
display: 'none',
|
||||
@@ -107,7 +108,7 @@ export const navigationCustomizations: Components<Theme> = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
'&:focus-visible': {
|
||||
backgroundColor: (theme.vars || theme).palette.background.default,
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
@@ -150,7 +151,6 @@ export const navigationCustomizations: Components<Theme> = {
|
||||
styleOverrides: {
|
||||
paper: ({ theme }) => ({
|
||||
backgroundColor: (theme.vars || theme).palette.background.default,
|
||||
borderRight: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
}),
|
||||
},
|
||||
},
|
||||
@@ -204,8 +204,8 @@ export const navigationCustomizations: Components<Theme> = {
|
||||
...theme.applyStyles('dark', {
|
||||
':hover': {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
backgroundColor: alpha((theme.vars || theme).palette.common.white, 0.08),
|
||||
borderColor: (theme.vars || theme).palette.divider,
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
},
|
||||
[`&.${tabClasses.selected}`]: {
|
||||
color: '#fff',
|
||||
|
||||
@@ -40,7 +40,7 @@ export const surfacesCustomizations: Components<Theme> = {
|
||||
'&:hover': { backgroundColor: gray[50] },
|
||||
'&:focus-visible': { backgroundColor: 'transparent' },
|
||||
...theme.applyStyles('dark', {
|
||||
'&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) },
|
||||
'&:hover': { backgroundColor: gray[800] },
|
||||
}),
|
||||
}),
|
||||
},
|
||||
@@ -67,7 +67,7 @@ export const surfacesCustomizations: Components<Theme> = {
|
||||
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
boxShadow: 'none',
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: (theme.vars || theme).palette.background.paper,
|
||||
backgroundColor: gray[800],
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
@@ -79,7 +79,7 @@ export const surfacesCustomizations: Components<Theme> = {
|
||||
boxShadow: 'none',
|
||||
background: 'hsl(0, 0%, 100%)',
|
||||
...theme.applyStyles('dark', {
|
||||
background: alpha((theme.vars || theme).palette.background.paper, 0.6),
|
||||
background: alpha(gray[900], 0.4),
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
import { gray } from "./themePrimitives";
|
||||
import { alpha } from "@mui/material/styles";
|
||||
|
||||
declare module "@mui/material/styles" {
|
||||
interface Theme {
|
||||
semantic: SemanticColors;
|
||||
}
|
||||
interface ThemeOptions {
|
||||
semantic?: SemanticColors;
|
||||
}
|
||||
}
|
||||
|
||||
export type SemanticColorMode = "light" | "dark";
|
||||
|
||||
export interface SemanticColors {
|
||||
surface: {
|
||||
page: string;
|
||||
card: string;
|
||||
elevated: string;
|
||||
};
|
||||
border: {
|
||||
default: string;
|
||||
subtle: string;
|
||||
};
|
||||
text: {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
muted: string;
|
||||
};
|
||||
}
|
||||
|
||||
const darkBg = 'hsl(0, 0%, 9%)';
|
||||
const darkPaper = 'hsl(0, 0%, 14%)';
|
||||
const darkElevated = 'hsl(0, 0%, 19%)';
|
||||
|
||||
export function getSemanticColors(mode: SemanticColorMode): SemanticColors {
|
||||
if (mode === "dark") {
|
||||
return {
|
||||
surface: {
|
||||
page: darkBg,
|
||||
card: darkPaper,
|
||||
elevated: darkElevated,
|
||||
},
|
||||
border: {
|
||||
default: 'hsla(0, 0%, 100%, 0.08)',
|
||||
subtle: 'hsla(0, 0%, 100%, 0.04)',
|
||||
},
|
||||
text: {
|
||||
primary: 'hsl(0, 0%, 92%)',
|
||||
secondary: 'hsl(0, 0%, 60%)',
|
||||
muted: 'hsl(0, 0%, 45%)',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
surface: {
|
||||
page: "hsl(0, 0%, 99%)",
|
||||
card: "hsl(220, 35%, 97%)",
|
||||
elevated: gray[100],
|
||||
},
|
||||
border: {
|
||||
default: alpha(gray[300], 0.4),
|
||||
subtle: alpha(gray[200], 0.3),
|
||||
},
|
||||
text: {
|
||||
primary: gray[800],
|
||||
secondary: gray[600],
|
||||
muted: gray[500],
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -23,10 +23,6 @@ declare module '@mui/material/styles' {
|
||||
|
||||
interface Palette {
|
||||
baseShadow: string;
|
||||
flows: {
|
||||
outflows: { primary: string; surface: string; text: string };
|
||||
inflows: { primary: string; surface: string; text: string };
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,9 +52,7 @@ export const gray = {
|
||||
500: 'hsl(220, 20%, 42%)',
|
||||
600: 'hsl(220, 20%, 35%)',
|
||||
700: 'hsl(220, 20%, 25%)',
|
||||
750: 'hsl(220, 20%, 18%)',
|
||||
800: 'hsl(220, 30%, 6%)',
|
||||
850: 'hsl(220, 22%, 11%)',
|
||||
900: 'hsl(220, 35%, 3%)',
|
||||
};
|
||||
|
||||
@@ -101,14 +95,10 @@ export const red = {
|
||||
900: 'hsl(0, 93%, 6%)',
|
||||
};
|
||||
|
||||
const darkBg = 'hsl(0, 0%, 9%)';
|
||||
const darkPaper = 'hsl(0, 0%, 14%)';
|
||||
const darkElevated = 'hsl(0, 0%, 19%)';
|
||||
|
||||
export const getDesignTokens = (mode: PaletteMode) => {
|
||||
customShadows[1] =
|
||||
mode === 'dark'
|
||||
? '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)'
|
||||
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
|
||||
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
|
||||
|
||||
return {
|
||||
@@ -121,9 +111,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
|
||||
contrastText: brand[50],
|
||||
...(mode === 'dark' && {
|
||||
contrastText: brand[50],
|
||||
light: 'hsl(210, 50%, 65%)',
|
||||
main: 'hsl(210, 55%, 55%)',
|
||||
dark: 'hsl(210, 50%, 35%)',
|
||||
light: brand[300],
|
||||
main: brand[400],
|
||||
dark: brand[700],
|
||||
}),
|
||||
},
|
||||
info: {
|
||||
@@ -132,10 +122,10 @@ export const getDesignTokens = (mode: PaletteMode) => {
|
||||
dark: brand[600],
|
||||
contrastText: gray[50],
|
||||
...(mode === 'dark' && {
|
||||
contrastText: 'hsl(210, 30%, 80%)',
|
||||
light: 'hsl(210, 40%, 50%)',
|
||||
main: 'hsl(210, 35%, 40%)',
|
||||
dark: 'hsl(210, 30%, 25%)',
|
||||
contrastText: brand[300],
|
||||
light: brand[500],
|
||||
main: brand[700],
|
||||
dark: brand[900],
|
||||
}),
|
||||
},
|
||||
warning: {
|
||||
@@ -143,9 +133,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
|
||||
main: orange[400],
|
||||
dark: orange[800],
|
||||
...(mode === 'dark' && {
|
||||
light: 'hsl(45, 60%, 55%)',
|
||||
main: 'hsl(45, 55%, 45%)',
|
||||
dark: 'hsl(45, 50%, 30%)',
|
||||
light: orange[400],
|
||||
main: orange[500],
|
||||
dark: orange[700],
|
||||
}),
|
||||
},
|
||||
error: {
|
||||
@@ -153,9 +143,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
|
||||
main: red[400],
|
||||
dark: red[800],
|
||||
...(mode === 'dark' && {
|
||||
light: 'hsl(0, 55%, 60%)',
|
||||
main: 'hsl(0, 55%, 50%)',
|
||||
dark: 'hsl(0, 50%, 35%)',
|
||||
light: red[400],
|
||||
main: red[500],
|
||||
dark: red[700],
|
||||
}),
|
||||
},
|
||||
success: {
|
||||
@@ -163,46 +153,34 @@ export const getDesignTokens = (mode: PaletteMode) => {
|
||||
main: green[400],
|
||||
dark: green[800],
|
||||
...(mode === 'dark' && {
|
||||
light: 'hsl(120, 40%, 55%)',
|
||||
main: 'hsl(120, 40%, 45%)',
|
||||
dark: 'hsl(120, 35%, 30%)',
|
||||
light: green[400],
|
||||
main: green[500],
|
||||
dark: green[700],
|
||||
}),
|
||||
},
|
||||
grey: {
|
||||
...gray,
|
||||
},
|
||||
divider: mode === 'dark' ? 'hsla(0, 0%, 100%, 0.08)' : alpha(gray[300], 0.4),
|
||||
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
|
||||
background: {
|
||||
default: 'hsl(0, 0%, 99%)',
|
||||
paper: 'hsl(220, 35%, 97%)',
|
||||
...(mode === 'dark' && { default: darkBg, paper: darkPaper }),
|
||||
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
|
||||
},
|
||||
text: {
|
||||
primary: gray[800],
|
||||
secondary: gray[600],
|
||||
warning: orange[400],
|
||||
...(mode === 'dark' && { primary: 'hsl(0, 0%, 92%)', secondary: 'hsl(0, 0%, 60%)' }),
|
||||
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
|
||||
},
|
||||
action: {
|
||||
hover: alpha(gray[200], 0.2),
|
||||
selected: `${alpha(gray[200], 0.3)}`,
|
||||
...(mode === 'dark' && {
|
||||
hover: 'hsla(0, 0%, 100%, 0.06)',
|
||||
selected: 'hsla(0, 0%, 100%, 0.1)',
|
||||
hover: alpha(gray[600], 0.2),
|
||||
selected: alpha(gray[600], 0.3),
|
||||
}),
|
||||
},
|
||||
flows: {
|
||||
outflows: {
|
||||
primary: mode === 'dark' ? 'hsl(0, 55%, 60%)' : '#d32f2f',
|
||||
surface: mode === 'dark' ? 'hsla(0, 35%, 25%, 0.6)' : '#fdecea',
|
||||
text: mode === 'dark' ? 'hsl(0, 60%, 80%)' : '#b71c1c',
|
||||
},
|
||||
inflows: {
|
||||
primary: mode === 'dark' ? 'hsl(120, 40%, 55%)' : '#2e7d32',
|
||||
surface: mode === 'dark' ? 'hsla(120, 25%, 22%, 0.6)' : '#e8f5e9',
|
||||
text: mode === 'dark' ? 'hsl(120, 40%, 78%)' : '#1b5e20',
|
||||
},
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
@@ -307,18 +285,6 @@ export const colorSchemes = {
|
||||
hover: alpha(gray[200], 0.2),
|
||||
selected: `${alpha(gray[200], 0.3)}`,
|
||||
},
|
||||
flows: {
|
||||
outflows: {
|
||||
primary: '#d32f2f',
|
||||
surface: '#fdecea',
|
||||
text: '#b71c1c',
|
||||
},
|
||||
inflows: {
|
||||
primary: '#2e7d32',
|
||||
surface: '#e8f5e9',
|
||||
text: '#1b5e20',
|
||||
},
|
||||
},
|
||||
baseShadow:
|
||||
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
|
||||
},
|
||||
@@ -327,60 +293,49 @@ export const colorSchemes = {
|
||||
palette: {
|
||||
primary: {
|
||||
contrastText: brand[50],
|
||||
light: 'hsl(210, 50%, 65%)',
|
||||
main: 'hsl(210, 55%, 55%)',
|
||||
dark: 'hsl(210, 50%, 35%)',
|
||||
light: brand[300],
|
||||
main: brand[400],
|
||||
dark: brand[700],
|
||||
},
|
||||
info: {
|
||||
contrastText: 'hsl(210, 30%, 80%)',
|
||||
light: 'hsl(210, 40%, 50%)',
|
||||
main: 'hsl(210, 35%, 40%)',
|
||||
dark: 'hsl(210, 30%, 25%)',
|
||||
contrastText: brand[300],
|
||||
light: brand[500],
|
||||
main: brand[700],
|
||||
dark: brand[900],
|
||||
},
|
||||
warning: {
|
||||
light: 'hsl(45, 60%, 55%)',
|
||||
main: 'hsl(45, 55%, 45%)',
|
||||
dark: 'hsl(45, 50%, 30%)',
|
||||
light: orange[400],
|
||||
main: orange[500],
|
||||
dark: orange[700],
|
||||
},
|
||||
error: {
|
||||
light: 'hsl(0, 55%, 60%)',
|
||||
main: 'hsl(0, 55%, 50%)',
|
||||
dark: 'hsl(0, 50%, 35%)',
|
||||
light: red[400],
|
||||
main: red[500],
|
||||
dark: red[700],
|
||||
},
|
||||
success: {
|
||||
light: 'hsl(120, 40%, 55%)',
|
||||
main: 'hsl(120, 40%, 45%)',
|
||||
dark: 'hsl(120, 35%, 30%)',
|
||||
light: green[400],
|
||||
main: green[500],
|
||||
dark: green[700],
|
||||
},
|
||||
grey: {
|
||||
...gray,
|
||||
},
|
||||
divider: 'hsla(0, 0%, 100%, 0.08)',
|
||||
divider: alpha(gray[700], 0.6),
|
||||
background: {
|
||||
default: darkBg,
|
||||
paper: darkPaper,
|
||||
default: gray[900],
|
||||
paper: 'hsl(220, 30%, 7%)',
|
||||
},
|
||||
text: {
|
||||
primary: 'hsl(0, 0%, 92%)',
|
||||
secondary: 'hsl(0, 0%, 60%)',
|
||||
primary: 'hsl(0, 0%, 100%)',
|
||||
secondary: gray[400],
|
||||
},
|
||||
action: {
|
||||
hover: 'hsla(0, 0%, 100%, 0.06)',
|
||||
selected: 'hsla(0, 0%, 100%, 0.1)',
|
||||
hover: alpha(gray[600], 0.2),
|
||||
selected: alpha(gray[600], 0.3),
|
||||
},
|
||||
flows: {
|
||||
outflows: {
|
||||
primary: 'hsl(0, 55%, 60%)',
|
||||
surface: 'hsla(0, 35%, 25%, 0.6)',
|
||||
text: 'hsl(0, 60%, 80%)',
|
||||
},
|
||||
inflows: {
|
||||
primary: 'hsl(120, 40%, 55%)',
|
||||
surface: 'hsla(120, 25%, 22%, 0.6)',
|
||||
text: 'hsl(120, 40%, 78%)',
|
||||
},
|
||||
},
|
||||
baseShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
|
||||
baseShadow:
|
||||
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user