portal/frontend/.prettierignore

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

portal/frontend/.prettierrc.json

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

portal/frontend/eslint.config.js

@@ -1,55 +0,0 @@
-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,23 +6,7 @@
   "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",
@@ -37,26 +21,10 @@
     "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",
-    "typescript-eslint": "^8.59.4",
+    "vite": "^6.0.0"
-    "vite": "^6.0.0",
-    "vitest": "^3.2.4"
   }
 }

portal/frontend/src/App.tsx

@@ -1,16 +1,5 @@
-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';
@@ -18,52 +7,20 @@ 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';
-// Pages are code-split — each one ships in its own chunk and is fetched on
+import { DashboardPage } from './pages/DashboardPage';
-// demand. Keeps ECharts (DashboardPage), date utilities, and Admin-only pages
+import { DashboardsPage } from './pages/DashboardsPage';
-// out of the first-paint bundle for users who never visit them. The shim
+import { MeasurementsPage } from './pages/MeasurementsPage';
-// `m => ({ default: m.X })` adapts named exports to React.lazy's default-export
+import { MyProfilePage } from './pages/MyProfilePage';
-// expectation; cheaper than converting every page to a default export.
+import { AdminSitesPage } from './pages/AdminSitesPage';
-const LoginPage = lazy(() => import('./pages/LoginPage').then((m) => ({ default: m.LoginPage })));
+import { AdminCustomersPage } from './pages/AdminCustomersPage';
-const DashboardPage = lazy(() =>
+import { AdminCustomerDetailPage } from './pages/AdminCustomerDetailPage';
-  import('./pages/DashboardPage').then((m) => ({ default: m.DashboardPage })),
+import { SettingsPage } from './pages/SettingsPage';
-);
-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}>
@@ -72,66 +29,61 @@ export default function App() {
           <ThemedRoot>
             <AuthProvider>
               <BrowserRouter>
-                <Suspense fallback={<PageFallback />}>
+                <Routes>
-                  <Routes>
+                  <Route path="/login" element={<LoginPage />} />
-                    <Route path="/login" element={<LoginPage />} />
+                  <Route
+                    path="/"
+                    element={
+                      <RequireAuth>
+                        <AppLayout />
+                      </RequireAuth>
+                    }
+                  >
+                    <Route index element={<DashboardPage />} />
+                    <Route path="dashboards" element={<DashboardsPage />} />
+                    <Route path="measurements" element={<MeasurementsPage />} />
+                    <Route path="profile" element={<MyProfilePage />} />
                     <Route
-                      path="/"
+                      path="admin/sites"
                       element={
-                        <RequireAuth>
+                        <RequireRole role="Admin">
-                          <AppLayout />
+                          <AdminSitesPage />
-                        </RequireAuth>
+                        </RequireRole>
                       }
-                    >
+                    />
-                      <Route index element={<DashboardPage />} />
+                    <Route
-                      <Route path="dashboards" element={<DashboardsPage />} />
+                      path="admin/customers"
-                      <Route path="measurements" element={<MeasurementsPage />} />
+                      element={
-                      <Route path="profile" element={<MyProfilePage />} />
+                        <RequireRole role="Admin">
-                      <Route
+                          <AdminCustomersPage />
-                        path="admin/sites"
+                        </RequireRole>
-                        element={
+                      }
-                          <RequireRole role="Admin">
+                    />
-                            <AdminSitesPage />
+                    <Route
-                          </RequireRole>
+                      path="admin/customers/:id"
-                        }
+                      element={
-                      />
+                        <RequireRole role="Admin">
-                      <Route
+                          <AdminCustomerDetailPage />
-                        path="admin/customers"
+                        </RequireRole>
-                        element={
+                      }
-                          <RequireRole role="Admin">
+                    />
-                            <AdminCustomersPage />
+                    <Route
-                          </RequireRole>
+                      path="settings"
-                        }
+                      element={
-                      />
+                        <RequireRole role="Admin">
-                      <Route
+                          <SettingsPage />
-                        path="admin/customers/:id"
+                        </RequireRole>
-                        element={
+                      }
-                          <RequireRole role="Admin">
+                    />
-                            <AdminCustomerDetailPage />
+                    <Route path="admin/users" element={<Navigate to="/settings" replace />} />
-                          </RequireRole>
+                  </Route>
-                        }
+                  <Route path="*" element={<Navigate to="/" replace />} />
-                      />
+                </Routes>
-                      <Route
-                        path="settings"
-                        element={
-                          <RequireRole role="Admin">
-                            <SettingsPage />
-                          </RequireRole>
-                        }
-                      />
-                      <Route path="admin/users" element={<Navigate to="/settings" replace />} />
-                    </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,10 +30,7 @@ export async function updateMyProfile(displayName: string): Promise<CurrentUser>
   return data;
 }
 
