[CLAUDE] FE-Admin+Domain+Infra+App: Workflows tab → sidebar menu items

User request: 7 tab trong /system/workflows thành menu items riêng.

Domain:
- MenuKeys.WorkflowTypeLeaf(code) helper — `Wf_<TypeCode>` pattern

Infrastructure (DbInitializer):
- Seed 7 leaves dưới Workflows group (order 95..101), label matches
  ContractType (HĐ Thầu phụ / Giao khoán / NCC / Dịch vụ / Mua bán /
  Nguyên tắc NCC / Nguyên tắc Dịch vụ). Idempotent.

Application (GetMyMenuTreeQuery):
- Generalized inherit-perm logic: descendants of Contracts AND Workflows
  inherit parent CanRead flag. Single Workflows.Read grant → all 7
  Wf_* leaves visible; no per-leaf permission rows needed.

FE Layout (admin):
- resolvePath: Wf_<Code> → /system/workflows/<code>. Ct_* still hidden
  on admin side.

FE App.tsx:
- New route /system/workflows/:typeCode?

FE WorkflowsPage:
- Removed horizontal tab bar; type selection now comes từ URL param.
- Landing view (no param): 3-col grid card per type với active version
  badge — so admin có visual overview khi click top-level Workflows
  group without selecting a type.
- TYPE_CODE_TO_INT map drives URL→int conversion.

Result: click `Quy trình HĐ > HĐ Mua bán` trong sidebar → opens
/system/workflows/MuaBan directly với designer scoped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fe-admin/src/App.tsx

@@ -37,6 +37,7 @@ function App() {
             <Route path="/system/users" element={<UsersPage />} />
             <Route path="/system/permissions" element={<PermissionsPage />} />
             <Route path="/system/workflows" element={<WorkflowsPage />} />
+            <Route path="/system/workflows/:typeCode" element={<WorkflowsPage />} />
             <Route path="/forms" element={<FormsPage />} />
             <Route path="/contracts" element={<ContractsListPage />} />
             <Route path="/contracts/new" element={<ContractCreatePage />} />

fe-admin/src/components/Layout.tsx

@@ -52,11 +52,19 @@ function resolvePath(key: string): string | null {
     if (action === 'Create') return `/contracts/new?type=${typeInt}`
     if (action === 'Pending') return `/contracts?type=${typeInt}&pendingMe=1`
   }
+
+  // Workflow admin per ContractType: Wf_<Code> → /system/workflows/<code>
+  const wfMatch = key.match(/^Wf_(.+)$/)
+  if (wfMatch) {
+    const code = wfMatch[1]
+    if (TYPE_CODE_TO_INT[code]) return `/system/workflows/${code}`
+  }
+
   return null
 }
 
-// Admin side: hide the per-ContractType submenu (Ct_*) — that's a user-app
-// concern. Admin manages workflow config via /system/workflows instead.
+// Admin side: hide the per-ContractType contract submenu (Ct_*) — that's a
+// user-app concern. Keep Wf_* workflow-admin leaves.
 function isAdminHidden(key: string): boolean {
   return key.startsWith('Ct_')
 }

fe-admin/src/pages/system/WorkflowsPage.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type FormEvent } from 'react'
+import { useParams } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { GitBranch, Plus, Trash2, CheckCircle2, Info, History } from 'lucide-react'
 import { toast } from 'sonner'
