From 8e68ed1892ff09944d013aa17565749dd7bce086 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Fri, 19 Jun 2026 12:31:08 +0700
Subject: [PATCH] [CLAUDE] FE: PE co gap PILL (do PRO / xanh CCM) dong bo moi
 danh sach + inbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Surface co gap GAP tren MOI danh sach phieu de CEO/nguoi duyet thay urgency ngay tren danh sach khong can mo phieu (anh Kiet FDC). Cay danh sach: emoji -> pill labeled. Khung 'Danh sach phieu' cho duyet (Workspace + picker) + inbox 'phieu cho toi duyet': them pill (truoc day thieu). NEW PeUrgentChips.tsx single-source-of-truth (style khop badge detail S69) x2 app. FE-only, 0 BE, 0 migration — DTO da co IsUrgentByPro/Ccm tu S69 Mig 53. Build PASS x2.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 fe-admin/src/components/pe/PeListPanel.tsx    |  6 ++-
 fe-admin/src/components/pe/PeUrgentChips.tsx  | 38 +++++++++++++++++++
 .../pages/pe/PurchaseEvaluationsListPage.tsx  |  6 +--
 fe-user/src/components/pe/PeListPanel.tsx     |  6 ++-
 fe-user/src/components/pe/PeUrgentChips.tsx   | 38 +++++++++++++++++++
 fe-user/src/pages/InboxPage.tsx               |  6 ++-
 .../pages/pe/PurchaseEvaluationsListPage.tsx  |  6 +--
 7 files changed, 96 insertions(+), 10 deletions(-)
 create mode 100644 fe-admin/src/components/pe/PeUrgentChips.tsx
 create mode 100644 fe-user/src/components/pe/PeUrgentChips.tsx

diff --git a/fe-admin/src/components/pe/PeListPanel.tsx b/fe-admin/src/components/pe/PeListPanel.tsx
index 0180704..7b9abba 100644
--- a/fe-admin/src/components/pe/PeListPanel.tsx
+++ b/fe-admin/src/components/pe/PeListPanel.tsx
@@ -25,6 +25,7 @@ import {
   isEditablePhase,
   type PeListItem,
 } from '@/types/purchaseEvaluation'
