feat(web): user-task pages + rules tab in metadata admin

zichun
1 parent 618a9781
Showing 9 changed files with 712 additions and 0 deletions
platform/platform-bootstrap/src/main/kotlin/org/vibeerp/platform/bootstrap/web/SpaController.kt
web/src/App.tsx
web/src/api/client.ts
web/src/i18n/messages.ts
web/src/layout/AppLayout.tsx
web/src/pages/MetadataAdminPage.tsx
web/src/pages/TaskDetailPage.tsx
web/src/pages/UserTasksPage.tsx
web/src/types/api.ts
@@ -85,9 +85,15 @@ class SpaController {
             "/accounts", "/accounts/", "/accounts/**",
             "/journal-entries", "/journal-entries/", "/journal-entries/**",
  
+            // Workflow
+            "/workflow", "/workflow/", "/workflow/**",
+
             // System / identity
             "/users", "/users/", "/users/**",
             "/roles", "/roles/", "/roles/**",
+
+            // Admin
+            "/admin", "/admin/", "/admin/**",
         ],
     )
     fun spa(): String = "forward:/index.html"
@@ -44,6 +44,8 @@ import { JournalEntriesPage } from &#39;@/pages/JournalEntriesPage&#39;
 import { FormDesignerPage } from '@/pages/FormDesignerPage'
 import { ListViewDesignerPage } from '@/pages/ListViewDesignerPage'
 import { MetadataAdminPage } from '@/pages/MetadataAdminPage'