@@ -63,16 +64,31 @@ function copyFromDefinition(d: DefinitionDto): EditStep[] {
 
 // ===== Page =====
 
+// Map URL type code → int. Mirror Wf_<Code> menu key.
+const TYPE_CODE_TO_INT: Record<string, number> = {
+  ThauPhu: 1,
+  GiaoKhoan: 2,
+  NhaCungCap: 3,
+  DichVu: 4,
+  MuaBan: 5,
+  NguyenTacNcc: 6,
+  NguyenTacDv: 7,
+}
+
 export function WorkflowsPage() {
   const qc = useQueryClient()
+  const { typeCode } = useParams<{ typeCode?: string }>()
   const overview = useQuery({
     queryKey: ['workflow-overview'],
     queryFn: async () => (await api.get<{ types: TypeSummaryDto[] }>('/workflows')).data,
   })
 
-  const [activeType, setActiveType] = useState<number | null>(null)
-  const tab = activeType ?? overview.data?.types[0]?.contractType ?? 1
-  const currentType = overview.data?.types.find(t => t.contractType === tab)
+  // URL drives which type to show. `/system/workflows` (no param) → show
+  // landing hint to pick from sidebar; `/system/workflows/<code>` → open that.
+  const selectedTypeInt = typeCode ? TYPE_CODE_TO_INT[typeCode] : null
+  const currentType = selectedTypeInt
+    ? overview.data?.types.find(t => t.contractType === selectedTypeInt)
+    : null
 
   return (
     <div className="p-6">
@@ -80,38 +96,41 @@ export function WorkflowsPage() {
         title={
           <span className="flex items-center gap-2">
             <GitBranch className="h-5 w-5" />
-            Quy trình duyệt hợp đồng
+            {currentType ? `Quy trình: ${currentType.contractTypeLabel}` : 'Quy trình duyệt hợp đồng'}
           </span>
         }
-        description="Mỗi loại HĐ có quy trình riêng, hỗ trợ versioning. Tạo version mới → HĐ tương lai chạy theo. HĐ cũ vẫn giữ quy trình cũ."
+        description={
+          currentType
+            ? 'Tạo version mới → HĐ tương lai dùng. HĐ đã tạo giữ version cũ (pinned lúc tạo).'
+            : 'Chọn loại HĐ từ menu bên trái để xem + chỉnh quy trình duyệt.'
+        }
       />
 
-      {/* Tabs */}
-      {overview.data && (
-        <div className="mb-5 flex gap-1 overflow-x-auto border-b border-slate-200">
+      {overview.isLoading && <div className="text-sm text-slate-500">Đang tải…</div>}
+
+      {/* Landing: no type picked yet */}
+      {overview.data && !currentType && (
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
           {overview.data.types.map(t => (
-            <button
-              key={t.contractType}
-              onClick={() => setActiveType(t.contractType)}
-              className={`shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition ${
-                tab === t.contractType
-                  ? 'border-brand-600 text-brand-700'
-                  : 'border-transparent text-slate-500 hover:text-slate-800'
-              }`}
-            >
-              {t.contractTypeLabel}
-              {t.active && (
-                <span className="ml-2 rounded bg-brand-50 px-1.5 py-0.5 font-mono text-[10px] text-brand-700">
-                  v{String(t.active.version).padStart(2, '0')}
-                </span>
-              )}
-            </button>
+            <div key={t.contractType} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+              <div className="flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-slate-800">{t.contractTypeLabel}</h3>
+                {t.active && (
+                  <span className="rounded bg-brand-50 px-2 py-0.5 font-mono text-[10px] font-medium text-brand-700">
+                    {t.active.code} v{String(t.active.version).padStart(2, '0')}
+                  </span>
+                )}
+              </div>
+              <div className="mt-2 text-xs text-slate-500">
+                {t.active
+                  ? `${t.active.steps.length} bước · ${t.history.length} version${t.history.length > 1 ? 's' : ''}`
+                  : 'Chưa có quy trình'}
+              </div>
+            </div>
           ))}
         </div>
       )}
 
-      {overview.isLoading && <div className="text-sm text-slate-500">Đang tải…</div>}
-
       {currentType && <TypePanel type={currentType} onSaved={() => qc.invalidateQueries({ queryKey: ['workflow-overview'] })} />}
     </div>
   )

src/Backend/SolutionErp.Application/Permissions/Queries/GetMyMenuTree/GetMyMenuTreeQuery.cs

@@ -46,31 +46,38 @@ public class GetMyMenuTreeQueryHandler(
                 Update: g.Any(p => p.CanUpdate),
                 Delete: g.Any(p => p.CanDelete)));
 
-        // Build tree. Children of `Contracts` (type submenu) inherit parent's
-        // permission so we don't need per-subitem permission rows. This keeps
-        // the permission matrix clean while allowing deep menu structures for
-        // pure navigation.
-        var (contractsRead, contractsCreate, contractsUpdate, contractsDelete) =
-            resolved.TryGetValue(MenuKeys.Contracts, out var cf) ? cf : (false, false, false, false);
+        // Build tree. Descendants of certain roots inherit parent perms so
+        // we don't add per-subitem permission rows for pure-navigation menus.
+        // Keys: `Contracts` (Ct_* subitems) and `Workflows` (Wf_* subitems).
+        (bool Read, bool Create, bool Update, bool Delete) GetFlags(string key) =>
+            resolved.TryGetValue(key, out var f) ? f : (false, false, false, false);
 
-        List<MenuNodeDto> BuildChildren(string? parentKey, bool inheritContractsPerm) => menus
+        var contractsFlags = GetFlags(MenuKeys.Contracts);
+        var workflowsFlags = GetFlags(MenuKeys.Workflows);
+
+        List<MenuNodeDto> BuildChildren(string? parentKey, string? inheritFromKey) => menus
             .Where(m => m.ParentKey == parentKey)
             .Select(m =>
             {
                 var flags = resolved.TryGetValue(m.Key, out var f) ? f : (false, false, false, false);
-                // If this node is a descendant of Contracts and has no explicit
-                // perms, take parent Contracts perms.
-                if (inheritContractsPerm && !resolved.ContainsKey(m.Key))
-                    flags = (contractsRead, contractsCreate, contractsUpdate, contractsDelete);
+                if (inheritFromKey is not null && !resolved.ContainsKey(m.Key))
+                {
+                    flags = inheritFromKey == MenuKeys.Contracts ? contractsFlags : workflowsFlags;
+                }
+
+                // Propagate inheritance downward from Contracts/Workflows roots
+                var nextInherit = inheritFromKey
+                    ?? (m.Key == MenuKeys.Contracts ? MenuKeys.Contracts
+                        : m.Key == MenuKeys.Workflows ? MenuKeys.Workflows
+                        : null);
 
-                var childInherits = inheritContractsPerm || m.Key == MenuKeys.Contracts;
                 return new MenuNodeDto(m.Key, m.Label, m.ParentKey, m.Order, m.Icon,
                     flags.Item1, flags.Item2, flags.Item3, flags.Item4,
-                    BuildChildren(m.Key, childInherits));
+                    BuildChildren(m.Key, nextInherit));
             })
             .ToList();
 
-        var tree = BuildChildren(null, inheritContractsPerm: false);
+        var tree = BuildChildren(null, inheritFromKey: null);
 
         // Filter: chỉ trả về node có CanRead=true (hoặc có child CanRead=true)
         static bool HasAccess(MenuNodeDto n) => n.CanRead || n.Children.Any(HasAccess);

src/Backend/SolutionErp.Domain/Identity/MenuKeys.cs

@@ -31,6 +31,10 @@ public static class MenuKeys
     public static string ContractTypeCreate(string typeCode) => $"Ct_{typeCode}_Create";
     public static string ContractTypePending(string typeCode) => $"Ct_{typeCode}_Pending";
 
+    // Workflow admin per ContractType — sub-menu dưới `Workflows`, click leaf
+    // → mở /system/workflows/{typeCode} (filter theo type thay vì tab).
+    public static string WorkflowTypeLeaf(string typeCode) => $"Wf_{typeCode}";
+
     public static readonly string[] All =
     [
         Dashboard,

src/Backend/SolutionErp.Infrastructure/Persistence/DbInitializer.cs

@@ -207,6 +207,15 @@ public static class DbInitializer
             tree.Add((MenuKeys.ContractTypePending(code),"Duyệt",     MenuKeys.ContractTypeGroup(code),  order++, "CheckCircle2"));
         }
 
+        // Per-type workflow admin leaves dưới `Workflows` — mỗi loại là 1
+        // menu item, click vào → mở designer scoped cho loại đó.
+        var wfOrder = 95;
+        foreach (var code in MenuKeys.ContractTypeCodes)
+        {
+            var label = typeLabels.GetValueOrDefault(code, code);
+            tree.Add((MenuKeys.WorkflowTypeLeaf(code), label, MenuKeys.Workflows, wfOrder++, "FileText"));
+        }
+
         var existingKeys = await db.MenuItems.Select(m => m.Key).ToListAsync();
         var added = 0;
         foreach (var (key, label, parent, o, icon) in tree)