feat(web): complete i18n — externalize all hardcoded strings

Replace every hardcoded English string across all 35 SPA page files with useT() calls backed by message keys in messages.ts. Both en-US and zh-CN translations are provided for every key (~200 new keys). Pages updated: DashboardPage, LoginPage, FormDesignerPage, ListViewDesignerPage, MetadataAdminPage, SalesOrderDetailPage, PurchaseOrderDetailPage, WorkOrderDetailPage, ShopFloorPage, UserTasksPage, TaskDetailPage, UserDetailPage, all Create* pages, all Edit* pages, and all list pages (Items, Partners, Locations, Balances, Movements, SalesOrders, PurchaseOrders, WorkOrders, Users, Roles, Accounts, JournalEntries, UoMs, AdjustStock).

feat(web): complete i18n — externalize all hardcoded strings
Replace every hardcoded English string across all 35 SPA page files with useT() calls backed by message keys in messages.ts. Both en-US and zh-CN translations are provided for every key (~200 new keys). Pages updated: DashboardPage, LoginPage, FormDesignerPage, ListViewDesignerPage, MetadataAdminPage, SalesOrderDetailPage, PurchaseOrderDetailPage, WorkOrderDetailPage, ShopFloorPage, UserTasksPage, TaskDetailPage, UserDetailPage, all Create* pages, all Edit* pages, and all list pages (Items, Partners, Locations, Balances, Movements, SalesOrders, PurchaseOrders, WorkOrders, Users, Roles, Accounts, JournalEntries, UoMs, AdjustStock).
zichun
1 parent 95ed53bd
Showing 35 changed files with 558 additions and 494 deletions
web/src/pages/AccountsPage.tsx
web/src/pages/AdjustStockPage.tsx
web/src/pages/BalancesPage.tsx
web/src/pages/CreateItemPage.tsx
web/src/pages/CreateLocationPage.tsx
web/src/pages/CreatePartnerPage.tsx
web/src/pages/CreatePurchaseOrderPage.tsx
web/src/pages/CreateSalesOrderPage.tsx
web/src/pages/CreateUserPage.tsx
web/src/pages/CreateWorkOrderPage.tsx
web/src/pages/DashboardPage.tsx
web/src/pages/EditItemPage.tsx
web/src/pages/EditPartnerPage.tsx
web/src/pages/FormDesignerPage.tsx
web/src/pages/ItemsPage.tsx
web/src/pages/JournalEntriesPage.tsx
web/src/pages/ListViewDesignerPage.tsx
web/src/pages/LocationsPage.tsx
web/src/pages/LoginPage.tsx
web/src/pages/MetadataAdminPage.tsx
@@ -5,10 +5,12 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 const ACCOUNT_TYPES = ['ASSET', 'LIABILITY', 'EQUITY', 'REVENUE', 'EXPENSE'] as const
  
 export function AccountsPage() {
+  const t = useT()
   const [rows, setRows] = useState<Account[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -46,44 +48,44 @@ export function AccountsPage() {
   }
  
   const columns: Column<Account>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
-    { header: 'Name', key: 'name' },
-    { header: 'Type', key: 'accountType' },
-    { header: 'Description', key: 'description', render: (r) => r.description ?? '—' },
+    { header: t('label.code'), key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.type'), key: 'accountType' },
+    { header: t('label.description'), key: 'description', render: (r) => r.description ?? '\u2014' },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Chart of Accounts"
-        subtitle="GL accounts that journal entries debit and credit. 6 accounts seeded by default."
+        title={t('page.accounts.title')}
+        subtitle={t('page.accounts.subtitle')}
         actions={
           <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
-            {showCreate ? 'Cancel' : '+ New Account'}
+            {showCreate ? t('action.cancel') : t('action.newAccount')}
           </button>
         }
       />
       {showCreate && (
         <form onSubmit={onCreate} className="card p-4 mb-4 max-w-2xl flex flex-wrap items-end gap-3">
           <div className="w-24">
-            <label className="block text-xs font-medium text-slate-700">Code</label>
+            <label className="block text-xs font-medium text-slate-700">{t('label.code')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="1300" className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
           </div>
           <div className="flex-1 min-w-[150px]">
-            <label className="block text-xs font-medium text-slate-700">Name</label>
+            <label className="block text-xs font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               placeholder="Prepaid expenses" className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
           </div>
           <div className="w-32">
-            <label className="block text-xs font-medium text-slate-700">Type</label>
+            <label className="block text-xs font-medium text-slate-700">{t('label.type')}</label>
             <select value={accountType} onChange={(e) => setAccountType(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm">
-              {ACCOUNT_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+              {ACCOUNT_TYPES.map((at) => <option key={at} value={at}>{at}</option>)}
             </select>
           </div>
           <button type="submit" className="btn-primary" disabled={creating}>
-            {creating ? '...' : 'Create'}
+            {creating ? '...' : t('action.create')}
           </button>
         </form>
       )}
@@ -4,9 +4,11 @@ import { catalog, inventory } from &#39;@/api/client&#39;
 import type { Item, Location } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
+import { useT } from '@/i18n/LocaleContext'
  
 export function AdjustStockPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [items, setItems] = useState<Item[]>([])
   const [locations, setLocations] = useState<Location[]>([])
   const [itemCode, setItemCode] = useState('')
@@ -37,7 +39,9 @@ export function AdjustStockPage() {
         quantity: Number(quantity),
       })
       setResult(
-        `Balance set: ${bal.itemCode} @ location = ${bal.quantity}`,
+        t('page.adjustStock.result')
+          .replace('{itemCode}', bal.itemCode)
+          .replace('{quantity}', String(bal.quantity)),
       )
     } catch (err: unknown) {
       setError(err instanceof Error ? err : new Error(String(err)))
@@ -49,27 +53,27 @@ export function AdjustStockPage() {
   return (
     <div>
       <PageHeader
-        title="Adjust Stock"
-        subtitle="Set the on-hand quantity for an item at a location. Creates the balance row if it doesn't exist."
-        actions={<button className="btn-secondary" onClick={() => navigate('/balances')}>← Balances</button>}
+        title={t('page.adjustStock.title')}
+        subtitle={t('page.adjustStock.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/balances')}>{t('action.back')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-lg">
         <div>
-          <label className="block text-sm font-medium text-slate-700">Item</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.item')}</label>
           <select required value={itemCode} onChange={(e) => setItemCode(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
             {items.map((i) => <option key={i.id} value={i.code}>{i.code} — {i.name}</option>)}
           </select>
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Location</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.location')}</label>
           <select required value={locationId} onChange={(e) => setLocationId(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
             {locations.map((l) => <option key={l.id} value={l.id}>{l.code} — {l.name}</option>)}
           </select>
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Quantity (absolute, not delta)</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.quantityAbsolute')}</label>
           <input type="number" required min="0" step="1" value={quantity}
             onChange={(e) => setQuantity(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-right" />
@@ -81,7 +85,7 @@ export function AdjustStockPage() {
           </div>
         )}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Adjusting...' : 'Set Balance'}
+          {submitting ? t('action.adjusting') : t('action.setBalance')}
         </button>
       </form>
     </div>
@@ -6,6 +6,7 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 interface Row extends Record<string, unknown> {
   id: string
@@ -15,6 +16,7 @@ interface Row extends Record&lt;string, unknown&gt; {
 }
  
 export function BalancesPage() {
+  const t = useT()
   const [rows, setRows] = useState<Row[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -37,14 +39,14 @@ export function BalancesPage() {
   }, [])
  
   const columns: Column<Row>[] = [
-    { header: 'Item', key: 'itemCode', render: (r) => <span className="font-mono">{r.itemCode}</span> },
+    { header: t('label.item'), key: 'itemCode', render: (r) => <span className="font-mono">{r.itemCode}</span> },
     {
-      header: 'Location',
+      header: t('label.location'),
       key: 'locationCode',
       render: (r) => <span className="font-mono">{r.locationCode}</span>,
     },
     {
-      header: 'Quantity',
+      header: t('label.quantity'),
       key: 'quantity',
       render: (r) => <span className="font-mono tabular-nums">{String(r.quantity)}</span>,
     },
@@ -53,9 +55,9 @@ export function BalancesPage() {
   return (
     <div>
       <PageHeader
-        title="Stock Balances"
-        subtitle="On-hand quantities per (item, location). Updates atomically with every movement."
-        actions={<Link to="/balances/adjust" className="btn-primary">Adjust Stock</Link>}
+        title={t('page.balances.title')}
+        subtitle={t('page.balances.subtitle')}
+        actions={<Link to="/balances/adjust" className="btn-primary">{t('action.adjustStock')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -5,11 +5,13 @@ import type { Uom } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 const ITEM_TYPES = ['GOOD', 'SERVICE', 'DIGITAL'] as const
  
 export function CreateItemPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
@@ -49,31 +51,31 @@ export function CreateItemPage() {
   return (
     <div>
       <PageHeader
-        title="New Item"
-        subtitle="Add a raw material, finished good, or service to the catalog."
-        actions={<button className="btn-secondary" onClick={() => navigate('/items')}>Cancel</button>}
+        title={t('page.createItem.title')}
+        subtitle={t('page.createItem.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/items')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Item code</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.itemCode')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="PAPER-120G-A3" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               placeholder="120g A3 coated paper" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.type')}</label>
             <select value={itemType} onChange={(e) => setItemType(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-              {ITEM_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+              {ITEM_TYPES.map((it) => <option key={it} value={it}>{it}</option>)}
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Base UoM</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.baseUom')}</label>
             <select value={baseUomCode} onChange={(e) => setBaseUomCode(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
               {uoms.map((u) => <option key={u.id} value={u.code}>{u.code} — {u.name}</option>)}
@@ -81,7 +83,7 @@ export function CreateItemPage() {
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Description (optional)</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.descriptionOptional')}</label>
           <input type="text" value={description} onChange={(e) => setDescription(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
@@ -92,7 +94,7 @@ export function CreateItemPage() {
         />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create Item'}
+          {submitting ? t('action.creating') : t('page.createItem.submit')}
         </button>
       </form>
     </div>
@@ -4,11 +4,13 @@ import { inventory } from &#39;@/api/client&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 const LOCATION_TYPES = ['WAREHOUSE', 'BIN', 'VIRTUAL'] as const
  
 export function CreateLocationPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [name, setName] = useState('')
   const [type, setType] = useState<string>('WAREHOUSE')
@@ -34,26 +36,26 @@ export function CreateLocationPage() {
   return (
     <div>
       <PageHeader
-        title="New Location"
-        subtitle="Add a warehouse, bin, or virtual location for inventory tracking."
-        actions={<button className="btn-secondary" onClick={() => navigate('/locations')}>Cancel</button>}
+        title={t('page.createLocation.title')}
+        subtitle={t('page.createLocation.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/locations')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-lg">
         <div>
-          <label className="block text-sm font-medium text-slate-700">Location code</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.locationCode')}</label>
           <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
             placeholder="WH-NEW" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Name</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.name')}</label>
           <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
             placeholder="New Warehouse" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Type</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.type')}</label>
           <select value={type} onChange={(e) => setType(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-            {LOCATION_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+            {LOCATION_TYPES.map((lt) => <option key={lt} value={lt}>{lt}</option>)}
           </select>
         </div>
         <DynamicExtFields
@@ -63,7 +65,7 @@ export function CreateLocationPage() {
         />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create Location'}
+          {submitting ? t('action.creating') : t('page.createLocation.submit')}
         </button>
       </form>
     </div>
@@ -4,11 +4,13 @@ import { partners } from &#39;@/api/client&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 const PARTNER_TYPES = ['CUSTOMER', 'SUPPLIER', 'BOTH'] as const
  
 export function CreatePartnerPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [name, setName] = useState('')
   const [type, setType] = useState<string>('CUSTOMER')
@@ -41,36 +43,36 @@ export function CreatePartnerPage() {
   return (
     <div>
       <PageHeader
-        title="New Partner"
-        subtitle="Add a customer, supplier, or dual-role partner."
-        actions={<button className="btn-secondary" onClick={() => navigate('/partners')}>Cancel</button>}
+        title={t('page.createPartner.title')}
+        subtitle={t('page.createPartner.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/partners')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Partner code</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.partnerCode')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="CUST-NEWCO" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               placeholder="New Company Ltd." className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.type')}</label>
             <select value={type} onChange={(e) => setType(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-              {PARTNER_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+              {PARTNER_TYPES.map((pt) => <option key={pt} value={pt}>{pt}</option>)}
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Email (optional)</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.emailOptional')}</label>
             <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Phone (optional)</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.phoneOptional')}</label>
             <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
@@ -82,7 +84,7 @@ export function CreatePartnerPage() {
         />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create Partner'}
+          {submitting ? t('action.creating') : t('page.createPartner.submit')}
         </button>
       </form>
     </div>
@@ -5,6 +5,7 @@ import type { Item, Partner } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 interface LineInput {
   itemCode: string
@@ -14,6 +15,7 @@ interface LineInput {
  
 export function CreatePurchaseOrderPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [partnerCode, setPartnerCode] = useState('')
   const [expectedDate, setExpectedDate] = useState('')
@@ -78,19 +80,19 @@ export function CreatePurchaseOrderPage() {
   return (
     <div>
       <PageHeader
-        title="New Purchase Order"
-        subtitle="Order materials from a supplier. Confirm and receive to credit inventory."
-        actions={<button className="btn-secondary" onClick={() => navigate('/purchase-orders')}>Cancel</button>}
+        title={t('page.createPurchaseOrder.title')}
+        subtitle={t('page.createPurchaseOrder.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/purchase-orders')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Order code</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.orderCode')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="PO-2026-0002" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Supplier</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.supplier')}</label>
             <select required value={partnerCode} onChange={(e) => setPartnerCode(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
               {supplierList.map((p) => (
@@ -99,7 +101,7 @@ export function CreatePurchaseOrderPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Expected date</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.expectedDate')}</label>
             <input type="date" value={expectedDate} onChange={(e) => setExpectedDate(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
@@ -107,8 +109,8 @@ export function CreatePurchaseOrderPage() {
  
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="text-sm font-medium text-slate-700">Order lines</label>
-            <button type="button" className="btn-secondary text-xs" onClick={addLine}>+ Add line</button>
+            <label className="text-sm font-medium text-slate-700">{t('label.orderLines')}</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addLine}>{t('action.addLine')}</button>
           </div>
           <div className="space-y-2">
             {lines.map((line, idx) => (
@@ -116,17 +118,17 @@ export function CreatePurchaseOrderPage() {
                 <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
                 <select value={line.itemCode} onChange={(e) => updateLine(idx, 'itemCode', e.target.value)}
                   className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
-                  <option value="">Select item...</option>
+                  <option value="">{t('action.selectItem')}</option>
                   {items.map((it) => <option key={it.id} value={it.code}>{it.code} — {it.name}</option>)}
                 </select>
-                <input type="number" min="1" step="1" placeholder="Qty" value={line.quantity}
+                <input type="number" min="1" step="1" placeholder={t('label.qty')} value={line.quantity}
                   onChange={(e) => updateLine(idx, 'quantity', e.target.value)}
                   className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
-                <input type="number" min="0" step="0.01" placeholder="Price" value={line.unitPrice}
+                <input type="number" min="0" step="0.01" placeholder={t('label.unitPrice')} value={line.unitPrice}
                   onChange={(e) => updateLine(idx, 'unitPrice', e.target.value)}
                   className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
                 <button type="button" className="text-slate-400 hover:text-rose-500"
-                  onClick={() => removeLine(idx)} title="Remove line">&times;</button>
+                  onClick={() => removeLine(idx)} title={t('action.delete')}>&times;</button>
               </div>
             ))}
           </div>
@@ -139,7 +141,7 @@ export function CreatePurchaseOrderPage() {
         />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create Purchase Order'}
+          {submitting ? t('action.creating') : t('page.createPurchaseOrder.submit')}
         </button>
       </form>
     </div>
@@ -5,6 +5,7 @@ import type { Item, Partner } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 interface LineInput {
   itemCode: string
@@ -14,6 +15,7 @@ interface LineInput {
  
 export function CreateSalesOrderPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [partnerCode, setPartnerCode] = useState('')
   const [currencyCode] = useState('USD')
@@ -80,18 +82,18 @@ export function CreateSalesOrderPage() {
   return (
     <div>
       <PageHeader
-        title="New Sales Order"
-        subtitle="Create a sales order. Confirming it will auto-generate production work orders."
+        title={t('page.createSalesOrder.title')}
+        subtitle={t('page.createSalesOrder.subtitle')}
         actions={
           <button className="btn-secondary" onClick={() => navigate('/sales-orders')}>
-            Cancel
+            {t('action.cancel')}
           </button>
         }
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Order code</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.orderCode')}</label>
             <input
               type="text"
               required
@@ -102,7 +104,7 @@ export function CreateSalesOrderPage() {
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Customer</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.customer')}</label>
             <select
               required
               value={partnerCode}
@@ -117,7 +119,7 @@ export function CreateSalesOrderPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Currency</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.currency')}</label>
             <input
               type="text"
               value={currencyCode}
@@ -129,9 +131,9 @@ export function CreateSalesOrderPage() {
  
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="text-sm font-medium text-slate-700">Order lines</label>
+            <label className="text-sm font-medium text-slate-700">{t('label.orderLines')}</label>
             <button type="button" className="btn-secondary text-xs" onClick={addLine}>
-              + Add line
+              {t('action.addLine')}
             </button>
           </div>
           <div className="space-y-2">
@@ -143,7 +145,7 @@ export function CreateSalesOrderPage() {
                   onChange={(e) => updateLine(idx, 'itemCode', e.target.value)}
                   className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm"
                 >
-                  <option value="">Select item...</option>
+                  <option value="">{t('action.selectItem')}</option>
                   {items.map((it) => (
                     <option key={it.id} value={it.code}>
                       {it.code} — {it.name}
@@ -154,7 +156,7 @@ export function CreateSalesOrderPage() {
                   type="number"
                   min="1"
                   step="1"
-                  placeholder="Qty"
+                  placeholder={t('label.qty')}
                   value={line.quantity}
                   onChange={(e) => updateLine(idx, 'quantity', e.target.value)}
                   className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right"
@@ -163,7 +165,7 @@ export function CreateSalesOrderPage() {
                   type="number"
                   min="0"
                   step="0.01"
-                  placeholder="Price"
+                  placeholder={t('label.unitPrice')}
                   value={line.unitPrice}
                   onChange={(e) => updateLine(idx, 'unitPrice', e.target.value)}
                   className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right"
@@ -172,7 +174,7 @@ export function CreateSalesOrderPage() {
                   type="button"
                   className="text-slate-400 hover:text-rose-500"
                   onClick={() => removeLine(idx)}
-                  title="Remove line"
+                  title={t('action.delete')}
                 >
                   &times;
                 </button>
@@ -191,10 +193,10 @@ export function CreateSalesOrderPage() {
  
         <div className="flex items-center gap-3 pt-2">
           <button type="submit" className="btn-primary" disabled={submitting}>
-            {submitting ? 'Creating...' : 'Create Sales Order'}
+            {submitting ? t('action.creating') : t('page.createSalesOrder.submit')}
           </button>
           <span className="text-xs text-slate-400">
-            After creation, confirm the order to auto-generate work orders.
+            {t('page.createSalesOrder.afterHint')}
           </span>
         </div>
       </form>
@@ -3,9 +3,11 @@ import { useNavigate } from &#39;react-router-dom&#39;
 import { identity } from '@/api/client'
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
+import { useT } from '@/i18n/LocaleContext'
  
 export function CreateUserPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [username, setUsername] = useState('')
   const [displayName, setDisplayName] = useState('')
   const [email, setEmail] = useState('')
@@ -31,29 +33,29 @@ export function CreateUserPage() {
   return (
     <div>
       <PageHeader
-        title="New User"
-        subtitle="Create a user account. Assign roles on the detail page after creation."
-        actions={<button className="btn-secondary" onClick={() => navigate('/users')}>Cancel</button>}
+        title={t('page.createUser.title')}
+        subtitle={t('page.createUser.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/users')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-lg">
         <div>
-          <label className="block text-sm font-medium text-slate-700">Username</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.username')}</label>
           <input type="text" required value={username} onChange={(e) => setUsername(e.target.value)}
             placeholder="jdoe" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Display name</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.displayName')}</label>
           <input type="text" required value={displayName} onChange={(e) => setDisplayName(e.target.value)}
             placeholder="Jane Doe" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Email (optional)</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.emailOptional')}</label>
           <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create User'}
+          {submitting ? t('action.creating') : t('page.createUser.submit')}
         </button>
       </form>
     </div>
@@ -5,12 +5,14 @@ import type { Item, Location } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 interface BomLine { itemCode: string; quantityPerUnit: string; sourceLocationCode: string }
 interface OpLine { operationCode: string; workCenter: string; standardMinutes: string }
  
 export function CreateWorkOrderPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [outputItemCode, setOutputItemCode] = useState('')
   const [outputQuantity, setOutputQuantity] = useState('')
@@ -77,55 +79,55 @@ export function CreateWorkOrderPage() {
   return (
     <div>
       <PageHeader
-        title="New Work Order"
-        subtitle="Create a production work order with optional BOM inputs and routing operations."
-        actions={<button className="btn-secondary" onClick={() => navigate('/work-orders')}>Cancel</button>}
+        title={t('page.createWorkOrder.title')}
+        subtitle={t('page.createWorkOrder.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/work-orders')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <div>
-            <label className="block text-sm font-medium text-slate-700">WO code</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.woCode')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="WO-PRINT-0002" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Output item</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.outputItem')}</label>
             <select required value={outputItemCode} onChange={(e) => setOutputItemCode(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-              <option value="">Select item...</option>
+              <option value="">{t('action.selectItem')}</option>
               {items.map((it) => <option key={it.id} value={it.code}>{it.code} — {it.name}</option>)}
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Output qty</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.outputQty')}</label>
             <input type="number" required min="1" step="1" value={outputQuantity}
               onChange={(e) => setOutputQuantity(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-right" />
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Due date (optional)</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.dueDate')}</label>
           <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)}
             className="mt-1 max-w-xs rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
  
-        {/* ─── BOM inputs ─────────────────────────────────────── */}
+        {/* BOM inputs */}
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="text-sm font-medium text-slate-700">BOM inputs (materials consumed per unit of output)</label>
-            <button type="button" className="btn-secondary text-xs" onClick={addBom}>+ Add input</button>
+            <label className="text-sm font-medium text-slate-700">{t('label.bomInputsDesc')}</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addBom}>{t('action.addInput')}</button>
           </div>
-          {bom.length === 0 && <p className="text-xs text-slate-400">No BOM lines. Output will be produced without consuming materials.</p>}
+          {bom.length === 0 && <p className="text-xs text-slate-400">{t('label.noBomHint')}</p>}
           <div className="space-y-2">
             {bom.map((b, idx) => (
               <div key={idx} className="flex items-center gap-2">
                 <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
                 <select value={b.itemCode} onChange={(e) => updateBom(idx, 'itemCode', e.target.value)}
                   className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
-                  <option value="">Item...</option>
+                  <option value="">{t('label.item')}...</option>
                   {items.map((it) => <option key={it.id} value={it.code}>{it.code}</option>)}
                 </select>
-                <input type="number" min="0.01" step="0.01" placeholder="Qty/unit" value={b.quantityPerUnit}
+                <input type="number" min="0.01" step="0.01" placeholder={t('label.qtyPerUnit')} value={b.quantityPerUnit}
                   onChange={(e) => updateBom(idx, 'quantityPerUnit', e.target.value)}
                   className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
                 <select value={b.sourceLocationCode} onChange={(e) => updateBom(idx, 'sourceLocationCode', e.target.value)}
@@ -138,24 +140,24 @@ export function CreateWorkOrderPage() {
           </div>
         </div>
  
-        {/* ─── Routing operations ─────────────────────────────── */}
+        {/* Routing operations */}
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="text-sm font-medium text-slate-700">Routing operations (sequential steps)</label>
-            <button type="button" className="btn-secondary text-xs" onClick={addOp}>+ Add operation</button>
+            <label className="text-sm font-medium text-slate-700">{t('label.routingOpsDesc')}</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addOp}>{t('action.addOperation')}</button>
           </div>
-          {ops.length === 0 && <p className="text-xs text-slate-400">No routing. Work order completes in one step.</p>}
+          {ops.length === 0 && <p className="text-xs text-slate-400">{t('label.noRoutingHint')}</p>}
           <div className="space-y-2">
             {ops.map((o, idx) => (
               <div key={idx} className="flex items-center gap-2">
                 <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
-                <input type="text" required placeholder="Op code (e.g. CTP)" value={o.operationCode}
+                <input type="text" required placeholder={t('label.operation')} value={o.operationCode}
                   onChange={(e) => updateOp(idx, 'operationCode', e.target.value)}
                   className="w-28 rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
-                <input type="text" required placeholder="Work center" value={o.workCenter}
+                <input type="text" required placeholder={t('label.workCenter')} value={o.workCenter}
                   onChange={(e) => updateOp(idx, 'workCenter', e.target.value)}
                   className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
-                <input type="number" min="1" step="1" placeholder="Std min" value={o.standardMinutes}
+                <input type="number" min="1" step="1" placeholder={t('label.stdMin')} value={o.standardMinutes}
                   onChange={(e) => updateOp(idx, 'standardMinutes', e.target.value)}
                   className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
                 <button type="button" className="text-slate-400 hover:text-rose-500" onClick={() => removeOp(idx)}>&times;</button>
@@ -171,7 +173,7 @@ export function CreateWorkOrderPage() {
         />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Creating...' : 'Create Work Order'}
+          {submitting ? t('action.creating') : t('page.createWorkOrder.submit')}
         </button>
       </form>
     </div>
@@ -13,6 +13,7 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { useAuth } from '@/auth/AuthContext'
+import { useT } from '@/i18n/LocaleContext'
  
 interface DashboardCounts {
   items: number
@@ -27,6 +28,7 @@ interface DashboardCounts {
  
 export function DashboardPage() {
   const { username } = useAuth()
+  const t = useT()
   const [counts, setCounts] = useState<DashboardCounts | null>(null)
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -69,73 +71,68 @@ export function DashboardPage() {
   return (
     <div>
       <PageHeader
-        title={`Welcome${username ? ', ' + username : ''}`}
-        subtitle="The framework's buy-make-sell loop, end to end through the same Postgres."
+        title={`${t('page.dashboard.welcome')}${username ? ', ' + username : ''}`}
+        subtitle={t('page.dashboard.subtitle')}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {counts && (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <DashboardCard label="Items" value={counts.items} to="/items" />
-          <DashboardCard label="Partners" value={counts.partners} to="/partners" />
-          <DashboardCard label="Locations" value={counts.locations} to="/locations" />
+          <DashboardCard label={t('page.dashboard.cardItems')} value={counts.items} to="/items" />
+          <DashboardCard label={t('page.dashboard.cardPartners')} value={counts.partners} to="/partners" />
+          <DashboardCard label={t('page.dashboard.cardLocations')} value={counts.locations} to="/locations" />
           <DashboardCard
-            label="Work orders in progress"
+            label={t('page.dashboard.cardWoInProgress')}
             value={counts.inProgressWorkOrders}
             to="/shop-floor"
             highlight
           />
-          <DashboardCard label="Sales orders" value={counts.salesOrders} to="/sales-orders" />
+          <DashboardCard label={t('page.dashboard.cardSalesOrders')} value={counts.salesOrders} to="/sales-orders" />
           <DashboardCard
-            label="Purchase orders"
+            label={t('page.dashboard.cardPurchaseOrders')}
             value={counts.purchaseOrders}
             to="/purchase-orders"
           />
-          <DashboardCard label="Work orders" value={counts.workOrders} to="/work-orders" />
+          <DashboardCard label={t('page.dashboard.cardWorkOrders')} value={counts.workOrders} to="/work-orders" />
           <DashboardCard
-            label="Journal entries"
+            label={t('page.dashboard.cardJournalEntries')}
             value={counts.journalEntries}
             to="/journal-entries"
           />
         </div>
       )}
       <div className="mt-8 card p-5 text-sm text-slate-600">
-        <h2 className="mb-2 text-base font-semibold text-slate-800">Getting started</h2>
+        <h2 className="mb-2 text-base font-semibold text-slate-800">{t('page.dashboard.gettingStarted')}</h2>
         <p className="mb-3 text-slate-500">
-          The framework's buy-make-sell loop, end to end.
+          {t('page.dashboard.gettingStartedDesc')}
         </p>
         <ol className="list-decimal space-y-2 pl-5">
           <li>
-            <strong>Set up master data</strong> — create{' '}
-            <Link to="/items/new" className="text-brand-600 hover:underline">items</Link>,{' '}
-            <Link to="/partners/new" className="text-brand-600 hover:underline">partners</Link>, and{' '}
-            <Link to="/locations/new" className="text-brand-600 hover:underline">locations</Link>.
-            Then{' '}
-            <Link to="/balances/adjust" className="text-brand-600 hover:underline">adjust stock</Link>{' '}
-            to set opening balances.
+            <strong>{t('page.dashboard.step1')}</strong> — {t('page.dashboard.step1Desc')}{' '}
+            <Link to="/items/new" className="text-brand-600 hover:underline">{t('page.dashboard.step1DescItems')}</Link>,{' '}
+            <Link to="/partners/new" className="text-brand-600 hover:underline">{t('page.dashboard.step1DescPartners')}</Link>{t('page.dashboard.step1DescAnd')}{' '}
+            <Link to="/locations/new" className="text-brand-600 hover:underline">{t('page.dashboard.step1DescLocations')}</Link>{t('page.dashboard.step1DescThen')}{' '}
+            <Link to="/balances/adjust" className="text-brand-600 hover:underline">{t('page.dashboard.step1DescAdjust')}</Link>{' '}
+            {t('page.dashboard.step1DescEnd')}
           </li>
           <li>
-            <strong>Create a sales order</strong> —{' '}
-            <Link to="/sales-orders/new" className="text-brand-600 hover:underline">new order</Link>{' '}
-            with line items. Confirm it — the system auto-generates production work orders and
-            posts an AR journal entry with double-entry lines (DR Accounts Receivable, CR Revenue).
+            <strong>{t('page.dashboard.step2')}</strong> —{' '}
+            <Link to="/sales-orders/new" className="text-brand-600 hover:underline">{t('page.dashboard.step2Link')}</Link>{' '}
+            {t('page.dashboard.step2Desc')}
           </li>
           <li>
-            <strong>Walk the work order</strong> — start it, walk routing operations on the{' '}
-            <Link to="/shop-floor" className="text-brand-600 hover:underline">Shop Floor</Link>,
-            then complete it. Materials are consumed, finished goods credited.
+            <strong>{t('page.dashboard.step3')}</strong> — {t('page.dashboard.step3Desc1')}{' '}
+            <Link to="/shop-floor" className="text-brand-600 hover:underline">{t('page.dashboard.step3ShopFloor')}</Link>{t('page.dashboard.step3Desc2')}
           </li>
           <li>
-            <strong>Ship the sales order</strong> — stock leaves the warehouse, the AR journal
-            entry settles. View the ledger in{' '}
-            <Link to="/movements" className="text-brand-600 hover:underline">Movements</Link>{' '}
-            and double-entry lines in{' '}
-            <Link to="/journal-entries" className="text-brand-600 hover:underline">Journal Entries</Link>.
+            <strong>{t('page.dashboard.step4')}</strong> — {t('page.dashboard.step4Desc1')}{' '}
+            <Link to="/movements" className="text-brand-600 hover:underline">{t('page.dashboard.step4Movements')}</Link>{' '}
+            {t('page.dashboard.step4Desc2')}{' '}
+            <Link to="/journal-entries" className="text-brand-600 hover:underline">{t('page.dashboard.step4JE')}</Link>.
           </li>
           <li>
-            <strong>Restock via purchase</strong> — create a{' '}
-            <Link to="/purchase-orders/new" className="text-brand-600 hover:underline">purchase order</Link>,
-            confirm, and receive into a warehouse. AP journal entry posts and settles.
+            <strong>{t('page.dashboard.step5')}</strong> — {t('page.dashboard.step5Desc1')}{' '}
+            <Link to="/purchase-orders/new" className="text-brand-600 hover:underline">{t('page.dashboard.step5Link')}</Link>{t('page.dashboard.step5Desc2')}
           </li>
         </ol>
       </div>
@@ -6,12 +6,14 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 const ITEM_TYPES = ['GOOD', 'SERVICE', 'DIGITAL'] as const
  
 export function EditItemPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [item, setItem] = useState<Item | null>(null)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
@@ -60,39 +62,39 @@ export function EditItemPage() {
   return (
     <div>
       <PageHeader
-        title={`Edit ${item.code}`}
-        subtitle={`Base UoM: ${item.baseUomCode} (read-only after creation)`}
-        actions={<button className="btn-secondary" onClick={() => navigate('/items')}>Cancel</button>}
+        title={t('page.editItem.title').replace('{code}', item.code)}
+        subtitle={t('page.editItem.subtitle').replace('{uom}', item.baseUomCode)}
+        actions={<button className="btn-secondary" onClick={() => navigate('/items')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.type')}</label>
             <select value={itemType} onChange={(e) => setItemType(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-              {ITEM_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+              {ITEM_TYPES.map((it) => <option key={it} value={it}>{it}</option>)}
             </select>
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium text-slate-700">Description</label>
+          <label className="block text-sm font-medium text-slate-700">{t('label.description')}</label>
           <input type="text" value={description} onChange={(e) => setDescription(e.target.value)}
             className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
         </div>
         <div className="flex items-center gap-2">
           <input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)}
             className="rounded border-slate-300" id="active" />
-          <label htmlFor="active" className="text-sm text-slate-700">Active</label>
+          <label htmlFor="active" className="text-sm text-slate-700">{t('label.active')}</label>
         </div>
         <DynamicExtFields entityName="Item" values={ext} onChange={(k, v) => setExt(prev => ({ ...prev, [k]: v }))} />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Saving…' : 'Save Changes'}
+          {submitting ? t('action.saving') : t('action.saveChanges')}
         </button>
       </form>
     </div>
@@ -6,12 +6,14 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DynamicExtFields } from '@/components/DynamicExtFields'
+import { useT } from '@/i18n/LocaleContext'
  
 const PARTNER_TYPES = ['CUSTOMER', 'SUPPLIER', 'BOTH'] as const
  
 export function EditPartnerPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [partner, setPartner] = useState<Partner | null>(null)
   const [name, setName] = useState('')
   const [type, setType] = useState<string>('CUSTOMER')
@@ -61,31 +63,31 @@ export function EditPartnerPage() {
   return (
     <div>
       <PageHeader
-        title={`Edit ${partner.code}`}
-        subtitle={`Partner code is read-only after creation`}
-        actions={<button className="btn-secondary" onClick={() => navigate('/partners')}>Cancel</button>}
+        title={t('page.editPartner.title').replace('{code}', partner.code)}
+        subtitle={t('page.editPartner.subtitle')}
+        actions={<button className="btn-secondary" onClick={() => navigate('/partners')}>{t('action.cancel')}</button>}
       />
       <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.type')}</label>
             <select value={type} onChange={(e) => setType(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
-              {PARTNER_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+              {PARTNER_TYPES.map((pt) => <option key={pt} value={pt}>{pt}</option>)}
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Email</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.email')}</label>
             <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Phone</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.phone')}</label>
             <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)}
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
@@ -93,7 +95,7 @@ export function EditPartnerPage() {
         <DynamicExtFields entityName="Partner" values={ext} onChange={(k, v) => setExt(prev => ({ ...prev, [k]: v }))} />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
-          {submitting ? 'Saving…' : 'Save Changes'}
+          {submitting ? t('action.saving') : t('action.saveChanges')}
         </button>
       </form>
     </div>
@@ -17,6 +17,7 @@ import { ErrorBox } from &#39;@/components/ErrorBox&#39;
 import { Loading } from '@/components/Loading'
 import { vibeWidgets } from '@/components/form-widgets'
 import { vibeTemplates } from '@/components/form-widgets/vibeErpTheme'
+import { useT } from '@/i18n/LocaleContext'
  
 // ── Types ──────────────────────────────────────────────────────────
  
@@ -165,6 +166,7 @@ function hydrateFields(def: FormDefinition): DesignerField[] {
 export function FormDesignerPage() {
   const { slug: routeSlug } = useParams<{ slug: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const isEdit = Boolean(routeSlug)
  
   // ── Top bar state ──
@@ -302,15 +304,15 @@ export function FormDesignerPage() {
   return (
     <div>
       <PageHeader
-        title={isEdit ? 'Edit Form Definition' : 'New Form Definition'}
-        subtitle="Design a metadata-driven form with a live preview."
+        title={isEdit ? t('page.formDesigner.editTitle') : t('page.formDesigner.newTitle')}
+        subtitle={t('page.formDesigner.subtitle')}
       />
  
       {/* ── Top bar ── */}
       <div className="card p-4 mb-4">
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
           <div>
-            <label className="block text-sm font-medium text-slate-700">Title</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.title')}</label>
             <input
               type="text"
               value={title}
@@ -320,7 +322,7 @@ export function FormDesignerPage() {
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Entity name</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.entityName')}</label>
             <input
               type="text"
               value={entityName}
@@ -330,7 +332,7 @@ export function FormDesignerPage() {
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Purpose</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.purpose')}</label>
             <select
               value={purpose}
               onChange={(e) => setPurpose(e.target.value as FormPurpose)}
@@ -344,7 +346,7 @@ export function FormDesignerPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-slate-700">Slug</label>
+            <label className="block text-sm font-medium text-slate-700">{t('label.slug')}</label>
             <input
               type="text"
               value={slug}
@@ -363,14 +365,14 @@ export function FormDesignerPage() {
               disabled={saving}
               onClick={handleSave}
             >
-              {saving ? 'Saving...' : 'Save'}
+              {saving ? t('action.saving') : t('action.save')}
             </button>
             <button
               type="button"
               className="btn-secondary"
               onClick={() => navigate('/admin/metadata')}
             >
-              Discard
+              {t('action.discard')}
             </button>
           </div>
         </div>
@@ -387,7 +389,7 @@ export function FormDesignerPage() {
         {/* ── Left panel: field list (3/5 = 60%) ── */}
         <div className="lg:col-span-3 space-y-2">
           <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">
-            Fields
+            {t('label.fields')}
           </h2>
  
           {fields.map((field, idx) => (
@@ -409,10 +411,10 @@ export function FormDesignerPage() {
  
           <div className="flex gap-2 pt-2">
             <button type="button" className="btn-secondary" onClick={addField}>
-              + Add Field
+              {t('action.addField')}
             </button>
             <button type="button" className="btn-secondary" onClick={addSection}>
-              + Add Section Divider
+              {t('action.addSectionDivider')}
             </button>
           </div>
         </div>
@@ -420,12 +422,12 @@ export function FormDesignerPage() {
         {/* ── Right panel: live preview (2/5 = 40%) ── */}
         <div className="lg:col-span-2">
           <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">
-            Live Preview
+            {t('label.livePreview')}
           </h2>
           <div className="card p-6">
             {Object.keys(jsonSchema.properties ?? {}).length === 0 ? (
               <p className="text-sm text-slate-400 italic">
-                Add at least one field with a key to see the preview.
+                {t('label.addFieldHint')}
               </p>
             ) : (
               <Form
@@ -475,6 +477,8 @@ function FieldRow({
   onRemove,
   onMove,
 }: FieldRowProps) {
+  const t = useT()
+
   if (field.isSectionDivider) {
     return (
       <div className="card p-3 border-l-4 border-indigo-300">
@@ -485,20 +489,20 @@ function FieldRow({
             onMove={onMove}
           />
           <span className="text-xs font-semibold uppercase text-indigo-500 mr-2">
-            Section
+            {t('label.section')}
           </span>
           <input
             type="text"
             value={field.sectionTitle ?? ''}
             onChange={(e) => onUpdate({ sectionTitle: e.target.value })}
-            placeholder="Section title"
+            placeholder={t('label.sectionTitle')}
             className="flex-1 rounded-md border border-slate-300 px-2 py-1 text-sm"
           />
           <button
             type="button"
             onClick={onRemove}
             className="text-slate-400 hover:text-rose-500 text-sm px-1"
-            title="Remove section"
+            title={t('label.removeSection')}
           >
             x
           </button>
@@ -524,7 +528,7 @@ function FieldRow({
           type="text"
           value={field.label}
           onChange={(e) => onUpdate({ label: e.target.value })}
-          placeholder="Label"
+          placeholder={t('label.label')}
           className="flex-1 rounded-md border border-slate-300 px-2 py-1 text-sm"
         />
         <select
@@ -534,9 +538,9 @@ function FieldRow({
           }
           className="w-24 rounded-md border border-slate-300 px-2 py-1 text-sm"
         >
-          {FIELD_TYPES.map((t) => (
-            <option key={t} value={t}>
-              {t}
+          {FIELD_TYPES.map((ft) => (
+            <option key={ft} value={ft}>
+              {ft}
             </option>
           ))}
         </select>
@@ -547,7 +551,7 @@ function FieldRow({
             onChange={(e) => onUpdate({ required: e.target.checked })}
             className="rounded border-slate-300"
           />
-          Req
+          {t('label.req')}
         </label>
         <select
           value={field.width}
@@ -555,11 +559,11 @@ function FieldRow({
             onUpdate({ width: Number(e.target.value) as 1 | 2 | 3 })
           }
           className="w-20 rounded-md border border-slate-300 px-2 py-1 text-sm"
-          title="Column span"
+          title={t('label.colSpan')}
         >
           {WIDTH_OPTIONS.map((w) => (
             <option key={w} value={w}>
-              {w} col{w > 1 ? 's' : ''}
+              {w > 1 ? t('label.cols').replace('{n}', String(w)) : t('label.col').replace('{n}', String(w))}
             </option>
           ))}
         </select>
@@ -567,7 +571,7 @@ function FieldRow({
           type="button"
           onClick={onToggleExpand}
           className="text-slate-400 hover:text-slate-600 text-sm px-1"
-          title="Toggle details"
+          title={t('label.toggleDetails')}
         >
           {isExpanded ? '\u25B2' : '\u25BC'}
         </button>
@@ -575,7 +579,7 @@ function FieldRow({
           type="button"
           onClick={onRemove}
           className="text-slate-400 hover:text-rose-500 text-sm px-1"
-          title="Remove field"
+          title={t('label.removeField')}
         >
           x
         </button>
@@ -586,7 +590,7 @@ function FieldRow({
         <div className="mt-3 ml-10 grid grid-cols-1 gap-3 sm:grid-cols-2 border-t border-slate-100 pt-3">
           <div>
             <label className="block text-sm font-medium text-slate-700">
-              Label (English)
+              {t('label.labelEnglish')}
             </label>
             <input
               type="text"
@@ -597,7 +601,7 @@ function FieldRow({
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700">
-              Placeholder
+              {t('label.placeholder')}
             </label>
             <input
               type="text"
@@ -610,7 +614,7 @@ function FieldRow({
           </div>
           <div className="sm:col-span-2">
             <label className="block text-sm font-medium text-slate-700">
-              Help text
+              {t('label.helpText')}
             </label>
             <input
               type="text"
@@ -623,7 +627,7 @@ function FieldRow({
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700">
-              Widget override
+              {t('label.widgetOverride')}
             </label>
             <select
               value={field.widgetOverride ?? ''}
@@ -634,17 +638,17 @@ function FieldRow({
             >
               {WIDGET_OPTIONS.map((w) => (
                 <option key={w} value={w}>
-                  {w || '(default)'}
+                  {w || t('label.widgetDefault')}
                 </option>
               ))}
             </select>
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700">
-              Visibility condition
+              {t('label.visibilityCondition')}
             </label>
             <div className="mt-1 flex items-center gap-2">
-              <span className="text-sm text-slate-500">Show when</span>
+              <span className="text-sm text-slate-500">{t('label.showWhen')}</span>
               <select
                 value={field.visibleWhen?.field ?? ''}
                 onChange={(e) =>
@@ -659,7 +663,7 @@ function FieldRow({
                 }
                 className="rounded-md border border-slate-300 px-2 py-1 text-sm"
               >
-                <option value="">(always)</option>
+                <option value="">{t('label.always')}</option>
                 {fieldKeys
                   .filter((k) => k !== field.key)
                   .map((k) => (
@@ -668,7 +672,7 @@ function FieldRow({
                     </option>
                   ))}
               </select>
-              <span className="text-sm text-slate-500">equals</span>
+              <span className="text-sm text-slate-500">{t('label.equals')}</span>
               <input
                 type="text"
                 value={field.visibleWhen?.equals ?? ''}
@@ -702,6 +706,7 @@ function ReorderButtons({
   total: number
   onMove: (direction: 'up' | 'down') => void
 }) {
+  const t = useT()
   return (
     <div className="flex flex-col">
       <button
@@ -709,7 +714,7 @@ function ReorderButtons({
         onClick={() => onMove('up')}
         disabled={index === 0}
         className="text-slate-400 hover:text-slate-600 disabled:opacity-30 text-xs leading-none"
-        title="Move up"
+        title={t('label.moveUp')}
       >
         &#9650;
       </button>
@@ -718,7 +723,7 @@ function ReorderButtons({
         onClick={() => onMove('down')}
         disabled={index === total - 1}
         className="text-slate-400 hover:text-slate-600 disabled:opacity-30 text-xs leading-none"
-        title="Move down"
+        title={t('label.moveDown')}
       >
         &#9660;
       </button>
@@ -6,8 +6,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function ItemsPage() {
+  const t = useT()
   const [rows, setRows] = useState<Item[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -22,28 +24,28 @@ export function ItemsPage() {
  
   const columns: Column<Item>[] = [
     {
-      header: 'Code',
+      header: t('label.code'),
       key: 'code',
       render: (r) => (
         <Link to={`/items/${r.id}/edit`} className="font-mono text-brand-600 hover:underline">{r.code}</Link>
       ),
     },
-    { header: 'Name', key: 'name' },
-    { header: 'Type', key: 'itemType' },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.type'), key: 'itemType' },
     { header: 'UoM', key: 'baseUomCode', render: (r) => <span className="font-mono">{r.baseUomCode}</span> },
     {
-      header: 'Active',
+      header: t('label.active'),
       key: 'active',
-      render: (r) => (r.active ? <span className="text-emerald-600">●</span> : <span className="text-slate-300">●</span>),
+      render: (r) => (r.active ? <span className="text-emerald-600">{'\u25CF'}</span> : <span className="text-slate-300">{'\u25CF'}</span>),
     },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Items"
-        subtitle="Catalog of items the framework can transact: raw materials, finished goods, services."
-        actions={<Link to="/items/new" className="btn-primary">+ New Item</Link>}
+        title={t('page.items.title')}
+        subtitle={t('page.items.subtitle')}
+        actions={<Link to="/items/new" className="btn-primary">{t('action.newItem')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -5,8 +5,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function JournalEntriesPage() {
+  const t = useT()
   const [rows, setRows] = useState<JournalEntry[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -34,26 +36,26 @@ export function JournalEntriesPage() {
   return (
     <div>
       <PageHeader
-        title="Journal Entries"
-        subtitle="Double-entry GL entries posted by pbc-finance from order lifecycle events. Click a row to see debit/credit lines."
+        title={t('page.journalEntries.title')}
+        subtitle={t('page.journalEntries.subtitle')}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && !error && rows.length === 0 && (
-        <div className="card p-6 text-sm text-slate-400">No journal entries yet.</div>
+        <div className="card p-6 text-sm text-slate-400">{t('label.noJournalEntriesYet')}</div>
       )}
       {!loading && !error && rows.length > 0 && (
         <div className="card overflow-x-auto">
           <table className="table-base">
             <thead className="bg-slate-50">
               <tr>
-                <th>Posted</th>
-                <th>Type</th>
-                <th>Status</th>
-                <th>Order</th>
-                <th>Partner</th>
-                <th>Amount</th>
-                <th>Lines</th>
+                <th>{t('label.posted')}</th>
+                <th>{t('label.type')}</th>
+                <th>{t('label.status')}</th>
+                <th>{t('label.order')}</th>
+                <th>{t('label.partner')}</th>
+                <th>{t('label.amount')}</th>
+                <th>{t('label.lines')}</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-100">
@@ -66,7 +68,7 @@ export function JournalEntriesPage() {
                       className="hover:bg-slate-50 cursor-pointer"
                       onClick={() => toggle(je.id)}
                     >
-                      <td>{je.postedAt ? new Date(je.postedAt).toLocaleString() : '—'}</td>
+                      <td>{je.postedAt ? new Date(je.postedAt).toLocaleString() : '\u2014'}</td>
                       <td>{je.type}</td>
                       <td><StatusBadge status={je.status} /></td>
                       <td className="font-mono">{je.orderCode}</td>
@@ -83,11 +85,11 @@ export function JournalEntriesPage() {
                           <table className="min-w-full text-xs">
                             <thead>
                               <tr className="text-slate-400">
-                                <th className="text-left px-2 py-1">#</th>
-                                <th className="text-left px-2 py-1">Account</th>
-                                <th className="text-right px-2 py-1">Debit</th>
-                                <th className="text-right px-2 py-1">Credit</th>
-                                <th className="text-left px-2 py-1">Description</th>
+                                <th className="text-left px-2 py-1">{t('label.lineNo')}</th>
+                                <th className="text-left px-2 py-1">{t('label.accountType')}</th>
+                                <th className="text-right px-2 py-1">{t('label.debit')}</th>
+                                <th className="text-right px-2 py-1">{t('label.credit')}</th>
+                                <th className="text-left px-2 py-1">{t('label.description')}</th>
                               </tr>
                             </thead>
                             <tbody>
@@ -16,6 +16,7 @@ import { metadata } from &#39;@/api/client&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 // ─── Designer state types ──────────────────────────────────────────
  
@@ -65,6 +66,7 @@ function emptyState(): DesignerState {
  
 export function ListViewDesignerPage() {
   const navigate = useNavigate()
+  const t = useT()
   const { slug: routeSlug } = useParams<{ slug: string }>()
   const isEdit = Boolean(routeSlug)
  
@@ -254,7 +256,7 @@ export function ListViewDesignerPage() {
  
   if (loading) {
     return (
-      <div className="p-6 text-sm text-slate-500">Loading...</div>
+      <div className="p-6 text-sm text-slate-500">{t('label.loading')}</div>
     )
   }
  
@@ -268,14 +270,14 @@ export function ListViewDesignerPage() {
   return (
     <div>
       <PageHeader
-        title={isEdit ? 'Edit List View' : 'New List View'}
-        subtitle="Configure columns, filters, sorting, and pagination for an entity list view."
+        title={isEdit ? t('page.listViewDesigner.editTitle') : t('page.listViewDesigner.newTitle')}
+        subtitle={t('page.listViewDesigner.subtitle')}
         actions={
           <button
             className="btn-secondary"
             onClick={() => navigate('/admin/metadata')}
           >
-            Cancel
+            {t('action.cancel')}
           </button>
         }
       />
@@ -285,11 +287,11 @@ export function ListViewDesignerPage() {
  
         {/* ── Top bar: title, entity, slug ───────────────────── */}
         <div className="card p-6 space-y-4">
-          <h2 className="text-lg font-semibold text-slate-800">General</h2>
+          <h2 className="text-lg font-semibold text-slate-800">{t('label.general')}</h2>
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Title
+                {t('label.title')}
               </label>
               <input
                 type="text"
@@ -302,7 +304,7 @@ export function ListViewDesignerPage() {
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Entity Name
+                {t('label.entityName')}
               </label>
               <input
                 type="text"
@@ -315,7 +317,7 @@ export function ListViewDesignerPage() {
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Slug
+                {t('label.slug')}
               </label>
               <input
                 type="text"
@@ -333,31 +335,31 @@ export function ListViewDesignerPage() {
         {/* ── Columns section ────────────────────────────────── */}
         <div className="card p-6 space-y-4">
           <div className="flex items-center justify-between">
-            <h2 className="text-lg font-semibold text-slate-800">Columns</h2>
+            <h2 className="text-lg font-semibold text-slate-800">{t('label.columns')}</h2>
             <button
               type="button"
               className="btn-secondary text-xs"
               onClick={addColumn}
             >
-              + Add Column
+              {t('action.addColumn')}
             </button>
           </div>
  
           {state.columns.length === 0 ? (
             <p className="text-sm text-slate-400">
-              No columns defined yet. Click "Add Column" to start.
+              {t('label.noColumnsHint')}
             </p>
           ) : (
             <div className="overflow-x-auto">
               <table className="table-base text-sm">
                 <thead className="bg-slate-50">
                   <tr>
-                    <th className="w-10">Show</th>
-                    <th>Field</th>
-                    <th>Label</th>
-                    <th className="w-28">Format</th>
-                    <th className="w-16">Sortable</th>
-                    <th className="w-24">Order</th>
+                    <th className="w-10">{t('label.show')}</th>
+                    <th>{t('label.field')}</th>
+                    <th>{t('label.label')}</th>
+                    <th className="w-28">{t('label.format')}</th>
+                    <th className="w-16">{t('label.sortable')}</th>
+                    <th className="w-24">{t('label.orderMeta')}</th>
                     <th className="w-10"></th>
                   </tr>
                 </thead>
@@ -428,7 +430,7 @@ export function ListViewDesignerPage() {
                             className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 disabled:opacity-30"
                             disabled={idx === 0}
                             onClick={() => moveColumn(idx, -1)}
-                            title="Move up"
+                            title={t('label.moveUp')}
                           >
                             &#9650;
                           </button>
@@ -437,7 +439,7 @@ export function ListViewDesignerPage() {
                             className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 disabled:opacity-30"
                             disabled={idx === state.columns.length - 1}
                             onClick={() => moveColumn(idx, 1)}
-                            title="Move down"
+                            title={t('label.moveDown')}
                           >
                             &#9660;
                           </button>
@@ -448,7 +450,7 @@ export function ListViewDesignerPage() {
                           type="button"
                           className="text-slate-400 hover:text-rose-500"
                           onClick={() => removeColumn(idx)}
-                          title="Remove column"
+                          title={t('label.removeColumn')}
                         >
                           &times;
                         </button>
@@ -464,19 +466,19 @@ export function ListViewDesignerPage() {
         {/* ── Filters section ────────────────────────────────── */}
         <div className="card p-6 space-y-4">
           <div className="flex items-center justify-between">
-            <h2 className="text-lg font-semibold text-slate-800">Filters</h2>
+            <h2 className="text-lg font-semibold text-slate-800">{t('label.filters')}</h2>
             <button
               type="button"
               className="btn-secondary text-xs"
               onClick={addFilter}
             >
-              + Add Filter
+              {t('action.addFilter')}
             </button>
           </div>
  
           {state.filters.length === 0 ? (
             <p className="text-sm text-slate-400">
-              No filters defined. Click "Add Filter" to add filterable fields.
+              {t('label.noFiltersHint')}
             </p>
           ) : (
             <div className="space-y-2">
@@ -488,7 +490,7 @@ export function ListViewDesignerPage() {
                     onChange={(e) =>
                       updateFilter(idx, { field: e.target.value })
                     }
-                    placeholder="Field name"
+                    placeholder={t('label.fieldName')}
                     className={smallInputCls + ' flex-1'}
                   />
                   <select
@@ -510,14 +512,14 @@ export function ListViewDesignerPage() {
                     onChange={(e) =>
                       updateFilter(idx, { label: e.target.value })
                     }
-                    placeholder="Display label"
+                    placeholder={t('label.displayLabel')}
                     className={smallInputCls + ' flex-1'}
                   />
                   <button
                     type="button"
                     className="text-slate-400 hover:text-rose-500"
                     onClick={() => removeFilter(idx)}
-                    title="Remove filter"
+                    title={t('label.removeFilter')}
                   >
                     &times;
                   </button>
@@ -530,12 +532,12 @@ export function ListViewDesignerPage() {
         {/* ── Sorting & page size section ────────────────────── */}
         <div className="card p-6 space-y-4">
           <h2 className="text-lg font-semibold text-slate-800">
-            Sorting &amp; Pagination
+            {t('label.sortingPagination')}
           </h2>
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Default Sort Field
+                {t('label.defaultSortField')}
               </label>
               <select
                 value={state.defaultSort?.field ?? ''}
@@ -552,7 +554,7 @@ export function ListViewDesignerPage() {
                 }}
                 className={inputCls}
               >
-                <option value="">-- none --</option>
+                <option value="">{t('label.none')}</option>
                 {state.columns
                   .filter((c) => c.field.trim())
                   .map((c) => (
@@ -564,7 +566,7 @@ export function ListViewDesignerPage() {
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Direction
+                {t('label.direction')}
               </label>
               <select
                 value={state.defaultSort?.direction ?? 'asc'}
@@ -578,13 +580,13 @@ export function ListViewDesignerPage() {
                 disabled={!state.defaultSort}
                 className={`${inputCls}${!state.defaultSort ? ' bg-slate-50 text-slate-500' : ''}`}
               >
-                <option value="asc">Ascending</option>
-                <option value="desc">Descending</option>
+                <option value="asc">{t('label.ascending')}</option>
+                <option value="desc">{t('label.descending')}</option>
               </select>
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700">
-                Page Size
+                {t('label.pageSize')}
               </label>
               <input
                 type="number"
@@ -602,10 +604,10 @@ export function ListViewDesignerPage() {
  
         {/* ── Preview section ────────────────────────────────── */}
         <div className="card p-6 space-y-4">
-          <h2 className="text-lg font-semibold text-slate-800">Preview</h2>
+          <h2 className="text-lg font-semibold text-slate-800">{t('label.preview')}</h2>
           {previewColumns.length === 0 ? (
             <p className="text-sm text-slate-400">
-              Add visible columns with a field name to see a preview.
+              {t('label.addColumnsHint')}
             </p>
           ) : (
             <DataTable
@@ -619,14 +621,14 @@ export function ListViewDesignerPage() {
         {/* ── Actions ────────────────────────────────────────── */}
         <div className="flex items-center gap-3">
           <button type="submit" className="btn-primary" disabled={saving}>
-            {saving ? 'Saving...' : 'Save List View'}
+            {saving ? t('action.saving') : t('action.saveListView')}
           </button>
           <button
             type="button"
             className="btn-secondary"
             onClick={() => navigate('/admin/metadata')}
           >
-            Cancel
+            {t('action.cancel')}
           </button>
         </div>
       </form>
@@ -6,8 +6,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function LocationsPage() {
+  const t = useT()
   const [rows, setRows] = useState<Location[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -21,22 +23,22 @@ export function LocationsPage() {
   }, [])
  
   const columns: Column<Location>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
-    { header: 'Name', key: 'name' },
-    { header: 'Type', key: 'type' },
+    { header: t('label.code'), key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.type'), key: 'type' },
     {
-      header: 'Active',
+      header: t('label.active'),
       key: 'active',
-      render: (r) => (r.active ? <span className="text-emerald-600">●</span> : <span className="text-slate-300">●</span>),
+      render: (r) => (r.active ? <span className="text-emerald-600">{'\u25CF'}</span> : <span className="text-slate-300">{'\u25CF'}</span>),
     },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Locations"
-        subtitle="Warehouses, bins, and virtual locations the inventory PBC tracks."
-        actions={<Link to="/locations/new" className="btn-primary">+ New Location</Link>}
+        title={t('page.locations.title')}
+        subtitle={t('page.locations.subtitle')}
+        actions={<Link to="/locations/new" className="btn-primary">{t('action.newLocation')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -4,6 +4,7 @@ import { useAuth } from &#39;@/auth/AuthContext&#39;
 import { meta } from '@/api/client'
 import type { MetaInfo } from '@/types/api'
 import { ErrorBox } from '@/components/ErrorBox'
+import { useT } from '@/i18n/LocaleContext'
  
 interface LocationState {
   from?: string
@@ -13,6 +14,7 @@ export function LoginPage() {
   const { login, token, loading } = useAuth()
   const navigate = useNavigate()
   const location = useLocation()
+  const t = useT()
   const [username, setUsername] = useState('admin')
   const [password, setPassword] = useState('')
   const [error, setError] = useState<Error | null>(null)
@@ -47,13 +49,13 @@ export function LoginPage() {
         <div className="mb-6 text-center">
           <h1 className="text-3xl font-bold text-brand-600">vibe_erp</h1>
           <p className="mt-1 text-sm text-slate-500">
-            Composable ERP framework for the printing industry
+            {t('page.login.tagline')}
           </p>
         </div>
         <div className="card p-6">
           <form onSubmit={onSubmit} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-slate-700">Username</label>
+              <label className="block text-sm font-medium text-slate-700">{t('label.username')}</label>
               <input
                 type="text"
                 value={username}
@@ -64,7 +66,7 @@ export function LoginPage() {
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-slate-700">Password</label>
+              <label className="block text-sm font-medium text-slate-700">{t('label.password')}</label>
               <input
                 type="password"
                 value={password}
@@ -73,23 +75,23 @@ export function LoginPage() {
                 required
               />
               <p className="mt-1 text-xs text-slate-400">
-                The bootstrap admin password is printed to the application boot log on first start.
+                {t('page.login.passwordHint')}
               </p>
             </div>
             {error ? <ErrorBox error={error} /> : null}
             <button type="submit" className="btn-primary w-full" disabled={loading}>
-              {loading ? 'Signing in…' : 'Sign in'}
+              {loading ? t('action.signingIn') : t('action.signIn')}
             </button>
           </form>
         </div>
         <p className="mt-4 text-center text-xs text-slate-400">
           {info ? (
             <>
-              Connected to <span className="font-mono">{info.name}</span>{' '}
+              {t('page.login.connectedTo')} <span className="font-mono">{info.name}</span>{' '}
               <span className="font-mono">{info.implementationVersion}</span>
             </>
           ) : (
-            'Connecting…'
+            t('page.login.connecting')
           )}
         </p>
       </div>
@@ -363,8 +363,8 @@ export function MetadataAdminPage() {
  
   const entityCols: Column<MetadataEntity>[] = [
     { header: t('label.name'), key: 'name' },
-    { header: 'PBC', key: 'pbc' },
-    { header: 'Table', key: 'table' },
+    { header: t('label.pbc'), key: 'pbc' },
+    { header: t('label.table'), key: 'table' },
     { header: t('label.description'), key: 'description', render: (r) => r.description ?? '—' },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
   ]
@@ -373,8 +373,8 @@ export function MetadataAdminPage() {
     { header: t('label.fieldKey'), key: 'key', render: (r) => <span className="font-mono">{r.key}</span> },
     { header: t('label.targetEntity'), key: 'targetEntity' },
     { header: t('label.fieldType'), key: 'type', render: (r) => r.type.kind },
-    { header: 'Required', key: 'required', render: (r) => (r.required ? 'Yes' : 'No') },
-    { header: 'PII', key: 'pii', render: (r) => (r.pii ? 'Yes' : 'No') },
+    { header: t('label.required'), key: 'required', render: (r) => (r.required ? t('label.yes') : t('label.no')) },
+    { header: t('label.pii'), key: 'pii', render: (r) => (r.pii ? t('label.yes') : t('label.no')) },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
     {
       header: '',
@@ -386,7 +386,7 @@ export function MetadataAdminPage() {
               className="text-xs text-blue-600 hover:underline"
               onClick={() => openCfEdit(r)}
             >
-              Edit
+              {t('action.edit')}
             </button>
             <button
               className="text-xs text-rose-600 hover:underline"
@@ -400,17 +400,17 @@ export function MetadataAdminPage() {
   ]
  
   const permissionCols: Column<MetadataPermission>[] = [
-    { header: 'Key', key: 'key', render: (r) => <span className="font-mono">{r.key}</span> },
+    { header: t('label.key'), key: 'key', render: (r) => <span className="font-mono">{r.key}</span> },
     { header: t('label.description'), key: 'description' },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
   ]
  
   const menuCols: Column<MenuRow>[] = [
-    { header: 'Path', key: 'path', render: (r) => <span className="font-mono">{r.path}</span> },
-    { header: 'Label', key: 'label' },
-    { header: 'Icon', key: 'icon', render: (r) => r.icon ?? '—' },
-    { header: 'Section', key: 'section', render: (r) => r.section ?? '—' },
-    { header: 'Order', key: 'order', render: (r) => r.order ?? '—' },
+    { header: t('label.path'), key: 'path', render: (r) => <span className="font-mono">{r.path}</span> },
+    { header: t('label.label'), key: 'label' },
+    { header: t('label.icon'), key: 'icon', render: (r) => r.icon ?? '—' },
+    { header: t('label.sectionMeta'), key: 'section', render: (r) => r.section ?? '—' },
+    { header: t('label.orderMeta'), key: 'order', render: (r) => r.order ?? '—' },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
   ]
  
@@ -428,9 +428,9 @@ export function MetadataAdminPage() {
       ),
     },
     { header: t('label.entity'), key: 'entityName' },
-    { header: 'Title', key: 'title' },
+    { header: t('label.title'), key: 'title' },
     { header: t('label.purpose'), key: 'purpose' },
-    { header: 'Version', key: 'version' },
+    { header: t('label.version'), key: 'version' },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
     {
       header: '',
@@ -463,9 +463,9 @@ export function MetadataAdminPage() {
       ),
     },
     { header: t('label.entity'), key: 'entityName' },
-    { header: 'Title', key: 'title' },
+    { header: t('label.title'), key: 'title' },
     { header: t('label.pageSize'), key: 'pageSize' },
-    { header: 'Version', key: 'version' },
+    { header: t('label.version'), key: 'version' },
     { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
     {
       header: '',
@@ -521,7 +521,7 @@ export function MetadataAdminPage() {
               className="text-xs text-blue-600 hover:underline"
               onClick={() => openRuleEdit(r)}
             >
-              Edit
+              {t('action.edit')}
             </button>
             <button
               className="text-xs text-rose-600 hover:underline"
@@ -624,7 +624,7 @@ export function MetadataAdminPage() {
                   {cfTypeKind === 'enum' && (
                     <div>
                       <label className="block text-xs font-medium text-slate-700">
-                        Allowed values (comma-separated)
+                        {t('label.allowedValues')}
                       </label>
                       <input
                         type="text"
@@ -638,7 +638,7 @@ export function MetadataAdminPage() {
                   {cfTypeKind === 'string' && (
                     <div>
                       <label className="block text-xs font-medium text-slate-700">
-                        Max length
+                        {t('label.maxLength')}
                       </label>
                       <input
                         type="number"
@@ -656,7 +656,7 @@ export function MetadataAdminPage() {
                         checked={cfRequired}
                         onChange={(e) => setCfRequired(e.target.checked)}
                       />
-                      Required
+                      {t('label.required')}
                     </label>
                     <label className="flex items-center gap-1.5 text-sm text-slate-700">
                       <input
@@ -664,14 +664,14 @@ export function MetadataAdminPage() {
                         checked={cfPii}
                         onChange={(e) => setCfPii(e.target.checked)}
                       />
-                      PII
+                      {t('label.pii')}
                     </label>
                   </div>
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <label className="block text-xs font-medium text-slate-700">
-                      Label EN
+                      {t('label.labelEn')}
                     </label>
                     <input
                       type="text"
@@ -683,7 +683,7 @@ export function MetadataAdminPage() {
                   </div>
                   <div>
                     <label className="block text-xs font-medium text-slate-700">
-                      Label zh-CN
+                      {t('label.labelZhCn')}
                     </label>
                     <input
                       type="text"
@@ -745,7 +745,7 @@ export function MetadataAdminPage() {
                 className="btn-primary"
                 onClick={() => navigate('/admin/metadata/forms/new')}
               >
-                + New Form
+                {t('action.newForm')}
               </button>
             </div>
             <DataTable
@@ -764,7 +764,7 @@ export function MetadataAdminPage() {
                 className="btn-primary"
                 onClick={() => navigate('/admin/metadata/list-views/new')}
               >
-                + New List View
+                {t('action.newListView')}
               </button>
             </div>
             <DataTable
@@ -915,7 +915,7 @@ export function MetadataAdminPage() {
                       ])
                     }
                   >
-                    + Add Condition
+                    {t('action.addCondition')}
                   </button>
                 </div>
  
@@ -982,7 +982,7 @@ export function MetadataAdminPage() {
                       ])
                     }
                   >
-                    + Add Action
+                    {t('action.addAction')}
                   </button>
                 </div>
  
@@ -1030,7 +1030,7 @@ export function MetadataAdminPage() {
     <div>
       <PageHeader
         title={t('page.metadataAdmin.title')}
-        subtitle="Browse and manage metadata definitions"
+        subtitle={t('page.metadataAdmin.subtitle')}
       />
  
       {/* Tab bar */}
@@ -5,6 +5,7 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 interface Row extends Record<string, unknown> {
   id: string
@@ -17,6 +18,7 @@ interface Row extends Record&lt;string, unknown&gt; {
 }
  
 export function MovementsPage() {
+  const t = useT()
   const [rows, setRows] = useState<Row[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -46,15 +48,15 @@ export function MovementsPage() {
  
   const columns: Column<Row>[] = [
     {
-      header: 'Occurred',
+      header: t('label.occurred'),
       key: 'occurredAt',
       render: (r) =>
-        r.occurredAt ? new Date(r.occurredAt).toLocaleString() : '—',
+        r.occurredAt ? new Date(r.occurredAt).toLocaleString() : '\u2014',
     },
-    { header: 'Item', key: 'itemCode', render: (r) => <span className="font-mono">{r.itemCode}</span> },
-    { header: 'Location', key: 'locationCode', render: (r) => <span className="font-mono">{r.locationCode}</span> },
+    { header: t('label.item'), key: 'itemCode', render: (r) => <span className="font-mono">{r.itemCode}</span> },
+    { header: t('label.location'), key: 'locationCode', render: (r) => <span className="font-mono">{r.locationCode}</span> },
     {
-      header: 'Δ',
+      header: t('label.delta'),
       key: 'delta',
       render: (r) => {
         const n = Number(r.delta)
@@ -62,15 +64,15 @@ export function MovementsPage() {
         return <span className={`font-mono tabular-nums ${cls}`}>{String(r.delta)}</span>
       },
     },
-    { header: 'Reason', key: 'reason' },
-    { header: 'Reference', key: 'reference', render: (r) => r.reference ?? '—' },
+    { header: t('label.reason'), key: 'reason' },
+    { header: t('label.reference'), key: 'reference', render: (r) => r.reference ?? '\u2014' },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Stock Movements"
-        subtitle="Append-only ledger of every change to inventory. Most-recent first."
+        title={t('page.movements.title')}
+        subtitle={t('page.movements.subtitle')}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -6,8 +6,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function PartnersPage() {
+  const t = useT()
   const [rows, setRows] = useState<Partner[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -22,29 +24,29 @@ export function PartnersPage() {
  
   const columns: Column<Partner>[] = [
     {
-      header: 'Code',
+      header: t('label.code'),
       key: 'code',
       render: (r) => (
         <Link to={`/partners/${r.id}/edit`} className="font-mono text-brand-600 hover:underline">{r.code}</Link>
       ),
     },
-    { header: 'Name', key: 'name' },
-    { header: 'Type', key: 'type' },
-    { header: 'Email', key: 'email', render: (r) => r.email ?? '—' },
-    { header: 'Phone', key: 'phone', render: (r) => r.phone ?? '—' },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.type'), key: 'type' },
+    { header: t('label.email'), key: 'email', render: (r) => r.email ?? '\u2014' },
+    { header: t('label.phone'), key: 'phone', render: (r) => r.phone ?? '\u2014' },
     {
-      header: 'Active',
+      header: t('label.active'),
       key: 'active',
-      render: (r) => (r.active ? <span className="text-emerald-600">●</span> : <span className="text-slate-300">●</span>),
+      render: (r) => (r.active ? <span className="text-emerald-600">{'\u25CF'}</span> : <span className="text-slate-300">{'\u25CF'}</span>),
     },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Partners"
-        subtitle="Customers, suppliers, and dual-role partners."
-        actions={<Link to="/partners/new" className="btn-primary">+ New Partner</Link>}
+        title={t('page.partners.title')}
+        subtitle={t('page.partners.subtitle')}
+        actions={<Link to="/partners/new" className="btn-primary">{t('action.newPartner')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
-// Purchase-order detail screen — symmetric to SalesOrderDetailPage.
+// Purchase-order detail screen -- symmetric to SalesOrderDetailPage.
 // Confirm a DRAFT, receive a CONFIRMED into a warehouse, or cancel
 // either. Each action surfaces the corresponding stock movement
-// (PURCHASE_RECEIPT) and pbc-finance journal entry (AP, POSTED →
+// (PURCHASE_RECEIPT) and pbc-finance journal entry (AP, POSTED ->
 // SETTLED on receive) inline.
  
 import { useCallback, useEffect, useState } from 'react'
@@ -12,10 +12,12 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function PurchaseOrderDetailPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [order, setOrder] = useState<PurchaseOrder | null>(null)
   const [locations, setLocations] = useState<Location[]>([])
   const [receivingLocation, setReceivingLocation] = useState<string>('')
@@ -68,7 +70,7 @@ export function PurchaseOrderDetailPage() {
       const updated = await purchaseOrders.confirm(order.id)
       setOrder(updated)
       await reloadSideEffects(updated.code)
-      setActionMessage('Confirmed. pbc-finance has posted an AP journal entry.')
+      setActionMessage(t('page.purchaseOrderDetail.confirmMsg'))
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
     } finally {
@@ -78,7 +80,7 @@ export function PurchaseOrderDetailPage() {
  
   const onReceive = async () => {
     if (!receivingLocation) {
-      setError(new Error('Pick a receiving location first.'))
+      setError(new Error(t('page.purchaseOrderDetail.pickLocation')))
       return
     }
     setActing(true)
@@ -89,7 +91,7 @@ export function PurchaseOrderDetailPage() {
       setOrder(updated)
       await reloadSideEffects(updated.code)
       setActionMessage(
-        `Received into ${receivingLocation}. Stock credited, journal entry settled.`,
+        t('page.purchaseOrderDetail.receiveMsg').replace('{location}', receivingLocation),
       )
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
@@ -106,7 +108,7 @@ export function PurchaseOrderDetailPage() {
       const updated = await purchaseOrders.cancel(order.id)
       setOrder(updated)
       await reloadSideEffects(updated.code)
-      setActionMessage('Cancelled. pbc-finance has reversed any open journal entry.')
+      setActionMessage(t('page.purchaseOrderDetail.cancelMsg'))
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
     } finally {
@@ -121,11 +123,11 @@ export function PurchaseOrderDetailPage() {
   return (
     <div>
       <PageHeader
-        title={`Purchase Order ${order.code}`}
-        subtitle={`Supplier ${order.partnerCode} · ${order.orderDate} · ${order.currencyCode}`}
+        title={t('page.purchaseOrderDetail.title').replace('{code}', order.code)}
+        subtitle={`${t('page.purchaseOrderDetail.subtitle').replace('{partner}', order.partnerCode)} \u00B7 ${order.orderDate} \u00B7 ${order.currencyCode}`}
         actions={
           <button className="btn-secondary" onClick={() => navigate('/purchase-orders')}>
-            ← Back
+            {t('action.back')}
           </button>
         }
       />
@@ -133,11 +135,11 @@ export function PurchaseOrderDetailPage() {
       <div className="card mb-6 p-5">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="flex items-center gap-3">
-            <span className="text-sm text-slate-500">Status:</span>
+            <span className="text-sm text-slate-500">{t('label.status')}:</span>
             <StatusBadge status={order.status} />
           </div>
           <div className="text-right">
-            <div className="text-xs uppercase text-slate-400">Total</div>
+            <div className="text-xs uppercase text-slate-400">{t('label.total')}</div>
             <div className="font-mono text-xl font-semibold">
               {Number(order.totalAmount).toLocaleString(undefined, {
                 minimumFractionDigits: 2,
@@ -154,10 +156,10 @@ export function PurchaseOrderDetailPage() {
       </div>
  
       <div className="card mb-6 p-5">
-        <h2 className="mb-3 text-base font-semibold text-slate-800">Actions</h2>
+        <h2 className="mb-3 text-base font-semibold text-slate-800">{t('label.actions')}</h2>
         <div className="flex flex-wrap items-center gap-3">
           <button className="btn-primary" disabled={!canConfirm || acting} onClick={onConfirm}>
-            Confirm
+            {t('action.confirm')}
           </button>
           <div className="flex items-center gap-2">
             <select
@@ -173,27 +175,27 @@ export function PurchaseOrderDetailPage() {
               ))}
             </select>
             <button className="btn-primary" disabled={!canReceive || acting} onClick={onReceive}>
-              Receive
+              {t('action.receive')}
             </button>
           </div>
           <button className="btn-danger" disabled={!canCancel || acting} onClick={onCancel}>
-            Cancel
+            {t('action.cancel')}
           </button>
         </div>
       </div>
  
       <div className="card mb-6">
         <div className="border-b border-slate-200 px-5 py-3">
-          <h2 className="text-base font-semibold text-slate-800">Lines</h2>
+          <h2 className="text-base font-semibold text-slate-800">{t('label.lines')}</h2>
         </div>
         <table className="table-base">
           <thead className="bg-slate-50">
             <tr>
-              <th>#</th>
-              <th>Item</th>
-              <th>Qty</th>
-              <th>Unit price</th>
-              <th>Line total</th>
+              <th>{t('label.lineNo')}</th>
+              <th>{t('label.item')}</th>
+              <th>{t('label.qty')}</th>
+              <th>{t('label.unitPrice')}</th>
+              <th>{t('label.lineTotal')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100">
@@ -222,18 +224,18 @@ export function PurchaseOrderDetailPage() {
       <div className="grid gap-6 md:grid-cols-2">
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">Inventory movements</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.inventoryMovements')}</h2>
           </div>
           {movements.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No movements yet.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noMovementsYet')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>Item</th>
-                  <th>Δ</th>
-                  <th>Reason</th>
-                  <th>Reference</th>
+                  <th>{t('label.item')}</th>
+                  <th>{t('label.delta')}</th>
+                  <th>{t('label.reason')}</th>
+                  <th>{t('label.reference')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -242,7 +244,7 @@ export function PurchaseOrderDetailPage() {
                     <td className="font-mono">{m.itemCode}</td>
                     <td className="font-mono tabular-nums text-emerald-600">{String(m.delta)}</td>
                     <td>{m.reason}</td>
-                    <td className="font-mono text-xs text-slate-500">{m.reference ?? '—'}</td>
+                    <td className="font-mono text-xs text-slate-500">{m.reference ?? '\u2014'}</td>
                   </tr>
                 ))}
               </tbody>
@@ -251,18 +253,18 @@ export function PurchaseOrderDetailPage() {
         </div>
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">Journal entries</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.journalEntries')}</h2>
           </div>
           {journalEntries.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No entries yet.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noEntriesYet')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Status</th>
-                  <th>Amount</th>
+                  <th>{t('label.code')}</th>
+                  <th>{t('label.type')}</th>
+                  <th>{t('label.status')}</th>
+                  <th>{t('label.amount')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -7,8 +7,10 @@ import { Loading } from &#39;@/components/Loading&#39;
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function PurchaseOrdersPage() {
+  const t = useT()
   const [rows, setRows] = useState<PurchaseOrder[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -23,7 +25,7 @@ export function PurchaseOrdersPage() {
  
   const columns: Column<PurchaseOrder>[] = [
     {
-      header: 'Code',
+      header: t('label.code'),
       key: 'code',
       render: (r) => (
         <Link to={`/purchase-orders/${r.id}`} className="font-mono text-brand-600 hover:underline">
@@ -31,12 +33,12 @@ export function PurchaseOrdersPage() {
         </Link>
       ),
     },
-    { header: 'Supplier', key: 'partnerCode', render: (r) => <span className="font-mono">{r.partnerCode}</span> },
-    { header: 'Order date', key: 'orderDate' },
-    { header: 'Expected', key: 'expectedDate', render: (r) => r.expectedDate ?? '—' },
-    { header: 'Status', key: 'status', render: (r) => <StatusBadge status={r.status} /> },
+    { header: t('label.supplier'), key: 'partnerCode', render: (r) => <span className="font-mono">{r.partnerCode}</span> },
+    { header: t('label.orderDate'), key: 'orderDate' },
+    { header: t('label.expected'), key: 'expectedDate', render: (r) => r.expectedDate ?? '\u2014' },
+    { header: t('label.status'), key: 'status', render: (r) => <StatusBadge status={r.status} /> },
     {
-      header: 'Total',
+      header: t('label.total'),
       key: 'totalAmount',
       render: (r) => (
         <span className="font-mono tabular-nums">
@@ -52,9 +54,9 @@ export function PurchaseOrdersPage() {
   return (
     <div>
       <PageHeader
-        title="Purchase Orders"
-        subtitle="Supplier-facing orders. Confirm and receive to credit inventory."
-        actions={<Link to="/purchase-orders/new" className="btn-primary">+ New Order</Link>}
+        title={t('page.purchaseOrders.title')}
+        subtitle={t('page.purchaseOrders.subtitle')}
+        actions={<Link to="/purchase-orders/new" className="btn-primary">{t('action.newOrder')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -5,8 +5,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function RolesPage() {
+  const t = useT()
   const [rows, setRows] = useState<Role[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -43,36 +45,36 @@ export function RolesPage() {
   }
  
   const columns: Column<Role>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
-    { header: 'Name', key: 'name' },
-    { header: 'Description', key: 'description', render: (r) => r.description ?? '—' },
+    { header: t('label.code'), key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.description'), key: 'description', render: (r) => r.description ?? '\u2014' },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Roles"
-        subtitle="Named bundles of permissions. The 'admin' role has all permissions by default."
+        title={t('page.roles.title')}
+        subtitle={t('page.roles.subtitle')}
         actions={
           <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
-            {showCreate ? 'Cancel' : '+ New Role'}
+            {showCreate ? t('action.cancel') : t('action.newRole')}
           </button>
         }
       />
       {showCreate && (
         <form onSubmit={onCreate} className="card p-4 mb-4 max-w-lg flex items-end gap-3">
           <div className="flex-1">
-            <label className="block text-xs font-medium text-slate-700">Code</label>
+            <label className="block text-xs font-medium text-slate-700">{t('label.code')}</label>
             <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
               placeholder="sales-clerk" className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
           </div>
           <div className="flex-1">
-            <label className="block text-xs font-medium text-slate-700">Name</label>
+            <label className="block text-xs font-medium text-slate-700">{t('label.name')}</label>
             <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
               placeholder="Sales Clerk" className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
           </div>
           <button type="submit" className="btn-primary" disabled={creating}>
-            {creating ? '...' : 'Create'}
+            {creating ? '...' : t('action.create')}
           </button>
         </form>
       )}
@@ -3,11 +3,11 @@
 // **The headline demo flow.** Confirm a DRAFT, ship a CONFIRMED,
 // or cancel either. Each action updates the order in place,
 // reloads the journal entry list to show the AR row appearing
-// (POSTED → SETTLED), and reloads stock movements to show the
+// (POSTED -> SETTLED), and reloads stock movements to show the
 // SALES_SHIPMENT ledger entry appearing.
 //
 // **Why ship asks for a location.** The framework requires every
-// shipment to name the warehouse the goods came from — the
+// shipment to name the warehouse the goods came from -- the
 // inventory ledger tags the row with that location and the audit
 // trail must always answer "which warehouse shipped this". The UI
 // proposes the first WAREHOUSE-typed location it finds; an
@@ -21,10 +21,12 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function SalesOrderDetailPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [order, setOrder] = useState<SalesOrder | null>(null)
   const [locations, setLocations] = useState<Location[]>([])
   const [shippingLocation, setShippingLocation] = useState<string>('')
@@ -77,7 +79,7 @@ export function SalesOrderDetailPage() {
       const updated = await salesOrders.confirm(order.id)
       setOrder(updated)
       await reloadSideEffects(updated.code)
-      setActionMessage('Confirmed. pbc-finance has posted an AR journal entry.')
+      setActionMessage(t('page.salesOrderDetail.confirmMsg'))
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
     } finally {
@@ -87,7 +89,7 @@ export function SalesOrderDetailPage() {
  
   const onShip = async () => {
     if (!shippingLocation) {
-      setError(new Error('Pick a shipping location first.'))
+      setError(new Error(t('page.salesOrderDetail.pickLocation')))
       return
     }
     setActing(true)
@@ -98,7 +100,7 @@ export function SalesOrderDetailPage() {
       setOrder(updated)
       await reloadSideEffects(updated.code)
       setActionMessage(
-        `Shipped from ${shippingLocation}. Stock debited, journal entry settled.`,
+        t('page.salesOrderDetail.shipMsg').replace('{location}', shippingLocation),
       )
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
@@ -115,7 +117,7 @@ export function SalesOrderDetailPage() {
       const updated = await salesOrders.cancel(order.id)
       setOrder(updated)
       await reloadSideEffects(updated.code)
-      setActionMessage('Cancelled. pbc-finance has reversed any open journal entry.')
+      setActionMessage(t('page.salesOrderDetail.cancelMsg'))
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
     } finally {
@@ -130,11 +132,11 @@ export function SalesOrderDetailPage() {
   return (
     <div>
       <PageHeader
-        title={`Sales Order ${order.code}`}
-        subtitle={`Customer ${order.partnerCode} · ${order.orderDate} · ${order.currencyCode}`}
+        title={t('page.salesOrderDetail.title').replace('{code}', order.code)}
+        subtitle={`${t('page.salesOrderDetail.subtitle').replace('{partner}', order.partnerCode)} \u00B7 ${order.orderDate} \u00B7 ${order.currencyCode}`}
         actions={
           <button className="btn-secondary" onClick={() => navigate('/sales-orders')}>
-            ← Back
+            {t('action.back')}
           </button>
         }
       />
@@ -142,11 +144,11 @@ export function SalesOrderDetailPage() {
       <div className="card mb-6 p-5">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="flex items-center gap-3">
-            <span className="text-sm text-slate-500">Status:</span>
+            <span className="text-sm text-slate-500">{t('label.status')}:</span>
             <StatusBadge status={order.status} />
           </div>
           <div className="text-right">
-            <div className="text-xs uppercase text-slate-400">Total</div>
+            <div className="text-xs uppercase text-slate-400">{t('label.total')}</div>
             <div className="font-mono text-xl font-semibold">
               {Number(order.totalAmount).toLocaleString(undefined, {
                 minimumFractionDigits: 2,
@@ -164,10 +166,10 @@ export function SalesOrderDetailPage() {
       </div>
  
       <div className="card mb-6 p-5">
-        <h2 className="mb-3 text-base font-semibold text-slate-800">Actions</h2>
+        <h2 className="mb-3 text-base font-semibold text-slate-800">{t('label.actions')}</h2>
         <div className="flex flex-wrap items-center gap-3">
           <button className="btn-primary" disabled={!canConfirm || acting} onClick={onConfirm}>
-            Confirm
+            {t('action.confirm')}
           </button>
           <div className="flex items-center gap-2">
             <select
@@ -183,27 +185,27 @@ export function SalesOrderDetailPage() {
               ))}
             </select>
             <button className="btn-primary" disabled={!canShip || acting} onClick={onShip}>
-              Ship
+              {t('action.ship')}
             </button>
           </div>
           <button className="btn-danger" disabled={!canCancel || acting} onClick={onCancel}>
-            Cancel
+            {t('action.cancel')}
           </button>
         </div>
       </div>
  
       <div className="card mb-6">
         <div className="border-b border-slate-200 px-5 py-3">
-          <h2 className="text-base font-semibold text-slate-800">Lines</h2>
+          <h2 className="text-base font-semibold text-slate-800">{t('label.lines')}</h2>
         </div>
         <table className="table-base">
           <thead className="bg-slate-50">
             <tr>
-              <th>#</th>
-              <th>Item</th>
-              <th>Qty</th>
-              <th>Unit price</th>
-              <th>Line total</th>
+              <th>{t('label.lineNo')}</th>
+              <th>{t('label.item')}</th>
+              <th>{t('label.qty')}</th>
+              <th>{t('label.unitPrice')}</th>
+              <th>{t('label.lineTotal')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100">
@@ -232,18 +234,18 @@ export function SalesOrderDetailPage() {
       <div className="grid gap-6 md:grid-cols-2">
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">Inventory movements</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.inventoryMovements')}</h2>
           </div>
           {movements.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No movements yet.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noMovementsYet')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>Item</th>
-                  <th>Δ</th>
-                  <th>Reason</th>
-                  <th>Reference</th>
+                  <th>{t('label.item')}</th>
+                  <th>{t('label.delta')}</th>
+                  <th>{t('label.reason')}</th>
+                  <th>{t('label.reference')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -252,7 +254,7 @@ export function SalesOrderDetailPage() {
                     <td className="font-mono">{m.itemCode}</td>
                     <td className="font-mono tabular-nums text-rose-600">{String(m.delta)}</td>
                     <td>{m.reason}</td>
-                    <td className="font-mono text-xs text-slate-500">{m.reference ?? '—'}</td>
+                    <td className="font-mono text-xs text-slate-500">{m.reference ?? '\u2014'}</td>
                   </tr>
                 ))}
               </tbody>
@@ -261,18 +263,18 @@ export function SalesOrderDetailPage() {
         </div>
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">Journal entries</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.journalEntries')}</h2>
           </div>
           {journalEntries.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No entries yet.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noEntriesYet')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Status</th>
-                  <th>Amount</th>
+                  <th>{t('label.code')}</th>
+                  <th>{t('label.type')}</th>
+                  <th>{t('label.status')}</th>
+                  <th>{t('label.amount')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -293,7 +295,7 @@ export function SalesOrderDetailPage() {
             </table>
           )}
           <div className="border-t border-slate-200 px-5 py-3 text-xs text-slate-400">
-            <Link to="/journal-entries" className="hover:underline">View all journal entries →</Link>
+            <Link to="/journal-entries" className="hover:underline">{t('label.viewAllJournalEntries')} &rarr;</Link>
           </div>
         </div>
       </div>
@@ -7,8 +7,10 @@ import { Loading } from &#39;@/components/Loading&#39;
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function SalesOrdersPage() {
+  const t = useT()
   const [rows, setRows] = useState<SalesOrder[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -23,7 +25,7 @@ export function SalesOrdersPage() {
  
   const columns: Column<SalesOrder>[] = [
     {
-      header: 'Code',
+      header: t('label.code'),
       key: 'code',
       render: (r) => (
         <Link to={`/sales-orders/${r.id}`} className="font-mono text-brand-600 hover:underline">
@@ -31,11 +33,11 @@ export function SalesOrdersPage() {
         </Link>
       ),
     },
-    { header: 'Customer', key: 'partnerCode', render: (r) => <span className="font-mono">{r.partnerCode}</span> },
-    { header: 'Date', key: 'orderDate' },
-    { header: 'Status', key: 'status', render: (r) => <StatusBadge status={r.status} /> },
+    { header: t('label.customer'), key: 'partnerCode', render: (r) => <span className="font-mono">{r.partnerCode}</span> },
+    { header: t('label.date'), key: 'orderDate' },
+    { header: t('label.status'), key: 'status', render: (r) => <StatusBadge status={r.status} /> },
     {
-      header: 'Total',
+      header: t('label.total'),
       key: 'totalAmount',
       render: (r) => (
         <span className="font-mono tabular-nums">
@@ -48,7 +50,7 @@ export function SalesOrdersPage() {
       ),
     },
     {
-      header: 'Lines',
+      header: t('label.lines'),
       key: 'lines',
       render: (r) => <span className="text-slate-500">{r.lines.length}</span>,
     },
@@ -57,10 +59,10 @@ export function SalesOrdersPage() {
   return (
     <div>
       <PageHeader
-        title="Sales Orders"
-        subtitle="Customer-facing orders. Confirm to auto-generate production work orders."
+        title={t('page.salesOrders.title')}
+        subtitle={t('page.salesOrders.subtitle')}
         actions={
-          <Link to="/sales-orders/new" className="btn-primary">+ New Order</Link>
+          <Link to="/sales-orders/new" className="btn-primary">{t('action.newOrder')}</Link>
         }
       />
       {loading && <Loading />}
@@ -3,7 +3,7 @@
 // Polls /api/v1/production/work-orders/shop-floor every 5s and
 // renders one card per IN_PROGRESS work order with its current
 // operation, planned vs actual minutes, and operations completed.
-// Designed to be projected on a wall-mounted screen — the cards
+// Designed to be projected on a wall-mounted screen -- the cards
 // are large, the typography is high-contrast, and the only state
 // is "what's running right now".
  
@@ -15,10 +15,12 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 const POLL_MS = 5000
  
 export function ShopFloorPage() {
+  const t = useT()
   const [rows, setRows] = useState<ShopFloorEntry[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -52,16 +54,16 @@ export function ShopFloorPage() {
   return (
     <div>
       <PageHeader
-        title="Shop Floor"
-        subtitle={`Live view of every work order in progress · refreshes every ${POLL_MS / 1000}s${
-          updatedAt ? ' · last update ' + updatedAt.toLocaleTimeString() : ''
+        title={t('page.shopFloor.title')}
+        subtitle={`${t('page.shopFloor.subtitle')} \u00B7 ${t('page.shopFloor.refreshInterval').replace('{seconds}', String(POLL_MS / 1000))}${
+          updatedAt ? ' \u00B7 ' + t('page.shopFloor.lastUpdate') + ' ' + updatedAt.toLocaleTimeString() : ''
         }`}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && rows.length === 0 && (
         <div className="card p-8 text-center text-sm text-slate-400">
-          No work orders are in progress right now.
+          {t('page.shopFloor.noWorkOrders')}
         </div>
       )}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -80,15 +82,15 @@ export function ShopFloorPage() {
                   {r.workOrderCode}
                 </span>
                 <span className="text-xs text-slate-500">
-                  {r.operationsCompleted} / {r.operationsTotal} ops
+                  {r.operationsCompleted} / {r.operationsTotal} {t('page.shopFloor.ops')}
                 </span>
               </div>
               <div className="mb-3 text-xs text-slate-500">
-                Output: <span className="font-mono">{r.outputItemCode}</span> ×{' '}
+                {t('label.output')}: <span className="font-mono">{r.outputItemCode}</span> {'\u00D7'}{' '}
                 {String(r.outputQuantity)}
               </div>
               <div className="mb-3">
-                <div className="text-xs text-slate-400">Current operation</div>
+                <div className="text-xs text-slate-400">{t('page.shopFloor.currentOp')}</div>
                 {r.currentOperationCode ? (
                   <div className="mt-1 flex items-center gap-2">
                     <span className="font-mono font-medium">{r.currentOperationCode}</span>
@@ -96,13 +98,13 @@ export function ShopFloorPage() {
                     {r.currentOperationStatus && <StatusBadge status={r.currentOperationStatus} />}
                   </div>
                 ) : (
-                  <div className="mt-1 text-sm text-slate-400">No routing</div>
+                  <div className="mt-1 text-sm text-slate-400">{t('page.shopFloor.noRouting')}</div>
                 )}
               </div>
               <div className="mt-2">
                 <div className="mb-1 flex items-center justify-between text-xs text-slate-500">
-                  <span>{act.toFixed(0)} actual min</span>
-                  <span>{std.toFixed(0)} std min</span>
+                  <span>{act.toFixed(0)} {t('page.shopFloor.actualMin')}</span>
+                  <span>{std.toFixed(0)} {t('page.shopFloor.stdMin')}</span>
                 </div>
                 <div className="h-2 overflow-hidden rounded-full bg-slate-100">
                   <div
@@ -77,15 +77,15 @@ export function TaskDetailPage() {
  
       <div className="card p-4 space-y-4">
         <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm max-w-lg">
-          <dt className="font-medium text-slate-500">Task ID</dt>
+          <dt className="font-medium text-slate-500">{t('label.taskId')}</dt>
           <dd className="font-mono">{task.taskId}</dd>
-          <dt className="font-medium text-slate-500">Process</dt>
+          <dt className="font-medium text-slate-500">{t('label.process')}</dt>
           <dd>{task.processDefinitionKey}</dd>
-          <dt className="font-medium text-slate-500">Created</dt>
+          <dt className="font-medium text-slate-500">{t('label.created')}</dt>
           <dd>{task.createTime}</dd>
-          <dt className="font-medium text-slate-500">Assignee</dt>
+          <dt className="font-medium text-slate-500">{t('label.assignee')}</dt>
           <dd>{task.assignee ?? '\u2014'}</dd>
-          <dt className="font-medium text-slate-500">Form Key</dt>
+          <dt className="font-medium text-slate-500">{t('label.formKey')}</dt>
           <dd className="font-mono">{task.formKey ?? '\u2014'}</dd>
         </dl>
  
@@ -100,7 +100,7 @@ export function TaskDetailPage() {
         ) : (
           <div className="space-y-4">
             <div>
-              <h3 className="text-sm font-medium text-slate-700 mb-2">Variables</h3>
+              <h3 className="text-sm font-medium text-slate-700 mb-2">{t('label.variables')}</h3>
               <pre className="rounded-md bg-slate-50 border border-slate-200 p-3 text-xs overflow-x-auto max-h-64">
                 {JSON.stringify(task.variables, null, 2)}
               </pre>
@@ -5,8 +5,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function UomsPage() {
+  const t = useT()
   const [rows, setRows] = useState<Uom[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -20,16 +22,16 @@ export function UomsPage() {
   }, [])
  
   const columns: Column<Uom>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
-    { header: 'Name', key: 'name' },
-    { header: 'Dimension', key: 'dimension' },
+    { header: t('label.code'), key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.dimension'), key: 'dimension' },
   ]
  
   return (
     <div>
       <PageHeader
-        title="Units of Measure"
-        subtitle="Seeded set of UoMs the catalog and inventory PBCs use to quantify items."
+        title={t('page.uoms.title')}
+        subtitle={t('page.uoms.subtitle')}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -11,10 +11,12 @@ import type { Role, User } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
+import { useT } from '@/i18n/LocaleContext'
  
 export function UserDetailPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [user, setUser] = useState<User | null>(null)
   const [allRoles, setAllRoles] = useState<Role[]>([])
   const [userRoleCodes, setUserRoleCodes] = useState<string[]>([])
@@ -64,10 +66,10 @@ export function UserDetailPage() {
     <div>
       <PageHeader
         title={user.displayName}
-        subtitle={`@${user.username} · ${user.enabled ? 'Active' : 'Disabled'}${user.email ? ' · ' + user.email : ''}`}
+        subtitle={`@${user.username} \u00B7 ${user.enabled ? t('label.activeStatus') : t('label.disabled')}${user.email ? ' \u00B7 ' + user.email : ''}`}
         actions={
           <button className="btn-secondary" onClick={() => navigate('/users')}>
-            ← Back
+            {t('action.back')}
           </button>
         }
       />
@@ -75,12 +77,12 @@ export function UserDetailPage() {
       {error && <ErrorBox error={error} />}
  
       <div className="card p-5 max-w-lg">
-        <h2 className="mb-3 text-base font-semibold text-slate-800">Roles</h2>
+        <h2 className="mb-3 text-base font-semibold text-slate-800">{t('page.userDetail.roles')}</h2>
         <p className="mb-4 text-xs text-slate-400">
-          Toggle roles on/off. Changes take effect on the user's next login.
+          {t('page.userDetail.rolesHint')}
         </p>
         {allRoles.length === 0 && (
-          <p className="text-sm text-slate-400">No roles defined yet. Create one on the Roles page.</p>
+          <p className="text-sm text-slate-400">{t('page.userDetail.noRoles')}</p>
         )}
         <div className="space-y-2">
           {allRoles.map((role) => {
@@ -99,7 +101,7 @@ export function UserDetailPage() {
                   disabled={acting}
                   onClick={() => toggle(role.code, has)}
                 >
-                  {has ? 'Revoke' : 'Assign'}
+                  {has ? t('action.revoke') : t('action.assign')}
                 </button>
               </div>
             )
@@ -31,7 +31,7 @@ export function UserTasksPage() {
  
   const columns: Column<UserTaskSummary>[] = [
     {
-      header: 'Task Name',
+      header: t('label.taskName'),
       key: 'taskName',
       render: (r) => (
         <button
@@ -42,10 +42,10 @@ export function UserTasksPage() {
         </button>
       ),
     },
-    { header: 'Process', key: 'processDefinitionKey' },
-    { header: 'Form Key', key: 'formKey', render: (r) => r.formKey ?? '\u2014' },
-    { header: 'Created', key: 'createTime' },
-    { header: 'Assignee', key: 'assignee', render: (r) => r.assignee ?? '\u2014' },
+    { header: t('label.process'), key: 'processDefinitionKey' },
+    { header: t('label.formKey'), key: 'formKey', render: (r) => r.formKey ?? '\u2014' },
+    { header: t('label.created'), key: 'createTime' },
+    { header: t('label.assignee'), key: 'assignee', render: (r) => r.assignee ?? '\u2014' },
   ]
  
   return (
@@ -61,7 +61,7 @@ export function UserTasksPage() {
           rows={rows}
           columns={columns}
           rowKey={(r) => r.taskId}
-          empty={<div className="p-6 text-sm text-slate-400">No pending tasks</div>}
+          empty={<div className="p-6 text-sm text-slate-400">{t('label.noPendingTasks')}</div>}
         />
       )}
     </div>
@@ -6,8 +6,10 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
  
 export function UsersPage() {
+  const t = useT()
   const [rows, setRows] = useState<User[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -22,7 +24,7 @@ export function UsersPage() {
  
   const columns: Column<User>[] = [
     {
-      header: 'Username',
+      header: t('label.username'),
       key: 'username',
       render: (r) => (
         <Link to={`/users/${r.id}`} className="font-mono text-brand-600 hover:underline">
@@ -30,16 +32,16 @@ export function UsersPage() {
         </Link>
       ),
     },
-    { header: 'Display name', key: 'displayName' },
-    { header: 'Email', key: 'email', render: (r) => r.email ?? '—' },
+    { header: t('label.displayName'), key: 'displayName' },
+    { header: t('label.email'), key: 'email', render: (r) => r.email ?? '\u2014' },
     {
-      header: 'Enabled',
+      header: t('label.enabled'),
       key: 'enabled',
       render: (r) =>
         r.enabled ? (
-          <span className="text-emerald-600">Active</span>
+          <span className="text-emerald-600">{t('label.activeStatus')}</span>
         ) : (
-          <span className="text-slate-400">Disabled</span>
+          <span className="text-slate-400">{t('label.disabled')}</span>
         ),
     },
   ]
@@ -47,9 +49,9 @@ export function UsersPage() {
   return (
     <div>
       <PageHeader
-        title="Users"
-        subtitle="User accounts in this instance. The admin role has all permissions."
-        actions={<Link to="/users/new" className="btn-primary">+ New User</Link>}
+        title={t('page.users.title')}
+        subtitle={t('page.users.subtitle')}
+        actions={<Link to="/users/new" className="btn-primary">{t('action.newUser')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
-// Work-order detail screen — read-only header + start/complete
+// Work-order detail screen -- read-only header + start/complete
 // action verbs that drive the v2 state machine. The shop-floor
 // dashboard at /shop-floor handles the per-operation walk for v3
 // routing-equipped orders. v1 SPA keeps this screen simple: start a
@@ -12,10 +12,12 @@ import { PageHeader } from &#39;@/components/PageHeader&#39;
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function WorkOrderDetailPage() {
   const { id = '' } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const t = useT()
   const [order, setOrder] = useState<WorkOrder | null>(null)
   const [locations, setLocations] = useState<Location[]>([])
   const [outputLocation, setOutputLocation] = useState<string>('')
@@ -60,7 +62,7 @@ export function WorkOrderDetailPage() {
     try {
       await production.startWorkOrder(order.id)
       await refresh()
-      setActionMessage('Started. Operations can now be walked from the Shop Floor screen.')
+      setActionMessage(t('page.workOrderDetail.startMsg'))
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
     } finally {
@@ -70,7 +72,7 @@ export function WorkOrderDetailPage() {
  
   const onComplete = async () => {
     if (!outputLocation) {
-      setError(new Error('Pick an output location first.'))
+      setError(new Error(t('page.workOrderDetail.pickLocation')))
       return
     }
     setActing(true)
@@ -80,7 +82,7 @@ export function WorkOrderDetailPage() {
       await production.completeWorkOrder(order.id, outputLocation)
       await refresh()
       setActionMessage(
-        `Completed. Materials issued, finished goods credited to ${outputLocation}.`,
+        t('page.workOrderDetail.completeMsg').replace('{location}', outputLocation),
       )
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)))
@@ -95,20 +97,20 @@ export function WorkOrderDetailPage() {
   return (
     <div>
       <PageHeader
-        title={`Work Order ${order.code}`}
-        subtitle={`Output: ${order.outputItemCode} × ${order.outputQuantity}${
-          order.sourceSalesOrderCode ? ' · from SO ' + order.sourceSalesOrderCode : ''
+        title={t('page.workOrderDetail.title').replace('{code}', order.code)}
+        subtitle={`${t('label.output')}: ${order.outputItemCode} \u00D7 ${order.outputQuantity}${
+          order.sourceSalesOrderCode ? ' \u00B7 from SO ' + order.sourceSalesOrderCode : ''
         }`}
         actions={
           <button className="btn-secondary" onClick={() => navigate('/work-orders')}>
-            ← Back
+            {t('action.back')}
           </button>
         }
       />
  
       <div className="card mb-6 p-5">
         <div className="flex items-center gap-3">
-          <span className="text-sm text-slate-500">Status:</span>
+          <span className="text-sm text-slate-500">{t('label.status')}:</span>
           <StatusBadge status={order.status} />
         </div>
         {actionMessage && (
@@ -119,10 +121,10 @@ export function WorkOrderDetailPage() {
       </div>
  
       <div className="card mb-6 p-5">
-        <h2 className="mb-3 text-base font-semibold text-slate-800">Actions</h2>
+        <h2 className="mb-3 text-base font-semibold text-slate-800">{t('label.actions')}</h2>
         <div className="flex flex-wrap items-center gap-3">
           <button className="btn-primary" disabled={!canStart || acting} onClick={onStart}>
-            Start
+            {t('action.start')}
           </button>
           <div className="flex items-center gap-2">
             <select
@@ -138,7 +140,7 @@ export function WorkOrderDetailPage() {
               ))}
             </select>
             <button className="btn-primary" disabled={!canComplete || acting} onClick={onComplete}>
-              Complete
+              {t('action.complete')}
             </button>
           </div>
         </div>
@@ -147,18 +149,18 @@ export function WorkOrderDetailPage() {
       <div className="grid gap-6 md:grid-cols-2">
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">BOM inputs</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.bomInputs')}</h2>
           </div>
           {order.inputs.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No BOM lines.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noBomLines')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>#</th>
-                  <th>Item</th>
-                  <th>Qty / unit</th>
-                  <th>Source loc</th>
+                  <th>{t('label.lineNo')}</th>
+                  <th>{t('label.item')}</th>
+                  <th>{t('label.qtyPerUnit')}</th>
+                  <th>{t('label.sourceLoc')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -176,19 +178,19 @@ export function WorkOrderDetailPage() {
         </div>
         <div className="card">
           <div className="border-b border-slate-200 px-5 py-3">
-            <h2 className="text-base font-semibold text-slate-800">Routing operations</h2>
+            <h2 className="text-base font-semibold text-slate-800">{t('label.routingOperations')}</h2>
           </div>
           {order.operations.length === 0 ? (
-            <div className="p-5 text-sm text-slate-400">No routing.</div>
+            <div className="p-5 text-sm text-slate-400">{t('label.noRouting')}</div>
           ) : (
             <table className="table-base">
               <thead className="bg-slate-50">
                 <tr>
-                  <th>#</th>
-                  <th>Operation</th>
-                  <th>Work center</th>
-                  <th>Std min</th>
-                  <th>Status</th>
+                  <th>{t('label.lineNo')}</th>
+                  <th>{t('label.operation')}</th>
+                  <th>{t('label.workCenter')}</th>
+                  <th>{t('label.stdMin')}</th>
+                  <th>{t('label.status')}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100">
@@ -7,8 +7,10 @@ import { Loading } from &#39;@/components/Loading&#39;
 import { ErrorBox } from '@/components/ErrorBox'
 import { DataTable, type Column } from '@/components/DataTable'
 import { StatusBadge } from '@/components/StatusBadge'
+import { useT } from '@/i18n/LocaleContext'
  
 export function WorkOrdersPage() {
+  const t = useT()
   const [rows, setRows] = useState<WorkOrder[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
@@ -23,7 +25,7 @@ export function WorkOrdersPage() {
  
   const columns: Column<WorkOrder>[] = [
     {
-      header: 'Code',
+      header: t('label.code'),
       key: 'code',
       render: (r) => (
         <Link to={`/work-orders/${r.id}`} className="font-mono text-brand-600 hover:underline">
@@ -31,20 +33,20 @@ export function WorkOrdersPage() {
         </Link>
       ),
     },
-    { header: 'Output', key: 'outputItemCode', render: (r) => <span className="font-mono">{r.outputItemCode}</span> },
+    { header: t('label.output'), key: 'outputItemCode', render: (r) => <span className="font-mono">{r.outputItemCode}</span> },
     {
-      header: 'Qty',
+      header: t('label.qty'),
       key: 'outputQuantity',
       render: (r) => <span className="font-mono tabular-nums">{String(r.outputQuantity)}</span>,
     },
-    { header: 'Status', key: 'status', render: (r) => <StatusBadge status={r.status} /> },
+    { header: t('label.status'), key: 'status', render: (r) => <StatusBadge status={r.status} /> },
     {
-      header: 'Source SO',
+      header: t('label.sourceSO'),
       key: 'sourceSalesOrderCode',
-      render: (r) => r.sourceSalesOrderCode ?? '—',
+      render: (r) => r.sourceSalesOrderCode ?? '\u2014',
     },
     {
-      header: 'Inputs / Ops',
+      header: t('label.inputsOps'),
       key: 'opsCount',
       render: (r) => `${r.inputs.length} / ${r.operations.length}`,
     },
@@ -53,9 +55,9 @@ export function WorkOrdersPage() {
   return (
     <div>
       <PageHeader
-        title="Work Orders"
-        subtitle="Production orders with BOM inputs and routing operations."
-        actions={<Link to="/work-orders/new" className="btn-primary">+ New Work Order</Link>}
+        title={t('page.workOrders.title')}
+        subtitle={t('page.workOrders.subtitle')}
+        actions={<Link to="/work-orders/new" className="btn-primary">{t('action.newWorkOrder')}</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}