chore(terminal): add Prettier config + format scripts to match admin (#56)

Author: mkasperczyk90

src/web/terminal/.prettierignore

@@ -0,0 +1,7 @@
+dist
+web-build
+.expo
+node_modules
+
+# Generated by release-please — not authored, not Prettier-shaped.
+CHANGELOG.md

src/web/terminal/.prettierrc.json

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

src/web/terminal/README.md

@@ -1,7 +1,7 @@
 # Warehouse Operator Terminal
 
 The **Operator terminal** front end — a React Native (Expo) app for floor staff on a
-rugged handheld: *one hand, gloves, cold room, glare*. Scanner-first, huge tap targets
+rugged handheld: _one hand, gloves, cold room, glare_. Scanner-first, huge tap targets
 (≥48 px), one task at a time, zero prose.
 
 It implements the terminal screens from the design pass
@@ -46,22 +46,22 @@ data getter) + `index.ts` (public API). Cross-feature imports go through the fea
 
 ### A note on `app/` vs `navigation/`
 
-expo-router is file-based: the tree under `src/app/` *is* the router. So the route files
+expo-router is file-based: the tree under `src/app/` _is_ the router. So the route files
 stay thin (a one-line re-export) and `navigation/routes.ts` holds the typed path map
 (`ROUTES.pack`) so features navigate by name instead of bare string literals.
 
 ## Screens & navigation
 
-| Route | Feature screen | Use case | Prototype |
-|---|---|---|---|
-| `/` | `Tasks/TaskHubScreen` | landing | `terminal-1-hub` |
-| `/receive` | `Receiving/ReceiveScreen` | UC-02 | `terminal-2-receive` |
-| `/putaway` | `PutAway/PutAwayScreen` | UC-04 | `terminal-3-putaway` |
-| `/pick` | `Picking/PickingScreen` | UC-10 | `terminal-4-pick` |
-| `/move` | `Movement/MovementScreen` | UC-06 | `terminal-5-move` |
-| `/pack` | `Packing/PackingScreen` | UC-11 | `terminal-6-pack` |
-| `/scan` | `Scan/ScanScreen` | — | Scan tab |
-| `/lookup` | `Lookup/LookupScreen` | — | Look up tab |
+| Route      | Feature screen            | Use case | Prototype            |
+| ---------- | ------------------------- | -------- | -------------------- |
+| `/`        | `Tasks/TaskHubScreen`     | landing  | `terminal-1-hub`     |
+| `/receive` | `Receiving/ReceiveScreen` | UC-02    | `terminal-2-receive` |
+| `/putaway` | `PutAway/PutAwayScreen`   | UC-04    | `terminal-3-putaway` |
+| `/pick`    | `Picking/PickingScreen`   | UC-10    | `terminal-4-pick`    |
+| `/move`    | `Movement/MovementScreen` | UC-06    | `terminal-5-move`    |
+| `/pack`    | `Packing/PackingScreen`   | UC-11    | `terminal-6-pack`    |
+| `/scan`    | `Scan/ScanScreen`         | —        | Scan tab             |
+| `/lookup`  | `Lookup/LookupScreen`     | —        | Look up tab          |
 
 Navigation mirrors the operator clickpath: the hub launches each task, and tasks loop
 back to the hub when done (`/pick` flows on to `/pack`).
@@ -72,10 +72,10 @@ The bottom nav switches between three top-level roots; `router.navigate` gives t
 behaviour (returning to a root already in history rather than stacking duplicates):
 
 - **Tasks** — the hub: today's task piles.
-- **Scan** — *“I have a physical thing, what do I do with it?”* A context-free scanner
+- **Scan** — _“I have a physical thing, what do I do with it?”_ A context-free scanner
   that resolves any code (ASN / order / EAN / LPN / location) and dispatches to the
   matching task.
-- **Look up** — *“I want to know something.”* Read-only, keyboard-driven search over
+- **Look up** — _“I want to know something.”_ Read-only, keyboard-driven search over
   products (stock + ATP), locations (capacity, room type) and batches (status, BBE/FEFO).
 - **More** — no screen yet, so it stays dimmed and inert.
 
@@ -91,8 +91,8 @@ that encode domain stock status** (never decoration). The shared primitives in
 - `BigActionButton` — confirm / exception / alternative; 56 px tap floor.
 - `Stepper`, `Chip`, `CheckRow`, `Card`, `TopBar`, `BottomNav`, `ScreenScaffold`.
 
