Portal frontend: apply Prettier formatting baseline

One-time `prettier --write` across the 22 source files not already touched
by the preceding tooling commit (b5ceedc). Pure formatting — no behaviour
change, no logic change. Reviewable as "all whitespace/reflow".

From here the lint-staged pre-commit hook keeps new and edited code
consistent automatically.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

portal/frontend/.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+coverage
+*.tsbuildinfo
+package-lock.json

portal/frontend/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

portal/frontend/eslint.config.js

@@ -0,0 +1,55 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-config-prettier';
+
+// ESLint 9 flat config. Order matters: `prettier` must come last so it can
+// switch off any stylistic rules that would fight the formatter — ESLint owns
+// code-correctness, Prettier owns formatting.
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules', 'coverage'] },
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  },
+  {
+    // Test + setup files also touch Node globals (process, etc.) and use
+    // jsdom; allow both global sets.
+    files: ['**/*.test.{ts,tsx}', 'src/test/**/*.ts'],
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+  },
+  {
+    // Context files intentionally export a Provider component *and* its hook
+    // from the same module — the standard React Context pattern. The
+    // react-refresh rule flags this; the trade-off (marginally less optimal
+    // HMR) isn't worth splitting every context into two files.
+    files: ['src/hooks/**/*.tsx'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+  {
+    // Config files run in Node.
+    files: ['*.config.{js,ts}'],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+  prettier,
+);

portal/frontend/package.json

@@ -6,7 +6,23 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
@@ -21,10 +37,26 @@
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tanstack/react-query-devtools": "^5.100.11",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^15.15.0",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.8.3",
     "typescript": "~5.6.2",
-    "vite": "^6.0.0"
+    "typescript-eslint": "^8.59.4",
+    "vite": "^6.0.0",
+    "vitest": "^3.2.4"
   }
 }

portal/frontend/src/App.tsx

@@ -1,5 +1,16 @@
+import { lazy, Suspense } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spin } from 'antd';
+
+// Query devtools — dev only. The lazy import means the devtools code is in its
+// own chunk that a production build never references, so it adds 0 bytes to the
+// shipped bundle.
+const ReactQueryDevtools = import.meta.env.DEV
+  ? lazy(() =>
+      import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtools })),
+    )
+  : () => null;
 import { AuthProvider } from './hooks/useAuth';
 import { BrandingProvider } from './hooks/useBranding';
 import { AppInfoProvider } from './hooks/useAppInfo';
@@ -7,20 +18,52 @@ import { ThemedRoot } from './components/ThemedRoot';
 import { RequireAuth } from './components/RequireAuth';
 import { RequireRole } from './components/RequireRole';
 import { AppLayout } from './components/layout/AppLayout';
-import { LoginPage } from './pages/LoginPage';
+
-import { DashboardPage } from './pages/DashboardPage';
+// Pages are code-split — each one ships in its own chunk and is fetched on
-import { DashboardsPage } from './pages/DashboardsPage';
+// demand. Keeps ECharts (DashboardPage), date utilities, and Admin-only pages
-import { MeasurementsPage } from './pages/MeasurementsPage';
+// out of the first-paint bundle for users who never visit them. The shim
-import { MyProfilePage } from './pages/MyProfilePage';
+// `m => ({ default: m.X })` adapts named exports to React.lazy's default-export
-import { AdminSitesPage } from './pages/AdminSitesPage';
+// expectation; cheaper than converting every page to a default export.
-import { AdminCustomersPage } from './pages/AdminCustomersPage';
+const LoginPage = lazy(() => import('./pages/LoginPage').then((m) => ({ default: m.LoginPage })));
-import { AdminCustomerDetailPage } from './pages/AdminCustomerDetailPage';
+const DashboardPage = lazy(() =>
-import { SettingsPage } from './pages/SettingsPage';
+  import('./pages/DashboardPage').then((m) => ({ default: m.DashboardPage })),
+);
+const DashboardsPage = lazy(() =>
+  import('./pages/DashboardsPage').then((m) => ({ default: m.DashboardsPage })),
+);
+const MeasurementsPage = lazy(() =>
+  import('./pages/MeasurementsPage').then((m) => ({ default: m.MeasurementsPage })),
+);
+const MyProfilePage = lazy(() =>
+  import('./pages/MyProfilePage').then((m) => ({ default: m.MyProfilePage })),
+);
+const AdminSitesPage = lazy(() =>
+  import('./pages/AdminSitesPage').then((m) => ({ default: m.AdminSitesPage })),
+);
+const AdminCustomersPage = lazy(() =>
+  import('./pages/AdminCustomersPage').then((m) => ({ default: m.AdminCustomersPage })),
+);
+const AdminCustomerDetailPage = lazy(() =>
+  import('./pages/AdminCustomerDetailPage').then((m) => ({ default: m.AdminCustomerDetailPage })),
+);
+const SettingsPage = lazy(() =>
+  import('./pages/SettingsPage').then((m) => ({ default: m.SettingsPage })),
+);
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } },
 });
 
+function PageFallback() {
+  return (
+    <div
+      style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 240 }}
+    >
+      <Spin size="large" />
+    </div>
+  );
+}
+
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
@@ -29,6 +72,7 @@ export default function App() {
           <ThemedRoot>
             <AuthProvider>
               <BrowserRouter>
+                <Suspense fallback={<PageFallback />}>
                   <Routes>
                     <Route path="/login" element={<LoginPage />} />
                     <Route
@@ -79,11 +123,15 @@ export default function App() {
                     </Route>
                     <Route path="*" element={<Navigate to="/" replace />} />
                   </Routes>
+                </Suspense>
               </BrowserRouter>
             </AuthProvider>
           </ThemedRoot>
         </BrandingProvider>
       </AppInfoProvider>
+      <Suspense fallback={null}>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </Suspense>
     </QueryClientProvider>
   );
 }

portal/frontend/src/api/auth.ts

@@ -30,7 +30,10 @@ export async function updateMyProfile(displayName: string): Promise<CurrentUser>
   return data;
 }
 
