[CLAUDE] FE-Admin+FE-User: Module Ngân sách (Budget) FE — 3-panel List + Create + Detail tabs + Workflow timeline

Mirror pattern PE 3-panel cho 2 app (admin + user): - types/budget.ts (BudgetPhase 5-state enum + label/color, BudgetListItem, BudgetDetailRow, BudgetApproval, BudgetWorkflowSummary, BudgetChangelog, BudgetDetailBundle, BudgetDetailBody) - components/budgets/BudgetDetailTabs.tsx — flat render Section "Thông tin" Header + Section "Hạng mục" table CRUD inline (Add/Edit/Delete dialog với auto-compute ThanhTien = KL × DonGia). Export BudgetApprovalsSection + BudgetHistorySection cho Panel 3 reuse. - components/budgets/BudgetWorkflowPanel.tsx — Panel 3 timeline activePhases + nextPhases buttons (Approve/Reject color coding) + Dialog xác nhận có comment + sub-section Approvals + Changelog. - pages/budgets/BudgetsListPage.tsx — 3-panel [340px_1fr_360px] với search + filter Phase + filter NamNganSach. ?phase=Pending alias FE filter 2 phase ChoCCM/ChoCEO. SlaTimer per row + readOnly mode khi pendingMe. - pages/budgets/BudgetCreatePage.tsx — form Header (TenNganSach/Năm/Dự án/Phòng ban/Mô tả). Edit mode khóa Project+Department. - App.tsx routes /budgets, /budgets/new, /budgets/:id cả 2 app - Layout.tsx menu resolver Bg_List → /budgets, Bg_Create → /budgets/new, Bg_Pending → /budgets?phase=Pending. NavLink active dùng queryMatches helper (gotcha #34 — không conflict Bg_List vs Bg_Pending cùng pathname). TS build: cả fe-admin + fe-user pass clean (1918 + 1901 modules). BE: dùng 11 endpoint Budgets từ migration 14 (Phase 7 BE đã deploy commit a05c57b). Tổng FE: +12 file (5 fe-admin + 5 fe-user + 2 mod App/Layout × 2). ~1100 LOC TSX. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-28 16:25:22 +07:00
parent e0b4e7f096
commit df12fb19c8
14 changed files with 2430 additions and 0 deletions
--- a/fe-admin/src/components/budgets/BudgetWorkflowPanel.tsx
+++ b/fe-admin/src/components/budgets/BudgetWorkflowPanel.tsx
@ -0,0 +1,135 @@
+// Panel 3 — workflow timeline + transition buttons + approval history + changelog.
+// Pulls nextPhases từ BE bundle (single source of truth).
+import { useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { Dialog } from '@/components/ui/Dialog'
+import { Button } from '@/components/ui/Button'
+import { Label } from '@/components/ui/Label'
+import { Textarea } from '@/components/ui/Textarea'
+import { api } from '@/lib/api'
+import { getErrorMessage } from '@/lib/apiError'
+import { cn } from '@/lib/cn'
+import {
+  ApprovalDecision,
+  BudgetPhase,
+  BudgetPhaseColor,
+  BudgetPhaseLabel,
+  type BudgetDetailBundle,
+} from '@/types/budget'
+import { BudgetApprovalsSection, BudgetHistorySection } from './BudgetDetailTabs'
+
+export function BudgetWorkflowPanel({ budget }: { budget: BudgetDetailBundle }) {
+  const [target, setTarget] = useState<number | null>(null)
+  const [comment, setComment] = useState('')
+  const qc = useQueryClient()
+
+  const transition = useMutation({
+    mutationFn: async () =>
+      api.post(`/budgets/${budget.id}/transitions`, {
+        targetPhase: target,
+        decision: target === BudgetPhase.TuChoi ? ApprovalDecision.Reject : ApprovalDecision.Approve,
+        comment: comment || null,
+      }),
+    onSuccess: () => {
+      toast.success('Đã chuyển phase.')
+      qc.invalidateQueries({ queryKey: ['budget-detail', budget.id] })
+      qc.invalidateQueries({ queryKey: ['budget-list'] })
+      qc.invalidateQueries({ queryKey: ['budget-changelog', budget.id] })
+      setTarget(null)
+      setComment('')
+    },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+
+  const next = budget.workflow.nextPhases
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold text-slate-900">Quy trình</h3>
+        <p className="mt-0.5 text-[11px] text-slate-500">{budget.workflow.policyDescription}</p>
+      </div>
+
+      <ol className="space-y-1.5">
+        {budget.workflow.activePhases
+          .filter(p => p !== BudgetPhase.TuChoi)
+          .map(p => {
+            const isCurrent = budget.phase === p
+            const isPast = isPastPhase(budget.phase, p, budget.workflow.activePhases)
+            return (
+              <li key={p}>
+                <div
+                  className={cn(
+                    'flex items-center gap-2 rounded border px-2 py-1.5 text-xs',
+                    isCurrent && 'border-brand-300 bg-brand-50 font-medium',
+                    isPast && 'border-emerald-200 bg-emerald-50 text-emerald-700',
+                    !isCurrent && !isPast && 'border-slate-200 text-slate-500',
+                  )}
+                >
+                  <span className={cn('rounded px-1.5 py-0.5 text-[10px]', BudgetPhaseColor[p])}>{p}</span>
+                  <span className="truncate">{BudgetPhaseLabel[p]}</span>
+                  {isCurrent && <span className="ml-auto text-[10px] text-brand-700">● hiện tại</span>}
+                  {isPast && <span className="ml-auto text-[10px] text-emerald-600">✓</span>}
+                </div>
+              </li>
+            )
+          })}
+      </ol>
+
+      {next.length > 0 && (
+        <div>
+          <Label className="text-xs">Chuyển tiếp:</Label>
+          <div className="mt-1 flex flex-wrap gap-1.5">
+            {next.map(p => (
+              <button
+                key={p}
+                onClick={() => setTarget(p)}
+                className={cn(
+                  'rounded border px-2 py-1 text-[11px] transition',
+                  p === BudgetPhase.TuChoi
+                    ? 'border-red-200 text-red-700 hover:bg-red-50'
+                    : p === BudgetPhase.DangSoanThao
+                    ? 'border-amber-300 text-amber-700 hover:bg-amber-50'
+                    : 'border-brand-300 text-brand-700 hover:bg-brand-50',
+                )}
+              >
+                → {BudgetPhaseLabel[p]}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {target !== null && (
+        <Dialog
+          open
+          onClose={() => setTarget(null)}
+          title={`Chuyển → ${BudgetPhaseLabel[target]}`}
+          footer={<>
+            <Button variant="ghost" onClick={() => setTarget(null)}>Hủy</Button>
+            <Button onClick={() => transition.mutate()} disabled={transition.isPending}>Xác nhận</Button>
+          </>}
+        >
+          <Label>Ghi chú (tùy chọn)</Label>
+          <Textarea value={comment} onChange={e => setComment(e.target.value)} rows={3} />
+        </Dialog>
+      )}
+
+      <div className="border-t border-slate-200 pt-4">
+        <BudgetApprovalsSection budget={budget} />
+      </div>
+
+      <div className="border-t border-slate-200 pt-4">
+        <BudgetHistorySection budget={budget} />
+      </div>
+    </div>
+  )
+}
+
+function isPastPhase(current: number, p: number, active: number[]): boolean {
+  const orderedIdx = active.indexOf(p)
+  const currentIdx = active.indexOf(current)
+  if (orderedIdx < 0 || currentIdx < 0) return false
+  return orderedIdx < currentIdx && p !== BudgetPhase.TuChoi
+}