Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 14x 14x 14x 14x 14x 14x 14x 6x 8x 14x 14x 14x 14x 7x 7x 7x 7x 7x 7x 7x 7x 14x 14x 7x 7x 7x 7x 7x 7x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 8x 8x 8x 8x 8x 8x 8x 14x 14x 14x 2x 2x 2x 2x 14x 14x 14x 2x 2x 2x 2x 2x 2x 2x 14x 14x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 14x 14x 14x 14x 14x | /**
* @file Analytics.tsx
* @module pages/analytics/Analytics
*
* @summary
* Orchestrates Analytics blocks with a global filter bar and URL sync.
* Splitting into blocks keeps this file under ~200 lines and easier to reason.
*/
import * as React from 'react';
import type { JSX } from 'react';
import { useNavigate, useSearchParams, useParams } from 'react-router-dom';
import { Box, Typography, Stack, Button, Paper } from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { readParams } from '../../utils/urlState';
import { getSuppliersLite, type SupplierRef } from '../../api/analytics/suppliers';
import { HelpIconButton } from '../../features/help';
// Blocks
import StockValueCard from './blocks/StockValueCard';
import PriceTrendCard from './blocks/PriceTrendCard';
import LowStockTable from './blocks/LowStockTable';
import StockPerSupplierDonut from './blocks/StockPerSupplierDonut';
import AnalyticsNav, { type AnalyticsSection } from './components/AnalyticsNav';
import FinancialSummaryCard from './blocks/FinancialSummaryCard';
import ItemUpdateFrequencyCard from './blocks/ItemUpdateFrequencyCard';
import RecentStockActivityCard from './blocks/RecentStockActivityCard';
import MovementLineCard from './blocks/MovementLineCard';
// Filters UI
import { Filters, type AnalyticsFilters } from './components/filters';
// Import date helpers from the standard utils location
import { getTodayIso, getDaysAgoIso } from '../../utils/formatters';
export default function Analytics(): JSX.Element {
const { t } = useTranslation(['analytics', 'common']);
const navigate = useNavigate();
// Read section from route: /analytics/:section?
const { section: rawSection } = useParams();
const section: AnalyticsSection =
rawSection === 'pricing' || rawSection === 'inventory' || rawSection === 'finance'
? (rawSection as AnalyticsSection)
: 'overview';
// URL ↔ state
const [searchParams, setSearchParams] = useSearchParams();
const [filters, setFilters] = React.useState<AnalyticsFilters>(() => {
const m = readParams(searchParams.toString(), ['from', 'to', 'supplierId']);
const haveRange = !!(m.from && m.to);
return {
from: haveRange ? m.from : getDaysAgoIso(180),
to: haveRange ? m.to : getTodayIso(),
supplierId: m.supplierId,
quick: haveRange ? 'custom' : '180',
};
});
React.useEffect(() => {
const next: Record<string, string> = {};
if (filters.from) next.from = filters.from;
if (filters.to) next.to = filters.to;
if (filters.supplierId) next.supplierId = filters.supplierId;
setSearchParams(next);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filters.from, filters.to, filters.supplierId]);
// Suppliers list
const suppliersQ = useQuery<SupplierRef[]>({
queryKey: ['analytics', 'suppliers'],
queryFn: getSuppliersLite,
retry: 0,
staleTime: 5 * 60_000,
});
return (
<Paper elevation={0} sx={{ p: { xs: 2, md: 3 }, bgcolor: 'background.paper', m: 0 }}>
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ mb: 3 }}
>
<Typography variant="h5" sx={{ fontWeight: 600 }}>
{t('analytics:title')}
</Typography>
<Stack direction="row" spacing={1} alignItems="center">
<HelpIconButton
topicId="analytics.overview"
tooltip={t('actions.help', 'Help')}
/>
<Button variant="text" onClick={() => navigate('/dashboard')}>
{t('common:actions.backToDashboard')}
</Button>
</Stack>
</Stack>
{/* Submenu (tabs) */}
<AnalyticsNav section={section} />
<Box sx={{ mb: 2 }}>
<Filters value={filters} onChange={setFilters} suppliers={suppliersQ.data ?? []} disabled={suppliersQ.isLoading} />
</Box>
<Box
sx={{
display: 'grid',
gap: 2,
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
alignItems: 'stretch',
}}
>
{section === 'overview' && (
<>
{/* A1 */}
<StockValueCard from={filters.from} to={filters.to} supplierId={filters.supplierId} />
{/* A2 (Line) */}
<MovementLineCard from={filters.from} to={filters.to} supplierId={filters.supplierId} />
</>
)}
{section === 'pricing' && (
<>
{/* A3 */}
<PriceTrendCard from={filters.from} to={filters.to} supplierId={filters.supplierId} />
</>
)}
{section === 'inventory' && (
<>
{/* A4 — Low stock table (fetch gated by supplier) */}
<LowStockTable supplierId={filters.supplierId ?? ''} from={filters.from} to={filters.to} limit={12} />
{/* A4 — Stock per supplier (donut) */}
<StockPerSupplierDonut />
</>
)}
{section === 'finance' && (
<>
{/* Finance — WAC summary (period + supplier) */}
<FinancialSummaryCard from={filters.from} to={filters.to} supplierId={filters.supplierId} />
{/* Operations — top updated items (requires supplier) */}
<ItemUpdateFrequencyCard supplierId={filters.supplierId} />
{/* Operations — recent stock activity (stacked by reason) */}
<RecentStockActivityCard from={filters.from} to={filters.to} supplierId={filters.supplierId} />
</>
)}
</Box>
</Paper>
);
} |