[CLAUDE] FE: PE co gap PILL (do PRO / xanh CCM) dong bo moi danh sach + inbox

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-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>
+  )
+}