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 | 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 4x 4x 4x 4x 4x 3x 3x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | /**
* @file AnalyticsNav.tsx
* @module pages/analytics/components/AnalyticsNav
*
* @summary
* Secondary navigation for Analytics sections (tabs). Keeps the main page focused.
*
* @sections
* - overview → Stock Value + Monthly Movement
* - pricing → Price Trend
* - inventory → Low Stock + Stock per Supplier
*
* @enterprise
* - Uses route segments so deep-links work (e.g., /analytics/pricing).
* - Minimal state: URL is the single source of truth.
*/
import * as React from 'react';
import { Tabs, Tab, Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
export type AnalyticsSection = 'overview' | 'pricing' | 'inventory' | 'finance';
export type AnalyticsNavProps = {
/** Current section (parsed from the URL). */
section: AnalyticsSection;
};
export default function AnalyticsNav({ section }: AnalyticsNavProps) {
const navigate = useNavigate();
const { t } = useTranslation(['analytics']);
const handleChange = (_e: React.SyntheticEvent, next: string) => {
navigate(`/analytics/${next}`);
};
return (
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}>
<Tabs value={section} onChange={handleChange} variant="scrollable" scrollButtons="auto">
<Tab value="overview" label={t('analytics:nav.overview', 'Overview')} />
<Tab value="pricing" label={t('analytics:nav.pricing', 'Pricing')} />
<Tab value="inventory" label={t('analytics:nav.inventory', 'Inventory Health')} />
<Tab value="finance" label={t('analytics:nav.finance', 'Finance')} />
</Tabs>
</Box>
);
}
|