-The two **green check rows** on put-away / move make the *environment-compatibility
-invariant* visible; FEFO shows as a batch/BBE badge on picking.
+The two **green check rows** on put-away / move make the _environment-compatibility
+invariant_ visible; FEFO shows as a batch/BBE badge on picking.
 
 ## Running
 

src/web/terminal/package-lock.json

@@ -10,7 +10,9 @@
     "web": "expo start --web",
     "build:web": "expo export --platform web",
     "lint": "expo lint",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
@@ -32,6 +34,7 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.0",
+    "prettier": "^3.8.4",
     "typescript": "^6.0.3"
   }
-}
+}

src/web/terminal/package.json

@@ -69,7 +69,12 @@ class ApiError extends Error {
 
 export { ApiError };
 
-async function request<T>(method: string, resource: string, body?: unknown, retry = true): Promise<T> {
+async function request<T>(
+  method: string,
+  resource: string,
+  body?: unknown,
+  retry = true,
+): Promise<T> {
   const headers: Record<string, string> = {};
   if (body !== undefined) headers['Content-Type'] = 'application/json';
   if (activeWarehouseId) headers[WAREHOUSE_HEADER] = activeWarehouseId;
@@ -91,9 +96,11 @@ async function request<T>(method: string, resource: string, body?: unknown, retr
   if (!res.ok) {
     // Surface failures by their stable code (the same language the API returns).
     const payload = await res.json().catch(() => null);
-    const code = payload && typeof payload === 'object' ? (payload as { code?: string }).code : undefined;
+    const code =
+      payload && typeof payload === 'object' ? (payload as { code?: string }).code : undefined;
     const message =
-      (payload && typeof payload === 'object' && (payload as { message?: string }).message) || res.statusText;
+      (payload && typeof payload === 'object' && (payload as { message?: string }).message) ||
+      res.statusText;
     throw new ApiError(res.status, code, message);
   }
 

src/web/terminal/src/core/api/client.ts

@@ -18,7 +18,9 @@ export interface Resource<T> {
  * (the module-level `getX` getters are stable), so the effect runs once.
  */
 export function useResource<T>(fetcher: () => Promise<T>): Resource<T> {
-  const [state, setState] = useState<{ data?: T; loading: boolean; error?: Error }>({ loading: true });
+  const [state, setState] = useState<{ data?: T; loading: boolean; error?: Error }>({
+    loading: true,
+  });
   const [nonce, setNonce] = useState(0);
 
   useEffect(() => {
@@ -29,7 +31,11 @@ export function useResource<T>(fetcher: () => Promise<T>): Resource<T> {
     fetcher().then(
       (data) => active && setState({ data, loading: false }),
       (error: unknown) =>
-        active && setState({ loading: false, error: error instanceof Error ? error : new Error(String(error)) }),
+        active &&
+        setState({
+          loading: false,
+          error: error instanceof Error ? error : new Error(String(error)),
+        }),
     );
     return () => {
       active = false;

src/web/terminal/src/core/api/useResource.ts

@@ -1,12 +1,26 @@
 import { useMemo, useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
-import { Card, Icon, QuantityWithUnit, ResourceView, SearchField, StatusBadge, TabScaffold } from '@/shared/ui';
+import {
+  Card,
+  Icon,
+  QuantityWithUnit,
+  ResourceView,
+  SearchField,
+  StatusBadge,
+  TabScaffold,
+} from '@/shared/ui';
 import { useResource } from '@/core/api/useResource';
 import { fs, radius, s } from '@/shared/theme/tokens';
 import { useTheme, useThemedStyles, type Theme } from '@/shared/theme/theme';
 import { useT } from '@/shared/i18n/i18n';
-import { getLookupIndex, KIND_FILTERS, searchLookup, type LookupKind, type LookupRow } from './lookup.model';
+import {
+  getLookupIndex,
+  KIND_FILTERS,
+  searchLookup,
+  type LookupKind,
+  type LookupRow,
+} from './lookup.model';
 
 /** Terminal — Look up: read-only inquiry over products, locations and batches. */
 export function LookupScreen() {
@@ -40,7 +54,9 @@ function LookupView({ index }: { index: LookupRow[] }) {
               accessibilityRole="button"
               accessibilityState={{ selected: on }}
             >
-              <Text style={[styles.filterLabel, on && styles.filterLabelOn]}>{t(`lookup.filter.${f.key}`)}</Text>
+              <Text style={[styles.filterLabel, on && styles.filterLabelOn]}>
+                {t(`lookup.filter.${f.key}`)}
+              </Text>
             </Pressable>
           );
         })}
@@ -95,11 +111,22 @@ const makeStyles = (t: Theme) =>
     filterLabelOn: { color: '#fff' },
 
     scroll: { paddingBottom: s[5] },
-    count: { fontSize: fs.xs, color: t.color.inkFaint, marginHorizontal: s[5], marginVertical: s[2] },
+    count: {
+      fontSize: fs.xs,
+      color: t.color.inkFaint,
+      marginHorizontal: s[5],
+      marginVertical: s[2],
+    },
     empty: { fontSize: fs.sm, color: t.color.inkFaint, margin: s[5] },
 
     list: { marginHorizontal: s[5] },
-    row: { flexDirection: 'row', alignItems: 'center', gap: s[4], paddingVertical: s[4], paddingHorizontal: s[5] },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: s[4],
+      paddingVertical: s[4],
+      paddingHorizontal: s[5],
+    },
     rowBorder: { borderBottomWidth: 1, borderBottomColor: t.color.lineSoft },
     rowIcon: { width: 32, alignItems: 'center' },
     rowText: { flex: 1 },

src/web/terminal/src/features/Lookup/LookupScreen.tsx

@@ -69,9 +69,18 @@ export const getLookupIndex = async (): Promise<LookupRow[]> => {
   }));
 
   // One product row per SKU, summing available-to-promise across its locations.
-  const bySku = new Map<string, { name: string; atp: number; unit: string; locations: number; status: string }>();
+  const bySku = new Map<
+    string,
+    { name: string; atp: number; unit: string; locations: number; status: string }
+  >();
   for (const r of rows) {
-    const agg = bySku.get(r.sku) ?? { name: r.product, atp: 0, unit: r.unit, locations: 0, status: r.status };
+    const agg = bySku.get(r.sku) ?? {
+      name: r.product,
+      atp: 0,
+      unit: r.unit,
+      locations: 0,
+      status: r.status,
+    };
     agg.atp += r.atp;
     agg.locations += 1;
     if (r.status === 'blocked' || r.status === 'expired') agg.status = r.status;
@@ -99,7 +108,11 @@ export const getLookupIndex = async (): Promise<LookupRow[]> => {
 };
 
 /** Filter the index by free-text query and an optional kind. */
-export function searchLookup(rows: LookupRow[], query: string, kind: LookupKind | 'all'): LookupRow[] {
+export function searchLookup(
+  rows: LookupRow[],
+  query: string,
+  kind: LookupKind | 'all',
+): LookupRow[] {
   const q = query.trim().toLowerCase();
   return rows.filter((r) => {
     if (kind !== 'all' && r.kind !== kind) return false;

src/web/terminal/src/features/Lookup/lookup.model.ts

@@ -2,7 +2,16 @@ import { router } from 'expo-router';
 import { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { BigActionButton, Card, CheckRow, Chip, ResourceView, ScanField, ScreenScaffold, Stepper } from '@/shared/ui';
+import {
+  BigActionButton,
+  Card,
+  CheckRow,
+  Chip,
+  ResourceView,
+  ScanField,
+  ScreenScaffold,
+  Stepper,
+} from '@/shared/ui';
 import { useResource } from '@/core/api/useResource';
 import { fs, s } from '@/shared/theme/tokens';
 import { useTheme, useThemedStyles, type Theme } from '@/shared/theme/theme';
@@ -39,7 +48,12 @@ function MovementView({ move }: { move: MoveTask }) {
       subtitle={t('move.task', { n: move.task, total: move.ofTasks })}
       accent={theme.color.move}
       actions={
-        <BigActionButton label={t('move.confirm')} accent={theme.color.move} disabled={pending} onPress={commit} />
+        <BigActionButton
+          label={t('move.confirm')}
+          accent={theme.color.move}
+          disabled={pending}
+          onPress={commit}
+        />
       }
     >
       {/* From → To legs */}
@@ -94,9 +108,20 @@ const makeStyles = (t: Theme) =>
 
     item: { marginHorizontal: s[5], padding: s[5] },
     sku: { fontSize: fs.xs, color: t.color.inkFaint },
-    product: { fontSize: fs.md, fontWeight: '700', color: t.color.ink, marginTop: 2, marginBottom: s[3] },
+    product: {
+      fontSize: fs.md,
+      fontWeight: '700',
+      color: t.color.ink,
+      marginTop: 2,
+      marginBottom: s[3],
+    },
     chips: { flexDirection: 'row', gap: s[2] },
-    qtyrow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: s[4] },
+    qtyrow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginTop: s[4],
+    },
     lbl: { fontSize: fs.sm, color: t.color.inkSoft },
 
     checks: { margin: s[5], gap: s[2] },