-export async function changeMyPassword(
+export async function changeMyPassword(currentPassword: string, newPassword: string): Promise<void> {
-  currentPassword: string,
-  newPassword: string,
-): Promise<void> {
   await api.post('/auth/me/change-password', { currentPassword, newPassword });
 }
 

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

@@ -1,32 +0,0 @@
-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,41 +1,7 @@
-import axios, { type AxiosError } from 'axios';
+import axios 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,10 +24,7 @@ export interface DashboardSummary {
   chart: DashboardChartPoint[];
 }
 
-export async function fetchDashboardSummary(
+export async function fetchDashboardSummary(fromUtc: string, toUtc: string): Promise<DashboardSummary> {
-  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,8 +151,9 @@ export async function fetchFleetCustomerCost(
   fromUtc: string,
   toUtc: string,
 ): Promise<FleetCost> {
-  const { data } = await api.get<FleetCost>(`/fleet/customers/${id}/cost`, {
+  const { data } = await api.get<FleetCost>(
-    params: { from: fromUtc, to: toUtc },
+    `/fleet/customers/${id}/cost`,
-  });
+    { params: { from: fromUtc, to: toUtc } },
+  );
   return data;
 }

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

@@ -1,81 +0,0 @@
-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,8 +46,7 @@ export async function fetchRawMeasurements(params: {
     params: {
       from: params.fromUtc,
       to: params.toUtc,
-      deviceIds:
+      deviceIds: params.deviceIds && params.deviceIds.length > 0 ? params.deviceIds.join(',') : undefined,
-        params.deviceIds && params.deviceIds.length > 0 ? params.deviceIds.join(',') : undefined,
       limit: params.limit,
       offset: params.offset,
     },
@@ -65,8 +64,7 @@ export function downloadRawMeasurementsExport(params: {
     from: params.fromUtc,
     to: params.toUtc,
   });
-  if (params.deviceIds && params.deviceIds.length > 0)
+  if (params.deviceIds && params.deviceIds.length > 0) q.set('deviceIds', params.deviceIds.join(','));
-    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,9 +77,7 @@ export async function deleteMunicipality(id: number): Promise<void> {
 }
 
 export async function listTariffs(municipalityId: number): Promise<TariffSummary[]> {
-  const { data } = await api.get<TariffSummary[]>(
+  const { data } = await api.get<TariffSummary[]>(`/rates/municipalities/${municipalityId}/tariffs`);
-    `/rates/municipalities/${municipalityId}/tariffs`,
-  );
   return data;
 }
 
@@ -88,10 +86,7 @@ export async function getTariff(tariffId: number): Promise<TariffDetail> {
   return data;
 }
 
-export async function createTariff(
+export async function createTariff(municipalityId: number, payload: UpsertTariff): Promise<TariffDetail> {
-  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,9 +9,7 @@ export function RequireAuth({ children }: { children: ReactNode }) {
 
   if (loading) {
     return (
-      <div
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
-      >
         <Spin size="large" />
       </div>
     );

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

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

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

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

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

@@ -53,19 +53,16 @@ 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 within
+        work for 24h. Update the customer's <Text code>.env</Text> and restart their portal
-        that window to avoid dropped pushes.
+        within 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}>
+        <Button icon={<CopyOutlined />} onClick={copy}>Copy</Button>
-          Copy
-        </Button>
       </Space.Compact>
       <Paragraph style={{ marginTop: 16 }}>
         <Button onClick={() => setConfirmed(true)} disabled={confirmed}>

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

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

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

@@ -1,17 +1,5 @@
 import { useEffect, useState } from 'react';
-import {
+import { Form, Input, Button, Row, Col, Card, Upload, ColorPicker, Space, message, Typography } from 'antd';
-  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';
@@ -38,10 +26,7 @@ export function BrandingForm() {
   const [form] = Form.useForm<FormShape>();
   const [preview, setPreview] = useState<Branding | null>(null);
 
-  const { data: branding, isLoading } = useQuery({
+  const { data: branding, isLoading } = useQuery({ queryKey: ['branding'], queryFn: fetchBranding });
-    queryKey: ['branding'],
-    queryFn: fetchBranding,
-  });
 
   useEffect(() => {
     if (!branding) return;
@@ -90,8 +75,7 @@ export function BrandingForm() {
 
   const beforeUpload = (file: UploadFile) => {
     if (file instanceof File) uploadMut.mutate(file);
-    else if ('originFileObj' in file && file.originFileObj)
+    else if ('originFileObj' in file && file.originFileObj) uploadMut.mutate(file.originFileObj as File);
-      uploadMut.mutate(file.originFileObj as File);
     return false;
   };
 
@@ -119,13 +103,7 @@ export function BrandingForm() {
                 <img
                   src={preview.logoUrl}
                   alt="Current logo"
-                  style={{
+                  style={{ maxHeight: 64, maxWidth: 200, background: '#f5f5f5', padding: 8, borderRadius: 4 }}
-                    maxHeight: 64,
-                    maxWidth: 200,
-                    background: '#f5f5f5',
-                    padding: 8,
-                    borderRadius: 4,
-                  }}
                 />
               )}
               <Upload
@@ -165,12 +143,7 @@ export function BrandingForm() {
           </Form.Item>
 
           <Form.Item>
-            <Button
+            <Button type="primary" htmlType="submit" loading={saveMut.isPending} icon={<SaveOutlined />}>
-              type="primary"
-              htmlType="submit"
-              loading={saveMut.isPending}
-              icon={<SaveOutlined />}
-            >
               Save branding
             </Button>
           </Form.Item>
@@ -191,22 +164,11 @@ export function BrandingForm() {
             }}
           >
             {preview?.logoUrl && (
-              <img
+              <img src={preview.logoUrl} alt="" style={{ maxHeight: 28, background: '#fff', padding: 2, borderRadius: 2 }} />
-                src={preview.logoUrl}
-                alt=""
-                style={{ maxHeight: 28, background: '#fff', padding: 2, borderRadius: 2 }}
-              />
             )}
             <strong>{preview?.applicationName || 'Application name'}</strong>
           </div>
-          <div
+          <div style={{ background: preview?.secondaryColor ?? '#374151', color: '#fff', padding: 8, marginTop: 4 }}>
-            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,13 +25,7 @@ export function ConfigOverviewCard() {
 
       {data && (
         <>
-          <Descriptions
+          <Descriptions title="Application" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            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'}>
@@ -46,13 +40,7 @@ export function ConfigOverviewCard() {
             <Descriptions.Item label="Public URL">{data.application.publicUrl}</Descriptions.Item>
           </Descriptions>
 
-          <Descriptions
+          <Descriptions title="Database" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            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>
@@ -61,130 +49,62 @@ 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 ? (
+              {data.database.migrateOnStartup ? <Tag color="green">Yes</Tag> : <Tag color="red">No</Tag>}
-                <Tag color="green">Yes</Tag>
-              ) : (
-                <Tag color="red">No</Tag>
-              )}
             </Descriptions.Item>
             <Descriptions.Item label="Auto-provision local Timescale" span={2}>
-              {data.database.autoProvisionLocalTimescaleDb ? (
+              {data.database.autoProvisionLocalTimescaleDb ? <Tag>Yes</Tag> : <Tag color="green">No</Tag>}
-                <Tag>Yes</Tag>
-              ) : (
-                <Tag color="green">No</Tag>
-              )}
             </Descriptions.Item>
           </Descriptions>
 
-          <Descriptions
+          <Descriptions title="Grafana" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            title="Grafana"
+            <Descriptions.Item label="Base URL" span={2}>{data.grafana.baseUrl}</Descriptions.Item>
-            column={2}
+            <Descriptions.Item label="Internal URL" span={2}>{data.grafana.internalUrl}</Descriptions.Item>
-            size="small"
+            <Descriptions.Item label="Embed path prefix">{data.grafana.embedPathPrefix}</Descriptions.Item>
-            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">
+            <Descriptions.Item label="Default dashboard UID">{data.grafana.defaultDashboardUid || '(unset)'}</Descriptions.Item>
-              {data.grafana.defaultDashboardUid || '(unset)'}
+            <Descriptions.Item label="Dashboards configured" span={2}>{data.grafana.dashboardCount}</Descriptions.Item>
-            </Descriptions.Item>
-            <Descriptions.Item label="Dashboards configured" span={2}>
-              {data.grafana.dashboardCount}
-            </Descriptions.Item>
           </Descriptions>
 
-          <Descriptions
+          <Descriptions title="Monitoring" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            title="Monitoring"
+            <Descriptions.Item label="Chunk time interval">{data.monitoring.chunkTimeInterval}</Descriptions.Item>
-            column={2}
-            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 ? (
+              {data.monitoring.enableHourlyAggregates ? <Tag color="orange">Flag set (not implemented)</Tag> : 'No'}
-                <Tag color="orange">Flag set (not implemented)</Tag>
-              ) : (
-                'No'
-              )}
             </Descriptions.Item>
           </Descriptions>
 
-          <Descriptions
+          <Descriptions title="Authentication" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-            title="Authentication"
+            <Descriptions.Item label="Cookie name">{data.authentication.cookieName}</Descriptions.Item>
-            column={2}
+            <Descriptions.Item label="Require confirmed email">{data.authentication.requireConfirmedEmail ? 'Yes' : 'No'}</Descriptions.Item>
-            size="small"
+            <Descriptions.Item label="Default admin email" span={2}>{data.authentication.defaultAdminEmail}</Descriptions.Item>
-            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">
+            <Descriptions.Item label="Assembly version">{data.build.assemblyVersion}</Descriptions.Item>
-              {data.build.assemblyVersion}
-            </Descriptions.Item>
             <Descriptions.Item label=".NET runtime">{data.build.framework}</Descriptions.Item>
-            <Descriptions.Item label="Started" span={2}>
+            <Descriptions.Item label="Started" span={2}>{new Date(data.build.startedAtUtc).toLocaleString()}</Descriptions.Item>
-              {new Date(data.build.startedAtUtc).toLocaleString()}
-            </Descriptions.Item>
           </Descriptions>
 
           {data.fleetIngest && (
             <>
-              <Descriptions
+              <Descriptions title="Fleet push (Client → Admin)" column={2} size="small" bordered style={{ marginBottom: 16 }}>
-                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>
@@ -210,44 +130,23 @@ export function ConfigOverviewCard() {
 }
 
 const pushStateColumns: ColumnsType<FleetPushStateRow> = [
+  { title: 'Resource', dataIndex: 'resourceType', key: 'rt', render: (v: string) => <Text strong>{v}</Text> },
   {
-    title: 'Resource',
+    title: 'Last cursor', dataIndex: 'lastCursor', key: 'lc',
-    dataIndex: 'resourceType',
+    render: (v: string | null) => v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>
-    key: 'rt',
-    render: (v: string) => <Text strong>{v}</Text>,
   },
   {
-    title: 'Last cursor',
+    title: 'Last sync', dataIndex: 'lastSyncedAt', key: 'ls',
-    dataIndex: 'lastCursor',
+    render: (v: string | null) => v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>
-    key: 'lc',
-    render: (v: string | null) =>
-      v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>,
   },
   {
-    title: 'Last sync',
+    title: 'Failures', dataIndex: 'consecutiveFailures', key: 'cf',
-    dataIndex: 'lastSyncedAt',
+    render: (n: number) => n === 0
-    key: 'ls',
+      ? <Tag color="green">0</Tag>
-    render: (v: string | null) =>
+      : <Tag color={n > 5 ? 'red' : 'orange'}>{n}</Tag>
-      v ? new Date(v).toLocaleString() : <Text type="secondary">never</Text>,
   },
   {
-    title: 'Failures',
+    title: 'Last error', dataIndex: 'lastError', key: 'le',
-    dataIndex: 'consecutiveFailures',
+    render: (v: string | null) => v ? <Text type="danger" style={{ fontSize: 12 }}>{v}</Text> : <Text type="secondary">—</Text>
-    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,10 +11,7 @@ interface DashboardRow extends GrafanaDashboard {
 }
 
 export function GrafanaInfoCard() {
-  const { data, isLoading } = useQuery({
+  const { data, isLoading } = useQuery({ queryKey: ['grafana-config'], queryFn: fetchGrafanaConfig });
-    queryKey: ['grafana-config'],
-    queryFn: fetchGrafanaConfig,
-  });
 
   const baseUrl = data?.baseUrl?.replace(/\/$/, '') ?? '';
   const rows: DashboardRow[] = (data?.dashboards ?? []).map((d) => ({
@@ -41,9 +38,7 @@ export function GrafanaInfoCard() {
       key: 'url',
       render: (url: string) => (
         <Space>
-          <Text code style={{ fontSize: 11 }}>
+          <Text code style={{ fontSize: 11 }}>{url}</Text>
-            {url}
-          </Text>
           <Button size="small" icon={<CopyOutlined />} onClick={() => copy(url)} />
         </Space>
       ),
@@ -57,11 +52,7 @@ export function GrafanaInfoCard() {
           <Space>
             <Text code>{data?.baseUrl}</Text>
             {data?.baseUrl && (
-              <Button
+              <Button size="small" icon={<LinkOutlined />} onClick={() => window.open(data.baseUrl, '_blank')}>
-                size="small"
-                icon={<LinkOutlined />}
-                onClick={() => window.open(data.baseUrl, '_blank')}
-              >
                 Open
               </Button>
             )}
@@ -70,14 +61,12 @@ export function GrafanaInfoCard() {
         <Descriptions.Item label="Default dashboard UID">
           <Text code>{data?.defaultDashboardUid || '(unset)'}</Text>
         </Descriptions.Item>
-        <Descriptions.Item label="Dashboards configured">
+        <Descriptions.Item label="Dashboards configured">{data?.dashboards.length ?? 0}</Descriptions.Item>
-          {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
+        Add dashboards by dropping JSON into <Text code>grafana/dashboards/</Text> and adding a matching entry
-        matching entry to <Text code>Grafana.Dashboards</Text> in configuration.
+        to <Text code>Grafana.Dashboards</Text> in configuration.
       </Paragraph>
 
       <Table<DashboardRow>

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

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

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

@@ -68,10 +68,7 @@ export function PeriodEditor({ value, onChange }: Props) {
               {DAY_OPTIONS.map((d, dIdx) => {
                 const active = (p.daysOfWeek & d.value) !== 0;
                 return (
-                  <Tooltip
+                  <Tooltip key={dIdx} title={['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][dIdx]}>
-                    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,33 +1,17 @@
 import { useEffect, useState } from 'react';
 import {
-  Drawer,
+  Drawer, Form, Input, InputNumber, Switch, DatePicker, Row, Col, Button, Space, Alert, Typography,
-  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 {
+import { createTariff, updateTariff, type TariffDetail, type TariffPeriod, type UpsertTariff } from '../../../api/rates';
-  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 = { kind: 'create'; municipalityId: number } | { kind: 'edit'; tariff: TariffDetail };
+type Mode =
+  | { kind: 'create'; municipalityId: number }
+  | { kind: 'edit'; tariff: TariffDetail };
 
 interface Props {
   open: boolean;
@@ -90,7 +74,7 @@ export function TariffDrawer({ open, mode, onClose }: Props) {
       qc.invalidateQueries({ queryKey: ['municipalities'] });
       onClose();
     },
-    onError: (err: unknown) => setError(extractApiError(err, 'Save failed.')),
+    onError: (err: unknown) => setError(extractError(err)),
   });
 
   const handleSubmit = (values: FormShape) => {
@@ -127,11 +111,7 @@ 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
+            <Form.Item name="name" label="Tariff name" rules={[{ required: true, message: 'Required' }]}>
-              name="name"
-              label="Tariff name"
-              rules={[{ required: true, message: 'Required' }]}
-            >
               <Input />
             </Form.Item>
           </Col>
@@ -185,11 +165,17 @@ export function TariffDrawer({ open, mode, onClose }: Props) {
           </Col>
         </Row>
 
-        <Title level={5} style={{ marginTop: 8 }}>
+        <Title level={5} style={{ marginTop: 8 }}>Time-of-use periods</Title>
-          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,11 +111,7 @@ export function CustomerAccessModal({ open, user, onClose }: Props) {
                   onChange={() => toggle(c.id)}
                 >
                   <Text strong>{c.code}</Text> <Text type="secondary">— {c.name}</Text>
-                  {!c.isActive && (
+                  {!c.isActive && <Tag color="red" style={{ marginLeft: 8 }}>Disabled</Tag>}
-                    <Tag color="red" style={{ marginLeft: 8 }}>
-                      Disabled
-                    </Tag>
-                  )}
                 </Checkbox>
               ))}
             </Checkbox.Group>

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

@@ -4,7 +4,9 @@ import type { UserListItem, CreateUserPayload, UpdateUserPayload } from '../../a
 
 const { Text } = Typography;
 
-type Mode = { kind: 'create' } | { kind: 'edit'; user: UserListItem };
+type Mode =
+  | { kind: 'create' }
+  | { kind: 'edit'; user: UserListItem };
 
 interface Props {
   open: boolean;
@@ -97,9 +99,7 @@ export function UserFormDrawer({ open, mode, submitting, error, onClose, onSubmi
           <Form.Item
             name="password"
             label="Password"
-            rules={[
+            rules={[{ required: true, min: 8, message: 'Min 8 characters with upper, lower, and digit' }]}
-              { required: true, min: 8, message: 'Min 8 characters with upper, lower, and digit' },
-            ]}
           >
             <Input.Password autoComplete="new-password" />
           </Form.Item>
@@ -109,22 +109,15 @@ 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 }}>
+                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>Regular user — Dashboard + Dashboards only.</Text>
-                  Regular user — Dashboard + Dashboards only.
-                </Text>
               </Radio>
               <Radio value="admin">
                 <Text>Administrator</Text>
-                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
+                <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>Full access to all customers, settings, user mgmt.</Text>
-                  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 }}>
+                <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>
-                  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,44 +1,21 @@
 import { useState } from 'react';
 import {
-  Card,
+  Card, Descriptions, Tabs, Table, Tag, Typography, Button, Space, Spin, Result, Tooltip,
-  Descriptions,
+  DatePicker, Statistic, Row, Col, Alert,
-  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,
+  ArrowLeftOutlined, LineChartOutlined, ThunderboltOutlined, DollarOutlined, DownloadOutlined,
-  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,
+  fetchFleetCustomerDetail, fetchFleetCustomerCost,
-  fetchFleetCustomerCost,
+  type FleetSite, type FleetDevice,
-  type FleetSite,
+  type FleetRecentMeasurement, type FleetIngestEvent,
-  type FleetDevice,
+  type FleetTariffView, type FleetTariffPeriodView,
-  type FleetRecentMeasurement,
+  type FleetCostDay, type FleetCostDeviceRow,
-  type FleetIngestEvent,
-  type FleetTariffView,
-  type FleetTariffPeriodView,
-  type FleetCostDay,
-  type FleetCostDeviceRow,
 } from '../api/fleet';
 import { downloadFleetCustomerCostXlsx } from '../api/dashboard';
 import { fetchGrafanaConfig } from '../api/grafana';
@@ -70,122 +47,47 @@ export function AdminCustomerDetailPage() {
     return `${base}/d/${encodeURIComponent(CUSTOMER_DRILLDOWN_UID)}?orgId=1&kiosk=tv&theme=light&var-customer=${encodeURIComponent(data.id)}`;
   })();
 
-  if (isLoading)
+  if (isLoading) return <div style={{ textAlign: 'center', padding: 64 }}><Spin size="large" /></div>;
-    return (
-      <div style={{ textAlign: 'center', padding: 64 }}>
-        <Spin size="large" />
-      </div>
-    );
   if (error || !data) {
-    return (
+    return <Result status="404" title="Customer not found" extra={<Button onClick={() => navigate('/admin/customers')}>Back</Button>} />;
-      <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: 'Address',
+    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
-      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: 'External ID',
+    { title: 'Description', dataIndex: 'description', key: 'desc', render: v => v ?? <Text type="secondary">—</Text> },
-      dataIndex: 'externalId',
+    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
-      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: 'Active power (kW)',
+    { title: 'kWh imported (cumulative)', dataIndex: 'energyImportedKwh', key: 'e', render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
-      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: 'Time spread',
+    { title: 'Error', dataIndex: 'error', key: 'e', render: (v: string | null) => v ? <Tag color="red">{v}</Tag> : '—' },
-      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')}>
+          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/customers')}>Customers</Button>
-            Customers
+          <Text strong style={{ fontSize: 20 }}>{data.code} · {data.name}</Text>
-          </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
@@ -209,23 +111,9 @@ export function AdminCustomerDetailPage() {
       <Card size="small">
         <Descriptions column={3} size="small">
           <Descriptions.Item label="Customer ID">{data.id}</Descriptions.Item>
-          <Descriptions.Item label="Created">
+          <Descriptions.Item label="Created">{new Date(data.createdAt).toLocaleString()}</Descriptions.Item>
-            {new Date(data.createdAt).toLocaleString()}
+          <Descriptions.Item label="First seen">{data.firstSeenAt ? new Date(data.firstSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</Descriptions.Item>
-          </Descriptions.Item>
+          <Descriptions.Item label="Last seen" span={3}>{data.lastSeenAt ? new Date(data.lastSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</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>
 
@@ -236,64 +124,27 @@ export function AdminCustomerDetailPage() {
             {
               key: 'ingest',
               label: `Recent ingest (${data.recentIngestEvents.length})`,
-              children: (
+              children: <Table<FleetIngestEvent> rowKey="receivedAt" columns={eventCols} dataSource={data.recentIngestEvents} pagination={false} size="small" />,
-                <Table<FleetIngestEvent>
-                  rowKey="receivedAt"
-                  columns={eventCols}
-                  dataSource={data.recentIngestEvents}
-                  pagination={false}
-                  size="small"
-                />
-              ),
             },
             {
               key: 'measurements',
               label: `Recent measurements (${data.recentMeasurements.length})`,
-              children: (
+              children: <Table<FleetRecentMeasurement> rowKey={(r) => `${r.time}-${r.deviceId}`} columns={measCols} dataSource={data.recentMeasurements} pagination={false} size="small" />,
-                <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: (
+              children: <Table<FleetSite> rowKey="id" columns={siteCols} dataSource={data.sites} pagination={false} size="small" />,
-                <Table<FleetSite>
-                  rowKey="id"
-                  columns={siteCols}
-                  dataSource={data.sites}
-                  pagination={false}
-                  size="small"
-                />
-              ),
             },
             {
               key: 'devices',
               label: `Devices (${data.devices.length})`,
-              children: (
+              children: <Table<FleetDevice> rowKey="id" columns={deviceCols} dataSource={data.devices} pagination={false} size="small" />,
-                <Table<FleetDevice>
-                  rowKey="id"
-                  columns={deviceCols}
-                  dataSource={data.devices}
-                  pagination={false}
-                  size="small"
-                />
-              ),
             },
             {
               key: 'tariffs',
               label: `Tariffs (${data.tariffs.length})`,
-              children: (
+              children: <TariffsTab tariffs={data.tariffs} municipalitiesCount={data.municipalities.length} />,
-                <TariffsTab
-                  tariffs={data.tariffs}
-                  municipalitiesCount={data.municipalities.length}
-                />
-              ),
             },
             {
               key: 'cost',
@@ -308,13 +159,7 @@ export function AdminCustomerDetailPage() {
 }
 
 // ── Tariffs tab: collapsible per-tariff cards with the period table inline ─
-function TariffsTab({
+function TariffsTab({ tariffs, municipalitiesCount }: { tariffs: FleetTariffView[]; municipalitiesCount: number }) {
-  tariffs,
-  municipalitiesCount,
-}: {
-  tariffs: FleetTariffView[];
-  municipalitiesCount: number;
-}) {
   if (tariffs.length === 0) {
     return (
       <Text type="secondary">
@@ -325,26 +170,14 @@ function TariffsTab({
   }
 
   const periodCols: ColumnsType<FleetTariffPeriodView> = [
+    { title: 'Period', dataIndex: 'name', key: 'name', render: (v: string) => <Text strong>{v}</Text> },
     {
-      title: 'Period',
+      title: 'Days', dataIndex: 'daysOfWeek', key: 'd',
-      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 (
@@ -363,18 +196,13 @@ function TariffsTab({
           }
           extra={
             <Text type="secondary" style={{ fontSize: 12 }}>
-              {t.effectiveFrom}
+              {t.effectiveFrom}{t.effectiveTo ? ` → ${t.effectiveTo}` : ' →'}
-              {t.effectiveTo ? ` → ${t.effectiveTo}` : ' →'}
             </Text>
           }
         >
           <Descriptions size="small" column={3} style={{ marginBottom: 12 }}>
-            <Descriptions.Item label="Default rate">
+            <Descriptions.Item label="Default rate">{t.defaultRatePerKwh.toFixed(4)}/kWh</Descriptions.Item>
-              {t.defaultRatePerKwh.toFixed(4)}/kWh
+            <Descriptions.Item label="Fixed monthly">{t.fixedMonthlyCharge.toFixed(2)}</Descriptions.Item>
-            </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 ? (
@@ -419,35 +247,18 @@ 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: 'Device',
+      title: 'Municipality', dataIndex: 'municipalityName', key: 'm',
-      dataIndex: 'deviceName',
+      render: (v: string | null) => v ?? <Text type="secondary">—</Text>
-      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 (
@@ -459,19 +270,11 @@ function CostTab({ customerId }: { customerId: string }) {
             allowClear={false}
             value={range}
             showTime={false}
-            onChange={(v) =>
+            onChange={(v) => v && v[0] && v[1] && setRange([v[0].startOf('day'), v[1].endOf('day')])}
-              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': [
+              'Last 7d': [dayjs().subtract(7, 'day').startOf('day'), dayjs().add(1, 'day').startOf('day')],
-                dayjs().subtract(7, 'day').startOf('day'),
+              'Last 30d': [dayjs().subtract(30, 'day').startOf('day'), dayjs().add(1, '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')],
             }}
           />
@@ -486,58 +289,15 @@ function CostTab({ customerId }: { customerId: string }) {
       </Space>
 
       {isLoading && <Spin />}
-      {error && (
+      {error && <Alert type="error" message="Failed to compute cost" description={(error as Error).message} />}
-        <Alert
-          type="error"
-          message="Failed to compute cost"
-          description={(error as Error).message}
-        />
-      )}
 
       {data && (
         <>
           <Row gutter={16}>
-            <Col span={6}>
+            <Col span={6}><Card><Statistic title="Total kWh" value={data.totalKwh} precision={3} prefix={<ThunderboltOutlined />} /></Card></Col>
-              <Card>
+            <Col span={6}><Card><Statistic title="Base cost" value={data.totalBaseCost} precision={2} prefix={<DollarOutlined />} /></Card></Col>
-                <Statistic
+            <Col span={6}><Card><Statistic title="VAT" value={data.totalVatAmount} precision={2} prefix={<DollarOutlined />} /></Card></Col>
-                  title="Total kWh"
+            <Col span={6}><Card><Statistic title="Total" value={data.totalCost} precision={2} valueStyle={{ color: '#3f8600' }} prefix={<DollarOutlined />} /></Card></Col>
-                  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 && (
@@ -558,21 +318,15 @@ function CostTab({ customerId }: { customerId: string }) {
 
           <Card title="Per day" size="small">
             <Table<FleetCostDay>
-              rowKey="date"
+              rowKey="date" size="small" pagination={false}
-              size="small"
+              columns={dayCols} dataSource={data.daily}
-              pagination={false}
-              columns={dayCols}
-              dataSource={data.daily}
             />
           </Card>
 
           <Card title="Per device" size="small">
             <Table<FleetCostDeviceRow>
-              rowKey="deviceId"
+              rowKey="deviceId" size="small" pagination={false}
-              size="small"
+              columns={deviceCols} dataSource={data.perDevice}
-              pagination={false}
-              columns={deviceCols}
-              dataSource={data.perDevice}
             />
           </Card>
         </>

portal/frontend/src/pages/AdminCustomersPage.tsx

@@ -5,18 +5,11 @@ import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
-  listCustomers,
+  listCustomers, createCustomer, updateCustomer, rotateCustomerToken, deleteCustomer,
-  createCustomer,
+  type CustomerListItem, type CreateCustomerPayload, type UpdateCustomerPayload,
-  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;
 
@@ -27,14 +20,8 @@ export function AdminCustomersPage() {
   const navigate = useNavigate();
   const [formMode, setFormMode] = useState<FormMode | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
-  const [tokenModal, setTokenModal] = useState<{
+  const [tokenModal, setTokenModal] = useState<{ open: boolean; code: string | null; token: string | null }>({
-    open: boolean;
+    open: false, code: null, token: null,
-    code: string | null;
-    token: string | null;
-  }>({
-    open: false,
-    code: null,
-    token: null,
   });
 
   const { data: customers = [], isLoading } = useQuery({
@@ -52,19 +39,18 @@ export function AdminCustomersPage() {
       setTokenModal({ open: true, code: result.customer.code, token: result.token });
       invalidate();
     },
-    onError: (err: unknown) => setFormError(extractApiError(err)),
+    onError: (err: unknown) => setFormError(extractError(err)),
   });
 
   const updateMut = useMutation({
-    mutationFn: ({ id, payload }: { id: string; payload: UpdateCustomerPayload }) =>
+    mutationFn: ({ id, payload }: { id: string; payload: UpdateCustomerPayload }) => updateCustomer(id, payload),
-      updateCustomer(id, payload),
     onSuccess: () => {
       message.success('Customer updated');
       setFormMode(null);
       setFormError(null);
       invalidate();
     },
-    onError: (err: unknown) => setFormError(extractApiError(err)),
+    onError: (err: unknown) => setFormError(extractError(err)),
   });
 
   const rotateMut = useMutation({
@@ -73,16 +59,13 @@ export function AdminCustomersPage() {
       setTokenModal({ open: true, code: result.customer.code, token: result.token });
       invalidate();
     },
-    onError: (err: unknown) => message.error(extractApiError(err)),
+    onError: (err: unknown) => message.error(extractError(err)),
   });
 
   const deleteMut = useMutation({
     mutationFn: (id: string) => deleteCustomer(id),
-    onSuccess: () => {
+    onSuccess: () => { message.success('Customer deleted'); invalidate(); },
-      message.success('Customer deleted');
+    onError: (err: unknown) => message.error(extractError(err)),
-      invalidate();
-    },
-    onError: (err: unknown) => message.error(extractApiError(err)),
   });
 
   const handleSubmit = (payload: CreateCustomerPayload | UpdateCustomerPayload) => {
@@ -101,8 +84,7 @@ export function AdminCustomersPage() {
       title: 'Status',
       dataIndex: 'isActive',
       key: 'isActive',
-      render: (v: boolean) =>
+      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>),
-        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Last push',
@@ -124,9 +106,7 @@ export function AdminCustomersPage() {
         return (
           <Space size={4} direction="vertical">
             {issued}
-            <Tooltip
+            <Tooltip title={`Old token still accepted by ingest until ${exp.toLocaleString()}. Customer ops should update their .env before then.`}>
-              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>
@@ -140,14 +120,7 @@ export function AdminCustomersPage() {
       key: 'actions',
       render: (_, c) => (
         <Space>
-          <Button
+          <Button size="small" icon={<EditOutlined />} onClick={() => { setFormError(null); setFormMode({ kind: 'edit', customer: c }); }}>
-            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.">
@@ -158,11 +131,7 @@ export function AdminCustomersPage() {
               okButtonProps={{ danger: true }}
               onConfirm={() => rotateMut.mutate(c.id)}
             >
-              <Button
+              <Button size="small" icon={<ReloadOutlined />} loading={rotateMut.isPending && rotateMut.variables === c.id}>
-                size="small"
-                icon={<ReloadOutlined />}
-                loading={rotateMut.isPending && rotateMut.variables === c.id}
-              >
                 Rotate token
               </Button>
             </Popconfirm>
@@ -174,9 +143,7 @@ export function AdminCustomersPage() {
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteMut.mutate(c.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>
+            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
-              Delete
-            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -190,10 +157,7 @@ export function AdminCustomersPage() {
         <Button
           type="primary"
           icon={<PlusOutlined />}
-          onClick={() => {
+          onClick={() => { setFormError(null); setFormMode({ kind: 'create' }); }}
-            setFormError(null);
-            setFormMode({ kind: 'create' });
-          }}
         >
           Register customer
         </Button>
@@ -220,10 +184,7 @@ export function AdminCustomersPage() {
         mode={formMode}
         submitting={createMut.isPending || updateMut.isPending}
         error={formError}
-        onClose={() => {
+        onClose={() => { setFormMode(null); setFormError(null); }}
-          setFormMode(null);
-          setFormError(null);
-        }}
         onSubmit={handleSubmit}
       />
 
@@ -236,3 +197,11 @@ 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,11 +1,7 @@
 import { Button, Card, Col, Row, Space, Statistic, Table, Tag, Typography, Empty } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import {
-  ApartmentOutlined,
+  ApartmentOutlined, ThunderboltOutlined, TeamOutlined, CheckCircleOutlined, DollarOutlined,
-  ThunderboltOutlined,
-  TeamOutlined,
-  CheckCircleOutlined,
-  DollarOutlined,
   DownloadOutlined,
 } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
@@ -27,38 +23,26 @@ export function AdminFleetDashboardPage() {
     { title: 'Code', dataIndex: 'code', key: 'code', render: (v) => <Text strong>{v}</Text> },
     { title: 'Name', dataIndex: 'name', key: 'name' },
     {
-      title: 'Status',
+      title: 'Status', dataIndex: 'isActive', key: 'active',
-      dataIndex: 'isActive',
+      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>)
-      key: 'active',
-      render: (v: boolean) =>
-        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
-      title: 'Last push',
+      title: 'Last push', dataIndex: 'lastSeenAt', key: 'last',
-      dataIndex: 'lastSeenAt',
+      render: (v: string | null) => v ? lagDescription(v) : <Text type="secondary">Never</Text>
-      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)',
+      title: 'Today (rows)', dataIndex: 'measurementsToday', key: 'mt',
-      dataIndex: 'measurementsToday',
+      render: (n: number) => n.toLocaleString()
-      key: 'mt',
-      render: (n: number) => n.toLocaleString(),
     },
     {
-      title: 'Today (kWh imp.)',
+      title: 'Today (kWh imp.)', dataIndex: 'kwhImportedToday', key: 'kwh',
-      dataIndex: 'kwhImportedToday',
+      render: (v: number | null) => v == null ? '—' : v.toFixed(2)
-      key: 'kwh',
-      render: (v: number | null) => (v == null ? '—' : v.toFixed(2)),
     },
     {
-      title: 'Today (cost)',
+      title: 'Today (cost)', dataIndex: 'costToday', key: 'cost',
-      dataIndex: 'costToday',
+      render: (v: number | null) => v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text>
-      key: 'cost',
-      render: (v: number | null) =>
-        v == null ? <Text type="secondary">—</Text> : <Text strong>{v.toFixed(2)}</Text>,
     },
   ];
 
@@ -67,12 +51,7 @@ export function AdminFleetDashboardPage() {
       <Row gutter={16} style={{ marginBottom: 16 }}>
         <Col span={5}>
           <Card>
-            <Statistic
+            <Statistic title="Customers" value={data?.totalCustomers ?? 0} prefix={<TeamOutlined />} loading={isLoading} />
-              title="Customers"
-              value={data?.totalCustomers ?? 0}
-              prefix={<TeamOutlined />}
-              loading={isLoading}
-            />
           </Card>
         </Col>
         <Col span={5}>

portal/frontend/src/pages/AdminSitesPage.tsx

@@ -4,18 +4,9 @@ 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,
+  listSites, createSite, updateSite, deleteSite,
-  createSite,
+  listSiteDevices, createDevice, updateDevice, deleteDevice,
-  updateSite,
+  type Site, type Device, type UpsertSite, type UpsertDevice,
-  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';
@@ -24,18 +15,9 @@ const { Text } = Typography;
 
 export function AdminSitesPage() {
   const qc = useQueryClient();
-  const [siteModal, setSiteModal] = useState<{ open: boolean; editing: Site | null }>({
+  const [siteModal, setSiteModal] = useState<{ open: boolean; editing: Site | null }>({ open: false, editing: null });
-    open: false,
+  const [deviceModal, setDeviceModal] = useState<{ open: boolean; siteId: string | null; editing: Device | null }>({
-    editing: null,
+    open: false, siteId: 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[]>([]);
 
@@ -43,34 +25,22 @@ export function AdminSitesPage() {
 
   const createSiteMut = useMutation({
     mutationFn: (p: UpsertSite) => createSite(p),
-    onSuccess: () => {
+    onSuccess: () => { message.success('Site created'); setSiteModal({ open: false, editing: null }); qc.invalidateQueries({ queryKey: ['sites'] }); },
-      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: () => {
+    onSuccess: () => { message.success('Site updated'); setSiteModal({ open: false, editing: null }); qc.invalidateQueries({ queryKey: ['sites'] }); },
-      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: () => {
+    onSuccess: () => { message.success('Site deleted'); qc.invalidateQueries({ queryKey: ['sites'] }); },
-      message.success('Site deleted');
-      qc.invalidateQueries({ queryKey: ['sites'] });
-    },
     onError: () => message.error('Delete failed'),
   });
 
   const createDeviceMut = useMutation({
-    mutationFn: ({ siteId, payload }: { siteId: string; payload: UpsertDevice }) =>
+    mutationFn: ({ siteId, payload }: { siteId: string; payload: UpsertDevice }) => createDevice(siteId, payload),
-      createDevice(siteId, payload),
     onSuccess: (_, vars) => {
       message.success('Device created');
       setDeviceModal({ open: false, siteId: null, editing: null });
@@ -80,8 +50,7 @@ export function AdminSitesPage() {
     onError: () => message.error('Create failed'),
   });
   const updateDeviceMut = useMutation({
-    mutationFn: ({ deviceId, payload }: { deviceId: string; payload: UpsertDevice }) =>
+    mutationFn: ({ deviceId, payload }: { deviceId: string; payload: UpsertDevice }) => updateDevice(deviceId, payload),
-      updateDevice(deviceId, payload),
     onSuccess: () => {
       message.success('Device updated');
       setDeviceModal({ open: false, siteId: null, editing: null });
@@ -115,40 +84,26 @@ 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) =>
+      render: (v: boolean) => (v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>),
-        v ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Actions',
       key: 'actions',
       render: (_, site) => (
         <Space>
-          <Button
+          <Button size="small" icon={<EditOutlined />} onClick={() => setSiteModal({ open: true, editing: site })}>Edit</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 />}>
+            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
-              Delete
-            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -159,11 +114,7 @@ export function AdminSitesPage() {
     <Card
       title="Sites"
       extra={
-        <Button
+        <Button type="primary" icon={<PlusOutlined />} onClick={() => setSiteModal({ open: true, editing: null })}>
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => setSiteModal({ open: true, editing: null })}
-        >
           New site
         </Button>
       }
@@ -208,10 +159,7 @@ export function AdminSitesPage() {
 }
 
 function DeviceSubTable({
-  site,
+  site, onCreate, onEdit, onDelete,
-  onCreate,
-  onEdit,
-  onDelete,
 }: {
   site: Site;
   onCreate: () => void;
@@ -237,18 +185,14 @@ function DeviceSubTable({
       key: 'actions',
       render: (_, d) => (
         <Space>
-          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(d)}>
+          <Button size="small" icon={<EditOutlined />} onClick={() => onEdit(d)}>Edit</Button>
-            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 />}>
+            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
-              Delete
-            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -258,9 +202,7 @@ 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}>
+        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onCreate}>New device</Button>
-          New device
-        </Button>
       </Space>
       <Table<Device>
         rowKey="id"

portal/frontend/src/pages/DashboardPage.tsx

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

@@ -1,81 +0,0 @@
-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,13 +19,7 @@ export function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  // Return-to comes from either the ?returnTo= query param (set by the global
+  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';
-  // 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);
@@ -83,10 +77,7 @@ export function LoginPage() {
           </Form.Item>
         </Form>
         {branding.footerText && (
-          <Text
+          <Text type="secondary" style={{ display: 'block', textAlign: 'center', marginTop: 16, fontSize: 12 }}>
-            type="secondary"
-            style={{ display: 'block', textAlign: 'center', marginTop: 16, fontSize: 12 }}
-          >
             {branding.footerText}
           </Text>
         )}

portal/frontend/src/pages/MeasurementsPage.tsx

@@ -1,24 +1,13 @@
 import { useMemo, useState } from 'react';
 import {
-  Alert,
+  Alert, Button, Card, DatePicker, InputNumber, Select, Space, Table, Tag, Typography,
-  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,
+  fetchRawMeasurements, listAllDevices, downloadRawMeasurementsExport,
-  listAllDevices,
-  downloadRawMeasurementsExport,
   type RawMeasurementRow,
 } from '../api/measurements';
 
@@ -48,97 +37,42 @@ export function MeasurementsPage() {
   });
 
   const { data, isLoading, isFetching, error, refetch } = useQuery({
-    queryKey: [
+    queryKey: ['raw-measurements', fromIso, toIso, selectedDeviceIds.sort().join(','), limit, offset],
-      'raw-measurements',
+    queryFn: () => fetchRawMeasurements({
-      fromIso,
+      fromUtc: fromIso,
-      toIso,
+      toUtc: toIso,
-      selectedDeviceIds.sort().join(','),
+      deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
       limit,
       offset,
-    ],
+    }),
-    queryFn: () =>
-      fetchRawMeasurements({
-        fromUtc: fromIso,
-        toUtc: toIso,
-        deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
-        limit,
-        offset,
-      }),
     placeholderData: keepPreviousData,
   });
 
-  const deviceOptions = useMemo(
+  const deviceOptions = useMemo(() => devices.map(d => ({
-    () =>
+    value: d.id,
-      devices.map((d) => ({
+    label: `${d.name} — ${d.siteName}`,
-        value: d.id,
+    disabled: !d.isActive,
-        label: `${d.name} — ${d.siteName}`,
+  })), [devices]);
-        disabled: !d.isActive,
-      })),
-    [devices],
-  );
 
   const columns: ColumnsType<RawMeasurementRow> = [
     {
-      title: 'Time (UTC)',
+      title: 'Time (UTC)', dataIndex: 'time', key: 't', width: 180,
-      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: 'Device',
+    { title: 'Site', dataIndex: 'siteName', key: 's', render: (v: string | null) => v ?? <Text type="secondary">—</Text> },
-      dataIndex: 'deviceName',
+    { title: 'Active kW', dataIndex: 'activePowerKw', key: 'kw', align: 'right' as const,
-      key: 'd',
+      render: (v: number) => v.toFixed(3) },
-      render: (v: string) => <Text strong>{v}</Text>,
+    { 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,
-      title: 'Site',
+      render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
-      dataIndex: 'siteName',
+    { title: 'PF', dataIndex: 'powerFactor', key: 'pf', align: 'right' as const,
-      key: 's',
+      render: (v: number | null) => v == null ? '—' : v.toFixed(3) },
-      render: (v: string | null) => v ?? <Text type="secondary">—</Text>,
+    { 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,
-      title: 'Active kW',
+      render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
-      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;
@@ -157,43 +91,27 @@ export function MeasurementsPage() {
               allowClear={false}
               value={range}
               showTime={false}
-              onChange={(v) =>
+              onChange={(v) => v && v[0] && v[1] && (setRange([v[0].startOf('day'), v[1].endOf('day')]), setOffset(0))}
-                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': [
+                'Last 7d':    [dayjs().subtract(7, 'day').startOf('day'),    dayjs().add(1, 'day').startOf('day')],
-                  dayjs().subtract(7, 'day').startOf('day'),
+                'Last 30d':   [dayjs().subtract(30, 'day').startOf('day'),   dayjs().add(1, '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')],
-                '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')],
               }}
             />
           </Space>
 
           <Space wrap style={{ width: '100%' }}>
-            <Text strong style={{ minWidth: 80 }}>
+            <Text strong style={{ minWidth: 80 }}>Meters:</Text>
-              Meters:
-            </Text>
             <Select
               mode="multiple"
               allowClear
               placeholder={loadingDevices ? 'Loading devices…' : 'All meters (leave empty)'}
               style={{ minWidth: 360, flex: 1 }}
               value={selectedDeviceIds}
-              onChange={(v) => {
+              onChange={(v) => { setSelectedDeviceIds(v); setOffset(0); }}
-                setSelectedDeviceIds(v);
-                setOffset(0);
-              }}
               options={deviceOptions}
               maxTagCount="responsive"
               showSearch
@@ -205,11 +123,8 @@ export function MeasurementsPage() {
             <Text strong>Preview rows:</Text>
             <Select
               value={limit}
-              onChange={(v) => {
+              onChange={(v) => { setLimit(v); setOffset(0); }}
-                setLimit(v);
+              options={PREVIEW_LIMIT_OPTIONS.map(n => ({ value: n, label: n.toString() }))}
-                setOffset(0);
-              }}
-              options={PREVIEW_LIMIT_OPTIONS.map((n) => ({ value: n, label: n.toString() }))}
               style={{ width: 96 }}
             />
             <Text type="secondary">·</Text>
@@ -231,8 +146,7 @@ export function MeasurementsPage() {
 
       {error && (
         <Alert
-          type="error"
+          type="error" showIcon
-          showIcon
           message="Failed to load measurements"
           description={(error as Error).message}
         />
@@ -244,9 +158,7 @@ export function MeasurementsPage() {
             <Text strong>Measurements</Text>
             <Tag color="blue">{totalCount.toLocaleString()} rows match</Tag>
             {selectedDeviceIds.length > 0 && (
-              <Tag>
+              <Tag>{selectedDeviceIds.length} meter{selectedDeviceIds.length === 1 ? '' : 's'} selected</Tag>
-                {selectedDeviceIds.length} meter{selectedDeviceIds.length === 1 ? '' : 's'} selected
-              </Tag>
             )}
           </Space>
         }
@@ -259,14 +171,11 @@ export function MeasurementsPage() {
               type="primary"
               icon={<DownloadOutlined />}
               disabled={totalCount === 0}
-              onClick={() =>
+              onClick={() => downloadRawMeasurementsExport({
-                downloadRawMeasurementsExport({
+                fromUtc: fromIso, toUtc: toIso,
-                  fromUtc: fromIso,
+                deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
-                  toUtc: toIso,
+                rowCap: exportRowCap,
-                  deviceIds: selectedDeviceIds.length > 0 ? selectedDeviceIds : undefined,
+              })}
-                  rowCap: exportRowCap,
-                })
-              }
             >
               Export to Excel
             </Button>
@@ -290,10 +199,7 @@ export function MeasurementsPage() {
               : `Showing ${showingFrom.toLocaleString()}–${showingTo.toLocaleString()} of ${totalCount.toLocaleString()}`}
           </Text>
           <Space>
-            <Button
+            <Button disabled={!canPrev || isFetching} onClick={() => setOffset(Math.max(0, offset - limit))}>
-              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,22 +1,10 @@
 import { useState } from 'react';
 import {
-  Alert,
+  Alert, Button, Card, Col, Descriptions, Form, Input, Row, Space, Tag, Typography, message,
-  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;
 
@@ -49,7 +37,7 @@ export function MyProfilePage() {
       setUser(updated);
       message.success('Profile updated');
     } catch (err: unknown) {
-      setProfileError(extractApiError(err));
+      setProfileError(extractError(err));
     } finally {
       setSavingProfile(false);
     }
@@ -63,7 +51,7 @@ export function MyProfilePage() {
       passwordForm.resetFields();
       message.success('Password changed');
     } catch (err: unknown) {
-      setPasswordError(extractApiError(err));
+      setPasswordError(extractError(err));
     } finally {
       setSavingPassword(false);
     }
@@ -72,39 +60,20 @@ export function MyProfilePage() {
   return (
     <Row gutter={[24, 24]}>
       <Col xs={24} md={12}>
-        <Card
+        <Card title={<Space><UserOutlined /><Title level={5} style={{ margin: 0 }}>My profile</Title></Space>}>
-          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 }}>
+              <Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>(read-only)</Text>
-                (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 && (
+          {profileError && <Alert type="error" message={profileError} style={{ marginBottom: 16 }} />}
-            <Alert type="error" message={profileError} style={{ marginBottom: 16 }} />
-          )}
 
           <Form<ProfileFormValues>
             form={profileForm}
@@ -124,12 +93,7 @@ export function MyProfilePage() {
               <Input autoComplete="name" />
             </Form.Item>
             <Form.Item style={{ marginBottom: 0 }}>
-              <Button
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={savingProfile}>
-                type="primary"
-                htmlType="submit"
-                icon={<SaveOutlined />}
-                loading={savingProfile}
-              >
                 Save profile
               </Button>
             </Form.Item>
@@ -138,19 +102,8 @@ export function MyProfilePage() {
       </Col>
 
       <Col xs={24} md={12}>
-        <Card
+        <Card title={<Space><LockOutlined /><Title level={5} style={{ margin: 0 }}>Change password</Title></Space>}>
-          title={
+          {passwordError && <Alert type="error" message={passwordError} style={{ marginBottom: 16 }} />}
-            <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}
@@ -198,12 +151,7 @@ export function MyProfilePage() {
               <Input.Password autoComplete="new-password" />
             </Form.Item>
             <Form.Item style={{ marginBottom: 0 }}>
-              <Button
+              <Button type="primary" htmlType="submit" icon={<LockOutlined />} loading={savingPassword}>
-                type="primary"
-                htmlType="submit"
-                icon={<LockOutlined />}
-                loading={savingPassword}
-              >
                 Change password
               </Button>
             </Form.Item>
@@ -213,3 +161,11 @@ 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,13 +1,7 @@
 import { useState } from 'react';
 import { Card, Button, Table, Tag, Popconfirm, Modal, Input, Space, message } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import {
+import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, ApartmentOutlined } from '@ant-design/icons';
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  KeyOutlined,
-  ApartmentOutlined,
-} from '@ant-design/icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   listUsers,
@@ -19,7 +13,6 @@ 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';
@@ -50,19 +43,18 @@ export function UsersPage() {
       setDrawerError(null);
       invalidate();
     },
-    onError: (err: unknown) => setDrawerError(extractApiError(err)),
+    onError: (err: unknown) => setDrawerError(errorMessage(err)),
   });
 
   const updateMut = useMutation({
-    mutationFn: ({ id, payload }: { id: string; payload: UpdateUserPayload }) =>
+    mutationFn: ({ id, payload }: { id: string; payload: UpdateUserPayload }) => updateUser(id, payload),
-      updateUser(id, payload),
     onSuccess: () => {
       message.success('User updated');
       setDrawerMode(null);
       setDrawerError(null);
       invalidate();
     },
-    onError: (err: unknown) => setDrawerError(extractApiError(err)),
+    onError: (err: unknown) => setDrawerError(errorMessage(err)),
   });
 
   const deleteMut = useMutation({
@@ -71,7 +63,7 @@ export function UsersPage() {
       message.success('User deleted');
       invalidate();
     },
-    onError: (err: unknown) => message.error(extractApiError(err)),
+    onError: (err: unknown) => message.error(errorMessage(err)),
   });
 
   const resetMut = useMutation({
@@ -82,7 +74,7 @@ export function UsersPage() {
       setResetTarget(null);
       setResetValue('');
     },
-    onError: (err: unknown) => message.error(extractApiError(err)),
+    onError: (err: unknown) => message.error(errorMessage(err)),
   });
 
   const handleSubmit = async (values: CreateUserPayload | UpdateUserPayload) => {
@@ -102,22 +94,15 @@ 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) =>
+      render: (active: boolean) => active ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
-        active ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>,
     },
     {
       title: 'Created',
@@ -133,25 +118,23 @@ export function UsersPage() {
           <Button
             size="small"
             icon={<EditOutlined />}
-            onClick={() => {
+            onClick={() => { setDrawerError(null); setDrawerMode({ kind: 'edit', user }); }}
-              setDrawerError(null);
-              setDrawerMode({ kind: 'edit', user });
-            }}
           >
             Edit
           </Button>
           {isAdminMode && user.roles.includes('RestrictedAdmin') && (
-            <Button size="small" icon={<ApartmentOutlined />} onClick={() => setAccessTarget(user)}>
+            <Button
+              size="small"
+              icon={<ApartmentOutlined />}
+              onClick={() => setAccessTarget(user)}
+            >
               Customer access
             </Button>
           )}
           <Button
             size="small"
             icon={<KeyOutlined />}
-            onClick={() => {
+            onClick={() => { setResetValue(''); setResetTarget(user); }}
-              setResetValue('');
-              setResetTarget(user);
-            }}
           >
             Reset password
           </Button>
@@ -161,9 +144,7 @@ export function UsersPage() {
             okButtonProps={{ danger: true }}
             onConfirm={() => deleteMut.mutate(user.id)}
           >
-            <Button size="small" danger icon={<DeleteOutlined />}>
+            <Button size="small" danger icon={<DeleteOutlined />}>Delete</Button>
-              Delete
-            </Button>
           </Popconfirm>
         </Space>
       ),
@@ -177,10 +158,7 @@ export function UsersPage() {
         <Button
           type="primary"
           icon={<PlusOutlined />}
-          onClick={() => {
+          onClick={() => { setDrawerError(null); setDrawerMode({ kind: 'create' }); }}
-            setDrawerError(null);
-            setDrawerMode({ kind: 'create' });
-          }}
         >
           New user
         </Button>
@@ -199,10 +177,7 @@ export function UsersPage() {
         mode={drawerMode}
         submitting={createMut.isPending || updateMut.isPending}
         error={drawerError}
-        onClose={() => {
+        onClose={() => { setDrawerMode(null); setDrawerError(null); }}
-          setDrawerMode(null);
-          setDrawerError(null);
-        }}
         onSubmit={handleSubmit}
       />
 
@@ -210,10 +185,7 @@ export function UsersPage() {
         title={resetTarget ? `Reset password for ${resetTarget.email}` : 'Reset password'}
         open={resetTarget !== null}
         confirmLoading={resetMut.isPending}
-        onCancel={() => {
+        onCancel={() => { setResetTarget(null); setResetValue(''); }}
-          setResetTarget(null);
-          setResetValue('');
-        }}
         onOk={() => resetTarget && resetMut.mutate({ id: resetTarget.id, newPassword: resetValue })}
         okText="Reset"
         okButtonProps={{ disabled: resetValue.length < 8 }}
@@ -234,3 +206,12 @@ 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

@@ -1,37 +0,0 @@
-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,7 +1,4 @@
-// defineConfig from vitest/config is a superset of vite's — it accepts the
+import { defineConfig } from 'vite';
-// `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({
@@ -23,12 +20,4 @@ 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.
-  },
 });