-export async function changeMyPassword(currentPassword: string, newPassword: string): Promise<void> {
+export async function changeMyPassword(
+  currentPassword: string,
+  newPassword: string,
+): Promise<void> {
   await api.post('/auth/me/change-password', { currentPassword, newPassword });
 }
 

portal/frontend/src/api/client.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { extractApiError } from './client';
+
+describe('extractApiError', () => {
+  it('returns the single { error } message', () => {
+    const err = { response: { data: { error: 'Customer code already exists.' } } };
+    expect(extractApiError(err)).toBe('Customer code already exists.');
+  });
+
+  it('joins the { errors[] } list (Identity validation shape)', () => {
+    const err = { response: { data: { errors: ['Too short.', 'Needs a digit.'] } } };
+    expect(extractApiError(err)).toBe('Too short.; Needs a digit.');
+  });
+
+  it('prefers error over errors when both are present', () => {
+    const err = { response: { data: { error: 'primary', errors: ['secondary'] } } };
+    expect(extractApiError(err)).toBe('primary');
+  });
+
+  it('falls back to the default for a non-axios error', () => {
+    expect(extractApiError(new Error('boom'))).toBe('Request failed.');
+  });
+
+  it('uses a custom fallback when provided', () => {
+    expect(extractApiError(null, 'Save failed.')).toBe('Save failed.');
+  });
+
+  it('falls back when the response body has no recognised field', () => {
+    const err = { response: { data: { unexpected: true } } };
+    expect(extractApiError(err)).toBe('Request failed.');
+  });
+});

portal/frontend/src/api/client.ts

@@ -1,7 +1,41 @@
-import axios from 'axios';
+import axios, { type AxiosError } from 'axios';
 
 export const api = axios.create({
   baseURL: '/api',
   withCredentials: true,
   headers: { 'Content-Type': 'application/json' },
 });
+
+// Global 401 → /login redirect. Without this, an expired session in the middle
+// of a page shows generic "Request failed" errors from each TanStack Query.
+// Skipping /auth/* lets the auth flow (login, /me probe, /check) handle 401
+// inline — login shows wrong-password, fetchCurrentUser turns it into null,
+// /check is the Traefik forwardAuth probe and is never called by user code.
+api.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      const url = error.config?.url ?? '';
+      const isAuthPath = url.startsWith('/auth/') || url === '/auth';
+      const alreadyOnLogin = window.location.pathname === '/login';
+      if (!isAuthPath && !alreadyOnLogin) {
+        const returnTo = window.location.pathname + window.location.search;
+        window.location.href = `/login?returnTo=${encodeURIComponent(returnTo)}`;
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
+// Pull a human-readable error message out of an axios error. Backends use
+// either { error: "..." } (single message) or { errors: ["...", "..."] }
+// (Identity validation rejections). Falls back to the supplied default.
+export function extractApiError(err: unknown, fallback = 'Request failed.'): string {
+  if (typeof err === 'object' && err !== null && 'response' in err) {
+    const data = (err as { response?: { data?: { error?: string; errors?: string[] } } }).response
+      ?.data;
+    if (data?.error) return data.error;
+    if (data?.errors?.length) return data.errors.join('; ');
+  }
+  return fallback;
+}

portal/frontend/src/api/dashboard.ts

@@ -24,7 +24,10 @@ export interface DashboardSummary {
   chart: DashboardChartPoint[];
 }
 
-export async function fetchDashboardSummary(fromUtc: string, toUtc: string): Promise<DashboardSummary> {
+export async function fetchDashboardSummary(
+  fromUtc: string,
+  toUtc: string,
+): Promise<DashboardSummary> {
   const { data } = await api.get<DashboardSummary>('/dashboard/summary', {
     params: { from: fromUtc, to: toUtc },
   });

portal/frontend/src/api/fleet.ts

@@ -151,9 +151,8 @@ export async function fetchFleetCustomerCost(
   fromUtc: string,
   toUtc: string,
 ): Promise<FleetCost> {
-  const { data } = await api.get<FleetCost>(
+  const { data } = await api.get<FleetCost>(`/fleet/customers/${id}/cost`, {
-    `/fleet/customers/${id}/cost`,
+    params: { from: fromUtc, to: toUtc },
-    { params: { from: fromUtc, to: toUtc } },
+  });
-  );
   return data;
 }

portal/frontend/src/api/measurements.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { api } from './client';
+import { fetchRawMeasurements, downloadRawMeasurementsExport } from './measurements';
+
+vi.mock('./client', () => ({
+  api: {
+    get: vi.fn(),
+  },
+}));
+
+describe('measurements API client', () => {
+  beforeEach(() => {
+    vi.mocked(api.get).mockReset();
+  });
+
+  it('passes the device-id filter as a comma-separated string', async () => {
+    vi.mocked(api.get).mockResolvedValueOnce({
+      data: { totalCount: 0, limit: 200, offset: 0, rows: [] },
+    });
+    await fetchRawMeasurements({
+      fromUtc: '2026-05-01T00:00:00Z',
+      toUtc: '2026-05-02T00:00:00Z',
+      deviceIds: ['aaa', 'bbb', 'ccc'],
+      limit: 200,
+      offset: 0,
+    });
+    expect(api.get).toHaveBeenCalledWith(
+      '/measurements/raw',
+      expect.objectContaining({
+        params: expect.objectContaining({ deviceIds: 'aaa,bbb,ccc' }),
+      }),
+    );
+  });
+
+  it('omits the device-id filter when the list is empty', async () => {
+    vi.mocked(api.get).mockResolvedValueOnce({
+      data: { totalCount: 0, limit: 200, offset: 0, rows: [] },
+    });
+    await fetchRawMeasurements({
+      fromUtc: '2026-05-01T00:00:00Z',
+      toUtc: '2026-05-02T00:00:00Z',
+      deviceIds: [],
+      limit: 200,
+      offset: 0,
+    });
+    const call = vi.mocked(api.get).mock.calls[0][1] as { params: Record<string, unknown> };
+    expect(call.params.deviceIds).toBeUndefined();
+  });
+
+  it('builds the download URL with the full filter set', () => {
+    const originalLocation = window.location;
+    const setHref = vi.fn();
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: {
+        ...originalLocation,
+        set href(v: string) {
+          setHref(v);
+        },
+      },
+    });
+
+    downloadRawMeasurementsExport({
+      fromUtc: '2026-05-01T00:00:00.000Z',
+      toUtc: '2026-05-02T00:00:00.000Z',
+      deviceIds: ['device-1', 'device-2'],
+      rowCap: 50000,
+    });
+
+    expect(setHref).toHaveBeenCalledWith(
+      expect.stringContaining('/api/measurements/raw/export.xlsx?'),
+    );
+    const url = setHref.mock.calls[0][0] as string;
+    expect(url).toContain('from=2026-05-01T00%3A00%3A00.000Z');
+    expect(url).toContain('to=2026-05-02T00%3A00%3A00.000Z');
+    expect(url).toContain('deviceIds=device-1%2Cdevice-2');
+    expect(url).toContain('rowCap=50000');
+
+    Object.defineProperty(window, 'location', { writable: true, value: originalLocation });
+  });
+});

portal/frontend/src/api/measurements.ts

@@ -46,7 +46,8 @@ export async function fetchRawMeasurements(params: {
     params: {
       from: params.fromUtc,
       to: params.toUtc,
-      deviceIds: params.deviceIds && params.deviceIds.length > 0 ? params.deviceIds.join(',') : undefined,
+      deviceIds:
+        params.deviceIds && params.deviceIds.length > 0 ? params.deviceIds.join(',') : undefined,
       limit: params.limit,
       offset: params.offset,
     },
@@ -64,7 +65,8 @@ export function downloadRawMeasurementsExport(params: {
     from: params.fromUtc,
     to: params.toUtc,
   });
-  if (params.deviceIds && params.deviceIds.length > 0) q.set('deviceIds', params.deviceIds.join(','));
+  if (params.deviceIds && params.deviceIds.length > 0)
+    q.set('deviceIds', params.deviceIds.join(','));
   if (params.rowCap) q.set('rowCap', String(params.rowCap));
   window.location.href = `/api/measurements/raw/export.xlsx?${q.toString()}`;
 }

portal/frontend/src/api/rates.ts

@@ -77,7 +77,9 @@ export async function deleteMunicipality(id: number): Promise<void> {
 }
 
 export async function listTariffs(municipalityId: number): Promise<TariffSummary[]> {
-  const { data } = await api.get<TariffSummary[]>(`/rates/municipalities/${municipalityId}/tariffs`);
+  const { data } = await api.get<TariffSummary[]>(
+    `/rates/municipalities/${municipalityId}/tariffs`,
+  );
   return data;
 }
 
@@ -86,7 +88,10 @@ export async function getTariff(tariffId: number): Promise<TariffDetail> {
   return data;
 }
 
-export async function createTariff(municipalityId: number, payload: UpsertTariff): Promise<TariffDetail> {
+export async function createTariff(
+  municipalityId: number,
+  payload: UpsertTariff,
+): Promise<TariffDetail> {
   const { data } = await api.post<TariffDetail>(
     `/admin/rates/municipalities/${municipalityId}/tariffs`,
     payload,

portal/frontend/src/components/RequireAuth.tsx

@@ -9,7 +9,9 @@ export function RequireAuth({ children }: { children: ReactNode }) {
 
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
+      >
         <Spin size="large" />
       </div>
     );

portal/frontend/src/components/RequireRole.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { RequireRole } from './RequireRole';
+import * as useAuthModule from '../hooks/useAuth';
+
+function mockAuth(user: { roles: string[] } | null) {
+  vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
+    user: user as never,
+    loading: false,
+    login: vi.fn(),
+    logout: vi.fn(),
+    setUser: vi.fn(),
+  });
+}
+
+describe('<RequireRole>', () => {
+  it('renders children when the user has the required role', () => {
+    mockAuth({ roles: ['Admin'] });
+    render(
+      <RequireRole role="Admin">
+        <div>Admin-only content</div>
+      </RequireRole>,
+    );
+    expect(screen.getByText('Admin-only content')).toBeInTheDocument();
+  });
+
+  it('renders a 403 when the user is missing the required role', () => {
+    mockAuth({ roles: ['User'] });
+    render(
+      <RequireRole role="Admin">
+        <div>Admin-only content</div>
+      </RequireRole>,
+    );
+    expect(screen.queryByText('Admin-only content')).not.toBeInTheDocument();
+    expect(screen.getByText('403')).toBeInTheDocument();
+  });
+
+  it('renders a 403 when the user is null (unauthenticated edge)', () => {
+    mockAuth(null);
+    render(
+      <RequireRole role="Admin">
+        <div>Admin-only content</div>
+      </RequireRole>,
+    );
+    expect(screen.getByText('403')).toBeInTheDocument();
+  });
+});

portal/frontend/src/components/RequireRole.tsx

@@ -7,11 +7,7 @@ export function RequireRole({ role, children }: { role: string; children: ReactN
 
   if (!user || !user.roles.includes(role)) {
     return (
-      <Result
+      <Result status="403" title="403" subTitle="You do not have permission to view this page." />
-        status="403"
-        title="403"
-        subTitle="You do not have permission to view this page."
-      />
     );
   }
 

portal/frontend/src/components/customers/CustomerFormModal.tsx

@@ -1,6 +1,10 @@
 import { useEffect } from 'react';
 import { Modal, Form, Input, Switch, Alert, Typography } from 'antd';
-import type { CustomerListItem, CreateCustomerPayload, UpdateCustomerPayload } from '../../api/customers';
+import type {
+  CustomerListItem,
+  CreateCustomerPayload,
+  UpdateCustomerPayload,
+} from '../../api/customers';
 
 const { Text } = Typography;
 
@@ -68,7 +72,11 @@ export function CustomerFormModal({ open, mode, submitting, error, onClose, onSu
         >
           <Input disabled={isEdit} placeholder="ABC0001" maxLength={50} />
         </Form.Item>
-        <Form.Item name="name" label="Display name" rules={[{ required: true, message: 'Required' }]}>
+        <Form.Item
+          name="name"
+          label="Display name"
+          rules={[{ required: true, message: 'Required' }]}
+        >
           <Input />
         </Form.Item>
         {isEdit && (
@@ -78,8 +86,8 @@ export function CustomerFormModal({ open, mode, submitting, error, onClose, onSu
         )}
         {!isEdit && (
           <Text type="secondary" style={{ fontSize: 12 }}>
-            A push token will be generated and shown once. Set it as <Text code>FleetIngest__Token</Text> in
+            A push token will be generated and shown once. Set it as{' '}
-            the customer's environment.
+            <Text code>FleetIngest__Token</Text> in the customer's environment.
           </Text>
         )}
       </Form>

portal/frontend/src/components/customers/TokenShownOnceModal.tsx

@@ -53,16 +53,19 @@ export function TokenShownOnceModal({ open, customerCode, token, onClose }: Prop
       />
       <Paragraph>
         Set this as <Text code>FleetIngest__Token</Text> in the customer's <Text code>.env</Text>,
-        alongside <Text code>FleetIngest__Url</Text> and <Text code>FleetIngest__Enabled=true</Text>.
+        alongside <Text code>FleetIngest__Url</Text> and <Text code>FleetIngest__Enabled=true</Text>
+        .
       </Paragraph>
       <Paragraph type="secondary" style={{ fontSize: 12 }}>
         If this is a <strong>rotation</strong> (not the first issue), the old token continues to
-        work for 24h. Update the customer's <Text code>.env</Text> and restart their portal
+        work for 24h. Update the customer's <Text code>.env</Text> and restart their portal within
-        within that window to avoid dropped pushes.
+        that window to avoid dropped pushes.
       </Paragraph>
       <Space.Compact style={{ width: '100%' }}>
         <Input.TextArea value={token ?? ''} readOnly rows={2} style={{ fontFamily: 'monospace' }} />
-        <Button icon={<CopyOutlined />} onClick={copy}>Copy</Button>
+        <Button icon={<CopyOutlined />} onClick={copy}>
+          Copy
+        </Button>
       </Space.Compact>
       <Paragraph style={{ marginTop: 16 }}>
         <Button onClick={() => setConfirmed(true)} disabled={confirmed}>

portal/frontend/src/components/layout/AppLayout.tsx

@@ -1,9 +1,15 @@
 import { Layout, Menu, Button, Typography, Space, Tag, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import {
-  DashboardOutlined, SettingOutlined, LogoutOutlined,
+  DashboardOutlined,
-  LineChartOutlined, ApartmentOutlined, TeamOutlined, TableOutlined,
+  SettingOutlined,
-  UserOutlined, DownOutlined,
+  LogoutOutlined,
+  LineChartOutlined,
+  ApartmentOutlined,
+  TeamOutlined,
+  TableOutlined,
+  UserOutlined,
+  DownOutlined,
 } from '@ant-design/icons';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
@@ -61,13 +67,22 @@ export function AppLayout() {
             <img
               src={branding.logoUrl}
               alt=""
-              style={{ maxHeight: 36, background: 'rgba(255,255,255,0.1)', padding: 2, borderRadius: 2 }}
+              style={{
+                maxHeight: 36,
+                background: 'rgba(255,255,255,0.1)',
+                padding: 2,
+                borderRadius: 2,
+              }}
             />
           )}
           <Text strong style={{ color: '#fff', fontSize: 18 }}>
             {branding.applicationName}
           </Text>
-          {adminMode && <Tag color="gold" style={{ marginLeft: 8 }}>FLEET ADMIN</Tag>}
+          {adminMode && (
+            <Tag color="gold" style={{ marginLeft: 8 }}>
+              FLEET ADMIN
+            </Tag>
+          )}
         </Space>
         <UserMenu
           displayName={user?.displayName ?? user?.email ?? ''}
@@ -104,7 +119,9 @@ export function AppLayout() {
 }
 
 function UserMenu({
-  displayName, onProfile, onLogout,
+  displayName,
+  onProfile,
+  onLogout,
 }: {
   displayName: string;
   onProfile: () => void;

portal/frontend/src/components/settings/BrandingForm.tsx

@@ -1,5 +1,17 @@
 import { useEffect, useState } from 'react';
-import { Form, Input, Button, Row, Col, Card, Upload, ColorPicker, Space, message, Typography } from 'antd';
+import {
+  Form,
+  Input,
+  Button,
+  Row,
+  Col,
+  Card,
+  Upload,
+  ColorPicker,
+  Space,
+  message,
+  Typography,
+} from 'antd';
 import type { UploadFile } from 'antd/es/upload/interface';
 import { UploadOutlined, SaveOutlined } from '@ant-design/icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -26,7 +38,10 @@ export function BrandingForm() {
   const [form] = Form.useForm<FormShape>();
   const [preview, setPreview] = useState<Branding | null>(null);
 
-  const { data: branding, isLoading } = useQuery({ queryKey: ['branding'], queryFn: fetchBranding });
+  const { data: branding, isLoading } = useQuery({
+    queryKey: ['branding'],
+    queryFn: fetchBranding,
+  });
 
   useEffect(() => {
     if (!branding) return;
@@ -75,7 +90,8 @@ export function BrandingForm() {
 
   const beforeUpload = (file: UploadFile) => {
     if (file instanceof File) uploadMut.mutate(file);
-    else if ('originFileObj' in file && file.originFileObj) uploadMut.mutate(file.originFileObj as File);
+    else if ('originFileObj' in file && file.originFileObj)
+      uploadMut.mutate(file.originFileObj as File);
     return false;
   };
 
@@ -103,7 +119,13 @@ export function BrandingForm() {
                 <img
                   src={preview.logoUrl}
                   alt="Current logo"
-                  style={{ maxHeight: 64, maxWidth: 200, background: '#f5f5f5', padding: 8, borderRadius: 4 }}
+                  style={{
+                    maxHeight: 64,
+                    maxWidth: 200,
+                    background: '#f5f5f5',
+                    padding: 8,
+                    borderRadius: 4,
+                  }}
                 />
               )}
               <Upload
@@ -143,7 +165,12 @@ export function BrandingForm() {
           </Form.Item>
 
           <Form.Item>
-            <Button type="primary" htmlType="submit" loading={saveMut.isPending} icon={<SaveOutlined />}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={saveMut.isPending}
+              icon={<SaveOutlined />}
+            >
               Save branding
             </Button>
           </Form.Item>
@@ -164,11 +191,22 @@ export function BrandingForm() {
             }}
           >
             {preview?.logoUrl && (
-              <img src={preview.logoUrl} alt="" style={{ maxHeight: 28, background: '#fff', padding: 2, borderRadius: 2 }} />
+              <img
+                src={preview.logoUrl}
+                alt=""
+                style={{ maxHeight: 28, background: '#fff', padding: 2, borderRadius: 2 }}
+              />
             )}
             <strong>{preview?.applicationName || 'Application name'}</strong>
           </div>
-          <div style={{ background: preview?.secondaryColor ?? '#374151', color: '#fff', padding: 8, marginTop: 4 }}>
+          <div
+            style={{
+              background: preview?.secondaryColor ?? '#374151',
+              color: '#fff',
+              padding: 8,
+              marginTop: 4,
+            }}
+          >
             Sidebar / secondary surface
           </div>
           <Button type="primary" style={{ marginTop: 12 }}>

portal/frontend/src/components/settings/ConfigOverviewCard.tsx

@@ -25,7 +25,13 @@ export function ConfigOverviewCard() {
 
       {data && (
         <>
-          <Descriptions title="Application" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+          <Descriptions
+            title="Application"
+            column={2}
+            size="small"
+            bordered
+            style={{ marginBottom: 16 }}
+          >
             <Descriptions.Item label="Name">{data.application.name}</Descriptions.Item>
             <Descriptions.Item label="Environment">
               <Tag color={data.application.environment === 'Production' ? 'red' : 'blue'}>
@@ -40,7 +46,13 @@ export function ConfigOverviewCard() {
             <Descriptions.Item label="Public URL">{data.application.publicUrl}</Descriptions.Item>
           </Descriptions>
 
-          <Descriptions title="Database" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+          <Descriptions
+            title="Database"
+            column={2}
+            size="small"
+            bordered
+            style={{ marginBottom: 16 }}
+          >
             <Descriptions.Item label="Provider">{data.database.provider}</Descriptions.Item>
             <Descriptions.Item label="Resolved via">
               <Text code>{data.database.resolvedVia}</Text>
@@ -49,62 +61,130 @@ export function ConfigOverviewCard() {
             <Descriptions.Item label="Port">{data.database.port}</Descriptions.Item>
             <Descriptions.Item label="Database">{data.database.database}</Descriptions.Item>
             <Descriptions.Item label="Migrate on startup">
-              {data.database.migrateOnStartup ? <Tag color="green">Yes</Tag> : <Tag color="red">No</Tag>}
+              {data.database.migrateOnStartup ? (
+                <Tag color="green">Yes</Tag>
+              ) : (
+                <Tag color="red">No</Tag>
+              )}
             </Descriptions.Item>
             <Descriptions.Item label="Auto-provision local Timescale" span={2}>
-              {data.database.autoProvisionLocalTimescaleDb ? <Tag>Yes</Tag> : <Tag color="green">No</Tag>}
+              {data.database.autoProvisionLocalTimescaleDb ? (
+                <Tag>Yes</Tag>
+              ) : (
+                <Tag color="green">No</Tag>
+              )}
             </Descriptions.Item>
           </Descriptions>
 
-          <Descriptions title="Grafana" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+          <Descriptions
-            <Descriptions.Item label="Base URL" span={2}>{data.grafana.baseUrl}</Descriptions.Item>
+            title="Grafana"
-            <Descriptions.Item label="Internal URL" span={2}>{data.grafana.internalUrl}</Descriptions.Item>
+            column={2}
-            <Descriptions.Item label="Embed path prefix">{data.grafana.embedPathPrefix}</Descriptions.Item>
+            size="small"
+            bordered
+            style={{ marginBottom: 16 }}
+          >
+            <Descriptions.Item label="Base URL" span={2}>
+              {data.grafana.baseUrl}
+            </Descriptions.Item>
+            <Descriptions.Item label="Internal URL" span={2}>
+              {data.grafana.internalUrl}
+            </Descriptions.Item>
+            <Descriptions.Item label="Embed path prefix">
+              {data.grafana.embedPathPrefix}
+            </Descriptions.Item>
             <Descriptions.Item label="Embed mode">{data.grafana.embedMode}</Descriptions.Item>
             <Descriptions.Item label="Auth mode">{data.grafana.authMode}</Descriptions.Item>
-            <Descriptions.Item label="Default dashboard UID">{data.grafana.defaultDashboardUid || '(unset)'}</Descriptions.Item>
+            <Descriptions.Item label="Default dashboard UID">
-            <Descriptions.Item label="Dashboards configured" span={2}>{data.grafana.dashboardCount}</Descriptions.Item>
+              {data.grafana.defaultDashboardUid || '(unset)'}
-          </Descriptions>
+            </Descriptions.Item>
-
+            <Descriptions.Item label="Dashboards configured" span={2}>
-          <Descriptions title="Monitoring" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+              {data.grafana.dashboardCount}
-            <Descriptions.Item label="Chunk time interval">{data.monitoring.chunkTimeInterval}</Descriptions.Item>
-            <Descriptions.Item label="Hourly aggregates">
-              {data.monitoring.enableHourlyAggregates ? <Tag color="orange">Flag set (not implemented)</Tag> : 'No'}
             </Descriptions.Item>
           </Descriptions>
 
-          <Descriptions title="Authentication" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+          <Descriptions
-            <Descriptions.Item label="Cookie name">{data.authentication.cookieName}</Descriptions.Item>
+            title="Monitoring"
-            <Descriptions.Item label="Require confirmed email">{data.authentication.requireConfirmedEmail ? 'Yes' : 'No'}</Descriptions.Item>
+            column={2}
-            <Descriptions.Item label="Default admin email" span={2}>{data.authentication.defaultAdminEmail}</Descriptions.Item>
+            size="small"
+            bordered
+            style={{ marginBottom: 16 }}
+          >
+            <Descriptions.Item label="Chunk time interval">
+              {data.monitoring.chunkTimeInterval}
+            </Descriptions.Item>
+            <Descriptions.Item label="Hourly aggregates">
+              {data.monitoring.enableHourlyAggregates ? (
+                <Tag color="orange">Flag set (not implemented)</Tag>
+              ) : (
+                'No'
+              )}
+            </Descriptions.Item>
+          </Descriptions>
+
+          <Descriptions
+            title="Authentication"
+            column={2}
+            size="small"
+            bordered
+            style={{ marginBottom: 16 }}
+          >
+            <Descriptions.Item label="Cookie name">
+              {data.authentication.cookieName}
+            </Descriptions.Item>
+            <Descriptions.Item label="Require confirmed email">
+              {data.authentication.requireConfirmedEmail ? 'Yes' : 'No'}
+            </Descriptions.Item>
+            <Descriptions.Item label="Default admin email" span={2}>
+              {data.authentication.defaultAdminEmail}
+            </Descriptions.Item>
           </Descriptions>
 
           <Descriptions title="Build" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            <Descriptions.Item label="Assembly version">{data.build.assemblyVersion}</Descriptions.Item>
+            <Descriptions.Item label="Assembly version">
+              {data.build.assemblyVersion}
+            </Descriptions.Item>
             <Descriptions.Item label=".NET runtime">{data.build.framework}</Descriptions.Item>
-            <Descriptions.Item label="Started" span={2}>{new Date(data.build.startedAtUtc).toLocaleString()}</Descriptions.Item>
+            <Descriptions.Item label="Started" span={2}>
+              {new Date(data.build.startedAtUtc).toLocaleString()}
+            </Descriptions.Item>
           </Descriptions>
 
           {data.fleetIngest && (
             <>
-              <Descriptions title="Fleet push (Client → Admin)" column={2} size="small" bordered style={{ marginBottom: 16 }}>
+              <Descriptions
+                title="Fleet push (Client → Admin)"
+                column={2}
+                size="small"
+                bordered
+                style={{ marginBottom: 16 }}
+              >
                 <Descriptions.Item label="Enabled">
-                  {data.fleetIngest.enabled
+                  {data.fleetIngest.enabled ? (
-                    ? <Tag color="green">Yes</Tag>
+                    <Tag color="green">Yes</Tag>
-                    : <Tag>No (push service not running)</Tag>}
+                  ) : (
+                    <Tag>No (push service not running)</Tag>
+                  )}
                 </Descriptions.Item>
                 <Descriptions.Item label="Token configured">
-                  {data.fleetIngest.tokenConfigured
+                  {data.fleetIngest.tokenConfigured ? (
-                    ? <Tag color="green">Yes (value hidden)</Tag>
+                    <Tag color="green">Yes (value hidden)</Tag>
-                    : <Tag color="red">No</Tag>}
+                  ) : (
+                    <Tag color="red">No</Tag>
+                  )}
                 </Descriptions.Item>
                 <Descriptions.Item label="Url" span={2}>
-                  {data.fleetIngest.url
+                  {data.fleetIngest.url ? (
-                    ? <Text code>{data.fleetIngest.url}</Text>
+                    <Text code>{data.fleetIngest.url}</Text>
-                    : <Text type="secondary">(unset)</Text>}
+                  ) : (
+                    <Text type="secondary">(unset)</Text>
+                  )}
+                </Descriptions.Item>
+                <Descriptions.Item label="Interval">
+                  {data.fleetIngest.intervalSeconds}s
+                </Descriptions.Item>
+                <Descriptions.Item label="Batch size">
+                  {data.fleetIngest.batchSize.toLocaleString()} rows
                 </Descriptions.Item>
-                <Descriptions.Item label="Interval">{data.fleetIngest.intervalSeconds}s</Descriptions.Item>
-                <Descriptions.Item label="Batch size">{data.fleetIngest.batchSize.toLocaleString()} rows</Descriptions.Item>
                 <Descriptions.Item label="Batch max bytes" span={2}>
                   {data.fleetIngest.batchMaxBytes.toLocaleString()} bytes
                 </Descriptions.Item>
@@ -130,23 +210,44 @@ export function ConfigOverviewCard() {
 }
 
 const pushStateColumns: ColumnsType<FleetPushStateRow> = [
-  { title: 'Resource', dataIndex: 'resourceType', key: 'rt', render: (v: string) => <Text strong>{v}</Text> },
   {
-    title: 'Last cursor', dataIndex: 'lastCursor', key: 'lc',
+    title: 'Resource',
-    render: (v: string | null) => v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>
+    dataIndex: 'resourceType',
+    key: 'rt',
+    render: (v: string) => <Text strong>{v}</Text>,
   },
   {
-    title: 'Last sync', dataIndex: 'lastSyncedAt', key: 'ls',
+    title: 'Last cursor',
-    render: (v: string | null) => v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>
+    dataIndex: 'lastCursor',
+    key: 'lc',
+    render: (v: string | null) =>
+      v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>,
   },
   {
-    title: 'Failures', dataIndex: 'consecutiveFailures', key: 'cf',
+    title: 'Last sync',
-    render: (n: number) => n === 0
+    dataIndex: 'lastSyncedAt',
-      ? <Tag color="green">0</Tag>
+    key: 'ls',
-      : <Tag color={n > 5 ? 'red' : 'orange'}>{n}</Tag>
+    render: (v: string | null) =>
+      v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>,
   },
   {
-    title: 'Last error', dataIndex: 'lastError', key: 'le',
+    title: 'Failures',
-    render: (v: string | null) => v ? <Text type="danger" style={{ fontSize: 12 }}>{v}</Text> : <Text type="secondary">—</Text>
+    dataIndex: 'consecutiveFailures',
+    key: 'cf',
+    render: (n: number) =>
+      n === 0 ? <Tag color="green">0</Tag> : <Tag color={n > 5 ? 'red' : 'orange'}>{n}</Tag>,
+  },
+  {
+    title: 'Last error',
+    dataIndex: 'lastError',
+    key: 'le',
+    render: (v: string | null) =>
+      v ? (
+        <Text type="danger" style={{ fontSize: 12 }}>
+          {v}
+        </Text>
+      ) : (
+        <Text type="secondary">—</Text>
+      ),
   },
 ];

portal/frontend/src/components/settings/GrafanaInfoCard.tsx

@@ -11,7 +11,10 @@ interface DashboardRow extends GrafanaDashboard {
 }
 
 export function GrafanaInfoCard() {
-  const { data, isLoading } = useQuery({ queryKey: ['grafana-config'], queryFn: fetchGrafanaConfig });
+  const { data, isLoading } = useQuery({
+    queryKey: ['grafana-config'],
+    queryFn: fetchGrafanaConfig,
+  });
 
   const baseUrl = data?.baseUrl?.replace(/\/$/, '') ?? '';
   const rows: DashboardRow[] = (data?.dashboards ?? []).map((d) => ({
@@ -38,7 +41,9 @@ export function GrafanaInfoCard() {
       key: 'url',
       render: (url: string) => (
         <Space>
-          <Text code style={{ fontSize: 11 }}>{url}</Text>
+          <Text code style={{ fontSize: 11 }}>
+            {url}
+          </Text>
           <Button size="small" icon={<CopyOutlined />} onClick={() => copy(url)} />
         </Space>
       ),
@@ -52,7 +57,11 @@ export function GrafanaInfoCard() {
           <Space>
             <Text code>{data?.baseUrl}</Text>
             {data?.baseUrl && (
-              <Button size="small" icon={<LinkOutlined />} onClick={() => window.open(data.baseUrl, '_blank')}>
+              <Button
+                size="small"
+                icon={<LinkOutlined />}
+                onClick={() => window.open(data.baseUrl, '_blank')}
+              >
                 Open
               </Button>
             )}
@@ -61,12 +70,14 @@ export function GrafanaInfoCard() {
         <Descriptions.Item label="Default dashboard UID">
           <Text code>{data?.defaultDashboardUid || '(unset)'}</Text>
         </Descriptions.Item>
-        <Descriptions.Item label="Dashboards configured">{data?.dashboards.length ?? 0}</Descriptions.Item>
+        <Descriptions.Item label="Dashboards configured">
+          {data?.dashboards.length ?? 0}
+        </Descriptions.Item>
       </Descriptions>
 
       <Paragraph type="secondary" style={{ fontSize: 12 }}>
-        Add dashboards by dropping JSON into <Text code>grafana/dashboards/</Text> and adding a matching entry
+        Add dashboards by dropping JSON into <Text code>grafana/dashboards/</Text> and adding a
-        to <Text code>Grafana.Dashboards</Text> in configuration.
+        matching entry to <Text code>Grafana.Dashboards</Text> in configuration.
       </Paragraph>
 
       <Table<DashboardRow>

portal/frontend/src/components/settings/rates/MunicipalityList.tsx

@@ -1,14 +1,33 @@
 import { useState } from 'react';
 import {
-  Table, Button, Space, Modal, Input, Switch, Tag, Popconfirm, Form, Typography, message, Card,
+  Table,
+  Button,
+  Space,
+  Modal,
+  Input,
+  Switch,
+  Tag,
+  Popconfirm,
+  Form,
+  Typography,
+  message,
+  Card,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-  listMunicipalities, createMunicipality, updateMunicipality, deleteMunicipality,
+  listMunicipalities,
-  listTariffs, getTariff, deleteTariff,
+  createMunicipality,
-  type Municipality, type TariffSummary, type UpsertMunicipality, type TariffDetail,
+  updateMunicipality,
+  deleteMunicipality,
+  listTariffs,
+  getTariff,
+  deleteTariff,
+  type Municipality,
+  type TariffSummary,
+  type UpsertMunicipality,
+  type TariffDetail,
 } from '../../../api/rates';
 import { TariffDrawer } from './TariffDrawer';
 
@@ -41,17 +60,29 @@ export function MunicipalityList() {
 
   const createMut = useMutation({
     mutationFn: (payload: UpsertMunicipality) => createMunicipality(payload),
-    onSuccess: () => { message.success('Created'); closeMuni(); qc.invalidateQueries({ queryKey: ['municipalities'] }); },
+    onSuccess: () => {
+      message.success('Created');
+      closeMuni();
+      qc.invalidateQueries({ queryKey: ['municipalities'] });
+    },
     onError: () => message.error('Create failed'),
   });
   const updateMut = useMutation({
-    mutationFn: ({ id, payload }: { id: number; payload: UpsertMunicipality }) => updateMunicipality(id, payload),
+    mutationFn: ({ id, payload }: { id: number; payload: UpsertMunicipality }) =>
-    onSuccess: () => { message.success('Updated'); closeMuni(); qc.invalidateQueries({ queryKey: ['municipalities'] }); },
+      updateMunicipality(id, payload),
+    onSuccess: () => {
+      message.success('Updated');
+      closeMuni();
+      qc.invalidateQueries({ queryKey: ['municipalities'] });
+    },
     onError: () => message.error('Update failed'),
   });
   const deleteMut = useMutation({
     mutationFn: (id: number) => deleteMunicipality(id),
-    onSuccess: () => { message.success('Deleted'); qc.invalidateQueries({ queryKey: ['municipalities'] }); },
+    onSuccess: () => {
+      message.success('Deleted');
+      qc.invalidateQueries({ queryKey: ['municipalities'] });
+    },
     onError: () => message.error('Delete failed (any tariffs are removed with it)'),
   });
   const deleteTariffMut = useMutation({
@@ -93,27 +124,37 @@ export function MunicipalityList() {
 
   const columns: ColumnsType<Municipality> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'Time zone', dataIndex: 'timeZoneId', key: 'tz', render: (v: string | null) => v ?? <Text type="secondary">UTC</Text> },
+    {
+      title: 'Time zone',
+      dataIndex: 'timeZoneId',
+      key: 'tz',
+      render: (v: string | null) => v ?? <Text type="secondary">UTC</Text>,
+    },
     { title: 'Tariffs', dataIndex: 'tariffCount', key: 'count' },
     {
       title: 'Active',
       dataIndex: 'isActive',
       key: 'isActive',
-      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>),
+      render: (v: boolean) =>
+        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Actions',
       key: 'actions',
       render: (_, m) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => openEditMuni(m)}>Edit</Button>
+          <Button size="small" icon={<EditOutlined />} onClick={() => openEditMuni(m)}>
+            Edit
+          </Button>
           <Popconfirm
             title={`Delete ${m.name}? All its tariffs will be removed.`}
             okText="Delete"
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteMut.mutate(m.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -123,8 +164,12 @@ export function MunicipalityList() {
   return (
     <>
       <Space style={{ marginBottom: 16, justifyContent: 'space-between', width: '100%' }}>
-        <Text type="secondary">Configure municipalities and their tariffs. Expand a row to see tariffs.</Text>
+        <Text type="secondary">
-        <Button type="primary" icon={<PlusOutlined />} onClick={openCreateMuni}>New municipality</Button>
+          Configure municipalities and their tariffs. Expand a row to see tariffs.
+        </Text>
+        <Button type="primary" icon={<PlusOutlined />} onClick={openCreateMuni}>
+          New municipality
+        </Button>
       </Space>
 
       <Table<Municipality>
@@ -154,7 +199,12 @@ export function MunicipalityList() {
         onOk={() => muniForm.submit()}
         confirmLoading={createMut.isPending || updateMut.isPending}
       >
-        <Form<MuniFormShape> form={muniForm} layout="vertical" onFinish={onMuniSubmit} requiredMark={false}>
+        <Form<MuniFormShape>
+          form={muniForm}
+          layout="vertical"
+          onFinish={onMuniSubmit}
+          requiredMark={false}
+        >
           <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Required' }]}>
             <Input />
           </Form.Item>
@@ -198,9 +248,23 @@ function TariffSubTable({
 
   const columns: ColumnsType<TariffSummary> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'Effective', key: 'effective', render: (_, t) => `${t.effectiveFrom}${t.effectiveTo ? ' → ' + t.effectiveTo : ' →'}` },
+    {
-    { title: 'Default rate', dataIndex: 'defaultRatePerKwh', key: 'rate', render: (v: number) => v.toFixed(4) },
+      title: 'Effective',
-    { title: 'Fixed', dataIndex: 'fixedMonthlyCharge', key: 'fixed', render: (v: number) => v.toFixed(2) },
+      key: 'effective',
+      render: (_, t) => `${t.effectiveFrom}${t.effectiveTo ? ' → ' + t.effectiveTo : ' →'}`,
+    },
+    {
+      title: 'Default rate',
+      dataIndex: 'defaultRatePerKwh',
+      key: 'rate',
+      render: (v: number) => v.toFixed(4),
+    },
+    {
+      title: 'Fixed',
+      dataIndex: 'fixedMonthlyCharge',
+      key: 'fixed',
+      render: (v: number) => v.toFixed(2),
+    },
     { title: 'VAT %', dataIndex: 'vatPercentage', key: 'vat', render: (v: number) => v.toFixed(2) },
     { title: 'Periods', dataIndex: 'periodCount', key: 'periods' },
     {
@@ -213,14 +277,18 @@ function TariffSubTable({
       key: 'actions',
       render: (_, t) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(t.id)}>Edit</Button>
+          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(t.id)}>
+            Edit
+          </Button>
           <Popconfirm
             title={`Delete tariff "${t.name}"?`}
             okText="Delete"
             okButtonProps={{ danger: true }}
             onConfirm={() => onDelete(t.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -230,7 +298,9 @@ function TariffSubTable({
   return (
     <Card size="small" style={{ background: '#fafafa' }}>
       <Space style={{ marginBottom: 8, justifyContent: 'flex-end', width: '100%' }}>
-        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onCreate}>New tariff</Button>
+        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onCreate}>
+          New tariff
+        </Button>
       </Space>
       <Table<TariffSummary>
         rowKey="id"

portal/frontend/src/components/settings/rates/PeriodEditor.tsx

@@ -68,7 +68,10 @@ export function PeriodEditor({ value, onChange }: Props) {
               {DAY_OPTIONS.map((d, dIdx) => {
                 const active = (p.daysOfWeek & d.value) !== 0;
                 return (
-                  <Tooltip key={dIdx} title={['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][dIdx]}>
+                  <Tooltip
+                    key={dIdx}
+                    title={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][dIdx]}
+                  >
                     <Button
                       size="small"
                       type={active ? 'primary' : 'default'}

portal/frontend/src/components/settings/rates/TariffDrawer.tsx

@@ -1,17 +1,33 @@
 import { useEffect, useState } from 'react';
 import {
-  Drawer, Form, Input, InputNumber, Switch, DatePicker, Row, Col, Button, Space, Alert, Typography,
+  Drawer,
+  Form,
+  Input,
+  InputNumber,
+  Switch,
+  DatePicker,
+  Row,
+  Col,
+  Button,
+  Space,
+  Alert,
+  Typography,
 } from 'antd';
 import dayjs from 'dayjs';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { createTariff, updateTariff, type TariffDetail, type TariffPeriod, type UpsertTariff } from '../../../api/rates';
+import {
+  createTariff,
+  updateTariff,
+  type TariffDetail,
+  type TariffPeriod,
+  type UpsertTariff,
+} from '../../../api/rates';
+import { extractApiError } from '../../../api/client';
 import { PeriodEditor } from './PeriodEditor';
 
 const { Title } = Typography;
 
-type Mode =
+type Mode = { kind: 'create'; municipalityId: number } | { kind: 'edit'; tariff: TariffDetail };
-  | { kind: 'create'; municipalityId: number }
-  | { kind: 'edit'; tariff: TariffDetail };
 
 interface Props {
   open: boolean;
@@ -74,7 +90,7 @@ export function TariffDrawer({ open, mode, onClose }: Props) {
       qc.invalidateQueries({ queryKey: ['municipalities'] });
       onClose();
     },
-    onError: (err: unknown) => setError(extractError(err)),
+    onError: (err: unknown) => setError(extractApiError(err, 'Save failed.')),
   });
 
   const handleSubmit = (values: FormShape) => {
@@ -111,7 +127,11 @@ export function TariffDrawer({ open, mode, onClose }: Props) {
       <Form<FormShape> form={form} layout="vertical" onFinish={handleSubmit} requiredMark={false}>
         <Row gutter={16}>
           <Col span={12}>
-            <Form.Item name="name" label="Tariff name" rules={[{ required: true, message: 'Required' }]}>
+            <Form.Item
+              name="name"
+              label="Tariff name"
+              rules={[{ required: true, message: 'Required' }]}
+            >
               <Input />
             </Form.Item>
           </Col>
@@ -165,17 +185,11 @@ export function TariffDrawer({ open, mode, onClose }: Props) {
           </Col>
         </Row>
 
-        <Title level={5} style={{ marginTop: 8 }}>Time-of-use periods</Title>
+        <Title level={5} style={{ marginTop: 8 }}>
+          Time-of-use periods
+        </Title>
         <PeriodEditor value={periods} onChange={setPeriods} />
       </Form>
     </Drawer>
   );
 }
-
-function extractError(err: unknown): string {
-  if (typeof err === 'object' && err !== null && 'response' in err) {
-    const data = (err as { response?: { data?: { error?: string } } }).response?.data;
-    if (data?.error) return data.error;
-  }
-  return 'Save failed.';
-}

portal/frontend/src/components/users/CustomerAccessModal.tsx

@@ -111,7 +111,11 @@ export function CustomerAccessModal({ open, user, onClose }: Props) {
                   onChange={() => toggle(c.id)}
                 >
                   <Text strong>{c.code}</Text> <Text type="secondary">— {c.name}</Text>
-                  {!c.isActive && <Tag color="red" style={{ marginLeft: 8 }}>Disabled</Tag>}
+                  {!c.isActive && (
+                    <Tag color="red" style={{ marginLeft: 8 }}>
+                      Disabled
+                    </Tag>
+                  )}
                 </Checkbox>
               ))}
             </Checkbox.Group>

portal/frontend/src/components/users/UserFormDrawer.tsx

@@ -4,9 +4,7 @@ import type { UserListItem, CreateUserPayload, UpdateUserPayload } from '../../a
 
 const { Text } = Typography;
 
-type Mode =
+type Mode = { kind: 'create' } | { kind: 'edit'; user: UserListItem };
-  | { kind: 'create' }
-  | { kind: 'edit'; user: UserListItem };
 
 interface Props {
   open: boolean;
@@ -99,7 +97,9 @@ export function UserFormDrawer({ open, mode, submitting, error, onClose, onSubmi
           <Form.Item
             name="password"
             label="Password"
-            rules={[{ required: true, min: 8, message: 'Min 8 characters with upper, lower, and digit' }]}
+            rules={[
+              { required: true, min: 8, message: 'Min 8 characters with upper, lower, and digit' },
+            ]}
           >
             <Input.Password autoComplete="new-password" />
           </Form.Item>
@@ -109,15 +109,22 @@ export function UserFormDrawer({ open, mode, submitting, error, onClose, onSubmi
             <Space direction="vertical">
               <Radio value="none">
                 <Text>None</Text>
-                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>Regular user — Dashboard + Dashboards only.</Text>
+                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
+                  Regular user — Dashboard + Dashboards only.
+                </Text>
               </Radio>
               <Radio value="admin">
                 <Text>Administrator</Text>
-                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>Full access to all customers, settings, user mgmt.</Text>
+                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
+                  Full access to all customers, settings, user mgmt.
+                </Text>
               </Radio>
               <Radio value="restricted">
                 <Text>Restricted admin (fleet-scoped)</Text>
-                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>Same pages as Admin but Postgres RLS limits which customers they see. Grant per-customer access from the Users page.</Text>
+                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
+                  Same pages as Admin but Postgres RLS limits which customers they see. Grant
+                  per-customer access from the Users page.
+                </Text>
               </Radio>
             </Space>
           </Radio.Group>

portal/frontend/src/pages/AdminCustomerDetailPage.tsx

@@ -1,21 +1,44 @@
 import { useState } from 'react';
 import {
-  Card, Descriptions, Tabs, Table, Tag, Typography, Button, Space, Spin, Result, Tooltip,
+  Card,
-  DatePicker, Statistic, Row, Col, Alert,
+  Descriptions,
+  Tabs,
+  Table,
+  Tag,
+  Typography,
+  Button,
+  Space,
+  Spin,
+  Result,
+  Tooltip,
+  DatePicker,
+  Statistic,
+  Row,
+  Col,
+  Alert,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import {
-  ArrowLeftOutlined, LineChartOutlined, ThunderboltOutlined, DollarOutlined, DownloadOutlined,
+  ArrowLeftOutlined,
+  LineChartOutlined,
+  ThunderboltOutlined,
+  DollarOutlined,
+  DownloadOutlined,
 } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 import dayjs, { type Dayjs } from 'dayjs';
 import {
-  fetchFleetCustomerDetail, fetchFleetCustomerCost,
+  fetchFleetCustomerDetail,
-  type FleetSite, type FleetDevice,
+  fetchFleetCustomerCost,
-  type FleetRecentMeasurement, type FleetIngestEvent,
+  type FleetSite,
-  type FleetTariffView, type FleetTariffPeriodView,
+  type FleetDevice,
-  type FleetCostDay, type FleetCostDeviceRow,
+  type FleetRecentMeasurement,
+  type FleetIngestEvent,
+  type FleetTariffView,
+  type FleetTariffPeriodView,
+  type FleetCostDay,
+  type FleetCostDeviceRow,
 } from '../api/fleet';
 import { downloadFleetCustomerCostXlsx } from '../api/dashboard';
 import { fetchGrafanaConfig } from '../api/grafana';
@@ -47,47 +70,122 @@ export function AdminCustomerDetailPage() {
     return `${base}/d/${encodeURIComponent(CUSTOMER_DRILLDOWN_UID)}?orgId=1&kiosk=tv&theme=light&var-customer=${encodeURIComponent(data.id)}`;
   })();
 
-  if (isLoading) return <div style={{ textAlign: 'center', padding: 64 }}><Spin size="large" /></div>;
+  if (isLoading)
+    return (
+      <div style={{ textAlign: 'center', padding: 64 }}>
+        <Spin size="large" />
+      </div>
+    );
   if (error || !data) {
-    return <Result status="404" title="Customer not found" extra={<Button onClick={() => navigate('/admin/customers')}>Back</Button>} />;
+    return (
+      <Result
+        status="404"
+        title="Customer not found"
+        extra={<Button onClick={() => navigate('/admin/customers')}>Back</Button>}
+      />
+    );
   }
 
   const siteCols: ColumnsType<FleetSite> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'Address', dataIndex: 'address', key: 'addr', render: v => v ?? <Text type="secondary">—</Text> },
+    {
-    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'addr',
+      render: (v) => v ?? <Text type="secondary">—</Text>,
+    },
+    {
+      title: 'Active',
+      dataIndex: 'isActive',
+      key: 'a',
+      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag>),
+    },
   ];
 
   const deviceCols: ColumnsType<FleetDevice> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'External ID', dataIndex: 'externalId', key: 'ext', render: v => <Text code>{v}</Text> },
+    {
-    { title: 'Description', dataIndex: 'description', key: 'desc', render: v => v ?? <Text type="secondary">—</Text> },
+      title: 'External ID',
-    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
+      dataIndex: 'externalId',
+      key: 'ext',
+      render: (v) => <Text code>{v}</Text>,
+    },
+    {
+      title: 'Description',
+      dataIndex: 'description',
+      key: 'desc',
+      render: (v) => v ?? <Text type="secondary">—</Text>,
+    },
+    {
+      title: 'Active',
+      dataIndex: 'isActive',
+      key: 'a',
+      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag>),
+    },
   ];
 
   const measCols: ColumnsType<FleetRecentMeasurement> = [
-    { title: 'Time (UTC)', dataIndex: 'time', key: 't', render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19) },
+    {
+      title: 'Time (UTC)',
+      dataIndex: 'time',
+      key: 't',
+      render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19),
+    },
     { title: 'Device', dataIndex: 'deviceName', key: 'd' },
-    { title: 'Active power (kW)', dataIndex: 'activePowerKw', key: 'p', render: (v: number) => v.toFixed(3) },
+    {
-    { title: 'kWh imported (cumulative)', dataIndex: 'energyImportedKwh', key: 'e', render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
+      title: 'Active power (kW)',
+      dataIndex: 'activePowerKw',
+      key: 'p',
+      render: (v: number) => v.toFixed(3),
+    },
+    {
+      title: 'kWh imported (cumulative)',
+      dataIndex: 'energyImportedKwh',
+      key: 'e',
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
+    },
   ];
 
   const eventCols: ColumnsType<FleetIngestEvent> = [
-    { title: 'Received (UTC)', dataIndex: 'receivedAt', key: 'r', render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19) },
+    {
+      title: 'Received (UTC)',
+      dataIndex: 'receivedAt',
+      key: 'r',
+      render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19),
+    },
     { title: 'Type', dataIndex: 'batchType', key: 'bt' },
     { title: 'Accepted', dataIndex: 'rowsAccepted', key: 'a' },
-    { title: 'Rejected', dataIndex: 'rowsRejected', key: 'rj', render: (v: number) => v > 0 ? <Tag color="orange">{v}</Tag> : v },
+    {
+      title: 'Rejected',
+      dataIndex: 'rowsRejected',
+      key: 'rj',
+      render: (v: number) => (v > 0 ? <Tag color="orange">{v}</Tag> : v),
+    },
     { title: 'Bytes', dataIndex: 'batchBytes', key: 'b' },
-    { title: 'Time spread', dataIndex: 'timeSpread', key: 'ts', render: (v: string | null) => v ?? '—' },
+    {
-    { title: 'Error', dataIndex: 'error', key: 'e', render: (v: string | null) => v ? <Tag color="red">{v}</Tag> : '—' },
+      title: 'Time spread',
+      dataIndex: 'timeSpread',
+      key: 'ts',
+      render: (v: string | null) => v ?? '—',
+    },
+    {
+      title: 'Error',
+      dataIndex: 'error',
+      key: 'e',
+      render: (v: string | null) => (v ? <Tag color="red">{v}</Tag> : '—'),
+    },
   ];
 
   return (
     <Space direction="vertical" size="middle" style={{ width: '100%' }}>
       <Space style={{ width: '100%', justifyContent: 'space-between' }}>
         <Space>
-          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/customers')}>Customers</Button>
+          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/customers')}>
-          <Text strong style={{ fontSize: 20 }}>{data.code} · {data.name}</Text>
+            Customers
+          </Button>
+          <Text strong style={{ fontSize: 20 }}>
+            {data.code} · {data.name}
+          </Text>
           {data.isActive ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>}
         </Space>
         <Tooltip
@@ -111,9 +209,23 @@ export function AdminCustomerDetailPage() {
       <Card size="small">
         <Descriptions column={3} size="small">
           <Descriptions.Item label="Customer ID">{data.id}</Descriptions.Item>
-          <Descriptions.Item label="Created">{new Date(data.createdAt).toLocaleString()}</Descriptions.Item>
+          <Descriptions.Item label="Created">
-          <Descriptions.Item label="First seen">{data.firstSeenAt ? new Date(data.firstSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</Descriptions.Item>
+            {new Date(data.createdAt).toLocaleString()}
-          <Descriptions.Item label="Last seen" span={3}>{data.lastSeenAt ? new Date(data.lastSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</Descriptions.Item>
+          </Descriptions.Item>
+          <Descriptions.Item label="First seen">
+            {data.firstSeenAt ? (
+              new Date(data.firstSeenAt).toLocaleString()
+            ) : (
+              <Text type="secondary">Never</Text>
+            )}
+          </Descriptions.Item>
+          <Descriptions.Item label="Last seen" span={3}>
+            {data.lastSeenAt ? (
+              new Date(data.lastSeenAt).toLocaleString()
+            ) : (
+              <Text type="secondary">Never</Text>
+            )}
+          </Descriptions.Item>
         </Descriptions>
       </Card>
 
@@ -124,27 +236,64 @@ export function AdminCustomerDetailPage() {
             {
               key: 'ingest',
               label: `Recent ingest (${data.recentIngestEvents.length})`,
-              children: <Table<FleetIngestEvent> rowKey="receivedAt" columns={eventCols} dataSource={data.recentIngestEvents} pagination={false} size="small" />,
+              children: (
+                <Table<FleetIngestEvent>
+                  rowKey="receivedAt"
+                  columns={eventCols}
+                  dataSource={data.recentIngestEvents}
+                  pagination={false}
+                  size="small"
+                />
+              ),
             },
             {
               key: 'measurements',
               label: `Recent measurements (${data.recentMeasurements.length})`,
-              children: <Table<FleetRecentMeasurement> rowKey={(r) => `${r.time}-${r.deviceId}`} columns={measCols} dataSource={data.recentMeasurements} pagination={false} size="small" />,
+              children: (
+                <Table<FleetRecentMeasurement>
+                  rowKey={(r) => `${r.time}-${r.deviceId}`}
+                  columns={measCols}
+                  dataSource={data.recentMeasurements}
+                  pagination={false}
+                  size="small"
+                />
+              ),
             },
             {
               key: 'sites',
               label: `Sites (${data.sites.length})`,
-              children: <Table<FleetSite> rowKey="id" columns={siteCols} dataSource={data.sites} pagination={false} size="small" />,
+              children: (
+                <Table<FleetSite>
+                  rowKey="id"
+                  columns={siteCols}
+                  dataSource={data.sites}
+                  pagination={false}
+                  size="small"
+                />
+              ),
             },
             {
               key: 'devices',
               label: `Devices (${data.devices.length})`,
-              children: <Table<FleetDevice> rowKey="id" columns={deviceCols} dataSource={data.devices} pagination={false} size="small" />,
+              children: (
+                <Table<FleetDevice>
+                  rowKey="id"
+                  columns={deviceCols}
+                  dataSource={data.devices}
+                  pagination={false}
+                  size="small"
+                />
+              ),
             },
             {
               key: 'tariffs',
               label: `Tariffs (${data.tariffs.length})`,
-              children: <TariffsTab tariffs={data.tariffs} municipalitiesCount={data.municipalities.length} />,
+              children: (
+                <TariffsTab
+                  tariffs={data.tariffs}
+                  municipalitiesCount={data.municipalities.length}
+                />
+              ),
             },
             {
               key: 'cost',
@@ -159,7 +308,13 @@ export function AdminCustomerDetailPage() {
 }
 
 // ── Tariffs tab: collapsible per-tariff cards with the period table inline ─
-function TariffsTab({ tariffs, municipalitiesCount }: { tariffs: FleetTariffView[]; municipalitiesCount: number }) {
+function TariffsTab({
+  tariffs,
+  municipalitiesCount,
+}: {
+  tariffs: FleetTariffView[];
+  municipalitiesCount: number;
+}) {
   if (tariffs.length === 0) {
     return (
       <Text type="secondary">
@@ -170,14 +325,26 @@ function TariffsTab({ tariffs, municipalitiesCount }: { tariffs: FleetTariffView
   }
 
   const periodCols: ColumnsType<FleetTariffPeriodView> = [
-    { title: 'Period', dataIndex: 'name', key: 'name', render: (v: string) => <Text strong>{v}</Text> },
     {
-      title: 'Days', dataIndex: 'daysOfWeek', key: 'd',
+      title: 'Period',
+      dataIndex: 'name',
+      key: 'name',
+      render: (v: string) => <Text strong>{v}</Text>,
+    },
+    {
+      title: 'Days',
+      dataIndex: 'daysOfWeek',
+      key: 'd',
       render: (mask: number) => formatDays(mask),
     },
     { title: 'Start', dataIndex: 'startTime', key: 's' },
     { title: 'End', dataIndex: 'endTime', key: 'e' },
-    { title: 'Rate (/kWh)', dataIndex: 'ratePerKwh', key: 'r', render: (n: number) => n.toFixed(4) },
+    {
+      title: 'Rate (/kWh)',
+      dataIndex: 'ratePerKwh',
+      key: 'r',
+      render: (n: number) => n.toFixed(4),
+    },
   ];
 
   return (
@@ -196,13 +363,18 @@ function TariffsTab({ tariffs, municipalitiesCount }: { tariffs: FleetTariffView
           }
           extra={
             <Text type="secondary" style={{ fontSize: 12 }}>
-              {t.effectiveFrom}{t.effectiveTo ? ` → ${t.effectiveTo}` : ' →'}
+              {t.effectiveFrom}
+              {t.effectiveTo ? ` → ${t.effectiveTo}` : ' →'}
             </Text>
           }
         >
           <Descriptions size="small" column={3} style={{ marginBottom: 12 }}>
-            <Descriptions.Item label="Default rate">{t.defaultRatePerKwh.toFixed(4)}/kWh</Descriptions.Item>
+            <Descriptions.Item label="Default rate">
-            <Descriptions.Item label="Fixed monthly">{t.fixedMonthlyCharge.toFixed(2)}</Descriptions.Item>
+              {t.defaultRatePerKwh.toFixed(4)}/kWh
+            </Descriptions.Item>
+            <Descriptions.Item label="Fixed monthly">
+              {t.fixedMonthlyCharge.toFixed(2)}
+            </Descriptions.Item>
             <Descriptions.Item label="VAT">{t.vatPercentage.toFixed(2)}%</Descriptions.Item>
           </Descriptions>
           {t.periods.length > 0 ? (
@@ -247,18 +419,35 @@ function CostTab({ customerId }: { customerId: string }) {
     { title: 'kWh', dataIndex: 'kwh', key: 'kwh', render: (n: number) => n.toFixed(3) },
     { title: 'Base cost', dataIndex: 'baseCost', key: 'b', render: (n: number) => n.toFixed(2) },
     { title: 'VAT', dataIndex: 'vatAmount', key: 'v', render: (n: number) => n.toFixed(2) },
-    { title: 'Total', dataIndex: 'totalCost', key: 't', render: (n: number) => <Text strong>{n.toFixed(2)}</Text> },
+    {
+      title: 'Total',
+      dataIndex: 'totalCost',
+      key: 't',
+      render: (n: number) => <Text strong>{n.toFixed(2)}</Text>,
+    },
   ];
 
   const deviceCols: ColumnsType<FleetCostDeviceRow> = [
-    { title: 'Device', dataIndex: 'deviceName', key: 'd', render: (v: string) => <Text strong>{v}</Text> },
     {
-      title: 'Municipality', dataIndex: 'municipalityName', key: 'm',
+      title: 'Device',
-      render: (v: string | null) => v ?? <Text type="secondary">—</Text>
+      dataIndex: 'deviceName',
+      key: 'd',
+      render: (v: string) => <Text strong>{v}</Text>,
+    },
+    {
+      title: 'Municipality',
+      dataIndex: 'municipalityName',
+      key: 'm',
+      render: (v: string | null) => v ?? <Text type="secondary">—</Text>,
     },
     { title: 'kWh', dataIndex: 'kwh', key: 'kwh', render: (n: number) => n.toFixed(3) },
     { title: 'Base cost', dataIndex: 'baseCost', key: 'b', render: (n: number) => n.toFixed(2) },
-    { title: 'Total', dataIndex: 'totalCost', key: 't', render: (n: number) => <Text strong>{n.toFixed(2)}</Text> },
+    {
+      title: 'Total',
+      dataIndex: 'totalCost',
+      key: 't',
+      render: (n: number) => <Text strong>{n.toFixed(2)}</Text>,
+    },
   ];
 
   return (
@@ -270,11 +459,19 @@ function CostTab({ customerId }: { customerId: string }) {
             allowClear={false}
             value={range}
             showTime={false}
-            onChange={(v) => v && v[0] && v[1] && setRange([v[0].startOf('day'), v[1].endOf('day')])}
+            onChange={(v) =>
+              v && v[0] && v[1] && setRange([v[0].startOf('day'), v[1].endOf('day')])
+            }
             ranges={{
-              'Today': [dayjs().startOf('day'), dayjs().add(1, 'day').startOf('day')],
+              Today: [dayjs().startOf('day'), dayjs().add(1, 'day').startOf('day')],
-              'Last 7d': [dayjs().subtract(7, 'day').startOf('day'), dayjs().add(1, 'day').startOf('day')],
+              'Last 7d': [
-              'Last 30d': [dayjs().subtract(30, 'day').startOf('day'), dayjs().add(1, 'day').startOf('day')],
+                dayjs().subtract(7, 'day').startOf('day'),
+                dayjs().add(1, 'day').startOf('day'),
+              ],
+              'Last 30d': [
+                dayjs().subtract(30, 'day').startOf('day'),
+                dayjs().add(1, 'day').startOf('day'),
+              ],
               'This month': [dayjs().startOf('month'), dayjs().add(1, 'day').startOf('day')],
             }}
           />
@@ -289,15 +486,58 @@ function CostTab({ customerId }: { customerId: string }) {
       </Space>
 
       {isLoading && <Spin />}
-      {error && <Alert type="error" message="Failed to compute cost" description={(error as Error).message} />}
+      {error && (
+        <Alert
+          type="error"
+          message="Failed to compute cost"
+          description={(error as Error).message}
+        />
+      )}
 
       {data && (
         <>
           <Row gutter={16}>
-            <Col span={6}><Card><Statistic title="Total kWh" value={data.totalKwh} precision={3} prefix={<ThunderboltOutlined />} /></Card></Col>
+            <Col span={6}>
-            <Col span={6}><Card><Statistic title="Base cost" value={data.totalBaseCost} precision={2} prefix={<DollarOutlined />} /></Card></Col>
+              <Card>
-            <Col span={6}><Card><Statistic title="VAT" value={data.totalVatAmount} precision={2} prefix={<DollarOutlined />} /></Card></Col>
+                <Statistic
-            <Col span={6}><Card><Statistic title="Total" value={data.totalCost} precision={2} valueStyle={{ color: '#3f8600' }} prefix={<DollarOutlined />} /></Card></Col>
+                  title="Total kWh"
+                  value={data.totalKwh}
+                  precision={3}
+                  prefix={<ThunderboltOutlined />}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card>
+                <Statistic
+                  title="Base cost"
+                  value={data.totalBaseCost}
+                  precision={2}
+                  prefix={<DollarOutlined />}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card>
+                <Statistic
+                  title="VAT"
+                  value={data.totalVatAmount}
+                  precision={2}
+                  prefix={<DollarOutlined />}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card>
+                <Statistic
+                  title="Total"
+                  value={data.totalCost}
+                  precision={2}
+                  valueStyle={{ color: '#3f8600' }}
+                  prefix={<DollarOutlined />}
+                />
+              </Card>
+            </Col>
           </Row>
 
           {data.bucketsWithoutTariff > 0 && (
@@ -318,15 +558,21 @@ function CostTab({ customerId }: { customerId: string }) {
 
           <Card title="Per day" size="small">
             <Table<FleetCostDay>
-              rowKey="date" size="small" pagination={false}
+              rowKey="date"
-              columns={dayCols} dataSource={data.daily}
+              size="small"
+              pagination={false}
+              columns={dayCols}
+              dataSource={data.daily}
             />
           </Card>
 
           <Card title="Per device" size="small">
             <Table<FleetCostDeviceRow>
-              rowKey="deviceId" size="small" pagination={false}
+              rowKey="deviceId"
-              columns={deviceCols} dataSource={data.perDevice}
+              size="small"
+              pagination={false}
+              columns={deviceCols}
+              dataSource={data.perDevice}
             />
           </Card>
         </>

portal/frontend/src/pages/AdminCustomersPage.tsx

@@ -5,11 +5,18 @@ import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
-  listCustomers, createCustomer, updateCustomer, rotateCustomerToken, deleteCustomer,
+  listCustomers,
-  type CustomerListItem, type CreateCustomerPayload, type UpdateCustomerPayload,
+  createCustomer,
+  updateCustomer,
+  rotateCustomerToken,
+  deleteCustomer,
+  type CustomerListItem,
+  type CreateCustomerPayload,
+  type UpdateCustomerPayload,
 } from '../api/customers';
 import { CustomerFormModal } from '../components/customers/CustomerFormModal';
 import { TokenShownOnceModal } from '../components/customers/TokenShownOnceModal';
+import { extractApiError } from '../api/client';
 
 const { Text } = Typography;
 
@@ -20,8 +27,14 @@ export function AdminCustomersPage() {
   const navigate = useNavigate();
   const [formMode, setFormMode] = useState<FormMode | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
-  const [tokenModal, setTokenModal] = useState<{ open: boolean; code: string | null; token: string | null }>({
+  const [tokenModal, setTokenModal] = useState<{
-    open: false, code: null, token: null,
+    open: boolean;
+    code: string | null;
+    token: string | null;
+  }>({
+    open: false,
+    code: null,
+    token: null,
   });
 
   const { data: customers = [], isLoading } = useQuery({
@@ -39,18 +52,19 @@ export function AdminCustomersPage() {
       setTokenModal({ open: true, code: result.customer.code, token: result.token });
       invalidate();
     },
-    onError: (err: unknown) => setFormError(extractError(err)),
+    onError: (err: unknown) => setFormError(extractApiError(err)),
   });
 
   const updateMut = useMutation({
-    mutationFn: ({ id, payload }: { id: string; payload: UpdateCustomerPayload }) => updateCustomer(id, payload),
+    mutationFn: ({ id, payload }: { id: string; payload: UpdateCustomerPayload }) =>
+      updateCustomer(id, payload),
     onSuccess: () => {
       message.success('Customer updated');
       setFormMode(null);
       setFormError(null);
       invalidate();
     },
-    onError: (err: unknown) => setFormError(extractError(err)),
+    onError: (err: unknown) => setFormError(extractApiError(err)),
   });
 
   const rotateMut = useMutation({
@@ -59,13 +73,16 @@ export function AdminCustomersPage() {
       setTokenModal({ open: true, code: result.customer.code, token: result.token });
       invalidate();
     },
-    onError: (err: unknown) => message.error(extractError(err)),
+    onError: (err: unknown) => message.error(extractApiError(err)),
   });
 
   const deleteMut = useMutation({
     mutationFn: (id: string) => deleteCustomer(id),
-    onSuccess: () => { message.success('Customer deleted'); invalidate(); },
+    onSuccess: () => {
-    onError: (err: unknown) => message.error(extractError(err)),
+      message.success('Customer deleted');
+      invalidate();
+    },
+    onError: (err: unknown) => message.error(extractApiError(err)),
   });
 
   const handleSubmit = (payload: CreateCustomerPayload | UpdateCustomerPayload) => {
@@ -84,7 +101,8 @@ export function AdminCustomersPage() {
       title: 'Status',
       dataIndex: 'isActive',
       key: 'isActive',
-      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>),
+      render: (v: boolean) =>
+        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Last push',
@@ -106,7 +124,9 @@ export function AdminCustomersPage() {
         return (
           <Space size={4} direction="vertical">
             {issued}
-            <Tooltip title={`Old token still accepted by ingest until ${exp.toLocaleString()}. Customer ops should update their .env before then.`}>
+            <Tooltip
+              title={`Old token still accepted by ingest until ${exp.toLocaleString()}. Customer ops should update their .env before then.`}
+            >
               <Tag color="orange" style={{ fontSize: 11 }}>
                 Old token valid until {exp.toLocaleTimeString()}
               </Tag>
@@ -120,7 +140,14 @@ export function AdminCustomersPage() {
       key: 'actions',
       render: (_, c) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => { setFormError(null); setFormMode({ kind: 'edit', customer: c }); }}>
+          <Button
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => {
+              setFormError(null);
+              setFormMode({ kind: 'edit', customer: c });
+            }}
+          >
             Edit
           </Button>
           <Tooltip title="Generate a new token. The old token keeps working for 24h so customer ops can update their .env without dropping pushes.">
@@ -131,7 +158,11 @@ export function AdminCustomersPage() {
               okButtonProps={{ danger: true }}
               onConfirm={() => rotateMut.mutate(c.id)}
             >
-              <Button size="small" icon={<ReloadOutlined />} loading={rotateMut.isPending && rotateMut.variables === c.id}>
+              <Button
+                size="small"
+                icon={<ReloadOutlined />}
+                loading={rotateMut.isPending && rotateMut.variables === c.id}
+              >
                 Rotate token
               </Button>
             </Popconfirm>
@@ -143,7 +174,9 @@ export function AdminCustomersPage() {
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteMut.mutate(c.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -157,7 +190,10 @@ export function AdminCustomersPage() {
         <Button
           type="primary"
           icon={<PlusOutlined />}
-          onClick={() => { setFormError(null); setFormMode({ kind: 'create' }); }}
+          onClick={() => {
+            setFormError(null);
+            setFormMode({ kind: 'create' });
+          }}
         >
           Register customer
         </Button>
@@ -184,7 +220,10 @@ export function AdminCustomersPage() {
         mode={formMode}
         submitting={createMut.isPending || updateMut.isPending}
         error={formError}
-        onClose={() => { setFormMode(null); setFormError(null); }}
+        onClose={() => {
+          setFormMode(null);
+          setFormError(null);
+        }}
         onSubmit={handleSubmit}
       />
 
@@ -197,11 +236,3 @@ export function AdminCustomersPage() {
     </Card>
   );
 }
-
-function extractError(err: unknown): string {
-  if (typeof err === 'object' && err !== null && 'response' in err) {
-    const data = (err as { response?: { data?: { error?: string } } }).response?.data;
-    if (data?.error) return data.error;
-  }
-  return 'Request failed.';
-}

portal/frontend/src/pages/AdminFleetDashboardPage.tsx

@@ -1,7 +1,11 @@
 import { Button, Card, Col, Row, Space, Statistic, Table, Tag, Typography, Empty } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import {
-  ApartmentOutlined, ThunderboltOutlined, TeamOutlined, CheckCircleOutlined, DollarOutlined,
+  ApartmentOutlined,
+  ThunderboltOutlined,
+  TeamOutlined,
+  CheckCircleOutlined,
+  DollarOutlined,
   DownloadOutlined,
 } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
@@ -23,26 +27,38 @@ export function AdminFleetDashboardPage() {
     { title: 'Code', dataIndex: 'code', key: 'code', render: (v) => <Text strong>{v}</Text> },
     { title: 'Name', dataIndex: 'name', key: 'name' },
     {
-      title: 'Status', dataIndex: 'isActive', key: 'active',
+      title: 'Status',
-      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>)
+      dataIndex: 'isActive',
+      key: 'active',
+      render: (v: boolean) =>
+        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
-      title: 'Last push', dataIndex: 'lastSeenAt', key: 'last',
+      title: 'Last push',
-      render: (v: string | null) => v ? lagDescription(v) : <Text type="secondary">Never</Text>
+      dataIndex: 'lastSeenAt',
+      key: 'last',
+      render: (v: string | null) => (v ? lagDescription(v) : <Text type="secondary">Never</Text>),
     },
     { title: 'Sites', dataIndex: 'sites', key: 'sites' },
     { title: 'Devices', dataIndex: 'devices', key: 'devices' },
     {
-      title: 'Today (rows)', dataIndex: 'measurementsToday', key: 'mt',
+      title: 'Today (rows)',
-      render: (n: number) => n.toLocaleString()
+      dataIndex: 'measurementsToday',
+      key: 'mt',
+      render: (n: number) => n.toLocaleString(),
     },
     {
-      title: 'Today (kWh imp.)', dataIndex: 'kwhImportedToday', key: 'kwh',
+      title: 'Today (kWh imp.)',
-      render: (v: number | null) => v == null ? '—' : v.toFixed(2)
+      dataIndex: 'kwhImportedToday',
+      key: 'kwh',
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
     },
     {
-      title: 'Today (cost)', dataIndex: 'costToday', key: 'cost',
+      title: 'Today (cost)',
-      render: (v: number | null) => v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text>
+      dataIndex: 'costToday',
+      key: 'cost',
+      render: (v: number | null) =>
+        v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text>,
     },
   ];
 
@@ -51,7 +67,12 @@ export function AdminFleetDashboardPage() {
       <Row gutter={16} style={{ marginBottom: 16 }}>
         <Col span={5}>
           <Card>
-            <Statistic title="Customers" value={data?.totalCustomers ?? 0} prefix={<TeamOutlined />} loading={isLoading} />
+            <Statistic
+              title="Customers"
+              value={data?.totalCustomers ?? 0}
+              prefix={<TeamOutlined />}
+              loading={isLoading}
+            />
           </Card>
         </Col>
         <Col span={5}>

portal/frontend/src/pages/AdminSitesPage.tsx

@@ -4,9 +4,18 @@ import type { ColumnsType } from 'antd/es/table';
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-  listSites, createSite, updateSite, deleteSite,
+  listSites,
-  listSiteDevices, createDevice, updateDevice, deleteDevice,
+  createSite,
-  type Site, type Device, type UpsertSite, type UpsertDevice,
+  updateSite,
+  deleteSite,
+  listSiteDevices,
+  createDevice,
+  updateDevice,
+  deleteDevice,
+  type Site,
+  type Device,
+  type UpsertSite,
+  type UpsertDevice,
 } from '../api/sites';
 import { SiteFormModal } from '../components/sites/SiteFormModal';
 import { DeviceFormModal } from '../components/sites/DeviceFormModal';
@@ -15,9 +24,18 @@ const { Text } = Typography;
 
 export function AdminSitesPage() {
   const qc = useQueryClient();
-  const [siteModal, setSiteModal] = useState<{ open: boolean; editing: Site | null }>({ open: false, editing: null });
+  const [siteModal, setSiteModal] = useState<{ open: boolean; editing: Site | null }>({
-  const [deviceModal, setDeviceModal] = useState<{ open: boolean; siteId: string | null; editing: Device | null }>({
+    open: false,
-    open: false, siteId: null, editing: null,
+    editing: null,
+  });
+  const [deviceModal, setDeviceModal] = useState<{
+    open: boolean;
+    siteId: string | null;
+    editing: Device | null;
+  }>({
+    open: false,
+    siteId: null,
+    editing: null,
   });
   const [expanded, setExpanded] = useState<string[]>([]);
 
@@ -25,22 +43,34 @@ export function AdminSitesPage() {
 
   const createSiteMut = useMutation({
     mutationFn: (p: UpsertSite) => createSite(p),
-    onSuccess: () => { message.success('Site created'); setSiteModal({ open: false, editing: null }); qc.invalidateQueries({ queryKey: ['sites'] }); },
+    onSuccess: () => {
+      message.success('Site created');
+      setSiteModal({ open: false, editing: null });
+      qc.invalidateQueries({ queryKey: ['sites'] });
+    },
     onError: () => message.error('Create failed'),
   });
   const updateSiteMut = useMutation({
     mutationFn: ({ id, payload }: { id: string; payload: UpsertSite }) => updateSite(id, payload),
-    onSuccess: () => { message.success('Site updated'); setSiteModal({ open: false, editing: null }); qc.invalidateQueries({ queryKey: ['sites'] }); },
+    onSuccess: () => {
+      message.success('Site updated');
+      setSiteModal({ open: false, editing: null });
+      qc.invalidateQueries({ queryKey: ['sites'] });
+    },
     onError: () => message.error('Update failed'),
   });
   const deleteSiteMut = useMutation({
     mutationFn: (id: string) => deleteSite(id),
-    onSuccess: () => { message.success('Site deleted'); qc.invalidateQueries({ queryKey: ['sites'] }); },
+    onSuccess: () => {
+      message.success('Site deleted');
+      qc.invalidateQueries({ queryKey: ['sites'] });
+    },
     onError: () => message.error('Delete failed'),
   });
 
   const createDeviceMut = useMutation({
-    mutationFn: ({ siteId, payload }: { siteId: string; payload: UpsertDevice }) => createDevice(siteId, payload),
+    mutationFn: ({ siteId, payload }: { siteId: string; payload: UpsertDevice }) =>
+      createDevice(siteId, payload),
     onSuccess: (_, vars) => {
       message.success('Device created');
       setDeviceModal({ open: false, siteId: null, editing: null });
@@ -50,7 +80,8 @@ export function AdminSitesPage() {
     onError: () => message.error('Create failed'),
   });
   const updateDeviceMut = useMutation({
-    mutationFn: ({ deviceId, payload }: { deviceId: string; payload: UpsertDevice }) => updateDevice(deviceId, payload),
+    mutationFn: ({ deviceId, payload }: { deviceId: string; payload: UpsertDevice }) =>
+      updateDevice(deviceId, payload),
     onSuccess: () => {
       message.success('Device updated');
       setDeviceModal({ open: false, siteId: null, editing: null });
@@ -84,26 +115,40 @@ export function AdminSitesPage() {
 
   const columns: ColumnsType<Site> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'Address', dataIndex: 'address', key: 'address', render: (v) => v ?? <Text type="secondary">—</Text> },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      render: (v) => v ?? <Text type="secondary">—</Text>,
+    },
     { title: 'Devices', dataIndex: 'deviceCount', key: 'deviceCount' },
     {
       title: 'Active',
       dataIndex: 'isActive',
-      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>),
+      render: (v: boolean) =>
+        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Actions',
       key: 'actions',
       render: (_, site) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => setSiteModal({ open: true, editing: site })}>Edit</Button>
+          <Button
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => setSiteModal({ open: true, editing: site })}
+          >
+            Edit
+          </Button>
           <Popconfirm
             title={`Delete site "${site.name}"? All its devices and measurements will be removed.`}
             okText="Delete"
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteSiteMut.mutate(site.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -114,7 +159,11 @@ export function AdminSitesPage() {
     <Card
       title="Sites"
       extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => setSiteModal({ open: true, editing: null })}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => setSiteModal({ open: true, editing: null })}
+        >
           New site
         </Button>
       }
@@ -159,7 +208,10 @@ export function AdminSitesPage() {
 }
 
 function DeviceSubTable({
-  site, onCreate, onEdit, onDelete,
+  site,
+  onCreate,
+  onEdit,
+  onDelete,
 }: {
   site: Site;
   onCreate: () => void;
@@ -185,14 +237,18 @@ function DeviceSubTable({
       key: 'actions',
       render: (_, d) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(d)}>Edit</Button>
+          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(d)}>
+            Edit
+          </Button>
           <Popconfirm
             title={`Delete device "${d.name}"? Its measurements will be removed.`}
             okText="Delete"
             okButtonProps={{ danger: true }}
             onConfirm={() => onDelete(d)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -202,7 +258,9 @@ function DeviceSubTable({
   return (
     <Card size="small" style={{ background: '#fafafa' }}>
       <Space style={{ marginBottom: 8, justifyContent: 'flex-end', width: '100%' }}>
-        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onCreate}>New device</Button>
+        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onCreate}>
+          New device
+        </Button>
       </Space>
       <Table<Device>
         rowKey="id"

portal/frontend/src/pages/DashboardPage.tsx

@@ -1,9 +1,24 @@
 import { useMemo, useState } from 'react';
 import {
-  Alert, Button, Card, Col, DatePicker, Row, Space, Spin, Statistic, Table, Tag, Typography,
+  Alert,
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Row,
+  Space,
+  Spin,
+  Statistic,
+  Table,
+  Tag,
+  Typography,
 } from 'antd';
 import {
-  DollarOutlined, DownloadOutlined, ThunderboltOutlined, ApartmentOutlined, ClockCircleOutlined,
+  DollarOutlined,
+  DownloadOutlined,
+  ThunderboltOutlined,
+  ApartmentOutlined,
+  ClockCircleOutlined,
 } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { useQuery } from '@tanstack/react-query';
@@ -12,8 +27,11 @@ import dayjs, { type Dayjs } from 'dayjs';
 import { useAppInfo } from '../hooks/useAppInfo';
 import { AdminFleetDashboardPage } from './AdminFleetDashboardPage';
 import {
-  fetchDashboardSummary, downloadDashboardSummaryXlsx, downloadRawMeasurementsXlsx,
+  fetchDashboardSummary,
-  type DashboardDeviceRow, type DashboardSummary,
+  downloadDashboardSummaryXlsx,
+  downloadRawMeasurementsXlsx,
+  type DashboardDeviceRow,
+  type DashboardSummary,
 } from '../api/dashboard';
 
 const { Text } = Typography;
@@ -48,11 +66,19 @@ function ClientDashboard() {
             <RangePicker
               allowClear={false}
               value={range}
-              onChange={(v) => v && v[0] && v[1] && setRange([v[0].startOf('day'), v[1].endOf('day')])}
+              onChange={(v) =>
+                v && v[0] && v[1] && setRange([v[0].startOf('day'), v[1].endOf('day')])
+              }
               ranges={{
-                'Today':       [dayjs().startOf('day'),        dayjs().add(1, 'day').startOf('day')],
+                Today: [dayjs().startOf('day'), dayjs().add(1, 'day').startOf('day')],
-                'Last 7d':     [dayjs().subtract(7, 'day').startOf('day'),  dayjs().add(1, 'day').startOf('day')],
+                'Last 7d': [
-                'Last 30d':    [dayjs().subtract(30, 'day').startOf('day'), dayjs().add(1, 'day').startOf('day')],
+                  dayjs().subtract(7, 'day').startOf('day'),
+                  dayjs().add(1, 'day').startOf('day'),
+                ],
+                'Last 30d': [
+                  dayjs().subtract(30, 'day').startOf('day'),
+                  dayjs().add(1, 'day').startOf('day'),
+                ],
                 'This month': [dayjs().startOf('month'), dayjs().add(1, 'day').startOf('day')],
               }}
             />
@@ -76,7 +102,8 @@ function ClientDashboard() {
 
       {error && (
         <Alert
-          type="error" showIcon
+          type="error"
+          showIcon
           message="Failed to load dashboard"
           description={(error as Error).message}
         />
@@ -169,46 +196,93 @@ function ChartPanel({ data, loading }: { data: DashboardSummary | undefined; loa
         name: 'kW',
         nameTextStyle: { fontSize: 11 },
       },
-      series: [{
+      series: [
+        {
           name: 'Active power',
           type: 'line',
           smooth: true,
           showSymbol: false,
           areaStyle: { opacity: 0.15 },
-        data: points.map(p => [p.time, p.totalKw]),
+          data: points.map((p) => [p.time, p.totalKw]),
-      }],
+        },
+      ],
     };
   }, [data]);
 
   if (loading) {
-    return <div style={{ height: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    return (
+      <div style={{ height: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <Spin />
-    </div>;
+      </div>
+    );
   }
 
   if (!data || data.chart.length === 0) {
-    return <div style={{ height: 240, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
+    return (
+      <div
+        style={{
+          height: 240,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#999',
+        }}
+      >
         <Space>
           <ClockCircleOutlined />
           <Text type="secondary">No measurements yet in this window.</Text>
         </Space>
-    </div>;
+      </div>
+    );
   }
 
-  return <ReactECharts option={option} style={{ height: 240, width: '100%' }} notMerge lazyUpdate />;
+  return (
+    <ReactECharts option={option} style={{ height: 240, width: '100%' }} notMerge lazyUpdate />
+  );
 }
 
 function DeviceTable({ rows, loading }: { rows: DashboardDeviceRow[]; loading: boolean }) {
   const columns: ColumnsType<DashboardDeviceRow> = [
-    { title: 'Device', dataIndex: 'deviceName', key: 'd', render: (v: string) => <Text strong>{v}</Text> },
+    {
-    { title: 'Site', dataIndex: 'siteName', key: 's', render: (v: string | null) => v ?? <Text type="secondary">—</Text> },
+      title: 'Device',
-    { title: 'kWh', dataIndex: 'kwh', key: 'k', render: (v: number) => v.toFixed(3), align: 'right' as const },
+      dataIndex: 'deviceName',
-    { title: 'Peak kW', dataIndex: 'peakKw', key: 'p',
+      key: 'd',
-      render: (v: number | null) => v == null ? '—' : v.toFixed(3), align: 'right' as const },
+      render: (v: string) => <Text strong>{v}</Text>,
-    { title: 'Last seen (UTC)', dataIndex: 'lastSeen', key: 'l',
+    },
-      render: (v: string | null) => v ? lastSeenTag(v) : <Text type="secondary">never</Text> },
+    {
-    { title: 'Cost', dataIndex: 'cost', key: 'c', align: 'right' as const,
+      title: 'Site',
-      render: (v: number | null) => v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text> },
+      dataIndex: 'siteName',
+      key: 's',
+      render: (v: string | null) => v ?? <Text type="secondary">—</Text>,
+    },
+    {
+      title: 'kWh',
+      dataIndex: 'kwh',
+      key: 'k',
+      render: (v: number) => v.toFixed(3),
+      align: 'right' as const,
+    },
+    {
+      title: 'Peak kW',
+      dataIndex: 'peakKw',
+      key: 'p',
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(3)),
+      align: 'right' as const,
+    },
+    {
+      title: 'Last seen (UTC)',
+      dataIndex: 'lastSeen',
+      key: 'l',
+      render: (v: string | null) => (v ? lastSeenTag(v) : <Text type="secondary">never</Text>),
+    },
+    {
+      title: 'Cost',
+      dataIndex: 'cost',
+      key: 'c',
+      align: 'right' as const,
+      render: (v: number | null) =>
+        v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text>,
+    },
   ];
 
   return (

portal/frontend/src/pages/DashboardsPage.tsx

@@ -14,15 +14,16 @@ export function DashboardsPage() {
     staleTime: 60_000,
   });
 
-  const dashboards = data?.dashboards ?? [];
+  const dashboards = useMemo(() => data?.dashboards ?? [], [data]);
   const baseUrl = data?.baseUrl?.replace(/\/$/, '') ?? '';
   const [selected, setSelected] = useState<string | null>(null);
 
   useEffect(() => {
     if (selected) return;
-    const initial = data?.defaultDashboardUid && dashboards.some((d) => d.uid === data.defaultDashboardUid)
+    const initial =
+      data?.defaultDashboardUid && dashboards.some((d) => d.uid === data.defaultDashboardUid)
         ? data.defaultDashboardUid
-      : dashboards[0]?.uid ?? null;
+        : (dashboards[0]?.uid ?? null);
     if (initial) setSelected(initial);
   }, [data, dashboards, selected]);
 

portal/frontend/src/pages/LoginPage.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { LoginPage } from './LoginPage';
+import * as useAuthModule from '../hooks/useAuth';
+import * as useBrandingModule from '../hooks/useBranding';
+
+function mockHooks(loginImpl: (email: string, pw: string) => Promise<void>) {
+  vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
+    user: null,
+    loading: false,
+    login: loginImpl,
+    logout: vi.fn(),
+    setUser: vi.fn(),
+  });
+  vi.spyOn(useBrandingModule, 'useBranding').mockReturnValue({
+    branding: {
+      applicationName: 'Test Portal',
+      logoUrl: '',
+      primaryColor: '#000',
+      secondaryColor: '#111',
+      accentColor: '#222',
+      footerText: 'footer',
+    },
+    loading: false,
+  });
+}
+
+describe('<LoginPage>', () => {
+  it('calls login() with the submitted credentials', async () => {
+    const login = vi.fn().mockResolvedValue(undefined);
+    mockHooks(login);
+
+    render(
+      <MemoryRouter initialEntries={['/login']}>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/" element={<div>home</div>} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await userEvent.type(screen.getByLabelText(/email/i), 'admin@example.com');
+    await userEvent.type(screen.getByLabelText(/password/i), 'ChangeMe123!');
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    expect(login).toHaveBeenCalledWith('admin@example.com', 'ChangeMe123!');
+  });
+
+  it('shows an inline error when login() rejects', async () => {
+    const login = vi.fn().mockRejectedValue(new Error('bad creds'));
+    mockHooks(login);
+
+    render(
+      <MemoryRouter initialEntries={['/login']}>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await userEvent.type(screen.getByLabelText(/email/i), 'a@b.c');
+    await userEvent.type(screen.getByLabelText(/password/i), 'xx');
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    expect(await screen.findByText(/invalid email or password/i)).toBeInTheDocument();
+  });
+
+  it('renders the branded application name in the header', () => {
+    mockHooks(vi.fn());
+    render(
+      <MemoryRouter initialEntries={['/login']}>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Test Portal')).toBeInTheDocument();
+  });
+});

portal/frontend/src/pages/LoginPage.tsx

@@ -19,7 +19,13 @@ export function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';
+  // Return-to comes from either the ?returnTo= query param (set by the global
+  // 401 interceptor) or router state (set by RequireAuth). Query param wins.
+  const returnToParam = new URLSearchParams(location.search).get('returnTo');
+  const from =
+    returnToParam ??
+    (location.state as { from?: { pathname: string } } | null)?.from?.pathname ??
+    '/';
 
   const onFinish = async (values: LoginValues) => {
     setError(null);
@@ -77,7 +83,10 @@ export function LoginPage() {
           </Form.Item>
         </Form>
         {branding.footerText && (
-          <Text type="secondary" style={{ display: 'block', textAlign: 'center', marginTop: 16, fontSize: 12 }}>
+          <Text
+            type="secondary"
+            style={{ display: 'block', textAlign: 'center', marginTop: 16, fontSize: 12 }}
+          >
             {branding.footerText}
           </Text>
         )}

portal/frontend/src/pages/MeasurementsPage.tsx

@@ -1,13 +1,24 @@
 import { useMemo, useState } from 'react';
 import {
-  Alert, Button, Card, DatePicker, InputNumber, Select, Space, Table, Tag, Typography,
+  Alert,
+  Button,
+  Card,
+  DatePicker,
+  InputNumber,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Typography,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import dayjs, { type Dayjs } from 'dayjs';
 import {
-  fetchRawMeasurements, listAllDevices, downloadRawMeasurementsExport,
+  fetchRawMeasurements,
+  listAllDevices,
+  downloadRawMeasurementsExport,
   type RawMeasurementRow,
 } from '../api/measurements';
 
@@ -37,8 +48,16 @@ export function MeasurementsPage() {
   });
 
   const { data, isLoading, isFetching, error, refetch } = useQuery({
-    queryKey: ['raw-measurements', fromIso, toIso, selectedDeviceIds.sort().join(','), limit, offset],
+    queryKey: [
-    queryFn: () => fetchRawMeasurements({
+      'raw-measurements',
+      fromIso,
+      toIso,
+      selectedDeviceIds.sort().join(','),
+      limit,
+      offset,
+    ],
+    queryFn: () =>
+      fetchRawMeasurements({
         fromUtc: fromIso,
         toUtc: toIso,
         deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
@@ -48,31 +67,78 @@ export function MeasurementsPage() {
     placeholderData: keepPreviousData,
   });
 
-  const deviceOptions = useMemo(() => devices.map(d => ({
+  const deviceOptions = useMemo(
+    () =>
+      devices.map((d) => ({
         value: d.id,
         label: `${d.name} — ${d.siteName}`,
         disabled: !d.isActive,
-  })), [devices]);
+      })),
+    [devices],
+  );
 
   const columns: ColumnsType<RawMeasurementRow> = [
     {
-      title: 'Time (UTC)', dataIndex: 'time', key: 't', width: 180,
+      title: 'Time (UTC)',
+      dataIndex: 'time',
+      key: 't',
+      width: 180,
       render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19),
     },
-    { title: 'Device', dataIndex: 'deviceName', key: 'd', render: (v: string) => <Text strong>{v}</Text> },
+    {
-    { title: 'Site', dataIndex: 'siteName', key: 's', render: (v: string | null) => v ?? <Text type="secondary">—</Text> },
+      title: 'Device',
-    { title: 'Active kW', dataIndex: 'activePowerKw', key: 'kw', align: 'right' as const,
+      dataIndex: 'deviceName',
-      render: (v: number) => v.toFixed(3) },
+      key: 'd',
-    { title: 'kWh imported (cum.)', dataIndex: 'energyImportedKwh', key: 'imp', align: 'right' as const,
+      render: (v: string) => <Text strong>{v}</Text>,
-      render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
+    },
-    { title: 'kWh exported (cum.)', dataIndex: 'energyExportedKwh', key: 'exp', align: 'right' as const,
+    {
-      render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
+      title: 'Site',
-    { title: 'PF', dataIndex: 'powerFactor', key: 'pf', align: 'right' as const,
+      dataIndex: 'siteName',
-      render: (v: number | null) => v == null ? '—' : v.toFixed(3) },
+      key: 's',
-    { title: 'V', dataIndex: 'voltageV', key: 'v', align: 'right' as const,
+      render: (v: string | null) => v ?? <Text type="secondary">—</Text>,
-      render: (v: number | null) => v == null ? '—' : v.toFixed(1) },
+    },
-    { title: 'Hz', dataIndex: 'frequencyHz', key: 'hz', align: 'right' as const,
+    {
-      render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
+      title: 'Active kW',
+      dataIndex: 'activePowerKw',
+      key: 'kw',
+      align: 'right' as const,
+      render: (v: number) => v.toFixed(3),
+    },
+    {
+      title: 'kWh imported (cum.)',
+      dataIndex: 'energyImportedKwh',
+      key: 'imp',
+      align: 'right' as const,
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
+    },
+    {
+      title: 'kWh exported (cum.)',
+      dataIndex: 'energyExportedKwh',
+      key: 'exp',
+      align: 'right' as const,
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
+    },
+    {
+      title: 'PF',
+      dataIndex: 'powerFactor',
+      key: 'pf',
+      align: 'right' as const,
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(3)),
+    },
+    {
+      title: 'V',
+      dataIndex: 'voltageV',
+      key: 'v',
+      align: 'right' as const,
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(1)),
+    },
+    {
+      title: 'Hz',
+      dataIndex: 'frequencyHz',
+      key: 'hz',
+      align: 'right' as const,
+      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
+    },
   ];
 
   const totalCount = data?.totalCount ?? 0;
@@ -91,12 +157,23 @@ export function MeasurementsPage() {
               allowClear={false}
               value={range}
               showTime={false}
-              onChange={(v) => v && v[0] && v[1] && (setRange([v[0].startOf('day'), v[1].endOf('day')]), setOffset(0))}
+              onChange={(v) =>
+                v &&
+                v[0] &&
+                v[1] &&
+                (setRange([v[0].startOf('day'), v[1].endOf('day')]), setOffset(0))
+              }
               ranges={{
-                'Today':      [dayjs().startOf('day'),                       dayjs().add(1, 'day').startOf('day')],
+                Today: [dayjs().startOf('day'), dayjs().add(1, 'day').startOf('day')],
-                'Yesterday':  [dayjs().subtract(1, 'day').startOf('day'),    dayjs().startOf('day')],
+                Yesterday: [dayjs().subtract(1, 'day').startOf('day'), dayjs().startOf('day')],
-                'Last 7d':    [dayjs().subtract(7, 'day').startOf('day'),    dayjs().add(1, 'day').startOf('day')],
+                'Last 7d': [
-                'Last 30d':   [dayjs().subtract(30, 'day').startOf('day'),   dayjs().add(1, 'day').startOf('day')],
+                  dayjs().subtract(7, 'day').startOf('day'),
+                  dayjs().add(1, 'day').startOf('day'),
+                ],
+                'Last 30d': [
+                  dayjs().subtract(30, 'day').startOf('day'),
+                  dayjs().add(1, 'day').startOf('day'),
+                ],
                 'This month': [dayjs().startOf('month'), dayjs().add(1, 'day').startOf('day')],
                 'All time': [dayjs('2020-01-01'), dayjs().add(1, 'day').startOf('day')],
               }}
@@ -104,14 +181,19 @@ export function MeasurementsPage() {
           </Space>
 
           <Space wrap style={{ width: '100%' }}>
-            <Text strong style={{ minWidth: 80 }}>Meters:</Text>
+            <Text strong style={{ minWidth: 80 }}>
+              Meters:
+            </Text>
             <Select
               mode="multiple"
               allowClear
               placeholder={loadingDevices ? 'Loading devices…' : 'All meters (leave empty)'}
               style={{ minWidth: 360, flex: 1 }}
               value={selectedDeviceIds}
-              onChange={(v) => { setSelectedDeviceIds(v); setOffset(0); }}
+              onChange={(v) => {
+                setSelectedDeviceIds(v);
+                setOffset(0);
+              }}
               options={deviceOptions}
               maxTagCount="responsive"
               showSearch
@@ -123,8 +205,11 @@ export function MeasurementsPage() {
             <Text strong>Preview rows:</Text>
             <Select
               value={limit}
-              onChange={(v) => { setLimit(v); setOffset(0); }}
+              onChange={(v) => {
-              options={PREVIEW_LIMIT_OPTIONS.map(n => ({ value: n, label: n.toString() }))}
+                setLimit(v);
+                setOffset(0);
+              }}
+              options={PREVIEW_LIMIT_OPTIONS.map((n) => ({ value: n, label: n.toString() }))}
               style={{ width: 96 }}
             />
             <Text type="secondary">·</Text>
@@ -146,7 +231,8 @@ export function MeasurementsPage() {
 
       {error && (
         <Alert
-          type="error" showIcon
+          type="error"
+          showIcon
           message="Failed to load measurements"
           description={(error as Error).message}
         />
@@ -158,7 +244,9 @@ export function MeasurementsPage() {
             <Text strong>Measurements</Text>
             <Tag color="blue">{totalCount.toLocaleString()} rows match</Tag>
             {selectedDeviceIds.length > 0 && (
-              <Tag>{selectedDeviceIds.length} meter{selectedDeviceIds.length === 1 ? '' : 's'} selected</Tag>
+              <Tag>
+                {selectedDeviceIds.length} meter{selectedDeviceIds.length === 1 ? '' : 's'} selected
+              </Tag>
             )}
           </Space>
         }
@@ -171,11 +259,14 @@ export function MeasurementsPage() {
               type="primary"
               icon={<DownloadOutlined />}
               disabled={totalCount === 0}
-              onClick={() => downloadRawMeasurementsExport({
+              onClick={() =>
-                fromUtc: fromIso, toUtc: toIso,
+                downloadRawMeasurementsExport({
+                  fromUtc: fromIso,
+                  toUtc: toIso,
                   deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
                   rowCap: exportRowCap,
-              })}
+                })
+              }
             >
               Export to Excel
             </Button>
@@ -199,7 +290,10 @@ export function MeasurementsPage() {
               : `Showing ${showingFrom.toLocaleString()}–${showingTo.toLocaleString()} of ${totalCount.toLocaleString()}`}
           </Text>
           <Space>
-            <Button disabled={!canPrev || isFetching} onClick={() => setOffset(Math.max(0, offset - limit))}>
+            <Button
+              disabled={!canPrev || isFetching}
+              onClick={() => setOffset(Math.max(0, offset - limit))}
+            >
               Previous
             </Button>
             <Button disabled={!canNext || isFetching} onClick={() => setOffset(offset + limit)}>

portal/frontend/src/pages/MyProfilePage.tsx

@@ -1,10 +1,22 @@
 import { useState } from 'react';
 import {
-  Alert, Button, Card, Col, Descriptions, Form, Input, Row, Space, Tag, Typography, message,
+  Alert,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Form,
+  Input,
+  Row,
+  Space,
+  Tag,
+  Typography,
+  message,
 } from 'antd';
 import { LockOutlined, SaveOutlined, UserOutlined } from '@ant-design/icons';
 import { useAuth } from '../hooks/useAuth';
 import { changeMyPassword, updateMyProfile } from '../api/auth';
+import { extractApiError } from '../api/client';
 
 const { Title, Text } = Typography;
 
@@ -37,7 +49,7 @@ export function MyProfilePage() {
       setUser(updated);
       message.success('Profile updated');
     } catch (err: unknown) {
-      setProfileError(extractError(err));
+      setProfileError(extractApiError(err));
     } finally {
       setSavingProfile(false);
     }
@@ -51,7 +63,7 @@ export function MyProfilePage() {
       passwordForm.resetFields();
       message.success('Password changed');
     } catch (err: unknown) {
-      setPasswordError(extractError(err));
+      setPasswordError(extractApiError(err));
     } finally {
       setSavingPassword(false);
     }
@@ -60,20 +72,39 @@ export function MyProfilePage() {
   return (
     <Row gutter={[24, 24]}>
       <Col xs={24} md={12}>
-        <Card title={<Space><UserOutlined /><Title level={5} style={{ margin: 0 }}>My profile</Title></Space>}>
+        <Card
+          title={
+            <Space>
+              <UserOutlined />
+              <Title level={5} style={{ margin: 0 }}>
+                My profile
+              </Title>
+            </Space>
+          }
+        >
           <Descriptions size="small" column={1} style={{ marginBottom: 16 }}>
             <Descriptions.Item label="Email">
               <Text code>{user.email}</Text>
-              <Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>(read-only)</Text>
+              <Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>
+                (read-only)
+              </Text>
             </Descriptions.Item>
             <Descriptions.Item label="Roles">
-              {user.roles.length === 0
+              {user.roles.length === 0 ? (
-                ? <Tag>User</Tag>
+                <Tag>User</Tag>
-                : user.roles.map(r => <Tag color={r === 'Admin' ? 'blue' : undefined} key={r}>{r}</Tag>)}
+              ) : (
+                user.roles.map((r) => (
+                  <Tag color={r === 'Admin' ? 'blue' : undefined} key={r}>
+                    {r}
+                  </Tag>
+                ))
+              )}
             </Descriptions.Item>
           </Descriptions>
 
-          {profileError && <Alert type="error" message={profileError} style={{ marginBottom: 16 }} />}
+          {profileError && (
+            <Alert type="error" message={profileError} style={{ marginBottom: 16 }} />
+          )}
 
           <Form<ProfileFormValues>
             form={profileForm}
@@ -93,7 +124,12 @@ export function MyProfilePage() {
               <Input autoComplete="name" />
             </Form.Item>
             <Form.Item style={{ marginBottom: 0 }}>
-              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={savingProfile}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                icon={<SaveOutlined />}
+                loading={savingProfile}
+              >
                 Save profile
               </Button>
             </Form.Item>
@@ -102,8 +138,19 @@ export function MyProfilePage() {
       </Col>
 
       <Col xs={24} md={12}>
-        <Card title={<Space><LockOutlined /><Title level={5} style={{ margin: 0 }}>Change password</Title></Space>}>
+        <Card
-          {passwordError && <Alert type="error" message={passwordError} style={{ marginBottom: 16 }} />}
+          title={
+            <Space>
+              <LockOutlined />
+              <Title level={5} style={{ margin: 0 }}>
+                Change password
+              </Title>
+            </Space>
+          }
+        >
+          {passwordError && (
+            <Alert type="error" message={passwordError} style={{ marginBottom: 16 }} />
+          )}
 
           <Form<PasswordFormValues>
             form={passwordForm}
@@ -151,7 +198,12 @@ export function MyProfilePage() {
               <Input.Password autoComplete="new-password" />
             </Form.Item>
             <Form.Item style={{ marginBottom: 0 }}>
-              <Button type="primary" htmlType="submit" icon={<LockOutlined />} loading={savingPassword}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                icon={<LockOutlined />}
+                loading={savingPassword}
+              >
                 Change password
               </Button>
             </Form.Item>
@@ -161,11 +213,3 @@ export function MyProfilePage() {
     </Row>
   );
 }
-
-function extractError(err: unknown): string {
-  if (typeof err === 'object' && err !== null && 'response' in err) {
-    const data = (err as { response?: { data?: { error?: string } } }).response?.data;
-    if (data?.error) return data.error;
-  }
-  return 'Request failed.';
-}

portal/frontend/src/pages/UsersPage.tsx

@@ -1,7 +1,13 @@
 import { useState } from 'react';
 import { Card, Button, Table, Tag, Popconfirm, Modal, Input, Space, message } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, ApartmentOutlined } from '@ant-design/icons';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  KeyOutlined,
+  ApartmentOutlined,
+} from '@ant-design/icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   listUsers,
@@ -13,6 +19,7 @@ import {
   type CreateUserPayload,
   type UpdateUserPayload,
 } from '../api/users';
+import { extractApiError } from '../api/client';
 import { UserFormDrawer } from '../components/users/UserFormDrawer';
 import { CustomerAccessModal } from '../components/users/CustomerAccessModal';
 import { useAppInfo } from '../hooks/useAppInfo';
@@ -43,18 +50,19 @@ export function UsersPage() {
       setDrawerError(null);
       invalidate();
     },
-    onError: (err: unknown) => setDrawerError(errorMessage(err)),
+    onError: (err: unknown) => setDrawerError(extractApiError(err)),
   });
 
   const updateMut = useMutation({
-    mutationFn: ({ id, payload }: { id: string; payload: UpdateUserPayload }) => updateUser(id, payload),
+    mutationFn: ({ id, payload }: { id: string; payload: UpdateUserPayload }) =>
+      updateUser(id, payload),
     onSuccess: () => {
       message.success('User updated');
       setDrawerMode(null);
       setDrawerError(null);
       invalidate();
     },
-    onError: (err: unknown) => setDrawerError(errorMessage(err)),
+    onError: (err: unknown) => setDrawerError(extractApiError(err)),
   });
 
   const deleteMut = useMutation({
@@ -63,7 +71,7 @@ export function UsersPage() {
       message.success('User deleted');
       invalidate();
     },
-    onError: (err: unknown) => message.error(errorMessage(err)),
+    onError: (err: unknown) => message.error(extractApiError(err)),
   });
 
   const resetMut = useMutation({
@@ -74,7 +82,7 @@ export function UsersPage() {
       setResetTarget(null);
       setResetValue('');
     },
-    onError: (err: unknown) => message.error(errorMessage(err)),
+    onError: (err: unknown) => message.error(extractApiError(err)),
   });
 
   const handleSubmit = async (values: CreateUserPayload | UpdateUserPayload) => {
@@ -94,15 +102,22 @@ export function UsersPage() {
       dataIndex: 'roles',
       key: 'roles',
       render: (roles: string[]) =>
-        roles.length === 0
+        roles.length === 0 ? (
-          ? <Tag>User</Tag>
+          <Tag>User</Tag>
-          : roles.map((r) => <Tag color={r === 'Admin' ? 'blue' : undefined} key={r}>{r}</Tag>),
+        ) : (
+          roles.map((r) => (
+            <Tag color={r === 'Admin' ? 'blue' : undefined} key={r}>
+              {r}
+            </Tag>
+          ))
+        ),
     },
     {
       title: 'Active',
       dataIndex: 'isActive',
       key: 'isActive',
-      render: (active: boolean) => active ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
+      render: (active: boolean) =>
+        active ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Created',
@@ -118,23 +133,25 @@ export function UsersPage() {
           <Button
             size="small"
             icon={<EditOutlined />}
-            onClick={() => { setDrawerError(null); setDrawerMode({ kind: 'edit', user }); }}
+            onClick={() => {
+              setDrawerError(null);
+              setDrawerMode({ kind: 'edit', user });
+            }}
           >
             Edit
           </Button>
           {isAdminMode && user.roles.includes('RestrictedAdmin') && (
-            <Button
+            <Button size="small" icon={<ApartmentOutlined />} onClick={() => setAccessTarget(user)}>
-              size="small"
-              icon={<ApartmentOutlined />}
-              onClick={() => setAccessTarget(user)}
-            >
               Customer access
             </Button>
           )}
           <Button
             size="small"
             icon={<KeyOutlined />}
-            onClick={() => { setResetValue(''); setResetTarget(user); }}
+            onClick={() => {
+              setResetValue('');
+              setResetTarget(user);
+            }}
           >
             Reset password
           </Button>
@@ -144,7 +161,9 @@ export function UsersPage() {
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteMut.mutate(user.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
+            <Button size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -158,7 +177,10 @@ export function UsersPage() {
         <Button
           type="primary"
           icon={<PlusOutlined />}
-          onClick={() => { setDrawerError(null); setDrawerMode({ kind: 'create' }); }}
+          onClick={() => {
+            setDrawerError(null);
+            setDrawerMode({ kind: 'create' });
+          }}
         >
           New user
         </Button>
@@ -177,7 +199,10 @@ export function UsersPage() {
         mode={drawerMode}
         submitting={createMut.isPending || updateMut.isPending}
         error={drawerError}
-        onClose={() => { setDrawerMode(null); setDrawerError(null); }}
+        onClose={() => {
+          setDrawerMode(null);
+          setDrawerError(null);
+        }}
         onSubmit={handleSubmit}
       />
 
@@ -185,7 +210,10 @@ export function UsersPage() {
         title={resetTarget ? `Reset password for ${resetTarget.email}` : 'Reset password'}
         open={resetTarget !== null}
         confirmLoading={resetMut.isPending}
-        onCancel={() => { setResetTarget(null); setResetValue(''); }}
+        onCancel={() => {
+          setResetTarget(null);
+          setResetValue('');
+        }}
         onOk={() => resetTarget && resetMut.mutate({ id: resetTarget.id, newPassword: resetValue })}
         okText="Reset"
         okButtonProps={{ disabled: resetValue.length < 8 }}
@@ -206,12 +234,3 @@ export function UsersPage() {
     </Card>
   );
 }
-
-function errorMessage(err: unknown): string {
-  if (typeof err === 'object' && err !== null && 'response' in err) {
-    const data = (err as { response?: { data?: { error?: string; errors?: string[] } } }).response?.data;
-    if (data?.error) return data.error;
-    if (data?.errors?.length) return data.errors.join('; ');
-  }
-  return 'Request failed.';
-}

portal/frontend/src/test/setup.ts

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// React Testing Library auto-cleans between tests; we still want to reset
+// any spies/mocks per test for predictable behaviour.
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+// AntD's responsive observer uses matchMedia which jsdom doesn't implement.
+// Stub with a plain function (not vi.fn()) so vi.restoreAllMocks() in afterEach
+// doesn't strip its implementation between tests.
+const noop = () => undefined;
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: noop, // legacy
+    removeListener: noop, // legacy
+    addEventListener: noop,
+    removeEventListener: noop,
+    dispatchEvent: () => false,
+  }),
+});
+
+// ResizeObserver is used by AntD Layout — also missing in jsdom.
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as unknown as { ResizeObserver: typeof MockResizeObserver }).ResizeObserver =
+  MockResizeObserver;

portal/frontend/vite.config.ts

@@ -1,4 +1,7 @@
-import { defineConfig } from 'vite';
+// defineConfig from vitest/config is a superset of vite's — it accepts the
+// `test` block. Importing it here keeps vite.config.ts the single source of
+// truth for both the dev/build config and the test config.
+import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
@@ -20,4 +23,12 @@ export default defineConfig({
     outDir: 'dist',
     sourcemap: true,
   },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    css: false,
+    // AntD's reset.css is imported in main.tsx — skip it for tests.
+    // No `globals: true` — test files import describe/it/expect/vi from 'vitest'
+    // explicitly. Less magic, no tsconfig types array required.
+  },
 });