From 1777189431ebf614b5ed0b878345b520dacc9bb6 Mon Sep 17 00:00:00 2001
From: zichun <zhuzichunhogan@gmail.com>
Date: Fri, 10 Apr 2026 10:56:48 +0800
Subject: [PATCH] feat(web): create-location + adjust-stock forms, close SPA CRUD gap

---
 web/src/App.tsx                      |  4 ++++
 web/src/api/client.ts                |  4 ++++
 web/src/pages/AdjustStockPage.tsx    | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/pages/BalancesPage.tsx       |  2 ++
 web/src/pages/CreateLocationPage.tsx | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/pages/LocationsPage.tsx      |  7 ++++++-
 6 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pages/AdjustStockPage.tsx
 create mode 100644 web/src/pages/CreateLocationPage.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4a33548..2d671ea 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -23,7 +23,9 @@ import { UomsPage } from '@/pages/UomsPage'
 import { PartnersPage } from '@/pages/PartnersPage'
 import { CreatePartnerPage } from '@/pages/CreatePartnerPage'
 import { LocationsPage } from '@/pages/LocationsPage'
+import { CreateLocationPage } from '@/pages/CreateLocationPage'
 import { BalancesPage } from '@/pages/BalancesPage'
+import { AdjustStockPage } from '@/pages/AdjustStockPage'
 import { MovementsPage } from '@/pages/MovementsPage'
 import { SalesOrdersPage } from '@/pages/SalesOrdersPage'
 import { CreateSalesOrderPage } from '@/pages/CreateSalesOrderPage'
@@ -60,7 +62,9 @@ export default function App() {
         <Route path="partners" element={<PartnersPage />} />
         <Route path="partners/new" element={<CreatePartnerPage />} />
         <Route path="locations" element={<LocationsPage />} />
+        <Route path="locations/new" element={<CreateLocationPage />} />
         <Route path="balances" element={<BalancesPage />} />
+        <Route path="balances/adjust" element={<AdjustStockPage />} />
         <Route path="movements" element={<MovementsPage />} />
         <Route path="sales-orders" element={<SalesOrdersPage />} />
         <Route path="sales-orders/new" element={<CreateSalesOrderPage />} />
diff --git a/web/src/api/client.ts b/web/src/api/client.ts
index ce79197..6c5272b 100644
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@@ -180,7 +180,11 @@ export const partners = {
 
 export const inventory = {
   listLocations: () => apiFetch<Location[]>('/api/v1/inventory/locations'),
+  createLocation: (body: { code: string; name: string; type: string }) =>
+    apiFetch<Location>('/api/v1/inventory/locations', { method: 'POST', body: JSON.stringify(body) }),
   listBalances: () => apiFetch<StockBalance[]>('/api/v1/inventory/balances'),
+  adjustBalance: (body: { itemCode: string; locationId: string; quantity: number }) =>
+    apiFetch<StockBalance>('/api/v1/inventory/balances/adjust', { method: 'POST', body: JSON.stringify(body) }),
   listMovements: () => apiFetch<StockMovement[]>('/api/v1/inventory/movements'),
 }
 
diff --git a/web/src/pages/AdjustStockPage.tsx b/web/src/pages/AdjustStockPage.tsx
new file mode 100644
index 0000000..4294efa
--- /dev/null
+++ b/web/src/pages/AdjustStockPage.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { catalog, inventory } from '@/api/client'
+import type { Item, Location } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+export function AdjustStockPage() {
+  const navigate = useNavigate()
+  const [items, setItems] = useState<Item[]>([])
+  const [locations, setLocations] = useState<Location[]>([])
+  const [itemCode, setItemCode] = useState('')
+  const [locationId, setLocationId] = useState('')
+  const [quantity, setQuantity] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const [result, setResult] = useState<string | null>(null)
+
+  useEffect(() => {
+    Promise.all([catalog.listItems(), inventory.listLocations()]).then(([i, l]) => {
+      setItems(i)
+      setLocations(l.filter((x) => x.active))
+      if (i.length > 0) setItemCode(i[0].code)
+      if (l.length > 0) setLocationId(l[0].id)
+    })
+  }, [])
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setResult(null)
+    setSubmitting(true)
+    try {
+      const bal = await inventory.adjustBalance({
+        itemCode,
+        locationId,
+        quantity: Number(quantity),
+      })
+      setResult(
+        `Balance set: ${bal.itemCode} @ location = ${bal.quantity}`,
+      )
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  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>}
+      />
+      <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>
+          <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>
+          <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>
+          <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" />
+        </div>
+        {error && <ErrorBox error={error} />}
+        {result && (
+          <div className="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
+            {result}
+          </div>
+        )}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Adjusting...' : 'Set Balance'}
+        </button>
+      </form>
+    </div>
+  )
+}
diff --git a/web/src/pages/BalancesPage.tsx b/web/src/pages/BalancesPage.tsx
index 8dc56f8..3efe48d 100644
--- a/web/src/pages/BalancesPage.tsx
+++ b/web/src/pages/BalancesPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { inventory } from '@/api/client'
 import type { Location, StockBalance } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
@@ -54,6 +55,7 @@ export function BalancesPage() {
       <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>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
diff --git a/web/src/pages/CreateLocationPage.tsx b/web/src/pages/CreateLocationPage.tsx
new file mode 100644
index 0000000..e6a4748
--- /dev/null
+++ b/web/src/pages/CreateLocationPage.tsx
@@ -0,0 +1,63 @@
+import { useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { inventory } from '@/api/client'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+const LOCATION_TYPES = ['WAREHOUSE', 'BIN', 'VIRTUAL'] as const
+
+export function CreateLocationPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [type, setType] = useState<string>('WAREHOUSE')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await inventory.createLocation({ code, name, type })
+      navigate('/locations')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  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>}
+      />
+      <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>
+          <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>
+          <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>
+          <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>)}
+          </select>
+        </div>
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Location'}
+        </button>
+      </form>
+    </div>
+  )
+}
diff --git a/web/src/pages/LocationsPage.tsx b/web/src/pages/LocationsPage.tsx
index 970c424..9422592 100644
--- a/web/src/pages/LocationsPage.tsx
+++ b/web/src/pages/LocationsPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { inventory } from '@/api/client'
 import type { Location } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
@@ -32,7 +33,11 @@ export function LocationsPage() {
 
   return (
     <div>
-      <PageHeader title="Locations" subtitle="Warehouses, bins, and virtual locations the inventory PBC tracks." />
+      <PageHeader
+        title="Locations"
+        subtitle="Warehouses, bins, and virtual locations the inventory PBC tracks."
+        actions={<Link to="/locations/new" className="btn-primary">+ New Location</Link>}
+      />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && !error && <DataTable rows={rows} columns={columns} />}
--
libgit2 0.22.2