frontend phase 15

2026-07-10 20:28:06 +03:30
parent bc51cf59b4
commit 70cf00ce4a
151 changed files with 10711 additions and 44 deletions
@@ -1,8 +1,81 @@
-import { getTranslations } from 'next-intl/server';
-import { PlaceholderScreen } from '@/components';
+'use client';
+import { useLocale, useTranslations } from 'next-intl';
+import { Box, Paper, Typography } from '@mui/material';
+import { AppIcon, AppLink } from '@/components';
+import { AdminPageHeader } from '@/components/admin';
+import { useAdminCapabilities } from '@/hooks';
+import { ROUTES } from '@/constants';

-export default async function AdminOverviewPage() {
-  const t = await getTranslations('nav');
-  const tShell = await getTranslations('shell');
-  return <PlaceholderScreen icon="admin" title={t('overview')} description={tShell('placeholder_body')} />;
+/**
+ * Admin overview landing (f15) — the backoffice home. Renders one **console card** per worklist the current
+ * principal may act on, derived from `useAdminCapabilities()` (a UI hint; the server still enforces every
+ * command's role scope). A `support` admin sees verification/tickets/alerts; a `finance` admin sees
+ * payouts/config; only a `super_admin` sees roles. Each card deep-links into its console.
+ */
+export default function AdminOverviewPage() {
+  const t = useTranslations('admin');
+  const tNav = useTranslations('nav');
+  const locale = useLocale();
+  const caps = useAdminCapabilities();
+
+  // `key` doubles as the `nav` i18n key for the card label.
+  const consoles: { key: string; route: string; icon: string; enabled: boolean }[] = [
+    { key: 'verification', route: ROUTES.ADMIN_VERIFICATION, icon: 'verification', enabled: caps.canVerify },
+    { key: 'tickets', route: ROUTES.ADMIN_TICKETS, icon: 'support', enabled: caps.canManageTickets },
+    { key: 'payouts', route: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', enabled: caps.canPayout },
+    { key: 'reviews', route: ROUTES.ADMIN_REVIEWS, icon: 'moderation', enabled: caps.canModerate },
+    { key: 'config', route: ROUTES.ADMIN_CONFIG, icon: 'config', enabled: caps.canConfig },
+    { key: 'holidays', route: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', enabled: caps.canConfig },
+    { key: 'alerts', route: ROUTES.ADMIN_ALERTS, icon: 'alerts', enabled: caps.canManageAlerts },
+    { key: 'audit', route: ROUTES.ADMIN_AUDIT, icon: 'audit', enabled: caps.canViewAudit },
+    { key: 'partners', route: ROUTES.ADMIN_PARTNERS, icon: 'partners', enabled: caps.canManagePartners },
+    { key: 'roles', route: ROUTES.ADMIN_ROLES, icon: 'roles', enabled: caps.canManageRoles },
+  ].filter((c) => c.enabled);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <AdminPageHeader title={t('overview_title')} subtitle={t('overview_subtitle')} />
+
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' },
+          gap: 2,
+        }}
+      >
+        {consoles.map((c) => (
+          <AppLink
+            key={c.key}
+            to={`/${locale}${c.route}`}
+            color="inherit"
+            underline="none"
+            sx={{ display: 'block', height: '100%' }}
+          >
+            <Paper
+              elevation={0}
+              sx={{
+                p: 3,
+                height: '100%',
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                gap: 1.5,
+                cursor: 'pointer',
+                transition: 'border-color 150ms ease, box-shadow 150ms ease',
+                '&:hover': { borderColor: 'primary.main', boxShadow: 3 },
+              }}
+            >
+              <AppIcon icon={c.icon} size={32} color="var(--bal-primary)" />
+              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+                {tNav(c.key)}
+              </Typography>
+            </Paper>
+          </AppLink>
+        ))}
+      </Box>
+    </Box>
+  );
 }