feat(web): ERP-style form layout prototype (Sales Order)

Replace the card-based create form with a traditional Chinese ERP layout: dense 4-column label/value header grid, top toolbar, tabbed section, and spreadsheet-style inline-editable line items with running totals. All labels go through the i18n system (16 new message keys in en/zh-CN). This is the prototype; same pattern will be applied to all entity forms.

feat(web): ERP-style form layout prototype (Sales Order)
Replace the card-based create form with a traditional Chinese ERP layout: dense 4-column label/value header grid, top toolbar, tabbed section, and spreadsheet-style inline-editable line items with running totals. All labels go through the i18n system (16 new message keys in en/zh-CN). This is the prototype; same pattern will be applied to all entity forms.
zichun
1 parent 6354c9d3
Showing 2 changed files with 274 additions and 111 deletions
web/src/i18n/messages.ts
web/src/pages/CreateSalesOrderPage.tsx
@@ -142,6 +142,23 @@ export const en = {
   'label.enabled': 'Enabled',
   'label.conditionLogic': 'Logic',
   'action.newRule': 'New Rule',
+
+  // ─── ERP form ─────────────────────────────────────────────
+  'page.salesOrder.create.title': 'New Sales Order',
+  'label.orderCode': 'Order Code',
+  'label.orderDate': 'Order Date',
+  'label.customer': 'Customer',
+  'label.createdBy': 'Created By',
+  'label.createdAt': 'Created At',
+  'label.autoGenerated': 'Auto-generated',
+  'tab.orderLines': 'Order Lines',
+  'label.item': 'Item',
+  'label.lineTotal': 'Line Total',
+  'label.selectItem': 'Select item...',
+  'label.orderTotal': 'Order Total',
+  'label.customFields': 'Custom Fields',
+  'action.addRow': 'Add Row',
+  'action.removeRow': 'Remove',
 } as const
 export const zhCN: Record<MessageKey, string> = {
@@ -275,6 +292,23 @@ export const zhCN: Record&lt;MessageKey, string&gt; = {
   'label.enabled': '启用',
   'label.conditionLogic': '逻辑',
   'action.newRule': '新建规则',
+
+  // ─── ERP 表单 ─────────────────────────────────────────────
+  'page.salesOrder.create.title': '新建销售订单',
+  'label.orderCode': '订单编码',
+  'label.orderDate': '订单日期',
+  'label.customer': '客户',
+  'label.createdBy': '创建人',
+  'label.createdAt': '创建时间',
+  'label.autoGenerated': '自动生成',
+  'tab.orderLines': '订单明细',
+  'label.item': '物料',
+  'label.lineTotal': '行合计',
+  'label.selectItem': '请选择物料...',
+  'label.orderTotal': '订单合计',
+  'label.customFields': '自定义字段',
+  'action.addRow': '添加行',
+  'action.removeRow': '删除',
 }
 export const locales = {
@@ -2,9 +2,9 @@ import { useEffect, useState, type FormEvent } from &#39;react&#39;
 import { useNavigate } from 'react-router-dom'
 import { catalog, partners, salesOrders } from '@/api/client'
 import type { Item, Partner } from '@/types/api'
-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 +14,7 @@ interface LineInput {
 export function CreateSalesOrderPage() {
   const navigate = useNavigate()
+  const t = useT()
   const [code, setCode] = useState('')
   const [partnerCode, setPartnerCode] = useState('')
   const [currencyCode] = useState('USD')
@@ -49,6 +50,11 @@ export function CreateSalesOrderPage() {
     setLines(next)
   }
+  const orderTotal = lines.reduce(
+    (sum, l) => sum + Number(l.quantity || 0) * Number(l.unitPrice || 0),
+    0,
+  )
+
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault()
     setError(null)
@@ -77,127 +83,250 @@ export function CreateSalesOrderPage() {
     }
   }
+  /* ── label cell (light blue bg, right-aligned) ── */
+  const labelCls =
+    'bg-sky-50 border-b border-r border-slate-200 px-3 py-2 text-right text-slate-600 whitespace-nowrap text-sm'
+  /* ── value cell ── */
+  const valueCls = 'border-b border-slate-200 px-2 py-1'
+  const valueClsR = `${valueCls} border-r` // value cell with right border (cols 1 & 3)
+  /* ── inline input ── */
+  const inputCls = 'w-full border-0 outline-none text-sm py-0.5 bg-transparent'
+
   return (
-    <div>
-      <PageHeader
-        title="New Sales Order"
-        subtitle="Create a sales order. Confirming it will auto-generate production work orders."
-        actions={
-          <button className="btn-secondary" onClick={() => navigate('/sales-orders')}>
-            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>
-            <input
-              type="text"
-              required
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              placeholder="SO-2026-0003"
-              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700">Customer</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 shadow-sm focus:border-brand-500 focus:ring-brand-500"
-            >
-              {partnerList.map((p) => (
-                <option key={p.id} value={p.code}>
-                  {p.code} — {p.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700">Currency</label>
-            <input
-              type="text"
-              value={currencyCode}
-              disabled
-              className="mt-1 w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm"
-            />
+    <form onSubmit={onSubmit} className="flex flex-col h-full">
+      {/* ════════ Title bar ════════ */}
+      <div className="flex items-center justify-between bg-white border-b border-slate-200 px-4 py-2">
+        <h1 className="text-base font-semibold text-slate-800">
+          {t('page.salesOrder.create.title')}
+        </h1>
+      </div>
+
+      {/* ════════ Top toolbar ════════ */}
+      <div className="flex items-center gap-1 bg-slate-100 border-b border-slate-300 px-3 py-1.5 text-sm">
+        <button
+          type="submit"
+          className="flex items-center gap-1 px-3 py-1 rounded hover:bg-slate-200 disabled:opacity-50"
+          disabled={submitting}
+        >
+          {submitting ? t('action.creating') : t('action.save')}
+        </button>
+        <div className="w-px h-5 bg-slate-300 mx-1" />
+        <button
+          type="button"
+          className="flex items-center gap-1 px-3 py-1 rounded hover:bg-slate-200"
+          onClick={() => navigate('/sales-orders')}
+        >
+          {t('action.cancel')}
+        </button>
+      </div>
+
+      {/* ════════ Scrollable body ════════ */}
+      <div className="flex-1 overflow-y-auto p-4 bg-slate-50 space-y-4">
+
+        {/* ════════ Form header — dense grid ════════ */}
+        <div className="border border-slate-300 bg-white">
+          <div className="grid grid-cols-4 text-sm">
+            {/* Row 1 */}
+            <div className={labelCls}>
+              <span className="text-rose-500">*</span> {t('label.orderCode')}
+            </div>
+            <div className={valueClsR}>
+              <input
+                type="text"
+                required
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                placeholder="SO-2026-0003"
+                className={inputCls}
+              />
+            </div>
+            <div className={labelCls}>
+              {t('label.orderDate')}
+            </div>
+            <div className={valueCls}>
+              <input
+                type="text"
+                value={new Date().toISOString().slice(0, 10)}
+                disabled
+                className={`${inputCls} text-slate-500`}
+              />
+            </div>
+
+            {/* Row 2 */}
+            <div className={labelCls}>
+              <span className="text-rose-500">*</span> {t('label.customer')}
+            </div>
+            <div className={valueClsR}>
+              <select
+                required
+                value={partnerCode}
+                onChange={(e) => setPartnerCode(e.target.value)}
+                className={`${inputCls} cursor-pointer`}
+              >
+                {partnerList.map((p) => (
+                  <option key={p.id} value={p.code}>
+                    {p.code} — {p.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className={labelCls}>
+              {t('label.currency')}
+            </div>
+            <div className={valueCls}>
+              <span className="text-sm text-slate-500">{currencyCode}</span>
+            </div>
+
+            {/* Row 3 — system / auto fields */}
+            <div className={labelCls}>
+              {t('label.createdBy')}
+            </div>
+            <div className={valueClsR}>
+              <span className="text-sm text-slate-400">{t('label.autoGenerated')}</span>
+            </div>
+            <div className={labelCls}>
+              {t('label.createdAt')}
+            </div>
+            <div className={valueCls}>
+              <span className="text-sm text-slate-400">{t('label.autoGenerated')}</span>
+            </div>
           </div>
         </div>
-        <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>
-          </div>
-          <div className="space-y-2">
-            {lines.map((line, 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={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>
-                  {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}
-                  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}
-                  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>
-              </div>
-            ))}
-          </div>
+        {/* ════════ Tabs ════════ */}
+        <div className="border-b border-slate-300">
+          <button
+            type="button"
+            className="px-4 py-2 text-sm border-b-2 border-blue-500 text-blue-600 font-medium"
+          >
+            {t('tab.orderLines')}
+          </button>
         </div>
+        {/* ════════ Line items — spreadsheet table ════════ */}
+        <div className="border border-slate-300 bg-white">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="bg-slate-100 border-b border-slate-300">
+                <th className="px-2 py-2 text-center w-10 border-r border-slate-200">#</th>
+                <th className="px-2 py-2 text-left border-r border-slate-200">
+                  <span className="text-rose-500">*</span> {t('label.item')}
+                </th>
+                <th className="px-2 py-2 text-right border-r border-slate-200 w-24">
+                  <span className="text-rose-500">*</span> {t('label.quantity')}
+                </th>
+                <th className="px-2 py-2 text-right border-r border-slate-200 w-28">
+                  <span className="text-rose-500">*</span> {t('label.unitPrice')}
+                </th>
+                <th className="px-2 py-2 text-right border-r border-slate-200 w-28">
+                  {t('label.lineTotal')}
+                </th>
+                <th className="px-2 py-2 text-center w-24">{t('label.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {lines.map((line, idx) => (
+                <tr key={idx} className="border-b border-slate-200 hover:bg-sky-50">
+                  <td className="px-2 py-1.5 text-center border-r border-slate-200 text-slate-400">
+                    {idx + 1}
+                  </td>
+                  <td className="px-1 py-0.5 border-r border-slate-200">
+                    <select
+                      value={line.itemCode}
+                      onChange={(e) => updateLine(idx, 'itemCode', e.target.value)}
+                      className="w-full border-0 outline-none text-sm py-1 bg-transparent"
+                    >
+                      <option value="">{t('label.selectItem')}</option>
+                      {items.map((it) => (
+                        <option key={it.id} value={it.code}>
+                          {it.code} — {it.name}
+                        </option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className="px-1 py-0.5 border-r border-slate-200">
+                    <input
+                      type="number"
+                      min="1"
+                      step="1"
+                      placeholder="0"
+                      value={line.quantity}
+                      onChange={(e) => updateLine(idx, 'quantity', e.target.value)}
+                      className="w-full border-0 outline-none text-sm py-1 text-right bg-transparent"
+                    />
+                  </td>
+                  <td className="px-1 py-0.5 border-r border-slate-200">
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      placeholder="0.00"
+                      value={line.unitPrice}
+                      onChange={(e) => updateLine(idx, 'unitPrice', e.target.value)}
+                      className="w-full border-0 outline-none text-sm py-1 text-right bg-transparent"
+                    />
+                  </td>
+                  <td className="px-2 py-1.5 text-right border-r border-slate-200 text-slate-500">
+                    {(Number(line.quantity || 0) * Number(line.unitPrice || 0)).toFixed(2)}
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    <button
+                      type="button"
+                      onClick={addLine}
+                      title={t('action.addRow')}
+                      className="text-blue-500 hover:text-blue-700 mx-0.5 text-xs"
+                    >
+                      [+]
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => removeLine(idx)}
+                      title={t('action.removeRow')}
+                      className="text-rose-400 hover:text-rose-600 mx-0.5 text-xs"
+                    >
+                      [x]
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr className="bg-slate-50 border-t border-slate-300">
+                <td colSpan={2} className="px-2 py-1.5 text-right">
+                  <button
+                    type="button"
+                    onClick={addLine}
+                    className="text-blue-600 hover:text-blue-800 text-xs font-medium"
+                  >
+                    {t('action.addLine')}
+                  </button>
+                </td>
+                <td colSpan={2} className="px-2 py-1.5 text-right font-medium text-slate-700">
+                  {t('label.orderTotal')}
+                </td>
+                <td className="px-2 py-1.5 text-right font-semibold text-slate-800 border-r border-slate-200">
+                  {orderTotal.toFixed(2)}
+                </td>
+                <td />
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+
+        {/* ════════ Custom fields (Tier 1 ext) ════════ */}
         <DynamicExtFields
           entityName="SalesOrder"
           values={ext}
           onChange={(k, v) => setExt((prev) => ({ ...prev, [k]: v }))}
         />
-        {error && <ErrorBox error={error} />}
-
-        <div className="flex items-center gap-3 pt-2">
-          <button type="submit" className="btn-primary" disabled={submitting}>
-            {submitting ? 'Creating...' : 'Create Sales Order'}
-          </button>
-          <span className="text-xs text-slate-400">
-            After creation, confirm the order to auto-generate work orders.
-          </span>
-        </div>
-      </form>
-    </div>
+        {/* ════════ Error ════════ */}
+        {error && (
+          <div className="max-w-2xl">
+            <ErrorBox error={error} />
+          </div>
+        )}
+      </div>
+    </form>
   )
 }