Compare commits
11 Commits
1.0.0
...
ce9d0961df
| Author | SHA1 | Date | |
|---|---|---|---|
| ce9d0961df | |||
| 9fe2ed8c5c | |||
| 2286d9b860 | |||
| ccfb597342 | |||
| fe94249b02 | |||
| fff304ad1e | |||
| 58271584ce | |||
| 000c0063e5 | |||
| d66406ba86 | |||
| 32303f7067 | |||
| 13f091a82c |
@@ -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/png" href="/favicon.png" />
|
||||
<title>khata - Aetoskia</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -46,10 +46,6 @@ export const api = {
|
||||
if (!_api) throw new Error("API client not initialized");
|
||||
return _api.delete(...args);
|
||||
},
|
||||
patch: (...args: Parameters<AxiosInstance["patch"]>) => {
|
||||
if (!_api) throw new Error("API client not initialized");
|
||||
return _api.patch(...args);
|
||||
},
|
||||
};
|
||||
|
||||
export const auth = {
|
||||
|
||||
@@ -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: (() => {
|
||||
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}
|
||||
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}`)}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Paper sx={{ p: 4 }}>
|
||||
<GenericForm
|
||||
|
||||
@@ -30,13 +30,13 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
|
||||
});
|
||||
|
||||
// --- 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,
|
||||
@@ -73,23 +73,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
|
||||
},
|
||||
});
|
||||
|
||||
// --- PATCH ---
|
||||
const usePatch = () =>
|
||||
useMutation({
|
||||
mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
|
||||
if (!endpoint) throw new Error("Endpoint not defined");
|
||||
// @ts-ignore
|
||||
const res = await api.patch<T>(`${endpoint}/${id}`, data);
|
||||
return res.data;
|
||||
},
|
||||
onSuccess: (updatedItem) => {
|
||||
// @ts-ignore
|
||||
const id = updatedItem[primaryKey];
|
||||
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
||||
queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
|
||||
},
|
||||
});
|
||||
|
||||
// --- DELETE ---
|
||||
const useDelete = () =>
|
||||
useMutation({
|
||||
@@ -153,7 +136,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
|
||||
useMe,
|
||||
useCreate,
|
||||
useUpdate,
|
||||
usePatch,
|
||||
useUpdateMe,
|
||||
useDelete,
|
||||
getListQueryOptions,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -10,40 +10,16 @@ import {
|
||||
Button
|
||||
} from "@mui/material";
|
||||
|
||||
import DashboardView from "./components/Dashboard";
|
||||
|
||||
import {
|
||||
DashboardState,
|
||||
DashboardStateSetters,
|
||||
DashboardFlow,
|
||||
} from "./components/Dashboard";
|
||||
|
||||
import ConfigurableDashboard from "./components/Dashboard";
|
||||
import { DashboardState } 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 [flow, setFlow] = React.useState<"outflows" | "inflows">("outflows");
|
||||
|
||||
const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
|
||||
const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
|
||||
@@ -54,39 +30,18 @@ export default function Dashboard() {
|
||||
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,
|
||||
flow: flow,
|
||||
payee: appliedPayees.length > 0 ? appliedPayees : undefined,
|
||||
tags: appliedTags.length > 0 ? appliedTags : undefined,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (report.data) {
|
||||
if (report.data?.data) {
|
||||
setLoadedPayees(prev => {
|
||||
const pSet = new Set<string>(prev);
|
||||
report.data.buckets.forEach((b: any) => {
|
||||
report.data.data.buckets.forEach((b: any) => {
|
||||
Object.values(b.periods).forEach((periodArray: any) => {
|
||||
periodArray?.forEach((p: any) => {
|
||||
p.metric?.transactions?.forEach((t: any) => {
|
||||
@@ -100,7 +55,7 @@ export default function Dashboard() {
|
||||
|
||||
setLoadedTags(prev => {
|
||||
const tSet = new Set<string>(prev);
|
||||
report.data.buckets.forEach((b: any) => {
|
||||
report.data.data.buckets.forEach((b: any) => {
|
||||
Object.values(b.periods).forEach((periodArray: any) => {
|
||||
periodArray?.forEach((p: any) => {
|
||||
p.metric?.transactions?.forEach((t: any) => {
|
||||
@@ -112,126 +67,16 @@ export default function Dashboard() {
|
||||
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,
|
||||
]
|
||||
);
|
||||
}, [report.data?.data]);
|
||||
|
||||
const isLoading = report.isLoading;
|
||||
const error = report.error;
|
||||
|
||||
/** Callback for the ConfigurableDashboard's flow toggle */
|
||||
const handleFlowChange = React.useCallback((newState: DashboardState) => {
|
||||
setFlow(newState.flow);
|
||||
}, []);
|
||||
|
||||
if (isLoading && !report.data) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
|
||||
@@ -252,7 +97,7 @@ export default function Dashboard() {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = prepareReport(report.data);
|
||||
const data = prepareReport(report.data.data);
|
||||
return (
|
||||
<Box>
|
||||
<Container>
|
||||
@@ -298,21 +143,6 @@ export default function Dashboard() {
|
||||
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"
|
||||
@@ -327,12 +157,11 @@ export default function Dashboard() {
|
||||
</Button>
|
||||
</Paper>
|
||||
</Container>
|
||||
<DashboardView
|
||||
<ConfigurableDashboard
|
||||
config={configuration}
|
||||
data={data}
|
||||
state={state}
|
||||
stateSetters={stateSetters}
|
||||
isFetching={report.isFetching}
|
||||
onFlowChange={handleFlowChange}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,675 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Paper,
|
||||
Typography,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Stepper,
|
||||
Step,
|
||||
StepLabel,
|
||||
StepIcon,
|
||||
LinearProgress,
|
||||
IconButton,
|
||||
Snackbar,
|
||||
} from "@mui/material";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import ReplayIcon from "@mui/icons-material/Replay";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import ErrorIcon from "@mui/icons-material/Error";
|
||||
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
|
||||
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
|
||||
import {
|
||||
useFetchRequest,
|
||||
useUpdateFetchRequest,
|
||||
useFetchRequestAmbiguities,
|
||||
useResolveAmbiguity,
|
||||
} from "./features/fetch-requests";
|
||||
import type {
|
||||
FetchRequestStatus,
|
||||
SSEEvent,
|
||||
ProgressMessage,
|
||||
} from "./features/fetch-requests";
|
||||
import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
|
||||
import { useConfig } from "../react-openapi";
|
||||
|
||||
const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
|
||||
pending: "default",
|
||||
processing: "info",
|
||||
paused: "warning",
|
||||
raw_expenses_done: "primary",
|
||||
enriched_done: "warning",
|
||||
completed: "success",
|
||||
failed: "error",
|
||||
};
|
||||
|
||||
const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
|
||||
pending: <PlayArrowIcon sx={{ fontSize: 16 }} />,
|
||||
processing: <CircularProgress size={14} />,
|
||||
paused: <WarningAmberIcon sx={{ fontSize: 16 }} />,
|
||||
raw_expenses_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
|
||||
enriched_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
|
||||
completed: <CheckCircleIcon sx={{ fontSize: 16 }} />,
|
||||
failed: <ErrorIcon sx={{ fontSize: 16 }} />,
|
||||
};
|
||||
|
||||
function computeProgressPercent(
|
||||
status: FetchRequestStatus,
|
||||
liveCount: number,
|
||||
seenSteps: Set<string>,
|
||||
stepStats: Record<string, number>,
|
||||
txnBlockCount: number,
|
||||
txnDictCount: number,
|
||||
): number {
|
||||
if (status === "pending") return 0;
|
||||
if (status === "completed") return 100;
|
||||
|
||||
let pct = 0;
|
||||
|
||||
if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) pct += 10;
|
||||
|
||||
if (txnBlockCount > 0) {
|
||||
const current = Math.max(liveCount, stepStats.txn_dicts ?? 0);
|
||||
pct += Math.min(1, current / txnBlockCount) * 20;
|
||||
}
|
||||
|
||||
if (txnDictCount > 0) {
|
||||
pct += Math.min(1, (stepStats.enrich_count ?? 0) / txnDictCount) * 50;
|
||||
pct += Math.min(1, (stepStats.save_count ?? 0) / txnDictCount) * 20;
|
||||
}
|
||||
|
||||
return Math.round(Math.min(100, pct));
|
||||
}
|
||||
|
||||
const stepLabels = ["Extract", "Raw Expense", "Enrich", "Save"];
|
||||
|
||||
function computeActiveStep(status: FetchRequestStatus, seenSteps: Set<string>): number {
|
||||
if (status === "completed") return stepLabels.length;
|
||||
|
||||
if (seenSteps.has("save_expenses/completed") || seenSteps.has("complete/completed")) return stepLabels.length;
|
||||
if (seenSteps.has("save_expenses") || seenSteps.has("complete")) return 3;
|
||||
|
||||
if (seenSteps.has("enrich/completed")) return 3;
|
||||
if (seenSteps.has("enrich")) return 2;
|
||||
|
||||
if (seenSteps.has("txn_dicts/completed") || status === "raw_expenses_done") return 2;
|
||||
if (seenSteps.has("txn_dicts")) return 1;
|
||||
|
||||
if (seenSteps.has("txn_blocks/completed")) return 1;
|
||||
if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) return 0;
|
||||
|
||||
if (status === "processing" || status === "paused") return 0;
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
function formatProgressMessage(msg: ProgressMessage): string {
|
||||
if (msg.lines !== undefined) return `${msg.lines} lines`;
|
||||
if (msg.blocks !== undefined) return `${msg.blocks} blocks`;
|
||||
if (msg.count !== undefined && msg.unit) return `${msg.count} ${msg.unit}`;
|
||||
if (msg.count !== undefined) return `${msg.count} items`;
|
||||
if (msg.raw_ocr_line) return `"${msg.raw_ocr_line.slice(0, 60)}${msg.raw_ocr_line.length > 60 ? "…" : ""}"`;
|
||||
if (msg.error) return msg.error.slice(0, 80);
|
||||
return "";
|
||||
}
|
||||
|
||||
function sseIcon(status: SSEEvent["status"]) {
|
||||
switch (status) {
|
||||
case "started": return <CircularProgress size={14} />;
|
||||
case "completed": return <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />;
|
||||
case "failed": return <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />;
|
||||
case "skipped": return <RemoveCircleOutlineIcon sx={{ fontSize: 16, color: "text.disabled" }} />;
|
||||
case "paused": return <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />;
|
||||
case "progress": return (
|
||||
<FiberManualRecordIcon
|
||||
sx={{ fontSize: 14, color: "info.main" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function isMathValid(candidate: { amount: number; balance: number }, prevBalance: number) {
|
||||
return (
|
||||
candidate.balance === prevBalance + candidate.amount ||
|
||||
candidate.balance === prevBalance - candidate.amount ||
|
||||
Math.abs(candidate.balance - (prevBalance + candidate.amount)) < 0.01 ||
|
||||
Math.abs(candidate.balance - (prevBalance - candidate.amount)) < 0.01
|
||||
);
|
||||
}
|
||||
|
||||
export default function FetchRequestDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const config = useConfig();
|
||||
|
||||
const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useFetchRequest(id!);
|
||||
const updateMutation = useUpdateFetchRequest();
|
||||
const resolveMutation = useResolveAmbiguity();
|
||||
const { data: ambiguities, refetch: refetchAmbiguities } = useFetchRequestAmbiguities(id!);
|
||||
|
||||
const [sseEvents, setSseEvents] = React.useState<SSEEvent[]>([]);
|
||||
const [sseConnected, setSseConnected] = React.useState(false);
|
||||
const [liveParsedCount, setLiveParsedCount] = React.useState<number | undefined>(undefined);
|
||||
const [stepStats, setStepStats] = React.useState<Record<string, number>>({});
|
||||
const [failNotif, setFailNotif] = React.useState<string | null>(null);
|
||||
const sseRef = React.useRef<EventSource | null>(null);
|
||||
const feedRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const txnBlockCount = React.useMemo(() => {
|
||||
const blocks = (fetchRequest as any)?.source?.txn_blocks;
|
||||
if (!blocks) return 0;
|
||||
return Object.values(blocks).reduce(
|
||||
(sum: number, list: any) => sum + (Array.isArray(list) ? list.length : 0),
|
||||
0,
|
||||
);
|
||||
}, [fetchRequest]);
|
||||
|
||||
const stepMessages = React.useMemo(() => {
|
||||
const msgs: Record<number, string> = {};
|
||||
const source = (fetchRequest as any)?.source;
|
||||
|
||||
const rawLineCount = stepStats.raw_lines ?? (source?.raw_lines?.length ?? 0);
|
||||
if (rawLineCount) msgs[0] = `${rawLineCount}`;
|
||||
|
||||
const sourceDictCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
|
||||
const dictLive = liveParsedCount ?? stepStats.txn_dicts ?? 0;
|
||||
const dictCurrent = Math.max(dictLive, sourceDictCount);
|
||||
if (dictCurrent && txnBlockCount) msgs[1] = `${dictCurrent}/${txnBlockCount}`;
|
||||
else if (dictCurrent) msgs[1] = `${dictCurrent}`;
|
||||
|
||||
const txnDictDenom = stepStats.txn_dicts ?? sourceDictCount;
|
||||
if (stepStats.enrich_count && txnDictDenom) msgs[2] = `${stepStats.enrich_count}/${txnDictDenom}`;
|
||||
else if (stepStats.enrich_count) msgs[2] = `${stepStats.enrich_count}`;
|
||||
|
||||
if (stepStats.save_count && txnDictDenom) msgs[3] = `${stepStats.save_count}/${txnDictDenom}`;
|
||||
else if (stepStats.save_count) msgs[3] = `${stepStats.save_count}`;
|
||||
|
||||
return msgs;
|
||||
}, [fetchRequest, stepStats, liveParsedCount, txnBlockCount]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!id || !config?.baseUrl) return;
|
||||
const url = `${config.baseUrl}/fetch-requests/${id}/events`;
|
||||
const es = new EventSource(url);
|
||||
sseRef.current = es;
|
||||
|
||||
es.onopen = () => setSseConnected(true);
|
||||
es.onerror = () => setSseConnected(false);
|
||||
es.onmessage = (event) => {
|
||||
try {
|
||||
const parsed: SSEEvent = JSON.parse(event.data);
|
||||
setSseEvents((prev) => [...prev, parsed]);
|
||||
|
||||
if (parsed.status === "progress" && parsed.message.count !== undefined) {
|
||||
if (parsed.step === "txn_dicts") setLiveParsedCount(parsed.message.count);
|
||||
if (parsed.step === "enrich") setStepStats((prev) => ({ ...prev, enrich_count: parsed.message.count! }));
|
||||
if (parsed.step === "save_expenses") setStepStats((prev) => ({ ...prev, save_count: parsed.message.count! }));
|
||||
}
|
||||
|
||||
if (parsed.status === "completed" && parsed.message.count !== undefined) {
|
||||
const stats: Record<string, number> = {};
|
||||
if (parsed.step === "raw_lines" && parsed.message.lines !== undefined) stats.raw_lines = parsed.message.lines;
|
||||
if (parsed.step === "txn_blocks" && parsed.message.blocks !== undefined) stats.txn_blocks = parsed.message.blocks;
|
||||
if (parsed.step === "txn_dicts") stats.txn_dicts = parsed.message.count;
|
||||
if (parsed.step === "enrich") stats.enrich_count = parsed.message.count;
|
||||
if (parsed.step === "save_expenses") stats.save_count = parsed.message.count;
|
||||
if (Object.keys(stats).length) {
|
||||
setStepStats((prev) => ({ ...prev, ...stats }));
|
||||
}
|
||||
}
|
||||
|
||||
if (parsed.status === "paused") {
|
||||
refetchRequest();
|
||||
refetchAmbiguities();
|
||||
}
|
||||
if (parsed.status === "failed") {
|
||||
setFailNotif(parsed.message.error || "Fetch request failed");
|
||||
refetchRequest();
|
||||
}
|
||||
if (parsed.status === "completed" || parsed.step === "resume_extract") {
|
||||
refetchRequest();
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed events
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
es.close();
|
||||
sseRef.current = null;
|
||||
};
|
||||
}, [id, config?.baseUrl]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (feedRef.current) {
|
||||
feedRef.current.scrollTop = feedRef.current.scrollHeight;
|
||||
}
|
||||
}, [sseEvents]);
|
||||
|
||||
const displayEvents = React.useMemo(() => {
|
||||
const progressSteps = new Set(["txn_dicts", "enrich", "save_expenses"]);
|
||||
const lastProgressIdx: Record<string, number> = {};
|
||||
for (let i = sseEvents.length - 1; i >= 0; i--) {
|
||||
const e = sseEvents[i];
|
||||
if (progressSteps.has(e.step) && e.status === "progress" && lastProgressIdx[e.step] === undefined) {
|
||||
lastProgressIdx[e.step] = i;
|
||||
}
|
||||
}
|
||||
|
||||
const terminalStatuses = new Set(["completed", "skipped", "paused", "failed"]);
|
||||
return sseEvents.filter((e, i) => {
|
||||
if (progressSteps.has(e.step) && e.status === "progress") return i === lastProgressIdx[e.step];
|
||||
if (e.status === "started") {
|
||||
return !sseEvents.slice(i + 1).some(
|
||||
(later) => later.step === e.step && terminalStatuses.has(later.status),
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [sseEvents]);
|
||||
|
||||
const seenSteps = React.useMemo(() => {
|
||||
const steps = new Set<string>();
|
||||
for (const evt of sseEvents) {
|
||||
steps.add(evt.step);
|
||||
if (evt.status === "completed") steps.add(`${evt.step}/completed`);
|
||||
if (evt.status === "failed") steps.add(`${evt.step}/failed`);
|
||||
if (evt.status === "started") steps.add(`${evt.step}/started`);
|
||||
if (evt.status === "progress") steps.add(`${evt.step}/progress`);
|
||||
}
|
||||
return steps;
|
||||
}, [sseEvents]);
|
||||
|
||||
const displayParsedCount = React.useMemo(() => {
|
||||
if (liveParsedCount && liveParsedCount > 0) return liveParsedCount;
|
||||
const source = (fetchRequest as any)?.source;
|
||||
const persistedCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
|
||||
if (persistedCount > 0) return persistedCount;
|
||||
const dicts = source?.txn_dicts;
|
||||
if (Array.isArray(dicts) && dicts.length > 0) return dicts.length;
|
||||
return 0;
|
||||
}, [liveParsedCount, fetchRequest]);
|
||||
|
||||
const txnDictCount = React.useMemo(() => {
|
||||
const source = (fetchRequest as any)?.source;
|
||||
if (stepStats.txn_dicts && stepStats.txn_dicts > 0) return stepStats.txn_dicts;
|
||||
return source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
|
||||
}, [fetchRequest, stepStats]);
|
||||
|
||||
const progressPercent = React.useMemo(
|
||||
() => computeProgressPercent(
|
||||
(fetchRequest as any)?.status as FetchRequestStatus ?? "pending",
|
||||
displayParsedCount,
|
||||
seenSteps,
|
||||
stepStats,
|
||||
txnBlockCount,
|
||||
txnDictCount,
|
||||
),
|
||||
[fetchRequest, displayParsedCount, seenSteps, stepStats, txnBlockCount, txnDictCount],
|
||||
);
|
||||
|
||||
const handleRetry = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({ id, data: { status: "pending" } });
|
||||
} catch (err: any) {
|
||||
setFailNotif(formatApiError(err));
|
||||
}
|
||||
};
|
||||
|
||||
const handleResolve = async (ambiguity: any, candidate: { amount: number; balance: number }) => {
|
||||
await resolveMutation.mutateAsync({
|
||||
ambiguityId: ambiguity.id,
|
||||
payload: { chosen: { amount: candidate.amount, balance: candidate.balance } },
|
||||
});
|
||||
refetchAmbiguities();
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "center", p: 8 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (fetchError || !fetchRequest) {
|
||||
return (
|
||||
<Container sx={{ mt: 4 }}>
|
||||
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
|
||||
Back
|
||||
</Button>
|
||||
<Alert severity="error">Failed to load fetch request</Alert>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const req = fetchRequest as any;
|
||||
const activeStep = computeActiveStep(req.status as FetchRequestStatus, seenSteps);
|
||||
const retryCount = req.retry_count ?? 0;
|
||||
const isRetryExhausted = retryCount >= RETRY_MAX;
|
||||
const pendingAmbiguities = ambiguities?.filter((a: any) => a.status === "pending") ?? [];
|
||||
const resolvedAmbiguities = ambiguities?.filter((a: any) => a.status === "resolved") ?? [];
|
||||
const hasAmbiguities = ambiguities && ambiguities.length > 0;
|
||||
const allResolved = hasAmbiguities && pendingAmbiguities.length === 0;
|
||||
const ambiguitiesLoading = !ambiguities;
|
||||
|
||||
return (
|
||||
<Container sx={{ mt: 4, mb: 4 }}>
|
||||
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
|
||||
Back to Fetch Requests
|
||||
</Button>
|
||||
|
||||
<Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
|
||||
<Chip
|
||||
icon={statusIcons[req.status as FetchRequestStatus] as any}
|
||||
label={req.status.replace(/_/g, " ")}
|
||||
color={statusColors[req.status as FetchRequestStatus]}
|
||||
/>
|
||||
<Typography variant="h6" fontWeight={600}>{req.account_name}</Typography>
|
||||
<Chip
|
||||
label={"path" in req.source ? "File" : "Email"}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={"path" in req.source ? "primary" : "secondary"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 4, flexWrap: "wrap", mb: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Date Range</Typography>
|
||||
<Typography variant="body2">
|
||||
{(req as any).start_date ? new Date((req as any).start_date).toLocaleDateString() : "?"} → {(req as any).end_date ? new Date((req as any).end_date).toLocaleDateString() : "?"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Created</Typography>
|
||||
<Typography variant="body2">{new Date(req.created_at).toLocaleString()}</Typography>
|
||||
</Box>
|
||||
{req.completed_at && (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Completed</Typography>
|
||||
<Typography variant="body2">{new Date(req.completed_at).toLocaleString()}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 0.5 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Overall Progress
|
||||
</Typography>
|
||||
{["processing", "paused"].includes(req.status) && displayParsedCount > 0 && (
|
||||
<Typography variant="caption" fontWeight={600} color="info.main">
|
||||
Validated: {displayParsedCount} transactions
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progressPercent}
|
||||
color={req.status === "failed" ? "error" : req.status === "completed" ? "success" : "primary"}
|
||||
sx={{ borderRadius: 1, height: 8, transition: "width 0.3s ease" }}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.25, display: "block" }}>
|
||||
{progressPercent}%
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||
<Box sx={{ flex: 1, maxWidth: 300 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Retries: {retryCount}/{RETRY_MAX}
|
||||
</Typography>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={(retryCount / RETRY_MAX) * 100}
|
||||
color={isRetryExhausted ? "error" : "primary"}
|
||||
sx={{ mt: 0.5, borderRadius: 1, height: 6 }}
|
||||
/>
|
||||
</Box>
|
||||
{req.status === "failed" && !isRetryExhausted && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<ReplayIcon />}
|
||||
onClick={handleRetry}
|
||||
disabled={updateMutation.isPending}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{req.status === "failed" && req.error_message && (
|
||||
<Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
|
||||
{req.error_message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isRetryExhausted && req.status === "failed" && (
|
||||
<Alert severity="info" sx={{ mb: 3, borderRadius: 2 }}>
|
||||
Max retries reached — no further retry attempts will be made.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
Pipeline Progress
|
||||
</Typography>
|
||||
<Stepper activeStep={activeStep} alternativeLabel>
|
||||
{stepLabels.map((label, index) => {
|
||||
const isCompleted = index < activeStep;
|
||||
const isActive = index === activeStep;
|
||||
const isPaused = req.status === "paused" && isActive;
|
||||
const isFailed = req.status === "failed" && isActive;
|
||||
|
||||
let icon: React.ReactNode;
|
||||
if (isCompleted) {
|
||||
icon = <CheckCircleIcon sx={{ color: "success.main" }} />;
|
||||
} else if (isFailed) {
|
||||
icon = <ErrorIcon sx={{ color: "error.main" }} />;
|
||||
} else if (isPaused) {
|
||||
icon = <WarningAmberIcon sx={{ color: "warning.main" }} />;
|
||||
} else if (isActive) {
|
||||
icon = <CircularProgress size={20} />;
|
||||
} else {
|
||||
icon = <Typography variant="caption" color="text.disabled">{index + 1}</Typography>;
|
||||
}
|
||||
|
||||
const stepMsg = stepMessages[index];
|
||||
|
||||
return (
|
||||
<Step key={label}>
|
||||
<StepLabel
|
||||
StepIconComponent={() => <Box sx={{ display: "flex", alignItems: "center" }}>{icon}</Box>}
|
||||
>
|
||||
<Typography variant="body2" fontWeight={600}>{label}</Typography>
|
||||
{stepMsg && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: "block", lineHeight: 1.2 }}>
|
||||
{stepMsg}
|
||||
</Typography>
|
||||
)}
|
||||
</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
})}
|
||||
</Stepper>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ borderRadius: 4, mb: 3 }} variant="outlined">
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, p: 2, pb: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
|
||||
Progress Events
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
bgcolor: sseConnected ? "success.main" : "error.main",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{sseConnected ? "Connected" : "Disconnected"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
ref={feedRef}
|
||||
sx={{
|
||||
maxHeight: 300,
|
||||
overflowY: "auto",
|
||||
p: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{displayEvents.length === 0 ? (
|
||||
<Typography variant="body2" color="text.disabled" sx={{ textAlign: "center", py: 2 }}>
|
||||
Waiting for events...
|
||||
</Typography>
|
||||
) : (
|
||||
displayEvents.map((evt, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1.5,
|
||||
p: 1,
|
||||
borderRadius: 2,
|
||||
bgcolor: "action.hover",
|
||||
}}
|
||||
>
|
||||
{sseIcon(evt.status)}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
{evt.step.replace(/_/g, " ")}
|
||||
</Typography>
|
||||
{evt.message && formatProgressMessage(evt.message) && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatProgressMessage(evt.message)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{new Date().toLocaleTimeString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{hasAmbiguities && (
|
||||
<Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
Ambiguity Resolution
|
||||
</Typography>
|
||||
|
||||
{allResolved ? (
|
||||
<Alert severity="success" sx={{ mb: 2, borderRadius: 2 }}>
|
||||
All ambiguities resolved — pipeline will resume on next poll cycle
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert severity="warning" sx={{ mb: 2, borderRadius: 2 }}>
|
||||
Pipeline paused — resolve ambiguities to continue
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
{ambiguities.map((ambiguity: any) => {
|
||||
const isResolved = ambiguity.status === "resolved";
|
||||
return (
|
||||
<Paper
|
||||
key={ambiguity.id}
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 3,
|
||||
border: 1,
|
||||
borderColor: isResolved ? "success.main" : "divider",
|
||||
opacity: isResolved ? 0.8 : 1,
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
<Box sx={{ fontFamily: "monospace", fontSize: "0.85rem", mb: 1.5, p: 1, bgcolor: "grey.900", borderRadius: 1, color: "grey.100" }}>
|
||||
{ambiguity.line}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 3, mb: 1.5, flexWrap: "wrap" }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">OCR Amount</Typography>
|
||||
<Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
|
||||
₹{ambiguity.ocr_amount}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">OCR Balance</Typography>
|
||||
<Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
|
||||
₹{ambiguity.ocr_balance}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Previous Balance</Typography>
|
||||
<Typography variant="body2">₹{ambiguity.prev_balance}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{isResolved ? (
|
||||
<Alert severity="success" sx={{ py: 0.5, borderRadius: 2 }} icon={<CheckCircleIcon />}>
|
||||
Resolved: ₹{ambiguity.chosen?.amount} / ₹{ambiguity.chosen?.balance}
|
||||
</Alert>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
{ambiguity.candidates.map((candidate: any, ci: number) => {
|
||||
const isCredit = candidate.amount > 0;
|
||||
const isDebit = candidate.amount < 0;
|
||||
const cColor = isCredit ? "success.main" : isDebit ? "error.main" : undefined;
|
||||
return (
|
||||
<Button
|
||||
key={ci}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
onClick={() => handleResolve(ambiguity, candidate)}
|
||||
disabled={resolveMutation.isPending}
|
||||
sx={{
|
||||
borderColor: cColor,
|
||||
color: cColor,
|
||||
"&:hover": cColor ? { borderColor: cColor } : undefined,
|
||||
}}
|
||||
>
|
||||
₹{candidate.amount} / ₹{candidate.balance}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Paper>
|
||||
)}
|
||||
<Snackbar
|
||||
open={!!failNotif}
|
||||
autoHideDuration={6000}
|
||||
onClose={() => setFailNotif(null)}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
||||
>
|
||||
<Alert severity="error" onClose={() => setFailNotif(null)} sx={{ borderRadius: 2 }}>
|
||||
{failNotif}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,541 +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,
|
||||
Tooltip,
|
||||
Select,
|
||||
MenuItem,
|
||||
InputLabel,
|
||||
FormControl,
|
||||
OutlinedInput,
|
||||
Autocomplete,
|
||||
} 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 ReplayIcon from "@mui/icons-material/Replay";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import ErrorIcon from "@mui/icons-material/Error";
|
||||
import ScheduleIcon from "@mui/icons-material/Schedule";
|
||||
import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
|
||||
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
||||
import {
|
||||
useFetchRequestsList,
|
||||
useCreateFetchRequest,
|
||||
useUpdateFetchRequest,
|
||||
useDeleteFetchRequest,
|
||||
useUploadFile,
|
||||
} from "./features/fetch-requests";
|
||||
import type {
|
||||
FetchRequest,
|
||||
FetchRequestStatus,
|
||||
FileSource,
|
||||
EmailSource,
|
||||
} from "./features/fetch-requests";
|
||||
import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useResourceByName, useConfig } from "../react-openapi";
|
||||
|
||||
const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
|
||||
pending: "default",
|
||||
processing: "info",
|
||||
paused: "warning",
|
||||
raw_expenses_done: "primary",
|
||||
enriched_done: "warning",
|
||||
completed: "success",
|
||||
failed: "error",
|
||||
};
|
||||
|
||||
const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
|
||||
pending: <ScheduleIcon sx={{ fontSize: 16 }} />,
|
||||
processing: <CircularProgress size={14} sx={{ mr: 0.5 }} />,
|
||||
paused: <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />,
|
||||
raw_expenses_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
|
||||
enriched_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
|
||||
completed: <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />,
|
||||
failed: <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />,
|
||||
};
|
||||
|
||||
function formatDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString();
|
||||
}
|
||||
|
||||
function formatDateRange(start?: string, end?: string) {
|
||||
if (!start && !end) return "—";
|
||||
const s = start ? new Date(start).toLocaleDateString() : "?";
|
||||
const e = end ? new Date(end).toLocaleDateString() : "?";
|
||||
return `${s} → ${e}`;
|
||||
}
|
||||
|
||||
function shortId(fp: string) {
|
||||
return fp.length > 8 ? fp.slice(0, 8) + "…" : fp;
|
||||
}
|
||||
|
||||
export default function FetchRequests() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
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 [statusFilter, setStatusFilter] = React.useState<string[]>([]);
|
||||
const [accountFilter, setAccountFilter] = React.useState("");
|
||||
const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
|
||||
|
||||
const { data: listData, isLoading, isFetching, refetch } = useFetchRequestsList({
|
||||
...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
|
||||
...(accountFilter ? { account_name: accountFilter } : {}),
|
||||
...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
|
||||
});
|
||||
const { useList: useAccountsList } = useResourceByName("accounts");
|
||||
const { data: accountsData } = useAccountsList();
|
||||
const accountOptions: string[] = React.useMemo(() => {
|
||||
return (accountsData?.data ?? []).map((a: any) => a.name).filter(Boolean);
|
||||
}, [accountsData]);
|
||||
|
||||
const config = useConfig();
|
||||
const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
|
||||
const formatOptions: string[] = (fetchRes?.fields?.source?.schema?.format?.options as string[]) ?? ["axis", "icici_ocr"];
|
||||
|
||||
const createMutation = useCreateFetchRequest();
|
||||
const updateMutation = useUpdateFetchRequest();
|
||||
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 {
|
||||
const result = 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();
|
||||
navigate(`/fetch-requests/${result.id}`);
|
||||
} catch (err: any) {
|
||||
if (err?.response?.status === 409) {
|
||||
setSnackbar({ message: "Duplicate — same fingerprint already exists", severity: "error" });
|
||||
} else {
|
||||
setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setAccountName("");
|
||||
setFormat("");
|
||||
setFile(null);
|
||||
setUploadedPath(null);
|
||||
setFromEmail("");
|
||||
setSubject("");
|
||||
setRawTerms("");
|
||||
setStartDate("");
|
||||
setEndDate("");
|
||||
};
|
||||
|
||||
const handleRetry = async (req: FetchRequest) => {
|
||||
try {
|
||||
await updateMutation.mutateAsync({ id: req.id, data: { status: "pending" } });
|
||||
setSnackbar({ message: "Retrying fetch request", severity: "success" });
|
||||
} catch {
|
||||
setSnackbar({ message: "Failed to retry", severity: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
const sourceTypeOptions: ("all" | "file" | "email")[] = ["all", "file", "email"];
|
||||
|
||||
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>
|
||||
)}
|
||||
<FormControl size="small">
|
||||
<InputLabel>Format</InputLabel>
|
||||
<Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
|
||||
{formatOptions.map((opt) => (
|
||||
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FormControl size="small">
|
||||
<InputLabel>Format</InputLabel>
|
||||
<Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
|
||||
{formatOptions.map((opt) => (
|
||||
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<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" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Autocomplete
|
||||
options={accountOptions}
|
||||
value={accountName || null}
|
||||
onChange={(_, val) => setAccountName(val ?? "")}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Account Name" size="small" required />
|
||||
)}
|
||||
sx={{ "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
|
||||
/>
|
||||
<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="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="End Date"
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
||||
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, mb: 2, p: 2 }} variant="outlined">
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
|
||||
<FormControl size="small" sx={{ minWidth: 200 }}>
|
||||
<InputLabel>Status</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as string[])}
|
||||
input={<OutlinedInput label="Status" />}
|
||||
renderValue={(selected) => (selected as string[]).join(", ")}
|
||||
>
|
||||
{["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => (
|
||||
<MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
label="Account"
|
||||
value={accountFilter}
|
||||
onChange={(e) => setAccountFilter(e.target.value)}
|
||||
size="small"
|
||||
sx={{ minWidth: 160 }}
|
||||
/>
|
||||
<ToggleButtonGroup
|
||||
value={sourceFilter}
|
||||
exclusive
|
||||
onChange={(_, val) => val && setSourceFilter(val)}
|
||||
size="small"
|
||||
>
|
||||
{sourceTypeOptions.map((opt) => (
|
||||
<ToggleButton key={opt} value={opt}>
|
||||
{opt === "all" ? "All" : opt === "file" ? "File" : "Email"}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
<Box sx={{ flex: 1 }} />
|
||||
<IconButton onClick={() => refetch()} disabled={isFetching}>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{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 component={Paper} variant="outlined" sx={{ borderRadius: 4 }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>ID</TableCell>
|
||||
<TableCell>Account</TableCell>
|
||||
<TableCell>Source</TableCell>
|
||||
<TableCell>Date Range</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Retries</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[...requests]
|
||||
.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
|
||||
.map((req: FetchRequest) => (
|
||||
<TableRow
|
||||
key={req.id}
|
||||
hover
|
||||
onClick={() => navigate(`/fetch-requests/${req.id}`)}
|
||||
sx={{ cursor: "pointer", "&:last-child td": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||||
{shortId(req.fingerprint)}
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
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>{req.account_name}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={"path" in req.source ? "File" : "Email"}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={"path" in req.source ? "primary" : "secondary"}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
|
||||
{formatDateRange((req as any).start_date, (req as any).end_date)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||||
<Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
|
||||
<Chip
|
||||
icon={statusIcons[req.status] as any}
|
||||
label={req.status.replace(/_/g, " ")}
|
||||
color={statusColors[req.status]}
|
||||
size="small"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{(req.retry_count ?? 0) > 0 ? (
|
||||
<Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
|
||||
{req.retry_count}/{RETRY_MAX}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.disabled" }}>
|
||||
—
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell sx={{ whiteSpace: "nowrap", fontSize: "0.8rem" }}>
|
||||
{formatDate(req.created_at)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
|
||||
{req.status === "paused" && (
|
||||
<Tooltip title="Resolve ambiguities">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/fetch-requests/${req.id}`);
|
||||
}}
|
||||
>
|
||||
<WarningAmberIcon fontSize="small" color="warning" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
|
||||
<Tooltip title="Retry">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRetry(req);
|
||||
}}
|
||||
>
|
||||
<ReplayIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(req);
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -16,46 +16,40 @@ export interface DashboardState {
|
||||
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<DashboardFlow, 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;
|
||||
isFetching?: boolean;
|
||||
onFlowChange?: (state: DashboardState) => void;
|
||||
}
|
||||
|
||||
64
src/components/Dashboard/Dashboard.tsx
Normal file
64
src/components/Dashboard/Dashboard.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
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>({
|
||||
flow: "outflows",
|
||||
periodType: "rolling",
|
||||
selectedPeriodId: null,
|
||||
selectedGroupKey: null,
|
||||
comparison: false,
|
||||
});
|
||||
|
||||
const toggleFlow = (
|
||||
event: React.MouseEvent<HTMLElement>,
|
||||
newFlow: "outflows" | "inflows" | null
|
||||
) => {
|
||||
if (newFlow === null) return;
|
||||
|
||||
setState(prev => {
|
||||
if (prev.flow === newFlow) return prev;
|
||||
|
||||
const next = { ...prev, flow: newFlow };
|
||||
props.onFlowChange?.(next);
|
||||
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const 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 }));
|
||||
};
|
||||
|
||||
const setSelectedGroupKey = (groupKey: typeof state.selectedGroupKey) => {
|
||||
setState(prev => ({ ...prev, selectedGroupKey: groupKey }));
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardView
|
||||
{...props}
|
||||
state={state}
|
||||
setState={setState}
|
||||
toggleFlow={toggleFlow}
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
setSelectedGroupKey={setSelectedGroupKey}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -3,64 +3,90 @@ import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Button
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { DashboardViewProps } from "./Dashboard.models";
|
||||
import { GroupKey } from "../../features/report";
|
||||
import { DashboardProps, DashboardState } from "./Dashboard.models";
|
||||
|
||||
interface ViewProps extends DashboardProps {
|
||||
state: DashboardState;
|
||||
setState: React.Dispatch<React.SetStateAction<DashboardState>>;
|
||||
toggleFlow: (event: React.MouseEvent<HTMLElement>, newFlow: "outflows" | "inflows" | null) => void;
|
||||
togglePeriodType: () => void;
|
||||
setSelectedPeriodId: (id: string | null) => void;
|
||||
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
|
||||
toggleComparison: () => void;
|
||||
}
|
||||
|
||||
export default function DashboardView({
|
||||
config,
|
||||
data,
|
||||
state,
|
||||
stateSetters,
|
||||
isFetching,
|
||||
}: DashboardViewProps) {
|
||||
setState,
|
||||
toggleFlow,
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
setSelectedPeriodId,
|
||||
setSelectedGroupKey,
|
||||
}: ViewProps) {
|
||||
const theme = useTheme();
|
||||
const themeMode = theme.palette.mode;
|
||||
const { flow, periodType, comparison, selectedPeriodId, selectedGroupKey } = state;
|
||||
|
||||
const {
|
||||
flow,
|
||||
selectedGroupKey,
|
||||
} = state;
|
||||
// Resolve colors with fallbacks
|
||||
const colors = React.useMemo(() => {
|
||||
const palette = config.style?.palette?.[flow];
|
||||
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 = flow === 'outflows' ? theme.palette.error : theme.palette.success;
|
||||
return {
|
||||
primary: themeColor.main,
|
||||
light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
|
||||
text: themeColor.main
|
||||
};
|
||||
}, [config.style?.palette, flow, themeMode, theme.palette]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
sx={{
|
||||
mt: 4,
|
||||
mb: 4,
|
||||
background: `linear-gradient(180deg, ${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",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
mb: 3,
|
||||
transition: 'background 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 3 }}>
|
||||
<ToggleButtonGroup
|
||||
value={flow}
|
||||
exclusive
|
||||
onChange={stateSetters.toggleFlow}
|
||||
onChange={toggleFlow}
|
||||
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
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -72,7 +98,7 @@ export default function DashboardView({
|
||||
<Button
|
||||
size="small"
|
||||
sx={{ mt: 1, textTransform: "none" }}
|
||||
onClick={() => stateSetters.setSelectedGroupKey(null)}
|
||||
onClick={() => setSelectedGroupKey(null)}
|
||||
>
|
||||
Clear Drill-down
|
||||
</Button>
|
||||
@@ -84,17 +110,29 @@ 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}>
|
||||
<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
|
||||
flow={flow}
|
||||
|
||||
colorScheme={colorScheme}
|
||||
periodType={periodType}
|
||||
comparison={comparison}
|
||||
selectedPeriodId={selectedPeriodId}
|
||||
selectedGroupKey={selectedGroupKey}
|
||||
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
setSelectedGroupKey={setSelectedGroupKey}
|
||||
isFetching={arguments[0].isFetching}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default } from "./Dashboard.view";
|
||||
export { default } from "./Dashboard";
|
||||
export * from "./Dashboard.models";
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
import {
|
||||
DashboardFlow,
|
||||
DashboardPeriodType,
|
||||
DashboardSelectedPeriodId
|
||||
} from "../Dashboard";
|
||||
import { ReportData } from "../../features/report";
|
||||
|
||||
export interface _ChartDataPoint {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -8,3 +15,28 @@ 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;
|
||||
};
|
||||
|
||||
flow: DashboardFlow;
|
||||
periodType: DashboardPeriodType;
|
||||
selectedPeriodId: DashboardSelectedPeriodId;
|
||||
comparison: boolean;
|
||||
|
||||
togglePeriodType: () => void;
|
||||
setSelectedPeriodId: (id: string | null) => void;
|
||||
toggleComparison: () => void;
|
||||
|
||||
isFetching?: boolean;
|
||||
}
|
||||
|
||||
@@ -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,23 +1,18 @@
|
||||
import * as React from "react";
|
||||
import { HistoryChartProps } from "./HistoryChart.models";
|
||||
import HistoryChartView from "./HistoryChart.view";
|
||||
import { buildChartData, tabToKey } from "./HistoryChart.adapter";
|
||||
import { HistoryChartProps } from "./HistoryChart.props";
|
||||
|
||||
|
||||
export default function HistoryChart(props: HistoryChartProps) {
|
||||
const {
|
||||
settings,
|
||||
tabs,
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
|
||||
isFetching,
|
||||
flow,
|
||||
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);
|
||||
|
||||
|
||||
@@ -11,21 +11,39 @@ 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,
|
||||
interface ViewProps extends HistoryChartProps {
|
||||
activeTab: string;
|
||||
setActiveTab: (v: string) => void;
|
||||
currentData: ChartDataPoint[];
|
||||
visibleData: ChartDataPoint[];
|
||||
maxAmount: number;
|
||||
visibleCount: number;
|
||||
startIndex: number;
|
||||
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||
activeDataKey: string;
|
||||
}
|
||||
|
||||
export default function HistoryChartView(props: ViewProps) {
|
||||
const {
|
||||
header,
|
||||
summary,
|
||||
settings,
|
||||
|
||||
state,
|
||||
stateSetters,
|
||||
isFetching,
|
||||
|
||||
tabs,
|
||||
colorScheme,
|
||||
|
||||
flow,
|
||||
periodType,
|
||||
selectedPeriodId,
|
||||
comparison,
|
||||
|
||||
togglePeriodType,
|
||||
setSelectedPeriodId,
|
||||
toggleComparison,
|
||||
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
currentData,
|
||||
@@ -35,10 +53,7 @@ export default function HistoryChartView({
|
||||
startIndex,
|
||||
setStartIndex,
|
||||
activeDataKey,
|
||||
}: HistoryChartViewProps) {
|
||||
|
||||
const { flow, periodType, selectedPeriodId, comparison } = state;
|
||||
const { togglePeriodType, setSelectedPeriodId, toggleComparison } = stateSetters;
|
||||
} = props;
|
||||
|
||||
const theme = useTheme();
|
||||
const isDark = theme.palette.mode === "dark";
|
||||
@@ -76,14 +91,14 @@ export default function HistoryChartView({
|
||||
boxShadow: "none",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: isDark ? "background.paper" : colorScheme.surface,
|
||||
opacity: isFetching ? 0.6 : 1,
|
||||
bgcolor: isDark ? "background.paper" : colorScheme.light,
|
||||
opacity: props.isFetching ? 0.6 : 1,
|
||||
transition: "opacity 0.3s ease",
|
||||
pointerEvents: isFetching ? "none" : "auto",
|
||||
pointerEvents: props.isFetching ? "none" : "auto",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
{summary && (
|
||||
@@ -93,7 +108,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,19 +1,67 @@
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import { ReportData, Transaction, GroupKey } from "../../features/report";
|
||||
import {
|
||||
mergeBucketPeriods,
|
||||
periodIdToKey,
|
||||
formatCurrency,
|
||||
extractFilteredTransactions,
|
||||
filterBuckets,
|
||||
} from "../report.helpers";
|
||||
import { LatestItem } from "./LatestItems.models";
|
||||
|
||||
// ─── Transaction extraction ─────────────────────────────────
|
||||
|
||||
function extractTransactions(
|
||||
reportData: ReportData,
|
||||
selectedPeriodId: string | null,
|
||||
selectedGroupKey: GroupKey | null,
|
||||
): Transaction[] {
|
||||
// 1. Get raw transactions
|
||||
let rawTxns: Transaction[] = [];
|
||||
|
||||
if (selectedPeriodId) {
|
||||
const key = periodIdToKey(selectedPeriodId);
|
||||
const periods = mergeBucketPeriods(reportData.buckets, key);
|
||||
const selected = periods.find((p) => p.id === selectedPeriodId);
|
||||
rawTxns = selected?.metric.transactions || [];
|
||||
} else {
|
||||
const periods = mergeBucketPeriods(reportData.buckets, "all");
|
||||
if (periods.length > 0) {
|
||||
rawTxns = periods[0].metric.transactions || [];
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Filter by group key
|
||||
if (selectedGroupKey) {
|
||||
rawTxns = rawTxns.filter(txn => {
|
||||
let match = true;
|
||||
if (selectedGroupKey.tags && selectedGroupKey.tags.length > 0) {
|
||||
if (!txn.tags) match = false;
|
||||
else {
|
||||
const txnTags = txn.tags.map(t => 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 rawTxns;
|
||||
}
|
||||
|
||||
// ─── Main adapter ────────────────────────────────────────────
|
||||
|
||||
export function buildLatestItems(
|
||||
reportData: ReportData,
|
||||
selectedPeriodId: string | null | undefined,
|
||||
selectedGroupKey: GroupKey | null | undefined,
|
||||
selectedPeriodId: string | null,
|
||||
selectedGroupKey: GroupKey | null,
|
||||
flow: "outflows" | "inflows"
|
||||
): LatestItem[] {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
const txns = extractTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
|
||||
return txns
|
||||
.sort(
|
||||
|
||||
@@ -5,3 +5,12 @@ export interface LatestItem {
|
||||
amount: string;
|
||||
timeAgo: string;
|
||||
}
|
||||
|
||||
export interface LatestItemsViewProps {
|
||||
items: LatestItem[];
|
||||
header: string;
|
||||
accentColor: string;
|
||||
canExpand: boolean;
|
||||
onExpand: () => void;
|
||||
isFetching?: boolean;
|
||||
}
|
||||
|
||||
@@ -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,24 +1,29 @@
|
||||
import * as React from "react";
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import { buildLatestItems } from "./LatestItems.adapter";
|
||||
import LatestItemsView from "./LatestItems.view";
|
||||
import { LatestItemsProps } from "./LatestItems.props";
|
||||
|
||||
export default function LatestItems(props: LatestItemsProps) {
|
||||
const {
|
||||
type Props = {
|
||||
reportData: ReportData;
|
||||
flow: "outflows" | "inflows";
|
||||
header: string;
|
||||
selectedPeriodId: string | null;
|
||||
selectedGroupKey?: GroupKey | null;
|
||||
accentColor: string;
|
||||
isFetching?: boolean;
|
||||
};
|
||||
|
||||
export default function LatestItems({
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
flow,
|
||||
header,
|
||||
selectedPeriodId,
|
||||
selectedGroupKey = null,
|
||||
accentColor,
|
||||
isFetching,
|
||||
} = props;
|
||||
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
}: Props) {
|
||||
const [visibleCount, setVisibleCount] = React.useState(5);
|
||||
|
||||
// Reset count when flow changes to start clean
|
||||
React.useEffect(() => {
|
||||
setVisibleCount(5);
|
||||
}, [flow]);
|
||||
|
||||
const allItems = React.useMemo(() => {
|
||||
return buildLatestItems(reportData, selectedPeriodId, selectedGroupKey, flow);
|
||||
}, [reportData, selectedPeriodId, selectedGroupKey, flow]);
|
||||
@@ -31,9 +36,11 @@ export default function LatestItems(props: LatestItemsProps) {
|
||||
|
||||
return (
|
||||
<LatestItemsView
|
||||
{...props}
|
||||
items={visibleItems}
|
||||
header={header}
|
||||
accentColor={accentColor}
|
||||
canExpand={canExpand}
|
||||
isFetching={isFetching}
|
||||
onExpand={() => setVisibleCount((prev) => prev + 5)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -9,25 +9,22 @@ import {
|
||||
Box,
|
||||
IconButton,
|
||||
} from "@mui/material";
|
||||
import { alpha } from "@mui/material/styles";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import { LatestItemsViewProps } from "./LatestItems.props";
|
||||
import { LatestItemsViewProps } from "./LatestItems.models";
|
||||
|
||||
export default function LatestItemsView({
|
||||
items,
|
||||
title,
|
||||
header,
|
||||
accentColor,
|
||||
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}
|
||||
{header}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -47,7 +44,7 @@ export default function LatestItemsView({
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
bgcolor: alpha(accentColor, 0.13),
|
||||
bgcolor: `${accentColor}22`,
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 3,
|
||||
|
||||
11
src/components/ProgressCard/ProgressCard.models.ts
Normal file
11
src/components/ProgressCard/ProgressCard.models.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export interface ProgressCardProps {
|
||||
header: string;
|
||||
summary?: string;
|
||||
progressAmount: number;
|
||||
totalAmount: number;
|
||||
colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
|
||||
compact?: boolean;
|
||||
selected?: boolean;
|
||||
onClick?: () => void;
|
||||
isFetching?: 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;
|
||||
}
|
||||
25
src/components/ProgressCard/ProgressCard.tsx
Normal file
25
src/components/ProgressCard/ProgressCard.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import * as React from "react";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { ProgressCardProps } from "./ProgressCard.models";
|
||||
import { getPercentage, formatCurrency } from "../report.helpers";
|
||||
|
||||
export default function ProgressCard(props: ProgressCardProps) {
|
||||
const { progressAmount, totalAmount, compact = false } = props;
|
||||
|
||||
const percentage = getPercentage(progressAmount, totalAmount);
|
||||
|
||||
const formattedProgress = formatCurrency(progressAmount);
|
||||
const formattedTotal = formatCurrency(totalAmount);
|
||||
|
||||
return (
|
||||
<ProgressCardView
|
||||
{...props}
|
||||
percentage={percentage}
|
||||
formattedProgress={formattedProgress}
|
||||
formattedTotal={formattedTotal}
|
||||
compact={compact}
|
||||
selected={props.selected}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -8,79 +8,93 @@ 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;
|
||||
selected?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function ProgressCardView({
|
||||
title,
|
||||
settings,
|
||||
|
||||
isFetching,
|
||||
|
||||
colorScheme,
|
||||
|
||||
progressAmount,
|
||||
totalAmount,
|
||||
header,
|
||||
colorTheme = "info",
|
||||
percentage,
|
||||
formattedProgress,
|
||||
formattedTotal,
|
||||
compact = false,
|
||||
selected,
|
||||
onClick,
|
||||
}: ProgressCardViewProps) {
|
||||
}: 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}
|
||||
elevation={compact ? 2 : 4}
|
||||
onClick={onClick}
|
||||
sx={{
|
||||
width: "100%",
|
||||
p: settings.compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
|
||||
borderRadius: settings.compact ? 3 : 4,
|
||||
p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
|
||||
borderRadius: compact ? 3 : 4,
|
||||
cursor: onClick ? "pointer" : "default",
|
||||
transform: selected ? "scale(1.02)" : "scale(1)",
|
||||
transition: "transform 0.2s ease, box-shadow 0.2s ease",
|
||||
bgcolor: colorScheme.surface,
|
||||
color: colorScheme.text,
|
||||
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",
|
||||
? `2px solid #fff`
|
||||
: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
|
||||
boxShadow: (theme) => {
|
||||
const baseShadow = `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
|
||||
isDark
|
||||
? "rgba(0,0,0,0.5)"
|
||||
: theme.palette[colorTheme]?.main || theme.palette.primary.main
|
||||
}`;
|
||||
return selected
|
||||
? `${baseShadow}, 0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette[colorTheme]?.main || theme.palette.primary.main}`
|
||||
: baseShadow;
|
||||
},
|
||||
opacity: arguments[0].isFetching ? 0.6 : 1,
|
||||
pointerEvents: arguments[0].isFetching ? "none" : "auto",
|
||||
}}
|
||||
>
|
||||
<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 +102,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,8 +1,5 @@
|
||||
import { mergeBucketPeriods, periodIdToKey } from "../report.helpers";
|
||||
import { GroupKey, ReportData } from "../../features/report";
|
||||
import {
|
||||
extractFilteredTransactions,
|
||||
aggregateTransactions,
|
||||
} from "../report.helpers";
|
||||
|
||||
export interface PayeeItem {
|
||||
name: string;
|
||||
@@ -15,17 +12,54 @@ export function extractTopPayees(
|
||||
selectedPeriodId?: string | null,
|
||||
selectedGroupKey?: GroupKey | null
|
||||
): { items: PayeeItem[]; total: number } {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
const payeeMap = new Map<string, number>();
|
||||
|
||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
||||
if (txn.payee && txn.payee.name) {
|
||||
return [txn.payee.name];
|
||||
let targetPeriods = [];
|
||||
|
||||
if (selectedPeriodId) {
|
||||
const key = periodIdToKey(selectedPeriodId);
|
||||
const periods = mergeBucketPeriods(reportData.buckets, key);
|
||||
const selected = periods.find((p) => p.id === selectedPeriodId);
|
||||
if (selected) {
|
||||
targetPeriods.push(selected);
|
||||
}
|
||||
return [];
|
||||
} else {
|
||||
// If no specific period is selected, aggregate over the "all" period bucket
|
||||
targetPeriods = mergeBucketPeriods(reportData.buckets, "all");
|
||||
}
|
||||
|
||||
for (const p of targetPeriods) {
|
||||
let txns = p.metric.transactions || [];
|
||||
|
||||
if (selectedGroupKey?.tags && selectedGroupKey.tags.length > 0) {
|
||||
txns = txns.filter(txn => {
|
||||
if (!txn.tags) return false;
|
||||
const txnTags = txn.tags.map(t => typeof t === "string" ? t : t.name);
|
||||
return selectedGroupKey.tags!.every(selectedTag => txnTags.includes(selectedTag));
|
||||
});
|
||||
}
|
||||
|
||||
for (const txn of txns) {
|
||||
if (txn.payee && txn.payee.name) {
|
||||
const current = payeeMap.get(txn.payee.name) || 0;
|
||||
payeeMap.set(txn.payee.name, current + txn.amount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let items: PayeeItem[] = [];
|
||||
let total = 0;
|
||||
|
||||
for (const [name, amount] of payeeMap.entries()) {
|
||||
items.push({ name, amount });
|
||||
total += amount;
|
||||
}
|
||||
|
||||
// Sort descending by amount
|
||||
items.sort((a, b) => b.amount - a.amount);
|
||||
|
||||
return {
|
||||
items,
|
||||
items: items.slice(0, 4), // Top 4
|
||||
total,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,22 +1,30 @@
|
||||
import * as React from "react";
|
||||
import { Box, Paper, Typography } from "@mui/material";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import ProgressCard from "./ProgressCard";
|
||||
import { extractTopPayees } from "./TopPayees.adapter";
|
||||
import { ProgressCardProps } from "./ProgressCard.props";
|
||||
|
||||
export default function TopPayees(props: ProgressCardProps) {
|
||||
const {
|
||||
title,
|
||||
type Props = {
|
||||
reportData: ReportData;
|
||||
flow: "outflows" | "inflows";
|
||||
header: string;
|
||||
selectedPeriodId?: string | null;
|
||||
selectedGroupKey?: GroupKey | null;
|
||||
setSelectedGroupKey?: (key: GroupKey | null) => void;
|
||||
compact?: boolean;
|
||||
isFetching?: boolean;
|
||||
};
|
||||
|
||||
export default function TopPayees({
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
|
||||
flow,
|
||||
header,
|
||||
selectedPeriodId,
|
||||
selectedGroupKey,
|
||||
setSelectedGroupKey,
|
||||
compact = true,
|
||||
isFetching,
|
||||
} = props
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
const { setSelectedGroupKey } = stateSetters;
|
||||
|
||||
}: Props) {
|
||||
const { items, total } = React.useMemo(() => {
|
||||
return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
|
||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
||||
@@ -37,7 +45,7 @@ export default function TopPayees(props: ProgressCardProps) {
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
@@ -52,15 +60,17 @@ export default function TopPayees(props: ProgressCardProps) {
|
||||
}}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
|
||||
const isSelected = selectedGroupKey?.payee?.includes(item.name);
|
||||
return (
|
||||
<ProgressCardView
|
||||
{...props}
|
||||
<ProgressCard
|
||||
key={item.name}
|
||||
title={item.name}
|
||||
header={item.name}
|
||||
progressAmount={item.amount}
|
||||
totalAmount={total}
|
||||
compact={compact}
|
||||
colorTheme={flow === "outflows" ? "error" : "success"}
|
||||
selected={isSelected}
|
||||
isFetching={isFetching}
|
||||
onClick={() => {
|
||||
if (setSelectedGroupKey) {
|
||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import { ReportData } from "../../features/report";
|
||||
import {
|
||||
extractFilteredTransactions,
|
||||
aggregateTransactions,
|
||||
mergeBucketPeriods,
|
||||
periodIdToKey,
|
||||
} from "../report.helpers";
|
||||
|
||||
import { GroupKey } from "../../features/report";
|
||||
|
||||
export interface TagItem {
|
||||
tag: string;
|
||||
amount: number;
|
||||
@@ -15,17 +17,55 @@ export function extractTopTags(
|
||||
selectedPeriodId?: string | null,
|
||||
selectedGroupKey?: GroupKey | null
|
||||
): { items: TagItem[]; total: number } {
|
||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
||||
const tagMap = new Map<string, number>();
|
||||
|
||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
||||
let periodKey: ReturnType<typeof periodIdToKey> = "all";
|
||||
if (selectedPeriodId) {
|
||||
periodKey = periodIdToKey(selectedPeriodId);
|
||||
}
|
||||
|
||||
const periods = mergeBucketPeriods(reportData.buckets, periodKey);
|
||||
|
||||
let period = periods[0];
|
||||
if (selectedPeriodId) {
|
||||
period = periods.find(p => p.id === selectedPeriodId) || period;
|
||||
} else if (periods.length > 0) {
|
||||
period = periods.reduce((latest, p) =>
|
||||
new Date(p.start).getTime() > new Date(latest.start).getTime()
|
||||
? p
|
||||
: latest
|
||||
);
|
||||
}
|
||||
|
||||
if (period && period.metric && period.metric.transactions) {
|
||||
let txns = period.metric.transactions;
|
||||
if (selectedGroupKey?.payee && selectedGroupKey.payee.length > 0) {
|
||||
txns = txns.filter(txn =>
|
||||
txn.payee?.name && selectedGroupKey.payee!.includes(txn.payee.name)
|
||||
);
|
||||
}
|
||||
|
||||
for (const txn of txns) {
|
||||
if (txn.tags && txn.tags.length > 0) {
|
||||
return txn.tags.map((t) => (typeof t === "string" ? t : t.name));
|
||||
for (const tagObj of txn.tags) {
|
||||
const tagName = typeof tagObj === "string" ? tagObj : tagObj.name;
|
||||
tagMap.set(tagName, (tagMap.get(tagName) || 0) + txn.amount);
|
||||
}
|
||||
} else {
|
||||
tagMap.set("Untagged", (tagMap.get("Untagged") || 0) + txn.amount);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ["Untagged"];
|
||||
});
|
||||
|
||||
return {
|
||||
items: items.map((item) => ({ tag: item.name, amount: item.amount })),
|
||||
total,
|
||||
};
|
||||
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 };
|
||||
}
|
||||
|
||||
@@ -1,22 +1,30 @@
|
||||
import * as React from "react";
|
||||
import { Box, Paper, Typography } from "@mui/material";
|
||||
import ProgressCardView from "./ProgressCard.view";
|
||||
import { ReportData, GroupKey } from "../../features/report";
|
||||
import ProgressCard from "./ProgressCard";
|
||||
import { extractTopTags } from "./TopTags.adapter";
|
||||
import { ProgressCardProps } from "./ProgressCard.props";
|
||||
|
||||
export default function TopTags(props: ProgressCardProps) {
|
||||
const {
|
||||
title,
|
||||
type Props = {
|
||||
reportData: ReportData;
|
||||
flow: "outflows" | "inflows";
|
||||
header: string;
|
||||
selectedPeriodId?: string | null;
|
||||
selectedGroupKey?: GroupKey | null;
|
||||
setSelectedGroupKey?: (key: GroupKey | null) => void;
|
||||
compact?: boolean;
|
||||
isFetching?: boolean;
|
||||
};
|
||||
|
||||
export default function TopTags({
|
||||
reportData,
|
||||
state,
|
||||
stateSetters,
|
||||
|
||||
flow,
|
||||
header,
|
||||
selectedPeriodId,
|
||||
selectedGroupKey,
|
||||
setSelectedGroupKey,
|
||||
compact = true,
|
||||
isFetching,
|
||||
} = props
|
||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
||||
const { setSelectedGroupKey } = stateSetters;
|
||||
|
||||
}: Props) {
|
||||
const { items, total } = React.useMemo(() => {
|
||||
return extractTopTags(reportData, flow, selectedPeriodId, selectedGroupKey);
|
||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
||||
@@ -37,7 +45,7 @@ export default function TopTags(props: ProgressCardProps) {
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{title}
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
@@ -52,15 +60,17 @@ export default function TopTags(props: ProgressCardProps) {
|
||||
}}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isSelected = !!selectedGroupKey?.tags?.includes(item.tag);
|
||||
const isSelected = selectedGroupKey?.tags?.includes(item.tag);
|
||||
return (
|
||||
<ProgressCardView
|
||||
{...props}
|
||||
<ProgressCard
|
||||
key={item.tag}
|
||||
title={item.tag}
|
||||
header={item.tag}
|
||||
progressAmount={item.amount}
|
||||
totalAmount={total}
|
||||
compact={compact}
|
||||
colorTheme={flow === "outflows" ? "error" : "success"}
|
||||
selected={isSelected}
|
||||
isFetching={isFetching}
|
||||
onClick={() => {
|
||||
if (setSelectedGroupKey) {
|
||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default } from "./ProgressCard.view";
|
||||
export * from "./ProgressCard.props";
|
||||
export { default } from "./ProgressCard";
|
||||
export * from "./ProgressCard.models";
|
||||
|
||||
@@ -3,8 +3,6 @@ import {
|
||||
ReportBucket,
|
||||
GroupKey,
|
||||
PeriodType,
|
||||
ReportData,
|
||||
Transaction,
|
||||
} from "../features/report";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────
|
||||
@@ -142,89 +140,3 @@ export function filterBuckets(
|
||||
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 };
|
||||
}
|
||||
|
||||
@@ -14,6 +14,9 @@ export const configuration: DashboardConfig = {
|
||||
settings: {
|
||||
tabs: ["Weekly", "Monthly"],
|
||||
},
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "top-categories",
|
||||
@@ -22,6 +25,9 @@ export const configuration: DashboardConfig = {
|
||||
settings: {
|
||||
compact: true,
|
||||
},
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "top-payees",
|
||||
@@ -30,11 +36,45 @@ export const configuration: DashboardConfig = {
|
||||
settings: {
|
||||
compact: true,
|
||||
},
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "items",
|
||||
title: 'Recent Transactions',
|
||||
component: LatestItems,
|
||||
style: {
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
style: {
|
||||
palette: {
|
||||
outflows: {
|
||||
light: {
|
||||
primary: "#d32f2f",
|
||||
background: "#fdecea",
|
||||
text: "#b71c1c"
|
||||
},
|
||||
dark: {
|
||||
primary: "#f44336",
|
||||
background: "rgba(244, 67, 54, 0.15)",
|
||||
text: "#ffcdd2"
|
||||
}
|
||||
},
|
||||
inflows: {
|
||||
light: {
|
||||
primary: "#2e7d32",
|
||||
background: "#e8f5e9",
|
||||
text: "#1b5e20"
|
||||
},
|
||||
dark: {
|
||||
primary: "#4caf50",
|
||||
background: "rgba(76, 175, 80, 0.15)",
|
||||
text: "#c8e6c9"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
export type FetchRequestStatus =
|
||||
| "pending"
|
||||
| "processing"
|
||||
| "paused"
|
||||
| "raw_expenses_done"
|
||||
| "enriched_done"
|
||||
| "completed"
|
||||
| "failed";
|
||||
|
||||
export interface FileSource {
|
||||
path: string;
|
||||
format: string;
|
||||
raw_lines?: string[];
|
||||
txn_blocks?: Record<string, any>;
|
||||
txn_dicts?: Record<string, any>[];
|
||||
txn_dict_count?: number;
|
||||
txn_dicts_count?: number;
|
||||
}
|
||||
|
||||
export interface EmailSource {
|
||||
format: string;
|
||||
from_email?: string;
|
||||
subject?: string;
|
||||
raw_terms?: string[];
|
||||
txn_dict_count?: number;
|
||||
txn_dicts_count?: number;
|
||||
}
|
||||
|
||||
export interface FetchRequestCreate {
|
||||
source: FileSource | EmailSource;
|
||||
account_name: string;
|
||||
payor_username?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
}
|
||||
|
||||
export interface FetchRequestUpdate {
|
||||
status?: FetchRequestStatus;
|
||||
error_message?: string | null;
|
||||
}
|
||||
|
||||
export interface FetchRequest extends FetchRequestCreate {
|
||||
id: string;
|
||||
status: FetchRequestStatus;
|
||||
fingerprint: string;
|
||||
completed_at?: string | null;
|
||||
error_message?: string | null;
|
||||
retry_count?: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface UploadResult {
|
||||
original_filename: string;
|
||||
saved_as: string;
|
||||
content_type: string;
|
||||
url: string;
|
||||
absolute_path: string;
|
||||
}
|
||||
|
||||
export interface AmbiguityCandidate {
|
||||
amount: number;
|
||||
balance: number;
|
||||
}
|
||||
|
||||
export interface PendingAmbiguity {
|
||||
id: string;
|
||||
fetch_request: string;
|
||||
step_index?: number;
|
||||
line: string;
|
||||
ocr_amount: number;
|
||||
ocr_balance: number;
|
||||
prev_balance: number;
|
||||
candidates: AmbiguityCandidate[];
|
||||
chosen?: AmbiguityCandidate | null;
|
||||
resolved_at?: string | null;
|
||||
status: "pending" | "resolved";
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ResolveAmbiguityPayload {
|
||||
chosen: {
|
||||
amount: number;
|
||||
balance: number;
|
||||
};
|
||||
}
|
||||
|
||||
export type SSEEventStep =
|
||||
| "load_content" | "raw_lines" | "txn_blocks" | "txn_dicts"
|
||||
| "resume_extract" | "extract" | "paused" | "complete" | "enrich"
|
||||
| "save_expenses" | "pipeline";
|
||||
|
||||
export type SSEEventStatus =
|
||||
| "started" | "completed" | "skipped" | "paused" | "progress" | "failed";
|
||||
|
||||
export interface ProgressMessage {
|
||||
lines?: number;
|
||||
blocks?: number;
|
||||
count?: number;
|
||||
unit?: string;
|
||||
raw_ocr_line?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface SSEEvent {
|
||||
step: SSEEventStep;
|
||||
status: SSEEventStatus;
|
||||
message: ProgressMessage;
|
||||
}
|
||||
|
||||
export interface FetchRequestFilters {
|
||||
status?: FetchRequestStatus[];
|
||||
account_name?: string;
|
||||
source_type?: "file" | "email";
|
||||
}
|
||||
|
||||
export function formatApiError(err: any): string {
|
||||
if (!err?.response) return err?.message || "Request failed";
|
||||
const data = err.response.data;
|
||||
const status = err.response.status;
|
||||
|
||||
if (status === 422 && Array.isArray(data?.detail)) {
|
||||
return data.detail.map((d: any) => {
|
||||
const field = d.loc?.filter((s: string) => s !== "body").pop() || "field";
|
||||
if (d.type === "value_error.missing") return `Missing: ${field}`;
|
||||
return `${field}: ${d.msg}`;
|
||||
}).join("; ");
|
||||
}
|
||||
|
||||
if (typeof data?.detail === "string") return data.detail;
|
||||
return `Request failed (${status})`;
|
||||
}
|
||||
|
||||
export const RETRY_MAX = 3;
|
||||
@@ -1,28 +0,0 @@
|
||||
export type {
|
||||
FetchRequest,
|
||||
FetchRequestCreate,
|
||||
FetchRequestUpdate,
|
||||
FetchRequestStatus,
|
||||
FetchRequestFilters,
|
||||
FileSource,
|
||||
EmailSource,
|
||||
UploadResult,
|
||||
PendingAmbiguity,
|
||||
AmbiguityCandidate,
|
||||
ResolveAmbiguityPayload,
|
||||
SSEEvent,
|
||||
SSEEventStep,
|
||||
SSEEventStatus,
|
||||
ProgressMessage,
|
||||
} from "./fetch-requests.models";
|
||||
export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
|
||||
export {
|
||||
useFetchRequestsList,
|
||||
useFetchRequest,
|
||||
useCreateFetchRequest,
|
||||
useUpdateFetchRequest,
|
||||
useDeleteFetchRequest,
|
||||
useUploadFile,
|
||||
useFetchRequestAmbiguities,
|
||||
useResolveAmbiguity,
|
||||
} from "./useFetchRequests";
|
||||
@@ -1,90 +0,0 @@
|
||||
import { useResourceByName } from "../../../react-openapi";
|
||||
import { api } from "../../../react-openapi/api/client";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { ResolveAmbiguityPayload } from "./fetch-requests.models";
|
||||
|
||||
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 useUpdateFetchRequest() {
|
||||
const { usePatch } = useResourceByName("fetch-requests");
|
||||
return usePatch();
|
||||
}
|
||||
|
||||
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;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useFetchRequestAmbiguities(fetchRequestId: string) {
|
||||
return useQuery({
|
||||
queryKey: ["fetch-requests", fetchRequestId, "ambiguities"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get(
|
||||
`/fetch-requests/${fetchRequestId}/ambiguities`
|
||||
);
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!fetchRequestId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useResolveAmbiguity() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({
|
||||
ambiguityId,
|
||||
payload,
|
||||
}: {
|
||||
ambiguityId: string;
|
||||
payload: ResolveAmbiguityPayload;
|
||||
}) => {
|
||||
const res = await api.post(
|
||||
`/ambiguities/${ambiguityId}/resolve`,
|
||||
payload
|
||||
);
|
||||
return res.data;
|
||||
},
|
||||
onSuccess: (data: any) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["fetch-requests", data.fetch_request, "ambiguities"],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["fetch-requests", "detail", data.fetch_request],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
@@ -9,13 +9,10 @@ export interface ReportParams {
|
||||
}
|
||||
|
||||
export function useReport(params: ReportParams) {
|
||||
const { useRead } = useResourceByName("reports");
|
||||
const { useList } = useResourceByName("reports");
|
||||
|
||||
return useRead(
|
||||
params.snapshot_id ? params.snapshot_id : "latest",
|
||||
{
|
||||
return useList({
|
||||
...params,
|
||||
periods: params.periods,
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -12,9 +12,6 @@ import {
|
||||
} from "@mui/material";
|
||||
import Home from './Home';
|
||||
import Dashboard from './Dashboard';
|
||||
import FetchRequests from './FetchRequests';
|
||||
import FetchRequestDetail from './FetchRequestDetail';
|
||||
import ReportSnapshots from './ReportSnapshots';
|
||||
import { Admin, AppProvider } from '../react-openapi';
|
||||
import { configuration, profileConfiguration } from './openapi-config';
|
||||
import { Buffer } from 'buffer';
|
||||
@@ -22,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;
|
||||
@@ -36,9 +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: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
|
||||
{ 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,
|
||||
/**
|
||||
* 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,
|
||||
},
|
||||
}),
|
||||
[mode, semantic]
|
||||
);
|
||||
|
||||
});
|
||||
}, [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,
|
||||
}}
|
||||
>
|
||||
<ThemeProvider theme={theme} disableTransitionOnChange>
|
||||
{children}
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
</ColorModeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
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