feat(web): edit forms for items + partners (PATCH)

Adds edit pages for items and partners — the two entities operators update most often. Each form loads the existing record, pre-fills all editable fields, and PATCHes on save. Code and baseUomCode are read-only after creation (by design). New pages: - EditItemPage: name, type, description, active toggle - EditPartnerPage: name, type, email, phone API client: catalog.updateItem, partners.update (PATCH). List pages: item/partner codes are now clickable links to the edit page instead of plain text. Routes wired at /items/:id/edit and /partners/:id/edit.

feat(web): edit forms for items + partners (PATCH)
Adds edit pages for items and partners — the two entities operators update most often. Each form loads the existing record, pre-fills all editable fields, and PATCHes on save. Code and baseUomCode are read-only after creation (by design). New pages: - EditItemPage: name, type, description, active toggle - EditPartnerPage: name, type, email, phone API client: catalog.updateItem, partners.update (PATCH). List pages: item/partner codes are now clickable links to the edit page instead of plain text. Routes wired at /items/:id/edit and /partners/:id/edit.
zichun
1 parent e1d0c833
Showing 6 changed files with 216 additions and 2 deletions
web/src/App.tsx
web/src/api/client.ts
web/src/pages/EditItemPage.tsx
web/src/pages/EditPartnerPage.tsx
web/src/pages/ItemsPage.tsx
web/src/pages/PartnersPage.tsx
@@ -19,9 +19,11 @@ import { UserDetailPage } from &#39;@/pages/UserDetailPage&#39;
 import { RolesPage } from '@/pages/RolesPage'
 import { ItemsPage } from '@/pages/ItemsPage'
 import { CreateItemPage } from '@/pages/CreateItemPage'
+import { EditItemPage } from '@/pages/EditItemPage'
 import { UomsPage } from '@/pages/UomsPage'
 import { PartnersPage } from '@/pages/PartnersPage'
 import { CreatePartnerPage } from '@/pages/CreatePartnerPage'
+import { EditPartnerPage } from '@/pages/EditPartnerPage'
 import { LocationsPage } from '@/pages/LocationsPage'
 import { CreateLocationPage } from '@/pages/CreateLocationPage'
 import { BalancesPage } from '@/pages/BalancesPage'
@@ -59,9 +61,11 @@ export default function App() {
         <Route path="roles" element={<RolesPage />} />
         <Route path="items" element={<ItemsPage />} />
         <Route path="items/new" element={<CreateItemPage />} />
+        <Route path="items/:id/edit" element={<EditItemPage />} />
         <Route path="uoms" element={<UomsPage />} />
         <Route path="partners" element={<PartnersPage />} />
         <Route path="partners/new" element={<CreatePartnerPage />} />
+        <Route path="partners/:id/edit" element={<EditPartnerPage />} />
         <Route path="locations" element={<LocationsPage />} />
         <Route path="locations/new" element={<CreateLocationPage />} />
         <Route path="balances" element={<BalancesPage />} />
@@ -162,6 +162,9 @@ export const catalog = {
     code: string; name: string; description?: string | null;
     itemType: string; baseUomCode: string; active?: boolean
   }) => apiFetch<Item>('/api/v1/catalog/items', { method: 'POST', body: JSON.stringify(body) }),
+  updateItem: (id: string, body: {
+    name?: string; description?: string | null; itemType?: string; active?: boolean
+  }) => apiFetch<Item>(`/api/v1/catalog/items/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
   listUoms: () => apiFetch<Uom[]>('/api/v1/catalog/uoms'),
 }
  
@@ -175,6 +178,10 @@ export const partners = {
     email?: string | null; phone?: string | null;
     taxId?: string | null; website?: string | null
   }) => apiFetch<Partner>('/api/v1/partners/partners', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id: string, body: {
+    name?: string; type?: string;
+    email?: string | null; phone?: string | null
+  }) => apiFetch<Partner>(`/api/v1/partners/partners/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
 }
  
 // ─── Inventory ───────────────────────────────────────────────────────
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { catalog } from '@/api/client'
+import type { Item } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { Loading } from '@/components/Loading'
+import { ErrorBox } from '@/components/ErrorBox'
+
+const ITEM_TYPES = ['GOOD', 'SERVICE', 'DIGITAL'] as const
+
+export function EditItemPage() {
+  const { id = '' } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [item, setItem] = useState<Item | null>(null)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [itemType, setItemType] = useState<string>('GOOD')
+  const [active, setActive] = useState(true)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    catalog.getItem(id)
+      .then((i) => {
+        setItem(i)
+        setName(i.name)
+        setDescription(i.description ?? '')
+        setItemType(i.itemType)
+        setActive(i.active)
+      })
+      .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await catalog.updateItem(id, {
+        name, itemType, active,
+        description: description || null,
+      })
+      navigate('/items')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (loading) return <Loading />
+  if (!item) return <ErrorBox error={error ?? 'Item not found'} />
+
+  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>}
+      />
+      <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>
+            <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>
+            <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>)}
+            </select>
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700">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>
+        </div>
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Saving…' : 'Save Changes'}
+        </button>
+      </form>
+    </div>
+  )
+}
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { partners } from '@/api/client'
+import type { Partner } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { Loading } from '@/components/Loading'
+import { ErrorBox } from '@/components/ErrorBox'
+
+const PARTNER_TYPES = ['CUSTOMER', 'SUPPLIER', 'BOTH'] as const
+
+export function EditPartnerPage() {
+  const { id = '' } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [partner, setPartner] = useState<Partner | null>(null)
+  const [name, setName] = useState('')
+  const [type, setType] = useState<string>('CUSTOMER')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    partners.get(id)
+      .then((p) => {
+        setPartner(p)
+        setName(p.name)
+        setType(p.type)
+        setEmail(p.email ?? '')
+        setPhone(p.phone ?? '')
+      })
+      .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await partners.update(id, {
+        name, type,
+        email: email || null,
+        phone: phone || null,
+      })
+      navigate('/partners')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (loading) return <Loading />
+  if (!partner) return <ErrorBox error={error ?? 'Partner not found'} />
+
+  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>}
+      />
+      <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>
+            <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>
+            <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>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">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>
+            <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>
+        </div>
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Saving…' : 'Save Changes'}
+        </button>
+      </form>
+    </div>
+  )
+}
@@ -21,7 +21,13 @@ export function ItemsPage() {
   }, [])
  
   const columns: Column<Item>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    {
+      header: '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: 'UoM', key: 'baseUomCode', render: (r) => <span className="font-mono">{r.baseUomCode}</span> },
@@ -21,7 +21,13 @@ export function PartnersPage() {
   }, [])
  
   const columns: Column<Partner>[] = [
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono">{r.code}</span> },
+    {
+      header: '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 ?? '—' },