+import { PeUrgentChips } from '@/components/pe/PeUrgentChips'
 
 export function PeListPanel({
   typeFilter,
@@ -155,7 +156,10 @@ export function PeListPanel({
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="min-w-0 flex-1">
-                    <div className="truncate text-[13px] font-medium text-slate-900">{p.tenGoiThau}</div>
+                    <div className="flex min-w-0 items-center gap-1 text-[13px] font-medium text-slate-900">
+                      <PeUrgentChips isUrgentByPro={p.isUrgentByPro} isUrgentByCcm={p.isUrgentByCcm} />
+                      <span className="truncate">{p.tenGoiThau}</span>
+                    </div>
                     <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                       <span className="font-mono">{p.maPhieu ?? '—'}</span>
                       <span>·</span>
diff --git a/fe-admin/src/components/pe/PeUrgentChips.tsx b/fe-admin/src/components/pe/PeUrgentChips.tsx
new file mode 100644
index 0000000..9f05a5e
--- /dev/null
+++ b/fe-admin/src/components/pe/PeUrgentChips.tsx
@@ -0,0 +1,38 @@
+// PE — chip cờ gấp: 🔴 GẤP (PRO) / 🟢 GẤP (CCM).
+// SINGLE SOURCE OF TRUTH cho pill cờ gấp dùng ở MỌI danh sách phiếu (cây danh
+// sách + picker workspace/chờ-duyệt + inbox) để CEO/người duyệt nhìn thấy
+// urgency "từ ngoài" mà KHÔNG cần mở phiếu (anh Kiệt FDC, S77). Style khớp badge
+// header PeDetailTabs (đã live S69) → đồng bộ toàn app, đổi 1 chỗ áp mọi nơi.
+import { cn } from '@/lib/cn'
+
+export function PeUrgentChips({
+  isUrgentByPro,
+  isUrgentByCcm,
+  className,
+}: {
+  isUrgentByPro?: boolean
+  isUrgentByCcm?: boolean
+  className?: string
+}) {
+  if (!isUrgentByPro && !isUrgentByCcm) return null
+  return (
+    <span className={cn('inline-flex shrink-0 items-center gap-1', className)}>
+      {isUrgentByPro && (
+        <span
+          className="inline-flex shrink-0 items-center rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-semibold text-red-700"
+          title="GẤP — Phòng Cung ứng (PRO) đánh dấu"
+        >
+          🔴 GẤP (PRO)
+        </span>
+      )}
+      {isUrgentByCcm && (
+        <span
+          className="inline-flex shrink-0 items-center rounded bg-green-100 px-1.5 py-0.5 text-[11px] font-semibold text-green-700"
+          title="GẤP — Phòng Kiểm soát chi phí (CCM) đánh dấu"
+        >
+          🟢 GẤP (CCM)
+        </span>
+      )}
+    </span>
+  )
+}
diff --git a/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx b/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
index 95d2a83..c11a922 100644
--- a/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
+++ b/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
@@ -26,6 +26,7 @@ import {
   type PeListItem,
 } from '@/types/purchaseEvaluation'
 import { PeDetailTabs } from '@/components/pe/PeDetailTabs'
+import { PeUrgentChips } from '@/components/pe/PeUrgentChips'
 import { PeWorkflowPanel } from '@/components/pe/PeWorkflowPanel'
 
 export function PurchaseEvaluationsListPage() {
@@ -350,9 +351,8 @@ export function PurchaseEvaluationsListPage() {
                                             {/* Plan AG6 — compact card 3 row: title+badge / mã+time / drafter+dept+contract */}
                                             <div className="flex items-start justify-between gap-2">
                                               <div className="flex min-w-0 flex-1 items-center gap-1 truncate text-[13px] font-medium text-slate-900">
-                                                {/* S69 — chấm gấp: ĐỎ (PRO) / XANH-lá (CCM) cạnh tên gói. */}
-                                                {p.isUrgentByPro && <span className="shrink-0 text-[11px]" title="GẤP — Phòng Cung ứng (PRO)">🔴</span>}
-                                                {p.isUrgentByCcm && <span className="shrink-0 text-[11px]" title="GẤP — Phòng Kiểm soát chi phí (CCM)">🟢</span>}
+                                                {/* S77 — cờ gấp PILL đồng bộ mọi danh sách: 🔴 GẤP (PRO) / 🟢 GẤP (CCM). */}
+                                                <PeUrgentChips isUrgentByPro={p.isUrgentByPro} isUrgentByCcm={p.isUrgentByCcm} />
                                                 <span className="truncate">{p.tenGoiThau}</span>
                                               </div>
                                               <span
diff --git a/fe-user/src/components/pe/PeListPanel.tsx b/fe-user/src/components/pe/PeListPanel.tsx
index 0180704..7b9abba 100644
--- a/fe-user/src/components/pe/PeListPanel.tsx
+++ b/fe-user/src/components/pe/PeListPanel.tsx
@@ -25,6 +25,7 @@ import {
   isEditablePhase,
   type PeListItem,
 } from '@/types/purchaseEvaluation'
+import { PeUrgentChips } from '@/components/pe/PeUrgentChips'
 
 export function PeListPanel({
   typeFilter,
@@ -155,7 +156,10 @@ export function PeListPanel({
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="min-w-0 flex-1">
-                    <div className="truncate text-[13px] font-medium text-slate-900">{p.tenGoiThau}</div>
+                    <div className="flex min-w-0 items-center gap-1 text-[13px] font-medium text-slate-900">
+                      <PeUrgentChips isUrgentByPro={p.isUrgentByPro} isUrgentByCcm={p.isUrgentByCcm} />
+                      <span className="truncate">{p.tenGoiThau}</span>
+                    </div>
                     <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                       <span className="font-mono">{p.maPhieu ?? '—'}</span>
                       <span>·</span>
diff --git a/fe-user/src/components/pe/PeUrgentChips.tsx b/fe-user/src/components/pe/PeUrgentChips.tsx
new file mode 100644
index 0000000..9f05a5e
--- /dev/null
+++ b/fe-user/src/components/pe/PeUrgentChips.tsx
@@ -0,0 +1,38 @@
+// PE — chip cờ gấp: 🔴 GẤP (PRO) / 🟢 GẤP (CCM).
+// SINGLE SOURCE OF TRUTH cho pill cờ gấp dùng ở MỌI danh sách phiếu (cây danh
+// sách + picker workspace/chờ-duyệt + inbox) để CEO/người duyệt nhìn thấy
+// urgency "từ ngoài" mà KHÔNG cần mở phiếu (anh Kiệt FDC, S77). Style khớp badge
+// header PeDetailTabs (đã live S69) → đồng bộ toàn app, đổi 1 chỗ áp mọi nơi.
+import { cn } from '@/lib/cn'
+
+export function PeUrgentChips({
+  isUrgentByPro,
+  isUrgentByCcm,
+  className,
+}: {
+  isUrgentByPro?: boolean
+  isUrgentByCcm?: boolean
+  className?: string
+}) {
+  if (!isUrgentByPro && !isUrgentByCcm) return null
+  return (
+    <span className={cn('inline-flex shrink-0 items-center gap-1', className)}>
+      {isUrgentByPro && (
+        <span
+          className="inline-flex shrink-0 items-center rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-semibold text-red-700"
+          title="GẤP — Phòng Cung ứng (PRO) đánh dấu"
+        >
+          🔴 GẤP (PRO)
+        </span>
+      )}
+      {isUrgentByCcm && (
+        <span
+          className="inline-flex shrink-0 items-center rounded bg-green-100 px-1.5 py-0.5 text-[11px] font-semibold text-green-700"
+          title="GẤP — Phòng Kiểm soát chi phí (CCM) đánh dấu"
+        >
+          🟢 GẤP (CCM)
+        </span>
+      )}
+    </span>
+  )
+}
diff --git a/fe-user/src/pages/InboxPage.tsx b/fe-user/src/pages/InboxPage.tsx
index 2eb6b74..ebaf876 100644
--- a/fe-user/src/pages/InboxPage.tsx
+++ b/fe-user/src/pages/InboxPage.tsx
@@ -25,6 +25,7 @@ import {
   PurchaseEvaluationTypeLabel,
   type PeListItem,
 } from '@/types/purchaseEvaluation'
+import { PeUrgentChips } from '@/components/pe/PeUrgentChips'
 
 const fmtMoney = (v: number) => v.toLocaleString('vi-VN')
 
@@ -285,8 +286,9 @@ export function InboxPage() {
                         >
                           <div className="flex items-start justify-between gap-2">
                             <div className="min-w-0 flex-1">
-                              <div className="truncate text-[13px] font-medium text-slate-900">
-                                {p.tenGoiThau}
+                              <div className="flex min-w-0 items-center gap-1 text-[13px] font-medium text-slate-900">
+                                <PeUrgentChips isUrgentByPro={p.isUrgentByPro} isUrgentByCcm={p.isUrgentByCcm} />
+                                <span className="truncate">{p.tenGoiThau}</span>
                               </div>
                               <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                                 <span className="font-mono">{p.maPhieu ?? '—'}</span>
diff --git a/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx b/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
index 95d2a83..c11a922 100644
--- a/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
+++ b/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
@@ -26,6 +26,7 @@ import {
   type PeListItem,
 } from '@/types/purchaseEvaluation'
 import { PeDetailTabs } from '@/components/pe/PeDetailTabs'
+import { PeUrgentChips } from '@/components/pe/PeUrgentChips'
 import { PeWorkflowPanel } from '@/components/pe/PeWorkflowPanel'
 
 export function PurchaseEvaluationsListPage() {
@@ -350,9 +351,8 @@ export function PurchaseEvaluationsListPage() {
                                             {/* Plan AG6 — compact card 3 row: title+badge / mã+time / drafter+dept+contract */}
                                             <div className="flex items-start justify-between gap-2">
                                               <div className="flex min-w-0 flex-1 items-center gap-1 truncate text-[13px] font-medium text-slate-900">
-                                                {/* S69 — chấm gấp: ĐỎ (PRO) / XANH-lá (CCM) cạnh tên gói. */}
-                                                {p.isUrgentByPro && <span className="shrink-0 text-[11px]" title="GẤP — Phòng Cung ứng (PRO)">🔴</span>}
-                                                {p.isUrgentByCcm && <span className="shrink-0 text-[11px]" title="GẤP — Phòng Kiểm soát chi phí (CCM)">🟢</span>}
+                                                {/* S77 — cờ gấp PILL đồng bộ mọi danh sách: 🔴 GẤP (PRO) / 🟢 GẤP (CCM). */}
+                                                <PeUrgentChips isUrgentByPro={p.isUrgentByPro} isUrgentByCcm={p.isUrgentByCcm} />
                                                 <span className="truncate">{p.tenGoiThau}</span>
                                               </div>
                                               <span