+import { UserTasksPage } from '@/pages/UserTasksPage'
+import { TaskDetailPage } from '@/pages/TaskDetailPage'
  
 export default function App() {
   return (
@@ -84,6 +86,8 @@ export default function App() {
         <Route path="work-orders/new" element={<CreateWorkOrderPage />} />
         <Route path="work-orders/:id" element={<WorkOrderDetailPage />} />
         <Route path="shop-floor" element={<ShopFloorPage />} />
+        <Route path="workflow/tasks" element={<UserTasksPage />} />
+        <Route path="workflow/tasks/:taskId" element={<TaskDetailPage />} />
         <Route path="accounts" element={<AccountsPage />} />
         <Route path="journal-entries" element={<JournalEntriesPage />} />
         <Route path="admin/metadata" element={<MetadataAdminPage />} />
@@ -38,6 +38,7 @@ import type {
   Partner,
   PurchaseOrder,
   Role,
+  RuleDefinition,
   SalesOrder,
   ShopFloorEntry,
   StockBalance,
@@ -45,6 +46,8 @@ import type {
   TokenPair,
   Uom,
   User,
+  UserTaskDetail,
+  UserTaskSummary,
   WorkOrder,
 } from '@/types/api'
  
@@ -286,6 +289,15 @@ export const production = {
     apiFetch<ShopFloorEntry[]>('/api/v1/production/work-orders/shop-floor'),
 }
  
+// ─── Workflow ────────────────────────────────────────────────────────
+
+export const workflow = {
+  listTasks: () => apiFetch<UserTaskSummary[]>('/api/v1/workflow/tasks'),
+  getTask: (taskId: string) => apiFetch<UserTaskDetail>(`/api/v1/workflow/tasks/${taskId}`),
+  completeTask: (taskId: string, variables: Record<string, unknown>) =>
+    apiFetch<void>(`/api/v1/workflow/tasks/${taskId}/complete`, { method: 'POST', body: JSON.stringify(variables) }, false),
+}
+
 // ─── Finance ─────────────────────────────────────────────────────────
  
 // ─── Metadata admin ─────────────────────────────────────────────────
@@ -314,6 +326,12 @@ export const metadata = {
     apiFetch<CustomFieldDef>(`/api/v1/_meta/metadata/custom-fields/${key}`, { method: 'PUT', body: JSON.stringify(body) }),
   deleteCustomField: (key: string) =>
     apiFetch<void>(`/api/v1/_meta/metadata/custom-fields/${key}`, { method: 'DELETE' }, false),
+  listRules: () => apiFetch<RuleDefinition[]>('/api/v1/_meta/metadata/rules'),
+  getRule: (slug: string) => apiFetch<RuleDefinition>(`/api/v1/_meta/metadata/rules/${slug}`),
+  saveRule: (slug: string, body: Omit<RuleDefinition, 'source'>) =>
+    apiFetch<RuleDefinition>(`/api/v1/_meta/metadata/rules/${slug}`, { method: 'PUT', body: JSON.stringify(body) }),
+  deleteRule: (slug: string) =>
+    apiFetch<void>(`/api/v1/_meta/metadata/rules/${slug}`, { method: 'DELETE' }, false),
 }
  
 // ─── Finance ─────────────────────────────────────────────────────────
@@ -126,6 +126,22 @@ export const en = {
   'label.targetEntity': 'Target Entity',
   'label.fieldType': 'Field Type',
   'confirm.delete': 'Are you sure?',
+
+  // ─── Workflow / tasks ─────────────────────────────────────
+  'nav.workflow': 'Workflow',
+  'nav.tasks': 'Tasks',
+  'page.tasks.title': 'Pending Tasks',
+  'page.tasks.subtitle': 'Workflow tasks waiting for action',
+  'page.taskDetail.title': 'Task Detail',
+
+  // ─── Rules ────────────────────────────────────────────────
+  'tab.rules': 'Rules',
+  'label.triggerEvent': 'Trigger Event',
+  'label.conditions': 'Conditions',
+  'label.actions': 'Actions',
+  'label.enabled': 'Enabled',
+  'label.conditionLogic': 'Logic',
+  'action.newRule': 'New Rule',
 } as const
  
 export const zhCN: Record<MessageKey, string> = {
@@ -243,6 +259,22 @@ export const zhCN: Record&lt;MessageKey, string&gt; = {
   'label.targetEntity': '目标实体',
   'label.fieldType': '字段类型',
   'confirm.delete': '确定删除？',
+
+  // ─── 工作流 / 任务 ────────────────────────────────────────
+  'nav.workflow': '工作流',
+  'nav.tasks': '任务',
+  'page.tasks.title': '待办任务',
+  'page.tasks.subtitle': '等待处理的工作流任务',
+  'page.taskDetail.title': '任务详情',
+
+  // ─── 规则 ─────────────────────────────────────────────────
+  'tab.rules': '规则',
+  'label.triggerEvent': '触发事件',
+  'label.conditions': '条件',
+  'label.actions': '动作',
+  'label.enabled': '启用',
+  'label.conditionLogic': '逻辑',
+  'action.newRule': '新建规则',
 }
  
 export const locales = {
@@ -60,6 +60,12 @@ const NAV: NavGroup[] = [
     ],
   },
   {
+    headingKey: 'nav.workflow',
+    items: [
+      { to: '/workflow/tasks', labelKey: 'nav.tasks' },
+    ],
+  },
+  {
     headingKey: 'nav.system',
     items: [
       { to: '/users', labelKey: 'nav.users' },
@@ -16,6 +16,9 @@ import type {
   ListViewDefinition,
   MetadataEntity,
   MetadataPermission,
+  RuleDefinition,
+  RuleCondition,
+  RuleAction,
 } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
 import { Loading } from '@/components/Loading'
@@ -61,6 +64,30 @@ type TabId =
   | 'menus'
   | 'forms'
   | 'listViews'
+  | 'rules'
+
+const TRIGGER_EVENTS = [
+  'SalesOrderConfirmedEvent',
+  'SalesOrderShippedEvent',
+  'SalesOrderCancelledEvent',
+  'PurchaseOrderConfirmedEvent',
+  'PurchaseOrderReceivedEvent',
+  'PurchaseOrderCancelledEvent',
+  'WorkOrderCreatedEvent',
+  'WorkOrderStartedEvent',
+  'WorkOrderCompletedEvent',
+  'WorkOrderCancelledEvent',
+  'InspectionRecordedEvent',
+] as const
+
+const CONDITION_OPERATORS = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'contains', 'in'] as const
+
+function slugify(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
  
 const TYPE_KINDS = [
   'string',
@@ -93,6 +120,20 @@ export function MetadataAdminPage() {
   const [menus, setMenus] = useState<MenuRow[]>([])
   const [forms, setForms] = useState<FormDefinition[]>([])
   const [listViews, setListViews] = useState<ListViewDefinition[]>([])
+  const [rules, setRules] = useState<RuleDefinition[]>([])
+
+  // Rule inline form state
+  const [ruleFormOpen, setRuleFormOpen] = useState(false)
+  const [ruleEditingSlug, setRuleEditingSlug] = useState<string | null>(null)
+  const [ruleName, setRuleName] = useState('')
+  const [ruleDescription, setRuleDescription] = useState('')
+  const [ruleTriggerEvent, setRuleTriggerEvent] = useState<string>(TRIGGER_EVENTS[0])
+  const [ruleConditionLogic, setRuleConditionLogic] = useState<'AND' | 'OR'>('AND')
+  const [ruleConditions, setRuleConditions] = useState<RuleCondition[]>([])
+  const [ruleActions, setRuleActions] = useState<RuleAction[]>([])
+  const [ruleEnabled, setRuleEnabled] = useState(true)
+  const [ruleVersion, setRuleVersion] = useState(1)
+  const [ruleSaving, setRuleSaving] = useState(false)
  
   // Custom-field inline form state
   const [cfFormOpen, setCfFormOpen] = useState(false)
@@ -128,6 +169,8 @@ export function MetadataAdminPage() {
           return metadata.listForms().then(setForms).then(() => {})
         case 'listViews':
           return metadata.listListViews().then(setListViews).then(() => {})
+        case 'rules':
+          return metadata.listRules().then(setRules).then(() => {})
       }
     })()
     promise
@@ -213,6 +256,77 @@ export function MetadataAdminPage() {
     }
   }
  
+  // ── Rule form helpers ──────────────────────────────────────────────
+
+  const resetRuleForm = () => {
+    setRuleFormOpen(false)
+    setRuleEditingSlug(null)
+    setRuleName('')
+    setRuleDescription('')
+    setRuleTriggerEvent(TRIGGER_EVENTS[0])
+    setRuleConditionLogic('AND')
+    setRuleConditions([])
+    setRuleActions([])
+    setRuleEnabled(true)
+    setRuleVersion(1)
+  }
+
+  const openRuleCreate = () => {
+    resetRuleForm()
+    setRuleFormOpen(true)
+  }
+
+  const openRuleEdit = (rule: RuleDefinition) => {
+    setRuleEditingSlug(rule.slug)
+    setRuleName(rule.name)
+    setRuleDescription(rule.description ?? '')
+    setRuleTriggerEvent(rule.triggerEvent)
+    setRuleConditionLogic(rule.conditionLogic)
+    setRuleConditions([...rule.conditions])
+    setRuleActions(rule.actions.map((a) => ({ type: a.type, config: { ...a.config } })))
+    setRuleEnabled(rule.enabled)
+    setRuleVersion(rule.version)
+    setRuleFormOpen(true)
+  }
+
+  const onRuleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setRuleSaving(true)
+    setError(null)
+    const slug = ruleEditingSlug ?? slugify(ruleName)
+    const body: Omit<RuleDefinition, 'source'> = {
+      slug,
+      name: ruleName,
+      description: ruleDescription || undefined,
+      enabled: ruleEnabled,
+      triggerEvent: ruleTriggerEvent,
+      conditions: ruleConditions,
+      conditionLogic: ruleConditionLogic,
+      actions: ruleActions,
+      version: ruleVersion,
+    }
+    try {
+      await metadata.saveRule(slug, body)
+      resetRuleForm()
+      loadTab('rules')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setRuleSaving(false)
+    }
+  }
+
+  const onRuleDelete = async (slug: string) => {
+    if (!window.confirm(t('confirm.delete'))) return
+    setError(null)
+    try {
+      await metadata.deleteRule(slug)
+      loadTab('rules')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    }
+  }
+
   // ── Form / ListView delete helpers ────────────────────────────────
  
   const onFormDelete = async (slug: string) => {
@@ -360,6 +474,58 @@ export function MetadataAdminPage() {
     },
   ]
  
+  const ruleCols: Column<RuleDefinition>[] = [
+    { header: t('label.name'), key: 'name' },
+    { header: t('label.triggerEvent'), key: 'triggerEvent' },
+    {
+      header: t('label.enabled'),
+      key: 'enabled',
+      render: (r) => (
+        <span
+          className={`inline-block rounded px-1.5 py-0.5 text-xs font-medium ${
+            r.enabled
+              ? 'bg-emerald-100 text-emerald-700'
+              : 'bg-rose-100 text-rose-700'
+          }`}
+        >
+          {r.enabled ? 'Yes' : 'No'}
+        </span>
+      ),
+    },
+    {
+      header: t('label.conditions'),
+      key: 'conditions',
+      render: (r) => <span className="text-slate-500">{r.conditions.length}</span>,
+    },
+    {
+      header: t('label.actions'),
+      key: 'actions',
+      render: (r) => <span className="text-slate-500">{r.actions.length}</span>,
+    },
+    { header: t('label.source'), key: 'source', render: (r) => <SourceBadge source={r.source ?? 'core'} /> },
+    {
+      header: '',
+      key: '_actions',
+      render: (r) =>
+        r.source === 'user' ? (
+          <span className="flex gap-2">
+            <button
+              className="text-xs text-blue-600 hover:underline"
+              onClick={() => openRuleEdit(r)}
+            >
+              Edit
+            </button>
+            <button
+              className="text-xs text-rose-600 hover:underline"
+              onClick={() => onRuleDelete(r.slug)}
+            >
+              {t('action.delete')}
+            </button>
+          </span>
+        ) : null,
+    },
+  ]
+
   // ── Tab bar ───────────────────────────────────────────────────────
  
   const tabs: { id: TabId; label: string }[] = [
@@ -369,6 +535,7 @@ export function MetadataAdminPage() {
     { id: 'menus', label: t('tab.menus') },
     { id: 'forms', label: t('tab.forms') },
     { id: 'listViews', label: t('tab.listViews') },
+    { id: 'rules', label: t('tab.rules') },
   ]
  
   // ── Tab content renderer ──────────────────────────────────────────
@@ -571,6 +738,253 @@ export function MetadataAdminPage() {
             />
           </div>
         )
+
+      case 'rules':
+        return (
+          <div>
+            <div className="mb-3">
+              <button className="btn-primary" onClick={openRuleCreate}>
+                {t('action.newRule')}
+              </button>
+            </div>
+            {ruleFormOpen && (
+              <form
+                onSubmit={onRuleSubmit}
+                className="card p-4 space-y-3 mt-3 mb-4 max-w-3xl"
+              >
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700">
+                      {t('label.name')}
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={ruleName}
+                      onChange={(e) => setRuleName(e.target.value)}
+                      placeholder="My Rule"
+                      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">
+                      {t('label.triggerEvent')}
+                    </label>
+                    <select
+                      value={ruleTriggerEvent}
+                      onChange={(e) => setRuleTriggerEvent(e.target.value)}
+                      className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
+                    >
+                      {TRIGGER_EVENTS.map((ev) => (
+                        <option key={ev} value={ev}>
+                          {ev}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700">
+                    {t('label.description')}
+                  </label>
+                  <input
+                    type="text"
+                    value={ruleDescription}
+                    onChange={(e) => setRuleDescription(e.target.value)}
+                    className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
+                  />
+                </div>
+
+                {/* Condition logic */}
+                <div className="flex items-center gap-3">
+                  <label className="text-sm font-medium text-slate-700">
+                    {t('label.conditionLogic')}
+                  </label>
+                  <select
+                    value={ruleConditionLogic}
+                    onChange={(e) =>
+                      setRuleConditionLogic(e.target.value as 'AND' | 'OR')
+                    }
+                    className="rounded-md border border-slate-300 px-3 py-1.5 text-sm"
+                  >
+                    <option value="AND">AND</option>
+                    <option value="OR">OR</option>
+                  </select>
+                </div>
+
+                {/* Conditions */}
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">
+                    {t('label.conditions')}
+                  </label>
+                  {ruleConditions.map((cond, i) => (
+                    <div key={i} className="flex gap-2 mb-2 items-center">
+                      <input
+                        type="text"
+                        placeholder="field"
+                        required
+                        value={cond.field}
+                        onChange={(e) => {
+                          const next = [...ruleConditions]
+                          next[i] = { ...next[i], field: e.target.value }
+                          setRuleConditions(next)
+                        }}
+                        className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm"
+                      />
+                      <select
+                        value={cond.operator}
+                        onChange={(e) => {
+                          const next = [...ruleConditions]
+                          next[i] = { ...next[i], operator: e.target.value }
+                          setRuleConditions(next)
+                        }}
+                        className="rounded-md border border-slate-300 px-2 py-1.5 text-sm"
+                      >
+                        {CONDITION_OPERATORS.map((op) => (
+                          <option key={op} value={op}>
+                            {op}
+                          </option>
+                        ))}
+                      </select>
+                      <input
+                        type="text"
+                        placeholder="value"
+                        required
+                        value={cond.value}
+                        onChange={(e) => {
+                          const next = [...ruleConditions]
+                          next[i] = { ...next[i], value: e.target.value }
+                          setRuleConditions(next)
+                        }}
+                        className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm"
+                      />
+                      <button
+                        type="button"
+                        className="text-xs text-rose-600 hover:underline"
+                        onClick={() =>
+                          setRuleConditions(ruleConditions.filter((_, j) => j !== i))
+                        }
+                      >
+                        {t('action.delete')}
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    className="text-xs text-blue-600 hover:underline"
+                    onClick={() =>
+                      setRuleConditions([
+                        ...ruleConditions,
+                        { field: '', operator: 'eq', value: '' },
+                      ])
+                    }
+                  >
+                    + Add Condition
+                  </button>
+                </div>
+
+                {/* Actions */}
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">
+                    {t('label.actions')}
+                  </label>
+                  {ruleActions.map((act, i) => (
+                    <div key={i} className="flex gap-2 mb-2 items-center">
+                      <select
+                        value={act.type}
+                        onChange={(e) => {
+                          const next = [...ruleActions]
+                          next[i] = { ...next[i], type: e.target.value }
+                          setRuleActions(next)
+                        }}
+                        className="rounded-md border border-slate-300 px-2 py-1.5 text-sm"
+                      >
+                        <option value="log">log</option>
+                      </select>
+                      <input
+                        type="text"
+                        placeholder="key"
+                        value={Object.keys(act.config)[0] ?? ''}
+                        onChange={(e) => {
+                          const next = [...ruleActions]
+                          const oldVal = Object.values(act.config)[0] ?? ''
+                          next[i] = { ...next[i], config: { [e.target.value]: oldVal } }
+                          setRuleActions(next)
+                        }}
+                        className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm font-mono"
+                      />
+                      <input
+                        type="text"
+                        placeholder="value"
+                        value={Object.values(act.config)[0] ?? ''}
+                        onChange={(e) => {
+                          const next = [...ruleActions]
+                          const oldKey = Object.keys(act.config)[0] ?? 'message'
+                          next[i] = { ...next[i], config: { [oldKey]: e.target.value } }
+                          setRuleActions(next)
+                        }}
+                        className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm"
+                      />
+                      <button
+                        type="button"
+                        className="text-xs text-rose-600 hover:underline"
+                        onClick={() =>
+                          setRuleActions(ruleActions.filter((_, j) => j !== i))
+                        }
+                      >
+                        {t('action.delete')}
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    className="text-xs text-blue-600 hover:underline"
+                    onClick={() =>
+                      setRuleActions([
+                        ...ruleActions,
+                        { type: 'log', config: { message: '' } },
+                      ])
+                    }
+                  >
+                    + Add Action
+                  </button>
+                </div>
+
+                {/* Enabled */}
+                <label className="flex items-center gap-1.5 text-sm text-slate-700">
+                  <input
+                    type="checkbox"
+                    checked={ruleEnabled}
+                    onChange={(e) => setRuleEnabled(e.target.checked)}
+                  />
+                  {t('label.enabled')}
+                </label>
+
+                <div className="flex gap-2">
+                  <button
+                    type="submit"
+                    className="btn-primary"
+                    disabled={ruleSaving}
+                  >
+                    {ruleSaving ? '...' : t('action.save')}
+                  </button>
+                  <button
+                    type="button"
+                    className="btn-secondary"
+                    onClick={resetRuleForm}
+                  >
+                    {t('action.cancel')}
+                  </button>
+                </div>
+              </form>
+            )}
+            <DataTable
+              rows={rules}
+              columns={ruleCols}
+              rowKey={(r) => r.slug}
+            />
+          </div>
+        )
     }
   }
  
@@ -595,6 +1009,7 @@ export function MetadataAdminPage() {
             }`}
             onClick={() => {
               resetCfForm()
+              resetRuleForm()
               setActiveTab(tab.id)
             }}
           >
+// Workflow task detail page.
+//
+// Fetches a single user task by ID. If the task carries a formKey
+// starting with "vibe:", strips the prefix and renders the matching
+// MetadataFormRenderer so the user sees a rich, metadata-driven
+// form. Otherwise falls back to a read-only JSON dump of the task
+// variables with a simple "Complete" button.
+
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { workflow } from '@/api/client'
+import type { UserTaskDetail } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { Loading } from '@/components/Loading'
+import { ErrorBox } from '@/components/ErrorBox'
+import { MetadataFormRenderer } from '@/components/MetadataFormRenderer'
+import { useT } from '@/i18n/LocaleContext'
+
+export function TaskDetailPage() {
+  const t = useT()
+  const navigate = useNavigate()
+  const { taskId = '' } = useParams<{ taskId: string }>()
+  const [task, setTask] = useState<UserTaskDetail | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [acting, setActing] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    setLoading(true)
+    setError(null)
+    workflow
+      .getTask(taskId)
+      .then(setTask)
+      .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
+      .finally(() => setLoading(false))
+  }, [taskId])
+
+  const handleComplete = async (formData?: Record<string, unknown>) => {
+    setActing(true)
+    setError(null)
+    try {
+      await workflow.completeTask(taskId, formData ?? {})
+      navigate('/workflow/tasks')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e : new Error(String(e)))
+    } finally {
+      setActing(false)
+    }
+  }
+
+  if (loading) return <Loading />
+  if (error && !task) return <ErrorBox error={error} />
+  if (!task) return <ErrorBox error={new Error('Task not found')} />
+
+  // Determine whether we have a vibe: form key
+  const vibeFormSlug =
+    task.formKey && task.formKey.startsWith('vibe:')
+      ? task.formKey.slice('vibe:'.length)
+      : null
+
+  return (
+    <div>
+      <PageHeader
+        title={t('page.taskDetail.title')}
+        subtitle={task.taskName}
+        actions={
+          <button
+            className="btn-secondary"
+            onClick={() => navigate('/workflow/tasks')}
+          >
+            {t('action.back')}
+          </button>
+        }
+      />
+
+      {error && <ErrorBox error={error} />}
+
+      <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>
+          <dd className="font-mono">{task.taskId}</dd>
+          <dt className="font-medium text-slate-500">Process</dt>
+          <dd>{task.processDefinitionKey}</dd>
+          <dt className="font-medium text-slate-500">Created</dt>
+          <dd>{task.createTime}</dd>
+          <dt className="font-medium text-slate-500">Assignee</dt>
+          <dd>{task.assignee ?? '\u2014'}</dd>
+          <dt className="font-medium text-slate-500">Form Key</dt>
+          <dd className="font-mono">{task.formKey ?? '\u2014'}</dd>
+        </dl>
+
+        <hr className="border-slate-200" />
+
+        {vibeFormSlug ? (
+          <MetadataFormRenderer
+            slug={vibeFormSlug}
+            initialValues={task.variables}
+            onSubmit={handleComplete}
+          />
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-sm font-medium text-slate-700 mb-2">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>
+            </div>
+            <button
+              className="btn-primary"
+              disabled={acting}
+              onClick={() => handleComplete()}
+            >
+              {acting ? '...' : t('action.complete')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+// Workflow user-tasks list page.
+//
+// Fetches pending human tasks from the embedded workflow engine
+// and renders them in a DataTable. Clicking a row navigates to
+// the task detail page where the user can complete the task.
+
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { workflow } from '@/api/client'
+import type { UserTaskSummary } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { Loading } from '@/components/Loading'
+import { ErrorBox } from '@/components/ErrorBox'
+import { DataTable, type Column } from '@/components/DataTable'
+import { useT } from '@/i18n/LocaleContext'
+
+export function UserTasksPage() {
+  const t = useT()
+  const navigate = useNavigate()
+  const [rows, setRows] = useState<UserTaskSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    workflow
+      .listTasks()
+      .then(setRows)
+      .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const columns: Column<UserTaskSummary>[] = [
+    {
+      header: 'Task Name',
+      key: 'taskName',
+      render: (r) => (
+        <button
+          className="text-brand-600 hover:underline"
+          onClick={() => navigate(`/workflow/tasks/${r.taskId}`)}
+        >
+          {r.taskName}
+        </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' },
+  ]
+
+  return (
+    <div>
+      <PageHeader
+        title={t('page.tasks.title')}
+        subtitle={t('page.tasks.subtitle')}
+      />
+      {loading && <Loading />}
+      {error && <ErrorBox error={error} />}
+      {!loading && !error && (
+        <DataTable
+          rows={rows}
+          columns={columns}
+          rowKey={(r) => r.taskId}
+          empty={<div className="p-6 text-sm text-slate-400">No pending tasks</div>}
+        />
+      )}
+    </div>
+  )
+}
@@ -285,6 +285,48 @@ export interface JournalEntry {
   lines: JournalEntryLine[]
 }
  
+// ─── Workflow (user tasks) ──────────────────────────────────────────
+
+export interface UserTaskSummary {
+  taskId: string
+  taskName: string
+  formKey: string | null
+  processDefinitionKey: string
+  processInstanceId: string
+  createTime: string
+  assignee: string | null
+}
+
+export interface UserTaskDetail extends UserTaskSummary {
+  variables: Record<string, unknown>
+}
+
+// ─── Rules ─────────────────────────────────────────────────────────
+
+export interface RuleCondition {
+  field: string
+  operator: string
+  value: string
+}
+
+export interface RuleAction {
+  type: string
+  config: Record<string, string>
+}
+
+export interface RuleDefinition {
+  slug: string
+  name: string
+  description?: string
+  enabled: boolean
+  triggerEvent: string
+  conditions: RuleCondition[]
+  conditionLogic: 'AND' | 'OR'
+  actions: RuleAction[]
+  version: number
+  source?: string
+}
+
 // ─── Metadata Definitions ───────────────────────────────────────────
  
 export type FormPurpose = 'create' | 'edit' | 'user-task' | 'view'