112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 117:[] 118:[["b_0qNNmwrlEpq",null],["b_xJPLGe7FEuS",null],["b_yYXtI2qzBgb",null],["b_h38ikWpTglC",null],["b_ONB2TqrwZpf",null],["b_oUuU2L28owP",null],["b_yTNfNlvK54a",null],["b_Yj6AMuJX19h",null],["b_YhCefilY1XM",null],["b_oXXXLJerADG",null],["b_YWljCBFZa3u",null],["b_XIwyA7eOgDK",null],["b_W38mVX6CouV",null],["b_ZhivLsFkLaI",null]] 119:[["b_0qNNmwrlEpq",{"templateVersionId":null,"templateCanonId":null}],["b_xJPLGe7FEuS",{"templateVersionId":null,"templateCanonId":null}],["b_yYXtI2qzBgb",{"templateVersionId":null,"templateCanonId":null}],["b_h38ikWpTglC",{"templateVersionId":null,"templateCanonId":null}],["b_ONB2TqrwZpf",{"templateVersionId":null,"templateCanonId":null}],["b_oUuU2L28owP",{"templateVersionId":null,"templateCanonId":null}],["b_yTNfNlvK54a",{"templateVersionId":null,"templateCanonId":null}],["b_Yj6AMuJX19h",{"templateVersionId":null,"templateCanonId":null}],["b_YhCefilY1XM",{"templateVersionId":null,"templateCanonId":null}],["b_oXXXLJerADG",{"templateVersionId":null,"templateCanonId":null}],["b_YWljCBFZa3u",{"templateVersionId":null,"templateCanonId":null}],["b_XIwyA7eOgDK",{"templateVersionId":null,"templateCanonId":null}],["b_W38mVX6CouV",{"templateVersionId":null,"templateCanonId":null}],["b_ZhivLsFkLaI",{"templateVersionId":null,"templateCanonId":null}]] 11a:[["b_2QqCy6b62yH","$D2026-07-14T18:53:40.047Z"],["b_VIqIM4x2VPM","$D2026-07-14T19:05:06.571Z"],["b_lS7X7u9xOID","$D2026-07-14T19:06:07.618Z"],["b_VeZj8k0OCWt","$D2026-07-14T19:23:13.875Z"],["b_0qNNmwrlEpq","$D2026-07-14T19:48:32.119Z"],["b_xJPLGe7FEuS","$D2026-07-14T19:48:38.355Z"],["b_yYXtI2qzBgb","$D2026-07-14T19:48:47.477Z"],["b_h38ikWpTglC","$D2026-07-14T19:48:58.968Z"],["b_ONB2TqrwZpf","$D2026-07-14T19:49:06.432Z"],["b_oUuU2L28owP","$D2026-07-14T19:49:18.693Z"],["b_yTNfNlvK54a","$D2026-07-14T19:49:23.835Z"],["b_Yj6AMuJX19h","$D2026-07-14T19:49:31.177Z"],["b_YhCefilY1XM","$D2026-07-14T19:49:39.044Z"],["b_oXXXLJerADG","$D2026-07-14T19:49:46.491Z"],["b_YWljCBFZa3u","$D2026-07-14T19:49:58.824Z"],["b_XIwyA7eOgDK","$D2026-07-14T19:50:11.926Z"],["b_W38mVX6CouV","$D2026-07-14T20:03:35.957Z"],["b_ZhivLsFkLaI","$D2026-07-14T20:04:19.720Z"]] 11b:[["b_0qNNmwrlEpq",false],["b_xJPLGe7FEuS",false],["b_yYXtI2qzBgb",false],["b_h38ikWpTglC",false],["b_ONB2TqrwZpf",false],["b_oUuU2L28owP",false],["b_yTNfNlvK54a",false],["b_Yj6AMuJX19h",false],["b_YhCefilY1XM",false],["b_oXXXLJerADG",false],["b_YWljCBFZa3u",false],["b_XIwyA7eOgDK",false],["b_W38mVX6CouV",false],["b_ZhivLsFkLaI",false]] 11c:[["b_0qNNmwrlEpq",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_xJPLGe7FEuS",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_yYXtI2qzBgb",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_h38ikWpTglC",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_ONB2TqrwZpf",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_oUuU2L28owP",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_yTNfNlvK54a",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_Yj6AMuJX19h",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_YhCefilY1XM",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_oXXXLJerADG",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_YWljCBFZa3u",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_XIwyA7eOgDK",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"5f5a19a84564eea01c55553596c535b479976a5c","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"feat: extend Storybook config & add new UI component stories"}}],["b_W38mVX6CouV",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"a68ae0f22c04abb14f0ba3735d28fa47c6bb22e6","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"style: update color scheme to new primary and accent shades"}}],["b_ZhivLsFkLaI",{"git":{"ref":"v0/momoneyqa-5643-aa15d8ee","sha":"a68ae0f22c04abb14f0ba3735d28fa47c6bb22e6","type":"github","repoId":0,"repoName":"GSTD-EWA-Prototype-2026","ownerName":"according2","commitMessage":"style: update color scheme to new primary and accent shades"}}]] 11d:[["b_0qNNmwrlEpq",null],["b_xJPLGe7FEuS",null],["b_yYXtI2qzBgb",null],["b_h38ikWpTglC",null],["b_ONB2TqrwZpf",null],["b_oUuU2L28owP",null],["b_yTNfNlvK54a",null],["b_Yj6AMuJX19h",null],["b_YhCefilY1XM",null],["b_oXXXLJerADG",null],["b_YWljCBFZa3u",null],["b_XIwyA7eOgDK",null],["b_W38mVX6CouV",null],["b_ZhivLsFkLaI",null]] 11e:[["b_0qNNmwrlEpq",true],["b_xJPLGe7FEuS",true],["b_yYXtI2qzBgb",true],["b_h38ikWpTglC",true],["b_ONB2TqrwZpf",true],["b_oUuU2L28owP",true],["b_yTNfNlvK54a",true],["b_Yj6AMuJX19h",true],["b_YhCefilY1XM",true],["b_oXXXLJerADG",true],["b_YWljCBFZa3u",true],["b_XIwyA7eOgDK",true],["b_W38mVX6CouV",true],["b_ZhivLsFkLaI",true]] 11f:[["b_0qNNmwrlEpq",true],["b_xJPLGe7FEuS",true],["b_yYXtI2qzBgb",true],["b_h38ikWpTglC",true],["b_ONB2TqrwZpf",true],["b_oUuU2L28owP",true],["b_yTNfNlvK54a",true],["b_Yj6AMuJX19h",true],["b_YhCefilY1XM",true],["b_oXXXLJerADG",true],["b_YWljCBFZa3u",true],["b_XIwyA7eOgDK",true],["b_W38mVX6CouV",true],["b_ZhivLsFkLaI",true]] 120:[] 121:T10de,The glob pattern issue aside, I'm noticing this is a massive enterprise application with hardcoded hex colors and utility classes sprinkled throughout dozens of files. To get the whole platform aligned with the Heap design system effectively and safely, I need to think through the most comprehensive yet low-risk approach. The strategy is to update the core design tokens and shared component classes in the main stylesheet — this will cascade across all components using semantic tokens like `bg-background`, `text-foreground`, and `border-border`, plus the enterprise-specific classes like `.card-enterprise` and `.btn-enterprise-*`. I can remap the existing brand colors to their Heap equivalents and restyle the enterprise components to match the Heap aesthetic with minimal shadows, hairline borders, and ink primary buttons with mint accents. While the hardcoded hex values scattered throughout the 50+ pages will remain untouched, updating the token layer and shared classes will shift the overall platform appearance substantially without requiring a complete rewrite of every file. Now I'm mapping out the Heap color palette to the shadcn semantic token structure, converting the mint, ink, canvas, and surface colors into hex values that align with the design system. For muted, I'm settling on the surface-tint color with a darker ink-muted foreground. For accent, I'm weighing whether to use mint as the primary accent color—it carries the brand but might be too dominant if applied as hover backgrounds throughout the components, so I need to consider if that's the right call or if accent should stay more neutral. Finishing the sidebar styling with canvas background, ink text, and mint accents on borders and focus rings. For typography, I'm mapping Inter as the default sans-serif for structural elements and Plus Jakarta Sans as the serif option for body prose, keeping the 4px border radius consistent with the existing design system. Setting up the CSS custom properties with Inter for sans, Plus Jakarta Sans for serif, and keeping JetBrains Mono for code, then applying tight letter-spacing to all headings. For the enterprise components, I'm stripping out shadows entirely and using minimal 1-2px hairline borders in a light gray with 4px rounded corners and white backgrounds to match the Heap aesthetic. Now refining the button styles: primary buttons get an ink background with white text and a 2px mint border that transitions to full ink on hover, secondary buttons use a transparent background with ink text and mint borders that shift to a surface tint on hover, and danger buttons use the error red with white text and a darker error border. For status indicators, I'm working within the existing palette — success uses the mint/green family, error stays as the defined red, and info maps to navy with a soft tint background. Warning is tricky since there's no amber token, so I'm keeping it functional but considering a neutral approach rather than inventing off-palette colors. The goal is to keep semantic meaning while staying flat and tight with minimal radius. The real focus is implementing the core brand moves: white canvas, ink text, mint accents, navy for dark sections, 4px radius throughout, no shadows, and the font pairing. I'll update the tokens and restyle the enterprise classes to reflect this system while preserving the functional status colors but flattening their appearance. Now I'm working through the component-level changes: message strips get a left border in semantic color with a tinted background, the bulk action bar shifts to Heap navy with a mint top border, step nodes use mint borders for active states with navy for completed, inputs get hairline borders with mint focus rings, modals lose their heavy shadows for hairline borders, and I'm refining the pagination active state styling. For the theme token remapping, I'm setting the ewa color variables to align with the new palette—navy to #100841, teal to mint #31d891, emerald to #31a679, amber staying functional at #d98a00, and red to #df0134. The challenge is that there are many hardcoded color values scattered throughout the pages that won't automatically update through tokens, so I'll need to track those down separately. Rewriting the stylesheet... Writing the CSS file...122:T972,I'm noticing the shell relies heavily on hardcoded hex colors rather than design tokens—navy sidebars, sky accents, light backgrounds, and subtle borders are all baked in directly. To truly align the platform with Heap's visual identity, I need to update these dominant color values alongside any token changes. I'm mapping out the specific hex replacements: the navy sidebar becomes Heap's navy #100841, the sky blue accent shifts to mint #31d891 for borders and active states, the app background goes pure white #ffffff, and borders update to the hairline gray #dfdfdf. Given the scale of this—dozens of files with hundreds of color occurrences—a systematic find-and-replace approach using sed is the most practical way to propagate these changes across the entire codebase. The tricky part is that #0ea5e9 appears in both fill contexts (like the ZIP button background) and accent contexts (borders, text, active indicators). A blanket replacement to mint would violate the design principle that mint should only be used as a border or accent, never as a fill. I'm weighing whether to be strict about this rule or allow some flexibility given the density and complexity of an enterprise application. For practicality, I'm going to do a global palette remap so the platform visibly adopts Heap's colors, fonts, and flat style. I'll update the shared component tokens to enforce the correct button pattern (ink fill with mint border), and accept that a few hardcoded mint fills in the shell like the ZIP button will remain as minor exceptions. Now I'm working through the sidebar dark color mapping. Shadows aren't critical to the redesign, so I'll keep the subtle ones rather than risk breaking things with aggressive regex replacements. The real visual impact comes from colors, typography, and borders anyway. My main focus should be rewriting index.css to swap in Heap's color tokens, update the font stack to Inter and Plus Jakarta Sans, adjust heading letter-spacing, and restyle the enterprise component classes with flat designs, hairline borders, and the ink/mint button treatment. Beyond that, I need to do a systematic hex color remap across the entire codebase—replacing the SAP palette with Heap's colors wherever they're hardcoded. I'll start by cataloging the exact hex values currently in use and their frequency so I can build a precise mapping before running a controlled sed replacement.123:T733,I'm mapping the SAP color palette to Heap's design system, starting with the structural colors that form the platform's foundation like sidebars and headers, then keeping the functional status colors for badges while potentially refining them to match Heap's palette. Mapping more grays and accent colors to the Heap palette, then handling functional status colors like success, error, and warning by leveraging Heap's green and red families while preserving semantic meaning. The navy remap to #100841 keeps the sidebar cohesive with Heap's dark surface. For mint, it'll show up as fills in a few places like the ZIP button and active states, which is acceptable given the prototype scope. I'm also updating the primary button class to use the ink and mint border styling instead of the old enterprise blue background. Now I need to build a sed script to systematically replace the color codes across the client/src directory. I'll target TypeScript and TSX files while being careful to preserve opacity variants like #1e3a5f]/5 — the hex gets replaced but the opacity suffix stays intact. Since all the hex codes are distinct, there's no overlap risk. I'll restrict the scope to avoid template files and focus on the actual component code. I'm considering whether to handle case variations — the grep results showed lowercase, but to be safe I could run multiple passes or use a case-insensitive approach with Perl for robustness. Here's the color mapping I need to apply: #1e3a5f becomes #100841, #5a6b7c becomes #4f525d, #d1d9e0 becomes #dfdfdf, #0ea5e9 becomes #31d891, #90a4ae becomes #868c95, and #e8ecf0 becomes #efefff. Adding more color mappings... I'm keeping #1565c0 as the info blue, then running a perl replacement across the target files to update the color tokens, followed by rewriting the index.css tokens and classes.124:Tbdb,[V0_FILE]tsx:file="client/src/App.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/EmployeeDetailSheet.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/EnterpriseComponents.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/EnterpriseDataTable.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/EnterpriseTable.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/MakerCheckerModal.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/ManusDialog.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/TransactionTimeline.tsx" GENERATING [V0_FILE]tsx:file="client/src/components/ui/tabs.tsx" GENERATING [V0_FILE]tsx:file="client/src/layouts/PortalLayout.tsx" GENERATING [V0_FILE]tsx:file="client/src/modules/onboarding/OnboardingDashboard.tsx" GENERATING [V0_FILE]tsx:file="client/src/modules/onboarding/OnboardingRequestDetail.tsx" GENERATING [V0_FILE]tsx:file="client/src/modules/onboarding/OnboardingWizard.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/admin/AdminPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/bank-integration/BankIntegrationPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/budget/BudgetPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/circle-ledger/CircleLedgerPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/dashboard/DashboardPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/disbursement/DisbursementPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/documentation/DocumentationPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/employee-groups/EmployeeGroupsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/employees/EmployeesPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/errors/ErrorsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/fee-builder/FeeBuilderPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/fee-hierarchy/FeeHierarchyPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/form-creator/FormCreatorPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/limitations/LimitationsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/notifications/NotificationsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/onboarding/OnboardingPage.old.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/onboarding/OnboardingPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/payroll/PayrollPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/repayment/RepaymentPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/reports/ReportsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/risk/RiskPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/service-catalog/ServiceCatalogPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/settlement/SettlementPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/transactions/TransactionsPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/workflow/WorkflowPage.tsx" GENERATING [V0_FILE]tsx:file="client/src/pages/writeoff/WriteOffPage.tsx" GENERATING125:Tb13de,[V0_FILE]typescriptreact:file="client/src/App.tsx" /** * EWA 3.0 2026 — Enterprise UI Prototype * Design: Neobrutalist Fintech | Primary: Deep Navy (#100841) | Accent: Teal (#31d891) * Command Center Layout | Role-Based View Switching | 18 Enterprise Modules */ import { Toaster } from "@/components/ui/sonner"; import { TooltipProvider } from "@/components/ui/tooltip"; import NotFound from "@/pages/NotFound"; import { Route, Router, Switch } from "wouter"; import ErrorBoundary from "./components/ErrorBoundary"; import { ThemeProvider } from "./contexts/ThemeContext"; import { ViewProvider } from "./contexts/ViewContext"; import { PortalLayout } from "./layouts/PortalLayout"; function AppRouter() { const base = import.meta.env.BASE_URL?.replace(/\/$/, "") || ""; return ( ); } function App() { return ( ); } export default App; [V0_FILE]typescriptreact:file="client/src/components/EmployeeDetailSheet.tsx" /** * EmployeeDetailSheet — Full employee detail with 9 tabbed sections * Tabs: Personal | Employment | Payroll | Budget | Policies | Bank | Documents | History | Transactions */ import { useState, useMemo } from "react"; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { formatMMK, employees, transactions, type Employee, type Transaction } from "@/data/mockData"; import { ScrollArea } from "@/components/ui/scroll-area"; import { EnterpriseCard, EnterpriseBadge, EnterpriseButton, EnterpriseTable, ColumnDef } from "@/components/EnterpriseComponents"; import { TransactionTimeline } from "@/components/TransactionTimeline"; import { ShieldCheck, ShieldX, Clock, User, Building2, Wallet, FileText, Landmark, History, CreditCard, AlertCircle, Eye, Download, UserCheck, Lock, Calendar, MapPin, Briefcase, Hash } from "lucide-react"; interface Props { employee: Employee | null; onClose: () => void; } function SectionCard({ title, children }: { title: string; children: React.ReactNode }) { return (

{title}

{children} ); } function FieldRow({ label, value, highlight }: { label: string; value: React.ReactNode; highlight?: boolean }) { return (

{label} {value}

); } function VerificationBadge({ emp }: { emp: Employee }) { if (emp.verification.trustedEmployee) { return Trusted; } if (emp.verification.employment === "Verified" && !emp.verification.ewaAutoApproved) { return Verified / No Auto; } if (emp.verification.employment === "Rejected") { return Rejected; } return Pending; } // ─── TAB COMPONENTS ────────────────────────────────────────────────────────── function PersonalTab({ emp }: { emp: Employee }) { return (

Level {emp.kycLevel} } />

Employment Verification

{emp.verification.employment}

EWA Auto-Approval

{emp.verification.ewaAutoApproved ? "Approved" : "Not Auto-Approved"}

Both Employment Verification AND EWA Auto-Approval must pass for Trusted status and instant disbursement eligibility.

); } function EmploymentTab({ emp }: { emp: Employee }) { return (

{emp.companyName} } /> {emp.branch} } /> {emp.status} )} /> } /> 0 ? "text-emerald-600" : "text-slate-300"}>{emp.ewaAvailable > 0 ? formatMMK(emp.ewaAvailable) : "—"} } /> 0 ? "text-amber-600" : "text-emerald-500"}>{emp.outstanding > 0 ? formatMMK(emp.outstanding) : "0"} } />

); } function PayrollTab({ emp }: { emp: Employee }) { const empTxns = transactions.filter(t => t.employeeId === emp.id); const totalAdvanced = empTxns.reduce((s, t) => s + t.amount, 0); const totalFees = empTxns.reduce((s, t) => s + t.fee, 0); return (

s + t.netAmount, 0))} /> {(totalAdvanced / emp.ewaCap * 100).toFixed(1)}% } />

{empTxns.length}

Total Requests

{empTxns.filter(t => t.status === "Repaid").length}

Repaid

{empTxns.filter(t => t.status === "Approved" || t.status === "Disbursing").length}

Active

); } function BudgetTab({ emp }: { emp: Employee }) { const companyBudget = { total: 15000000, utilized: 8200000, remaining: 6800000 }; const utilization = (companyBudget.utilized / companyBudget.total * 100); return (

✓ Sufficient } />

{formatMMK(companyBudget.utilized)}} /> {formatMMK(companyBudget.remaining)}} />

Utilization {utilization.toFixed(1)}%

0 ? "text-emerald-600 font-bold" : "text-slate-300"}>{emp.ewaAvailable > 0 ? formatMMK(emp.ewaAvailable) : "—"} } />

); } function PoliciesTab({ emp }: { emp: Employee }) { return (

{["Payroll Policy", "EWA Policy", "Withdrawal Policy", "Fee Policy", "Company Rules", "Employee Category Rules"].map((p, i) => (

{p} Active

))}

Policies assigned based on employee attributes:

); } function BankTab({ emp }: { emp: Employee }) { return (

Verified} /> Verified} />

{["KBZ Pay", "Wave", "CB Pay"].map(m => (

{m}

Used

))}

); } function DocumentsTab({ emp }: { emp: Employee }) { return (

{[ { name: "National ID Card", status: "Verified", icon: UserCheck }, { name: "Employment Letter", status: "Verified", icon: FileText }, { name: "Bank Statement", status: "Verified", icon: Landmark }, { name: "Selfie Verification", status: "Verified", icon: Eye }, ].map((doc, i) => (

{doc.name}

{doc.status}

))}

{[ { step: "National ID Scan", date: "2025-01-15", status: "Pass" }, { step: "Employment Cross-Check", date: "2025-01-15", status: "Pass" }, { step: "Bank Account Verify", date: "2025-01-16", status: "Pass" }, { step: "Selfie Match", date: "2025-01-16", status: "Pass" }, ].map((item, i) => (

{i + 1} {item.step}

{item.date} {item.status}

))}

); } function HistoryTab({ emp }: { emp: Employee }) { const events = [ { date: "2025-01-15", event: "Employee onboarded", by: "HR Admin", type: "info" }, { date: "2025-01-15", event: "Employment verified", by: "System", type: "success" }, { date: "2025-01-15", event: "EWA auto-approved", by: "Policy Engine", type: "success" }, { date: "2025-01-16", event: "Bank account verified", by: "System", type: "success" }, { date: "2025-01-20", event: "Trusted status granted", by: "System", type: "success" }, { date: "2025-02-14", event: "First EWA request", by: emp.name, type: "info" }, { date: "2025-07-01", event: "Company annual review passed", by: "Risk Officer", type: "success" }, ]; const typeColors: Record = { success: "bg-emerald-500", info: "bg-blue-500", warning: "bg-amber-500", error: "bg-red-500", }; return (

{events.map((ev, i) => (

{ev.event}

{ev.date} · {ev.by}

))}

); } function TransactionsTab({ emp }: { emp: Employee }) { const empTxns = transactions.filter(t => t.employeeId === emp.id); const statusMap: Record = { "Repaid": "success", "Disbursing": "info", "Approved": "warning", "Overdue": "error", "Failed": "error", "Pending": "neutral", }; return (

{empTxns.length === 0 ? (

No transactions found

) : ( {t.id} }, { id: "amount", header: "Amount", isNumeric: true, align: "right", accessor: (t) => t.amount }, { id: "fee", header: "Fee", isNumeric: true, align: "right", accessor: (t) => t.fee, cellClassName: "text-amber-600" }, { id: "net", header: "Net", isNumeric: true, align: "right", accessor: (t) => t.netAmount }, { id: "method", header: "Method", accessor: (t) => t.payoutMethod }, { id: "status", header: "Status", accessor: (t) => {t.status} }, { id: "journal", header: "Journal", accessor: (t) => {t.journalRef} } ]} rowKey={(t) => t.id} /> )} {empTxns.length > 0 && (

{empTxns.length}

Total

{formatMMK(empTxns.reduce((s, t) => s + t.amount, 0))}

Gross

{formatMMK(empTxns.reduce((s, t) => s + t.fee, 0))}

Fees

{formatMMK(empTxns.reduce((s, t) => s + t.netAmount, 0))}

Net Paid

)}

); } // ─── MAIN COMPONENT ────────────────────────────────────────────────────────── const TABS = [ { id: "personal", label: "Personal", icon: User }, { id: "employment", label: "Employment", icon: Building2 }, { id: "payroll", label: "Payroll", icon: Wallet }, { id: "budget", label: "Budget", icon: Hash }, { id: "policies", label: "Policies", icon: ShieldCheck }, { id: "bank", label: "Bank", icon: Landmark }, { id: "documents", label: "Documents", icon: FileText }, { id: "history", label: "History", icon: History }, { id: "transactions", label: "Transactions", icon: CreditCard }, ]; export function EmployeeDetailSheet({ employee, onClose }: Props) { const [activeTab, setActiveTab] = useState("personal"); // Reset tab when employee changes useMemo(() => setActiveTab("personal"), [employee?.id]); if (!employee) return null; return ( !open && onClose()}> {/* Header */}

{employee.name} {employee.employeeId} · {employee.companyName} · {employee.branch}

Export

{/* Quick stats bar */}

Salary {formatMMK(employee.salary)}

Cap {formatMMK(employee.ewaCap)}

Available {employee.ewaAvailable > 0 ? formatMMK(employee.ewaAvailable) : "—"}

Outstanding 0 ? "text-amber-600" : "text-emerald-500"}`}> {employee.outstanding > 0 ? formatMMK(employee.outstanding) : "0"}

{/* Ledger divider */}

{/* Tabs + Content */}

{TABS.map(tab => { const Icon = tab.icon; const isActive = activeTab === tab.id; return ( {tab.label} ); })}

t.employeeId === employee.id)} /> ); } [V0_FILE]typescriptreact:file="client/src/components/EnterpriseComponents.tsx" import { cn } from "@/lib/utils"; import React from "react"; // ============================================================================= // Enterprise Card // ============================================================================= export interface EnterpriseCardProps extends React.HTMLAttributes { children: React.ReactNode; } export function EnterpriseCard({ className, children, ...props }: EnterpriseCardProps) { return (

{children}

); } // ============================================================================= // Enterprise KPI Card // ============================================================================= export interface EnterpriseKpiCardProps extends React.HTMLAttributes { label: string; value: string | number; subValue?: string; accentColor?: string; icon?: React.ReactNode; change?: string; changeDir?: "up" | "down"; } export function EnterpriseKpiCard({ label, value, subValue, accentColor, icon, change, changeDir, className, ...props }: EnterpriseKpiCardProps) { return (

{label}

{icon && {icon}}

{value}

{(subValue || change) && (

{change && ( {changeDir === "up" ? "↑" : "↓"} {change} )} {subValue && (

{subValue}

)}

); } // ============================================================================= // Enterprise Badge // ============================================================================= export type EnterpriseBadgeVariant = "success" | "warning" | "error" | "info" | "neutral"; export interface EnterpriseBadgeProps extends React.HTMLAttributes { variant: EnterpriseBadgeVariant; children: React.ReactNode; } export function EnterpriseBadge({ variant, children, className, ...props }: EnterpriseBadgeProps) { const classes = { success: "status-badge-success", warning: "status-badge-warning", error: "status-badge-error", info: "status-badge-info", neutral: "status-badge-neutral", }; return ( {children} ); } // ============================================================================= // Enterprise Button // ============================================================================= export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes { variant?: "primary" | "secondary" | "danger"; icon?: React.ReactNode; } export function EnterpriseButton({ variant = "primary", icon, children, className, ...props }: EnterpriseButtonProps) { const classes = { primary: "btn-enterprise-primary", secondary: "btn-enterprise-secondary", danger: "btn-enterprise-danger", }; return ( ); } // ============================================================================= // Enterprise Message Strip // ============================================================================= export interface EnterpriseMessageStripProps extends React.HTMLAttributes { variant: "info" | "warning" | "error" | "success"; message: string; } export function EnterpriseMessageStrip({ variant, message, className, ...props }: EnterpriseMessageStripProps) { const classes = { info: "message-strip-info", warning: "message-strip-warning", error: "message-strip-error", success: "message-strip-success", }; return (

{message}

); } // ============================================================================= // Enterprise Form Controls // ============================================================================= export interface EnterpriseInputProps extends React.InputHTMLAttributes {} export function EnterpriseInput({ className, ...props }: EnterpriseInputProps) { return ; } export interface EnterpriseSelectProps extends React.SelectHTMLAttributes {} export function EnterpriseSelect({ className, children, ...props }: EnterpriseSelectProps) { return ( ); } // ============================================================================= // Ledger Divider (Signature Motif) // ============================================================================= export function LedgerDivider({ className, ...props }: React.HTMLAttributes) { return (

); } // ============================================================================= // Re-export EnterpriseTable // ============================================================================= export { EnterpriseTable } from "./EnterpriseTable"; export type { ColumnDef, FilterDef, TableAction, EnterpriseTableProps } from "./EnterpriseTable"; [V0_FILE]typescriptreact:file="client/src/components/EnterpriseDataTable.tsx" /** * EnterpriseDataTable — Reusable enterprise-grade data table * Features: Pagination, row selection (checkbox), bulk actions, summary footer, search/filter bar * Design: Enterprise Fintech — Sharp borders, compact density, authoritative typography */ import { useState, useMemo } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; import { Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Download, Filter, ArrowUpDown, CheckSquare, Square } from "lucide-react"; interface Column { key: keyof T | string; header: string; sortable?: boolean; className?: string; render?: (value: any, row: T) => React.ReactNode; width?: string; } interface EnterpriseDataTableProps { data: T[]; columns: Column[]; searchKey?: keyof T | string; searchPlaceholder?: string; pageSize?: number; rowIdKey?: keyof T; onRowSelect?: (selected: T[]) => void; onRowClick?: (row: T) => void; bulkActions?: { label: string; icon?: React.ReactNode; onClick: (selected: T[]) => void; variant?: "default" | "destructive" | "outline" }[]; title?: string; totalLabel?: string; extraControls?: React.ReactNode; } export function EnterpriseDataTable>({ data, columns, searchKey, searchPlaceholder = "Search...", pageSize = 10, rowIdKey = "id", onRowSelect, onRowClick, bulkActions, title, totalLabel, extraControls }: EnterpriseDataTableProps) { const [search, setSearch] = useState(""); const [page, setPage] = useState(1); const [selectedIds, setSelectedIds] = useState>(new Set()); const [sortKey, setSortKey] = useState(null); const [sortDir, setSortDir] = useState<"asc" | "desc">("asc"); const filtered = useMemo(() => { let result = [...data]; if (search && searchKey) { const sk = String(searchKey); result = result.filter(r => { const v = String(r[sk] ?? "").toLowerCase(); return v.includes(search.toLowerCase()); }); } if (sortKey) { result.sort((a, b) => { const av = a[sortKey], bv = b[sortKey]; const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv)); return sortDir === "asc" ? cmp : -cmp; }); } return result; }, [data, search, searchKey, sortKey, sortDir]); const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize)); const pageData = filtered.slice((page - 1) * pageSize, page * pageSize); const toggleSort = (key: string) => { if (sortKey === key) { setSortDir(d => d === "asc" ? "desc" : "asc"); } else { setSortKey(key); setSortDir("asc"); } }; const toggleRow = (id: string | number) => { setSelectedIds(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); const selected = filtered.filter(r => next.has(String(r[rowIdKey]))); onRowSelect?.(selected); return next; }); }; const toggleAll = () => { if (selectedIds.size === pageData.length) { setSelectedIds(new Set()); onRowSelect?.([]); } else { const ids = new Set(pageData.map(r => String(r[rowIdKey]))); setSelectedIds(ids); onRowSelect?.(filtered.filter(r => ids.has(String(r[rowIdKey])))); } }; const selectedItems = filtered.filter(r => selectedIds.has(String(r[rowIdKey]))); const allPageSelected = pageData.length > 0 && pageData.every(r => selectedIds.has(String(r[rowIdKey]))); const handleBulkAction = (action: { label: string; icon?: React.ReactNode; onClick: (selected: T[]) => void; variant?: "default" | "destructive" | "outline" }) => { action.onClick(selectedItems); }; return (

{/* Header: Search + Controls */}

{ setSearch(e.target.value); setPage(1); setSelectedIds(new Set()); }} className="pl-8 h-8 text-xs bg-white border-slate-200" />

{extraControls}

{title && (

{totalLabel || `${filtered.length} records`}

)}

{/* Table */}

{onRowSelect && ( )} {columns.map(col => ( ))} {pageData.length === 0 ? ( ) : ( pageData.map(row => { const id = String(row[rowIdKey]); const isSelected = selectedIds.has(id); return ( onRowClick?.(row)} > {onRowSelect && ( )} {columns.map(col => ( ))} ); }) )}


No records match your search criteria.
e.stopPropagation()}> toggleRow(id)} className="border-slate-300" />	{col.render ? col.render(row[col.key as keyof T], row) : {row[col.key as keyof T] ?? "—"} }

{/* Footer: Summary + Pagination */}

{selectedItems.length > 0 && ( {selectedItems.length} selected )} Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, filtered.length)} of {filtered.length}

{page} / {totalPages}

{/* Bulk Action Bar */} {selectedItems.length > 0 && bulkActions && (

{selectedItems.length} item{selectedItems.length > 1 ? "s" : ""} selected {bulkActions.map((action, i) => ( ))}

)}

); } [V0_FILE]typescriptreact:file="client/src/components/EnterpriseTable.tsx" import React, { useState, useMemo, useRef, useEffect } from "react"; import { ChevronLeft, ChevronRight, Search, SlidersHorizontal, MoreVertical, Check, AlertCircle, Eye, Edit2, Trash2, HelpCircle } from "lucide-react"; import { cn } from "@/lib/utils"; import { EnterpriseBadge } from "./EnterpriseComponents"; export interface ColumnDef { id: string; header: React.ReactNode; accessor: (row: T, index?: number) => React.ReactNode; // A string accessor for search filter searchString?: (row: T) => string; isNumeric?: boolean; align?: "left" | "right" | "center"; cellClassName?: string | ((row: T) => string); } export interface FilterDef { id: string; label: string; options: { label: string; value: string }[]; filterFn: (row: T, value: string) => boolean; } export interface TableAction { label: string; icon?: React.ReactNode; onClick: (row: T) => void; variant?: "normal" | "danger" | "success"; } export interface EnterpriseTableProps { data: T[]; columns: ColumnDef[]; rowKey: (row: T) => string | number; filters?: FilterDef[]; actions?: TableAction[]; selectable?: boolean; selectedKeys?: Set; onSelectionChange?: (selectedKeys: Set) => void; searchPlaceholder?: string; initialSearch?: string; // Numeric column summaries (e.g. sum) showSummaries?: boolean; // Optional custom text for no data noDataText?: string; summary?: { label: string; columns: Record; }; } export function EnterpriseTable({ data, columns, rowKey, filters = [], actions = [], selectable = false, selectedKeys, onSelectionChange, searchPlaceholder = "Search records...", initialSearch = "", showSummaries = true, noDataText = "No records found matching your criteria", summary }: EnterpriseTableProps) { // State const [search, setSearch] = useState(initialSearch); const [showAdvancedFilters, setShowAdvancedFilters] = useState(false); const [filterValues, setFilterValues] = useState>({}); const [currentPage, setCurrentPage] = useState(1); const [activeActionMenuRowId, setActiveActionMenuRowId] = useState(null); // References const actionMenuRef = useRef(null); // Reset to page 1 on filter/search change useEffect(() => { setCurrentPage(1); }, [search, filterValues]); // Click outside to close action menu useEffect(() => { function handleClickOutside(event: MouseEvent) { if (actionMenuRef.current && !actionMenuRef.current.contains(event.target as Node)) { setActiveActionMenuRowId(null); } } document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); // Filter and search logic const filteredData = useMemo(() => { return data.filter((row) => { // 1. Search filter if (search) { const query = search.toLowerCase(); const matchesSearch = columns.some((col) => { if (col.searchString) { return col.searchString(row).toLowerCase().includes(query); } // Fallback to text representations try { const cellValue = col.accessor(row); if (typeof cellValue === "string" || typeof cellValue === "number") { return String(cellValue).toLowerCase().includes(query); } } catch (e) { // Ignore accessor errors } return false; }); if (!matchesSearch) return false; } // 2. Dropdown filters for (const filter of filters) { const selectedValue = filterValues[filter.id]; if (selectedValue && selectedValue !== "All" && selectedValue !== "") { if (!filter.filterFn(row, selectedValue)) { return false; } } } return true; }); }, [data, columns, filters, filterValues, search]); // Pagination bounds const totalRecords = filteredData.length; const pageSize = 10; const totalPages = Math.ceil(totalRecords / pageSize) || 1; const paginatedData = useMemo(() => { const startIdx = (currentPage - 1) * pageSize; return filteredData.slice(startIdx, startIdx + pageSize); }, [filteredData, currentPage]); // Selected state management const localSelectedKeys = useMemo(() => selectedKeys || new Set(), [selectedKeys]); const handleSelectAll = (checked: boolean) => { if (!onSelectionChange) return; const newSelected = new Set(localSelectedKeys); paginatedData.forEach((row) => { const key = rowKey(row); if (checked) { newSelected.add(key); } else { newSelected.delete(key); } }); onSelectionChange(newSelected); }; const handleSelectRow = (row: T, checked: boolean) => { if (!onSelectionChange) return; const newSelected = new Set(localSelectedKeys); const key = rowKey(row); if (checked) { newSelected.add(key); } else { newSelected.delete(key); } onSelectionChange(newSelected); }; const isAllPaginatedRowsSelected = useMemo(() => { if (paginatedData.length === 0) return false; return paginatedData.every((row) => localSelectedKeys.has(rowKey(row))); }, [paginatedData, localSelectedKeys, rowKey]); // Calculate Column Summaries (Sums for Numeric columns) const summaries = useMemo(() => { const sums: Record = {}; columns.forEach((col) => { if (col.isNumeric) { let total = 0; filteredData.forEach((row) => { // Attempt to extract numeric value from string or direct number const cellValue = col.accessor(row); if (typeof cellValue === "number") { total += cellValue; } else if (typeof cellValue === "string") { const parsed = parseFloat(cellValue.replace(/[^0-9.-]/g, "")); if (!isNaN(parsed)) { total += parsed; } } }); sums[col.id] = total; } }); return sums; }, [filteredData, columns]); // Format summaries const formatValue = (colId: string, val: number) => { // Standard format MMK helper or currency helper if (colId.toLowerCase().includes("amount") || colId.toLowerCase().includes("salary") || colId.toLowerCase().includes("fee") || colId.toLowerCase().includes("cap") || colId.toLowerCase().includes("available") || colId.toLowerCase().includes("outstanding") || colId.toLowerCase().includes("total") || colId.toLowerCase().includes("principal")) { return new Intl.NumberFormat("en-US", { minimumFractionDigits: 0 }).format(val) + " MMK"; } return new Intl.NumberFormat("en-US").format(val); }; // Pagination navigation helpers const startRecordNum = (currentPage - 1) * pageSize + 1; const endRecordNum = Math.min(currentPage * pageSize, totalRecords); return (

{/* ===== 1. TABLE CONTROL TOOLBAR ===== */}

{/* Main search bar */}

setSearch(e.target.value)} className="w-full pl-8 pr-3 py-1.5 text-[11px] border border-[#dfdfdf] rounded-[3px] bg-white focus:border-[#100841] focus:ring-1 focus:ring-[#100841]/20 outline-none transition-colors" /> {search && ( )}

{/* Advanced Filters Button */} {filters.length > 0 && ( )}

{/* Selected count info pill / general metadata */}

{selectable && localSelectedKeys.size > 0 && (

{localSelectedKeys.size} Selected

)} {totalRecords > 0 ? `Showing ${startRecordNum}-${endRecordNum} of ${totalRecords} Records` : "0 Records"}

{/* ===== 2. COLLAPSIBLE ADVANCED FILTER PANEL ===== */} {filters.length > 0 && showAdvancedFilters && (

{filters.map((filter) => (

{filter.label}

))}

)} {/* ===== 3. DATA TABLE BODY ===== */}

{selectable && ( )} {columns.map((col) => ( ))} {actions.length > 0 && ( )} {paginatedData.map((row, rowIdx) => { const id = rowKey(row); const isSelected = localSelectedKeys.has(id); return ( {selectable && ( )} {columns.map((col) => ( ))} {actions.length > 0 && ( )} ); })} {/* Zero state */} {totalRecords === 0 && ( )} {/* ===== 4. SUMMARY FOOTER ROW ===== */} {showSummaries && totalRecords > 0 && (columns.some((col) => col.isNumeric) || summary) && ( {selectable && ); } return ( ); })} {actions.length > 0 && )}

handleSelectAll(e.target.checked)} className="w-3.5 h-3.5 rounded-[2px] border border-[#dfdfdf] accent-[#100841] cursor-pointer" />	{col.header}	Actions
handleSelectRow(row, e.target.checked)} className="w-3.5 h-3.5 rounded-[2px] border border-[#dfdfdf] accent-[#100841] cursor-pointer" />	{col.accessor(row, rowIdx)}	{/* Floating Actions Menu */} {activeActionMenuRowId === id && ( {actions.map((act) => ( ))} )}
0 ? 1 : 0)} className="py-12 text-center text-[#868c95]" > {noDataText}
} {columns.map((col, idx) => { const isFirstCell = idx === 0; if (col.isNumeric) { const val = summary?.columns[col.id] ?? summaries[col.id]; return (	{formatValue(col.id, val)}	{isFirstCell ? (summary?.label \|\| "Total Summary") : ""}	}

{/* ===== 5. PAGINATION CONTROLS ===== */} {totalPages > 1 && (

Page {currentPage} of {totalPages}

{/* Page number indicators */} {Array.from({ length: totalPages }).map((_, idx) => { const pageNum = idx + 1; // Show window of pages around current page if (pageNum === 1 || pageNum === totalPages || Math.abs(pageNum - currentPage) <= 1) { return ( ); } if (pageNum === 2 || pageNum === totalPages - 1) { return ( ... ); } return null; })}

)}

); } [V0_FILE]typescriptreact:file="client/src/components/MakerCheckerModal.tsx" /** * MakerCheckerModal — Approval/Rejection dialog for settlement verification * Maker: Verifies bank reference, amount, screenshot → Approve/Reject with reason * Checker: Reviews Maker's verification → Approve/Reject with notes * Design: Enterprise Fintech — Modal with identity cards, reason textarea, and workflow context */ import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; import { ShieldCheck, XCircle, CheckCircle2, FileText, Banknote, Image, AlertTriangle, Info } from "lucide-react"; import type { Settlement } from "@/data/mockData"; function formatMMK(amount: number) { return new Intl.NumberFormat("en-US", { style: "currency", currency: "MMK", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount); } interface MakerCheckerModalProps { settlement: Settlement; role: "MAKER" | "CHECKER"; mode: "APPROVE" | "REJECT"; onSubmit: (note: string, confirmed: boolean) => void; onClose: () => void; } export function MakerCheckerModal({ settlement, role, mode, onSubmit, onClose }: MakerCheckerModalProps) { const [note, setNote] = useState(""); const [bankVerified, setBankVerified] = useState(false); const [amountVerified, setAmountVerified] = useState(false); const [screenshotVerified, setScreenshotVerified] = useState(false); const isApprove = mode === "APPROVE"; const roleTitle = role === "MAKER" ? "Maker Verification" : "Checker Approval"; const actionTitle = isApprove ? (role === "MAKER" ? "Verify Settlement" : "Approve Settlement") : "Reject Settlement"; const headerBg = isApprove ? "border-emerald-400 bg-emerald-50/50" : "border-red-400 bg-red-50/50"; const headerIconColor = isApprove ? (role === "MAKER" ? "text-blue-500" : "text-emerald-600") : "text-red-500"; const badgeClass = isApprove ? "text-emerald-600 border-emerald-300 bg-emerald-50" : "text-red-600 border-red-300 bg-red-50"; const confirmBtnClass = isApprove ? "bg-emerald-600 hover:bg-emerald-700" : "bg-[#100841] hover:bg-[#1a3250]"; const verificationChecks = [ { label: "Bank Reference Match", verified: bankVerified, set: setBankVerified, icon: Banknote }, { label: "Amount Reconciliation", verified: amountVerified, set: setAmountVerified, icon: FileText }, { label: "Payment Screenshot", verified: screenshotVerified, set: setScreenshotVerified, icon: Image }, ]; const allVerified = verificationChecks.every(v => v.verified); const canApprove = isApprove && role === "MAKER" ? allVerified : true; return (

e.stopPropagation()} > {/* Header */}

{isApprove ? ( ) : ( )}

{roleTitle} — {actionTitle}

{settlement.id} · {settlement.companyName}

{actionTitle}

{/* Settlement Summary */}

Total Amount

{formatMMK(settlement.totalAmount)}

Bank Reference

{settlement.bankReference || "N/A"}

Submitted By

{settlement.submittedBy}

Submitted: {settlement.submittedAt} {settlement.makerVerifiedAt && ( <> · Maker Verified: {settlement.makerVerifiedAt} )}

{/* Maker Verification Checks */} {role === "MAKER" && isApprove && (

Verification Checklist

{verificationChecks.map((check, i) => { const Icon = check.icon; return (

check.set(!check.verified)} className="w-4 h-4 rounded border-slate-300 accent-emerald-500" /> {check.label}

); })}

)} {/* Checker Review Summary */} {role === "CHECKER" && (

Maker's Verification

All checks verified by Maker

Bank reference, amount, and screenshot confirmed. Ready for Checker review.

)} {/* Notes / Reason Textarea */}

{isApprove ? "Approval Notes (Optional)" : "Rejection Reason (Required)"}

setNote(e.target.value)}
            className="min-h-[80px] text-xs border-slate-200 resize-none"
          />
          {!isApprove && note.length < 5 && (
            <p className="text-[10px] text-red-400 mt-1">Minimum 5 characters required for rejection.</p>
          )}
        </div>

{/* Actions */}
        <div className="px-5 py-4 flex items-center justify-between">
          <Button variant="ghost" size="sm" onClick={onClose} className="text-xs text-slate-400 hover:text-slate-600">
            Cancel
          </Button>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className="h-8 text-xs border-slate-200"
              style={{ color: isApprove ? undefined : "#dc2626", borderColor: isApprove ? undefined : "#fca5a5" }}
              disabled={!isApprove && note.length < 5}
              onClick={() => onSubmit(note, false)}
            >
              <XCircle className="w-3.5 h-3.5 mr-1.5" />
              Reject
            </Button>
            <Button
              size="sm"
              className={"h-8 text-xs " + confirmBtnClass}
              disabled={isApprove && role === "MAKER" && !allVerified}
              onClick={() => onSubmit(note, true)}
            >
              {isApprove ? (
                <>
                  <ShieldCheck className="w-3.5 h-3.5 mr-1.5" />
                  {role === "MAKER" ? "Verify" : "Approve"}
                </>
              ) : (
                <>
                  <XCircle className="w-3.5 h-3.5 mr-1.5" />
                  Confirm Reject
                </>
              )}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/ManusDialog.tsx"
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
} from "@/components/ui/dialog";

interface ManusDialogProps {
  title?: string;
  logo?: string;
  open?: boolean;
  onLogin: () => void;
  onOpenChange?: (open: boolean) => void;
  onClose?: () => void;
}

export function ManusDialog({
  title,
  logo,
  open = false,
  onLogin,
  onOpenChange,
  onClose,
}: ManusDialogProps) {
  const [internalOpen, setInternalOpen] = useState(open);

useEffect(() => {
    if (!onOpenChange) {
      setInternalOpen(open);
    }
  }, [open, onOpenChange]);

const handleOpenChange = (nextOpen: boolean) => {
    if (onOpenChange) {
      onOpenChange(nextOpen);
    } else {
      setInternalOpen(nextOpen);
    }

if (!nextOpen) {
      onClose?.();
    }
  };

return (
    <Dialog
      open={onOpenChange ? open : internalOpen}
      onOpenChange={handleOpenChange}
    >
      <DialogContent className="py-5 bg-[#f8f8f7] rounded-[20px] w-[400px] shadow-[0px_4px_11px_0px_rgba(0,0,0,0.08)] border border-[rgba(0,0,0,0.08)] backdrop-blur-2xl p-0 gap-0 text-center">
        <div className="flex flex-col items-center gap-2 p-5 pt-12">
          {logo ? (
            <div className="w-16 h-16 bg-white rounded-xl border border-[rgba(0,0,0,0.08)] flex items-center justify-center">
              <img src={logo} alt="Dialog graphic" className="w-10 h-10 rounded-md" />
            </div>
          ) : null}

{/* Title and subtitle */}
          {title ? (
            <DialogTitle className="text-xl font-semibold text-[#34322d] leading-[26px] tracking-[-0.44px]">
              {title}
            </DialogTitle>
          ) : null}
          <DialogDescription className="text-sm text-[#858481] leading-5 tracking-[-0.154px]">
            Please login with Manus to continue
          </DialogDescription>
        </div>

<DialogFooter className="px-5 py-5">
          {/* Login button */}
          <Button
            onClick={onLogin}
            className="w-full h-10 bg-[#111111] hover:bg-[#111111]/90 text-white rounded-[10px] text-sm font-medium leading-5 tracking-[-0.154px]"
          >
            Login with Manus
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/TransactionTimeline.tsx"
/**
 * TransactionTimeline — Chronological disbursement/repayment view
 * Shows each transaction as a timeline entry with journal references
 * Design: Enterprise Fintech — vertical timeline with left-right alternating events
 */
import {
  EnterpriseBadge,
  EnterpriseCard,
  EnterpriseKpiCard
} from "@/components/EnterpriseComponents";
import {
  ArrowUpRight, ArrowDownLeft, RotateCcw, XCircle, Clock,
  FileText, Receipt, ArrowRightLeft
} from "lucide-react";
import type { Transaction } from "@/data/mockData";

function formatMMK(amount: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "MMK", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount);
}

const statusConfig: Record<string, { icon: React.ElementType; variant: "success" | "warning" | "error" | "info" | "neutral"; label: string }> = {
  "Repaid": { icon: ArrowDownLeft, variant: "success", label: "Repaid" },
  "Approved": { icon: Clock, variant: "warning", label: "Approved" },
  "Disbursing": { icon: ArrowUpRight, variant: "info", label: "Disbursing" },
  "Overdue": { icon: XCircle, variant: "error", label: "Overdue" },
  "Failed": { icon: XCircle, variant: "error", label: "Failed" },
  "Pending": { icon: Clock, variant: "neutral", label: "Pending" },
};

const actionConfig: Record<string, { icon: React.ElementType; color: string }> = {
  "Repaid": { icon: RotateCcw, color: "border-emerald-400" },
  "Disbursing": { icon: ArrowUpRight, color: "border-blue-400" },
  "Approved": { icon: Receipt, color: "border-amber-400" },
  "Overdue": { icon: XCircle, color: "border-red-400" },
  "Failed": { icon: XCircle, color: "border-red-400" },
  "Pending": { icon: Clock, color: "border-slate-300" },
};

interface TransactionTimelineProps {
  transactions: Transaction[];
}

export function TransactionTimeline({ transactions }: TransactionTimelineProps) {
  const sorted = [...transactions].sort((a, b) =>
    new Date(b.disbursementDate).getTime() - new Date(a.disbursementDate).getTime()
  );

if (sorted.length === 0) {
    return (
      <div className="text-center py-8">
        <FileText className="w-8 h-8 text-slate-200 mx-auto mb-2" />
        <p className="text-xs text-slate-400">No transactions recorded</p>
      </div>
    );
  }

return (
    <div className="space-y-4">
      {/* Summary row */}
      <div className="grid grid-cols-4 gap-3">
        <EnterpriseKpiCard label="Total Disbursed" value={formatMMK(sorted.reduce((s, t) => s + t.netAmount, 0))} accentColor="emerald" />
        <EnterpriseKpiCard label="Total Fees" value={formatMMK(sorted.reduce((s, t) => s + t.fee, 0))} accentColor="amber" />
        <EnterpriseKpiCard label="Gross Amount" value={formatMMK(sorted.reduce((s, t) => s + t.amount, 0))} accentColor="info" />
        <EnterpriseKpiCard label="Transactions" value={String(sorted.length)} accentColor="navy" />
      </div>

{/* Timeline */}
      <div className="relative">
        <div className="absolute left-[17px] top-2 bottom-2 w-px bg-slate-200" />

{sorted.map((txn, i) => {
          const sc = statusConfig[txn.status] || statusConfig["Pending"];
          const ac = actionConfig[txn.status] || actionConfig["Pending"];
          const Icon = ac.icon;

return (
            <div key={txn.id} className="flex items-start gap-4 py-3 relative">
              {/* Timeline dot */}
              <div className={`relative z-10 mt-0.5 shrink-0`}>
                <div className={`w-[12px] h-[12px] rounded-full border-2 border-white ${ac.color} bg-white flex items-center justify-center`}>
                  <Icon className="w-[7px] h-[7px] text-slate-500" />
                </div>
              </div>

{/* Card */}
              <EnterpriseCard className="flex-1 p-3">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1.5">
                      <span className="text-[10px] font-mono font-bold text-[#100841]">{txn.id}</span>
                      <EnterpriseBadge variant={sc.variant}>
                        {sc.label}
                      </EnterpriseBadge>
                    </div>

<div className="flex items-center gap-4 text-xs">
                      <div>
                        <p className="text-[9px] text-slate-400 uppercase tracking-wider">Disbursed</p>
                        <p className="font-mono font-bold text-[#100841]">{formatMMK(txn.netAmount)}</p>
                      </div>
                      <div>
                        <p className="text-[9px] text-slate-400 uppercase tracking-wider">Fee</p>
                        <p className="font-mono text-amber-600">{formatMMK(txn.fee)}</p>
                      </div>
                      <div>
                        <p className="text-[9px] text-slate-400 uppercase tracking-wider">Method</p>
                        <p className="text-slate-600">{txn.payoutMethod}</p>
                      </div>
                    </div>

<div className="flex items-center gap-3 mt-2 text-[10px] text-slate-400">
                      <span>Req: {txn.requestDate}</span>
                      <ArrowRightLeft className="w-3 h-3" />
                      <span>Due: {txn.dueDate}</span>
                    </div>

{/* Journal Reference */}
                    <div className="flex items-center gap-1.5 mt-1.5">
                      <FileText className="w-3 h-3 text-slate-300" />
                      <span className="text-[10px] font-mono text-slate-400">{txn.journalRef}</span>
                    </div>
                  </div>

{/* Right side: dates */}
                  <div className="text-right shrink-0">
                    <p className="text-[10px] text-slate-400 uppercase tracking-wider">Disbursement</p>
                    <p className="text-[11px] font-medium text-slate-600">{txn.disbursementDate}</p>
                    {txn.repaymentDate && (
                      <>
                        <p className="text-[10px] text-slate-400 uppercase tracking-wider mt-1">Repaid</p>
                        <p className="text-[11px] font-medium text-emerald-600">{txn.repaymentDate}</p>
                      </>
                    )}
                  </div>
                </div>
              </EnterpriseCard>
            </div>
          );
        })}
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/ui/tabs.tsx"
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";

import { cn } from "@/lib/utils";

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  );
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "bg-slate-100/80 border border-[#dfdfdf] inline-flex h-10 w-fit items-center justify-center rounded-[4px] p-0.5 gap-0.5",
        className
      )}
      {...props}
    />
  );
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-[#100841] data-[state=active]:text-white focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-[#4f525d] hover:bg-slate-50/80 hover:text-[#100841] inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-[2px] px-3.5 py-1.5 text-[11px] font-bold uppercase tracking-wider whitespace-nowrap transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
        className
      )}
      {...props}
    />
  );
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
  );
}

export { Tabs, TabsList, TabsTrigger, TabsContent };
[V0_FILE]typescriptreact:file="client/src/layouts/PortalLayout.tsx"
/**
 * PortalLayout — Enterprise Shell
 * SAP Fiori-Inspired: Grouped Side Navigation | Structured Toolbar | Main Content Area
 * Design: Enterprise Fintech — Navy (#100841) + Teal (#31d891) | Sharp corners | Structured layout
 */
import { useState } from "react";
import { Link, useLocation, useRoute } from "wouter";
import { useView, type ViewType, type ModuleId } from "@/contexts/ViewContext";
import { MODULE_REGISTRY } from "@/contexts/ViewContext";
import {
  Grid3X3, Building2, Users, ArrowRightLeft, Repeat, ShieldCheck,
  BookOpen, Settings, Wallet, ShieldAlert, BarChart3, FileSpreadsheet,
  Bell, SlidersHorizontal, Workflow, Trash2, LayoutTemplate, AlertCircle,
  Menu, ChevronLeft, ChevronRight, Languages, Lock, ChevronDown,
  Zap, Landmark, Layers, Gauge, LogOut, UserCheck, Briefcase,
  Coins, Scale, FileText, PieChart, Percent, Sliders
} from "lucide-react";
import { generateProjectZip } from "@/utils/projectZip";
import { Package } from "lucide-react";
import { DashboardPage } from "@/pages/dashboard/DashboardPage";
import { OnboardingPage } from "@/pages/onboarding/OnboardingPage";
import { EmployeesPage } from "@/pages/employees/EmployeesPage";
import { TransactionsPage } from "@/pages/transactions/TransactionsPage";
import { RepaymentPage } from "@/pages/repayment/RepaymentPage";
import { SettlementPage } from "@/pages/settlement/SettlementPage";
import { CircleLedgerPage } from "@/pages/circle-ledger/CircleLedgerPage";
import { FeeBuilderPage } from "@/pages/fee-builder/FeeBuilderPage";
import { BudgetPage } from "@/pages/budget/BudgetPage";
import { RiskPage } from "@/pages/risk/RiskPage";
import { ReportsPage } from "@/pages/reports/ReportsPage";
import { PayrollPage } from "@/pages/payroll/PayrollPage";
import { NotificationsPage } from "@/pages/notifications/NotificationsPage";
import { AdminPage } from "@/pages/admin/AdminPage";
import { WorkflowPage } from "@/pages/workflow/WorkflowPage";
import { WriteOffPage } from "@/pages/writeoff/WriteOffPage";
import { FormCreatorPage } from "@/pages/form-creator/FormCreatorPage";
import { ErrorsPage } from "@/pages/errors/ErrorsPage";
import { DisbursementPage } from "@/pages/disbursement/DisbursementPage";
import { BankIntegrationPage } from "@/pages/bank-integration/BankIntegrationPage";
import { ServiceCatalogPage } from "@/pages/service-catalog/ServiceCatalogPage";
import { FeeHierarchyPage } from "@/pages/fee-hierarchy/FeeHierarchyPage";
import { EmployeeGroupsPage } from "@/pages/employee-groups/EmployeeGroupsPage";
import { LimitationsPage } from "@/pages/limitations/LimitationsPage";
import { DocumentationPage } from "@/pages/documentation/DocumentationPage";

const ICON_MAP: Record<string, React.ElementType> = {
  "grid-3x3": Grid3X3, "building-2": Building2, "users": Users,
  "arrow-right-left": ArrowRightLeft, "repeat": Repeat, "shield-check": ShieldCheck,
  "book-open": BookOpen, "settings": Settings, "wallet": Wallet, "shield-alert": ShieldAlert,
  "bar-chart-3": BarChart3, "file-spreadsheet": FileSpreadsheet, "bell": Bell,
  "sliders-horizontal": SlidersHorizontal, "workflow": Workflow, "trash-2": Trash2,
  "layout-template": LayoutTemplate, "alert-circle": AlertCircle,
  "zap": Zap, "landmark": Landmark, "layers": Layers, "gauge": Gauge,
  "log-out": LogOut, "user-check": UserCheck, "briefcase": Briefcase,
  "coins": Coins, "scale": Scale, "file-text": FileText,
  "pie-chart": PieChart, "percent": Percent, "users-round": Users, "sliders": Sliders,
};

const MODULE_PAGES: Record<ModuleId, React.FC> = {
  "dashboard": DashboardPage, "onboarding": OnboardingPage, "employees": EmployeesPage,
  "transactions": TransactionsPage, "repayment": RepaymentPage, "settlement": SettlementPage,
  "circle-ledger": CircleLedgerPage, "fee-builder": FeeBuilderPage, "budget": BudgetPage,
  "risk": RiskPage, "reports": ReportsPage, "payroll": PayrollPage,
  "notifications": NotificationsPage, "admin": AdminPage, "workflow": WorkflowPage,
  "writeoff": WriteOffPage, "form-creator": FormCreatorPage, "errors": ErrorsPage,
  "disbursement": DisbursementPage, "bank-integration": BankIntegrationPage,
  "service-catalog": ServiceCatalogPage, "fee-hierarchy": FeeHierarchyPage,
  "employee-groups": EmployeeGroupsPage, "limitations": LimitationsPage, "documentation": DocumentationPage,
};

const VIEW_COLORS: Record<ViewType, string> = {
  "HR": "bg-[#2e7d32]", "Sales": "bg-[#1565c0]", "Operations": "bg-[#e65100]",
  "Back Office": "bg-[#546e7a]", "Finance": "bg-[#6a1b9a]", "Risk": "bg-[#c62828]",
  "Platform Admin": "bg-[#00838f]",
};

const VIEW_ICONS: Record<ViewType, React.ElementType> = {
  "HR": Users, "Sales": Wallet, "Operations": ShieldCheck,
  "Back Office": BookOpen, "Finance": FileSpreadsheet, "Risk": ShieldAlert,
  "Platform Admin": Settings,
};

// Group modules by category for SAP Fiori side navigation
const NAV_GROUPS = [
  {
    label: "Overview",
    modules: ["dashboard"],
  },
  {
    label: "Workforce",
    modules: ["onboarding", "employees", "employee-groups"],
  },
  {
    label: "Operations",
    modules: ["transactions", "disbursement", "repayment", "settlement"],
  },
  {
    label: "Finance",
    modules: ["circle-ledger", "fee-builder", "fee-hierarchy", "service-catalog", "payroll"],
  },
  {
    label: "Risk & Budget",
    modules: ["budget", "risk", "limitations", "writeoff"],
  },
  {
    label: "Integration",
    modules: ["bank-integration", "workflow"],
  },
  {
    label: "Reporting",
    modules: ["reports", "form-creator", "errors"],
  },
  {
    label: "System",
    modules: ["notifications", "documentation", "admin"],
  },
];

export function PortalLayout() {
  const { view, setView, modules, lang, setLang, hasPermission } = useView();
  const [collapsed, setCollapsed] = useState(false);
  const [, setLocation] = useLocation();
  const [, matchParams] = useRoute<{ module: string }>("/module/:module");
  const currentModuleId = (matchParams?.module as ModuleId) || "dashboard";

// If no permission, fallback to dashboard
  const safeModuleId = hasPermission(currentModuleId) ? currentModuleId : "dashboard";
  const PageComponent = MODULE_PAGES[safeModuleId] || DashboardPage;

// Find the module info from MODULE_REGISTRY
  const activeModule = MODULE_REGISTRY.find(m => m.id === safeModuleId) || modules[0];

const navigateTo = (moduleId: ModuleId) => {
    setLocation(`/module/${moduleId}`);
  };

const [viewDropdownOpen, setViewDropdownOpen] = useState(false);
  const [zipDownloading, setZipDownloading] = useState(false);

return (
    <div className="flex h-screen bg-[#ffffff] overflow-hidden font-sans">
      {/* ===== SIDEBAR — SAP Fiori Side Navigation ===== */}
      <aside
        className={`flex flex-col bg-[#100841] text-white transition-all duration-200 shrink-0 border-r border-white/5 ${
          collapsed ? "w-14" : "w-60"
        }`}
      >
        {/* Logo Area */}
        <Link href="/" className={`flex items-center gap-2.5 px-3 py-4 border-b border-white/8 hover:bg-white/5 transition-colors cursor-pointer ${collapsed ? "justify-center px-0" : ""}`}>
          <div className="w-8 h-8 rounded-[3px] bg-[#31d891]/20 flex items-center justify-center shrink-0 border border-[#31d891]/30">
            <img src="https://ewa-group.com/wp-content/uploads/2020/07/EWA_Presentation.pdf-image-006-removebg-preview.png" alt="EWA" className="w-6 h-6 object-contain" />
          </div>
          {!collapsed && (
            <div className="min-w-0">
              <h1 className="text-[11px] font-bold tracking-wide leading-tight text-white/90">EWA 3.0</h1>
              <p className="text-[9px] text-white/40 tracking-wider uppercase">Enterprise Platform</p>
            </div>
          )}
        </Link>

{/* Grouped Navigation */}
        <nav className="flex-1 overflow-y-auto py-2">
          {NAV_GROUPS.map((group) => {
            const visibleModules = group.modules
              .map(id => modules.find(m => m.id === id))
              .filter(Boolean) as typeof modules;
            if (visibleModules.length === 0) return null;

return (
              <div key={group.label} className="mb-1">
                {!collapsed && (
                  <div className="px-3 pt-2 pb-1">
                    <p className="text-[9px] font-bold text-white/30 uppercase tracking-widest">{group.label}</p>
                  </div>
                )}
                {visibleModules.map((mod) => {
                  const Icon = ICON_MAP[mod.icon] || Grid3X3;
                  const isActive = currentModuleId === mod.id;
                  return (
                    <button
                      key={mod.id}
                      onClick={() => navigateTo(mod.id)}
                      className={`w-full flex items-center gap-2.5 px-3 py-[7px] text-[11px] transition-all duration-100 border-l-2 ${
                        isActive
                          ? "bg-[#31d891]/15 text-[#31d891] border-l-[#31d891] font-semibold"
                          : "text-white/55 hover:bg-white/[0.04] hover:text-white/80 border-l-transparent"
                      } ${collapsed ? "justify-center px-0" : ""}`}
                      title={collapsed ? mod.label : undefined}
                    >
                      <Icon className={`w-[15px] h-[15px] shrink-0 ${isActive ? "text-[#31d891]" : "text-white/40"}`} />
                      {!collapsed && <span className="truncate">{mod.label}</span>}
                    </button>
                  );
                })}
              </div>
            );
          })}
        </nav>

{/* Collapse Toggle */}
        <div className="border-t border-white/8 p-2">
          <button
            onClick={() => setCollapsed(!collapsed)}
            className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-[3px] text-white/40 hover:bg-white/5 hover:text-white/70 text-[9px] transition-colors"
          >
            {collapsed ? <ChevronRight className="w-3.5 h-3.5" /> : <ChevronLeft className="w-3.5 h-3.5" />}
            {!collapsed && <span className="uppercase tracking-widest">Collapse</span>}
          </button>
        </div>
      </aside>

{/* ===== MAIN AREA ===== */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Top Command Bar — SAP Fiori Shell Header */}
        <header className="h-[44px] bg-white border-b border-[#dfdfdf] flex items-center justify-between px-4 shrink-0">
          <div className="flex items-center gap-3 min-w-0">
            <button onClick={() => setCollapsed(!collapsed)} className="lg:hidden text-slate-400 hover:text-slate-600">
              <Menu className="w-4 h-4" />
            </button>
            <div className="flex items-center gap-2">
              <Lock className="w-3.5 h-3.5 text-[#31d891]/50" />
              <div>
                <h2 className="text-[11px] font-bold text-[#100841] uppercase tracking-wide">{activeModule.label}</h2>
              </div>
            </div>
          </div>

<div className="flex items-center gap-2 shrink-0">
            {/* View Type Indicator */}
            <span className="text-[9px] text-[#4f525d] uppercase tracking-widest">View as</span>
            <div className="relative">
              <button
                onClick={() => setViewDropdownOpen(!viewDropdownOpen)}
                onBlur={() => setTimeout(() => setViewDropdownOpen(false), 150)}
                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[3px] text-[10px] font-semibold text-white shadow-sm ${VIEW_COLORS[view]}`}
              >
                {(() => {
                  const Icon = VIEW_ICONS[view];
                  return <Icon className="w-3 h-3" />;
                })()}
                <span>{view}</span>
                <ChevronDown className="w-2.5 h-2.5 opacity-60" />
              </button>
              {viewDropdownOpen && (
                <div className="absolute right-0 top-full mt-1 bg-white rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.12)] border border-[#dfdfdf] p-1 min-w-[180px] z-50">
                  <p className="px-2.5 py-1.5 text-[8px] font-bold text-[#868c95] uppercase tracking-widest border-b border-[#efefff] mb-0.5">Command View</p>
                  {(["HR", "Sales", "Operations", "Back Office", "Finance", "Risk", "Platform Admin"] as ViewType[]).map(v => (
                    <button
                      key={v}
                      onClick={() => { setView(v); setViewDropdownOpen(false); }}
                      className={`w-full flex items-center gap-2 px-2.5 py-1.5 rounded-[2px] text-[10px] transition-colors ${
                        view === v ? "bg-[#100841]/5 font-semibold text-[#100841]" : "hover:bg-[#efefff] text-[#4f525d]"
                      }`}
                    >
                      <span className={`w-2 h-2 rounded-full ${VIEW_COLORS[v]}`} />
                      <span>{v}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>

{/* ZIP Download Button */}
            <button
              onClick={handleDownloadZip}
              disabled={zipDownloading}
              className="flex items-center gap-1.5 px-2.5 py-1 text-[10px] font-semibold text-white bg-[#31d891] hover:bg-[#111111] disabled:opacity-50 rounded-[3px] transition-colors uppercase tracking-wider shadow-sm"
              title="Download all project files as ZIP"
            >
              <Package className="w-3 h-3" />
              {zipDownloading ? "..." : "ZIP"}
            </button>

{/* Language Toggle */}
            <button
              onClick={() => setLang(lang === "en" ? "my" : "en")}
              className="flex items-center gap-1 px-2 py-1 text-[10px] text-[#4f525d] hover:text-[#100841] rounded-[3px] hover:bg-[#efefff] transition-colors uppercase tracking-wider"
            >
              <Languages className="w-3 h-3" />
              {lang === "en" ? "EN" : "MM"}
            </button>
          </div>
        </header>

{/* Content Area */}
        <main className="flex-1 overflow-auto">
          <div className="p-5">
            <PageComponent />
          </div>
        </main>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/modules/onboarding/OnboardingDashboard.tsx"
/**
 * Company Onboarding Dashboard
 * Features: "My Requests" and "My Tasks" tabs with status badges and progress bars.
 */
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { 
  FileText, 
  CheckCircle2, 
  Clock, 
  AlertCircle, 
  Plus, 
  Search, 
  ChevronRight, 
  Filter,
  ArrowRight,
  User,
  History,
  MessageSquare
} from "lucide-react";
import { MOCK_ONBOARDING_REQUESTS, MOCK_TASKS } from "./mockData";
import { OnboardingRequest, OnboardingTask, STAGE_NAMES } from "./types";

interface OnboardingDashboardProps {
  requests?: OnboardingRequest[];
  onNewOnboarding?: () => void;
  onViewDetails?: (request: OnboardingRequest) => void;
}

export default function OnboardingDashboard({ requests = MOCK_ONBOARDING_REQUESTS, onNewOnboarding, onViewDetails }: OnboardingDashboardProps) {
  const [activeTab, setActiveTab] = useState<"requests" | "tasks">("requests");
  const [searchQuery, setSearchQuery] = useState("");

const pendingTasksCount = MOCK_TASKS.filter(t => t.status === "pending").length;
  const returnedRequestsCount = requests.filter(r => r.status === "returned").length;

return (
    <div className="flex flex-col h-full bg-background font-sans">
      {/* Header Section — Enterprise Toolbar Pattern */}
      <div className="enterprise-toolbar mb-4">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Company Onboarding</h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Manage corporate registrations and EWA budget requests.</p>
        </div>
        <button 
          onClick={onNewOnboarding}
          className="btn-enterprise-primary"
        >
          <Plus size={14} />
          <span>New Onboarding</span>
        </button>
      </div>

{/* Main Container — Tab Panel Enterprise */}
      <div className="tab-panel-enterprise flex-1 flex flex-col min-h-0">
        {/* Tab Selection */}
        <div className="flex items-center gap-6 border-b border-[#dfdfdf] mb-4">
          <button 
            onClick={() => setActiveTab("requests")}
            className={`pb-2 text-[11px] font-bold uppercase tracking-wider transition-all relative ${activeTab === "requests" ? "text-[#31d891]" : "text-[#4f525d] hover:text-[#100841]"}`}
          >
            My Requests
            {returnedRequestsCount > 0 && (
              <span className="ml-1.5 px-1.5 py-0.5 rounded-[2px] bg-[#fff3e0] text-[#e65100] text-[8px] border border-[#ffe0b2]">
                {returnedRequestsCount}
              </span>
            )}
            {activeTab === "requests" && <motion.div layoutId="tab-underline" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#31d891]" />}
          </button>
          <button 
            onClick={() => setActiveTab("tasks")}
            className={`pb-2 text-[11px] font-bold uppercase tracking-wider transition-all relative ${activeTab === "tasks" ? "text-[#31d891]" : "text-[#4f525d] hover:text-[#100841]"}`}
          >
            My Tasks
            {pendingTasksCount > 0 && (
              <span className="ml-1.5 px-1.5 py-0.5 rounded-[2px] bg-[#e3f2fd] text-[#1565c0] text-[8px] border border-[#bbdefb]">
                {pendingTasksCount}
              </span>
            )}
            {activeTab === "tasks" && <motion.div layoutId="tab-underline" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#31d891]" />}
          </button>
        </div>

{/* Search and Filters */}
        <div className="flex items-center gap-3 mb-4">
          <div className="flex-1 relative">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#868c95]" size={14} />
            <input 
              type="text"
              placeholder={`Search ${activeTab}...`}
              className="input-enterprise pl-8"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <button className="btn-enterprise-secondary px-3 py-1.5">
            <Filter size={14} />
            <span>Filter</span>
          </button>
        </div>

{/* Dynamic Content */}
        <div className="flex-1 overflow-y-auto pr-1">
          <AnimatePresence mode="wait">
            {activeTab === "requests" ? (
              <motion.div 
                key="requests-list"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="space-y-2.5"
              >
                {requests
                  .filter((r) => r.companyName.toLowerCase().includes(searchQuery.toLowerCase()) || r.id.toLowerCase().includes(searchQuery.toLowerCase()))
                  .map((request) => (
                    <RequestCard 
                      key={request.id} 
                      request={request} 
                      onClick={() => onViewDetails?.(request)}
                    />
                  ))}
              </motion.div>
            ) : (
              <motion.div 
                key="tasks-list"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="space-y-2.5"
              >
                {MOCK_TASKS.map((task) => (
                  <TaskCard key={task.id} task={task} />
                ))}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}

return (
    <div 
      onClick={onClick}
      className="card-enterprise p-3 hover:border-[#31d891]/50 transition-all group cursor-pointer"
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2.5">
          <div className="p-2 rounded-[2px] bg-[#efefff] border border-[#dfdfdf]">
            <FileText size={16} className="text-[#100841]" />
          </div>
          <div>
            <h3 className="text-[12px] font-bold text-[#100841] group-hover:text-[#31d891] transition-colors">{request.companyName}</h3>
            <div className="flex items-center gap-2 mt-0.5">
              <span className="text-[9px] font-mono text-[#868c95] uppercase tracking-wider">{request.id}</span>
              <span className="w-0.5 h-0.5 rounded-full bg-[#dfdfdf]" />
              <span className="text-[9px] text-[#4f525d] uppercase tracking-wider font-semibold">{request.type.replace('_', ' ')}</span>
            </div>
          </div>
        </div>
        <div className={`status-badge-${getStatusVariant(request.status)}`}>
          {request.status.replace('_', ' ')}
        </div>
      </div>

{/* Progress Section */}
      <div className="space-y-1.5">
        <div className="flex items-center justify-between text-[10px]">
          <span className="text-[#4f525d] font-medium uppercase tracking-tight">Stage: <span className="text-[#100841] font-bold">{STAGE_NAMES[request.currentStage]}</span></span>
          <span className="text-[#31d891] font-bold font-mono">{request.progress}%</span>
        </div>
        <div className="h-1 w-full bg-[#efefff] rounded-full overflow-hidden">
          <motion.div 
            initial={{ width: 0 }}
            animate={{ width: `${request.progress}%` }}
            className="h-full bg-[#31d891]"
          />
        </div>
      </div>

<div className="mt-3 pt-3 border-t border-[#efefff] flex items-center justify-between">
        <div className="flex items-center gap-3 text-[10px] text-[#868c95] font-medium">
          <div className="flex items-center gap-1">
            <Clock size={11} />
            <span>{new Date(request.submissionDate).toLocaleDateString()}</span>
          </div>
          {request.status === "returned" && (
            <div className="flex items-center gap-1 text-[#e65100]">
              <AlertCircle size={11} />
              <span className="uppercase tracking-tight">Returned</span>
            </div>
          )}
        </div>
        <button className="flex items-center gap-1 text-[10px] font-bold text-[#31d891] hover:underline uppercase tracking-wide">
          View Detail
          <ArrowRight size={11} />
        </button>
      </div>
    </div>
  );
}

function TaskCard({ task }: { task: OnboardingTask }) {
  const priorityStyles = {
    low: "text-[#4f525d] bg-[#efefff] border-[#dfdfdf]",
    medium: "text-[#e65100] bg-[#fff3e0] border-[#ffe0b2]",
    high: "text-[#c62828] bg-[#fce4ec] border-[#ffcdd2]",
  };

return (
    <div className="card-enterprise p-3 hover:border-[#31d891]/50 transition-all group">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2.5">
          <div className="p-1.5 rounded-[2px] bg-[#efefff] border border-[#dfdfdf]">
            <CheckCircle2 size={16} className="text-[#31d891]" />
          </div>
          <div>
            <h3 className="text-[12px] font-bold text-[#100841] group-hover:text-[#31d891] transition-colors">{task.actionRequired}</h3>
            <p className="text-[10px] text-[#4f525d] mt-0.5 font-medium">{task.companyName} • {task.requestType.replace('_', ' ')}</p>
          </div>
        </div>
        <span className={`px-1.5 py-0.5 rounded-[2px] text-[8px] font-bold uppercase tracking-widest border ${priorityStyles[task.priority]}`}>
          {task.priority}
        </span>
      </div>

<div className="flex items-center justify-between mt-4">
        <div className="flex items-center gap-4">
          <div className="flex flex-col gap-0.5">
            <span className="text-[8px] text-[#868c95] uppercase font-bold tracking-widest">Assignee</span>
            <div className="flex items-center gap-1 text-[10px] text-[#100841] font-semibold">
              <User size={11} className="text-[#31d891]" />
              <span>{task.assignedRole}</span>
            </div>
          </div>
          <div className="flex flex-col gap-0.5">
            <span className="text-[8px] text-[#868c95] uppercase font-bold tracking-widest">Due</span>
            <div className="flex items-center gap-1 text-[10px] text-[#100841] font-semibold">
              <Clock size={11} className="text-[#868c95]" />
              <span>{new Date(task.dueDate).toLocaleDateString()}</span>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <button className="btn-enterprise-secondary !px-2.5 !py-1 !text-[10px]">
            Audit
          </button>
          <button className="btn-enterprise-primary !px-2.5 !py-1 !text-[10px]">
            Process
          </button>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/modules/onboarding/OnboardingRequestDetail.tsx"
/**
 * OnboardingRequestDetail — Advanced Step-by-Step Corporate Onboarding Audit & Workflow Portal
 * Features:
 * - Left Panel: Timeline of all 9 stages (Stage 0 to Stage 8) that are fully clickable.
 * - Left Panel Bottom: Audit Log comment submission which appends to the timeline in real time.
 * - Right Panel top: Expandable Corporate Info with attachments.
 * - Right Panel main: Stage-specific interactive content corresponding to the selected Audit Log step.
 * - Stage 6: Service Fee Setup & Repayment Fee Mapping with a fully interactive Pop-up Fee Simulator!
 * - Stage 7: Risk Caps configuration (Editable allowable EWA limits, Max employee caps, Max corporate caps).
 * - Stage 8: Finance Double-Entry Ledger validation & final sync activation.
 */
import { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { 
  History, 
  User, 
  Clock, 
  MessageSquare, 
  FileText, 
  ChevronRight,
  ChevronDown,
  CheckCircle2,
  AlertCircle,
  ShieldCheck,
  Building2,
  ArrowLeft,
  Coins,
  Settings,
  Scale,
  Percent,
  PlayCircle,
  X,
  FileCheck,
  Calendar,
  Layers,
  ArrowRight,
  TrendingUp,
  Download,
  Plus
} from "lucide-react";
import { OnboardingRequest, STAGE_NAMES, OnboardingEmployee, FeeDefinition } from "./types";
import { MOCK_FEES } from "./mockData";
import { cn } from "@/lib/utils";

interface OnboardingRequestDetailProps {
  request: OnboardingRequest;
  onBack: () => void;
  onUpdate: (updatedRequest: OnboardingRequest) => void;
}

export default function OnboardingRequestDetail({ request, onBack, onUpdate }: OnboardingRequestDetailProps) {
  // Navigation / Click tracking for the Audit Steps
  const [selectedStep, setSelectedStep] = useState<number>(request.currentStage);
  const [isCorporateInfoExpanded, setIsCorporateInfoExpanded] = useState<boolean>(false);
  const [auditComment, setAuditComment] = useState("");

// Stage 6 (Operations Review) states
  const [selectedServiceFeeId, setSelectedServiceFeeId] = useState<string>("FEE-001");
  const [selectedRepaymentFeeId, setSelectedRepaymentFeeId] = useState<string>("FEE-002");
  
  // Simulation pop-up dialog states
  const [isSimulatorOpen, setIsSimulatorOpen] = useState(false);
  const [simAmount, setSimAmount] = useState<number>(150000);
  const [simLateDays, setSimLateDays] = useState<number>(0);
  const [simTenure, setSimTenure] = useState<number>(12);
  const [simDay, setSimDay] = useState<number>(5);

// Stage 7 (Risk Review) states
  const [allowableAmountLimit, setAllowableAmountLimit] = useState<number>(500000);
  const [maxCapEmployee, setMaxCapEmployee] = useState<number>(500000);
  const [maxCapCorporate, setMaxCapCorporate] = useState<number>(15000000);

// Helper formatting
  const formatMMK = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "MMK",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount).replace("MMK", "MMK ");
  };

// ─── STAGE 6 SIMULATION CALCULATOR ENGINE ───
  const selectedServiceFee = MOCK_FEES.find(f => f.id === selectedServiceFeeId) || MOCK_FEES[0];
  const selectedRepaymentFee = MOCK_FEES.find(f => f.id === selectedRepaymentFeeId) || MOCK_FEES[1];

// Compute repayment fee
    let rFee = 0;
    if (selectedRepaymentFee.calculationType === 'percentage') {
      rFee = (simAmount * selectedRepaymentFee.value) / 100;
      logs.push(`[Repayment Fee Map] Applied ${selectedRepaymentFee.name}: ${selectedRepaymentFee.value}% yield resulting in ${formatMMK(rFee)}.`);
    }

// Check Late Period penalties
    let latePenalty = 0;
    if (simLateDays > 0) {
      latePenalty = (simAmount * 0.05); // 5% late rate
      logs.push(`[Arrears Penalty] Late period of ${simLateDays} days detected! Applying 5.0% arrears penalty: +${formatMMK(latePenalty)}.`);
    }

const netComputedFee = sFee + rFee + latePenalty;
    logs.push(`[SUMMATION] Net Estimated Drawdown Cost: Service(${formatMMK(sFee)}) + Repayment(${formatMMK(rFee)}) + Penalty(${formatMMK(latePenalty)}) = ${formatMMK(netComputedFee)}.`);

return {
      serviceFee: sFee,
      repaymentFee: rFee,
      latePenalty,
      netComputedFee,
      logs
    };
  }, [selectedServiceFeeId, selectedRepaymentFeeId, simAmount, simLateDays, simTenure, simDay]);

// Handle comment submit
  const handleCommentSubmit = () => {
    if (!auditComment.trim()) return;
    const newAuditEntry = {
      id: `AUD-${Date.now()}`,
      stage: request.currentStage,
      action: "Review Commentary Registered",
      actorName: "Backoffice Reviewer",
      actorRole: "Compliance Auditor",
      timestamp: new Date().toISOString(),
      comment: auditComment
    };

const updated = {
      ...request,
      auditTrail: [newAuditEntry, ...request.auditTrail]
    };
    onUpdate(updated);
    setAuditComment("");
  };

// Handle workflow stage advancements
  const handleAdvanceStage = (nextStage: number, stageName: string) => {
    const actionName = `Approved & Sent to ${stageName}`;
    const comment = `Onboarding request progressed by compliance audit action.`;
    
    const newAuditEntry = {
      id: `AUD-${Date.now()}`,
      stage: request.currentStage,
      action: actionName,
      actorName: "Backoffice Lead",
      actorRole: request.currentStage === 6 ? "Operations" : request.currentStage === 7 ? "Risk" : "Finance",
      timestamp: new Date().toISOString(),
      comment
    };

const isLast = nextStage > 8;
    const updated: OnboardingRequest = {
      ...request,
      currentStage: isLast ? 8 : nextStage,
      status: isLast ? "completed" : "pending_review",
      progress: isLast ? 100 : Math.round((nextStage / 8) * 100),
      auditTrail: [newAuditEntry, ...request.auditTrail]
    };

onUpdate(updated);
    setSelectedStep(isLast ? 8 : nextStage);
    alert(`Stage advanced to Step ${isLast ? 8 : nextStage} [${STAGE_NAMES[isLast ? 8 : nextStage]}]!`);
  };

return (
    <div className="flex flex-col h-full bg-[#efefff] text-[#100841] font-sans">
      
      {/* Dynamic Navigation Header */}
      <div className="px-6 py-3.5 border-b border-[#dfdfdf] bg-white flex items-center justify-between shadow-sm">
        <div className="flex items-center gap-4">
          <button 
            onClick={onBack} 
            className="p-1.5 hover:bg-[#efefff] rounded-[3px] text-[#4f525d] hover:text-[#100841] transition-all border border-transparent hover:border-[#dfdfdf]"
          >
            <ArrowLeft size={16} />
          </button>
          <div>
            <div className="flex items-center gap-3">
              <h2 className="text-[14px] font-bold text-[#100841] tracking-tight uppercase">{request.companyName}</h2>
              <span className={cn(
                "px-2 py-0.5 rounded-[2px] font-mono font-bold text-[8px] uppercase tracking-wider border",
                request.status === 'completed' ? "bg-[#e8f5e9] text-[#2e7d32] border-[#c8e6c9]" : "bg-[#fff3e0] text-[#e65100] border-[#ffe0b2]"
              )}>
                {request.status.replace('_', ' ')}
              </span>
            </div>
            <p className="text-[9px] text-[#4f525d] uppercase tracking-widest font-bold mt-0.5">
              Request ID: {request.id} • Type: {request.type.replace('_', ' ')}
            </p>
          </div>
        </div>

<div className="flex items-center gap-2">
          <div className="text-[10px] font-mono text-[#4f525d] bg-[#efefff] px-2.5 py-1 rounded-[1px] border border-[#dfdfdf]">
            Current Stage: <span className="text-[#100841] font-bold uppercase">{STAGE_NAMES[request.currentStage]}</span>
          </div>
          <button 
            onClick={onBack}
            className="btn-enterprise-secondary !py-1 !px-3 !text-[10px]"
          >
            Close Detail
          </button>
        </div>
      </div>

{/* Main Container: Split Left (Timeline) & Right (Selected Step Details) */}
      <div className="flex-1 overflow-hidden flex min-h-0">
        
        {/* Left Sidebar Panel: Sequential Clickable Stage Timeline */}
        <div className="w-80 border-r border-[#dfdfdf] bg-white flex flex-col shrink-0 min-h-0">
          
          <div className="p-4 border-b border-[#efefff] bg-[#efefff]">
            <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest flex items-center gap-2">
              <History size={15} className="text-[#31d891]" />
              Onboarding Audit Steps
            </h3>
            <p className="text-[9px] text-[#4f525d] mt-0.5 uppercase tracking-wide">
              Click any step below to review historical data and submit review logs.
            </p>
          </div>

{/* Sequential Timeline Steps */}
          <div className="flex-1 overflow-y-auto p-4 space-y-3">
            {STAGE_NAMES.map((name, i) => {
              const isCurrent = i === request.currentStage;
              const isCompleted = i < request.currentStage;
              const isSelected = selectedStep === i;

// Find audit comment for this stage if any exists
              const stageComments = request.auditTrail.filter(entry => entry.stage === i);

return (
                <button
                  key={name}
                  onClick={() => setSelectedStep(i)}
                  className={cn(
                    "w-full text-left p-2.5 rounded-[3px] border transition-all flex items-start gap-3 relative group",
                    isSelected 
                      ? "bg-[#efefff] border-[#31d891] ring-1 ring-[#31d891]/15" 
                      : isCurrent 
                        ? "bg-amber-50/20 border-amber-300 hover:bg-[#efefff]"
                        : "bg-white border-[#dfdfdf] hover:bg-[#efefff]"
                  )}
                >
                  {/* Timeline Badge Indicators */}
                  <div className={cn(
                    "w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold font-mono shrink-0 border transition-all mt-0.5",
                    isCompleted 
                      ? "bg-[#e8f5e9] border-[#2e7d32] text-[#2e7d32]" 
                      : isCurrent 
                        ? "bg-[#fff3e0] border-[#e65100] text-[#e65100]" 
                        : "bg-white border-[#dfdfdf] text-[#868c95]"
                  )}>
                    {isCompleted ? <CheckCircle2 size={11} /> : i + 1}
                  </div>

<div className="min-w-0 flex-1">
                    <p className={cn(
                      "text-[10px] font-bold uppercase tracking-wide truncate",
                      isSelected ? "text-[#31d891]" : isCompleted ? "text-[#2e7d32]" : "text-[#100841]"
                    )}>
                      {name}
                    </p>
                    <div className="flex items-center gap-2 mt-0.5">
                      <span className="text-[8px] text-[#868c95] font-semibold uppercase">
                        {isCompleted ? "Verified Step" : isCurrent ? "Active Attention" : "Sequential Queue"}
                      </span>
                      {stageComments.length > 0 && (
                        <span className="text-[7.5px] bg-[#e3f2fd] text-[#0d47a1] px-1 py-0.5 rounded-[1px] font-mono font-bold">
                          {stageComments.length} LOGS
                        </span>
                      )}
                    </div>
                  </div>

{/* Tiny indicator if this stage holds active attention */}
                  {isCurrent && (
                    <span className="absolute right-2.5 top-2.5 w-1.5 h-1.5 rounded-full bg-amber-500 animate-ping" />
                  )}
                </button>
              );
            })}
          </div>

{/* Left Panel Bottom: Submit Audit Log comment */}
          <div className="p-4 border-t border-[#dfdfdf] bg-[#efefff]">
            <div className="relative">
              <MessageSquare className="absolute left-3 top-2.5 text-[#868c95]" size={12} />
              <textarea 
                placeholder="Type internal review comment for selected step..."
                value={auditComment}
                onChange={(e) => setAuditComment(e.target.value)}
                className="input-enterprise min-h-[60px] !pl-8 !py-2 !text-[11px] resize-none"
              >

{/* Right Content Panel: Dynamic Selected Step Details & Corporate Header */}

{/* Corporate Info Card (Expandable to see detail with attachments) */}

setIsCorporateInfoExpanded(!isCorporateInfoExpanded)} className="px-5 py-3.5 flex items-center justify-between cursor-pointer hover:bg-[#efefff] transition-colors select-none" >

Corporate Profile

{request.companyName}

Tax ID {request.corporateInfo?.registrationNumber || "N/A"}

{/* Expandable detailed profile panel */} {isCorporateInfoExpanded && (

Legal Registration No.

{request.corporateInfo?.registrationNumber || "N/A"}

Owner / Representative

{request.corporateInfo?.ownerName || "N/A"}

Owner NRIC Card ID

{request.corporateInfo?.ownerId || "N/A"}

Corporate Contacts

{request.corporateInfo?.contactNumber || "N/A"}

Registered Corporate Headquarters

{request.corporateInfo?.address || "N/A"}

{/* Document Attachments inside Expandable Area */}

Verified Compliance Documents ({request.documents.length})

{request.documents.map(doc => (

{doc.name}

certified verified

))}

)}

{/* Current Selected Stage Content Block */}

{/* Header of selected stage content */}

Stage Details: Step {selectedStep + 1} — {STAGE_NAMES[selectedStep]}

{selectedStep === request.currentStage ? "Requires Attention" : "Archive Record"}

{/* Stage Body */}

{/* STAGE 0: LOGIN VERIFICATION */} {selectedStep === 0 && (

This step verified that the company administrator possesses the designated mobile phone account associated with the enterprise.

Mobile Authenticator {request.corporateInfo?.contactNumber || "N/A"}

Verification Timestamp {new Date(request.submissionDate).toLocaleString()}

)} {/* STAGE 1: DOCUMENT UPLOAD */} {selectedStep === 1 && (

Upload and checksum check of statutory corporate certifications.

{request.documents.map(doc => (

{doc.name}

MD5: a98df...210ff

Verified

))}

)} {/* STAGE 2: PAYROLL POLICY */} {selectedStep === 2 && (

Registered corporate calendar rules for matching paydays, monthly EWA availability ranges, and cutoffs.

Salary Cutoff Day {request.payrollPolicy?.salaryCutoffDay || "25"}th of month

EWA Request Window Day {request.payrollPolicy?.ewaAllowStartDay || "1"} to {request.payrollPolicy?.ewaAllowEndDay || "20"}

Monthly Settlement Payday Day {request.payrollPolicy?.repaymentDay || "30"}

Standard Workdays Structure

{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(day => { const active = ["Mon", "Tue", "Wed", "Thu", "Fri"].includes(day); return ( {day} ); })}

)} {/* STAGE 3: CORPORATE INFO */} {selectedStep === 3 && (

Verified statutory corporate entities, owners, and tax IDs.

Corporate Entity Name {request.corporateInfo?.companyName}

Registration Number {request.corporateInfo?.registrationNumber}

)} {/* STAGE 4: EMPLOYEE DATA */} {selectedStep === 4 && (

A total of {request.employees.length} corporate employees are enrolled in the EWA benefits roster.

All verified

{request.employees.map(emp => ( ))}

Employee Name / ID	NRC Passport ID	Department	Monthly Base Salary
{emp.name} {emp.id}	{emp.nrc}	{emp.department}	{formatMMK(emp.salary)}

)} {/* STAGE 5: BUDGET REQUEST */} {selectedStep === 5 && (

Proposed EWA monthly pool capital allocation requested from external disbursement lines.

Approved EWA Liquidity Capital Pool {formatMMK(request.budgetAmount)}

Max Cap Limit (30% payroll) {formatMMK(request.employees.reduce((sum, e) => sum + e.salary, 0) * 0.3)}

)} {/* STAGE 6: OPERATION REVIEW — SETUP SERVICE & MAP FEES */} {selectedStep === 6 && (

Operations Action Required

Set up the service tier fees and map correct pricing profiles for corporate settlement.

{/* Choose Service Fee */}

Select Service Fee Profile

Applied per single EWA transaction draw down.

{/* Choose Repayment Fee */}

Select Repayment Fee Profile

Calculated dynamically at salary repayment day.

{/* Dynamic Pricing Outputs */}

Mapped Service Charge

{selectedServiceFee.name}

{selectedServiceFee.calculationType === 'fixed' ? "MMK 12,500 Fixed" : "Tiered Calculation"}

Mapped Repayment Charge

{selectedRepaymentFee.name}

{selectedRepaymentFee.value}% of total repayment

{/* Simulator pop up button and main stage advance buttons */}

{request.currentStage === 6 && ( )}

)} {/* STAGE 7: RISK REVIEW — EDITABLE POLICY LIMITS & CAPS */} {selectedStep === 7 && (

Risk Audit Active

Verify payroll schedules and define allowable EWA disbursement risk thresholds.

{/* Non-editable payroll schedule for risk context */}

Active Payroll Schedule Context

Cutoff: {request.payrollPolicy?.salaryCutoffDay || "25"}th of month

Pay Day: Day {request.payrollPolicy?.payDay || "30"}

Request Gap: {request.payrollPolicy?.gapPolicy || "3 Days"}

{/* Editable limits */}

Configure Risk Threshold Caps

{/* Allowable EWA Amount limit per transaction */}

Allowable EWA Limit setAllowableAmountLimit(Number(e.target.value))} className="input-enterprise font-mono font-bold text-[#100841]" />

Max per drawdown request

{/* Max Cap per Employee */}

Max Cap Per Employee setMaxCapEmployee(Number(e.target.value))} className="input-enterprise font-mono font-bold text-[#100841]" />

Aggregate monthly limit

{/* Max Cap per Corporate */}

Max Cap Per Corporate Pool setMaxCapCorporate(Number(e.target.value))} className="input-enterprise font-mono font-bold text-[#100841]" />

Hard limit pool cap (MMK)

{/* Actions */} {request.currentStage === 7 && (

)}

)} {/* STAGE 8: FINANCE ACTION — LEDGER BALANCING */} {selectedStep === 8 && (

Finance Ledger Ready for Activation

Validate dynamic Double-Entry balancing and sync with the Circle General Ledger.

{/* Double Entry Ledger Table */}

Double-Entry Circle Ledger Projection

Account Title	Type	Debit (MMK)	Credit (MMK)
Disbursement Pool (Asset)	Asset Account	{formatMMK(request.budgetAmount)}	0 MMK
Apex Corporate Payable Account	Liability Account	0 MMK	{formatMMK(request.budgetAmount)}
Mapped Operations Revenue Account	Equity/Revenue	12,500 MMK	0 MMK
Repayment Receivables (Apex Staff)	Receivables	0 MMK	12,500 MMK
LEDGER BALANCE PROJECTION:		{formatMMK(request.budgetAmount + 12500)}	{formatMMK(request.budgetAmount + 12500)}

{/* Balance Check Box */}

Zero-Balance Verification Passed Total Debits = Total Credits

{/* Actions */} {request.status !== "completed" && (

)}

{/* ─── STAGE 6: DRAWDOWN & FEE SIMULATION POP-UP DIALOG ─── */} {isSimulatorOpen && (

{/* Simulator Header */}

Dynamic Drawdown & Fee Simulation

Verify policy output under mapped pricing fees in real-time

{/* Simulator Content Area: Split Input & Logs */}

{/* Inputs Column */}

Drawdown Parameters

EWA Request Size (MMK) setSimAmount(Number(e.target.value))} className="input-enterprise font-mono font-bold" />

Late Overdue Days (Arrears Check) setSimLateDays(Number(e.target.value))} className="input-enterprise font-mono font-bold" />

Staff Member Tenure (Months) setSimTenure(Number(e.target.value))} className="input-enterprise font-mono font-bold" />

Calendar Request Day setSimDay(Number(e.target.value))} className="input-enterprise font-mono font-bold" min={1} max={31} />

{/* Mathematical Summation and Trace Outputs */}

{/* Math Summation Summary */}

Trace Mathematical Summation

Selected Service Fee ({selectedServiceFee.id}): {formatMMK(simulatedFeeResult.serviceFee)}

Selected Repayment Fee ({selectedRepaymentFee.id}): {formatMMK(simulatedFeeResult.repaymentFee)}

{simulatedFeeResult.latePenalty > 0 && (

Arrears Overdue Penalty (5.0%): +{formatMMK(simulatedFeeResult.latePenalty)}

)}

Net Computed Drawdown Fee: {formatMMK(simulatedFeeResult.netComputedFee)}

{/* Engine Logs Terminal */}

{simulatedFeeResult.logs.map((log, i) => (

{log}

))}

{/* Pop up Footer */}

)}

); } [V0_FILE]typescriptreact:file="client/src/modules/onboarding/OnboardingWizard.tsx" /** * OnboardingWizard — Spacious Corporate Onboarding Flow * A 9-stage state-driven stepper that comes pre-filled with default Myanmar corporate data. * When submitted, it appends a new request at Stage 6 (Operation Review) so users can immediately trace advanced workflows. */ import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, ChevronRight, ChevronLeft, Upload, Users, FileCheck, ShieldCheck, Building2, CreditCard, Search, Download, AlertCircle, Calculator, PlayCircle, Clock, User, MessageSquare, CheckCircle2 } from "lucide-react"; import { STAGE_NAMES, OnboardingRequest, BUDGET_STAGE_NAMES, OnboardingEmployee } from "./types"; import { MOCK_FEES, MOCK_EMPLOYEES } from "./mockData"; import { cn } from "@/lib/utils"; interface OnboardingWizardProps { initialMode?: "onboarding" | "budget_request"; onRequestClose: () => void; onSubmit: (request: OnboardingRequest) => void; } export default function OnboardingWizard({ initialMode = "onboarding", onRequestClose, onSubmit }: OnboardingWizardProps) { const [mode] = useState(initialMode); const [currentStep, setCurrentStep] = useState(0); const [completedSteps, setCompletedSteps] = useState([0, 1, 2, 3, 4, 5]); // Pre-filled form states for the prototype demo const [companyName, setCompanyName] = useState("Apex Frontier Group"); const [registrationNumber, setRegistrationNumber] = useState("REG-2026-APX"); const [address, setAddress] = useState("88 Merchant Road, Sule, Yangon, Myanmar"); const [ownerName, setOwnerName] = useState("U Aung Min"); const [ownerId, setOwnerId] = useState("12/YAKANA(N)998877"); const [contactNumber, setContactNumber] = useState("09 987654321"); const [budgetAmount, setBudgetAmount] = useState(5000000); const [employees, setEmployees] = useState(MOCK_EMPLOYEES); const stages = mode === "onboarding" ? STAGE_NAMES : BUDGET_STAGE_NAMES; const handleNext = () => { if (!completedSteps.includes(currentStep)) { setCompletedSteps([...completedSteps, currentStep]); } if (currentStep < stages.length - 1) { setCurrentStep(currentStep + 1); } else { // Final submission! Construct the request object const newRequest: OnboardingRequest = { id: `REQ-2026-${String(Math.floor(Math.random() * 900) + 100)}`, type: mode, companyId: `COM-${String(Math.floor(Math.random() * 90) + 10)}`, companyName, currentStage: 6, // Go directly to Operations review to allow immediate, interactive step tracing! status: "pending_review", submissionDate: new Date().toISOString(), progress: 66, documents: [ { id: "DOC-01", name: "Business Registration (Form 6/26)", type: "pdf", status: "verified", uploadDate: "2026-07-14" }, { id: "DOC-02", name: "Tax Clearance Certificate", type: "pdf", status: "verified", uploadDate: "2026-07-14" }, { id: "DOC-03", name: "Director Identity Card / NRIC", type: "pdf", status: "verified", uploadDate: "2026-07-14" }, { id: "DOC-04", name: "Bank Account Details (Company)", type: "pdf", status: "verified", uploadDate: "2026-07-14" } ], payrollPolicy: { workingDays: ["Mon", "Tue", "Wed", "Thu", "Fri"], salaryCutoffDay: 25, payDay: 30, ewaAllowStartDay: 1, ewaAllowEndDay: 20, repaymentDay: 30, effectiveDate: "2026-08-01", gapPolicy: "Standard 3-day verification gap" }, corporateInfo: { companyName, registrationNumber, address, ownerName, ownerId, contactNumber }, employees, budgetAmount, selectedFees: [], auditTrail: [ { id: "AUD-101", stage: 0, action: "Login Verified", actorName: "HR Manager", actorRole: "HR", timestamp: new Date().toISOString() }, { id: "AUD-102", stage: 1, action: "Documents Uploaded", actorName: "HR Manager", actorRole: "HR", timestamp: new Date().toISOString(), comment: "Automated verification complete." }, { id: "AUD-103", stage: 5, action: "Budget Submitted", actorName: "HR Manager", actorRole: "HR", timestamp: new Date().toISOString() } ] }; onSubmit(newRequest); } }; const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; return (

{/* Sidebar Progress Stepper */}

{stages.map((name, index) => { const isActive = currentStep === index; const isCompleted = completedSteps.includes(index); const isLocked = index > Math.max(...completedSteps, -1) + 1; return ( ); })}

{/* Main Form Fields Panel */}

{stages[currentStep]} Step Content

Provide or confirm the registered values to advance company setup.

{currentStep === 0 && (

Verification Completed

Your account is authenticated via registered SMS verification.

Phone Number setContactNumber(e.target.value)} className="input-enterprise font-mono font-bold" />

Verified Account: {companyName}

Registration Status: Authenticated

)} {currentStep === 1 && (

Verify all corporate legal filings. The system automatically prefilled verified files for testing.

{[ "Business Registration (Form 6/26)", "Tax Clearance Certificate", "Director Identity Card / NRIC", "Bank Account Details (Company)" ].map((docName, i) => (

{docName}

verified

Attachment_V3.pdf

))}

)} {currentStep === 2 && (

Working Days

{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(day => ( ))}

Repayment Method

Payroll Cycle Setup

Salary Cut-off Day

EWA Eligible Days Range

)} {currentStep === 3 && (

Company Legal Name setCompanyName(e.target.value)} className="input-enterprise font-bold text-[#100841]" />

Registration Number setRegistrationNumber(e.target.value)} className="input-enterprise font-mono font-bold" />

Corporate Address

setAddress(e.target.value)}
                      className="input-enterprise resize-none font-bold"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest block">Owner / Director Name</label>
                    <input 
                      type="text" 
                      value={ownerName}
                      onChange={(e) => setOwnerName(e.target.value)}
                      className="input-enterprise font-bold"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest block">Owner NRC ID</label>
                    <input 
                      type="text" 
                      value={ownerId}
                      onChange={(e) => setOwnerId(e.target.value)}
                      className="input-enterprise font-mono font-bold"
                    />
                  </div>
                </div>
              </div>
            )}

{currentStep === 4 && (
              <div className="space-y-4">
                <p className="text-[11px] text-[#4f525d]">Verified workforce to be enrolled into the EWA ledger benefits.</p>
                <div className="border border-[#dfdfdf] rounded-[3px] overflow-hidden max-h-[220px] overflow-y-auto">
                  <table className="w-full text-left border-collapse">
                    <thead className="bg-[#efefff] sticky top-0 border-b border-[#dfdfdf]">
                      <tr>
                        <th className="px-3 py-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Employee</th>
                        <th className="px-3 py-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Position</th>
                        <th className="px-3 py-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Base Salary</th>
                        <th className="px-3 py-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Status</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-[#efefff]">
                      {employees.map((emp) => (
                        <tr key={emp.id} className="hover:bg-[#efefff] transition-colors">
                          <td className="px-3 py-2">
                            <p className="text-[11px] font-bold text-[#100841]">{emp.name}</p>
                            <span className="text-[8px] font-mono text-slate-400">{emp.id}</span>
                          </td>
                          <td className="px-3 py-2 text-[10px] text-[#4f525d]">{emp.position}</td>
                          <td className="px-3 py-2 text-[10px] font-mono text-[#100841] font-bold">MMK {emp.salary.toLocaleString()}</td>
                          <td className="px-3 py-2">
                            <span className="status-badge-success !text-[8px] !px-1.5">verified</span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

{currentStep === 5 && (
              <div className="space-y-4 flex flex-col items-center">
                <div className="w-12 h-12 rounded-full bg-[#e3f2fd] flex items-center justify-center border border-[#bbdefb] mb-1">
                  <Calculator size={20} className="text-[#1565c0]" />
                </div>
                <div className="text-center">
                  <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">Dynamic Budget Proposal</h3>
                  <p className="text-[10px] text-[#4f525d] mt-0.5">Proposed EWA pool allocation based on verified workforce salaries.</p>
                </div>

<div className="w-full max-w-md card-enterprise overflow-hidden border-t-2 border-t-[#100841]">
                  <div className="p-4 space-y-3">
                    <div className="flex items-center justify-between border-b border-[#efefff] pb-2 text-[11px]">
                      <span className="text-[#4f525d] font-medium">Aggregated Monthly Payroll</span>
                      <span className="font-mono text-[#100841] font-bold">MMK {employees.reduce((sum, e) => sum + e.salary, 0).toLocaleString()}</span>
                    </div>
                    <div className="flex items-center justify-between border-b border-[#efefff] pb-2 text-[11px]">
                      <span className="text-[#4f525d] font-medium">Standard EWA Liquidity Cap</span>
                      <span className="font-mono text-[#31d891] font-bold">30% Max</span>
                    </div>
                    <div className="flex items-center justify-between pt-1">
                      <span className="text-[10px] font-bold text-[#100841] uppercase tracking-wider">Requested Budget Pool</span>
                      <div className="flex items-center gap-1.5">
                        <span className="text-[10px] text-[#4f525d] font-bold">MMK</span>
                        <input 
                          type="number"
                          value={budgetAmount}
                          onChange={(e) => setBudgetAmount(Number(e.target.value))}
                          className="input-enterprise !w-32 text-right font-mono font-bold text-[#31d891] !py-0.5"
                        />
                      </div>
                    </div>
                  </div>
                  <div className="bg-[#efefff] px-3 py-2 border-t border-[#dfdfdf] flex items-center gap-1.5">
                    <ShieldCheck size={12} className="text-[#2e7d32]" />
                    <p className="text-[9px] text-[#4f525d] italic font-bold uppercase tracking-tight">EWA Limit pre-validated by compliance rules</p>
                  </div>
                </div>
              </div>
            )}

{currentStep > 5 && (
              <div className="space-y-4">
                <div className="message-strip-warning">
                  <ShieldCheck size={14} className="shrink-0 text-[#e65100]" />
                  <div>
                    <p className="font-bold uppercase tracking-wider text-[10px]">Under Review Simulation</p>
                    <p className="mt-0.5 opacity-80 text-[10px]">These steps are advanced stages. To trace them dynamically, submit this corporate record to trace each flow step-by-step!</p>
                  </div>
                </div>
                <div className="card-enterprise p-5 text-center space-y-3">
                  <p className="text-[12px] font-bold text-[#100841]">Pre-fill and proceed to registration.</p>
                  <p className="text-[10px] text-[#4f525d] leading-relaxed">
                    By submitting now, this company registration is created dynamically at Stage 6 (Operation Review) allowing you to view and interact with real back-office actions instantly.
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>

{/* Spacious Wizard Footer */}
        <div className="border-t border-[#dfdfdf] bg-[#efefff] px-6 py-3.5 flex items-center justify-between shrink-0">
          <button 
            onClick={handleBack}
            disabled={currentStep === 0}
            className="btn-enterprise-secondary disabled:opacity-40 disabled:cursor-not-allowed"
          >
            <ChevronLeft size={14} />
            <span>Previous Step</span>
          </button>
          
          <div className="flex items-center gap-2">
            <button 
              onClick={() => {
                // Instantly prefill & submit for quick prototype tracing
                setCompanyName("Apex Frontier Group");
                setRegistrationNumber("REG-2026-APX");
                setAddress("88 Merchant Road, Sule, Yangon, Myanmar");
                setOwnerName("U Aung Min");
                setOwnerId("12/YAKANA(N)998877");
                setContactNumber("09 987654321");
                setBudgetAmount(5000000);
                setCurrentStep(stages.length - 1);
              }}
              className="btn-enterprise-secondary !border-dashed text-[#31d891] hover:border-[#31d891]"
            >
              Quick Auto-Fill
            </button>
            <button 
              onClick={handleNext}
              className="btn-enterprise-primary"
            >
              <span>{currentStep === stages.length - 1 ? "Register & Trace Corporate Onboarding" : "Save & Continue"}</span>
              <ChevronRight size={14} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/admin/AdminPage.tsx"
/**
 * AdminPage — Platform Admin Configuration
 * Design: Neobrutalist Fintech — System configuration, role management, policies, and audit log
 */
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { formatMMK } from "@/data/mockData";
import { Settings, Users, Lock, FileText, ShieldCheck, Key, Globe, Eye, ChevronRight } from "lucide-react";
import { useState } from "react";
import { useView, ViewType as ViewTypeRole, ModuleId } from "@/contexts/ViewContext";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface RoleMetadata {
  id: ViewTypeRole;
  label: string;
  description: string;
}

interface AuditLog {
  id: string;
  action: string;
  user: string;
  module: string;
  timestamp: string;
  details: string;
}

const roleMetadata: RoleMetadata[] = [
  { id: "HR", label: "HR", description: "Employee lifecycle, onboarding, payroll oversight" },
  { id: "Sales", label: "Sales", description: "Corporate portfolio, revenue, client health" },
  { id: "Operations", label: "Operations", description: "Daily operations, disbursements, settlements" },
  { id: "Back Office", label: "Back Office", description: "Transaction processing, verification, reconciliation" },
  { id: "Finance", label: "Finance", description: "GL ledger, accounting entries, financial health" },
  { id: "Risk", label: "Risk", description: "Credit risk, compliance, fraud detection" },
  { id: "Platform Admin", label: "Platform Admin", description: "System configuration, policies, platform health" },
];

const auditLog: AuditLog[] = [
  { id: "AUD-001", action: "Policy Updated", user: "Finance Manager", module: "Fee Builder", timestamp: "2026-07-12 10:30", details: "Late fee rate changed from 0.1% to 0.15% for Skyline Trading" },
  { id: "AUD-002", action: "Employee Verified", user: "Operations Lead", module: "Employees", timestamp: "2026-07-12 09:45", details: "Htet Oo Kyaw — Employment verified and EWA auto-approved" },
  { id: "AUD-003", action: "Budget Allocated", user: "Sales Manager", module: "Budget", timestamp: "2026-07-12 08:00", details: "Golden Harvest Foods budget increased to 15,000,000 MMK" },
  { id: "AUD-004", action: "Company Onboarded", user: "Back Office", module: "Onboarding", timestamp: "2026-07-11 16:00", details: "Golden Harvest Foods moved to ACTIVE status" },
  { id: "AUD-005", action: "Risk Assessment", user: "Risk Analyst", module: "Risk", timestamp: "2026-07-11 14:00", details: "Skyline Trading credit score recalculated to 78" },
];

export function AdminPage() {
  const { allModuleConfigs, rolePermissions, updateRolePermissions } = useView();
  const [activeTab, setActiveTab] = useState("modules");
  const [selectedRole, setSelectedRole] = useState<ViewTypeRole>("HR");

const viewTypeColumns: ColumnDef<RoleMetadata>[] = [
    {
      id: "label",
      header: "View Type",
      accessor: (rm) => <EnterpriseBadge variant="info" className="bg-[#100841] text-white border-[#100841] font-bold">{rm.label}</EnterpriseBadge>,
      searchString: (rm) => rm.label
    },
    {
      id: "description",
      header: "Description",
      accessor: (rm) => <span className="text-[12px] text-[#4f525d]">{rm.description}</span>,
      searchString: (rm) => rm.description
    },
    {
      id: "modules",
      header: "Accessible Modules",
      accessor: (rm) => (
        <div className="flex flex-wrap gap-1">
          {rolePermissions[rm.id].map(mId => {
            const mod = allModuleConfigs.find(config => config.id === mId);
            return (
              <span key={mId} className="text-[9px] px-2 py-0.5 rounded-full bg-slate-100 text-[#4f525d] font-bold uppercase tracking-wider">
                {mod?.label || mId}
              </span>
            );
          })}
        </div>
      )
    }
  ];

const roleActions: TableAction<RoleMetadata>[] = [
    {
      label: "Configure Modules",
      icon: <Settings className="w-3.5 h-3.5" />,
      onClick: (rm) => {
        setSelectedRole(rm.id);
        setActiveTab("modules");
      }
    }
  ];

const auditColumns: ColumnDef<AuditLog>[] = [
    {
      id: "id",
      header: "Log ID",
      accessor: (a) => <span className="text-[11px] font-mono text-[#4f525d] font-bold">{a.id}</span>,
      searchString: (a) => a.id
    },
    {
      id: "action",
      header: "Action",
      accessor: (a) => <EnterpriseBadge variant="info">{a.action}</EnterpriseBadge>,
      searchString: (a) => a.action
    },
    {
      id: "user",
      header: "User",
      accessor: (a) => <span className="text-[12px] font-bold text-[#100841]">{a.user}</span>,
      searchString: (a) => a.user
    },
    {
      id: "module",
      header: "Module",
      accessor: (a) => <span className="text-[11px] font-bold text-[#4f525d] uppercase tracking-wider">{a.module}</span>
    },
    {
      id: "details",
      header: "Details",
      accessor: (a) => <span className="text-[11px] text-[#4f525d] max-w-[300px] truncate block">{a.details}</span>,
      searchString: (a) => a.details
    },
    {
      id: "timestamp",
      header: "Timestamp",
      accessor: (a) => <span className="text-[10px] font-mono text-[#868c95]">{a.timestamp}</span>
    }
  ];

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList>
          <TabsTrigger value="modules"><Settings className="w-3.5 h-3.5" /> Modules</TabsTrigger>
          <TabsTrigger value="roles"><Users className="w-3.5 h-3.5" /> View Types</TabsTrigger>
          <TabsTrigger value="audit"><FileText className="w-3.5 h-3.5" /> Audit Log</TabsTrigger>
          <TabsTrigger value="system"><Globe className="w-3.5 h-3.5" /> System</TabsTrigger>
        </TabsList>

<TabsContent value="modules" className="outline-none space-y-4">
          <EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Module Access Configuration</h3>
                <p className="text-[10px] text-[#4f525d] uppercase mt-1">Select a role to configure accessible modules</p>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-[11px] font-bold text-[#100841] uppercase">Configuring:</span>
                <Select value={selectedRole} onValueChange={(val) => setSelectedRole(val as ViewTypeRole)}>
                  <SelectTrigger className="w-[180px] h-8 text-[11px] font-bold border-[#dfdfdf]">
                    <SelectValue placeholder="Select Role" />
                  </SelectTrigger>
                  <SelectContent>
                    {roleMetadata.map(role => (
                      <SelectItem key={role.id} value={role.id} className="text-[11px]">
                        {role.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {allModuleConfigs.map(mod => (
                <div key={mod.id} className="flex items-start gap-3 p-3 rounded-[3px] bg-[#efefff] border border-[#dfdfdf] transition-colors hover:bg-white">
                  <Switch 
                    checked={rolePermissions[selectedRole].includes(mod.id)} 
                    onCheckedChange={(checked) => handleToggleModule(mod.id, checked)}
                    className="mt-1" 
                  />
                  <div>
                    <p className="text-[12px] font-bold text-[#100841]">{mod.label}</p>
                    <p className="text-[10px] text-[#4f525d] mt-0.5 leading-tight">Module ID: {mod.id}</p>
                  </div>
                </div>
              ))}
            </div>
          </EnterpriseCard>
        </TabsContent>

<TabsContent value="roles" className="outline-none">
          <EnterpriseTable
            data={roleMetadata}
            columns={viewTypeColumns}
            rowKey={(rm) => rm.id}
            actions={roleActions}
            searchPlaceholder="Search view types..."
          />
        </TabsContent>

<TabsContent value="audit" className="outline-none">
          <EnterpriseTable
            data={auditLog}
            columns={auditColumns}
            rowKey={(a) => a.id}
            searchPlaceholder="Search audit log..."
          />
        </TabsContent>

<TabsContent value="system" className="outline-none">
          <EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm space-y-3">
            <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-2">System Configuration</h3>
            <div className="flex items-center justify-between p-3 rounded-[3px] bg-[#efefff] border border-[#dfdfdf]">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-[#e3f2fd] flex items-center justify-center">
                  <Lock className="w-4 h-4 text-[#31d891]" />
                </div>
                <div>
                  <p className="text-[12px] font-bold text-[#100841]">Maker-Checker Enforcement</p>
                  <p className="text-[10px] text-[#4f525d]">Require two-person approval for settlements and write-offs</p>
                </div>
              </div>
              <Switch defaultChecked />
            </div>
            <div className="flex items-center justify-between p-3 rounded-[3px] bg-[#efefff] border border-[#dfdfdf]">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-[#e8f5e9] flex items-center justify-center">
                  <ShieldCheck className="w-4 h-4 text-emerald-500" />
                </div>
                <div>
                  <p className="text-[12px] font-bold text-[#100841]">Auto Approval for Trusted Employees</p>
                  <p className="text-[10px] text-[#4f525d]">Skip manual review for employees with both verifications passed</p>
                </div>
              </div>
              <Switch defaultChecked />
            </div>
            <div className="flex items-center justify-between p-3 rounded-[3px] bg-[#efefff] border border-[#dfdfdf]">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-[#fff8e1] flex items-center justify-center">
                  <Key className="w-4 h-4 text-amber-500" />
                </div>
                <div>
                  <p className="text-[12px] font-bold text-[#100841]">Late Fee Auto-Calculation</p>
                  <p className="text-[10px] text-[#4f525d]">Automatically calculate late fees based on configured slab rates</p>
                </div>
              </div>
              <Switch defaultChecked />
            </div>
            <div className="flex items-center justify-between p-3 rounded-[3px] bg-[#efefff] border border-[#dfdfdf]">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-[#efefff] flex items-center justify-center">
                  <Globe className="w-4 h-4 text-blue-500" />
                </div>
                <div>
                  <p className="text-[12px] font-bold text-[#100841]">Currency: MMK (Myanmar Kyat)</p>
                  <p className="text-[10px] text-[#4f525d]">Platform default currency for all transactions</p>
                </div>
              </div>
              <EnterpriseBadge variant="neutral" className="text-[9px] font-bold">LOCKED</EnterpriseBadge>
            </div>
          </EnterpriseCard>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/bank-integration/BankIntegrationPage.tsx"
/**
 * BankIntegrationPage — Pay Channel Integration, Prefund Accounts, Bank Service Fees
 * Design: Enterprise Fintech — Deep Navy (#100841) + Teal (#31d891)
 */
import { useState } from "react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Landmark, Building2, Smartphone, Banknote, ArrowRightLeft, ShieldCheck, AlertTriangle, Plus, Eye, History, RefreshCcw } from "lucide-react";
import { cn } from "@/lib/utils";

function formatMMK(amount: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "MMK", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount);
}

interface PayChannel {
  id: string;
  bankName: string;
  channelType: "BANK_TRANSFER" | "MOBILE_WALLET" | "INSTANT_PAYMENT";
  accountNumber: string;
  prefundBalance: number;
  minPrefund: number;
  serviceFee: number;
  serviceFeeType: "FLAT" | "PERCENT";
  status: "ACTIVE" | "PENDING" | "SUSPENDED";
  ledgerAccount: string;
  lastSync: string;
}

const payChannels: PayChannel[] = [
  { id: "CH-001", bankName: "KBZ Bank", channelType: "BANK_TRANSFER", accountNumber: "001-234567-890", prefundBalance: 15000000, minPrefund: 5000000, serviceFee: 1500, serviceFeeType: "FLAT", status: "ACTIVE", ledgerAccount: "COA-2100-KBZ", lastSync: "2026-07-10 14:30" },
  { id: "CH-002", bankName: "AYA Bank", channelType: "BANK_TRANSFER", accountNumber: "002-345678-901", prefundBalance: 10000000, minPrefund: 5000000, serviceFee: 1500, serviceFeeType: "FLAT", status: "ACTIVE", ledgerAccount: "COA-2100-AYA", lastSync: "2026-07-10 14:28" },
  { id: "CH-003", bankName: "CB Bank", channelType: "BANK_TRANSFER", accountNumber: "003-456789-012", prefundBalance: 3000000, minPrefund: 5000000, serviceFee: 1500, serviceFeeType: "FLAT", status: "ACTIVE", ledgerAccount: "COA-2100-CB", lastSync: "2026-07-10 14:15" },
  { id: "CH-004", bankName: "Wave Money", channelType: "MOBILE_WALLET", accountNumber: "WM-077-1234567", prefundBalance: 8000000, minPrefund: 2000000, serviceFee: 500, serviceFeeType: "FLAT", status: "ACTIVE", ledgerAccount: "COA-2100-WM", lastSync: "2026-07-10 14:32" },
  { id: "CH-005", bankName: "KBZ Pay", channelType: "MOBILE_WALLET", accountNumber: "KP-077-2345678", prefundBalance: 12000000, minPrefund: 2000000, serviceFee: 0.5, serviceFeeType: "PERCENT", status: "ACTIVE", ledgerAccount: "COA-2100-KP", lastSync: "2026-07-10 14:31" },
  { id: "CH-006", bankName: "Myanmar Post Bank", channelType: "INSTANT_PAYMENT", accountNumber: "MPB-567890-123", prefundBalance: 7000000, minPrefund: 3000000, serviceFee: 1000, serviceFeeType: "FLAT", status: "PENDING", ledgerAccount: "COA-2100-MPB", lastSync: "2026-07-09 16:00" },
];

interface LedgerFlow {
  id: string;
  date: string;
  channelId: string;
  channelName: string;
  type: "PREFUND_DEPOSIT" | "DISBURSEMENT_DEBIT" | "SERVICE_FEE" | "RECONCILIATION" | "REFUND";
  amount: number;
  journalRef: string;
  balance: number;
  description: string;
}

const ledgerFlows: LedgerFlow[] = [
  { id: "LF-001", date: "2026-07-10 09:00", channelId: "CH-001", channelName: "KBZ Bank", type: "PREFUND_DEPOSIT", amount: 5000000, journalRef: "JE-2026-0950", balance: 15000000, description: "Prefund top-up from bank transfer" },
  { id: "LF-002", date: "2026-07-10 09:18", channelId: "CH-001", channelName: "KBZ Bank", type: "DISBURSEMENT_DEBIT", amount: -50000, journalRef: "JE-2026-1001", balance: 14950000, description: "Disbursement to EMP-001 Aung Kyaw" },
  { id: "LF-003", date: "2026-07-10 09:18", channelId: "CH-001", channelName: "KBZ Bank", type: "SERVICE_FEE", amount: -1500, journalRef: "JE-2026-1001-FEE", balance: 14948500, description: "Bank service fee for transaction DISB-001" },
  { id: "LF-004", date: "2026-07-10 10:31", channelId: "CH-004", channelName: "Wave Money", type: "DISBURSEMENT_DEBIT", amount: -75000, journalRef: "JE-2026-1002", balance: 7925000, description: "Disbursement to EMP-003 Thet Hnin" },
  { id: "LF-005", date: "2026-07-10 10:31", channelId: "CH-004", channelName: "Wave Money", type: "SERVICE_FEE", amount: -500, journalRef: "JE-2026-1002-FEE", balance: 7924500, description: "Bank service fee for transaction DISB-002" },
  { id: "LF-006", date: "2026-07-10 11:00", channelId: "CH-001", channelName: "KBZ Bank", type: "DISBURSEMENT_DEBIT", amount: -60000, journalRef: "JE-2026-1006", balance: 14888500, description: "Disbursement to EMP-002 Nyein Chan" },
];

export function BankIntegrationPage() {
  const [selectedChannel, setSelectedChannel] = useState<PayChannel | null>(null);

const channelColumns: ColumnDef<PayChannel>[] = [
    {
      id: "id",
      header: "Channel ID",
      accessor: (ch) => <span className="font-mono font-bold text-[#100841]">{ch.id}</span>,
      searchString: (ch) => ch.id
    },
    {
      id: "bank",
      header: "Counterparty Bank",
      accessor: (ch) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{ch.bankName}</p>
          <div className="flex items-center gap-1 mt-0.5">
            <span className="text-[9px] text-[#4f525d] font-mono">{ch.accountNumber}</span>
          </div>
        </div>
      ),
      searchString: (ch) => `${ch.bankName} ${ch.accountNumber}`
    },
    {
      id: "type",
      header: "Channel Type",
      accessor: (ch) => {
        const icons = {
          "BANK_TRANSFER": Building2,
          "MOBILE_WALLET": Smartphone,
          "INSTANT_PAYMENT": Banknote
        };
        const Icon = icons[ch.channelType];
        return (
          <div className="flex items-center gap-2 text-[#4f525d]">
            <Icon className="w-3.5 h-3.5" />
            <span className="text-[10px] font-bold uppercase tracking-tight">{ch.channelType.replace("_", " ")}</span>
          </div>
        );
      }
    },
    {
      id: "balance",
      header: "Prefund Balance",
      isNumeric: true,
      align: "right",
      accessor: (ch) => {
        const lowBalance = ch.prefundBalance < ch.minPrefund;
        return (
          <div className="flex flex-col items-end">
            <span className={cn("font-mono font-bold text-[12px]", lowBalance ? "text-[#c62828]" : "text-[#2e7d32]")}>
              {formatMMK(ch.prefundBalance)}
            </span>
            <span className="text-[8px] text-[#4f525d] uppercase">Min: {formatMMK(ch.minPrefund)}</span>
          </div>
        );
      }
    },
    {
      id: "ledger",
      header: "Ledger Map",
      accessor: (ch) => <span className="text-[10px] font-mono text-[#4f525d] bg-[#efefff] px-1.5 py-0.5 rounded-[2px] border border-[#dfdfdf]">{ch.ledgerAccount}</span>
    },
    {
      id: "status",
      header: "Channel Status",
      accessor: (ch) => <EnterpriseBadge variant={ch.status === "ACTIVE" ? "success" : "warning"}>{ch.status}</EnterpriseBadge>
    }
  ];

const channelActions: TableAction<PayChannel>[] = [
    {
      label: "Full Specification",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (ch) => setSelectedChannel(ch)
    },
    {
      label: "Ledger History",
      icon: <History className="w-3.5 h-3.5" />,
      onClick: (ch) => console.log("History", ch.id)
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Landmark className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Bank Integration Hub</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Pay channel orchestration, prefund accounts, and bank ledger reconciliation</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841]">
            <Plus className="w-3.5 h-3.5" /> Integrate New Channel
          </EnterpriseButton>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Total Prefund Assets"
          value={formatMMK(payChannels.reduce((sum, ch) => sum + ch.prefundBalance, 0))}
          accentColor="info"
          icon={<Banknote className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
        <EnterpriseKpiCard
          label="Active Pay Channels"
          value={payChannels.filter(c => c.status === "ACTIVE").length}
          accentColor="success"
          icon={<ShieldCheck className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Low Balance Alerts"
          value={payChannels.filter(c => c.prefundBalance < c.minPrefund).length}
          accentColor="error"
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#c62828]" />}
        />
        <EnterpriseKpiCard
          label="Last Sync Status"
          value="HEALTHY"
          accentColor="success"
          icon={<RefreshCcw className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
      </div>

<Tabs defaultValue="channels" className="w-full">
        <TabsList>
          <TabsTrigger value="channels">Channel Registry</TabsTrigger>
          <TabsTrigger value="ledger">Unified Ledger Flow</TabsTrigger>
          <TabsTrigger value="reconciliation">Reconciliation Audit</TabsTrigger>
        </TabsList>

<TabsContent value="channels" className="mt-4 outline-none">
          <EnterpriseTable
            data={payChannels}
            columns={channelColumns}
            rowKey={(ch) => ch.id}
            actions={channelActions}
            searchPlaceholder="Search banks, accounts, or channels..."
          />
          
          {selectedChannel && (
            <EnterpriseCard className="mt-6 p-6 border-[#dfdfdf] bg-[#efefff]">
               <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center gap-2">
                   <Building2 className="w-4 h-4 text-[#100841]" />
                   <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">{selectedChannel.bankName} — Technical Specification</h3>
                 </div>
                 <EnterpriseButton variant="secondary" className="h-7 text-[10px]" onClick={() => setSelectedChannel(null)}>Close</EnterpriseButton>
               </div>
               
               <div className="grid grid-cols-4 gap-6">
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Account Details</p>
                    <p className="text-[12px] font-mono font-bold text-[#100841]">{selectedChannel.accountNumber}</p>
                    <p className="text-[10px] text-[#4f525d]">{selectedChannel.channelType.replace("_", " ")}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Prefund Liquidity</p>
                    <p className={cn("text-[14px] font-mono font-bold", selectedChannel.prefundBalance < selectedChannel.minPrefund ? "text-[#c62828]" : "text-[#2e7d32]")}>
                      {formatMMK(selectedChannel.prefundBalance)}
                    </p>
                    <p className="text-[10px] text-[#4f525d]">Min Threshold: {formatMMK(selectedChannel.minPrefund)}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Service Fee Model</p>
                    <p className="text-[12px] font-bold text-[#e65100]">
                      {selectedChannel.serviceFeeType === "PERCENT" ? selectedChannel.serviceFee + "%" : formatMMK(selectedChannel.serviceFee)}
                    </p>
                    <p className="text-[10px] text-[#4f525d] uppercase">Per Transaction</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">GL Configuration</p>
                    <p className="text-[12px] font-mono font-bold text-[#100841]">{selectedChannel.ledgerAccount}</p>
                    <p className="text-[10px] text-[#4f525d] uppercase">Mapping: Assets/Bank</p>
                  </div>
               </div>

<div className="mt-8 p-4 bg-white border border-[#dfdfdf] rounded-[2px]">
                  <p className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-4">Real-time Utilization Monitor</p>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between text-[10px] font-bold uppercase tracking-wider text-[#100841]">
                      <span>Prefund Depletion State</span>
                      <span className={selectedChannel.prefundBalance < selectedChannel.minPrefund ? "text-[#c62828]" : "text-[#2e7d32]"}>
                        {Math.round((selectedChannel.prefundBalance / (selectedChannel.minPrefund * 2)) * 100)}% Available
                      </span>
                    </div>
                    <div className="w-full h-1.5 bg-[#efefff] rounded-full overflow-hidden">
                      <div 
                        className={cn("h-full", selectedChannel.prefundBalance < selectedChannel.minPrefund ? "bg-[#c62828]" : "bg-[#2e7d32]")}
                        style={{ width: `${Math.min(100, (selectedChannel.prefundBalance / (selectedChannel.minPrefund * 2)) * 100)}%` }}
                      />
                    </div>
                  </div>
                  <div className="mt-6 flex gap-2">
                    <EnterpriseButton variant="primary" className="h-9 px-6 bg-[#2e7d32] uppercase tracking-widest text-[10px] font-bold">
                      <Plus className="w-3.5 h-3.5" /> Top-Up Prefund
                    </EnterpriseButton>
                    <EnterpriseButton variant="secondary" className="h-9 px-4 uppercase tracking-widest text-[10px] font-bold">
                      <RefreshCcw className="w-3.5 h-3.5" /> Force Sync
                    </EnterpriseButton>
                  </div>
               </div>
            </EnterpriseCard>
          )}
        </TabsContent>

<TabsContent value="ledger" className="mt-4 outline-none">
          <EnterpriseTable
            data={ledgerFlows}
            columns={[
              { id: "date", header: "Timestamp", accessor: (f) => <span className="text-[10px] text-[#4f525d] font-mono">{f.date}</span> },
              { id: "channel", header: "Channel", accessor: (f) => <span className="text-[11px] font-bold text-[#100841]">{f.channelName}</span> },
              { id: "type", header: "Posting Type", accessor: (f) => {
                const variant = f.type === "PREFUND_DEPOSIT" ? "success" : f.type === "DISBURSEMENT_DEBIT" ? "info" : "warning";
                return <EnterpriseBadge variant={variant} className="uppercase">{f.type.replace("_", " ")}</EnterpriseBadge>;
              }},
              { id: "amount", header: "Amount", isNumeric: true, align: "right", accessor: (f) => (
                <span className={cn("font-mono font-bold", f.amount >= 0 ? "text-[#2e7d32]" : "text-[#c62828]")}>
                  {f.amount >= 0 ? "+" : ""}{formatMMK(f.amount)}
                </span>
              )},
              { id: "balance", header: "Running Balance", isNumeric: true, align: "right", accessor: (f) => <span className="font-mono text-[11px] text-[#4f525d]">{formatMMK(f.balance)}</span> },
              { id: "ref", header: "Journal Ref", accessor: (f) => <span className="text-[10px] font-mono text-[#100841] bg-[#ffffff] px-1 py-0.5 rounded-[2px]">{f.journalRef}</span> }
            ]}
            rowKey={(f) => f.id}
            searchPlaceholder="Search by journal ref or channel..."
          />
        </TabsContent>

<TabsContent value="reconciliation" className="mt-4 outline-none">
           <EnterpriseCard className="border-[#dfdfdf] p-6 bg-[#efefff]">
              <div className="flex items-center justify-between mb-8">
                <div>
                  <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">Automated Reconciliation Audit</h3>
                  <p className="text-[10px] text-[#4f525d] uppercase mt-1">Variance analysis between system ledger and bank statements</p>
                </div>
                <EnterpriseButton variant="primary" className="bg-[#100841] uppercase tracking-widest text-[10px] font-bold h-9">
                  <RefreshCcw className="w-3.5 h-3.5" /> Execute Full Recon
                </EnterpriseButton>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {payChannels.map(ch => {
                  const diff = ch.prefundBalance * 0.98;
                  const variance = ch.prefundBalance - diff;
                  const isHealthy = Math.abs(variance) < 10000;
                  return (
                    <div key={ch.id} className="p-4 bg-white border border-[#dfdfdf] rounded-[2px] shadow-sm">
                       <div className="flex justify-between items-center mb-4">
                         <span className="text-[11px] font-bold text-[#100841]">{ch.bankName}</span>
                         <EnterpriseBadge variant={isHealthy ? "success" : "error"}>{isHealthy ? "MATCHED" : "VARIANCE"}</EnterpriseBadge>
                       </div>
                       <div className="space-y-2">
                         <div className="flex justify-between text-[10px] text-[#4f525d]"><span>System Ledger</span><span className="font-mono font-bold">{formatMMK(ch.prefundBalance)}</span></div>
                         <div className="flex justify-between text-[10px] text-[#4f525d]"><span>Bank Statement</span><span className="font-mono">{formatMMK(diff)}</span></div>
                         <LedgerDivider />
                         <div className="flex justify-between text-[11px] font-bold">
                           <span className="text-[#100841]">Variance</span>
                           <span className={isHealthy ? "text-[#2e7d32]" : "text-[#c62828]"}>{formatMMK(variance)}</span>
                         </div>
                       </div>
                    </div>
                  );
                })}
              </div>
           </EnterpriseCard>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/budget/BudgetPage.tsx"
/**
 * BudgetPage — Budget Management
 * Design: Enterprise Fintech — SAP Fiori inspired
 * Allocation, utilization tracking, overflow detection, and budget requests
 */
import { formatMMK, companies, type Company } from "@/data/mockData";
import { Wallet, TrendingUp, AlertTriangle, DollarSign, Eye, Edit, Download } from "lucide-react";
import { Progress } from "@/components/ui/progress";
import {
  EnterpriseKpiCard,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction,
  EnterpriseBadge,
  EnterpriseButton
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function BudgetPage() {
  const totalBudget = companies.reduce((s, c) => s + c.totalBudget, 0);
  const totalUtilized = companies.reduce((s, c) => s + c.utilized, 0);
  const totalRemaining = totalBudget - totalUtilized;
  const utilizationPct = Math.round((totalUtilized / totalBudget) * 100);

// Column definitions for Budget Allocation
  const budgetColumns: ColumnDef<Company>[] = [
    {
      id: "company",
      header: "Company",
      accessor: (c) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{c.name}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{c.id}</p>
        </div>
      ),
      searchString: (c) => `${c.name} ${c.id}`
    },
    {
      id: "type",
      header: "Type",
      accessor: (c) => <EnterpriseBadge variant="neutral">{c.type}</EnterpriseBadge>
    },
    {
      id: "risk",
      header: "Risk Tier",
      accessor: (c) => {
        const variant = c.riskTier === "A" || c.riskTier === "B" ? "success" : c.riskTier === "C" ? "warning" : "error";
        return <EnterpriseBadge variant={variant}>Tier {c.riskTier}</EnterpriseBadge>;
      }
    },
    {
      id: "totalBudget",
      header: "Total Budget",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.totalBudget
    },
    {
      id: "utilized",
      header: "Utilized",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.utilized
    },
    {
      id: "remaining",
      header: "Remaining",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.remaining,
      cellClassName: (c) => c.remaining > 0 ? "text-[#2e7d32] font-bold" : "text-[#c62828] font-bold"
    },
    {
      id: "utilization",
      header: "Utilization",
      accessor: (c) => {
        const pct = Math.round((c.utilized / c.totalBudget) * 100);
        return (
          <div className="flex items-center gap-2 font-mono">
            <Progress value={pct} className="h-1.5 w-16" />
            <span className={`text-[10px] font-bold tabular-nums ${pct > 80 ? "text-[#c62828]" : pct > 60 ? "text-[#e65100]" : "text-[#2e7d32]"}`}>{pct}%</span>
          </div>
        );
      }
    }
  ];

// Column definitions for EWA Limits
  const limitColumns: ColumnDef<Company>[] = [
    {
      id: "company",
      header: "Company",
      accessor: (c) => <span className="text-[12px] font-bold text-[#100841]">{c.name}</span>,
      searchString: (c) => c.name
    },
    {
      id: "perEmployeeCap",
      header: "Employee Cap",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.perEmployeeCap
    },
    {
      id: "maxAdvance",
      header: "Max Advance",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.maxAdvance
    },
    {
      id: "creditScore",
      header: "Credit Score",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.creditScore,
      cellClassName: (c) => c.creditScore >= 80 ? "text-[#2e7d32] font-bold" : c.creditScore >= 60 ? "text-[#e65100] font-bold" : "text-[#c62828] font-bold"
    },
    {
      id: "status",
      header: "Status",
      accessor: (c) => <EnterpriseBadge variant={c.status === "Active" ? "success" : "error"}>{c.status}</EnterpriseBadge>
    }
  ];

const tableActions: TableAction<Company>[] = [
    { label: "View Utilization", icon: <Eye className="w-3.5 h-3.5" />, onClick: (c) => console.log("View", c.id) },
    { label: "Edit Allocation", icon: <Edit className="w-3.5 h-3.5" />, onClick: (c) => console.log("Edit", c.id) },
    { label: "Export Breakdown", icon: <Download className="w-3.5 h-3.5" />, onClick: (c) => console.log("Download", c.id) },
  ];

return (
    <div className="space-y-4">
      {/* ===== Page Header ===== */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Budget Management</h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            Institutional liquidity & exposure monitoring
          </p>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <TrendingUp className="w-3.5 h-3.5" /> Rebalance Portfolio
          </EnterpriseButton>
        </div>
      </div>

{/* KPIs */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Total Portfolio Budget"
          value={formatMMK(totalBudget)}
          icon={<DollarSign className="w-3.5 h-3.5 text-[#100841]" />}
          subValue={`${companies.length} companies allocated`}
        />
        <EnterpriseKpiCard
          label="Aggregate Utilization"
          value={formatMMK(totalUtilized)}
          icon={<TrendingUp className="w-3.5 h-3.5 text-[#31d891]" />}
          subValue={`${utilizationPct}% overall utilization`}
        />
        <EnterpriseKpiCard
          label="Available Liquidity"
          value={formatMMK(totalRemaining)}
          icon={<Wallet className="w-3.5 h-3.5 text-[#2e7d32]" />}
          subValue="Ready for new requests"
        />
        <EnterpriseKpiCard
          label="Exposure Warning"
          value={companies.filter(c => c.utilized / c.totalBudget > 0.7).length}
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#e65100]" />}
          subValue="Above 70% threshold"
        />
      </div>

<Tabs defaultValue="allocation" className="w-full">
        <TabsList>
          <TabsTrigger value="allocation">Budget Allocation</TabsTrigger>
          <TabsTrigger value="limits">Per-Employee Limits</TabsTrigger>
          <TabsTrigger value="requests">Allocation Requests</TabsTrigger>
        </TabsList>

<TabsContent value="allocation" className="space-y-4 outline-none">
          <EnterpriseTable
            data={companies}
            columns={budgetColumns}
            rowKey={(c) => c.id}
            actions={tableActions}
            selectable={true}
            searchPlaceholder="Search by company name or ID..."
            summary={{
              label: "PORTFOLIO TOTAL",
              columns: {
                totalBudget: totalBudget,
                utilized: totalUtilized,
                remaining: totalRemaining
              }
            }}
          />
        </TabsContent>

<TabsContent value="limits" className="space-y-4 outline-none">
          <EnterpriseTable
            data={companies}
            columns={limitColumns}
            rowKey={(c) => c.id}
            searchPlaceholder="Search by company name..."
          />
        </TabsContent>

<TabsContent value="requests" className="mt-4 outline-none">
          <div className="p-20 text-center bg-slate-50 border border-dashed border-[#dfdfdf] rounded-[3px]">
             <TrendingUp className="w-10 h-10 text-slate-200 mx-auto mb-3" />
             <p className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">No pending budget allocation requests</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/circle-ledger/CircleLedgerPage.tsx"
/**
 * CircleLedgerPage — Circle Ledger & GL Accounting
 * Design: Institutional Fintech Command Center
 * Double-entry accounting, journal entries, GL balances, trial balance
 * Signature motif: ledger flow line, debit/credit precision
 */
import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { formatMMK, journalEntries, glBalances, chartOfAccounts, type JournalEntry, type GLBalance } from "@/data/mockData";
import { BookOpen, FileText, Scale, Lock } from "lucide-react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef
} from "@/components/EnterpriseComponents";

export function CircleLedgerPage() {
  const uniqueJournals = Array.from(new Set(journalEntries.map(j => j.journalId)));

const journalColumns: ColumnDef<JournalEntry>[] = [
    {
      id: "journalId",
      header: "Journal ID",
      accessor: (jl) => <span className="text-[11px] font-mono font-bold text-[#4f525d]">{jl.journalId}</span>,
      searchString: (jl) => jl.journalId
    },
    {
      id: "date",
      header: "Date",
      accessor: (jl) => <span className="text-[11px] text-[#4f525d] font-mono">{jl.date}</span>
    },
    {
      id: "description",
      header: "Description",
      accessor: (jl) => <span className="text-[12px] text-[#100841] font-bold">{jl.description}</span>,
      searchString: (jl) => jl.description
    },
    {
      id: "accountCode",
      header: "GL Code",
      accessor: (jl) => <span className="text-[11px] font-mono font-bold text-[#100841]">{jl.accountCode}</span>,
      searchString: (jl) => jl.accountCode
    },
    {
      id: "accountName",
      header: "Account",
      accessor: (jl) => <span className="text-[11px] text-[#4f525d] font-semibold">{jl.accountName}</span>,
      searchString: (jl) => jl.accountName
    },
    {
      id: "debit",
      header: "Debit",
      isNumeric: true,
      align: "right",
      accessor: (jl) => jl.debit > 0 ? jl.debit : 0,
      cellClassName: (jl) => jl.debit > 0 ? "text-[#2e7d32] font-bold" : "text-[#c4c9ce]"
    },
    {
      id: "credit",
      header: "Credit",
      isNumeric: true,
      align: "right",
      accessor: (jl) => jl.credit > 0 ? jl.credit : 0,
      cellClassName: (jl) => jl.credit > 0 ? "text-[#c62828] font-bold" : "text-[#c4c9ce]"
    },
    {
      id: "referenceId",
      header: "Reference",
      accessor: (jl) => <span className="text-[10px] font-mono text-slate-400 font-semibold">{jl.referenceId}</span>,
      searchString: (jl) => jl.referenceId
    },
    {
      id: "companyId",
      header: "Company",
      accessor: (jl) => <span className="text-[11px] text-[#4f525d] font-semibold">{jl.companyId}</span>
    },
    {
      id: "postedBy",
      header: "Posted By",
      accessor: (jl) => <span className="text-[11px] text-slate-400 font-medium">{jl.postedBy}</span>
    }
  ];

const journalFilters: FilterDef<JournalEntry>[] = [
    {
      id: "journal",
      label: "Journal",
      options: uniqueJournals.map(j => ({ label: j, value: j })),
      filterFn: (jl, val) => jl.journalId === val
    }
  ];

const glColumns: ColumnDef<GLBalance>[] = [
    {
      id: "accountCode",
      header: "GL Code",
      accessor: (gl) => <span className="text-[11px] font-mono font-bold text-[#100841]">{gl.accountCode}</span>,
      searchString: (gl) => gl.accountCode
    },
    {
      id: "accountName",
      header: "Account Name",
      accessor: (gl) => <span className="text-[12px] font-bold text-[#100841]">{gl.accountName}</span>,
      searchString: (gl) => gl.accountName
    },
    {
      id: "type",
      header: "Type",
      accessor: (gl) => {
        const badgeVariant =
          gl.type === "Asset" ? "info" :
          gl.type === "Liability" ? "warning" :
          gl.type === "Income" ? "success" : "error";
        return <EnterpriseBadge variant={badgeVariant}>{gl.type}</EnterpriseBadge>;
      }
    },
    {
      id: "openingBalance",
      header: "Opening",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.openingBalance
    },
    {
      id: "periodDebit",
      header: "Debit",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.periodDebit,
      cellClassName: (gl) => gl.periodDebit > 0 ? "text-[#2e7d32] font-bold" : "text-[#c4c9ce]"
    },
    {
      id: "periodCredit",
      header: "Credit",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.periodCredit,
      cellClassName: (gl) => gl.periodCredit > 0 ? "text-[#c62828] font-bold" : "text-[#c4c9ce]"
    },
    {
      id: "closingBalance",
      header: "Closing",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.closingBalance,
      cellClassName: () => "font-bold text-[#100841]"
    }
  ];

const trialColumns: ColumnDef<GLBalance>[] = [
    {
      id: "accountCode",
      header: "GL Code",
      accessor: (gl) => <span className="text-[11px] font-mono font-semibold text-[#4f525d]">{gl.accountCode}</span>,
      searchString: (gl) => gl.accountCode
    },
    {
      id: "accountName",
      header: "Account",
      accessor: (gl) => <span className="text-[12px] font-bold text-[#100841]">{gl.accountName}</span>,
      searchString: (gl) => gl.accountName
    },
    {
      id: "type",
      header: "Type",
      accessor: (gl) => <span className="text-[11px] text-[#4f525d] font-semibold">{gl.type}</span>
    },
    {
      id: "debit",
      header: "Debit",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.closingBalance > 0 ? gl.closingBalance : 0,
      cellClassName: (gl) => gl.closingBalance > 0 ? "text-[#2e7d32] font-bold" : "text-[#c4c9ce]"
    },
    {
      id: "credit",
      header: "Credit",
      isNumeric: true,
      align: "right",
      accessor: (gl) => gl.closingBalance < 0 ? Math.abs(gl.closingBalance) : 0,
      cellClassName: (gl) => gl.closingBalance < 0 ? "text-[#c62828] font-bold" : "text-[#c4c9ce]"
    }
  ];

return (
    <div className="space-y-4">
      {/* ===== Page Header ===== */}
      <div>
        <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide flex items-center gap-2">
          <Lock className="w-3.5 h-3.5 text-[#100841]/40" />
          Circle Ledger (GL Accounting)
        </h1>
        <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
          Double-entry accounting · Journal entries · GL balances · Trial balance
        </p>
      </div>

<Tabs defaultValue="journals" className="w-full">
        <TabsList>
          <TabsTrigger value="journals">
            <BookOpen className="w-3 h-3" /> Journal Entries
          </TabsTrigger>
          <TabsTrigger value="gl">
            <FileText className="w-3 h-3" /> GL Balances
          </TabsTrigger>
          <TabsTrigger value="trial">
            <Scale className="w-3 h-3" /> Trial Balance
          </TabsTrigger>
        </TabsList>

<TabsContent value="journals" className="outline-none">
          <EnterpriseTable
            data={journalEntries}
            columns={journalColumns}
            rowKey={(jl) => jl.id}
            filters={journalFilters}
            searchPlaceholder="Search journal entries..."
          />
        </TabsContent>

<TabsContent value="gl" className="outline-none">
          <EnterpriseTable
            data={glBalances}
            columns={glColumns}
            rowKey={(gl) => gl.accountCode}
            searchPlaceholder="Search GL accounts..."
            summary={{
              label: "TOTAL LEDGER",
              columns: {
                openingBalance: glBalances.reduce((s, g) => s + g.openingBalance, 0),
                periodDebit: glBalances.reduce((s, g) => s + g.periodDebit, 0),
                periodCredit: glBalances.reduce((s, g) => s + g.periodCredit, 0),
                closingBalance: glBalances.reduce((s, g) => s + g.closingBalance, 0)
              }
            }}
          />
        </TabsContent>

<TabsContent value="trial" className="outline-none">
          <EnterpriseTable
            data={glBalances}
            columns={trialColumns}
            rowKey={(gl) => gl.accountCode}
            searchPlaceholder="Search accounts..."
            summary={{
              label: "TOTAL TRIAL BALANCE",
              columns: {
                debit: glBalances.reduce((s, g) => (g.closingBalance > 0 ? s + g.closingBalance : s), 0),
                credit: glBalances.reduce((s, g) => (g.closingBalance < 0 ? s + Math.abs(g.closingBalance) : s), 0)
              }
            }}
          />
        </TabsContent>
      </Tabs>

{/* Chart of Accounts */}
      <EnterpriseCard className="p-4 shadow-sm border-[#dfdfdf]">
        <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Chart of Accounts</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
          {chartOfAccounts.map(acct => {
            const badgeVariant =
              acct.type === "Asset" ? "info" :
              acct.type === "Liability" ? "warning" :
              acct.type === "Income" ? "success" : "error";
            return (
              <div key={acct.code} className="flex items-center gap-2.5 p-2 rounded-[3px] border border-[#dfdfdf] bg-[#efefff] transition-colors hover:bg-white">
                <span className="text-[11px] font-mono font-bold text-[#100841]">{acct.code}</span>
                <span className="text-[11px] text-[#100841] font-bold">{acct.name}</span>
                <div className="ml-auto">
                  <EnterpriseBadge variant={badgeVariant}>{acct.type}</EnterpriseBadge>
                </div>
              </div>
            );
          })}
        </div>
      </EnterpriseCard>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/dashboard/DashboardPage.tsx"
/**
 * DashboardPage — Analytical Command Dashboard
 * SAP Fiori Pattern: Analytical Page — KPI cards, charts, alerts
 * Design: Enterprise Fintech — Navy (#100841) + Teal (#31d891) | Sharp corners | Structured
 */
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  PieChart, Pie, Cell, LineChart, Line, Legend
} from "recharts";
import {
  TrendingUp, TrendingDown, Users, ArrowUpRight, Building2, AlertTriangle,
  Clock, CheckCircle2, AlertCircle, DollarSign, Repeat, ShieldAlert, Lock,
  LayoutGrid, ArrowRight
} from "lucide-react";
import { formatMMK, companies, transactions, employees, riskAssessments } from "@/data/mockData";
import { useView } from "@/contexts/ViewContext";
import {
  EnterpriseCard,
  EnterpriseKpiCard,
  EnterpriseMessageStrip,
  LedgerDivider
} from "@/components/EnterpriseComponents";

const COLORS = ["#100841", "#31d891", "#10b981", "#f59e0b", "#c62828"];

export function DashboardPage() {
  const { view } = useView();

const totalDisbursed = transactions.reduce((s, t) => s + t.amount, 0);
  const totalRepaid = transactions.filter(t => t.status === "Repaid").reduce((s, t) => s + t.amount, 0);
  const totalOutstanding = transactions.filter(t => t.status === "Overdue").reduce((s, t) => s + t.amount, 0);
  const activeEmployees = employees.filter(e => e.status === "Active").length;
  const pendingVerification = employees.filter(e => e.status === "Pending Verification").length;
  const overdueCount = transactions.filter(t => t.status === "Overdue").length;
  const totalBudget = companies.reduce((s, c) => s + c.totalBudget, 0);
  const totalUtilized = companies.reduce((s, c) => s + c.utilized, 0);
  const utilizationPct = Math.round((totalUtilized / totalBudget) * 100);

const companyData = companies.map(c => ({
    name: c.name.split(" ")[0],
    budget: c.totalBudget / 1000000,
    used: c.utilized / 1000000,
  }));

const statusData = [
    { name: "Repaid", value: transactions.filter(t => t.status === "Repaid").length },
    { name: "Active", value: transactions.filter(t => t.status === "Approved" || t.status === "Disbursing").length },
    { name: "Overdue", value: overdueCount },
    { name: "Pending", value: transactions.filter(t => t.status === "Pending").length },
  ];

const monthlyTrend = [
    { month: "Jan", disbursed: 420000, repaid: 310000, feeRevenue: 12000 },
    { month: "Feb", disbursed: 680000, repaid: 520000, feeRevenue: 18000 },
    { month: "Mar", disbursed: 920000, repaid: 780000, feeRevenue: 24000 },
    { month: "Apr", disbursed: 1100000, repaid: 950000, feeRevenue: 28000 },
    { month: "May", disbursed: 1350000, repaid: 1120000, feeRevenue: 32000 },
    { month: "Jun", disbursed: 1580000, repaid: 1280000, feeRevenue: 35000 },
    { month: "Jul", disbursed: totalDisbursed, repaid: totalRepaid, feeRevenue: 43295 },
  ];

return (
    <div className="space-y-4">
      {/* ===== Page Header — SAP Fiori Object Page Header ===== */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <LayoutGrid className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Command Dashboard</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider">
              {view === "HR" && "Employee lifecycle, onboarding, and payroll oversight"}
              {view === "Sales" && "Corporate portfolio, revenue, and client health"}
              {view === "Operations" && "Daily operations, disbursements, and settlements"}
              {view === "Back Office" && "Transaction processing, verification, and reconciliation"}
              {view === "Finance" && "GL ledger, accounting entries, and financial health"}
              {view === "Risk" && "Credit risk, compliance, and fraud detection"}
              {view === "Platform Admin" && "System configuration, policies, and platform health"}
            </p>
          </div>
        </div>
        <span className="text-[10px] font-mono text-[#4f525d] border border-[#dfdfdf] rounded-[2px] px-2 py-1 bg-white font-semibold">
          12 JUL 2026
        </span>
      </div>

{/* ===== KPI Row 1 — Primary Metrics ===== */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <EnterpriseKpiCard
          label="Active Companies"
          value={String(companies.filter(c => c.status === "Active").length)}
          change="1"
          changeDir="up"
          accentColor="navy"
          icon={<Building2 className="w-3.5 h-3.5 text-[#100841]" />}
          subValue={`${companies.length} total registered`}
        />
        <EnterpriseKpiCard
          label="Active Employees"
          value={String(activeEmployees)}
          change="3"
          changeDir="up"
          accentColor="teal"
          icon={<Users className="w-3.5 h-3.5 text-[#31d891]" />}
          subValue={`${employees.length} total onboarded`}
        />
        <EnterpriseKpiCard
          label="Total Budget"
          value={formatMMK(totalBudget)}
          change="15%"
          changeDir="up"
          accentColor="emerald"
          icon={<DollarSign className="w-3.5 h-3.5 text-[#2e7d32]" />}
          subValue={`${utilizationPct}% utilized`}
        />
        <EnterpriseKpiCard
          label="Total Disbursed"
          value={formatMMK(totalDisbursed)}
          change="22%"
          changeDir="up"
          accentColor="teal"
          icon={<ArrowUpRight className="w-3.5 h-3.5 text-[#31d891]" />}
          subValue="This month"
        />
      </div>

{/* ===== KPI Row 2 — Risk & Operations ===== */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <EnterpriseKpiCard
          label="Repayment Rate"
          value={`${Math.round((totalRepaid / totalDisbursed) * 100)}%`}
          change="5%"
          changeDir="up"
          accentColor="emerald"
          icon={<Repeat className="w-3.5 h-3.5 text-[#2e7d32]" />}
          subValue={`${formatMMK(totalRepaid)} repaid`}
        />
        <EnterpriseKpiCard
          label="Outstanding"
          value={formatMMK(totalOutstanding)}
          change="12%"
          changeDir="down"
          accentColor="amber"
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#e65100]" />}
          subValue={`${overdueCount} overdue transactions`}
        />
        <EnterpriseKpiCard
          label="Pending Verification"
          value={String(pendingVerification)}
          change="1"
          changeDir="down"
          accentColor="amber"
          icon={<Clock className="w-3.5 h-3.5 text-[#e65100]" />}
          subValue="Employees awaiting check"
        />
        <EnterpriseKpiCard
          label="Risk Score Avg"
          value={String(Math.round(riskAssessments.reduce((s, r) => s + r.totalScore, 0) / riskAssessments.length))}
          accentColor="navy"
          icon={<ShieldAlert className="w-3.5 h-3.5 text-[#100841]" />}
          subValue="Weighted average across portfolio"
        />
      </div>

{/* ===== Charts Section ===== */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {/* Budget Utilization by Company */}
        <EnterpriseCard className="p-4">
          <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Budget Utilization by Company</h3>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={companyData} margin={{ top: 5, right: 10, left: -10, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#efefff" />
              <XAxis dataKey="name" tick={{ fontSize: 11, fill: "#4f525d" }} />
              <YAxis tick={{ fontSize: 11, fill: "#4f525d" }} tickFormatter={(v) => `${v}M`} />
              <Tooltip formatter={(v: number) => [formatMMK(v * 1000000), ""]} contentStyle={{ fontSize: 11, borderRadius: 3, border: "1px solid #dfdfdf" }} />
              <Bar dataKey="used" name="Utilized" fill="#31d891" radius={[2, 2, 0, 0]} />
              <Bar dataKey="budget" name="Total Budget" fill="#100841" radius={[2, 2, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </EnterpriseCard>

{/* Transaction Status Distribution */}
        <EnterpriseCard className="p-4">
          <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Transaction Status Distribution</h3>
          <ResponsiveContainer width="100%" height={180}>
            <PieChart>
              <Pie data={statusData} cx="50%" cy="50%" innerRadius={40} outerRadius={65} paddingAngle={3} dataKey="value">
                {statusData.map((_, i) => <Cell key={i} fill={COLORS[i]} />)}
              </Pie>
              <Tooltip formatter={(v: number, n: string) => [`${v} transactions`, n]} contentStyle={{ fontSize: 11, borderRadius: 3, border: "1px solid #dfdfdf" }} />
            </PieChart>
          </ResponsiveContainer>
          <div className="flex flex-wrap gap-4 justify-center mt-1">
            {statusData.map((d, i) => (
              <div key={d.name} className="flex items-center gap-1.5">
                <span className="w-2 h-2 rounded-[1px]" style={{ backgroundColor: COLORS[i] }} />
                <span className="text-[10px] font-medium text-[#4f525d]">{d.name} ({d.value})</span>
              </div>
            ))}
          </div>
        </EnterpriseCard>
      </div>

{/* ===== Monthly Financial Trend ===== */}
      <EnterpriseCard className="p-4">
        <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Monthly Financial Trend</h3>
        <ResponsiveContainer width="100%" height={200}>
          <LineChart data={monthlyTrend} margin={{ top: 5, right: 10, left: -10, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#efefff" />
            <XAxis dataKey="month" tick={{ fontSize: 11, fill: "#4f525d" }} />
            <YAxis tick={{ fontSize: 11, fill: "#4f525d" }} tickFormatter={(v) => `${(v / 1000000).toFixed(1)}M`} />
            <Tooltip formatter={(v: number, n: string) => [formatMMK(v), n]} contentStyle={{ fontSize: 11, borderRadius: 3, border: "1px solid #dfdfdf" }} />
            <Legend wrapperStyle={{ fontSize: 10 }} />
            <Line type="monotone" dataKey="disbursed" name="Disbursed" stroke="#100841" strokeWidth={2} dot={false} />
            <Line type="monotone" dataKey="repaid" name="Repaid" stroke="#31d891" strokeWidth={2} dot={false} />
            <Line type="monotone" dataKey="feeRevenue" name="Fee Revenue" stroke="#2e7d32" strokeWidth={2} dot={false} />
          </LineChart>
        </ResponsiveContainer>
      </EnterpriseCard>

{/* ===== Pending Actions — SAP Fiori Message Strips ===== */}
      <div>
        <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-2">Pending Actions & Alerts</h3>
        <div className="space-y-2">
          {pendingVerification > 0 && (
            <EnterpriseMessageStrip variant="warning" message={`${pendingVerification} Employee(s) Pending Verification — Employment verification and EWA auto-approval checks required.`} />
          )}
          {overdueCount > 0 && (
            <EnterpriseMessageStrip variant="error" message={`${overdueCount} Overdue Transaction(s) — Late fees accumulating — repayment collection required.`} />
          )}
          <EnterpriseMessageStrip variant="info" message="Information: 1 Settlement Awaiting Verification — Skyline Trading — REP-2026-07-001 (Finance Review)." />
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/disbursement/DisbursementPage.tsx"
/**
 * DisbursementPage — Full Disbursement Engine with State Machine
 * States: REQUESTED → VALIDATING → DISBURSING → COMPLETED / FAILED / RETRYING / TIMEOUT
 * Features: Auto-disbursement after EWA verification, cashout channel selection, retry management
 * Design: Enterprise Fintech — Deep Navy (#100841) + Teal (#31d891)
 */
import { useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import {
  Zap, Clock, CheckCircle2, XCircle, RotateCcw, AlertTriangle,
  ChevronRight, Building2, Smartphone, CreditCard, Eye, History, BarChart3, Download
} from "lucide-react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction,
  EnterpriseKpiCard
} from "@/components/EnterpriseComponents";
import { cn } from "@/lib/utils";

const formatMMK = (amount: number) => {
  return new Intl.NumberFormat("en-US", { minimumFractionDigits: 0 }).format(amount) + " MMK";
};

// ─── DISBURSEMENT STATE MACHINE ──────────────────────────────────────────────

const STATUS_FLOW: DisbursementStatus[] = ["REQUESTED", "VALIDATING", "DISBURSING", "COMPLETED"];
const FAIL_FLOW: DisbursementStatus[] = ["REQUESTED", "VALIDATING", "DISBURSING", "FAILED"];
const RETRY_FLOW: DisbursementStatus[] = ["REQUESTED", "VALIDATING", "DISBURSING", "FAILED", "RETRYING", "COMPLETED"];
const TIMEOUT_FLOW: DisbursementStatus[] = ["REQUESTED", "VALIDATING", "TIMEOUT"];

const statusConfig: Record<string, { variant: "success" | "warning" | "error" | "info" | "neutral"; label: string }> = {
  "REQUESTED": { variant: "neutral", label: "Requested" },
  "VALIDATING": { variant: "warning", label: "Validating" },
  "DISBURSING": { variant: "info", label: "Disbursing" },
  "COMPLETED": { variant: "success", label: "Completed" },
  "FAILED": { variant: "error", label: "Failed" },
  "RETRYING": { variant: "warning", label: "Retrying" },
  "TIMEOUT": { variant: "error", label: "Timeout" },
};

// ─── MOCK DATA ───────────────────────────────────────────────────────────────

interface DisbursementRecord {
  id: string;
  employeeId: string;
  employeeName: string;
  companyName: string;
  amount: number;
  cashoutChannel: "BANK_TRANSFER" | "MOBILE_WALLET" | "AGENT_OTC";
  bankName: string;
  status: DisbursementStatus;
  retryCount: number;
  maxRetries: number;
  requestedAt: string;
  validatedAt: string | null;
  disbursedAt: string | null;
  journalRef: string;
  timeoutAt: string | null;
  failureReason: string | null;
  ewaVerified: boolean;
  budgetAvailable: boolean;
}

const disbursementRecords: DisbursementRecord[] = [
  { id: "DISB-001", employeeId: "EMP-001", employeeName: "Aung Kyaw", companyName: "Tech Solutions Ltd", amount: 50000, cashoutChannel: "BANK_TRANSFER", bankName: "KBZ Bank", status: "COMPLETED", retryCount: 0, maxRetries: 3, requestedAt: "2026-07-10 09:15", validatedAt: "2026-07-10 09:16", disbursedAt: "2026-07-10 09:18", journalRef: "JE-2026-1001", timeoutAt: null, failureReason: null, ewaVerified: true, budgetAvailable: true },
  { id: "DISB-002", employeeId: "EMP-003", employeeName: "Thet Hnin", companyName: "Manufacturing Co", amount: 75000, cashoutChannel: "MOBILE_WALLET", bankName: "Wave Money", status: "DISBURSING", retryCount: 0, maxRetries: 3, requestedAt: "2026-07-10 10:30", validatedAt: "2026-07-10 10:31", disbursedAt: null, journalRef: "JE-2026-1002", timeoutAt: null, failureReason: null, ewaVerified: true, budgetAvailable: true },
  { id: "DISB-003", employeeId: "EMP-005", employeeName: "Zaw Win", companyName: "Logistics Myanmar", amount: 30000, cashoutChannel: "AGENT_OTC", bankName: "CB Bank", status: "FAILED", retryCount: 2, maxRetries: 3, requestedAt: "2026-07-09 14:20", validatedAt: "2026-07-09 14:21", disbursedAt: null, journalRef: "JE-2026-1003", timeoutAt: null, failureReason: "Bank gateway timeout", ewaVerified: true, budgetAvailable: true },
  { id: "DISB-004", employeeId: "EMP-008", employeeName: "Hla May", companyName: "Retail Chain", amount: 100000, cashoutChannel: "BANK_TRANSFER", bankName: "AYA Bank", status: "RETRYING", retryCount: 3, maxRetries: 5, requestedAt: "2026-07-09 11:00", validatedAt: "2026-07-09 11:02", disbursedAt: null, journalRef: "JE-2026-1004", timeoutAt: null, failureReason: "Insufficient prefund balance", ewaVerified: true, budgetAvailable: false },
  { id: "DISB-005", employeeId: "EMP-012", employeeName: "Myo Lin", companyName: "Tech Solutions Ltd", amount: 25000, cashoutChannel: "MOBILE_WALLET", bankName: "KBZ Pay", status: "TIMEOUT", retryCount: 0, maxRetries: 3, requestedAt: "2026-07-08 16:45", validatedAt: null, disbursedAt: null, journalRef: "JE-2026-1005", timeoutAt: "2026-07-08 17:15", failureReason: "Validation timeout — payroll data sync failed", ewaVerified: false, budgetAvailable: true },
  { id: "DISB-006", employeeId: "EMP-002", employeeName: "Nyein Chan", companyName: "Manufacturing Co", amount: 60000, cashoutChannel: "BANK_TRANSFER", bankName: "KBZ Bank", status: "VALIDATING", retryCount: 0, maxRetries: 3, requestedAt: "2026-07-10 11:00", validatedAt: null, disbursedAt: null, journalRef: "JE-2026-1006", timeoutAt: null, failureReason: null, ewaVerified: true, budgetAvailable: true },
];

// ─── STATE FLOW VISUAL ──────────────────────────────────────────────────────

function StateFlowVisual({ status }: { status: DisbursementStatus }) {
  const flow = status === "TIMEOUT" ? TIMEOUT_FLOW : status === "FAILED" || status === "RETRYING" ? RETRY_FLOW : STATUS_FLOW;
  const currentIndex = flow.indexOf(status);

return (
    <div className="flex items-center gap-0.5 py-1">
      {flow.map((step, i) => {
        const sc = statusConfig[step];
        const isCompleted = i < currentIndex;
        const isCurrent = i === currentIndex;
        return (
          <div key={step} className="flex items-center">
            <div 
              className={cn(
                "px-2 py-0.5 rounded-[2px] text-[8px] font-bold uppercase border transition-all",
                isCompleted 
                  ? "bg-emerald-50 border-emerald-200 text-emerald-700" 
                  : isCurrent 
                    ? "bg-[#100841] text-white border-[#100841]" 
                    : "bg-slate-50 border-slate-200 text-slate-400"
              )}
            >
              {sc.label}
            </div>
            {i < flow.length - 1 && (
              <ChevronRight className={cn("w-3 h-3 mx-0.5", isCompleted ? "text-emerald-400" : "text-slate-200")} />
            )}
          </div>
        );
      })}
    </div>
  );
}

// ─── MAIN PAGE ───────────────────────────────────────────────────────────────

export function DisbursementPage() {
  const [selectedRecord, setSelectedRecord] = useState<DisbursementRecord | null>(null);
  const [selectedKeys, setSelectedKeys] = useState<Set<string | number>>(new Set());

const stats = {
    total: disbursementRecords.length,
    completed: disbursementRecords.filter(r => r.status === "COMPLETED").length,
    disbursing: disbursementRecords.filter(r => r.status === "DISBURSING").length,
    failed: disbursementRecords.filter(r => r.status === "FAILED").length,
    retrying: disbursementRecords.filter(r => r.status === "RETRYING").length,
    timeout: disbursementRecords.filter(r => r.status === "TIMEOUT").length,
    validating: disbursementRecords.filter(r => r.status === "VALIDATING").length,
  };

const columns: ColumnDef<DisbursementRecord>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (r) => <span className="font-mono font-bold text-[#100841]">{r.id}</span>,
      searchString: (r) => r.id
    },
    {
      id: "employee",
      header: "Employee",
      accessor: (r) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{r.employeeName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{r.companyName}</p>
        </div>
      ),
      searchString: (r) => `${r.employeeName} ${r.companyName}`
    },
    {
      id: "amount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (r) => r.amount
    },
    {
      id: "channel",
      header: "Channel",
      accessor: (r) => (
        <span className="flex items-center gap-1.5 text-[10px] font-semibold text-[#4f525d]">
          {r.cashoutChannel === "BANK_TRANSFER" && <Building2 className="w-3 h-3 text-[#100841]" />}
          {r.cashoutChannel === "MOBILE_WALLET" && <Smartphone className="w-3 h-3 text-[#31d891]" />}
          {r.cashoutChannel === "AGENT_OTC" && <CreditCard className="w-3 h-3 text-amber-500" />}
          {r.cashoutChannel.replace("_", " ")}
        </span>
      )
    },
    {
      id: "bank",
      header: "Bank",
      accessor: (r) => <span className="text-[10px] text-[#4f525d] font-medium">{r.bankName}</span>
    },
    {
      id: "verification",
      header: "EWA/Budget",
      accessor: (r) => (
        <div className="flex items-center gap-1">
          <EnterpriseBadge variant={r.ewaVerified ? "success" : "error"} className="px-1 py-0 text-[8px]">
            EWA
          </EnterpriseBadge>
          <EnterpriseBadge variant={r.budgetAvailable ? "info" : "error"} className="px-1 py-0 text-[8px]">
            BGT
          </EnterpriseBadge>
        </div>
      )
    },
    {
      id: "retry",
      header: "Retry",
      accessor: (r) => <span className="text-[10px] font-mono text-slate-400 font-bold">{r.retryCount}/{r.maxRetries}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (r) => (
        <EnterpriseBadge variant={statusConfig[r.status].variant}>
          {statusConfig[r.status].label}
        </EnterpriseBadge>
      )
    },
    {
      id: "flow",
      header: "Flow Progress",
      accessor: (r) => <StateFlowVisual status={r.status} />
    },
    {
      id: "requested",
      header: "Requested",
      accessor: (r) => <span className="text-[10px] text-slate-400 font-mono">{r.requestedAt}</span>
    }
  ];

const tableFilters: FilterDef<DisbursementRecord>[] = [
    {
      id: "status",
      label: "Status",
      options: Object.entries(statusConfig).map(([k, v]) => ({ label: v.label, value: k })),
      filterFn: (r, val) => r.status === val
    },
    {
      id: "channel",
      label: "Channel",
      options: [
        { label: "Bank Transfer", value: "BANK_TRANSFER" },
        { label: "Mobile Wallet", value: "MOBILE_WALLET" },
        { label: "Agent OTC", value: "AGENT_OTC" }
      ],
      filterFn: (r, val) => r.cashoutChannel === val
    }
  ];

const tableActions: TableAction<DisbursementRecord>[] = [
    {
      label: "View Detail",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (r) => setSelectedRecord(r)
    },
    {
      label: "Retry Disbursement",
      icon: <RotateCcw className="w-3.5 h-3.5" />,
      onClick: (r) => console.log("Retry", r.id)
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Zap className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Disbursement Engine</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
              Auto-payout after validation · Real-time status tracking
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Download className="w-3.5 h-3.5" /> Reports
          </EnterpriseButton>
        </div>
      </div>

{/* KPI Cards */}
      <div className="grid grid-cols-7 gap-2">
        <EnterpriseKpiCard label="Total Requests" value={stats.total} icon={<Zap className="w-3 h-3 text-slate-400" />} />
        <EnterpriseKpiCard label="Completed" value={stats.completed} icon={<CheckCircle2 className="w-3 h-3 text-emerald-500" />} />
        <EnterpriseKpiCard label="Disbursing" value={stats.disbursing} icon={<RotateCcw className="w-3 h-3 text-blue-500 animate-spin-slow" />} />
        <EnterpriseKpiCard label="Validating" value={stats.validating} icon={<Clock className="w-3 h-3 text-amber-500" />} />
        <EnterpriseKpiCard label="Failed" value={stats.failed} icon={<XCircle className="w-3 h-3 text-red-500" />} />
        <EnterpriseKpiCard label="Retrying" value={stats.retrying} icon={<RotateCcw className="w-3 h-3 text-purple-500" />} />
        <EnterpriseKpiCard label="Timeout" value={stats.timeout} icon={<AlertTriangle className="w-3 h-3 text-orange-500" />} />
      </div>

<Tabs defaultValue="queue" className="w-full">
        <TabsList className="mb-3">
          <TabsTrigger value="queue">Disbursement Queue</TabsTrigger>
          <TabsTrigger value="detail">Detailed Analysis</TabsTrigger>
          <TabsTrigger value="history">Historical Logs</TabsTrigger>
          <TabsTrigger value="analytics">Engine Stats</TabsTrigger>
        </TabsList>

<TabsContent value="queue" className="space-y-4 outline-none">
          <EnterpriseTable
            data={disbursementRecords}
            columns={columns}
            rowKey={(r) => r.id}
            filters={tableFilters}
            actions={tableActions}
            selectable={true}
            selectedKeys={selectedKeys}
            onSelectionChange={setSelectedKeys}
            searchPlaceholder="Search by ID, name or company..."
          />
        </TabsContent>

<TabsContent value="detail" className="mt-4 outline-none">
          {selectedRecord ? (
            <div className="space-y-4">
              <EnterpriseCard className="p-4 shadow-sm border-t-2 border-t-[#100841]">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-[3px] bg-[#ffffff] flex items-center justify-center border border-[#dfdfdf]">
                      <Zap className="w-5 h-5 text-[#100841]" />
                    </div>
                    <div>
                      <h3 className="text-sm font-bold text-[#100841]">{selectedRecord.id} — {selectedRecord.employeeName}</h3>
                      <p className="text-[10px] text-[#4f525d] font-mono">{selectedRecord.companyName}</p>
                    </div>
                  </div>
                  <EnterpriseBadge variant={statusConfig[selectedRecord.status].variant}>
                    {statusConfig[selectedRecord.status].label}
                  </EnterpriseBadge>
                </div>

<div className="grid grid-cols-4 gap-4 mb-6">
                  <div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                    <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-bold mb-1">Requested Amount</p>
                    <p className="text-base font-bold font-mono text-[#100841]">{formatMMK(selectedRecord.amount)}</p>
                  </div>
                  <div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                    <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-bold mb-1">Cashout Channel</p>
                    <p className="text-xs font-bold text-[#100841]">{selectedRecord.cashoutChannel.replace("_", " ")}</p>
                  </div>
                  <div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                    <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-bold mb-1">Target Account</p>
                    <p className="text-xs font-bold text-[#100841]">{selectedRecord.bankName}</p>
                  </div>
                  <div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                    <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-bold mb-1">Ledger Reference</p>
                    <p className="text-xs font-mono font-bold text-slate-400">{selectedRecord.journalRef}</p>
                  </div>
                </div>

<div className="mb-6">
                  <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">State Flow Progression</p>
                  <div className="p-4 bg-white border border-[#dfdfdf] rounded-[3px] flex items-center justify-center">
                    <StateFlowVisual status={selectedRecord.status} />
                  </div>
                </div>

<div className="grid grid-cols-4 gap-4">
                  <TimelineEntry label="Requested At" value={selectedRecord.requestedAt} status="done" />
                  <TimelineEntry label="Validated At" value={selectedRecord.validatedAt || "Pending"} status={selectedRecord.validatedAt ? "done" : "current"} />
                  <TimelineEntry label="Disbursed At" value={selectedRecord.disbursedAt || "Pending"} status={selectedRecord.disbursedAt ? "done" : "pending"} />
                  <TimelineEntry label="Error Reason" value={selectedRecord.failureReason || "No Errors"} status={selectedRecord.failureReason ? "error" : "pending"} />
                </div>
              </EnterpriseCard>
            </div>
          ) : (
            <div className="text-center py-20 bg-slate-50 border border-dashed border-[#dfdfdf] rounded-[3px]">
              <Zap className="w-10 h-10 text-slate-200 mx-auto mb-3" />
              <p className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">Select a disbursement from the queue to view analysis</p>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}

/* ─── Types ─── */
type DocCategory = "overview" | "architecture" | "workflows" | "modules" | "api" | "roles" | "design";
type ModuleGuideId =
  | "dashboard" | "onboarding" | "employees" | "transactions" | "repayment"
  | "settlement" | "circle-ledger" | "fee-builder" | "budget" | "risk"
  | "reports" | "payroll" | "notifications" | "admin" | "workflow"
  | "writeoff" | "form-creator" | "errors" | "disbursement"
  | "bank-integration" | "service-catalog" | "fee-hierarchy"
  | "employee-groups" | "limitations";

interface ModuleGuide {
  id: ModuleGuideId;
  title: string;
  category: string;
  portal: string;
  actors: string[];
  description: string;
  features: { feature: string; actor: string; outcome: string }[];
  steps: { step: number; title: string; description: string; tip?: string }[];
  workflows?: { name: string; states: string[] }[];
  integrations?: string[];
}

interface DocSection {
  id: DocCategory;
  title: string;
  icon: React.ReactNode;
  description: string;
}

/* ─── Documentation Sections ─── */
const DOC_SECTIONS: DocSection[] = [
  { id: "overview", title: "Platform Overview", icon: <BookOpen className="w-4 h-4" />, description: "EWA 3.0 Standalone — Full Earned Wage Access Platform" },
  { id: "architecture", title: "System Architecture", icon: <Zap className="w-4 h-4" />, description: "Component model, microservices, and engine layer" },
  { id: "workflows", title: "End-to-End Workflows", icon: <Workflow className="w-4 h-4" />, description: "8-phase EWA lifecycle with state machines" },
  { id: "roles", title: "Roles & Permissions", icon: <Shield className="w-4 h-4" />, description: "7 portal roles with RBAC matrix" },
  { id: "design", title: "Design System", icon: <LayoutTemplate className="w-4 h-4" />, description: "SAP Fiori-inspired visual design and enterprise components" },
  { id: "modules", title: "Module Guides", icon: <FileText className="w-4 h-4" />, description: "Step-by-step guides for all 18 enterprise modules" },
  { id: "api", title: "API Reference", icon: <ExternalLink className="w-4 h-4" />, description: "Partner API endpoints and integration guide" },
];

/* ─── Module Guide Data ─── */
const MODULE_GUIDES: ModuleGuide[] = [
  // 1. Dashboard
  {
    id: "dashboard", title: "Command Dashboard", category: "Overview", portal: "All Portals",
    actors: ["All Roles"],
    description: "The Command Dashboard is the landing page for every portal. It provides a real-time operational overview with KPI cards, charts, and role-aware alerts. Metrics include active companies, employee count, budget utilization, disbursement volume, repayment rate, outstanding balances, pending verifications, and risk scores.",
    features: [
      { feature: "KPI Overview Cards", actor: "All Roles", outcome: "Instant health check of core metrics" },
      { feature: "Budget Utilization Chart", actor: "HR / Finance / Risk", outcome: "Visual budget consumption by company" },
      { feature: "Transaction Status Distribution", actor: "Operations", outcome: "Repay/Active/Overdue/Pending breakdown" },
      { feature: "Monthly Financial Trend", actor: "Finance / Risk", outcome: "Disbursement vs repayment trend line" },
      { feature: "Role-Aware Message Strips", actor: "All Roles", outcome: "Targeted alerts (overdue, budget overflow, verification pending)" },
    ],
    steps: [
      { step: 1, title: "Access the Dashboard", description: "Click 'Dashboard' in the sidebar Overview group. The page loads automatically with your role-scoped KPIs." },
      { step: 2, title: "Review KPI Cards", description: "8 metric cards show Active Companies, Active Employees, Total Budget, Total Disbursed, Repayment Rate, Outstanding, Pending Verification, and Risk Score Avg." },
      { step: 3, title: "Analyze Charts", description: "Budget Utilization by Company (bar chart) and Transaction Status Distribution (donut chart) provide visual insights." },
      { step: 4, title: "Check Alerts", description: "Message strips at the top show urgent items requiring attention — overdue transactions, budget overflow, pending verifications." },
    ],
  },

// 2. Employee Onboarding
  {
    id: "onboarding", title: "Employee Onboarding", category: "Workforce", portal: "Corporate Portal",
    actors: ["HR Admin", "Operations", "Platform Admin"],
    description: "The Employee Onboarding module manages the full employee lifecycle from initial import to active EWA eligibility. It supports three input methods: single employee creation form, bulk Excel import with a 6-step wizard, and the Tasks/Requests/History object page pattern. The module auto-calculates EWA caps, detects budget overflow, and triggers automatic budget requests when needed.",
    features: [
      { feature: "Single Employee Add Form", actor: "HR Admin", outcome: "Employee created with auto-calculated EWA cap and budget check" },
      { feature: "6-Step Import Wizard", actor: "HR Admin (Maker)", outcome: "Bulk employees imported with column mapping, preview, and validation trace" },
      { feature: "Correct/Incorrect Trace", actor: "HR Admin", outcome: "Row-level validation feedback showing correct, incorrect, and missing data" },
      { feature: "Maker-Checker Approval", actor: "HR Admin (Maker + Checker)", outcome: "Dual-approval workflow for import batches" },
      { feature: "Budget Overflow Detection", actor: "System / HR Admin", outcome: "Auto-creates budget request when onboarding exceeds allocated budget" },
    ],
    steps: [
      { step: 1, title: "Add Single Employee", description: "Click 'Add Employee' on the Tasks tab. Fill in personal details (name, NRC, department, salary). The system auto-calculates EWA cap (Salary × Available EWA%) and checks budget availability." },
      { step: 2, title: "Bulk Import via Wizard", description: "Click 'Import' → Upload Excel/CSV file → Map columns to system fields → Preview data → System validates each row → Review Correct/Incorrect trace → Maker submits → Checker approves." },
      { step: 3, title: "Review Import Batch", description: "The Requests tab shows active import batches with row-level categorization (New/Modified/Missing). Each row shows the employee data with validation status." },
      { step: 4, title: "Handle Budget Overflow", description: "If an employee's EWA cap exceeds the remaining department budget, the system auto-creates a Budget Request. The employee stays in Approved state until the budget request is approved." },
      { step: 5, title: "View History", description: "The History tab shows completed/rejected import batches with checker details, timestamps, and action records." },
    ],
    workflows: [
      { name: "Employee Onboarding Lifecycle", states: ["Draft", "Pending Validation", "Approved", "Active", "Rejected", "Inactive"] },
      { name: "Import Batch Workflow", states: ["Uploaded", "Mapped", "Previewed", "Validated", "Maker Submitted", "Checker Approved", "Completed"] },
    ],
  },

// 3. Employee Management
  {
    id: "employees", title: "Employee Management", category: "Workforce", portal: "Corporate + Admin Portal",
    actors: ["HR Admin", "Operations", "Finance", "Risk"],
    description: "The Employee Management module is the central directory for all registered employees across all companies. It provides a comprehensive 9-tab Object Page for each employee, including Personal, Employment, Payroll, Budget, Policies, Bank, Documents, History, and Transactions. The module supports search, filtering, bulk actions, and status management.",
    features: [
      { feature: "9-Tab Employee Detail Panel", actor: "HR Admin / Operations", outcome: "Complete 360-degree view of each employee" },
      { feature: "Status Management", actor: "HR Admin", outcome: "Toggle between Active, Frozen, Suspended, Terminated" },
      { feature: "Search & Filter", actor: "All Roles", outcome: "Find employees by name, NRC, company, branch, or status" },
      { feature: "EWA Eligibility Indicator", actor: "HR Admin", outcome: "Visual indicator of trusted employee status" },
    ],
    steps: [
      { step: 1, title: "Search Employees", description: "Use the search bar to find employees by name, NRC, or company. Filter by status (Active, Pending, Frozen) and branch." },
      { step: 2, title: "Open Employee Detail", description: "Click any employee row to open the 9-tab slide-over panel showing Personal, Employment, Payroll, Budget, Policies, Bank, Documents, History, and Transactions." },
      { step: 3, title: "Manage Status", description: "Use the status dropdown to freeze, suspend, or terminate an employee. Frozen employees cannot request advances." },
    ],
  },

// 4. Transaction Monitor
  {
    id: "transactions", title: "Transaction Monitor", category: "Operations", portal: "All Portals (read)",
    actors: ["Operations", "HR", "Finance", "Risk"],
    description: "The Transaction Monitor provides a live feed of all EWA transactions across the platform. Transactions are tracked through their complete lifecycle from request to disbursement to repayment. The module supports real-time status updates, retry actions for failed transactions, and export to CSV/Excel.",
    features: [
      { feature: "Live Transaction Feed", actor: "Operations", outcome: "Real-time view of all transactions" },
      { feature: "Status Filters", actor: "All Roles", outcome: "Filter by Pending, Approved, Disbursing, Completed, Failed" },
      { feature: "Retry Failed Transactions", actor: "Operations", outcome: "Re-trigger failed disbursement attempts" },
      { feature: "Transaction Detail Panel", actor: "All Roles", outcome: "Full transaction breakdown with amount, fees, channels, and timeline" },
    ],
    steps: [
      { step: 1, title: "View Transaction Feed", description: "The main table shows all transactions with ID, employee, company, amount, status, and timestamp. Use the status filter tabs to narrow the view." },
      { step: 2, title: "Click Transaction Detail", description: "Click any row to open the detail panel showing the full transaction breakdown: requested amount, fees, payout method, disbursement channel, and status timeline." },
      { step: 3, title: "Retry Failed Transactions", description: "For FAILED status transactions, click the Retry button to re-trigger the disbursement. The system will attempt up to 3 retries with exponential backoff." },
    ],
  },

// 5. Repayment & Settlement
  {
    id: "repayment", title: "Repayment & Settlement", category: "Operations", portal: "Corporate + Ops Portal",
    actors: ["HR Admin", "Finance", "Operations"],
    description: "The Repayment & Settlement module manages the complete repayment lifecycle. It tracks repayment due dates, processes payroll auto-repayment, handles manual corporate portal repayment with bank reference and proof upload, and supports partial repayment management. Late fees are auto-calculated based on the configured slab schedule.",
    features: [
      { feature: "Repayment Tracking", actor: "HR Admin", outcome: "Monitor upcoming and overdue repayments" },
      { feature: "Payroll Auto-Repayment", actor: "Finance", outcome: "Auto-deduct from salary with reconciliation" },
      { feature: "Manual Settlement Submission", actor: "HR Admin / Finance", outcome: "Submit repayment with bank reference and proof upload" },
      { feature: "Late Fee Calculation", actor: "System", outcome: "Auto-calculate late fees based on configured slab schedule" },
    ],
    steps: [
      { step: 1, title: "View Repayment Schedule", description: "The table shows all active advances with their repayment due dates, amounts, and current status. Overdue items are highlighted in red." },
      { step: 2, title: "Submit Settlement", description: "Click 'Submit Settlement' → Select employee(s) → Enter repayment amount (full or partial) → Enter bank reference number → Upload proof document → Submit." },
      { step: 3, title: "Verify Settlement", description: "Operations verifies the bank receipt proof → Maker-Checker approval → Circle Ledger entries updated → Balance reset." },
    ],
  },

// 6. Settlement Verification
  {
    id: "settlement", title: "Settlement Verification", category: "Operations", portal: "Ops + Finance Portal",
    actors: ["Operations", "Finance"],
    description: "The Settlement Verification module implements the Maker-Checker workflow for approving settlement submissions. Incoming settlements enter a verification queue where the Maker (Operations) reviews the bank receipt proof and the Checker (Finance) provides final approval. The module supports rejection with mandatory reason logging.",
    features: [
      { feature: "Verification Queue", actor: "Operations", outcome: "Incoming settlements awaiting review" },
      { feature: "Maker Review", actor: "Operations (Maker)", outcome: "Verify bank receipt proof and approve/reject" },
      { feature: "Checker Approval", actor: "Finance (Checker)", outcome: "Final approval for large settlements above threshold" },
      { feature: "Rejection with Reason", actor: "Operations / Finance", outcome: "Mandatory reason logged for all rejections" },
    ],
    steps: [
      { step: 1, title: "Review Queue", description: "View the settlement verification queue showing Pending, Maker Verified, and Checker Approved statuses." },
      { step: 2, title: "Maker Verify", description: "Click a settlement row → Open detail panel → Review bank receipt proof → Click Verify (Maker) or Reject with reason." },
      { step: 3, title: "Checker Approve", description: "After Maker verification, Finance Checker reviews the settlement → Approves or Rejects with comment." },
    ],
  },

// 7. Circle Ledger (GL)
  {
    id: "circle-ledger", title: "Circle Ledger (GL)", category: "Finance", portal: "Finance + Admin Portal",
    actors: ["Finance", "Platform Admin"],
    description: "The Circle Ledger implements immutable double-entry accounting for the EWA platform. Every transaction creates a closed loop of debits and credits that must balance to zero. The ledger supports journal entry viewing, balance verification, trial balance generation, and 7-year regulatory retention. All entries are timestamped and tamper-proof.",
    features: [
      { feature: "Journal Entry View", actor: "Finance", outcome: "View all double-entry journal postings" },
      { feature: "Debit/Credit Balance Check", actor: "Finance", outcome: "Verify that debits equal credits for each circle" },
      { feature: "Trial Balance", actor: "Finance", outcome: "Generate trial balance report across all accounts" },
      { feature: "GL Account Drill-Down", actor: "Finance", outcome: "Navigate from account to transactions to source documents" },
    ],
    steps: [
      { step: 1, title: "View Ledger Entries", description: "The main table shows all journal entries with Entry ID, Date, Account, Debit, Credit, and Circle Reference. Green indicates debit, red indicates credit." },
      { step: 2, title: "Verify Circle Balance", description: "Each transaction creates a 'circle' — a closed loop of entries. The total of each circle must be zero. The system automatically validates this." },
      { step: 3, title: "Generate Trial Balance", description: "Use the Trial Balance action to generate a snapshot of all account balances at a point in time. Export to PDF or Excel." },
    ],
  },

// 8. Fee Builder & Policy
  {
    id: "fee-builder", title: "Fee Builder & Policy", category: "Finance", portal: "Admin Portal",
    actors: ["Platform Admin"],
    description: "The Fee Builder & Policy module allows Platform Admins to configure the GoRule-based fee engine. It supports multiple fee types (transaction fee, late fee, convenience fee), tiered fee structures based on amount ranges, and company-specific overrides. Fee policies are evaluated in sub-milliseconds at the time of each advance request.",
    features: [
      { feature: "Fee Type Configuration", actor: "Platform Admin", outcome: "Define transaction, late, convenience fee types" },
      { feature: "Tiered Fee Structures", actor: "Platform Admin", outcome: "Set fee percentages by amount range brackets" },
      { feature: "Company Overrides", actor: "Platform Admin", outcome: "Apply company-specific fee adjustments" },
      { feature: "Fee Preview Simulator", actor: "Platform Admin", outcome: "Test fee calculations before deploying" },
    ],
    steps: [
      { step: 1, title: "Create Fee Policy", description: "Click 'New Policy' → Select fee type → Set amount range brackets → Define percentage or flat fee for each tier → Save." },
      { step: 2, title: "Apply Company Override", description: "Select a company from the dropdown → Override the base fee rate for specific tiers → Save the override." },
      { step: 3, title: "Simulate Fee", description: "Use the Simulator tab to test fee calculations with sample amounts and verify the policy works correctly before deploying." },
    ],
  },

// 9. Budget Management
  {
    id: "budget", title: "Budget Management", category: "Risk & Budget", portal: "Corporate + Risk + Finance Portal",
    actors: ["HR Admin", "Risk Manager", "Finance Officer"],
    description: "The Budget Management module handles the complete budget lifecycle including allocation, utilization tracking, overflow detection, and the 3-tier approval workflow (HR → Risk → Finance). Budgets are allocated per company, department, business unit, or employee group. The module supports budget increase requests, reductions, transfers, and reserves.",
    features: [
      { feature: "Budget Allocation View", actor: "HR Admin", outcome: "View allocated vs utilized vs remaining budget" },
      { feature: "Budget Increase Request", actor: "HR Admin", outcome: "Submit overflow request with justification" },
      { feature: "3-Tier Approval Workflow", actor: "HR → Risk → Finance", outcome: "Multi-level approval with SLA timers" },
      { feature: "Budget Analytics", actor: "Risk Manager", outcome: "Trend, forecast, utilization, and comparison charts" },
    ],
    steps: [
      { step: 1, title: "View Budget Dashboard", description: "KPIs show Total Budget, Used, Remaining, Pending, Utilization %, and Overflow Cases. Bar charts show allocation by company and department." },
      { step: 2, title: "Submit Budget Request", description: "When onboarding exceeds budget, the system auto-creates a request. Or manually create one: select entity → enter amount → add justification → submit." },
      { step: 3, title: "Approval Workflow", description: "Request flows through HR Review (48h SLA) → Risk Review (24h SLA) → Finance Review (24h SLA) → Approved/Rejected. SLA timers and escalation are tracked." },
    ],
  },

// 10. Risk & Backoffice
  {
    id: "risk", title: "Risk & Backoffice", category: "Risk & Budget", portal: "Risk + Ops Portal",
    actors: ["Risk Manager", "Operations"],
    description: "The Risk & Backoffice module is the command center for risk management. It provides company risk scoring (5-tier A-E), overdue monitoring with drill-down, disbursement control (freeze/unfreeze), ghost employee detection, treasury dashboard, and compliance reporting. Risk scores are auto-recalculated nightly based on transaction history and repayment behavior.",
    features: [
      { feature: "Risk Scoring Dashboard", actor: "Risk Manager", outcome: "Company scores with tier distribution A-E" },
      { feature: "Overdue Monitoring", actor: "Risk Manager", outcome: "Breakdown by 3/7/30 days with alerts" },
      { feature: "Disbursement Control", actor: "Risk Manager", outcome: "Freeze/unfreeze company or branch" },
      { feature: "Ghost Employee Detection", actor: "Risk Manager", outcome: "Alerts for missing employees with outstanding balance" },
      { feature: "Treasury Dashboard", actor: "Risk Manager", outcome: "Total disbursed, outstanding, cash flow forecast" },
    ],
    steps: [
      { step: 1, title: "Review Risk Scores", description: "The dashboard shows company risk scores, tier distribution, and auto-recalculation status. Scores are updated nightly." },
      { step: 2, title: "Monitor Overdues", description: "View the overdue breakdown by days (3/7/30+). Click any row to drill down to company or employee level." },
      { step: 3, title: "Control Disbursement", description: "Freeze a company or branch to halt new advances. View real-time utilization. Unfreeze when conditions improve." },
    ],
  },

// 11. Reports Center
  {
    id: "reports", title: "Reports Center", category: "Reporting", portal: "All Portals",
    actors: ["All Roles (scoped)"],
    description: "The Reports Center provides role-scoped access to all platform reports including employee summaries, advance summaries, deduction reports, branch comparisons, budget utilization, repayment history, audit trails, and compliance reports. Reports can be filtered by date range, company, branch, and status, then exported to CSV, Excel, or PDF.",
    features: [
      { feature: "Report Type Selector", actor: "All Roles", outcome: "Choose from 10+ report types" },
      { feature: "Date Range & Filters", actor: "All Roles", outcome: "Filter by period, company, branch, status" },
      { feature: "Export Options", actor: "All Roles", outcome: "CSV, Excel, PDF export with formatting" },
      { feature: "Scheduled Reports", actor: "Platform Admin", outcome: "Auto-generate and deliver reports on schedule" },
    ],
    steps: [
      { step: 1, title: "Select Report Type", description: "Choose from Employee Summary, Advance Summary, Deduction Report, Branch Comparison, Budget Utilization, Repayment History, Audit Trail, etc." },
      { step: 2, title: "Set Filters", description: "Configure date range, company, branch, and status filters to narrow the report scope." },
      { step: 3, title: "Export", description: "Click Export to download the report in CSV, Excel, or PDF format." },
    ],
  },

// 12. Payroll & Deduction
  {
    id: "payroll", title: "Payroll & Deduction", category: "Finance", portal: "Corporate Portal",
    actors: ["HR Admin", "Finance"],
    description: "The Payroll & Deduction module manages the payroll reconciliation process and deduction file export. HR downloads deduction files in multiple formats (CSV, Excel, SAP, Oracle) containing all EWA advance deductions to be processed by the company payroll system. The module tracks reconciliation status between expected and actual deductions.",
    features: [
      { feature: "Period Selector", actor: "HR Admin", outcome: "Select payroll period for deduction generation" },
      { feature: "Deduction Table", actor: "HR Admin / Finance", outcome: "View all deductions per employee for the period" },
      { feature: "Multi-Format Export", actor: "HR Admin / Finance", outcome: "CSV, Excel, SAP, Oracle format download" },
      { feature: "Reconciliation Status", actor: "Finance", outcome: "Track expected vs actual deduction matching" },
    ],
    steps: [
      { step: 1, title: "Select Payroll Period", description: "Choose the payroll period (month) for which to generate the deduction file." },
      { step: 2, title: "Review Deductions", description: "The table shows all employees with active advances and their deduction amounts for the selected period." },
      { step: 3, title: "Export Deduction File", description: "Click 'Export' → Select format (CSV/Excel/SAP/Oracle) → Download the file → Upload to the company payroll system." },
    ],
  },

// 13. Notification Center
  {
    id: "notifications", title: "Notification Center", category: "Reporting", portal: "All Portals",
    actors: ["HR Admin", "Operations", "Finance", "Platform Admin"],
    description: "The Notification Center aggregates all system notifications across the platform. It includes KYC approval notifications, advance disbursement confirmations, repayment reminders, budget overflow alerts, settlement verification requests, and system maintenance announcements. Notifications are channel-agnostic (in-app, email, SMS) and support read/unread tracking.",
    features: [
      { feature: "Notification Feed", actor: "All Roles", outcome: "Unified view of all notifications" },
      { feature: "Channel Badges", actor: "All Roles", outcome: "Visual indicators for Email, SMS, In-App channels" },
      { feature: "Mark All Read", actor: "All Roles", outcome: "Clear all unread notifications at once" },
      { feature: "Filter by Type", actor: "All Roles", outcome: "Filter by notification category (KYC, Advance, Repayment, System)" },
    ],
    steps: [
      { step: 1, title: "View Notifications", description: "The feed shows all notifications with timestamp, type badge, channel icon, and read/unread status. Unread items are highlighted." },
      { step: 2, title: "Filter Notifications", description: "Use the filter dropdown to narrow by notification type: KYC, Advance, Repayment, Settlement, Budget, System." },
      { step: 3, title: "Mark Read", description: "Click individual notifications to mark as read, or use 'Mark All Read' to clear all." },
    ],
  },

// 14. Admin & Configuration
  {
    id: "admin", title: "Admin & Configuration", category: "System", portal: "Admin Portal",
    actors: ["Platform Admin"],
    description: "The Admin & Configuration module is the central control panel for Platform Admins. It provides module enable/disable toggles, role/permission matrix management, audit log viewer, system configuration (rate limits, timeouts, feature flags), integration health monitoring, and maintenance mode controls.",
    features: [
      { feature: "Module Toggles", actor: "Platform Admin", outcome: "Enable/disable modules per role" },
      { feature: "Role Permission Matrix", actor: "Platform Admin", outcome: "Configure which roles see which modules" },
      { feature: "Audit Log Viewer", actor: "Platform Admin", outcome: "Searchable audit trail across all entities" },
      { feature: "System Configuration", actor: "Platform Admin", outcome: "Rate limits, timeouts, feature flags, maintenance mode" },
    ],
    steps: [
      { step: 1, title: "Configure Modules", description: "Use the module toggles to enable or disable specific modules for each role type. Changes take effect immediately." },
      { step: 2, title: "Manage Permissions", description: "The role/permission matrix shows which modules each role (HR, Sales, Operations, Finance, Risk, Admin) can access." },
      { step: 3, title: "View Audit Logs", description: "Search and filter the audit log to track all actions across the platform — who did what, when, and to which entity." },
    ],
  },

// 15. Workflow & Case Management
  {
    id: "workflow", title: "Workflow & Case Management", category: "Integration", portal: "All Portals",
    actors: ["HR", "Finance", "Operations", "Risk"],
    description: "The Workflow & Case Management module provides a unified view of all workflow cases across the platform. It spans employee imports, budget requests, employee verification, company onboarding, settlements, and disbursements. Each case includes state machine visualization, SLA countdown timers, escalation level tracking, and a clickable case detail panel with Approve/Reject/Comment actions. The History tab provides a full audit trail timeline.",
    features: [
      { feature: "My Tasks View", actor: "All Roles", outcome: "See work items assigned to your role" },
      { feature: "All Requests View", actor: "All Roles", outcome: "View all workflow cases across the platform" },
      { feature: "State Machine Visualization", actor: "All Roles", outcome: "Visual flow showing current state and next steps" },
      { feature: "SLA Countdown Timers", actor: "All Roles", outcome: "Track time remaining before escalation" },
      { feature: "Audit Trail Timeline", actor: "All Roles", outcome: "Complete history of who did what and when" },
    ],
    steps: [
      { step: 1, title: "View My Tasks", description: "The My Tasks tab shows work items assigned to your role with priority badges, SLA timers, and escalation indicators." },
      { step: 2, title: "Open Case Detail", description: "Click any case row to open the detail panel showing the state machine flow, case data, SLA timers, and action buttons." },
      { step: 3, title: "Take Action", description: "Use the Approve/Reject/Comment buttons to process the case. Rejections require a mandatory reason. Comments are logged to the audit trail." },
      { step: 4, title: "Review History", description: "The History tab shows the complete audit trail — every state transition, who performed it, when, and what action was taken." },
    ],
    workflows: [
      { name: "Budget Overflow Approval", states: ["Draft", "Submitted", "HR Review", "Risk Review", "Finance Review", "Approved", "Rejected", "Escalated"] },
      { name: "Employee Onboarding", states: ["Draft", "Pending Validation", "Approved", "Active", "Rejected"] },
      { name: "Settlement Verification", states: ["Submitted", "Maker Verified", "Checker Approved", "Posted"] },
    ],
  },

// 16. Write-Off Management
  {
    id: "writeoff", title: "Write-Off Management", category: "Finance", portal: "Finance + Risk Portal",
    actors: ["Finance Officer", "Risk Manager"],
    description: "The Write-Off Management module handles bad debt write-off processing. When an advance cannot be recovered after extended overdue periods, Finance can initiate a write-off request. The module tracks write-off history, maintains the write-off register, and integrates with the Circle Ledger for GL postings.",
    features: [
      { feature: "Write-Off Register", actor: "Finance", outcome: "Track all write-offs with status and approval" },
      { feature: "Write-Off Request", actor: "Finance", outcome: "Initiate write-off with justification" },
      { feature: "GL Posting", actor: "Finance", outcome: "Auto-create Circle Ledger entries for write-offs" },
    ],
    steps: [
      { step: 1, title: "Identify Write-Off Candidates", description: "Review the overdue register to identify advances that are unlikely to be recovered." },
      { step: 2, title: "Submit Write-Off Request", description: "Select the advance → Enter write-off reason → Submit for approval." },
      { step: 3, title: "Approval & GL Posting", description: "Risk Manager reviews → Finance approves → Circle Ledger entries created → Balance adjusted." },
    ],
  },

// 17. Form Creator
  {
    id: "form-creator", title: "Form Creator", category: "System", portal: "Admin Portal",
    actors: ["Platform Admin"],
    description: "The Form Creator is a dynamic form builder that allows Platform Admins to create custom KYC forms for companies and employees without code changes. Forms are built using a drag-and-drop field builder with support for text fields, date pickers, file uploads, dropdowns, and conditional logic. Forms can be assigned to specific companies or tenants.",
    features: [
      { feature: "Form Template Builder", actor: "Platform Admin", outcome: "Create custom KYC forms with drag-and-drop" },
      { feature: "Field Types", actor: "Platform Admin", outcome: "Text, date, file upload, dropdown, checkbox, conditional" },
      { feature: "JSON Schema Output", actor: "Platform Admin", outcome: "Forms generate JSON schema for the backend" },
      { feature: "Company Assignment", actor: "Platform Admin", outcome: "Assign forms to specific companies or tenants" },
    ],
    steps: [
      { step: 1, title: "Create Form Template", description: "Click 'New Template' → Name the form → Add fields using the field builder → Configure field types and validation rules." },
      { step: 2, title: "Configure Fields", description: "For each field, set the type (text/date/file/dropdown), label, required status, validation rules, and conditional visibility." },
      { step: 3, title: "Assign to Company", description: "Select the target company or tenant → Assign the form → The form becomes active for KYC collection." },
    ],
  },

// 18. Error Messages
  {
    id: "errors", title: "Error Messages", category: "System", portal: "Admin Portal",
    actors: ["Platform Admin"],
    description: "The Error Messages module provides a centralized view of all system errors and exceptions. It includes error categorization (validation, integration, system), frequency tracking, resolution status, and error code management. Platform Admins can view error trends, mark errors as resolved, and configure error notifications.",
    features: [
      { feature: "Error Log Table", actor: "Platform Admin", outcome: "View all system errors with categorization" },
      { feature: "Error Frequency Tracking", actor: "Platform Admin", outcome: "Identify recurring errors by type and source" },
      { feature: "Resolution Tracking", actor: "Platform Admin", outcome: "Mark errors as resolved with notes" },
    ],
    steps: [
      { step: 1, title: "Review Error Log", description: "The table shows all errors with code, category, source, timestamp, and status (Open, In Progress, Resolved)." },
      { step: 2, title: "Filter by Category", description: "Filter errors by type: Validation, Integration, System, Payment, or All." },
      { step: 3, title: "Resolve Errors", description: "Click an error → Mark as In Progress or Resolved → Add resolution notes." },
    ],
  },

// 19. Disbursement Engine
  {
    id: "disbursement", title: "Disbursement Engine", category: "Integration", portal: "Ops + Finance Portal",
    actors: ["Operations", "Finance", "Platform Admin"],
    description: "The Disbursement Engine orchestrates multi-channel payout processing. It supports real-time disbursement (KBZ Pay, Wave, CB Pay via N8N + Temporal), QR manual transfer, MoPayment gateway, and OTC cash code generation. The engine implements 3 retry attempts with exponential backoff, 60-second hard timeouts, and automatic fallback to QR manual on failure.",
    features: [
      { feature: "Disbursement Queue", actor: "Operations", outcome: "View all pending disbursements" },
      { feature: "Channel Status", actor: "Operations", outcome: "Real-time status per disbursement channel" },
      { feature: "Retry Logic", actor: "Operations", outcome: "Auto-retry failed disbursements (3 attempts)" },
      { feature: "Fallback Processing", actor: "Operations", outcome: "Automatic fallback to QR manual on failure" },
    ],
    steps: [
      { step: 1, title: "Monitor Disbursement Queue", description: "View all disbursements with their current state: Requested → Validating → Disbursing → Completed/Failed." },
      { step: 2, title: "Handle Failed Disbursements", description: "For FAILED status, the system automatically retries up to 3 times. After max retries, it falls back to QR manual transfer." },
      { step: 3, title: "Review Channel Performance", description: "The channel status panel shows success rates, average processing time, and failure reasons per payment channel." },
    ],
  },

// 20. Bank Integration
  {
    id: "bank-integration", title: "Bank Integration", category: "Integration", portal: "Finance + Ops Portal",
    actors: ["Finance", "Operations", "Platform Admin"],
    description: "The Bank Integration module manages connections to payment providers and financial institutions. It supports KBZ Pay, Wave Money, CB Pay, MoPayment Gateway, and direct bank API connections. The module provides integration health monitoring, test connectivity, transaction status sync, and reconciliation with external payment systems.",
    features: [
      { feature: "Integration Health Monitor", actor: "Finance", outcome: "Real-time status of all payment integrations" },
      { feature: "Test Connectivity", actor: "Platform Admin", outcome: "Verify integration endpoints are operational" },
      { feature: "Transaction Sync", actor: "Operations", outcome: "Sync transaction status with external providers" },
      { feature: "Reconciliation", actor: "Finance", outcome: "Match internal ledger with external payment records" },
    ],
    steps: [
      { step: 1, title: "Check Integration Health", description: "The dashboard shows all integrations with their current status (Connected, Degraded, Offline) and last sync time." },
      { step: 2, title: "Test Connectivity", description: "Click 'Test' on any integration to verify the endpoint is responding correctly. Results show response time and status." },
      { step: 3, title: "Sync Transactions", description: "Trigger a manual sync to pull the latest transaction statuses from external payment providers." },
    ],
  },

// 21. Service Catalog
  {
    id: "service-catalog", title: "Service Catalog", category: "System", portal: "Admin + Ops Portal",
    actors: ["Platform Admin", "Operations"],
    description: "The Service Catalog registers and manages all platform services, microservices, and external integrations. It provides service registry management, fee mapping per service, entity role definitions, and service health monitoring. The catalog is the central source of truth for what services are available and how they are configured.",
    features: [
      { feature: "Service Registry", actor: "Platform Admin", outcome: "Register and manage all platform services" },
      { feature: "Service Detail View", actor: "Platform Admin", outcome: "View configuration, endpoints, and status per service" },
      { feature: "Fee Mapping", actor: "Platform Admin", outcome: "Map fees to specific services and transactions" },
      { feature: "Entity Roles", actor: "Platform Admin", outcome: "Define roles and permissions per service" },
    ],
    steps: [
      { step: 1, title: "View Service Registry", description: "The Service Registry tab shows all registered services with name, version, status, and endpoint URL." },
      { step: 2, title: "Manage Service Details", description: "Click a service to view its configuration, API endpoints, fee mappings, and entity role definitions." },
      { step: 3, title: "Monitor Service Health", description: "The health status column shows real-time availability and response times for each service." },
    ],
  },

// 22. Fee Hierarchy Engine
  {
    id: "fee-hierarchy", title: "Fee Hierarchy Engine", category: "Finance", portal: "Admin + Finance Portal",
    actors: ["Platform Admin", "Finance"],
    description: "The Fee Hierarchy Engine manages the tiered fee structure that determines how fees are calculated based on amount ranges, company type, and risk tier. It provides a visual hierarchy of fee rules, override management, and effective rate calculation. The engine works in conjunction with the Fee Builder for dynamic fee policy creation.",
    features: [
      { feature: "Fee Hierarchy View", actor: "Platform Admin", outcome: "Visual tree of fee rules from global to company level" },
      { feature: "Override Management", actor: "Platform Admin", outcome: "Apply company-specific fee overrides" },
      { feature: "Effective Rate Calculator", actor: "Finance", outcome: "Calculate the effective fee rate for any transaction" },
    ],
    steps: [
      { step: 1, title: "View Fee Hierarchy", description: "The hierarchy shows fee rules from global (platform-level) down to company-specific overrides." },
      { step: 2, title: "Apply Override", description: "Select a company → Override specific fee tiers → The override takes effect immediately for all future transactions." },
      { step: 3, title: "Calculate Effective Rate", description: "Enter a transaction amount → Select company and risk tier → The calculator shows the effective fee rate after all hierarchy rules are applied." },
    ],
  },

// 23. Employee Groups
  {
    id: "employee-groups", title: "Employee Groups", category: "Workforce", portal: "Corporate Portal",
    actors: ["HR Admin", "Operations", "Platform Admin"],
    description: "The Employee Groups module allows HR Admins to organize employees into logical groups for bulk operations, policy assignment, and reporting. Groups can be based on department, location, salary band, or custom criteria. The module supports group-based EWA limits, policy overrides, and group-level reporting.",
    features: [
      { feature: "Group Creation", actor: "HR Admin", outcome: "Create employee groups with custom criteria" },
      { feature: "Group-Based Limits", actor: "HR Admin", outcome: "Set EWA limits per employee group" },
      { feature: "Policy Assignment", actor: "HR Admin", outcome: "Assign policies to entire groups" },
      { feature: "Group Reporting", actor: "HR Admin", outcome: "Generate reports per employee group" },
    ],
    steps: [
      { step: 1, title: "Create Group", description: "Click 'New Group' → Name the group → Select criteria (department, location, salary band) → Add employees." },
      { step: 2, title: "Set Group Limits", description: "Select a group → Configure EWA limits (max per cycle, daily limit, single withdrawal cap) that override individual employee limits." },
      { step: 3, title: "Assign Policies", description: "Assign fee policies, withdrawal policies, or repayment policies to the entire group at once." },
    ],
  },

// 24. Transaction Limits
  {
    id: "limitations", title: "Transaction Limits", category: "System", portal: "Admin + Risk Portal",
    actors: ["Platform Admin", "Risk Manager", "Operations"],
    description: "The Transaction Limits module configures the velocity controls and transaction limits that govern EWA advance requests. Limits include per-employee daily limits, per-company cycle limits, velocity controls (max N advances per day), and global platform caps. The module supports time-window based limits and exception handling.",
    features: [
      { feature: "Per-Employee Limits", actor: "Platform Admin", outcome: "Set daily and cycle limits per employee" },
      { feature: "Per-Company Limits", actor: "Risk Manager", outcome: "Set cycle limits and velocity controls per company" },
      { feature: "Platform Caps", actor: "Platform Admin", outcome: "Set global maximum limits for the entire platform" },
      { feature: "Time-Window Controls", actor: "Platform Admin", outcome: "Configure advance request windows (e.g., 15 days before payday)" },
    ],
    steps: [
      { step: 1, title: "Configure Limits", description: "Set per-employee daily limits, per-company cycle limits, and velocity controls (max advances per day)." },
      { step: 2, title: "Set Time Windows", description: "Configure the advance request window — e.g., employees can request advances only within 15 days of their payday." },
      { step: 3, title: "Review Exceptions", description: "View the exception log showing limit override requests and their approval status." },
    ],
  },
];

/* ─── Platform Overview Content ─── */
function PlatformOverview() {
  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="bg-[#100841] rounded-[3px] p-8 text-white">
        <div className="flex items-start gap-4">
          <BookOpen className="w-8 h-8 text-[#31d891] shrink-0 mt-1" />
          <div>
            <h2 className="text-xl font-bold mb-2">EWA 3.0 2026 — Standalone Earned Wage Access Platform</h2>
            <p className="text-[#868c95] text-[11px] leading-relaxed max-w-3xl">
              EWA 3.0 replaces 8 legacy systems with a unified, SaaS-ready platform enabling corporate employees to access earned wages
              before payday. The platform features multi-channel disbursement, automated risk assessment, circle-based ledger accounting,
              and integrated Maker-Checker workflows across 5 unified portals.
            </p>
          </div>
        </div>
      </div>

{/* Key Benefits */}
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Platform Benefits</h3>
        <div className="grid grid-cols-2 gap-3">
          {[
            { title: "Full DW Independence", desc: "Eliminate dependency on 8 legacy systems", icon: <Zap className="w-4 h-4 text-[#31d891]" /> },
            { title: "Unified Platform", desc: "Replace 6 portals with 3 unified portals + Mobile App", icon: <Users className="w-4 h-4 text-[#31d891]" /> },
            { title: "Multi-Channel Disbursement", desc: "Real-time via KBZ Pay/Wave/CB Pay, QR, OTC", icon: <Repeat className="w-4 h-4 text-[#31d891]" /> },
            { title: "Risk-Based Credit Engine", desc: "Automated company risk scoring (5 tiers A-E)", icon: <Shield className="w-4 h-4 text-[#31d891]" /> },
            { title: "Circle Based Ledger", desc: "Immutable double-entry accounting with audit trail", icon: <BookOpen className="w-4 h-4 text-[#31d891]" /> },
            { title: "Maker-Checker Everywhere", desc: "Dual-approval for KYC, repayment, upload, budget", icon: <CheckCircle2 className="w-4 h-4 text-[#31d891]" /> },
          ].map((item, i) => (
            <div key={i} className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-[3px] bg-[#efefff] flex items-center justify-center shrink-0">
                  {item.icon}
                </div>
                <div>
                  <p className="text-[10px] font-bold text-[#100841] mb-1">{item.title}</p>
                  <p className="text-[9px] text-[#4f525d]">{item.desc}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Architecture Overview */}
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">System Components</h3>
        <div className="bg-white rounded-[3px] border border-[#dfdfdf]">
          <table className="w-full text-[9px]">
            <thead>
              <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">#</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Component</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Technology</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Purpose</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["C-01", "Customer Mobile App", "React Native", "Employee-facing: registration, KYC, advance request, transaction history"],
                ["C-02", "Corporate Portal", "React.js (Next.js)", "HR-facing: employee management, roster sync, settlement, budget request"],
                ["C-03", "Admin Portal", "React.js (Next.js)", "Platform admin: tenant mgmt, GoRule config, Form Creator"],
                ["C-04", "Ops Portal", "React.js (Next.js)", "Operations: transaction monitoring, settlement verification, repayment mgmt"],
                ["C-05", "Risk & Backoffice", "React.js (Next.js)", "Risk: company scoring, budget mgmt, ghost detection, treasury"],
                ["C-06", "Finance Portal", "React.js (Next.js)", "Finance: settlement approval, GL reconciliation, financial reports"],
                ["C-07", "Partner API", "NestJS REST", "External integration: balance inquiry, advance request, status tracking"],
                ["C-08", "EWA Backend (Core)", "NestJS", "Business logic: auth, employee mgmt, advance requests, ledger operations"],
                ["C-09", "Workflow Engine", "Temporal 1.24.x", "Orchestration: disbursement, onboarding workflow, retry, SAGA"],
                ["C-10", "Decision Engine", "GoRule (zen-engine)", "Rules: eligibility, fees, limits, risk scoring — sub-millisecond"],
                ["C-11", "Integration Middleware", "N8N 1.x", "Connectors: KBZ Pay, Wave, CB Pay, MoPayment, SMS, Email"],
                ["C-12", "Form Creator Engine", "JSON Schema + React", "Dynamic KYC forms — configurable per tenant without code"],
                ["C-13", "Circle Ledger Engine", "PostgreSQL + Custom GL", "Double-entry accounting: journal entries, balance verification"],
              ].map(([id, name, tech, purpose], i) => (
                <tr key={i} className="border-b border-[#efefff] hover:bg-[#ffffff]">
                  <td className="px-4 py-2 text-[#4f525d] font-mono">{id}</td>
                  <td className="px-4 py-2 font-semibold text-[#100841]">{name}</td>
                  <td className="px-4 py-2 text-[#4f525d]">{tech}</td>
                  <td className="px-4 py-2 text-[#4f525d]">{purpose}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ─── Architecture Content ─── */
function ArchitectureContent() {
  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">System Architecture Layers</h3>
        <div className="space-y-4">
          {[
            { layer: "Portal Layer", color: "bg-[#100841]", items: "Corporate Portal, Admin Portal, Ops Portal, Risk Portal, Finance Portal, Mobile App" },
            { layer: "API Gateway", color: "bg-[#31d891]", items: "Auth, RBAC, Rate Limiting, RLS Context, Audit Logging" },
            { layer: "Microservices", color: "bg-[#31d891]/70", items: "Auth Service, Employee Service, Advance Service, Ledger Service, Form Creator Service" },
            { layer: "Engine & Infrastructure", color: "bg-[#10b981]", items: "Temporal Workflow, GoRule Decision Engine, N8N Integration, Circle Ledger, Redis Cache" },
            { layer: "Data Layer", color: "bg-[#f59e0b]", items: "PostgreSQL 15 with Row-Level Security (operator_id + company_id), Audit logs on ALL tables" },
            { layer: "External Systems", color: "bg-[#100841]", items: "KBZ Pay, Wave Money, CB Pay, MoPayment Gateway, SMS/Email Gateway, DICA Registry" },
          ].map((item, i) => (
            <div key={i} className="flex items-start gap-3">
              <div className={`w-32 h-10 rounded-[3px] ${item.color} flex items-center justify-center shrink-0`}>
                <span className="text-[9px] font-bold text-white">{item.layer}</span>
              </div>
              <div className="flex-1 bg-white rounded-[3px] border border-[#dfdfdf] px-4 py-2">
                <p className="text-[9px] text-[#4f525d]">{item.items}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

<div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Entity Hierarchy</h3>
        <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
          <pre className="text-[9px] text-[#4f525d] leading-relaxed font-mono">
{`Platform (EWA Standalone)
└── Operator (Country Tenant — Myanmar, Thailand, Vietnam)
    └── Company (DICA registered entity)
        ├── Company Profile (KYC, DICA reg., license docs, financial docs)
        ├── Company Settlement Account
        ├── Company Type: CORPORATE | SME
        ├── Risk Profile (Score, Tier A-E, Credit Pool, Budget)
        ├── Configuration (GoRule: fees, limits, windows, cycles)
        ├── Users (HR Admins — scope-based)
        │   ├── Admin HR Company (Owner — full access)
        │   ├── Branch HR (branch-scoped)
        │   ├── HR Viewer (read-only)
        │   └── Finance (repayment + export)
        ├── Branches
        │   ├── Default: "Head Office" (auto-created)
        │   └── Branch A, Branch B (created by Admin HR)
        └── Employees
            ├── Assigned to one Branch
            ├── Status: UNVERIFIED → ACTIVE → FROZEN/SUSPENDED/TERMINATED
            ├── Trusted Employee (Whitelisted for EWA)
            └── Request → Disburse → Repay cycle`}
          </pre>
        </div>
      </div>

<div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Corporate vs SME Comparison</h3>
        <div className="bg-white rounded-[3px] border border-[#dfdfdf]">
          <table className="w-full text-[9px]">
            <thead>
              <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Dimension</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Corporate</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">SME</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Employees", "Unlimited (max 10,000)", "Max 50"],
                ["Branches", "Multiple supported", "Single 'Head Office' only"],
                ["HR Users", "Multiple roles (Admin, Branch, Viewer, Finance)", "Single Admin HR (owner)"],
                ["Budget Model", "Accumulated or Separate (per branch)", "Accumulated only"],
                ["Maker-Checker", "Required for upload, repayment, budget", "Auto-disabled (single user)"],
                ["Risk Assessment", "Full: financial docs, bank statements", "Simplified: basic KYC + company info"],
                ["Upload Workflow", "Diff preview → Maker → Checker", "Direct upload → immediate apply"],
                ["Reports", "All reports with branch drill-down", "Core reports, no branch dimension"],
              ].map(([dim, corp, sme], i) => (
                <tr key={i} className="border-b border-[#efefff] hover:bg-[#ffffff]">
                  <td className="px-4 py-2 font-semibold text-[#100841]">{dim}</td>
                  <td className="px-4 py-2 text-[#4f525d]">{corp}</td>
                  <td className="px-4 py-2 text-[#4f525d]">{sme}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ─── Workflows Content ─── */
function WorkflowsContent() {
  const lifecyclePhases = [
    { phase: 0, title: "Company Onboarding & Risk Assessment", desc: "Ops/Self-Register → KYC Review → Financial Docs → Credit Assessment → Budget Approval → Integration → ACTIVE", color: "bg-[#100841]" },
    { phase: 1, title: "HR Setup & Employee Import", desc: "HR Login → Upload Roster → Diff Engine Preview → Maker-Checker Approval", color: "bg-[#31d891]" },
    { phase: 2, title: "Employee Registration & KYC", desc: "Employee Downloads App → Self-Registration → KYC Upload (NRC + Selfie + OCR)", color: "bg-[#31d891]" },
    { phase: 3, title: "Employee Verification & Trusted Status", desc: "Employee Submits Employment Info → 3-Scenario Verification Engine", color: "bg-[#31d891]" },
    { phase: 4, title: "Credit Assessment & Budget Allocation", desc: "Corporate Uploads Financial Docs → Risk Officer Review → Finance Approval", color: "bg-[#10b981]" },
    { phase: 5, title: "Wage Advance Request", desc: "Employee Opens App → 4-Step Advance Flow (Amount → Payout → Review → Confirm)", color: "bg-[#10b981]" },
    { phase: 6, title: "Disbursement", desc: "Multi-Channel Payout: Real-Time / QR Manual / MoPayment / OTC Cash Code", color: "bg-[#f59e0b]" },
    { phase: 7, title: "Repayment & Settlement", desc: "Repayment Due → Payroll Auto / Manual Portal / Auto-Deduct → Maker-Checker", color: "bg-[#f59e0b]" },
    { phase: 8, title: "Circle Ledger Closure & Reporting", desc: "End of Cycle → Reconciliation → Trial Balance → P&L → Risk Recalc → 7-Year Archive", color: "bg-[#100841]" },
  ];

return (
    <div className="space-y-8">
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">EWA Lifecycle — 8 Phases</h3>
        <div className="space-y-3">
          {lifecyclePhases.map((phase) => (
            <div key={phase.phase} className="flex items-start gap-3">
              <div className={`w-16 h-8 rounded-[3px] ${phase.color} flex items-center justify-center shrink-0`}>
                <span className="text-[8px] font-bold text-white">Phase {phase.phase}</span>
              </div>
              <div className="flex-1">
                <p className="text-[10px] font-bold text-[#100841]">{phase.title}</p>
                <p className="text-[9px] text-[#4f525d] mt-0.5">{phase.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

<div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Key Workflow State Machines</h3>
        <div className="grid grid-cols-2 gap-4">
          {/* Employee Onboarding State Machine */}
          <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
            <h4 className="text-[10px] font-bold text-[#100841] mb-3">Employee Onboarding</h4>
            <div className="space-y-2">
              {[
                { state: "Draft", next: "Pending Validation", trigger: "Submit" },
                { state: "Pending Validation", next: "Approved / Rejected", trigger: "Validation Pass / Fail" },
                { state: "Approved", next: "Active", trigger: "Activate" },
                { state: "Active", next: "Inactive", trigger: "Deactivate" },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-[8px]">
                  <span className="bg-[#efefff] text-[#100841] px-2 py-0.5 rounded-[2px] font-mono">{item.state}</span>
                  <ChevronRight className="w-3 h-3 text-[#31d891]" />
                  <span className="text-[#4f525d]">{item.next}</span>
                </div>
              ))}
            </div>
          </div>

{/* Budget Overflow State Machine */}
          <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
            <h4 className="text-[10px] font-bold text-[#100841] mb-3">Budget Overflow Approval</h4>
            <div className="space-y-2">
              {[
                { state: "Draft", next: "Submitted", trigger: "Submit Request" },
                { state: "Submitted", next: "HR Review", trigger: "HR Accept" },
                { state: "HR Review", next: "Risk Review", trigger: "Risk Accept" },
                { state: "Risk Review", next: "Finance Review", trigger: "Finance Accept" },
                { state: "Finance Review", next: "Approved / Rejected", trigger: "Approve / Reject" },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-[8px]">
                  <span className="bg-[#fef3c7] text-[#92400e] px-2 py-0.5 rounded-[2px] font-mono">{item.state}</span>
                  <ChevronRight className="w-3 h-3 text-[#31d891]" />
                  <span className="text-[#4f525d]">{item.next}</span>
                </div>
              ))}
            </div>
          </div>

{/* Settlement State Machine */}
          <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
            <h4 className="text-[10px] font-bold text-[#100841] mb-3">Settlement Verification</h4>
            <div className="space-y-2">
              {[
                { state: "Submitted", next: "Maker Verified", trigger: "Ops Verify" },
                { state: "Maker Verified", next: "Checker Approved", trigger: "Finance Approve" },
                { state: "Checker Approved", next: "Posted", trigger: "GL Posted" },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-[8px]">
                  <span className="bg-[#dcfce7] text-[#166534] px-2 py-0.5 rounded-[2px] font-mono">{item.state}</span>
                  <ChevronRight className="w-3 h-3 text-[#31d891]" />
                  <span className="text-[#4f525d]">{item.next}</span>
                </div>
              ))}
            </div>
          </div>

{/* Disbursement State Machine */}
          <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
            <h4 className="text-[10px] font-bold text-[#100841] mb-3">Disbursement Engine</h4>
            <div className="space-y-2">
              {[
                { state: "Requested", next: "Validating", trigger: "7-Point Check" },
                { state: "Validating", next: "Disbursing", trigger: "All Checks Pass" },
                { state: "Disbursing", next: "Completed", trigger: "Channel Success" },
                { state: "Disbursing", next: "Failed", trigger: "Channel Failure" },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-[8px]">
                  <span className="bg-[#f0fdf4] text-[#166534] px-2 py-0.5 rounded-[2px] font-mono">{item.state}</span>
                  <ChevronRight className="w-3 h-3 text-[#31d891]" />
                  <span className="text-[#4f525d]">{item.next}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Roles & Permissions Content ─── */
function RolesContent() {
  const roles = [
    { role: "HR", icon: <Users className="w-4 h-4" />, color: "bg-[#31d891]", desc: "Employee onboarding, roster management, verification, payroll, budget requests", modules: "Onboarding, Employees, Groups, Budget, Reports, Payroll" },
    { role: "Sales", icon: <Users className="w-4 h-4" />, color: "bg-[#10b981]", desc: "Customer engagement metrics, employee adoption tracking, reports", modules: "Dashboard, Reports" },
    { role: "Operations", icon: <Zap className="w-4 h-4" />, color: "bg-[#f59e0b]", desc: "Transaction monitoring, settlement verification, disbursement control, QR processing", modules: "Transactions, Repayment, Settlement, Risk, Disbursement, Workflow" },
    { role: "Back Office", icon: <FileText className="w-4 h-4" />, color: "bg-[#100841]", desc: "Payroll reconciliation, employee data management, reports", modules: "Employees, Payroll, Reports, Transactions" },
    { role: "Finance", icon: <Wallet className="w-4 h-4" />, color: "bg-[#8b5cf6]", desc: "Settlement approval, GL reconciliation, budget approval, financial reports", modules: "Circle Ledger, Budget, Settlement, Payroll, Reports, Disbursement" },
    { role: "Risk", icon: <ShieldAlert className="w-4 h-4" />, color: "bg-[#ef4444]", desc: "Company risk scoring, budget management, overdue monitoring, ghost detection", modules: "Risk, Budget, Employees, Reports, Write-Off, Workflow" },
    { role: "Platform Admin", icon: <Settings className="w-4 h-4" />, color: "bg-[#100841]", desc: "Full platform control: module config, GoRule, integrations, Form Creator, audit", modules: "All 24 modules" },
  ];

return (
    <div className="space-y-8">
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Portal Roles & Scope</h3>
        <div className="space-y-3">
          {roles.map((role, i) => (
            <div key={i} className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
              <div className="flex items-start gap-3">
                <div className={`w-8 h-8 rounded-[3px] ${role.color} flex items-center justify-center shrink-0 text-white`}>
                  {role.icon}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h4 className="text-[10px] font-bold text-[#100841]">{role.role}</h4>
                    <span className="text-[8px] text-[#4f525d]">Portal</span>
                  </div>
                  <p className="text-[9px] text-[#4f525d] mb-2">{role.desc}</p>
                  <p className="text-[8px] text-[#31d891] font-mono">{role.modules}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

<div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Role-Based View Switching</h3>
        <div className="bg-[#efefff] rounded-[3px] border border-[#31d891]/20 p-4">
          <p className="text-[9px] text-[#100841] leading-relaxed">
            The platform includes a <strong>View As</strong> dropdown in the top-right header that allows instant switching
            between all 7 roles. Each role sees a different set of modules in the sidebar navigation. This enables
            comprehensive testing and demonstration of the platform from any role's perspective without needing separate accounts.
          </p>
        </div>
      </div>
    </div>
  );
}

/* ─── API Reference Content ─── */
function APIContent() {
  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Partner API Endpoints</h3>
        <div className="bg-white rounded-[3px] border border-[#dfdfdf]">
          <table className="w-full text-[9px]">
            <thead>
              <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Endpoint</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Method</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Description</th>
                <th className="text-left px-4 py-2 font-semibold text-[#100841]">Auth</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["/api/v1/employees/{id}/balance", "GET", "Real-time employee balance inquiry", "OAuth 2.0"],
                ["/api/v1/employees/{id}/eligibility", "GET", "Employee EWA eligibility check", "OAuth 2.0"],
                ["/api/v1/advances", "POST", "Create wage advance request", "OAuth 2.0 + HMAC"],
                ["/api/v1/advances/{txId}/status", "GET", "Track advance disbursement status", "OAuth 2.0"],
                ["/api/v1/employees/{id}/transactions", "GET", "Paginated transaction history", "OAuth 2.0"],
                ["/api/v1/fee-schedule", "GET", "Current fee structure and rates", "OAuth 2.0"],
                ["/api/v1/disbursement/destinations", "GET", "Supported payout channels", "OAuth 2.0"],
                ["/webhooks/{partnerId}", "POST", "Real-time event notifications", "HMAC-SHA256"],
              ].map(([ep, method, desc, auth], i) => (
                <tr key={i} className="border-b border-[#efefff] hover:bg-[#ffffff]">
                  <td className="px-4 py-2 font-mono text-[#31d891]">{ep}</td>
                  <td className="px-4 py-2">
                    <span className={`text-[8px] font-bold px-1.5 py-0.5 rounded-[2px] ${
                      method === "GET" ? "bg-[#efefff] text-[#31d891]" : "bg-[#dcfce7] text-[#166534]"
                    }`}>{method}</span>
                  </td>
                  <td className="px-4 py-2 text-[#4f525d]">{desc}</td>
                  <td className="px-4 py-2 text-[#4f525d]">{auth}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

<div>
        <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Integration Architecture</h3>
        <div className="space-y-3">
          {[
            { name: "KBZ Pay", type: "Real-Time Payment", protocol: "N8N Connector", status: "Active" },
            { name: "Wave Money", type: "Real-Time Payment", protocol: "N8N Connector", status: "Active" },
            { name: "CB Pay", type: "Real-Time Payment", protocol: "N8N Connector", status: "Active" },
            { name: "MoPayment", type: "Payment Gateway", protocol: "REST API", status: "Active" },
            { name: "SMS Gateway", type: "Notification", protocol: "REST API", status: "Active" },
            { name: "Email Gateway", type: "Notification", protocol: "SMTP / REST", status: "Active" },
            { name: "DICA Registry", type: "Company Verification", protocol: "External API", status: "Planned" },
          ].map((item, i) => (
            <div key={i} className="bg-white rounded-[3px] border border-[#dfdfdf] px-4 py-2 flex items-center gap-3">
              <div className="w-3 h-3 rounded-full bg-[#10b981] shrink-0" />
              <span className="text-[9px] font-bold text-[#100841] w-28">{item.name}</span>
              <span className="text-[9px] text-[#4f525d] w-32">{item.type}</span>
              <span className="text-[8px] font-mono text-[#31d891] bg-[#efefff] px-1.5 py-0.5 rounded-[2px]">{item.protocol}</span>
              <span className="text-[8px] text-[#166534] bg-[#dcfce7] px-1.5 py-0.5 rounded-[2px] ml-auto">{item.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Module Guide Component ─── */
function ModuleGuideDetail({ guide }: { guide: ModuleGuide }) {
  const [showSteps, setShowSteps] = useState(false);
  const [showFeatures, setShowFeatures] = useState(false);

return (
    <div className="space-y-6">
      {/* Module Header */}
      <div className="bg-[#100841] rounded-[3px] p-6 text-white">
        <div className="flex items-start gap-4">
          <div className="w-10 h-10 rounded-[3px] bg-[#31d891]/20 flex items-center justify-center shrink-0">
            <FileText className="w-5 h-5 text-[#31d891]" />
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <h2 className="text-lg font-bold">{guide.title}</h2>
              <span className="text-[9px] bg-[#31d891]/30 text-[#67e8f9] px-2 py-0.5 rounded-[2px] font-mono">
                {guide.category}
              </span>
            </div>
            <p className="text-[10px] text-[#868c95]">{guide.portal}</p>
            <p className="text-[10px] text-[#868c95] mt-1">Actors: {guide.actors.join(", ")}</p>
          </div>
        </div>
      </div>

{/* Description */}
      <div className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
        <p className="text-[10px] text-[#4f525d] leading-relaxed">{guide.description}</p>
      </div>

{/* Features */}
      <div>
        <button
          onClick={() => setShowFeatures(!showFeatures)}
          className="flex items-center gap-2 text-[10px] font-bold text-[#100841] uppercase tracking-widest mb-3 hover:text-[#31d891] transition-colors"
        >
          <ChevronRight className={`w-3 h-3 transition-transform ${showFeatures ? "rotate-90" : ""}`} />
          Features ({guide.features.length})
        </button>
        {showFeatures && (
          <div className="bg-white rounded-[3px] border border-[#dfdfdf]">
            <table className="w-full text-[9px]">
              <thead>
                <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                  <th className="text-left px-4 py-2 font-semibold text-[#100841]">Feature</th>
                  <th className="text-left px-4 py-2 font-semibold text-[#100841]">Actor</th>
                  <th className="text-left px-4 py-2 font-semibold text-[#100841]">Outcome</th>
                </tr>
              </thead>
              <tbody>
                {guide.features.map((f, i) => (
                  <tr key={i} className="border-b border-[#efefff] hover:bg-[#ffffff]">
                    <td className="px-4 py-2 font-semibold text-[#100841]">{f.feature}</td>
                    <td className="px-4 py-2 text-[#4f525d]">{f.actor}</td>
                    <td className="px-4 py-2 text-[#4f525d]">{f.outcome}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

{/* Step-by-Step Guide */}
      <div>
        <button
          onClick={() => setShowSteps(!showSteps)}
          className="flex items-center gap-2 text-[10px] font-bold text-[#100841] uppercase tracking-widest mb-3 hover:text-[#31d891] transition-colors"
        >
          <ChevronRight className={`w-3 h-3 transition-transform ${showSteps ? "rotate-90" : ""}`} />
          Step-by-Step Guide ({guide.steps.length} steps)
        </button>
        {showSteps && (
          <div className="space-y-3">
            {guide.steps.map((step) => (
              <div key={step.step} className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
                <div className="flex items-start gap-3">
                  <div className="w-7 h-7 rounded-[3px] bg-[#100841] flex items-center justify-center shrink-0">
                    <span className="text-[10px] font-bold text-white">{step.step}</span>
                  </div>
                  <div className="flex-1">
                    <h4 className="text-[10px] font-bold text-[#100841] mb-1">{step.title}</h4>
                    <p className="text-[9px] text-[#4f525d] leading-relaxed">{step.description}</p>
                    {step.tip && (
                      <div className="mt-2 flex items-start gap-1.5">
                        <Info className="w-3 h-3 text-[#31d891] shrink-0 mt-0.5" />
                        <p className="text-[8px] text-[#31d891] bg-[#efefff] px-2 py-1 rounded-[2px]">{step.tip}</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

{/* Workflows */}
      {guide.workflows && guide.workflows.length > 0 && (
        <div>
          <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-widest mb-3">State Machines</h4>
          <div className="space-y-3">
            {guide.workflows.map((wf, i) => (
              <div key={i} className="bg-white rounded-[3px] border border-[#dfdfdf] p-4">
                <h5 className="text-[9px] font-bold text-[#100841] mb-2">{wf.name}</h5>
                <div className="flex items-center gap-1 flex-wrap">
                  {wf.states.map((state, j) => (
                    <div key={j} className="flex items-center gap-1">
                      <span className="text-[8px] font-mono bg-[#efefff] text-[#100841] px-2 py-0.5 rounded-[2px] border border-[#31d891]/20">
                        {state}
                      </span>
                      {j < wf.states.length - 1 && <ChevronRight className="w-2.5 h-2.5 text-[#31d891]" />}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Integrations */}
      {guide.integrations && guide.integrations.length > 0 && (
        <div>
          <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-widest mb-3">Integrations</h4>
          <div className="flex flex-wrap gap-2">
            {guide.integrations.map((int, i) => (
              <span key={i} className="text-[8px] bg-[#efefff] text-[#4f525d] px-2 py-1 rounded-[2px] border border-[#dfdfdf] font-mono">
                {int}
              </span>
            ))}
          </div>
        </div>
      )}
      {/* Integrations */}
      {guide.integrations && guide.integrations.length > 0 && (
        <div>
          <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-widest mb-3">Integrations</h4>
          <div className="flex flex-wrap gap-2">
            {guide.integrations.map((int, i) => (
              <span key={i} className="text-[8px] bg-[#efefff] text-[#4f525d] px-2 py-1 rounded-[2px] border border-[#dfdfdf] font-mono">
                {int}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── Design System Interactive Showcase ─── */
function DesignSystemContent() {
  const [btnClicks, setBtnClicks] = useState(0);

return (
    <div className="space-y-6">
      {/* Intro */}
      <div className="bg-[#100841] text-white p-5 rounded-[3px] border border-[#31d891]/20 relative overflow-hidden">
        <div className="relative z-10">
          <h2 className="text-base font-bold uppercase tracking-wider mb-1">EWA 3.0 Enterprise Design System</h2>
          <p className="text-xs text-slate-300 max-w-2xl leading-relaxed">
            The visual language of EWA 3.0 is a SAP Fiori-inspired neobrutalist fintech console.
            It utilizes sharp corners, monospace number treatments, authoritative typography, and a single source of truth structure for code maintainability.
          </p>
        </div>
        <div className="absolute right-0 bottom-0 top-0 w-1/3 bg-gradient-to-l from-[#31d891]/10 to-transparent pointer-events-none" />
      </div>

{/* Grid of Design Tokens */}
      <div className="grid grid-cols-2 gap-4">
        {/* Colors */}
        <EnterpriseCard className="p-4">
          <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">1. Visual Theme Swatches</h3>
          <div className="grid grid-cols-2 gap-2">
            <div className="p-2 border border-slate-100 rounded-[2px] flex items-center gap-2 bg-white">
              <span className="w-4 h-4 bg-[#100841] border border-slate-200 shrink-0 block" />
              <div>
                <p className="text-[9px] font-bold text-[#100841] leading-none">EWA NAVY</p>
                <p className="text-[8px] text-slate-400 font-mono">#100841</p>
              </div>
            </div>
            <div className="p-2 border border-slate-100 rounded-[2px] flex items-center gap-2 bg-white">
              <span className="w-4 h-4 bg-[#31d891] border border-slate-200 shrink-0 block" />
              <div>
                <p className="text-[9px] font-bold text-[#100841] leading-none">EWA TEAL</p>
                <p className="text-[8px] text-slate-400 font-mono">#31d891</p>
              </div>
            </div>
            <div className="p-2 border border-slate-100 rounded-[2px] flex items-center gap-2 bg-white">
              <span className="w-4 h-4 bg-[#2e7d32] border border-slate-200 shrink-0 block" />
              <div>
                <p className="text-[9px] font-bold text-[#100841] leading-none">SUCCESS</p>
                <p className="text-[8px] text-slate-400 font-mono">#2e7d32</p>
              </div>
            </div>
            <div className="p-2 border border-slate-100 rounded-[2px] flex items-center gap-2 bg-white">
              <span className="w-4 h-4 bg-[#e65100] border border-slate-200 shrink-0 block" />
              <div>
                <p className="text-[9px] font-bold text-[#100841] leading-none">PENDING</p>
                <p className="text-[8px] text-slate-400 font-mono">#e65100</p>
              </div>
            </div>
          </div>
        </EnterpriseCard>

{/* Typography */}
        <EnterpriseCard className="p-4">
          <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">2. Typography Pairings</h3>
          <div className="space-y-3">
            <div>
              <p className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mb-1">Display Headings</p>
              <p className="text-sm font-bold text-[#100841] font-sans tracking-tight">Inter Sans-Serif (Bold & Tight)</p>
            </div>
            <div>
              <p className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mb-1">Quantitative Ledger</p>
              <p className="text-sm font-mono font-bold text-slate-700 tracking-tight">JetBrains Mono 1,500,200.00 MMK</p>
            </div>
          </div>
        </EnterpriseCard>
      </div>

{/* KPI Cards Showcase */}
      <div className="space-y-2">
        <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider">3. Enterprise KPI Cards</h3>
        <div className="grid grid-cols-5 gap-2">
          <EnterpriseKpiCard label="Platform Total" value="84,102" accentColor="navy" />
          <EnterpriseKpiCard label="Active Caps" value="1.25%" accentColor="teal" />
          <EnterpriseKpiCard label="Disbursed" value="12,450,000 MMK" accentColor="emerald" />
          <EnterpriseKpiCard label="Pending Checker" value="4 Batches" accentColor="amber" />
          <EnterpriseKpiCard label="System Overdue" value="142,000 MMK" accentColor="red" />
        </div>
      </div>

{/* Badges and Buttons Showcase */}
      <div className="grid grid-cols-2 gap-4">
        {/* Badges */}
        <EnterpriseCard className="p-4">
          <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">4. SAP Fiori Status Badges</h3>
          <div className="flex flex-wrap gap-2">
            <EnterpriseBadge variant="success">Completed</EnterpriseBadge>
            <EnterpriseBadge variant="warning">Pending Approval</EnterpriseBadge>
            <EnterpriseBadge variant="error">Settlement Overdue</EnterpriseBadge>
            <EnterpriseBadge variant="info">Active EWA Cap</EnterpriseBadge>
            <EnterpriseBadge variant="neutral">Draft Group</EnterpriseBadge>
          </div>
        </EnterpriseCard>

{/* Buttons */}
        <EnterpriseCard className="p-4">
          <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">5. Console Action Buttons</h3>
          <div className="flex flex-wrap gap-2 items-center">
            <EnterpriseButton variant="primary" onClick={() => setBtnClicks(c => c + 1)}>
              Primary Action ({btnClicks})
            </EnterpriseButton>
            <EnterpriseButton variant="secondary">
              Secondary Button
            </EnterpriseButton>
            <EnterpriseButton variant="danger">
              Destructive Action
            </EnterpriseButton>
          </div>
        </EnterpriseCard>
      </div>

{/* Alerts and Dividers */}
      <div className="space-y-3">
        <h3 className="text-xs font-bold text-[#100841] uppercase tracking-wider">6. Interactive Message Strips & Signature Motif</h3>
        <div className="space-y-2">
          <EnterpriseMessageStrip variant="info" message="Information Strip: System configuration rules are active and binding." />
          <EnterpriseMessageStrip variant="warning" message="Warning Strip: Maker batch has pending checker review (exceeds standard risk tolerance)." />
          <EnterpriseMessageStrip variant="error" message="Error Strip: Failed connection on Myanmar Payment Network integration. Retrying in 12s." />
          <EnterpriseMessageStrip variant="success" message="Success Strip: Payroll reconciliation matching is 100% complete." />
        </div>

<div className="pt-2">
          <p className="text-[8px] text-slate-400 uppercase tracking-widest mb-1">Signature Ledger Flow Divider Motif</p>
          <LedgerDivider />
        </div>
      </div>
    </div>
  );
}

/* ─── Main Page Component ─── */
export function DocumentationPage() {
  const [activeSection, setActiveSection] = useState<DocCategory>("overview");
  const [selectedModule, setSelectedModule] = useState<ModuleGuideId | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [showModuleList, setShowModuleList] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(true);

const filteredModules = useMemo(() => {
    if (!searchQuery) return MODULE_GUIDES;
    const q = searchQuery.toLowerCase();
    return MODULE_GUIDES.filter(m =>
      m.title.toLowerCase().includes(q) ||
      m.description.toLowerCase().includes(q) ||
      m.category.toLowerCase().includes(q) ||
      m.features.some(f => f.feature.toLowerCase().includes(q))
    );
  }, [searchQuery]);

const selectedGuide = useMemo(() =>
    selectedModule ? MODULE_GUIDES.find(m => m.id === selectedModule) : null,
    [selectedModule]
  );

const selectedSectionContent = () => {
    switch (activeSection) {
      case "overview": return <PlatformOverview />;
      case "architecture": return <ArchitectureContent />;
      case "workflows": return <WorkflowsContent />;
      case "roles": return <RolesContent />;
      case "api": return <APIContent />;
      case "design": return <DesignSystemContent />;
      default: return <PlatformOverview />;
    }
  };

return (
    <div className="flex h-full gap-0">
      {/* Left Sidebar — Documentation Navigation */}
      <div className={`w-64 shrink-0 bg-white border-r border-[#dfdfdf] flex flex-col ${sidebarOpen ? "block" : "hidden"} transition-all`}>
        {/* Search */}
        <div className="p-3 border-b border-[#dfdfdf]">
          <div className="relative">
            <Search className="w-3 h-3 text-[#868c95] absolute left-2 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              placeholder="Search modules..."
              value={searchQuery}
              onChange={(e) => { setSearchQuery(e.target.value); setActiveSection("modules"); }}
              className="w-full pl-7 pr-2 py-1.5 text-[9px] bg-[#efefff] border border-[#dfdfdf] rounded-[3px] text-[#100841] placeholder:text-[#868c95] focus:outline-none focus:border-[#31d891]"
            />
          </div>
        </div>

{/* Section List */}
        <div className="flex-1 overflow-auto py-2">
          {DOC_SECTIONS.map((section) => (
            <div key={section.id}>
              <button
                onClick={() => { setActiveSection(section.id); setSelectedModule(null); }}
                className={`w-full flex items-center gap-2 px-3 py-2 text-[9px] transition-colors ${
                  activeSection === section.id && !selectedModule
                    ? "bg-[#100841]/5 text-[#100841] font-semibold border-r-2 border-[#31d891]"
                    : "text-[#4f525d] hover:bg-[#efefff]"
                }`}
              >
                <span className={activeSection === section.id ? "text-[#31d891]" : "text-[#868c95]"}>{section.icon}</span>
                <span>{section.title}</span>
              </button>
            </div>
          ))}

{/* Module Guides Sub-Navigation */}
          {(activeSection === "modules" || searchQuery) && (
            <div className="mt-2 pt-2 border-t border-[#efefff]">
              <p className="px-3 py-1 text-[8px] font-bold text-[#868c95] uppercase tracking-widest">
                Module Guides ({filteredModules.length})
              </p>
              {filteredModules.map((guide) => (
                <button
                  key={guide.id}
                  onClick={() => { setSelectedModule(guide.id); }}
                  className={`w-full flex items-center gap-2 px-3 py-1.5 text-[9px] transition-colors ${
                    selectedModule === guide.id
                      ? "bg-[#efefff] text-[#31d891] font-semibold"
                      : "text-[#4f525d] hover:bg-[#efefff]"
                  }`}
                >
                  <FileText className="w-3 h-3 shrink-0" />
                  <span className="truncate">{guide.title}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

{/* Toggle Sidebar */}
      <button
        onClick={() => setSidebarOpen(!sidebarOpen)}
        className="absolute left-0 top-[22px] z-10 w-4 h-4 bg-white border border-[#dfdfdf] rounded-r-[2px] flex items-center justify-center text-[#868c95] hover:text-[#100841]"
      >
        {sidebarOpen ? <ChevronLeft className="w-2.5 h-2.5" /> : <ChevronRight className="w-2.5 h-2.5" />}
      </button>

{/* Main Content Area */}
      <div className="flex-1 overflow-auto bg-[#ffffff] p-6">
        {/* Breadcrumb / Header */}
        <div className="mb-6">
          <div className="flex items-center gap-2 text-[9px] text-[#868c95] mb-2">
            <BookOpen className="w-3 h-3" />
            <span>Documentation</span>
            <ChevronRight className="w-2.5 h-2.5" />
            {selectedModule ? (
              <>
                <span className="text-[#31d891]">{selectedGuide?.title}</span>
              </>
            ) : (
              <span className="text-[#100841] font-semibold">
                {DOC_SECTIONS.find(s => s.id === activeSection)?.title}
              </span>
            )}
          </div>
          {selectedModule && selectedGuide && (
            <div className="flex items-center gap-2">
              <h1 className="text-lg font-bold text-[#100841]">{selectedGuide.title}</h1>
              <span className="text-[9px] bg-[#efefff] text-[#31d891] px-2 py-0.5 rounded-[2px] font-mono">
                {selectedGuide.category}
              </span>
              <span className="text-[9px] text-[#4f525d]">{selectedGuide.portal}</span>
            </div>
          )}
          {!selectedModule && (
            <h1 className="text-lg font-bold text-[#100841]">
              {DOC_SECTIONS.find(s => s.id === activeSection)?.title}
            </h1>
          )}
        </div>

{/* Content */}
        {selectedModule && selectedGuide ? (
          <ModuleGuideDetail guide={selectedGuide} />
        ) : (
          selectedSectionContent()
        )}
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/employee-groups/EmployeeGroupsPage.tsx"
/**
 * EmployeeGroupsPage — Employee Group & Category Management
 * Group-level policies, category-based fee rules, budget allocation by group
 * Design: Enterprise Fintech — Deep Navy (#100841) + Teal (#31d891)
 */
import { useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Users, Plus, Eye, Settings, Tag } from "lucide-react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  FilterDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { formatMMK } from "@/data/mockData";

interface EmployeeGroup {
  id: string;
  code: string;
  name: string;
  description: string;
  companyId: string;
  companyName: string;
  category: string;
  employeeCount: number;
  ewaPercentage: number;
  budgetAllocation: number;
  budgetUtilized: number;
  feeTierOverride: string | null;
  status: "ACTIVE" | "INACTIVE" | "DRAFT";
}

const employeeGroups: EmployeeGroup[] = [
  { id: "EG-001", code: "MGMT", name: "Management Tier", description: "Senior management and directors", companyId: "CMP-001", companyName: "Tech Solutions Ltd", category: "Senior Management", employeeCount: 12, ewaPercentage: 50, budgetAllocation: 5000000, budgetUtilized: 2100000, feeTierOverride: "FT-002", status: "ACTIVE" },
  { id: "EG-002", code: "ENG", name: "Engineering Staff", description: "Software engineers and technical staff", companyId: "CMP-001", companyName: "Tech Solutions Ltd", category: "Engineering", employeeCount: 45, ewaPercentage: 40, budgetAllocation: 12000000, budgetUtilized: 5800000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-003", code: "OPS", name: "Operations Staff", description: "Daily operations and support personnel", companyId: "CMP-001", companyName: "Tech Solutions Ltd", category: "Operations", employeeCount: 30, ewaPercentage: 35, budgetAllocation: 6000000, budgetUtilized: 2400000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-004", code: "MFG-SR", name: "Manufacturing Senior", description: "Production supervisors and line leads", companyId: "CMP-002", companyName: "Manufacturing Co", category: "Manufacturing", employeeCount: 20, ewaPercentage: 35, budgetAllocation: 4000000, budgetUtilized: 1800000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-005", code: "MFG-OP", name: "Manufacturing Operators", description: "Production line operators and workers", companyId: "CMP-002", companyName: "Manufacturing Co", category: "Manufacturing", employeeCount: 85, ewaPercentage: 30, budgetAllocation: 10000000, budgetUtilized: 4200000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-006", code: "LOG-DRV", name: "Logistics Drivers", description: "Fleet drivers and delivery personnel", companyId: "CMP-003", companyName: "Logistics Myanmar", category: "Logistics", employeeCount: 50, ewaPercentage: 30, budgetAllocation: 7500000, budgetUtilized: 3100000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-007", code: "RTL-STAFF", name: "Retail Staff", description: "Store employees and cashiers", companyId: "CMP-004", companyName: "Retail Chain", category: "Retail", employeeCount: 120, ewaPercentage: 25, budgetAllocation: 15000000, budgetUtilized: 6200000, feeTierOverride: "FT-001", status: "ACTIVE" },
  { id: "EG-008", code: "TRY", name: "Trial Group", description: "New company trial period group", companyId: "CMP-005", companyName: "Startup Inc", category: "Trial", employeeCount: 5, ewaPercentage: 20, budgetAllocation: 500000, budgetUtilized: 0,     feeTierOverride: "NONE", status: "DRAFT" },
];

interface CategorySummary {
  category: string;
  groups: number;
  totalEmployees: number;
  totalBudget: number;
  totalUtilized: number;
  avgEwa: number;
}

export function EmployeeGroupsPage() {
  const [selectedGroup, setSelectedGroup] = useState<EmployeeGroup | null>(null);

const groupColumns: ColumnDef<EmployeeGroup>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (g) => <span className="text-[10px] font-mono font-bold text-[#100841]">{g.id}</span>,
      searchString: (g) => g.id
    },
    {
      id: "code",
      header: "Code",
      accessor: (g) => <span className="text-[11px] font-mono font-bold text-[#4f525d]">{g.code}</span>,
      searchString: (g) => g.code
    },
    {
      id: "name",
      header: "Group Name",
      accessor: (g) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{g.name}</p>
          <p className="text-[9px] text-[#4f525d]">{g.description}</p>
        </div>
      ),
      searchString: (g) => `${g.name} ${g.description}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (g) => <span className="text-[11px] text-[#4f525d] font-medium">{g.companyName}</span>
    },
    {
      id: "employees",
      header: "Emps",
      isNumeric: true,
      align: "center",
      accessor: (g) => g.employeeCount
    },
    {
      id: "category",
      header: "Category",
      accessor: (g) => <EnterpriseBadge variant="neutral">{g.category}</EnterpriseBadge>
    },
    {
      id: "ewa",
      header: "EWA %",
      isNumeric: true,
      align: "right",
      accessor: (g) => g.ewaPercentage,
      cellClassName: () => "text-blue-600 font-bold"
    },
    {
      id: "budgetAllocation",
      header: "Budget",
      isNumeric: true,
      align: "right",
      accessor: (g) => g.budgetAllocation
    },
    {
      id: "feeTierOverride",
      header: "Fee Override",
      accessor: (g) => <span className="text-[10px] font-mono text-[#4f525d]">{g.feeTierOverride || "—"}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (g) => <EnterpriseBadge variant={g.status === "ACTIVE" ? "success" : "neutral"}>{g.status}</EnterpriseBadge>
    }
  ];

const categoryColumns: ColumnDef<CategorySummary>[] = [
    {
      id: "category",
      header: "Category",
      accessor: (cat) => <span className="text-[12px] font-bold text-[#100841]">{cat.category}</span>,
      searchString: (cat) => cat.category
    },
    {
      id: "groups",
      header: "Groups",
      isNumeric: true,
      align: "center",
      accessor: (cat) => cat.groups
    },
    {
      id: "totalEmployees",
      header: "Total Emps",
      isNumeric: true,
      align: "center",
      accessor: (cat) => cat.totalEmployees
    },
    {
      id: "totalBudget",
      header: "Total Budget",
      isNumeric: true,
      align: "right",
      accessor: (cat) => cat.totalBudget
    },
    {
      id: "totalUtilized",
      header: "Utilized",
      isNumeric: true,
      align: "right",
      accessor: (cat) => cat.totalUtilized
    },
    {
      id: "avgEwa",
      header: "Avg EWA %",
      isNumeric: true,
      align: "right",
      accessor: (cat) => cat.avgEwa,
      cellClassName: () => "text-blue-600 font-bold"
    }
  ];

const categories = ["Senior Management", "Engineering", "Operations", "Manufacturing", "Logistics", "Retail", "Trial"];
  const categoryData: CategorySummary[] = categories.map(cat => {
    const groups = employeeGroups.filter(g => g.category === cat);
    return {
      category: cat,
      groups: groups.length,
      totalEmployees: groups.reduce((s, g) => s + g.employeeCount, 0),
      totalBudget: groups.reduce((s, g) => s + g.budgetAllocation, 0),
      totalUtilized: groups.reduce((s, g) => s + g.budgetUtilized, 0),
      avgEwa: Math.round(groups.reduce((s, g) => s + g.ewaPercentage, 0) / (groups.length || 1))
    };
  });

const groupActions: TableAction<EmployeeGroup>[] = [
    {
      label: "View Detail",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (g) => setSelectedGroup(g)
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Users className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Employee Groups & Categories</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Policy management by employee cohort</p>
          </div>
        </div>
        <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
          <Plus className="w-3.5 h-3.5" /> Add Group
        </EnterpriseButton>
      </div>

<Tabs defaultValue="groups" className="w-full">
        <TabsList>
          <TabsTrigger value="groups">Group Registry</TabsTrigger>
          <TabsTrigger value="detail">Group Detail</TabsTrigger>
          <TabsTrigger value="categories">Categories</TabsTrigger>
        </TabsList>

<TabsContent value="groups" className="outline-none">
          <EnterpriseTable
            data={employeeGroups}
            columns={groupColumns}
            rowKey={(g) => g.id}
            actions={groupActions}
            searchPlaceholder="Search groups..."
          />
        </TabsContent>

<TabsContent value="detail" className="outline-none space-y-4">
          {selectedGroup ? (
            <div className="space-y-4">
              <EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-[13px] font-bold text-[#100841] flex items-center gap-2 uppercase tracking-wide">
                    <Users className="w-4 h-4 text-[#31d891]" />
                    {selectedGroup.code} — {selectedGroup.name}
                  </h3>
                  <div className="flex items-center gap-2">
                    <EnterpriseBadge variant="neutral">{selectedGroup.category}</EnterpriseBadge>
                    <EnterpriseBadge variant={selectedGroup.status === "ACTIVE" ? "success" : "neutral"}>{selectedGroup.status}</EnterpriseBadge>
                  </div>
                </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
                  <EnterpriseKpiCard label="Employees" value={selectedGroup.employeeCount} />
                  <EnterpriseKpiCard label="EWA Cap" value={`${selectedGroup.ewaPercentage}%`} />
                  <EnterpriseKpiCard label="Budget" value={formatMMK(selectedGroup.budgetAllocation)} />
                  <EnterpriseKpiCard 
                    label="Utilized" 
                    value={formatMMK(selectedGroup.budgetUtilized)} 
                    change={selectedGroup.budgetUtilized > selectedGroup.budgetAllocation * 0.8 ? "High" : "Optimal"}
                    changeDir={selectedGroup.budgetUtilized > selectedGroup.budgetAllocation * 0.8 ? "down" : "up"}
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <h4 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">Budget Utilization</h4>
                    <div className="p-4 rounded-[3px] bg-[#efefff] border border-[#dfdfdf]">
                      <div className="flex items-center justify-between text-[11px] font-bold mb-2">
                        <span className="text-[#4f525d]">Usage Rate</span>
                        <span className="text-[#100841]">{Math.round((selectedGroup.budgetUtilized / selectedGroup.budgetAllocation) * 100)}%</span>
                      </div>
                      <div className="w-full bg-[#dfdfdf] rounded-full h-2">
                        <div 
                          className={`h-2 rounded-full transition-all duration-500 ${
                            (selectedGroup.budgetUtilized / selectedGroup.budgetAllocation) > 0.8 ? "bg-red-500" : "bg-[#31d891]"
                          }`} 
                          style={{ width: `${Math.round((selectedGroup.budgetUtilized / selectedGroup.budgetAllocation) * 100)}%` }} 
                        />
                      </div>
                      <div className="flex items-center justify-between text-[10px] mt-2">
                        <span className="text-[#868c95]">Remaining: {formatMMK(selectedGroup.budgetAllocation - selectedGroup.budgetUtilized)}</span>
                        <span className="text-[#868c95]">Limit: {formatMMK(selectedGroup.budgetAllocation)}</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <h4 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">Policy Overrides</h4>
                    <div className="p-4 rounded-[3px] bg-[#efefff] border border-[#dfdfdf] h-[92px] flex flex-col justify-center">
                      <p className="text-[12px] font-mono font-bold text-[#100841] uppercase">{selectedGroup.feeTierOverride || "System Default"}</p>
                      <p className="text-[10px] text-[#4f525d] mt-1 italic">Overrides company-level fee structures for this specific cohort.</p>
                    </div>
                  </div>
                </div>
              </EnterpriseCard>

<EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Category Policy Settings</h3>
                  <EnterpriseButton variant="secondary" className="h-7 text-[9px] px-2"><Settings className="w-3 h-3 mr-1" /> Edit Policy</EnterpriseButton>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   <div className="space-y-1">
                      <p className="text-[9px] text-[#868c95] uppercase tracking-wider">Repayment Rule</p>
                      <p className="text-[11px] font-bold text-[#100841]">Direct Deduction</p>
                   </div>
                   <div className="space-y-1">
                      <p className="text-[9px] text-[#868c95] uppercase tracking-wider">Daily Disbursement Limit</p>
                      <p className="text-[11px] font-bold text-[#100841]">{formatMMK(Math.round(selectedGroup.budgetAllocation / selectedGroup.employeeCount * 0.1))}</p>
                   </div>
                   <div className="space-y-1">
                      <p className="text-[9px] text-[#868c95] uppercase tracking-wider">Cycle Transaction Cap</p>
                      <p className="text-[11px] font-bold text-[#100841]">5 Transactions</p>
                   </div>
                   <div className="space-y-1">
                      <p className="text-[9px] text-[#868c95] uppercase tracking-wider">Cool-off Period</p>
                      <p className="text-[11px] font-bold text-[#100841]">24 Hours</p>
                   </div>
                </div>
              </EnterpriseCard>
            </div>
          ) : (
            <div className="bg-[#efefff] border border-dashed border-[#dfdfdf] rounded-[3px] py-20 flex flex-col items-center justify-center text-center">
              <Users className="w-12 h-12 text-[#dfdfdf] mb-4" />
              <h3 className="text-[14px] font-bold text-[#4f525d]">No Group Selected</h3>
              <p className="text-[11px] text-[#868c95] max-w-[250px] mt-1">Please select an employee group from the registry to view its configuration and metrics.</p>
              <EnterpriseButton variant="secondary" className="mt-6 h-8 text-[10px]" onClick={() => {
                // Focus back to groups tab logic if needed
              }}>Browse Registry</EnterpriseButton>
            </div>
          )}
        </TabsContent>

<TabsContent value="categories" className="outline-none">
          <EnterpriseTable
            data={categoryData}
            columns={categoryColumns}
            rowKey={(cat) => cat.category}
            searchPlaceholder="Search categories..."
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/employees/EmployeesPage.tsx"
/**
 * EmployeesPage — Employee Management (SAP Fiori List Report)
 * SAP Fiori Pattern: List Report with toolbar filters + data table
 * Enterprise table with structured columns, semantic status colors
 */
import { useState } from "react";
import { formatMMK, employees, type Employee } from "@/data/mockData";
import { EmployeeDetailSheet } from "@/components/EmployeeDetailSheet";
import { 
  Download, Plus, ShieldCheck, Clock, UserCheck, Users, 
  Eye, ShieldX, Lock
} from "lucide-react";
import { useView } from "@/contexts/ViewContext";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { cn } from "@/lib/utils";

/* ===== Fiori Semantic Badge ===== */
function FioriStatusBadge({ status }: { status: Employee["status"] }) {
  const variantMap: Record<Employee["status"], "success" | "warning" | "error" | "info" | "neutral"> = {
    "Active": "success",
    "Pending Verification": "warning",
    "Frozen": "error",
    "KYC Pending": "info",
    "Inactive": "neutral",
  };
  return <EnterpriseBadge variant={variantMap[status] || "neutral"}>{status}</EnterpriseBadge>;
}

function VerificationBadge({ emp }: { emp: Employee }) {
  let key: "trusted" | "verified-no-auto" | "rejected" | "pending" = "pending";
  if (emp.verification.employment === "Verified" && emp.verification.ewaAutoApproved) key = "trusted";
  else if (emp.verification.employment === "Verified" && !emp.verification.ewaAutoApproved) key = "verified-no-auto";
  else if (emp.verification.employment === "Rejected") key = "rejected";

const config = {
    "trusted": { icon: ShieldCheck, label: "Trusted", variant: "success" as const },
    "verified-no-auto": { icon: Clock, label: "Verified / No Auto", variant: "warning" as const },
    "rejected": { icon: ShieldX, label: "Rejected", variant: "error" as const },
    "pending": { icon: Clock, label: "Pending", variant: "info" as const },
  };

const cfg = config[key];
  const Icon = cfg.icon;
  return (
    <EnterpriseBadge variant={cfg.variant} className="gap-1 font-semibold">
      <Icon className="w-3 h-3" />
      {cfg.label}
    </EnterpriseBadge>
  );
}

export function EmployeesPage() {
  const { view } = useView();
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
  const [selectedKeys, setSelectedKeys] = useState<Set<string | number>>(new Set());

const uniqueCompanies = Array.from(new Set(employees.map(e => e.companyName)));

// Define table columns
  const columns: ColumnDef<Employee>[] = [
    {
      id: "employee",
      header: "Employee",
      accessor: (emp) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{emp.name}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{emp.employeeId}</p>
        </div>
      ),
      searchString: (emp) => `${emp.name} ${emp.employeeId}`
    },
    {
      id: "companyName",
      header: "Company",
      accessor: (emp) => <span className="text-[11px] text-[#4f525d] font-medium">{emp.companyName}</span>,
      searchString: (emp) => emp.companyName
    },
    {
      id: "branch",
      header: "Branch",
      accessor: (emp) => <span className="text-[11px] text-[#4f525d]">{emp.branch}</span>
    },
    {
      id: "salary",
      header: "Salary",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.salary
    },
    {
      id: "ewaCap",
      header: "EWA Cap",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.ewaCap
    },
    {
      id: "ewaAvailable",
      header: "Available",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.ewaAvailable
    },
    {
      id: "outstanding",
      header: "Outstanding",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.outstanding
    },
    {
      id: "verification",
      header: "Verification",
      accessor: (emp) => <VerificationBadge emp={emp} />
    },
    {
      id: "status",
      header: "Status",
      accessor: (emp) => <FioriStatusBadge status={emp.status} />
    },
    {
      id: "kyc",
      header: "KYC",
      accessor: (emp) => (
        <div className="flex items-center gap-1 font-mono">
          <UserCheck className={cn("w-3.5 h-3.5", emp.kycLevel === 2 ? "text-[#2e7d32]" : emp.kycLevel === 1 ? "text-[#e65100]" : "text-[#4f525d]")} />
          <span className="text-[10px] text-[#4f525d] font-bold">L{emp.kycLevel}</span>
        </div>
      )
    }
  ];

// Define table filters
  const tableFilters: FilterDef<Employee>[] = [
    {
      id: "status",
      label: "Status",
      options: [
        { label: "Active", value: "Active" },
        { label: "Pending Verification", value: "Pending Verification" },
        { label: "Frozen", value: "Frozen" },
        { label: "KYC Pending", value: "KYC Pending" },
        { label: "Inactive", value: "Inactive" }
      ],
      filterFn: (emp, val) => emp.status === val
    },
    {
      id: "company",
      label: "Company",
      options: uniqueCompanies.map(c => ({ label: c, value: c })),
      filterFn: (emp, val) => emp.companyName === val
    }
  ];

// Define table actions
  const tableActions: TableAction<Employee>[] = [
    {
      label: "View Detail",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (emp) => setSelectedEmployee(emp)
    }
  ];

return (
    <div className="space-y-4">
      {/* ===== SAP Fiori Object Page Header ===== */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Users className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Employee Management</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider">
              {employees.length} records total
            </p>
          </div>
        </div>
        <div className="flex items-center gap-1.5">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Download className="w-3.5 h-3.5" /> Export
          </EnterpriseButton>
          {(view === "HR" || view === "Operations" || view === "Platform Admin") && (
            <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
              <Plus className="w-3.5 h-3.5" /> Add
            </EnterpriseButton>
          )}
        </div>
      </div>

{/* ===== Standard Enterprise Data Table ===== */}
      <EnterpriseTable
        data={employees}
        columns={columns}
        rowKey={(emp) => emp.id}
        filters={tableFilters}
        actions={tableActions}
        selectable={true}
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        searchPlaceholder="Search by name or employee ID..."
      />

<EmployeeDetailSheet employee={selectedEmployee} onClose={() => setSelectedEmployee(null)} />

{/* ===== Workflow Legend — Fiori Message Strip style ===== */}
      <EnterpriseCard className="p-4 shadow-sm">
        <h3 className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-2">Verification Workflow</h3>
        <div className="flex items-center gap-2 text-sm flex-wrap">
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[2px] bg-[#e3f2fd] border border-[#90caf9] text-[#0d47a1] text-[10px] font-semibold">
            <Clock className="w-3 h-3" /> 1. Employment Verified
          </span>
          <span className="text-[#dfdfdf] font-bold">→</span>
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[2px] bg-[#fff8e1] border border-[#ffcc80] text-[#e65100] text-[10px] font-semibold">
            <Lock className="w-3 h-3" /> 2. EWA Auto-Approved
          </span>
          <span className="text-[#dfdfdf] font-bold">→</span>
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[2px] bg-[#e8f5e9] border border-[#a5d6a7] text-[#1b5e20] text-[10px] font-semibold">
            <ShieldCheck className="w-3 h-3" /> 3. Trusted Employee
          </span>
        </div>
        <p className="text-[10px] text-[#4f525d] mt-1.5">Both Employment Verification AND EWA Auto-Approval must pass for instant disbursement eligibility.</p>
      </EnterpriseCard>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/errors/ErrorsPage.tsx"
/**
 * ErrorsPage — Error Monitoring & Resolution
 * Design: Neobrutalist Fintech — Transaction error tracking and resolution
 */
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef
} from "@/components/EnterpriseComponents";
import { formatMMK } from "@/data/mockData";
import { XCircle, AlertTriangle, CheckCircle2, RefreshCw, Eye, RotateCcw } from "lucide-react";

const errors = [
  { id: "ERR-001", type: "Disbursement Failed", employeeName: "Aung Tun", employeeId: "EMP-0008", companyName: "TechBridge Solutions", amount: 120000, date: "2026-07-10", reason: "Insufficient funds in payout bank account", status: "Resolved", retryCount: 2 },
  { id: "ERR-002", type: "KYC Mismatch", employeeName: "Khin Sandar", employeeId: "EMP-0020", companyName: "Diamond Trading", amount: 0, date: "2026-07-08", reason: "National ID doesn't match payroll record", status: "Pending", retryCount: 0 },
  { id: "ERR-003", type: "Settlement Error", employeeName: "—", employeeId: "—", companyName: "Golden Harvest Foods", amount: 850000, date: "2026-07-05", reason: "Bank reconciliation mismatch — 5,000 MMK difference", status: "In Progress", retryCount: 1 },
  { id: "ERR-004", type: "Duplicate Request", employeeName: "Thet Mon", employeeId: "EMP-0015", companyName: "Myanmar Tech Solutions", amount: 75000, date: "2026-07-03", reason: "Duplicate EWA request detected within 24h window", status: "Resolved", retryCount: 0 },
  { id: "ERR-005", type: "Fee Calculation Error", employeeName: "Win Htut", employeeId: "EMP-0012", companyName: "Skyline Trading", amount: 95000, date: "2026-07-01", reason: "Late fee not applied after grace period expiry", status: "Resolved", retryCount: 1 },
];

export function ErrorsPage() {
  const columns: ColumnDef<any>[] = [
    {
      id: "id",
      header: "Error ID",
      accessor: (e) => <span className="font-mono font-bold text-[#100841]">{e.id}</span>,
      searchString: (e) => e.id
    },
    {
      id: "type",
      header: "Type",
      accessor: (e) => <EnterpriseBadge variant="error" className="bg-[#fce4ec] text-[#b71c1c] border-[#ef9a9a]">{e.type}</EnterpriseBadge>,
      searchString: (e) => e.type
    },
    {
      id: "employee",
      header: "Employee",
      accessor: (e) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{e.employeeName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{e.employeeId}</p>
        </div>
      ),
      searchString: (e) => `${e.employeeName} ${e.employeeId}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (e) => <span className="text-[11px] text-[#4f525d] font-medium">{e.companyName}</span>,
      searchString: (e) => e.companyName
    },
    {
      id: "amount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (e) => e.amount,
      cellClassName: (e) => e.amount > 0 ? "text-[#c62828] font-bold" : "text-slate-300"
    },
    {
      id: "reason",
      header: "Reason",
      accessor: (e) => <span className="text-[11px] text-[#4f525d] max-w-[200px] truncate block">{e.reason}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (e) => {
        const variant = e.status === "Resolved" ? "success" : e.status === "Pending" ? "warning" : "info";
        const Icon = e.status === "Resolved" ? CheckCircle2 : e.status === "Pending" ? AlertTriangle : RefreshCw;
        return (
          <EnterpriseBadge variant={variant} className="gap-1">
            <Icon className="w-3 h-3" />
            {e.status}
          </EnterpriseBadge>
        );
      }
    },
    {
      id: "retries",
      header: "Retries",
      isNumeric: true,
      align: "center",
      accessor: (e) => e.retryCount
    },
    {
      id: "date",
      header: "Date",
      accessor: (e) => <span className="text-[10px] font-mono text-[#868c95]">{e.date}</span>
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <XCircle className="w-4 h-4 text-[#c62828]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Error Monitoring & Resolution</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Transaction and compliance error tracking</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <RotateCcw className="w-3.5 h-3.5" /> Retry All Failed
          </EnterpriseButton>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Open Errors"
          value={errors.filter(e => e.status !== "Resolved").length}
          accentColor="error"
          icon={<XCircle className="w-3.5 h-3.5 text-[#c62828]" />}
        />
        <EnterpriseKpiCard
          label="Resolved"
          value={errors.filter(e => e.status === "Resolved").length}
          accentColor="success"
          icon={<CheckCircle2 className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Pending"
          value={errors.filter(e => e.status === "Pending").length}
          accentColor="amber"
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#e65100]" />}
        />
        <EnterpriseKpiCard
          label="Total Logged"
          value={errors.length}
          accentColor="info"
          icon={<RefreshCw className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
      </div>

<EnterpriseTable
        data={errors}
        columns={columns}
        rowKey={(e) => e.id}
        searchPlaceholder="Search error logs..."
      />
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/fee-builder/FeeBuilderPage.tsx"
/**
 * FeeBuilderPage — Fee Builder & Policy Engine
 * Design: Enterprise Precision — Navy (#100841) + Teal (#31d891) | Sharp corners | Structured layouts
 * Focus: Complete 4-layer hierarchical policy engine, editing, forking, interactive simulation, and audit logs.
 */
import React, { useState, useEffect, useMemo } from "react";
import {
  Settings,
  Tag,
  Receipt,
  DollarSign,
  Plus,
  Play,
  History,
  Edit2,
  Copy,
  Trash2,
  CheckCircle,
  AlertCircle,
  ArrowRight,
  Calculator,
  User,
  Shield,
  FileText,
  Landmark,
  PlusCircle,
  HelpCircle,
  Check,
  Building,
  Calendar,
  Layers,
  ChevronRight,
  Info
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseInput,
  EnterpriseSelect,
  EnterpriseKpiCard
} from "@/components/EnterpriseComponents";

// ─── TYPES ───

export interface CriteriaRule {
  attrCode: string; // e.g. "Channel", "Transaction_Type", "Days_Overdue", "Amount"
  attrLabel: string;
  operator: "Equals" | "Not_Equals" | "Greater_Than" | "Less_Than" | "Between" | "In_List";
  value: string;
}

export interface PricingTier {
  priorityOrder: number;
  startValue: number;
  endValue: number; // 999999999 for Infinity
  calcType: "Flat" | "Percent" | "Hybrid";
  flatAmount: number;
  percentRate: number;
  minCap: number;
  maxCap: number;
}

export interface DistributionSplit {
  entityType: "Agent" | "Partner" | "Internal_System" | "External_Bank";
  entityName: string;
  percentage: number; // e.g. 40 for 40%
  debitGlCode: string;
  creditGlCode: string;
  isTaxBearing: boolean;
}

export interface FeeRule {
  id: string; // e.g., FEE-001
  name: string;
  description: string;
  status: "Draft" | "Pending_Approval" | "Active" | "Inactive" | "Archived";
  chargeParty: "Sender" | "Receiver";
  chargeSubject: "Company" | "Employee";
  priority: number; // Lower priority number evaluated first
  effectiveDate: string;
  expiredDate: string;
  refundBehavior: "Auto-Reverse" | "Non-Refundable";
  taxBehavior: "Inclusive" | "Exclusive";
  taxCode: string;
  criteria: CriteriaRule[];
  tiers: PricingTier[];
  distribution: DistributionSplit[];
}

export interface AuditLog {
  timestamp: string;
  feeId: string;
  feeName: string;
  action: "Create" | "Edit" | "Approve" | "Activate" | "Deactivate" | "Fork";
  user: string;
  details: string;
}

// ─── INITIAL MOCK DATA ───

const INITIAL_FEES: FeeRule[] = [
  {
    id: "FEE-001",
    name: "Standard EWA Disbursement Fee",
    description: "Core fee structure applied to standard EWA drawdowns across all standard payment channels.",
    status: "Active",
    chargeParty: "Receiver",
    chargeSubject: "Employee",
    priority: 1,
    effectiveDate: "2026-01-01",
    expiredDate: "2026-12-31",
    refundBehavior: "Non-Refundable",
    taxBehavior: "Exclusive",
    taxCode: "TAX-VAT-5",
    criteria: [
      { attrCode: "Transaction_Type", attrLabel: "Txn Type", operator: "Equals", value: "Disbursement" },
      { attrCode: "Channel", attrLabel: "Channel", operator: "In_List", value: "KBZ Pay, Wave, CB Pay" }
    ],
    tiers: [
      { priorityOrder: 1, startValue: 0, endValue: 50000, calcType: "Percent", flatAmount: 0, percentRate: 1.5, minCap: 500, maxCap: 1500 },
      { priorityOrder: 2, startValue: 50001, endValue: 150000, calcType: "Percent", flatAmount: 0, percentRate: 1.0, minCap: 1000, maxCap: 2500 },
      { priorityOrder: 3, startValue: 150001, endValue: 999999999, calcType: "Percent", flatAmount: 0, percentRate: 0.75, minCap: 1500, maxCap: 5000 }
    ],
    distribution: [
      { entityType: "Internal_System", entityName: "EWA Platform Core Balance", percentage: 40, debitGlCode: "1100", creditGlCode: "4000", isTaxBearing: true },
      { entityType: "Partner", entityName: "Corporate Sponsoring Bank", percentage: 30, debitGlCode: "2100", creditGlCode: "2200", isTaxBearing: false },
      { entityType: "Agent", entityName: "EWA Local Disbursement Agent", percentage: 30, debitGlCode: "5200", creditGlCode: "1100", isTaxBearing: false }
    ]
  },
  {
    id: "FEE-002",
    name: "Wave Pay Premium Routing Fee",
    description: "Special channel premium surcharge for real-time disburse via Wave Money network agents.",
    status: "Active",
    chargeParty: "Sender",
    chargeSubject: "Company",
    priority: 2,
    effectiveDate: "2026-01-01",
    expiredDate: "2026-12-31",
    refundBehavior: "Auto-Reverse",
    taxBehavior: "Inclusive",
    taxCode: "TAX-VAT-5",
    criteria: [
      { attrCode: "Channel", attrLabel: "Channel", operator: "Equals", value: "Wave" },
      { attrCode: "Transaction_Type", attrLabel: "Txn Type", operator: "Equals", value: "Disbursement" }
    ],
    tiers: [
      { priorityOrder: 1, startValue: 0, endValue: 999999999, calcType: "Flat", flatAmount: 2000, percentRate: 0, minCap: 0, maxCap: 0 }
    ],
    distribution: [
      { entityType: "External_Bank", entityName: "Wave Pay Network Partner", percentage: 100, debitGlCode: "5200", creditGlCode: "1100", isTaxBearing: true }
    ]
  },
  {
    id: "FEE-003",
    name: "High-Growth Corporate Promo Rate",
    description: "Promotional discount rate for employees drawing via KBZ Pay with lower fees.",
    status: "Draft",
    chargeParty: "Receiver",
    chargeSubject: "Employee",
    priority: 5,
    effectiveDate: "2026-06-01",
    expiredDate: "2026-09-30",
    refundBehavior: "Non-Refundable",
    taxBehavior: "Exclusive",
    taxCode: "TAX-NONE",
    criteria: [
      { attrCode: "Transaction_Type", attrLabel: "Txn Type", operator: "Equals", value: "Disbursement" },
      { attrCode: "Channel", attrLabel: "Channel", operator: "Equals", value: "KBZ Pay" }
    ],
    tiers: [
      { priorityOrder: 1, startValue: 0, endValue: 999999999, calcType: "Hybrid", flatAmount: 500, percentRate: 0.5, minCap: 1000, maxCap: 3000 }
    ],
    distribution: [
      { entityType: "Internal_System", entityName: "EWA Platform Core Balance", percentage: 50, debitGlCode: "1100", creditGlCode: "4000", isTaxBearing: true },
      { entityType: "Partner", entityName: "Corporate Sponsoring Bank", percentage: 50, debitGlCode: "2100", creditGlCode: "2200", isTaxBearing: false }
    ]
  },
  {
    id: "FEE-004",
    name: "Extended Late Repayment Penalty",
    description: "Arrears collection penalty triggered when repayments exceed the established corporate cutoff date.",
    status: "Active",
    chargeParty: "Receiver",
    chargeSubject: "Employee",
    priority: 10,
    effectiveDate: "2026-01-01",
    expiredDate: "2026-12-31",
    refundBehavior: "Non-Refundable",
    taxBehavior: "Exclusive",
    taxCode: "TAX-VAT-5",
    criteria: [
      { attrCode: "Transaction_Type", attrLabel: "Txn Type", operator: "Equals", value: "Repayment" },
      { attrCode: "Days_Overdue", attrLabel: "Overdue Days", operator: "Greater_Than", value: "5" }
    ],
    tiers: [
      { priorityOrder: 1, startValue: 0, endValue: 999999999, calcType: "Percent", flatAmount: 0, percentRate: 5.0, minCap: 2000, maxCap: 20000 }
    ],
    distribution: [
      { entityType: "Internal_System", entityName: "Arrears Recovery Pool", percentage: 100, debitGlCode: "1100", creditGlCode: "4100", isTaxBearing: true }
    ]
  }
];

const INITIAL_AUDITS: AuditLog[] = [
  { timestamp: "2026-07-10 10:24", feeId: "FEE-001", feeName: "Standard EWA Disbursement Fee", action: "Activate", user: "platform_admin@ewa.com", details: "Activated EWA Core Policy for Q3 cycle" },
  { timestamp: "2026-07-11 14:15", feeId: "FEE-002", feeName: "Wave Pay Premium Routing Fee", action: "Activate", user: "platform_admin@ewa.com", details: "Activated Premium Routing Charge for Wave Money" },
  { timestamp: "2026-07-12 11:00", feeId: "FEE-003", feeName: "High-Growth Corporate Promo Rate", action: "Create", user: "finance_lead@ewa.com", details: "Created Draft policy for KBZ Pay promotional cycle" },
  { timestamp: "2026-07-13 09:30", feeId: "FEE-004", feeName: "Extended Late Repayment Penalty", action: "Edit", user: "risk_reviewer@ewa.com", details: "Modified Max Cap ceiling from 15,000 to 20,000 MMK" }
];

const METADATA_ATTRIBUTES = [
  { code: "Channel", label: "Payout Channel" },
  { code: "Transaction_Type", label: "Transaction Type" },
  { code: "Days_Overdue", label: "Late Days Count" },
  { code: "Amount", label: "Transaction Amount" },
  { code: "Employee_Tenure", label: "Employee Tenure (Months)" }
];

const GL_ACCOUNTS = [
  { code: "1100", name: "Cash & Bank" },
  { code: "1200", name: "Advance Receivable" },
  { code: "2100", name: "Suspense GL" },
  { code: "2200", name: "Settlement Payable" },
  { code: "4000", name: "Fee Revenue" },
  { code: "4100", name: "Late Fee Revenue" },
  { code: "5200", name: "Payment Gateway Fees" }
];

export function FeeBuilderPage() {
  // ─── STATE ───
  const [fees, setFees] = useState<FeeRule[]>(() => {
    const saved = localStorage.getItem("ewa_fees");
    return saved ? JSON.parse(saved) : INITIAL_FEES;
  });

const [audits, setAudits] = useState<AuditLog[]>(() => {
    const saved = localStorage.getItem("ewa_fee_audits");
    return saved ? JSON.parse(saved) : INITIAL_AUDITS;
  });

const [activeTab, setActiveTab] = useState<"registry" | "editor" | "simulator" | "audit">("registry");
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("All");

// Selected fee for inspection / viewing details
  const [inspectFee, setInspectFee] = useState<FeeRule | null>(null);

// Editor State
  const [editorFee, setEditorFee] = useState<FeeRule>({
    id: "",
    name: "",
    description: "",
    status: "Draft",
    chargeParty: "Receiver",
    chargeSubject: "Employee",
    priority: 1,
    effectiveDate: "2026-07-01",
    expiredDate: "2026-12-31",
    refundBehavior: "Non-Refundable",
    taxBehavior: "Exclusive",
    taxCode: "TAX-VAT-5",
    criteria: [{ attrCode: "Transaction_Type", attrLabel: "Txn Type", operator: "Equals", value: "Disbursement" }],
    tiers: [{ priorityOrder: 1, startValue: 0, endValue: 999999999, calcType: "Flat", flatAmount: 1000, percentRate: 0, minCap: 0, maxCap: 0 }],
    distribution: [{ entityType: "Internal_System", entityName: "EWA Platform Core Balance", percentage: 100, debitGlCode: "1100", creditGlCode: "4000", isTaxBearing: true }]
  });
  const [isNewRule, setIsNewRule] = useState(true);

// Simulation Engine State
  const [simSelectedFeeId, setSimSelectedFeeId] = useState("");
  const [simAmount, setSimAmount] = useState<number>(75000);
  const [simChannel, setSimChannel] = useState<string>("KBZ Pay");
  const [simDaysLate, setSimDaysLate] = useState<number>(0);
  const [simResult, setSimResult] = useState<any | null>(null);

// Persist State
  useEffect(() => {
    localStorage.setItem("ewa_fees", JSON.stringify(fees));
  }, [fees]);

useEffect(() => {
    localStorage.setItem("ewa_fee_audits", JSON.stringify(audits));
  }, [audits]);

// Set Default Sim Fee once fees load
  useEffect(() => {
    const activeFees = fees.filter(f => f.status === "Active");
    if (activeFees.length > 0 && !simSelectedFeeId) {
      setSimSelectedFeeId(activeFees[0].id);
    }
  }, [fees, simSelectedFeeId]);

// ─── HELPER FUNCTIONS ───

const formatCurrency = (amt: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "MMK",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amt).replace("MMK", "MMK ");
  };

const getStatusBadge = (status: FeeRule["status"]) => {
    switch (status) {
      case "Active":
        return <EnterpriseBadge variant="success">ACTIVE</EnterpriseBadge>;
      case "Draft":
        return <EnterpriseBadge variant="neutral">DRAFT</EnterpriseBadge>;
      case "Pending_Approval":
        return <EnterpriseBadge variant="warning">PENDING APPROVAL</EnterpriseBadge>;
      case "Inactive":
        return <EnterpriseBadge variant="error">INACTIVE</EnterpriseBadge>;
      case "Archived":
        return <EnterpriseBadge variant="neutral">ARCHIVED</EnterpriseBadge>;
    }
  };

const addAuditLog = (feeId: string, feeName: string, action: AuditLog["action"], details: string) => {
    const newLog: AuditLog = {
      timestamp: new Date().toISOString().replace("T", " ").substring(0, 16),
      feeId,
      feeName,
      action,
      user: "platform_admin@ewa.com",
      details
    };
    setAudits(prev => [newLog, ...prev]);
  };

// ─── ACTION HANDLERS ───

const handleEditClick = (fee: FeeRule) => {
    setEditorFee(JSON.parse(JSON.stringify(fee))); // Deep clone
    setIsNewRule(false);
    setActiveTab("editor");
  };

const handleToggleStatus = (fee: FeeRule) => {
    const nextStatusMap: Record<FeeRule["status"], FeeRule["status"]> = {
      Active: "Inactive",
      Inactive: "Active",
      Draft: "Pending_Approval",
      Pending_Approval: "Active",
      Archived: "Draft"
    };

const nextStatus = nextStatusMap[fee.status];
    setFees(prev =>
      prev.map(f => (f.id === fee.id ? { ...f, status: nextStatus } : f))
    );

let actionLabel: AuditLog["action"] = "Edit";
    if (nextStatus === "Active") actionLabel = "Activate";
    if (nextStatus === "Inactive") actionLabel = "Deactivate";
    if (nextStatus === "Pending_Approval") actionLabel = "Approve"; // triggered request

addAuditLog(fee.id, fee.name, actionLabel, `Status changed from ${fee.status} to ${nextStatus}`);
    
    // update inspection if open
    if (inspectFee?.id === fee.id) {
      setInspectFee(prev => prev ? { ...prev, status: nextStatus } : null);
    }
  };

const handleDeleteRule = (id: string, name: string) => {
    setFees(prev => prev.filter(f => f.id !== id));
    if (inspectFee?.id === id) setInspectFee(null);
    addAuditLog(id, name, "Deactivate", `Deleted draft/inactive fee definition`);
  };

// ─── EDITOR SUB-FORM BUILDERS ───

const handleSaveEditorRule = (targetStatus: FeeRule["status"]) => {
    // Validate Distribution sums to 100
    const totalDist = editorFee.distribution.reduce((acc, curr) => acc + Number(curr.percentage || 0), 0);
    if (totalDist !== 100) {
      alert(`Distribution allocation totals ${totalDist}%. It must sum to exactly 100% before saving.`);
      return;
    }

const savedRule = { ...editorFee, status: targetStatus };

setFees(prev => {
      const exists = prev.some(f => f.id === savedRule.id);
      if (exists) {
        return prev.map(f => (f.id === savedRule.id ? savedRule : f));
      } else {
        return [...prev, savedRule];
      }
    });

addAuditLog(
      savedRule.id,
      savedRule.name,
      isNewRule ? "Create" : "Edit",
      `${isNewRule ? "Created new" : "Updated existing"} fee rule with status ${targetStatus}`
    );

setActiveTab("registry");
  };

const updateL1Field = (key: keyof FeeRule, val: any) => {
    setEditorFee(prev => ({ ...prev, [key]: val }));
  };

// Criteria Rows (L2)
  const addCriteriaRow = () => {
    setEditorFee(prev => ({
      ...prev,
      criteria: [...prev.criteria, { attrCode: "Channel", attrLabel: "Channel", operator: "Equals", value: "" }]
    }));
  };

const removeCriteriaRow = (index: number) => {
    setEditorFee(prev => {
      const clone = [...prev.criteria];
      clone.splice(index, 1);
      return { ...prev, criteria: clone };
    });
  };

// Pricing Tiers Rows (L3)
  const addTierRow = () => {
    const nextPriority = editorFee.tiers.length + 1;
    setEditorFee(prev => ({
      ...prev,
      tiers: [
        ...prev.tiers,
        { priorityOrder: nextPriority, startValue: 0, endValue: 999999999, calcType: "Flat", flatAmount: 1000, percentRate: 0, minCap: 0, maxCap: 0 }
      ]
    }));
  };

const removeTierRow = (index: number) => {
    setEditorFee(prev => {
      const clone = [...prev.tiers];
      clone.splice(index, 1);
      return { ...prev, tiers: clone };
    });
  };

// Distribution Rows (L4)
  const addDistributionRow = () => {
    setEditorFee(prev => ({
      ...prev,
      distribution: [
        ...prev.distribution,
        { entityType: "Partner", entityName: "", percentage: 0, debitGlCode: "1100", creditGlCode: "4000", isTaxBearing: false }
      ]
    }));
  };

const editorDistributionSum = useMemo(() => {
    return editorFee.distribution.reduce((acc, curr) => acc + Number(curr.percentage || 0), 0);
  }, [editorFee.distribution]);

// ─── SIMULATION COMPUTATION ENGINE ───

const handleRunSimulation = () => {
    const targetFee = fees.find(f => f.id === simSelectedFeeId);
    if (!targetFee) return;

// Simulate Layer 2 Criteria validation
    const traceLogs: string[] = [];
    let criteriaMatched = true;

traceLogs.push(`[L2 INITIATED] Evaluating ${targetFee.criteria.length} matching rules for transaction amount ${formatCurrency(simAmount)}...`);

targetFee.criteria.forEach(crit => {
      let isCritOk = false;
      let actualValue = "";

if (crit.attrCode === "Transaction_Type") {
        actualValue = "Disbursement"; // Simulated as Disbursement transaction
        if (crit.operator === "Equals" && crit.value.toLowerCase() === "disbursement") isCritOk = true;
        if (crit.operator === "Equals" && crit.value.toLowerCase() === "repayment") {
          actualValue = simDaysLate > 0 ? "Repayment" : "Disbursement";
          isCritOk = actualValue.toLowerCase() === crit.value.toLowerCase();
        }
      } else if (crit.attrCode === "Channel") {
        actualValue = simChannel;
        if (crit.operator === "Equals" && simChannel.toLowerCase() === crit.value.toLowerCase()) isCritOk = true;
        if (crit.operator === "In_List") {
          const list = crit.value.split(",").map(s => s.trim().toLowerCase());
          if (list.includes(simChannel.toLowerCase())) isCritOk = true;
        }
      } else if (crit.attrCode === "Days_Overdue") {
        actualValue = String(simDaysLate);
        const limit = Number(crit.value);
        if (crit.operator === "Greater_Than" && simDaysLate > limit) isCritOk = true;
        if (crit.operator === "Less_Than" && simDaysLate < limit) isCritOk = true;
        if (crit.operator === "Equals" && simDaysLate === limit) isCritOk = true;
      } else {
        // Fallback for demo
        isCritOk = true;
        actualValue = crit.value;
      }

if (isCritOk) {
        traceLogs.push(`✓ MATCH: Attribute [${crit.attrLabel}] evaluated as "${actualValue}" matches condition: ${crit.operator} "${crit.value}".`);
      } else {
        traceLogs.push(`❌ MISMATCH: Attribute [${crit.attrLabel}] evaluated as "${actualValue}" does NOT match: ${crit.operator} "${crit.value}".`);
        criteriaMatched = false;
      }
    });

if (!criteriaMatched) {
      setSimResult({
        success: false,
        logs: traceLogs,
        message: "This fee policy criteria does not match the transaction parameters. Fee is not applicable.",
        finalFee: 0
      });
      return;
    }

traceLogs.push(`[L2 SUCCESS] Transaction satisfies all entry criteria. Evaluating calculation tiers...`);

// Simulate Layer 3 pricing bracket calculation
    let matchingTier: PricingTier | null = null;
    traceLogs.push(`[L3 BRACKET SELECTION] Evaluating ${targetFee.tiers.length} pricing ranges...`);

// Sort tiers by priorityOrder
    const sortedTiers = [...targetFee.tiers].sort((a, b) => a.priorityOrder - b.priorityOrder);
    
    for (const tier of sortedTiers) {
      if (simAmount >= tier.startValue && simAmount <= tier.endValue) {
        matchingTier = tier;
        traceLogs.push(`🎯 BRACKET MATCH: Transaction amount falls within range ${formatCurrency(tier.startValue)} ↔ ${tier.endValue === 999999999 ? "Infinity" : formatCurrency(tier.endValue)}. Applying Tier priority #${tier.priorityOrder}.`);
        break;
      } else {
        traceLogs.push(`- Skip Tier #${tier.priorityOrder}: amount is outside range ${formatCurrency(tier.startValue)} ↔ ${tier.endValue === 999999999 ? "Infinity" : formatCurrency(tier.endValue)}.`);
      }
    }

if (!matchingTier) {
      traceLogs.push(`❌ NO BRACKET MATCH: Amount did not fall into any pricing tier. Falling back to default.`);
      matchingTier = sortedTiers[0];
    }

let calculatedFee = 0;
    let baseCalculationFormula = "";

if (matchingTier.calcType === "Flat") {
      calculatedFee = matchingTier.flatAmount;
      baseCalculationFormula = `${formatCurrency(matchingTier.flatAmount)} (Flat Amount)`;
      traceLogs.push(`[L3 MATH] Flat calculation applied: Fee is directly ${formatCurrency(matchingTier.flatAmount)}.`);
    } else if (matchingTier.calcType === "Percent") {
      calculatedFee = (simAmount * matchingTier.percentRate) / 100;
      baseCalculationFormula = `${formatCurrency(simAmount)} × ${matchingTier.percentRate}%`;
      traceLogs.push(`[L3 MATH] Percent calculation applied: ${baseCalculationFormula} = ${formatCurrency(calculatedFee)}.`);
    } else if (matchingTier.calcType === "Hybrid") {
      calculatedFee = matchingTier.flatAmount + (simAmount * matchingTier.percentRate) / 100;
      baseCalculationFormula = `${formatCurrency(matchingTier.flatAmount)} + (${formatCurrency(simAmount)} × ${matchingTier.percentRate}%)`;
      traceLogs.push(`[L3 MATH] Hybrid calculation applied: ${baseCalculationFormula} = ${formatCurrency(calculatedFee)}.`);
    }

// Apply caps if applicable (primarily for Percent/Hybrid)
    let finalFeeAfterCap = calculatedFee;
    if (matchingTier.calcType !== "Flat") {
      if (matchingTier.minCap > 0 && calculatedFee < matchingTier.minCap) {
        finalFeeAfterCap = matchingTier.minCap;
        traceLogs.push(`⚠️ MIN CAP TRIGGERED: Calculated fee ${formatCurrency(calculatedFee)} is below minimum cap floor. Enforced: ${formatCurrency(matchingTier.minCap)}.`);
      } else if (matchingTier.maxCap > 0 && calculatedFee > matchingTier.maxCap) {
        finalFeeAfterCap = matchingTier.maxCap;
        traceLogs.push(`⚠️ MAX CAP TRIGGERED: Calculated fee ${formatCurrency(calculatedFee)} exceeds maximum cap ceiling. Enforced: ${formatCurrency(matchingTier.maxCap)}.`);
      } else {
        traceLogs.push(`✓ CAP CHECK: Calculated fee of ${formatCurrency(calculatedFee)} is within normal bounds.`);
      }
    }

// Calculate Distribution splits
    traceLogs.push(`[L4 DISTRIBUTION] Distributing collected fee of ${formatCurrency(finalFeeAfterCap)} to internal and external partners...`);
    const distributionsBreakdown = targetFee.distribution.map(dist => {
      const allocatedAmount = (finalFeeAfterCap * dist.percentage) / 100;
      traceLogs.push(`➜ Split: ${dist.entityName} (${dist.percentage}%) gets ${formatCurrency(allocatedAmount)} (Debit GL ${dist.debitGlCode} | Credit GL ${dist.creditGlCode}).`);
      return {
        ...dist,
        amount: allocatedAmount
      };
    });

setSimResult({
      success: true,
      logs: traceLogs,
      message: "Simulation completed successfully.",
      formula: baseCalculationFormula,
      rawFee: calculatedFee,
      finalFee: finalFeeAfterCap,
      splits: distributionsBreakdown,
      taxDetails: targetFee.taxBehavior === "Exclusive" 
        ? `VAT Exclusive: Calculated fee excludes taxes. Tax code ${targetFee.taxCode} applied at accounting ledger.`
        : `VAT Inclusive: Calculated fee contains tax liabilities.`
    });
  };

// Run initial simulation on selection change
  useEffect(() => {
    if (activeTab === "simulator" && simSelectedFeeId) {
      handleRunSimulation();
    }
  }, [activeTab, simSelectedFeeId]);

// ─── FILTERED DATA ───

const filteredFees = useMemo(() => {
    return fees.filter(fee => {
      const matchSearch =
        fee.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
        fee.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        fee.description.toLowerCase().includes(searchQuery.toLowerCase());
      const matchStatus = statusFilter === "All" || fee.status === statusFilter;
      return matchSearch && matchStatus;
    });
  }, [fees, searchQuery, statusFilter]);

return (
    <div className="space-y-4">
      {/* HEADER SECTION */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Settings className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Fee Builder & Policy Config</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Define multi-layer rule hierarchies and distribution models</p>
          </div>
        </div>
        <div className="flex gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1.5 text-[10px]" onClick={() => setActiveTab("simulator")}>
            <Calculator className="w-3.5 h-3.5" /> Policy Simulator
          </EnterpriseButton>
          <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1.5 text-[10px]" onClick={handleCreateNewClick}>
            <Plus className="w-3.5 h-3.5" /> Create Fee Rule
          </EnterpriseButton>
        </div>
      </div>

{/* KPI DASHBOARD CARDS */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Total Fee Rules"
          value={fees.length}
          subValue="Active & draft definitions"
          accentColor="neutral"
          icon={<Layers className="w-4 h-4 text-[#100841]" />}
        />
        <EnterpriseKpiCard
          label="Active Policies"
          value={fees.filter(f => f.status === "Active").length}
          subValue="Live on transactional engine"
          accentColor="success"
          icon={<CheckCircle className="w-4 h-4 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Sponsoring Bank Ledger Mapped"
          value="100%"
          subValue="Double-entry validation"
          accentColor="info"
          icon={<Landmark className="w-4 h-4 text-[#1565c0]" />}
        />
        <EnterpriseKpiCard
          label="Simulation Coverage"
          value="99.8%"
          subValue="94 validation passes"
          accentColor="success"
          icon={<Calculator className="w-4 h-4 text-[#31d891]" />}
        />
      </div>

{/* NAVIGATION TABS */}
      <div className="border-b border-[#dfdfdf] flex items-center justify-between">
        <div className="flex gap-2">
          <button
            onClick={() => { setActiveTab("registry"); setInspectFee(null); }}
            className={cn(
              "px-4 py-2 text-[11px] font-bold uppercase tracking-wider border-b-2 transition-all",
              activeTab === "registry"
                ? "border-[#31d891] text-[#100841] bg-[#31d891]/5"
                : "border-transparent text-[#4f525d] hover:text-[#100841]"
            )}
          >
            Fee Registry ({fees.length})
          </button>
          <button
            onClick={() => setActiveTab("editor")}
            className={cn(
              "px-4 py-2 text-[11px] font-bold uppercase tracking-wider border-b-2 transition-all",
              activeTab === "editor"
                ? "border-[#31d891] text-[#100841] bg-[#31d891]/5"
                : "border-transparent text-[#4f525d] hover:text-[#100841]"
            )}
          >
            {isNewRule ? "Create Fee Rule" : `Editor: ${editorFee.id}`}
          </button>
          <button
            onClick={() => { setActiveTab("simulator"); handleRunSimulation(); }}
            className={cn(
              "px-4 py-2 text-[11px] font-bold uppercase tracking-wider border-b-2 transition-all",
              activeTab === "simulator"
                ? "border-[#31d891] text-[#100841] bg-[#31d891]/5"
                : "border-transparent text-[#4f525d] hover:text-[#100841]"
            )}
          >
            Engine Simulator
          </button>
          <button
            onClick={() => setActiveTab("audit")}
            className={cn(
              "px-4 py-2 text-[11px] font-bold uppercase tracking-wider border-b-2 transition-all",
              activeTab === "audit"
                ? "border-[#31d891] text-[#100841] bg-[#31d891]/5"
                : "border-transparent text-[#4f525d] hover:text-[#100841]"
            )}
          >
            System Audit Log
          </button>
        </div>

{/* Dynamic Warning Indicator for Editor */}
        {activeTab === "editor" && editorDistributionSum !== 100 && (
          <div className="flex items-center gap-1 text-[10px] text-red-600 bg-red-50 border border-red-200 px-3 py-1 rounded-[3px] font-semibold animate-pulse">
            <AlertCircle size={12} />
            Distribution: {editorDistributionSum}% (Needs 100%)
          </div>
        )}
      </div>

{/* ─── TAB 1: REGISTRY VIEW ─── */}
      {activeTab === "registry" && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Registry Table Area */}
          <div className="lg:col-span-2 space-y-4">
            <div className="flex gap-2 items-center bg-white p-3 rounded-[3px] border border-[#dfdfdf]">
              <div className="flex-1">
                <EnterpriseInput
                  placeholder="Search fee registry by code, name, description..."
                  value={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  className="w-full !text-[11px]"
                />
              </div>
              <div className="w-44">
                <EnterpriseSelect
                  value={statusFilter}
                  onChange={e => setStatusFilter(e.target.value)}
                  className="!py-1.5 !text-[11px]"
                >
                  <option value="All">All Statuses</option>
                  <option value="Active">Active Only</option>
                  <option value="Draft">Drafts Only</option>
                  <option value="Pending_Approval">Pending Approval</option>
                  <option value="Inactive">Inactive</option>
                </EnterpriseSelect>
              </div>
            </div>

<div className="border border-[#dfdfdf] rounded-[3px] overflow-hidden bg-white shadow-sm">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                    <th className="px-4 py-2.5 text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">ID / PRI</th>
                    <th className="px-4 py-2.5 text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Fee Rule Definition</th>
                    <th className="px-4 py-2.5 text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Subject</th>
                    <th className="px-4 py-2.5 text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Pricing Tiers</th>
                    <th className="px-4 py-2.5 text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Status</th>
                    <th className="px-4 py-2.5 text-right text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#efefff]">
                  {filteredFees.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="text-center py-8 text-[11px] text-[#4f525d] italic">
                        No policy rules found matching your filters.
                      </td>
                    </tr>
                  ) : (
                    filteredFees.map(fee => (
                      <tr
                        key={fee.id}
                        className={cn(
                          "hover:bg-[#efefff] transition-colors cursor-pointer",
                          inspectFee?.id === fee.id && "bg-[#31d891]/5"
                        )}
                        onClick={() => setInspectFee(fee)}
                      >
                        <td className="px-4 py-3">
                          <p className="font-mono font-bold text-[#100841] text-[11px]">{fee.id}</p>
                          <p className="text-[9px] text-[#868c95] font-mono mt-0.5">PRI: {fee.priority}</p>
                        </td>
                        <td className="px-4 py-3 max-w-[240px]">
                          <p className="font-bold text-[#100841] text-[12px] truncate">{fee.name}</p>
                          <p className="text-[10px] text-[#4f525d] truncate mt-0.5">{fee.description}</p>
                        </td>
                        <td className="px-4 py-3">
                          <p className="text-[11px] font-semibold text-[#100841]">{fee.chargeSubject}</p>
                          <p className="text-[9px] text-[#868c95] uppercase tracking-tight">{fee.chargeParty} Pays</p>
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex flex-col gap-0.5">
                            {fee.tiers.map((t, i) => (
                              <span key={i} className="text-[10px] font-mono text-[#4f525d]">
                                {t.startValue === 0 && t.endValue === 999999999
                                  ? "All amounts"
                                  : `${t.startValue / 1000}k-${t.endValue === 999999999 ? "∞" : t.endValue / 1000 + "k"}`}
                                <strong className="text-[#31d891] ml-1">
                                  {t.calcType === "Flat" ? `${t.flatAmount} MMK` : `${t.percentRate}%`}
                                </strong>
                              </span>
                            ))}
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          {getStatusBadge(fee.status)}
                        </td>
                        <td className="px-4 py-3 text-right" onClick={e => e.stopPropagation()}>
                          <div className="flex gap-1.5 justify-end">
                            <button
                              onClick={() => handleForkClick(fee)}
                              className="p-1 text-slate-400 hover:text-[#31d891] transition-colors hover:bg-[#ffffff] rounded-[2px]"
                              title="Fork / Version Copy"
                            >
                              <Copy size={13} />
                            </button>
                            {(fee.status === "Draft" || fee.status === "Inactive") && (
                              <button
                                onClick={() => handleEditClick(fee)}
                                className="p-1 text-slate-400 hover:text-amber-600 transition-colors hover:bg-[#ffffff] rounded-[2px]"
                                title="Edit Definition"
                              >
                                <Edit2 size={13} />
                              </button>
                            )}
                            <button
                              onClick={() => handleToggleStatus(fee)}
                              className={cn(
                                "p-1 rounded-[2px] transition-colors text-slate-400 hover:bg-[#ffffff]",
                                fee.status === "Active" ? "hover:text-red-500" : "hover:text-[#2e7d32]"
                              )}
                              title={fee.status === "Active" ? "Deactivate policy" : "Activate policy"}
                            >
                              <CheckCircle size={13} />
                            </button>
                            {(fee.status === "Draft" || fee.status === "Inactive") && (
                              <button
                                onClick={() => handleDeleteRule(fee.id, fee.name)}
                                className="p-1 text-slate-400 hover:text-red-600 transition-colors hover:bg-[#ffffff] rounded-[2px]"
                                title="Delete Rule"
                              >
                                <Trash2 size={13} />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>

{/* Detailed Audit & Inspect Drawer Side panel */}
          <div className="lg:col-span-1 space-y-4">
            {inspectFee ? (
              <EnterpriseCard className="border-[#dfdfdf] overflow-hidden bg-white shadow-sm flex flex-col h-full">
                {/* Panel Header */}
                <div className="bg-[#100841] text-white p-3.5 flex items-center justify-between">
                  <div>
                    <span className="font-mono text-[9px] bg-[#31d891]/20 text-[#31d891] border border-[#31d891]/30 px-1.5 py-0.5 rounded-[1px] tracking-widest font-bold">
                      {inspectFee.id}
                    </span>
                    <h3 className="text-[12px] font-bold uppercase tracking-wider mt-1">{inspectFee.name}</h3>
                  </div>
                  <button onClick={() => setInspectFee(null)} className="text-white/60 hover:text-white text-[11px] font-mono">
                    Close
                  </button>
                </div>

{/* Panel Content Scroll Area */}
                <div className="p-4 space-y-4 overflow-y-auto max-h-[500px]">
                  {/* L1 Summary */}
                  <div>
                    <h4 className="text-[9px] font-bold text-[#868c95] uppercase tracking-widest border-b border-[#efefff] pb-1 mb-2">Layer 1: Header Context</h4>
                    <div className="grid grid-cols-2 gap-2.5 text-[11px]">
                      <div>
                        <span className="text-[#4f525d] block">Charge Party:</span>
                        <strong className="text-[#100841]">{inspectFee.chargeParty}</strong>
                      </div>
                      <div>
                        <span className="text-[#4f525d] block">Subject:</span>
                        <strong className="text-[#100841]">{inspectFee.chargeSubject}</strong>
                      </div>
                      <div>
                        <span className="text-[#4f525d] block">Priority:</span>
                        <strong className="text-[#100841] font-mono">Level {inspectFee.priority}</strong>
                      </div>
                      <div>
                        <span className="text-[#4f525d] block">Validity:</span>
                        <strong className="text-[#100841] font-mono text-[10px]">{inspectFee.effectiveDate} ↔ {inspectFee.expiredDate}</strong>
                      </div>
                      <div>
                        <span className="text-[#4f525d] block">Refund Engine:</span>
                        <strong className="text-[#100841]">{inspectFee.refundBehavior}</strong>
                      </div>
                      <div>
                        <span className="text-[#4f525d] block">Tax Behavior:</span>
                        <strong className="text-[#100841]">{inspectFee.taxBehavior} ({inspectFee.taxCode})</strong>
                      </div>
                    </div>
                  </div>

{/* L2 Criteria Summary */}
                  <div>
                    <h4 className="text-[9px] font-bold text-[#868c95] uppercase tracking-widest border-b border-[#efefff] pb-1 mb-2">Layer 2: Match Rules (AND Logic)</h4>
                    <div className="space-y-1.5">
                      {inspectFee.criteria.map((crit, i) => (
                        <div key={i} className="flex items-center justify-between bg-[#efefff] border border-[#dfdfdf] p-1.5 rounded-[2px] text-[10px]">
                          <span className="font-bold text-[#100841]">{crit.attrLabel}</span>
                          <span className="text-slate-400 font-mono text-[9px]">{crit.operator.toUpperCase()}</span>
                          <strong className="text-[#31d891] font-mono">{crit.value}</strong>
                        </div>
                      ))}
                    </div>
                  </div>

{/* L3 Tiers Summary */}
                  <div>
                    <h4 className="text-[9px] font-bold text-[#868c95] uppercase tracking-widest border-b border-[#efefff] pb-1 mb-2">Layer 3: Pricing Tiers & Caps</h4>
                    <div className="space-y-2">
                      {inspectFee.tiers.map((t, i) => (
                        <div key={i} className="border border-[#dfdfdf] p-2 bg-[#fffcf5] border-l-2 border-l-amber-500 text-[11px] space-y-1 rounded-[2px]">
                          <div className="flex justify-between font-bold">
                            <span className="text-[#100841]">Priority {t.priorityOrder} Bracket</span>
                            <span className="text-[#e65100] font-mono">
                              {t.calcType === "Flat" 
                                ? formatCurrency(t.flatAmount) 
                                : t.calcType === "Percent" 
                                  ? `${t.percentRate}%` 
                                  : `${formatCurrency(t.flatAmount)} + ${t.percentRate}%`}
                            </span>
                          </div>
                          <div className="flex justify-between text-[9px] text-[#4f525d] font-mono">
                            <span>Range: {formatCurrency(t.startValue)} ↔ {t.endValue === 999999999 ? "∞" : formatCurrency(t.endValue)}</span>
                          </div>
                          {t.calcType !== "Flat" && (t.minCap > 0 || t.maxCap > 0) && (
                            <div className="flex justify-between text-[9px] text-amber-700 bg-amber-50 px-1 rounded-[1px] font-mono">
                              <span>Min Cap: {formatCurrency(t.minCap)}</span>
                              <span>Max Cap: {formatCurrency(t.maxCap)}</span>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>

{/* L4 Distribution Summary */}
                  <div>
                    <h4 className="text-[9px] font-bold text-[#868c95] uppercase tracking-widest border-b border-[#efefff] pb-1 mb-2">Layer 4: Settlement Splits</h4>
                    <div className="space-y-1.5">
                      {inspectFee.distribution.map((dist, i) => (
                        <div key={i} className="flex items-center justify-between text-[11px] p-1.5 border border-[#dfdfdf] rounded-[2px] bg-white">
                          <div className="min-w-0">
                            <p className="font-bold text-[#100841] truncate">{dist.entityName}</p>
                            <p className="text-[9px] text-[#4f525d] font-mono">GL D:{dist.debitGlCode} | C:{dist.creditGlCode}</p>
                          </div>
                          <span className="font-mono text-[11px] text-[#31d891] bg-[#31d891]/5 px-1.5 py-0.5 font-bold rounded-[1px] shrink-0">
                            {dist.percentage}%
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

<div className="mt-auto p-3 bg-[#efefff] border-t border-[#dfdfdf] flex gap-2">
                  <EnterpriseButton
                    variant="primary"
                    className="flex-1 text-[10px] h-8 flex items-center justify-center gap-1 bg-[#100841]"
                    onClick={() => {
                      setSimSelectedFeeId(inspectFee.id);
                      setActiveTab("simulator");
                    }}
                  >
                    <Calculator size={12} /> Simulate Rule
                  </EnterpriseButton>
                  {(inspectFee.status === "Draft" || inspectFee.status === "Inactive") && (
                    <EnterpriseButton
                      variant="secondary"
                      className="text-[10px] h-8"
                      onClick={() => handleEditClick(inspectFee)}
                    >
                      Edit
                    </EnterpriseButton>
                  )}
                </div>
              </EnterpriseCard>
            ) : (
              <div className="border border-dashed border-[#dfdfdf] rounded-[3px] p-8 text-center bg-white text-slate-400 space-y-3 flex flex-col justify-center items-center h-[420px]">
                <Layers className="w-8 h-8 text-slate-300" />
                <div>
                  <p className="font-bold text-[#100841] text-[12px] uppercase">Inspection Ledger Pane</p>
                  <p className="text-[10px] mt-1 max-w-[180px] mx-auto text-[#4f525d]">Select any fee rule from the registry to inspect its 4-layer pricing hierarchy & distribution keys.</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

{/* ─── TAB 2: RULE EDITOR ─── */}
      {activeTab === "editor" && (
        <EnterpriseCard className="border-[#dfdfdf] bg-white p-5 space-y-6">
          <div className="flex items-center justify-between border-b border-[#dfdfdf] pb-3">
            <div>
              <h2 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">
                {isNewRule ? "Create Brand New Policy Rule" : `Modify Fee Rule Definitions: ${editorFee.id}`}
              </h2>
              <p className="text-[10px] text-[#4f525d] mt-0.5">Draft version will undergo automated QA checks before administrative activation.</p>
            </div>
            <div className="flex gap-2">
              <EnterpriseButton variant="secondary" className="h-8 text-[10px]" onClick={() => setActiveTab("registry")}>
                Cancel
              </EnterpriseButton>
              <EnterpriseButton variant="primary" className="h-8 text-[10px] bg-emerald-700 hover:bg-emerald-800" onClick={() => handleSaveEditorRule("Draft")}>
                Save as Draft
              </EnterpriseButton>
              <EnterpriseButton variant="primary" className="h-8 text-[10px] bg-[#100841]" onClick={() => handleSaveEditorRule("Active")}>
                Save & Make Active
              </EnterpriseButton>
            </div>
          </div>

<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
            {/* Left Side: L1 & L2 (Header and Criteria) */}
            <div className="space-y-6">
              {/* L1 HEADER FORM */}
              <div className="space-y-3">
                <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-[0.2em] flex items-center gap-1.5 border-b border-[#efefff] pb-1">
                  <FileText size={14} className="text-[#31d891]" />
                  Layer 1: Fee Header Metadata
                </h3>
                <div className="grid grid-cols-2 gap-3.5">
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Fee Policy ID</label>
                    <EnterpriseInput
                      value={editorFee.id}
                      onChange={e => updateL1Field("id", e.target.value.toUpperCase())}
                      disabled={!isNewRule}
                      className="font-mono font-bold uppercase"
                      placeholder="e.g. FEE-005"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Descriptive Name</label>
                    <EnterpriseInput
                      value={editorFee.name}
                      onChange={e => updateL1Field("name", e.target.value)}
                      placeholder="e.g. Wave CashOut Base Charge"
                    />
                  </div>
                  <div className="col-span-2 space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Context Description</label>
                    <textarea
                      value={editorFee.description}
                      onChange={e => updateL1Field("description", e.target.value)}
                      className="input-enterprise w-full min-h-[50px] resize-none !text-[11px]"
                      placeholder="Describe the business scenario, target user group, or specific corporate context..."
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Charge Bearer Party</label>
                    <EnterpriseSelect
                      value={editorFee.chargeParty}
                      onChange={e => updateL1Field("chargeParty", e.target.value)}
                    >
                      <option value="Receiver">Receiver Pays (Deducted from drawdown)</option>
                      <option value="Sender">Sender Pays (Invoiced to Sponsoring Co)</option>
                    </EnterpriseSelect>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Charge Subject Account</label>
                    <EnterpriseSelect
                      value={editorFee.chargeSubject}
                      onChange={e => updateL1Field("chargeSubject", e.target.value)}
                    >
                      <option value="Employee">Employee Wallet</option>
                      <option value="Company">Corporate Settlement Account</option>
                    </EnterpriseSelect>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Evaluation Priority</label>
                    <EnterpriseInput
                      type="number"
                      value={editorFee.priority}
                      onChange={e => updateL1Field("priority", Number(e.target.value))}
                      className="font-mono"
                      min={1}
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">VAT Behavior</label>
                    <EnterpriseSelect
                      value={editorFee.taxBehavior}
                      onChange={e => updateL1Field("taxBehavior", e.target.value)}
                    >
                      <option value="Exclusive">Tax Exclusive (+5% VAT calculated post-fee)</option>
                      <option value="Inclusive">Tax Inclusive (VAT calculated inside fee)</option>
                    </EnterpriseSelect>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Effective Date</label>
                    <EnterpriseInput
                      type="date"
                      value={editorFee.effectiveDate}
                      onChange={e => updateL1Field("effectiveDate", e.target.value)}
                      className="font-mono text-[10px]"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Expiry Date</label>
                    <EnterpriseInput
                      type="date"
                      value={editorFee.expiredDate}
                      onChange={e => updateL1Field("expiredDate", e.target.value)}
                      className="font-mono text-[10px]"
                    />
                  </div>
                </div>
              </div>

{/* L2 CRITERIA BUILDER */}
              <div className="space-y-3">
                <div className="flex items-center justify-between border-b border-[#efefff] pb-1">
                  <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-[0.2em] flex items-center gap-1.5">
                    <Tag size={14} className="text-[#31d891]" />
                    Layer 2: Dynamic Criteria Filters (AND logic)
                  </h3>
                  <button
                    onClick={addCriteriaRow}
                    className="text-[#31d891] text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 hover:underline"
                  >
                    <PlusCircle size={12} /> Add Condition
                  </button>
                </div>

<div className="space-y-2 max-h-[220px] overflow-y-auto pr-1">
                  {editorFee.criteria.length === 0 ? (
                    <div className="p-3 text-center text-[#4f525d] border border-dashed border-[#dfdfdf] italic text-[10px] rounded-[2px]">
                      No triggering criteria specified. Rule will execute universally for all transactions.
                    </div>
                  ) : (
                    editorFee.criteria.map((crit, i) => (
                      <div key={i} className="flex gap-2 items-center bg-[#efefff] p-2 border border-[#dfdfdf] rounded-[2px]">
                        <div className="w-1/3">
                          <EnterpriseSelect
                            value={crit.attrCode}
                            onChange={e => updateCriteriaRow(i, "attrCode", e.target.value)}
                            className="!py-1 !text-[11px]"
                          >
                            {METADATA_ATTRIBUTES.map(m => (
                              <option key={m.code} value={m.code}>{m.label}</option>
                            ))}
                          </EnterpriseSelect>
                        </div>
                        <div className="w-1/4">
                          <EnterpriseSelect
                            value={crit.operator}
                            onChange={e => updateCriteriaRow(i, "operator", e.target.value)}
                            className="!py-1 !text-[11px]"
                          >
                            <option value="Equals">Equals</option>
                            <option value="Not_Equals">Not Equals</option>
                            <option value="Greater_Than">Greater Than</option>
                            <option value="Less_Than">Less Than</option>
                            <option value="Between">Between</option>
                            <option value="In_List">In List</option>
                          </EnterpriseSelect>
                        </div>
                        <div className="flex-1">
                          <EnterpriseInput
                            value={crit.value}
                            onChange={e => updateCriteriaRow(i, "value", e.target.value)}
                            placeholder={crit.operator === "In_List" ? "Val1, Val2, Val3" : "e.g. Wave Money"}
                            className="!py-1 !text-[11px]"
                          />
                        </div>
                        {editorFee.criteria.length > 1 && (
                          <button
                            onClick={() => removeCriteriaRow(i)}
                            className="text-red-600 hover:text-red-800 p-1 hover:bg-red-50 rounded-[2px]"
                          >
                            <Trash2 size={13} />
                          </button>
                        )}
                      </div>
                    ))
                  )}
                </div>
              </div>
            </div>

{/* Right Side: L3 & L4 (Tiers and Distribution) */}
            <div className="space-y-6">
              {/* L3 PRICING TIERS */}
              <div className="space-y-3">
                <div className="flex items-center justify-between border-b border-[#efefff] pb-1">
                  <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-[0.2em] flex items-center gap-1.5">
                    <Layers size={14} className="text-[#31d891]" />
                    Layer 3: Pricing Tiers calculation brackets
                  </h3>
                  <button
                    onClick={addTierRow}
                    className="text-[#31d891] text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 hover:underline"
                  >
                    <PlusCircle size={12} /> Add Tier Bracket
                  </button>
                </div>

<div className="space-y-3 max-h-[240px] overflow-y-auto pr-1">
                  {editorFee.tiers.map((t, i) => (
                    <div key={i} className="bg-[#fffcf7] p-2.5 border border-[#ffecb3] border-l-3 border-l-amber-500 rounded-[2px] text-[11px] space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="font-bold text-[#100841] uppercase text-[10px]">Tier Bracket #{i + 1} (Priority Order)</span>
                        <div className="flex items-center gap-1.5">
                          <span className="text-[9px] text-[#4f525d]">Calculation Mode:</span>
                          <EnterpriseSelect
                            value={t.calcType}
                            onChange={e => updateTierRow(i, "calcType", e.target.value)}
                            className="!py-0.5 !px-1.5 !text-[10px] font-bold !bg-white border-[#ffecb3]"
                          >
                            <option value="Flat">Flat Fee Only</option>
                            <option value="Percent">Percentage Only</option>
                            <option value="Hybrid">Hybrid Combo</option>
                          </EnterpriseSelect>
                          {editorFee.tiers.length > 1 && (
                            <button
                              onClick={() => removeTierRow(i)}
                              className="text-red-600 hover:text-red-800 p-0.5 hover:bg-red-50 rounded-[2px] ml-1.5"
                            >
                              <Trash2 size={12} />
                            </button>
                          )}
                        </div>
                      </div>

{/* Range Inputs */}
                      <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-0.5">
                          <label className="text-[8px] uppercase tracking-wider text-slate-400">Min Trx Value (MMK)</label>
                          <EnterpriseInput
                            type="number"
                            value={t.startValue}
                            onChange={e => updateTierRow(i, "startValue", Number(e.target.value))}
                            className="!py-1 !px-2 font-mono"
                          />
                        </div>
                        <div className="space-y-0.5">
                          <label className="text-[8px] uppercase tracking-wider text-slate-400">Max Trx Value (MMK)</label>
                          <EnterpriseInput
                            type="number"
                            value={t.endValue}
                            onChange={e => updateTierRow(i, "endValue", Number(e.target.value))}
                            className="!py-1 !px-2 font-mono"
                          />
                        </div>
                      </div>

{/* Calc Type Specific Values */}
                      <div className="grid grid-cols-4 gap-2 items-center">
                        {t.calcType !== "Percent" && (
                          <div className="col-span-2 space-y-0.5">
                            <label className="text-[8px] uppercase tracking-wider text-[#100841] font-bold">Flat Charge (MMK)</label>
                            <EnterpriseInput
                              type="number"
                              value={t.flatAmount}
                              onChange={e => updateTierRow(i, "flatAmount", Number(e.target.value))}
                              className="!py-1 !px-2 font-mono !bg-[#31d891]/5 font-bold"
                            />
                          </div>
                        )}
                        {t.calcType !== "Flat" && (
                          <div className="col-span-2 space-y-0.5">
                            <label className="text-[8px] uppercase tracking-wider text-[#100841] font-bold">Percentage Rate (%)</label>
                            <EnterpriseInput
                              type="number"
                              value={t.percentRate}
                              onChange={e => updateTierRow(i, "percentRate", Number(e.target.value))}
                              className="!py-1 !px-2 font-mono !bg-[#31d891]/5 font-bold"
                              step="0.1"
                            />
                          </div>
                        )}
                        {t.calcType !== "Flat" && (
                          <div className="space-y-0.5">
                            <label className="text-[8px] uppercase tracking-wider text-slate-400">Min Cap Floor</label>
                            <EnterpriseInput
                              type="number"
                              value={t.minCap}
                              onChange={e => updateTierRow(i, "minCap", Number(e.target.value))}
                              className="!py-1 !px-1.5 font-mono"
                            />
                          </div>
                        )}
                        {t.calcType !== "Flat" && (
                          <div className="space-y-0.5">
                            <label className="text-[8px] uppercase tracking-wider text-slate-400">Max Cap Ceiling</label>
                            <EnterpriseInput
                              type="number"
                              value={t.maxCap}
                              onChange={e => updateTierRow(i, "maxCap", Number(e.target.value))}
                              className="!py-1 !px-1.5 font-mono"
                            />
                          </div>
                        )}
                      </div>

{/* Dynamic Formula Display for User */}
                      <div className="bg-white/70 border border-[#ffecb3] p-1 px-2.5 rounded-[2px] font-mono text-[9px] text-[#e65100] flex justify-between">
                        <span>Formula structure:</span>
                        <strong>
                          {t.calcType === "Flat" && `[Flat Amount = ${t.flatAmount} MMK]`}
                          {t.calcType === "Percent" && `[Amt] × ${t.percentRate}% (Caps: Min ${t.minCap} ↔ Max ${t.maxCap})`}
                          {t.calcType === "Hybrid" && `[${t.flatAmount} MMK] + ([Amt] × ${t.percentRate}%)`}
                        </strong>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

{/* L4 SETTLEMENT DISTRIBUTION SPLITS */}
              <div className="space-y-3">
                <div className="flex items-center justify-between border-b border-[#efefff] pb-1">
                  <h3 className="text-[10px] font-bold text-[#4f525d] uppercase tracking-[0.2em] flex items-center gap-1.5">
                    <Landmark size={14} className="text-[#31d891]" />
                    Layer 4: Settlement Allocation Splits (Sum to 100%)
                  </h3>
                  <button
                    onClick={addDistributionRow}
                    className="text-[#31d891] text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 hover:underline"
                  >
                    <PlusCircle size={12} /> Add Recipient Entity
                  </button>
                </div>

<div className="space-y-2 max-h-[220px] overflow-y-auto pr-1">
                  {editorFee.distribution.map((dist, i) => (
                    <div key={i} className="grid grid-cols-12 gap-1.5 items-center bg-[#efefff] p-2 border border-[#dfdfdf] rounded-[2px]">
                      <div className="col-span-3">
                        <EnterpriseSelect
                          value={dist.entityType}
                          onChange={e => updateDistributionRow(i, "entityType", e.target.value)}
                          className="!py-0.5 !px-1.5 !text-[10px]"
                        >
                          <option value="Internal_System">Core Platform</option>
                          <option value="Partner">Corporate Bank</option>
                          <option value="Agent">Retail Agent</option>
                          <option value="External_Bank">Mobile Money</option>
                        </EnterpriseSelect>
                      </div>
                      <div className="col-span-3">
                        <EnterpriseInput
                          value={dist.entityName}
                          onChange={e => updateDistributionRow(i, "entityName", e.target.value)}
                          placeholder="Entity Name"
                          className="!py-0.5 !px-1.5 !text-[10px]"
                        />
                      </div>
                      <div className="col-span-1.5">
                        <EnterpriseInput
                          type="number"
                          value={dist.percentage}
                          onChange={e => updateDistributionRow(i, "percentage", Number(e.target.value))}
                          placeholder="%"
                          className="!py-0.5 !px-1 font-mono text-center !bg-[#31d891]/5 font-bold !text-[#31d891] !text-[10px]"
                          max={100}
                        />
                      </div>
                      <div className="col-span-2">
                        <EnterpriseSelect
                          value={dist.creditGlCode}
                          onChange={e => updateDistributionRow(i, "creditGlCode", e.target.value)}
                          className="!py-0.5 !px-1 !text-[9px] font-mono"
                          title="Credit Revenue Ledger Code"
                        >
                          {GL_ACCOUNTS.map(g => (
                            <option key={g.code} value={g.code}>CR {g.code}</option>
                          ))}
                        </EnterpriseSelect>
                      </div>
                      <div className="col-span-1.5 text-center">
                        <input
                          type="checkbox"
                          checked={dist.isTaxBearing}
                          onChange={e => updateDistributionRow(i, "isTaxBearing", e.target.checked)}
                          className="rounded-[1px] border-[#dfdfdf]"
                          title="Is Entity Absorbing Tax?"
                        />
                        <span className="text-[8px] text-slate-400 block">TAX</span>
                      </div>
                      <div className="col-span-1 text-right">
                        {editorFee.distribution.length > 1 && (
                          <button
                            onClick={() => removeDistributionRow(i)}
                            className="text-red-600 hover:text-red-800 p-0.5"
                          >
                            <Trash2 size={12} />
                          </button>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

<div className={cn(
                  "p-3 border rounded-[2px] flex items-center justify-between",
                  editorDistributionSum === 100 
                    ? "bg-[#e8f5e9] border-[#c8e6c9] text-[#2e7d32]" 
                    : "bg-red-50 border-red-200 text-red-700"
                )}>
                  <div className="flex items-center gap-1.5">
                    {editorDistributionSum === 100 ? (
                      <CheckCircle size={14} />
                    ) : (
                      <AlertCircle size={14} className="animate-pulse" />
                    )}
                    <span className="text-[11px] font-bold">
                      {editorDistributionSum === 100 
                        ? "BALANCED: Allocation totals exactly 100%." 
                        : `IMBALANCED: Split total is ${editorDistributionSum}%. All values must equal 100%.`}
                    </span>
                  </div>
                  <strong className="font-mono text-xs">{editorDistributionSum}%</strong>
                </div>
              </div>
            </div>
          </div>
        </EnterpriseCard>
      )}

{/* ─── TAB 3: SIMULATOR VIEW ─── */}
      {activeTab === "simulator" && (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Controls Panel (Left) */}
          <div className="lg:col-span-5 space-y-4">
            <EnterpriseCard className="border-[#dfdfdf] bg-white p-5 space-y-4">
              <div className="flex items-center gap-2 border-b border-[#efefff] pb-2">
                <Calculator className="text-[#100841] w-4.5 h-4.5" />
                <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">Engine Simulation Controls</h3>
              </div>

<div className="space-y-3.5">
                <div className="space-y-1">
                  <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Select Target Policy Rule</label>
                  <EnterpriseSelect
                    value={simSelectedFeeId}
                    onChange={e => setSimSelectedFeeId(e.target.value)}
                    className="!text-[11px]"
                  >
                    <optgroup label="Active Policies">
                      {fees.filter(f => f.status === "Active").map(f => (
                        <option key={f.id} value={f.id}>[{f.id}] {f.name}</option>
                      ))}
                    </optgroup>
                    <optgroup label="Draft / Inactive Policies">
                      {fees.filter(f => f.status !== "Active").map(f => (
                        <option key={f.id} value={f.id}>[{f.id}] {f.name} ({f.status})</option>
                      ))}
                    </optgroup>
                  </EnterpriseSelect>
                </div>

<div className="space-y-1">
                  <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Transaction Drawdown Amount</label>
                  <div className="relative flex items-center">
                    <span className="absolute left-3 text-[12px] font-bold text-[#4f525d] font-mono">MMK</span>
                    <input
                      type="number"
                      value={simAmount}
                      onChange={e => setSimAmount(Number(e.target.value))}
                      className="input-enterprise w-full pl-12 font-mono font-bold text-[#100841] text-sm outline-none"
                      placeholder="Enter amount..."
                    />
                  </div>
                  <p className="text-[9px] text-[#868c95] italic">Adjust transactional values to test cap ceilings and tiered ranges.</p>
                </div>

<div className="space-y-1">
                  <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Disbursement Payout Channel</label>
                  <EnterpriseSelect
                    value={simChannel}
                    onChange={e => setSimChannel(e.target.value)}
                    className="!text-[11px]"
                  >
                    <option value="KBZ Pay">KBZ Pay (Mobile Wallet)</option>
                    <option value="Wave">Wave Money (Agent Agent)</option>
                    <option value="CB Pay">CB Bank Wallet</option>
                    <option value="QR Manual">QR Instant Transfer</option>
                    <option value="OTC Cash Code">Over the Counter Cash Code</option>
                  </EnterpriseSelect>
                </div>

<div className="space-y-1">
                  <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Arrears Late Period (Days)</label>
                  <EnterpriseInput
                    type="number"
                    value={simDaysLate}
                    onChange={e => setSimDaysLate(Number(e.target.value))}
                    className="font-mono font-bold"
                    min={0}
                  />
                  <p className="text-[9px] text-[#868c95] italic">Non-zero integers trigger overdue penalty logic.</p>
                </div>

<EnterpriseButton
                  variant="primary"
                  className="w-full bg-[#100841] uppercase tracking-wider text-[11px] font-bold h-10 mt-2 flex items-center justify-center gap-2"
                  onClick={handleRunSimulation}
                >
                  <Play size={14} /> Calculate Fee Metrics
                </EnterpriseButton>
              </div>
            </EnterpriseCard>

{/* Quick Context Card */}
            <div className="p-4 bg-[#ffffff] border border-[#dfdfdf] rounded-[3px] text-[11px] text-[#4f525d] space-y-2">
              <div className="flex items-center gap-1.5 font-bold text-[#100841] uppercase text-[10px]">
                <Info size={12} className="text-[#31d891]" />
                Fintech Engine Logic Info
              </div>
              <p className="leading-relaxed">
                Fees are matched on AND criteria in <strong>Layer 2</strong>. If matched, we step into <strong>Layer 3</strong> where amount ranges evaluate sequentially.
              </p>
              <p className="leading-relaxed font-semibold text-[#100841]">
                Remember: The system stops searching on the FIRST matching bracket. No summing of preceding tiers takes place.
              </p>
            </div>
          </div>

{/* Results Display Panel (Right) */}
          <div className="lg:col-span-7 space-y-4">
            {simResult ? (
              <div className="space-y-4">
                {/* Result KPI Card */}
                <div className={cn(
                  "p-5 rounded-[3px] border shadow-sm flex items-center justify-between",
                  simResult.success 
                    ? "bg-[#e8f5e9]/50 border-[#c8e6c9]" 
                    : "bg-red-50 border-red-200"
                )}>
                  <div>
                    <span className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest block">Simulated Final Charge</span>
                    {simResult.success ? (
                      <p className="text-3xl font-extrabold font-mono text-[#2e7d32] mt-1 tracking-tight">
                        {formatCurrency(simResult.finalFee)}
                      </p>
                    ) : (
                      <p className="text-2xl font-extrabold text-red-700 mt-1 uppercase tracking-tight">
                        Engine Bypass
                      </p>
                    )}
                    <span className="text-[10px] text-slate-500 font-medium block mt-1.5 italic">
                      {simResult.taxDetails || simResult.message}
                    </span>
                  </div>
                  {simResult.success && (
                    <div className="text-right shrink-0">
                      <span className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest block">Basic Math Formula</span>
                      <p className="font-mono text-[11px] font-bold text-[#100841] bg-[#100841]/5 px-2 py-1 rounded-[1px] mt-1 border border-[#100841]/10">
                        {simResult.formula}
                      </p>
                      {simResult.rawFee !== simResult.finalFee && (
                        <span className="text-[9px] text-amber-600 block mt-1 font-semibold">
                          Cap Enforced (Raw: {formatCurrency(simResult.rawFee)})
                        </span>
                      )}
                    </div>
                  )}
                </div>

{/* Audit Run Logs (Tracing) */}
                <EnterpriseCard className="border-[#dfdfdf] bg-white p-5 space-y-3">
                  <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-[0.2em] border-b border-[#efefff] pb-1.5 flex items-center gap-1.5">
                    <History size={14} className="text-[#31d891]" />
                    Sequential Policy Evaluation Logs
                  </h4>
                  <div className="bg-slate-900 text-slate-200 p-4 rounded-[2px] font-mono text-[11px] space-y-1.5 max-h-[220px] overflow-y-auto leading-normal">
                    {simResult.logs.map((log: string, i: number) => {
                      let color = "text-slate-300";
                      if (log.startsWith("✓") || log.includes("🎯") || log.startsWith("[L2 SUCCESS]")) color = "text-[#81c784]";
                      if (log.startsWith("❌")) color = "text-[#e57373]";
                      if (log.startsWith("⚠️")) color = "text-[#ffd54f]";
                      if (log.startsWith("[L2 INITIATED]") || log.startsWith("[L3 BRACKET") || log.startsWith("[L4 DISTRIBUTION]")) color = "text-[#4fc3f7] font-semibold";
                      return (
                        <p key={i} className={color}>
                          {log}
                        </p>
                      );
                    })}
                  </div>
                </EnterpriseCard>

{/* Distribution allocation card splits */}
                {simResult.success && (
                  <EnterpriseCard className="border-[#dfdfdf] bg-white p-5 space-y-3">
                    <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-[0.2em] border-b border-[#efefff] pb-1.5 flex items-center gap-1.5">
                      <Landmark size={14} className="text-[#31d891]" />
                      Layer 4: Real-time Double Entry Allocation Splits
                    </h4>
                    <div className="border border-[#dfdfdf] rounded-[2px] overflow-hidden">
                      <table className="w-full text-[11px] text-left">
                        <thead>
                          <tr className="bg-[#efefff] border-b border-[#dfdfdf]">
                            <th className="p-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Entity Name / Role</th>
                            <th className="p-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">GL Debit</th>
                            <th className="p-2 text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">GL Credit</th>
                            <th className="p-2 text-center text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Share</th>
                            <th className="p-2 text-right text-[9px] font-bold text-[#4f525d] uppercase tracking-wider">Computed Share</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-[#efefff]">
                          {simResult.splits.map((split: any, idx: number) => (
                            <tr key={idx} className="hover:bg-[#efefff]">
                              <td className="p-2">
                                <span className="font-bold text-[#100841]">{split.entityName}</span>
                                <span className="text-[9px] bg-slate-100 text-[#4f525d] px-1 rounded-[1px] ml-1.5 uppercase font-semibold">
                                  {split.entityType}
                                </span>
                              </td>
                              <td className="p-2 font-mono text-[#4f525d] font-bold">{split.debitGlCode}</td>
                              <td className="p-2 font-mono text-[#4f525d] font-bold">{split.creditGlCode}</td>
                              <td className="p-2 font-mono text-center text-[#31d891] font-bold">{split.percentage}%</td>
                              <td className="p-2 font-mono text-right font-bold text-[#100841]">{formatCurrency(split.amount)}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </EnterpriseCard>
                )}
              </div>
            ) : (
              <div className="border border-dashed border-[#dfdfdf] rounded-[3px] p-12 text-center bg-white text-slate-400 space-y-4 h-[440px] flex flex-col justify-center items-center">
                <Calculator className="w-10 h-10 text-slate-300 animate-pulse" />
                <div>
                  <p className="font-bold text-[#100841] text-sm uppercase">Awakening policy engine simulator</p>
                  <p className="text-[11px] mt-1.5 max-w-sm mx-auto text-[#4f525d]">Configure drawdown parameters on the left and click "Calculate Fee Metrics" to generate sequential, layer-by-layer ledger tracing logs and automated split allocations.</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

{/* ─── TAB 4: AUDIT HISTORY VIEW ─── */}
      {activeTab === "audit" && (
        <EnterpriseCard className="border-[#dfdfdf] bg-white p-5 space-y-4">
          <div className="flex items-center justify-between border-b border-[#efefff] pb-2">
            <div className="flex items-center gap-1.5">
              <History className="text-[#100841] w-4.5 h-4.5" />
              <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">Chronological System Audit Trail</h3>
            </div>
            <span className="text-[9px] text-[#4f525d] uppercase tracking-widest font-bold">QA Integrity Verified</span>
          </div>

<div className="space-y-3">
            {audits.map((log, i) => (
              <div key={i} className="flex gap-4 p-3 border border-[#dfdfdf] rounded-[2px] bg-[#efefff] text-[11px]">
                <div className="w-32 shrink-0">
                  <span className="text-[10px] font-mono text-[#4f525d] block">{log.timestamp}</span>
                  <span className="text-[9px] text-slate-400 font-medium block truncate mt-0.5" title={log.user}>{log.user}</span>
                </div>
                <div className="w-24 shrink-0">
                  <span className={cn(
                    "status-badge-neutral uppercase font-bold text-[8px] tracking-widest px-1.5 py-0.5",
                    log.action === "Activate" && "status-badge-success",
                    log.action === "Deactivate" && "status-badge-error",
                    log.action === "Fork" && "status-badge-info",
                    log.action === "Approve" && "status-badge-warning"
                  )}>
                    {log.action}
                  </span>
                </div>
                <div className="flex-1">
                  <p className="font-bold text-[#100841]">
                    Rule: <span className="font-mono bg-white border border-[#dfdfdf] px-1 py-0.5 text-[9px] rounded-[1px] font-semibold">{log.feeId}</span> {log.feeName}
                  </p>
                  <p className="text-[#4f525d] mt-1 text-[11px] leading-relaxed italic">
                    "{log.details}"
                  </p>
                </div>
              </div>
            ))}
          </div>
        </EnterpriseCard>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/fee-hierarchy/FeeHierarchyPage.tsx"
/**
 * FeeHierarchyPage — Fee Hierarchy & Rule Engine
 * Each tier: 2 types (percent / flat), attribute rules, logical conditions
 * Attributes: Late Day, Employee Tenure, Count per Circle, Day, Amount
 * Priority-based condition rule matching
 * Design: Enterprise Fintech — Deep Navy (#100841) + Teal (#31d891) | Sharp corners
 */
import React, { useState, useMemo } from "react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  EnterpriseInput,
  EnterpriseSelect,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
  Pyramid,
  Plus,
  Eye,
  Settings,
  Clock,
  Calendar,
  Users,
  TrendingUp,
  Filter,
  Calculator,
  ArrowRight,
  ShieldCheck,
  CheckCircle,
  AlertCircle
} from "lucide-react";
import { cn } from "@/lib/utils";

function formatMMK(amount: number) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "MMK",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(amount).replace("MMK", "MMK ");
}

type FeeType = "PERCENT" | "FLAT";
type LogicalOp = "AND" | "OR" | "NOT";
type ConditionAttribute = "LATE_DAY" | "EMPLOYEE_TENURE" | "COUNT_PER_CIRCLE" | "DAY" | "AMOUNT" | "TENURE_MONTHS";
type ConditionOperator = "GT" | "GTE" | "LT" | "LTE" | "EQ" | "BETWEEN";

interface FeeCondition {
  id: string;
  attribute: ConditionAttribute;
  operator: ConditionOperator;
  value: string;
  logicalOp: LogicalOp;
}

interface FeeTier {
  id: string;
  name: string;
  tierLevel: number;
  feeType: FeeType;
  value: number; // For percent, e.g. 1.5, for discount -25, for flat 1500
  priority: number;
  conditions: FeeCondition[];
  applicableTo: string;
  status: "ACTIVE" | "INACTIVE" | "DRAFT";
}

const INITIAL_FEE_TIERS: FeeTier[] = [
  {
    id: "FT-001",
    name: "Standard Disbursement Fee",
    tierLevel: 1,
    feeType: "PERCENT",
    value: 1.5,
    priority: 1,
    conditions: [
      { id: "FC-001", attribute: "AMOUNT", operator: "GTE", value: "0", logicalOp: "AND" },
      { id: "FC-002", attribute: "AMOUNT", operator: "LT", value: "50000", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  },
  {
    id: "FT-002",
    name: "Mid-Tier Disbursement Fee",
    tierLevel: 2,
    feeType: "PERCENT",
    value: 1.0,
    priority: 2,
    conditions: [
      { id: "FC-003", attribute: "AMOUNT", operator: "GTE", value: "50000", logicalOp: "AND" },
      { id: "FC-004", attribute: "AMOUNT", operator: "LT", value: "100000", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  },
  {
    id: "FT-003",
    name: "High-Tier Disbursement Fee",
    tierLevel: 3,
    feeType: "PERCENT",
    value: 0.75,
    priority: 3,
    conditions: [
      { id: "FC-005", attribute: "AMOUNT", operator: "GTE", value: "100000", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  },
  {
    id: "FT-004",
    name: "Late Repayment Penalty",
    tierLevel: 1,
    feeType: "PERCENT",
    value: 5.0,
    priority: 10,
    conditions: [
      { id: "FC-006", attribute: "LATE_DAY", operator: "GT", value: "0", logicalOp: "AND" },
      { id: "FC-007", attribute: "LATE_DAY", operator: "LT", value: "7", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  },
  {
    id: "FT-005",
    name: "Extended Late Penalty",
    tierLevel: 2,
    feeType: "PERCENT",
    value: 10.0,
    priority: 20,
    conditions: [
      { id: "FC-008", attribute: "LATE_DAY", operator: "GTE", value: "7", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  },
  {
    id: "FT-006",
    name: "Flat Service Fee — All Tiers",
    tierLevel: 0,
    feeType: "FLAT",
    value: 1500,
    priority: 0,
    conditions: [
      { id: "FC-009", attribute: "DAY", operator: "BETWEEN", value: "1,7", logicalOp: "AND" }
    ],
    applicableTo: "All",
    status: "ACTIVE"
  },
  {
    id: "FT-007",
    name: "New Employee Discount",
    tierLevel: 0,
    feeType: "PERCENT",
    value: -50, // 50% discount on the matched disbursement fee
    priority: 50,
    conditions: [
      { id: "FC-010", attribute: "EMPLOYEE_TENURE", operator: "LT", value: "3", logicalOp: "AND" }
    ],
    applicableTo: "New Employee (< 3 months tenure)",
    status: "ACTIVE"
  },
  {
    id: "FT-008",
    name: "Loyal Employee Reduction",
    tierLevel: 0,
    feeType: "PERCENT",
    value: -25, // 25% discount on disbursement fee
    priority: 40,
    conditions: [
      { id: "FC-012", attribute: "COUNT_PER_CIRCLE", operator: "GTE", value: "10", logicalOp: "AND" },
      { id: "FC-013", attribute: "TENURE_MONTHS", operator: "GTE", value: "12", logicalOp: "AND" }
    ],
    applicableTo: "Loyal Employee (12+ months, 10+ transactions)",
    status: "ACTIVE"
  }
];

export function FeeHierarchyPage() {
  const [feeTiers, setFeeTiers] = useState<FeeTier[]>(INITIAL_FEE_TIERS);
  const [selectedTier, setSelectedTier] = useState<FeeTier | null>(null);

// Dynamic Rule Builder modal/inline creator states
  const [isCreatingRule, setIsCreatingRule] = useState(false);
  const [newRule, setNewRule] = useState<FeeTier>({
    id: "",
    name: "",
    tierLevel: 1,
    feeType: "PERCENT",
    value: 1.0,
    priority: 1,
    conditions: [
      { id: "RC-001", attribute: "AMOUNT", operator: "GTE", value: "0", logicalOp: "AND" }
    ],
    applicableTo: "Employee",
    status: "ACTIVE"
  });

// Simulator Inputs State
  const [simAmount, setSimAmount] = useState<number>(75000);
  const [simLateDays, setSimLateDays] = useState<number>(0);
  const [simTenure, setSimTenure] = useState<number>(12);
  const [simCountPerCircle, setSimCountPerCircle] = useState<number>(15);
  const [simDay, setSimDay] = useState<number>(5);

const tierColumns: ColumnDef<FeeTier>[] = [
    {
      id: "id",
      header: "Tier ID",
      accessor: (ft) => <span className="font-mono font-bold text-[#100841]">{ft.id}</span>,
      searchString: (ft) => ft.id
    },
    {
      id: "name",
      header: "Rule Name / Definition",
      accessor: (ft) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{ft.name}</p>
          <div className="flex items-center gap-1.5 mt-0.5">
            <span className="text-[9px] text-[#4f525d] uppercase tracking-wider bg-[#ffffff] px-1 rounded-[1px]">Level {ft.tierLevel}</span>
            <span className="text-[9px] text-[#4f525d] uppercase tracking-wider bg-[#ffffff] px-1 rounded-[1px]">Priority {ft.priority}</span>
          </div>
        </div>
      ),
      searchString: (ft) => ft.name
    },
    {
      id: "type",
      header: "Fee Type",
      accessor: (ft) => <EnterpriseBadge variant={ft.feeType === "PERCENT" ? "info" : "success"}>{ft.feeType}</EnterpriseBadge>
    },
    {
      id: "value",
      header: "Value Adjustment",
      isNumeric: true,
      align: "right",
      accessor: (ft) => (
        <span className={cn("font-mono font-bold text-[12px]", ft.value < 0 ? "text-[#2e7d32]" : "text-[#e65100]")}>
          {ft.feeType === "PERCENT" ? (ft.value > 0 ? "+" : "") + ft.value + "%" : formatMMK(ft.value)}
        </span>
      )
    },
    {
      id: "conditions",
      header: "Logic Depth",
      accessor: (ft) => <span className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">{ft.conditions.length} Conditions</span>
    },
    {
      id: "status",
      header: "State",
      accessor: (ft) => <EnterpriseBadge variant={ft.status === "ACTIVE" ? "success" : "neutral"}>{ft.status}</EnterpriseBadge>
    }
  ];

const tierActions: TableAction<FeeTier>[] = [
    {
      label: "View Logic Flow",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (ft) => setSelectedTier(ft)
    },
    {
      label: "Toggle Rule State",
      icon: <Settings className="w-3.5 h-3.5" />,
      onClick: (ft) => {
        setFeeTiers(prev =>
          prev.map(t => (t.id === ft.id ? { ...t, status: t.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" } : t))
        );
        if (selectedTier?.id === ft.id) {
          setSelectedTier(prev => prev ? { ...prev, status: prev.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" } : null);
        }
      }
    }
  ];

// ─── SIMULATION EVALUATION ENGINE ───

const simulationEvaluation = useMemo(() => {
    const activeTiers = feeTiers.filter(t => t.status === "ACTIVE");
    const traceLogs: string[] = [];
    const matchedRules: FeeTier[] = [];

traceLogs.push(`Starting hierarchical evaluation of active rules for: Amt=${formatMMK(simAmount)}, LateDays=${simLateDays}, Tenure=${simTenure}m, Circles=${simCountPerCircle}, Day=${simDay}.`);

// Evaluator for conditions
    const evaluateCondition = (cond: FeeCondition): boolean => {
      let inputVal = 0;
      if (cond.attribute === "AMOUNT") inputVal = simAmount;
      else if (cond.attribute === "LATE_DAY") inputVal = simLateDays;
      else if (cond.attribute === "EMPLOYEE_TENURE" || cond.attribute === "TENURE_MONTHS") inputVal = simTenure;
      else if (cond.attribute === "COUNT_PER_CIRCLE") inputVal = simCountPerCircle;
      else if (cond.attribute === "DAY") inputVal = simDay;

const targetVal = cond.value;

switch (cond.operator) {
        case "GT":
          return inputVal > Number(targetVal);
        case "GTE":
          return inputVal >= Number(targetVal);
        case "LT":
          return inputVal < Number(targetVal);
        case "LTE":
          return inputVal <= Number(targetVal);
        case "EQ":
          return inputVal === Number(targetVal);
        case "BETWEEN": {
          const [min, max] = targetVal.split(",").map(Number);
          return inputVal >= min && inputVal <= max;
        }
        default:
          return false;
      }
    };

// Filter active tiers to check which match
    activeTiers.forEach(tier => {
      // AND logic - all conditions must be true
      const conditionsMatch = tier.conditions.every(c => evaluateCondition(c));
      if (conditionsMatch) {
        matchedRules.push(tier);
        traceLogs.push(`✓ MATCHED: [${tier.id}] "${tier.name}" satisfies all conditions.`);
      } else {
        traceLogs.push(`- Skip: [${tier.id}] "${tier.name}" conditions not met.`);
      }
    });

// 1. Determine Matched Disbursement Fee (Mutually exclusive levels 1, 2, 3)
    let matchedDisbursementRule = matchedRules
      .filter(r => r.id.startsWith("FT-00") && Number(r.id.slice(-3)) <= 3) // Brackets 1, 2, 3
      .sort((a, b) => b.tierLevel - a.tierLevel)[0] || null; // higher tier level takes precedence

// 2. Late Repayment Penalty (FT-004 / FT-005)
    let latePenaltyRule = matchedRules.find(r => r.id === "FT-004" || r.id === "FT-005") || null;
    let latePenaltyFee = 0;
    let latePenaltyFormula = "No overdue status";
    if (latePenaltyRule) {
      latePenaltyFee = (simAmount * latePenaltyRule.value) / 100;
      latePenaltyFormula = `${formatMMK(simAmount)} × ${latePenaltyRule.value}%`;
      traceLogs.push(`[Overdue Penalty Match] Applied [${latePenaltyRule.id}] yielding penalty fee: ${formatMMK(latePenaltyFee)}.`);
    }

// 3. Flat Service Fee (FT-006)
    let flatServiceRule = matchedRules.find(r => r.id === "FT-006") || null;
    let flatServiceFee = flatServiceRule ? flatServiceRule.value : 0;
    if (flatServiceRule) {
      traceLogs.push(`[Flat Fee Match] Applied flat rule [${flatServiceRule.id}] adding fee: ${formatMMK(flatServiceFee)}.`);
    }

// 4. Discounts (FT-007 / FT-008)
    let matchedDiscountRule = matchedRules.find(r => r.id === "FT-007" || r.id === "FT-008") || null;
    let discountAmount = 0;
    let discountFormula = "No discounts applicable";
    if (matchedDiscountRule && baseDisbursementFee > 0) {
      discountAmount = (baseDisbursementFee * Math.abs(matchedDiscountRule.value)) / 100;
      discountFormula = `-${Math.abs(matchedDiscountRule.value)}% on Base (${formatMMK(discountAmount)})`;
      traceLogs.push(`[Discount Match] Applied [${matchedDiscountRule.id}] reducing base fee by ${formatMMK(discountAmount)}.`);
    }

// Calculate final Net Fee
    const finalNetFee = Math.max(0, baseDisbursementFee - discountAmount + latePenaltyFee + flatServiceFee);
    traceLogs.push(`[SUMMATION] Net Fee = Base(${formatMMK(baseDisbursementFee)}) - Discount(${formatMMK(discountAmount)}) + Penalty(${formatMMK(latePenaltyFee)}) + Flat(${formatMMK(flatServiceFee)}) = ${formatMMK(finalNetFee)}.`);

return {
      disbursementRule: matchedDisbursementRule,
      disbursementFee: baseDisbursementFee,
      disbursementFormula: baseFormula,
      lateRule: latePenaltyRule,
      lateFee: latePenaltyFee,
      lateFormula: latePenaltyFormula,
      flatFee: flatServiceFee,
      discountRule: matchedDiscountRule,
      discountFee: discountAmount,
      discountFormula: discountFormula,
      netFee: finalNetFee,
      logs: traceLogs
    };
  }, [feeTiers, simAmount, simLateDays, simTenure, simCountPerCircle, simDay]);

// Handle saving new dynamic rule
  const handleSaveNewRule = () => {
    if (!newRule.id || !newRule.name) {
      alert("Please fill in Rule ID and Name.");
      return;
    }
    setFeeTiers(prev => [...prev, newRule]);
    setIsCreatingRule(false);
    alert(`Tier logic rule ${newRule.id} has been added to the registry!`);
  };

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Pyramid className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Fee Hierarchy & Rule Engine</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Attribute-based priority matching for dynamic fee calculation</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton
            variant="primary"
            className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841]"
            onClick={() => {
              const nextId = `FT-${String(feeTiers.length + 1).padStart(3, "0")}`;
              setNewRule({
                id: nextId,
                name: "",
                tierLevel: 1,
                feeType: "PERCENT",
                value: 1.0,
                priority: 10,
                conditions: [{ id: "RC-001", attribute: "AMOUNT", operator: "GTE", value: "0", logicalOp: "AND" }],
                applicableTo: "Employee",
                status: "ACTIVE"
              });
              setIsCreatingRule(true);
            }}
          >
            <Plus className="w-3.5 h-3.5" /> Define Logic Tier
          </EnterpriseButton>
        </div>
      </div>

{/* Dynamic KPIs */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Active Fee Tiers"
          value={feeTiers.filter(t => t.status === "ACTIVE").length}
          accentColor="info"
          icon={<Pyramid className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
        <EnterpriseKpiCard
          label="Logic Conditions Registered"
          value={feeTiers.reduce((sum, t) => sum + t.conditions.length, 0)}
          accentColor="neutral"
          icon={<Settings className="w-3.5 h-3.5 text-[#4f525d]" />}
        />
        <EnterpriseKpiCard
          label="Estimated Average Margin"
          value="1.45%"
          accentColor="success"
          icon={<TrendingUp className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Rule Precision Engine"
          value="100%"
          accentColor="success"
          icon={<ShieldCheck className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
      </div>

{isCreatingRule && (
        <EnterpriseCard className="border-amber-400 bg-amber-50/20 p-5 space-y-4">
          <div className="flex justify-between items-center border-b border-amber-200 pb-2">
            <h3 className="text-[12px] font-bold text-[#100841] uppercase tracking-wider flex items-center gap-1.5">
              <Settings size={14} className="text-amber-600 animate-spin" />
              Define New Dynamic Logic Tier Rule
            </h3>
            <button className="text-slate-400 hover:text-slate-600 text-[11px]" onClick={() => setIsCreatingRule(false)}>
              Cancel
            </button>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5">
            <div className="space-y-1">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Rule/Tier ID</label>
              <EnterpriseInput value={newRule.id} onChange={e => setNewRule(prev => ({ ...prev, id: e.target.value.toUpperCase() }))} className="font-mono" />
            </div>
            <div className="space-y-1 col-span-2">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Rule Name</label>
              <EnterpriseInput value={newRule.name} onChange={e => setNewRule(prev => ({ ...prev, name: e.target.value }))} placeholder="e.g. Early Settlement Rebate" />
            </div>
            <div className="space-y-1">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Priority Level</label>
              <EnterpriseInput type="number" value={newRule.priority} onChange={e => setNewRule(prev => ({ ...prev, priority: Number(e.target.value) }))} className="font-mono" />
            </div>
            <div className="space-y-1">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Fee Type</label>
              <EnterpriseSelect value={newRule.feeType} onChange={e => setNewRule(prev => ({ ...prev, feeType: e.target.value as FeeType }))}>
                <option value="PERCENT">PERCENT</option>
                <option value="FLAT">FLAT</option>
              </EnterpriseSelect>
            </div>
            <div className="space-y-1">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Charge Value</label>
              <EnterpriseInput type="number" value={newRule.value} onChange={e => setNewRule(prev => ({ ...prev, value: Number(e.target.value) }))} className="font-mono" />
            </div>
            <div className="space-y-1">
              <label className="text-[8px] font-bold text-[#4f525d] uppercase">Scope Target</label>
              <EnterpriseInput value={newRule.applicableTo} onChange={e => setNewRule(prev => ({ ...prev, applicableTo: e.target.value }))} />
            </div>
            <div className="space-y-1 flex items-end">
              <EnterpriseButton variant="primary" className="w-full h-9 bg-[#100841]" onClick={handleSaveNewRule}>
                Save Logic Rule
              </EnterpriseButton>
            </div>
          </div>
        </EnterpriseCard>
      )}

<Tabs defaultValue="tiers" className="w-full">
        <TabsList>
          <TabsTrigger value="tiers">Tier Registry</TabsTrigger>
          <TabsTrigger value="conditions">Universal Rules</TabsTrigger>
          <TabsTrigger value="simulator">Fee Simulator</TabsTrigger>
        </TabsList>

{/* TAB 1: REGISTRY */}
        <TabsContent value="tiers" className="mt-4 outline-none">
          <EnterpriseTable
            data={feeTiers}
            columns={tierColumns}
            rowKey={(ft) => ft.id}
            actions={tierActions}
            searchPlaceholder="Search tiers or definitions..."
          />
          
          {selectedTier && (
            <EnterpriseCard className="mt-6 p-6 border-[#dfdfdf] bg-[#efefff]">
               <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center gap-2">
                   <Pyramid className="w-4 h-4 text-[#100841]" />
                   <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">{selectedTier.name} — Logical Breakdown</h3>
                 </div>
                 <EnterpriseButton variant="secondary" className="h-7 text-[10px]" onClick={() => setSelectedTier(null)}>Close Analysis</EnterpriseButton>
               </div>
               
               <div className="grid grid-cols-4 gap-6 mb-8">
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Hierarchy Depth</p>
                    <p className="text-[14px] font-bold text-[#100841]">Level {selectedTier.tierLevel}</p>
                    <p className="text-[10px] text-[#4f525d]">Priority Ranking: {selectedTier.priority}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Calculated Value</p>
                    <p className={cn("text-[14px] font-mono font-bold", selectedTier.value < 0 ? "text-[#2e7d32]" : "text-[#e65100]")}>
                      {selectedTier.feeType === "PERCENT" ? (selectedTier.value > 0 ? "+" : "") + selectedTier.value + "%" : formatMMK(selectedTier.value)}
                    </p>
                    <p className="text-[10px] text-[#4f525d] uppercase">Mode: {selectedTier.feeType}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Application Scope</p>
                    <p className="text-[12px] font-bold text-[#100841] uppercase">{selectedTier.applicableTo}</p>
                    <p className="text-[10px] text-[#4f525d]">Target Entity</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Registry Status</p>
                    <EnterpriseBadge variant={selectedTier.status === "ACTIVE" ? "success" : "neutral"}>{selectedTier.status}</EnterpriseBadge>
                    <p className="text-[10px] text-[#4f525d] uppercase mt-1">Live Environment</p>
                  </div>
               </div>

<div className="space-y-4">
                  <div className="flex items-center gap-2">
                    <Filter className="w-4 h-4 text-[#100841]" />
                    <p className="text-[10px] font-bold text-[#100841] uppercase tracking-widest">Rule Conditional Logic (Sequential Chain)</p>
                  </div>
                  
                  <div className="border border-[#dfdfdf] rounded-[2px] overflow-hidden bg-white">
                    <EnterpriseTable
                      data={selectedTier.conditions}
                      columns={[
                        { id: "id", header: "ID", accessor: (c) => <span className="text-[10px] font-mono text-[#4f525d]">{c.id}</span> },
                        { id: "attr", header: "Attribute", accessor: (c) => {
                          const icons: Record<string, any> = { LATE_DAY: Clock, EMPLOYEE_TENURE: Calendar, AMOUNT: TrendingUp, COUNT_PER_CIRCLE: Users };
                          const Icon = icons[c.attribute] || Settings;
                          return (
                            <div className="flex items-center gap-1.5">
                              <Icon className="w-3 h-3 text-[#4f525d]" />
                              <span className="text-[11px] font-bold text-[#100841] uppercase tracking-tight">{c.attribute.replace("_", " ")}</span>
                            </div>
                          );
                        }},
                        { id: "op", header: "Operator", accessor: (c) => <span className="text-[10px] font-bold text-[#100841] bg-[#ffffff] px-1.5 py-0.5 rounded-[2px]">{c.operator}</span> },
                        { id: "val", header: "Value", accessor: (c) => <span className="text-[11px] font-mono font-bold text-[#100841]">{c.value}</span> },
                        { id: "link", header: "Linkage", accessor: (c) => <EnterpriseBadge variant={c.logicalOp === "AND" ? "info" : "warning"}>{c.logicalOp}</EnterpriseBadge> }
                      ]}
                      rowKey={(c) => c.id}
                      showSummaries={false}
                    />
                  </div>

<div className="p-4 bg-[#100841]/5 border border-[#100841]/10 rounded-[2px]">
                    <div className="flex items-center gap-2 mb-2">
                      <Calculator className="w-3.5 h-3.5 text-[#100841]" />
                      <p className="text-[9px] font-bold text-[#100841] uppercase tracking-widest">Evaluation Pseudocode</p>
                    </div>
                    <p className="text-[11px] font-mono text-[#4f525d] leading-relaxed">
                      IF {selectedTier.conditions.map((c, i) => (
                        <span key={c.id}>
                          {i > 0 && <span className="text-[#31d891] font-bold"> {c.logicalOp} </span>}
                          ({c.attribute} {c.operator} {c.value})
                        </span>
                      ))} THEN APPLY <span className="text-[#e65100] font-bold">{selectedTier.value}{selectedTier.feeType === "PERCENT" ? "%" : " MMK"}</span>
                    </p>
                  </div>
               </div>
            </EnterpriseCard>
          )}
        </TabsContent>

{/* TAB 2: UNIVERSAL RULES LIST */}
        <TabsContent value="conditions" className="mt-4 outline-none">
           <EnterpriseTable
              data={feeTiers.flatMap(ft => ft.conditions.map(c => ({ ...c, tierName: ft.name, tierStatus: ft.status })))}
              columns={[
                { id: "id", header: "Rule ID", accessor: (c) => <span className="text-[10px] font-mono text-[#4f525d]">{c.id}</span> },
                { id: "tier", header: "Associated Tier", accessor: (c) => <span className="text-[11px] font-bold text-[#100841]">{c.tierName}</span> },
                { id: "attr", header: "Attribute", accessor: (c) => <span className="text-[10px] font-bold text-[#4f525d] uppercase tracking-tight">{c.attribute.replace("_", " ")}</span> },
                { id: "logic", header: "Logic Statement", accessor: (c) => (
                  <div className="flex items-center gap-2">
                    <span className="text-[10px] text-[#4f525d] uppercase font-bold">{c.operator}</span>
                    <ArrowRight className="w-3 h-3 text-slate-300" />
                    <span className="text-[11px] font-mono font-bold text-[#100841]">{c.value}</span>
                  </div>
                )},
                { id: "status", header: "Rule State", accessor: (c) => <EnterpriseBadge variant={c.tierStatus === "ACTIVE" ? "success" : "neutral"}>{c.tierStatus}</EnterpriseBadge> }
              ]}
              rowKey={(c) => c.id}
              searchPlaceholder="Search rule logic or tier names..."
           />
        </TabsContent>

{/* TAB 3: SIMULATOR (DYNAMIC!) */}
        <TabsContent value="simulator" className="mt-4 outline-none">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
              {/* Left Panel: Inputs */}
              <div className="lg:col-span-5 space-y-4">
                <EnterpriseCard className="p-6 border-[#dfdfdf] bg-white space-y-5">
                  <div className="flex items-center gap-2 border-b border-[#efefff] pb-2">
                    <Calculator className="w-4 h-4 text-[#100841]" />
                    <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">Fee Calculation Simulator</h3>
                  </div>
                  
                  <div className="space-y-4">
                     <div className="space-y-1">
                       <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Transaction Drawdown Amount (MMK)</label>
                       <EnterpriseInput
                         type="number"
                         value={simAmount}
                         onChange={e => setSimAmount(Number(e.target.value))}
                         className="font-mono font-bold text-sm text-[#100841]"
                       />
                     </div>
                     <div className="space-y-1">
                       <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Arrears Late Period (Days)</label>
                       <EnterpriseInput
                         type="number"
                         value={simLateDays}
                         onChange={e => setSimLateDays(Number(e.target.value))}
                         className="font-mono font-bold text-sm text-[#100841]"
                       />
                     </div>
                     <div className="space-y-1">
                       <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Employee Tenure (Months)</label>
                       <EnterpriseInput
                         type="number"
                         value={simTenure}
                         onChange={e => setSimTenure(Number(e.target.value))}
                         className="font-mono font-bold text-sm text-[#100841]"
                       />
                     </div>
                     <div className="space-y-1">
                       <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest font-bold">Transaction Count Per Period (Circles)</label>
                       <EnterpriseInput
                         type="number"
                         value={simCountPerCircle}
                         onChange={e => setSimCountPerCircle(Number(e.target.value))}
                         className="font-mono font-bold text-sm text-[#100841]"
                       />
                     </div>
                     <div className="space-y-1">
                       <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest font-bold">Calendar Day of Request</label>
                       <EnterpriseInput
                         type="number"
                         value={simDay}
                         onChange={e => setSimDay(Number(e.target.value))}
                         className="font-mono font-bold text-sm text-[#100841]"
                         min={1}
                         max={31}
                       />
                     </div>
                  </div>
                </EnterpriseCard>
              </div>

{/* Right Panel: Output Tracing & Summary */}
              <div className="lg:col-span-7 space-y-4">
                {/* Mathematical Summation Banner */}
                <div className="p-5 bg-white border border-[#dfdfdf] rounded-[3px] shadow-sm space-y-3.5">
                  <div className="flex justify-between items-center border-b border-[#efefff] pb-2">
                    <span className="text-[10px] font-bold text-[#100841] uppercase tracking-wider">Dynamic Trace Summation</span>
                    <span className="text-[9px] text-[#4f525d] font-mono">Precision Calculated</span>
                  </div>

<div className="space-y-2">
                    {/* Disbursement Match Row */}
                    <div className="flex justify-between items-center text-[11px]">
                      <span className="text-[#4f525d] flex items-center gap-1.5">
                        <span className="w-1.5 h-1.5 rounded-full bg-[#31d891]" />
                        Disbursement Bracket:
                        <strong className="text-slate-700">
                          {simulationEvaluation.disbursementRule?.id || "None"}
                        </strong>
                      </span>
                      <span className="font-mono text-slate-700">
                        {simulationEvaluation.disbursementRule ? (
                          <>
                            {formatMMK(simulationEvaluation.disbursementFee)}
                            <span className="text-[9px] text-slate-400 ml-1">({simulationEvaluation.disbursementRule.value}%)</span>
                          </>
                        ) : "0 MMK"}
                      </span>
                    </div>

{/* Discount Match Row */}
                    {simulationEvaluation.discountFee > 0 && (
                      <div className="flex justify-between items-center text-[11px]">
                        <span className="text-[#4f525d] flex items-center gap-1.5">
                          <span className="w-1.5 h-1.5 rounded-full bg-[#2e7d32]" />
                          Discount Adjustment:
                          <strong className="text-emerald-700 font-semibold">
                            {simulationEvaluation.discountRule?.id}
                          </strong>
                        </span>
                        <span className="font-mono text-[#2e7d32] font-semibold">
                          -{formatMMK(simulationEvaluation.discountFee)}
                        </span>
                      </div>
                    )}

{/* Penalty Match Row */}
                    {simulationEvaluation.lateFee > 0 && (
                      <div className="flex justify-between items-center text-[11px]">
                        <span className="text-[#4f525d] flex items-center gap-1.5">
                          <span className="w-1.5 h-1.5 rounded-full bg-[#c62828]" />
                          Late Penalties Match:
                          <strong className="text-[#c62828]">
                            {simulationEvaluation.lateRule?.id}
                          </strong>
                        </span>
                        <span className="font-mono text-[#c62828] font-bold">
                          +{formatMMK(simulationEvaluation.lateFee)}
                        </span>
                      </div>
                    )}

{/* Flat Service Fee Match Row */}
                    {simulationEvaluation.flatFee > 0 && (
                      <div className="flex justify-between items-center text-[11px]">
                        <span className="text-[#4f525d] flex items-center gap-1.5">
                          <span className="w-1.5 h-1.5 rounded-full bg-amber-500" />
                          Flat Service Charge (Day 1-7):
                        </span>
                        <span className="font-mono text-amber-700 font-bold">
                          +{formatMMK(simulationEvaluation.flatFee)}
                        </span>
                      </div>
                    )}

{/* Final Net Fee display */}
                    <div className="flex justify-between items-center">
                      <div>
                        <span className="text-[#100841] font-extrabold uppercase text-[12px] tracking-wider block">Net Computed EWA Fee:</span>
                        <span className="text-[9px] text-[#4f525d] italic block">Inclusive of matched discounts & penalty additions.</span>
                      </div>
                      <span className="font-mono text-2xl font-extrabold text-[#e65100]">
                        {formatMMK(simulationEvaluation.netFee)}
                      </span>
                    </div>
                  </div>
                </div>

{/* Live Console Tracing */}
                <EnterpriseCard className="p-5 bg-white border border-[#dfdfdf]">
                  <div className="flex items-center gap-1.5 mb-3 border-b border-[#efefff] pb-1.5">
                    <CheckCircle className="w-4 h-4 text-emerald-600" />
                    <h4 className="text-[10px] font-bold text-[#100841] uppercase tracking-wider">Policy Calculation Trace Outputs</h4>
                  </div>
                  <div className="bg-slate-900 text-slate-200 p-4 rounded-[2px] font-mono text-[10.5px] space-y-1.5 max-h-[220px] overflow-y-auto leading-normal">
                    {simulationEvaluation.logs.map((log, idx) => {
                      let color = "text-slate-300";
                      if (log.startsWith("✓")) color = "text-[#81c784]";
                      if (log.startsWith("- Skip")) color = "text-slate-500";
                      if (log.startsWith("[Ledger Base")) color = "text-[#4fc3f7] font-semibold";
                      if (log.startsWith("[Discount")) color = "text-[#a5d6a7] font-semibold";
                      if (log.startsWith("[Overdue")) color = "text-[#ef9a9a] font-semibold";
                      if (log.startsWith("[SUMMATION]")) color = "text-[#ffb74d] font-bold";
                      return (
                        <p key={idx} className={color}>
                          {log}
                        </p>
                      );
                    })}
                  </div>
                </EnterpriseCard>
              </div>
           </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/form-creator/FormCreatorPage.tsx"
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { Plus, Eye, Copy, Trash2, LayoutTemplate, FileText, Settings, ShieldCheck, Database } from "lucide-react";

const formTemplates = [
  { id: "FT-001", name: "Standard EWA Request", description: "Basic employee EWA request form with amount, reason, and payout method", status: "Active", fields: 6, version: "2.1" },
  { id: "FT-002", name: "Advanced EWA Request", description: "Detailed request with document upload, multi-level approval, and custom fields", status: "Active", fields: 12, version: "1.0" },
  { id: "FT-003", name: "Quick Advance", description: "Simplified form for trusted employees with auto-approval", status: "Draft", fields: 4, version: "1.0" },
];

const formFields = [
  { id: "F-01", name: "Request Amount", type: "Number", required: true, validation: "Min: 10,000 / Max: EWA Cap", order: 1 },
  { id: "F-02", name: "Reason for Advance", type: "Text", required: true, validation: "Min 10 chars", order: 2 },
  { id: "F-03", name: "Payout Method", type: "Dropdown", required: true, options: "Bank Transfer, Agent Cash-Out, E-Wallet", order: 3 },
  { id: "F-04", name: "Document Upload", type: "File", required: false, validation: "PDF, JPG (max 5MB)", order: 4 },
  { id: "F-05", name: "Emergency Flag", type: "Checkbox", required: false, validation: "—", order: 5 },
  { id: "F-06", name: "Approver Notes", type: "Textarea", required: false, validation: "Optional", order: 6 },
];

export function FormCreatorPage() {
  const templateColumns: ColumnDef<typeof formTemplates[0]>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (ft) => <span className="font-mono font-bold text-[#100841]">{ft.id}</span>,
      searchString: (ft) => ft.id
    },
    {
      id: "name",
      header: "Template Definition",
      accessor: (ft) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{ft.name}</p>
          <p className="text-[10px] text-[#4f525d] truncate max-w-[300px]">{ft.description}</p>
        </div>
      ),
      searchString: (ft) => `${ft.name} ${ft.description}`
    },
    {
      id: "fields",
      header: "Depth",
      isNumeric: true,
      align: "center",
      accessor: (ft) => <span className="text-[11px] font-bold text-[#100841] bg-[#ffffff] px-2 rounded-[1px]">{ft.fields} Fields</span>
    },
    {
      id: "version",
      header: "Revision",
      accessor: (ft) => <span className="text-[10px] font-mono font-bold text-slate-400">v{ft.version}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (ft) => <EnterpriseBadge variant={ft.status === "Active" ? "success" : "neutral"}>{ft.status}</EnterpriseBadge>
    }
  ];

const fieldColumns: ColumnDef<typeof formFields[0]>[] = [
    {
      id: "order",
      header: "#",
      accessor: (f) => <span className="text-[10px] font-mono text-slate-400">{f.order}</span>
    },
    {
      id: "id",
      header: "Field ID",
      accessor: (f) => <span className="text-[10px] font-mono font-bold text-[#100841]">{f.id}</span>
    },
    {
      id: "name",
      header: "Label",
      accessor: (f) => <span className="text-[11px] font-bold text-[#100841]">{f.name}</span>
    },
    {
      id: "type",
      header: "Schema Type",
      accessor: (f) => <EnterpriseBadge variant="info">{f.type}</EnterpriseBadge>
    },
    {
      id: "required",
      header: "Requirement",
      accessor: (f) => <EnterpriseBadge variant={f.required ? "error" : "neutral"}>{f.required ? "Required" : "Optional"}</EnterpriseBadge>
    },
    {
      id: "validation",
      header: "Logic Rules",
      accessor: (f) => <span className="text-[10px] text-[#4f525d] font-mono">{f.validation}</span>
    }
  ];

const templateActions: TableAction<typeof formTemplates[0]>[] = [
    {
      label: "Preview Form",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (ft) => console.log("Preview", ft.id)
    },
    {
      label: "Duplicate",
      icon: <Copy className="w-3.5 h-3.5" />,
      onClick: (ft) => console.log("Clone", ft.id)
    },
    {
      label: "Archive",
      icon: <Trash2 className="w-3.5 h-3.5" />,
      onClick: (ft) => console.log("Delete", ft.id)
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <LayoutTemplate className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Enterprise Form Builder</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Dynamic JSON Schema generation for KYC and EWA requests</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841]">
            <Plus className="w-3.5 h-3.5" /> Create Template
          </EnterpriseButton>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Active Templates"
          value={formTemplates.length}
          accentColor="info"
          icon={<LayoutTemplate className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
        <EnterpriseKpiCard
          label="Total Fields"
          value={formTemplates.reduce((sum, t) => sum + t.fields, 0)}
          accentColor="neutral"
          icon={<FileText className="w-3.5 h-3.5 text-[#4f525d]" />}
        />
        <EnterpriseKpiCard
          label="Schema Integrity"
          value="100%"
          accentColor="success"
          icon={<ShieldCheck className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="API Endpoints"
          value="12"
          accentColor="info"
          icon={<Database className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
      </div>

<div className="space-y-6">
        <section className="space-y-3">
          <div className="flex items-center gap-2">
            <Settings className="w-4 h-4 text-[#100841]" />
            <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Template Registry</h3>
          </div>
          <EnterpriseTable
            data={formTemplates}
            columns={templateColumns}
            rowKey={(ft) => ft.id}
            actions={templateActions}
            searchPlaceholder="Search templates by name or ID..."
          />
        </section>

<section className="space-y-3">
          <div className="flex items-center gap-2">
            <FileText className="w-4 h-4 text-[#100841]" />
            <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Active Field Configuration — {formTemplates[0].name}</h3>
          </div>
          <EnterpriseTable
            data={formFields}
            columns={fieldColumns}
            rowKey={(f) => f.id}
            searchPlaceholder="Search fields or rules..."
          />
        </section>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/limitations/LimitationsPage.tsx"
/**
 * LimitationsPage — Transaction & Amount Limits
 * Per day, per week, per month, per cycle, per txn, per count per cycle
 * Design: Enterprise Fintech — Deep Navy (#100841) + Teal (#31d891)
 */
import { useState } from "react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Shield, Plus, Eye, ArrowRight, Clock, AlertTriangle, CheckCircle2, Settings } from "lucide-react";
import { cn } from "@/lib/utils";

function formatMMK(amount: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "MMK", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount);
}

interface LimitRule {
  id: string;
  name: string;
  code: string;
  scope: LimitScope;
  targetId: string;
  targetName: string;
  period: LimitPeriod;
  limitType: "AMOUNT" | "COUNT";
  value: number;
  currency: string;
  status: "ACTIVE" | "INACTIVE" | "DRAFT";
  overridden: boolean;
}

const limitRules: LimitRule[] = [
  { id: "LIM-001", name: "Per Transaction Max", code: "TXN-MAX", scope: "GLOBAL", targetId: "ALL", targetName: "All Companies", period: "PER_TXN", limitType: "AMOUNT", value: 200000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-002", name: "Per Transaction Min", code: "TXN-MIN", scope: "GLOBAL", targetId: "ALL", targetName: "All Companies", period: "PER_TXN", limitType: "AMOUNT", value: 5000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-003", name: "Daily Disbursement Cap", code: "DAILY-CAP", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_DAY", limitType: "AMOUNT", value: 5000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-004", name: "Daily Transaction Count", code: "DAILY-COUNT", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_DAY", limitType: "COUNT", value: 50, currency: "TXN", status: "ACTIVE", overridden: false },
  { id: "LIM-005", name: "Weekly Disbursement Cap", code: "WEEKLY-CAP", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_WEEK", limitType: "AMOUNT", value: 25000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-006", name: "Monthly Budget Cap", code: "MONTHLY-CAP", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_MONTH", limitType: "AMOUNT", value: 100000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-007", name: "Per Cycle Max", code: "CYCLE-MAX", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_CYCLE", limitType: "AMOUNT", value: 120000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-008", name: "Per Employee Daily Cap", code: "EMP-DAILY-CAP", scope: "EMPLOYEE", targetId: "EMP-001", targetName: "Kyaw Kyaw (ENG)", period: "PER_DAY", limitType: "AMOUNT", value: 200000, currency: "MMK", status: "ACTIVE", overridden: true },
  { id: "LIM-009", name: "Per Employee Monthly Cap", code: "EMP-MONTH-CAP", scope: "EMPLOYEE", targetId: "EMP-001", targetName: "Kyaw Kyaw (ENG)", period: "PER_MONTH", limitType: "AMOUNT", value: 500000, currency: "MMK", status: "ACTIVE", overridden: true },
  { id: "LIM-010", name: "Count Per Cycle Limit", code: "CYCLE-COUNT", scope: "EMPLOYEE", targetId: "EMP-001", targetName: "Kyaw Kyaw (ENG)", period: "PER_COUNT_CYCLE", limitType: "COUNT", value: 15, currency: "TXN", status: "ACTIVE", overridden: false },
  { id: "LIM-011", name: "Group Daily Cap", code: "GRP-DAILY", scope: "GROUP", targetId: "EG-002", targetName: "Engineering Staff", period: "PER_DAY", limitType: "AMOUNT", value: 3000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-012", name: "Group Monthly Cap", code: "GRP-MONTH", scope: "GROUP", targetId: "EG-002", targetName: "Engineering Staff", period: "PER_MONTH", limitType: "AMOUNT", value: 12000000, currency: "MMK", status: "ACTIVE", overridden: false },
  { id: "LIM-013", name: "Per Employee Weekly Count", code: "EMP-WEEK-COUNT", scope: "EMPLOYEE", targetId: "ALL", targetName: "All Employees", period: "PER_WEEK", limitType: "COUNT", value: 5, currency: "TXN", status: "ACTIVE", overridden: false },
  { id: "LIM-014", name: "Weekly Transaction Count", code: "WEEKLY-COUNT", scope: "COMPANY", targetId: "CMP-001", targetName: "Tech Solutions Ltd", period: "PER_WEEK", limitType: "COUNT", value: 200, currency: "TXN", status: "ACTIVE", overridden: false },
  { id: "LIM-015", name: "Company Trial Limit", code: "TRIAL-LIMIT", scope: "COMPANY", targetId: "CMP-005", targetName: "Startup Inc", period: "PER_TXN", limitType: "AMOUNT", value: 50000, currency: "MMK", status: "DRAFT", overridden: false },
];

export function LimitationsPage() {
  const [selectedRule, setSelectedRule] = useState<LimitRule | null>(null);

const columns: ColumnDef<LimitRule>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (l) => <span className="font-mono font-bold text-[#100841]">{l.id}</span>,
      searchString: (l) => l.id
    },
    {
      id: "name",
      header: "Rule Name",
      accessor: (l) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{l.name}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{l.code}</p>
        </div>
      ),
      searchString: (l) => `${l.name} ${l.code}`
    },
    {
      id: "scope",
      header: "Scope",
      accessor: (l) => {
        const variant = l.scope === "GLOBAL" ? "info" : l.scope === "COMPANY" ? "warning" : l.scope === "GROUP" ? "warning" : "success";
        return <EnterpriseBadge variant={variant} className="uppercase">{l.scope}</EnterpriseBadge>;
      }
    },
    {
      id: "target",
      header: "Target Entity",
      accessor: (l) => <span className="text-[11px] text-[#4f525d] font-medium">{l.targetName}</span>
    },
    {
      id: "period",
      header: "Period",
      accessor: (l) => <EnterpriseBadge variant="neutral" className="bg-[#efefff] text-[#100841]">{l.period.replace("PER_", "")}</EnterpriseBadge>
    },
    {
      id: "value",
      header: "Limit Value",
      isNumeric: true,
      align: "right",
      accessor: (l) => l.limitType === "AMOUNT" ? formatMMK(l.value) : `${l.value} ${l.currency}`,
      cellClassName: (l) => "text-[#e65100] font-mono font-bold"
    },
    {
      id: "status",
      header: "Status",
      accessor: (l) => <EnterpriseBadge variant={l.status === "ACTIVE" ? "success" : "neutral"}>{l.status}</EnterpriseBadge>
    }
  ];

const actions: TableAction<LimitRule>[] = [
    {
      label: "View Configuration",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (l) => setSelectedRule(l)
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Shield className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Limitation Control Center</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Hierarchical risk limits and transaction caps management</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841]">
            <Plus className="w-3.5 h-3.5" /> Define New Limit
          </EnterpriseButton>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <EnterpriseKpiCard
          label="Active Rules"
          value={limitRules.filter(r => r.status === "ACTIVE").length}
          accentColor="success"
          icon={<CheckCircle2 className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Global Caps"
          value={limitRules.filter(r => r.scope === "GLOBAL").length}
          accentColor="info"
          icon={<Shield className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
        <EnterpriseKpiCard
          label="Overrides"
          value={limitRules.filter(r => r.overridden).length}
          accentColor="amber"
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#e65100]" />}
        />
        <EnterpriseKpiCard
          label="Utilization Warnings"
          value={3}
          accentColor="error"
          icon={<Clock className="w-3.5 h-3.5 text-[#c62828]" />}
        />
      </div>

<Tabs defaultValue="registry" className="w-full">
        <TabsList>
          <TabsTrigger value="registry">Rule Registry</TabsTrigger>
          <TabsTrigger value="matrix">Limit Matrix</TabsTrigger>
          <TabsTrigger value="utilization">Real-time Utilization</TabsTrigger>
        </TabsList>

<TabsContent value="registry" className="mt-4 outline-none">
          <EnterpriseTable
            data={limitRules}
            columns={columns}
            rowKey={(l) => l.id}
            actions={actions}
            searchPlaceholder="Filter limit rules..."
          />
          
          {selectedRule && (
            <EnterpriseCard className="mt-6 p-6 border-[#dfdfdf] bg-[#efefff]">
               <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center gap-2">
                   <Settings className="w-4 h-4 text-[#100841]" />
                   <h3 className="text-[13px] font-bold text-[#100841] uppercase tracking-wider">{selectedRule.name} Details</h3>
                 </div>
                 <EnterpriseButton variant="secondary" className="h-7 text-[10px]" onClick={() => setSelectedRule(null)}>Close</EnterpriseButton>
               </div>
               
               <div className="grid grid-cols-4 gap-6">
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Scope / Level</p>
                    <EnterpriseBadge variant="info">{selectedRule.scope}</EnterpriseBadge>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Periodicity</p>
                    <p className="text-[12px] font-bold text-[#100841] uppercase">{selectedRule.period.replace("PER_", "")}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Threshold Value</p>
                    <p className="text-[14px] font-mono font-bold text-[#e65100]">{selectedRule.limitType === "AMOUNT" ? formatMMK(selectedRule.value) : `${selectedRule.value} ${selectedRule.currency}`}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">Target Entity</p>
                    <p className="text-[12px] font-bold text-[#100841]">{selectedRule.targetName}</p>
                  </div>
               </div>

<div className="mt-8 p-4 bg-white border border-[#dfdfdf] rounded-[2px]">
                  <p className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest mb-4">Inheritance Hierarchy</p>
                  <div className="flex items-center gap-4">
                    <div className="flex flex-col items-center gap-1">
                      <EnterpriseBadge variant="neutral" className="opacity-50">Global</EnterpriseBadge>
                      <ArrowRight className="w-3 h-3 text-[#dfdfdf]" />
                    </div>
                    <div className="flex flex-col items-center gap-1">
                      <EnterpriseBadge variant="neutral" className={selectedRule.scope === "COMPANY" ? "bg-[#100841] text-white" : "opacity-50"}>Company</EnterpriseBadge>
                      <ArrowRight className="w-3 h-3 text-[#dfdfdf]" />
                    </div>
                    <div className="flex flex-col items-center gap-1">
                      <EnterpriseBadge variant="neutral" className={selectedRule.scope === "GROUP" ? "bg-[#100841] text-white" : "opacity-50"}>Group</EnterpriseBadge>
                      <ArrowRight className="w-3 h-3 text-[#dfdfdf]" />
                    </div>
                    <div className="flex flex-col items-center gap-1">
                      <EnterpriseBadge variant="neutral" className={selectedRule.scope === "EMPLOYEE" ? "bg-[#100841] text-white" : "opacity-50"}>Employee</EnterpriseBadge>
                    </div>
                  </div>
                  <p className="text-[10px] text-[#4f525d] mt-4 leading-relaxed font-medium">
                    Specific overrides at the <span className="text-[#100841] font-bold">EMPLOYEE</span> level take precedence over 
                    Group, Company, and Global configurations. The effective limit is calculated by selecting the 
                    most specific applicable rule in the chain.
                  </p>
               </div>
            </EnterpriseCard>
          )}
        </TabsContent>

<TabsContent value="matrix" className="mt-4 outline-none">
          <EnterpriseCard className="border-[#dfdfdf] overflow-hidden">
             <div className="p-4 bg-[#efefff] border-b border-[#dfdfdf]">
                <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Configuration Matrix</h3>
             </div>
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
                   <tr className="bg-[#efefff]">
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-r border-[#dfdfdf]">Scope</th>
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-[#dfdfdf] text-center">Per TXN</th>
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-[#dfdfdf] text-center">Per Day</th>
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-[#dfdfdf] text-center">Per Week</th>
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-[#dfdfdf] text-center">Per Month</th>
                     <th className="p-3 text-[10px] font-bold text-[#100841] uppercase tracking-wider border-b border-[#dfdfdf] text-center">Per Cycle</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr className="hover:bg-slate-50 transition-colors">
                     <td className="p-3 border-r border-b border-[#dfdfdf]"><EnterpriseBadge variant="info">GLOBAL</EnterpriseBadge></td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px]">5K - 200K</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                   </tr>
                   <tr className="hover:bg-slate-50 transition-colors">
                     <td className="p-3 border-r border-b border-[#dfdfdf]"><EnterpriseBadge variant="warning">COMPANY</EnterpriseBadge></td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">5M MMK</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">25M MMK</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">100M MMK</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">120M MMK</td>
                   </tr>
                   <tr className="hover:bg-slate-50 transition-colors">
                     <td className="p-3 border-r border-b border-[#dfdfdf]"><EnterpriseBadge variant="warning">GROUP</EnterpriseBadge></td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">3M MMK</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] font-mono text-[11px] text-[#e65100]">12M MMK</td>
                     <td className="p-3 text-center border-b border-[#dfdfdf] text-slate-300">—</td>
                   </tr>
                   <tr className="hover:bg-slate-50 transition-colors">
                     <td className="p-3 border-r border-[#dfdfdf]"><EnterpriseBadge variant="success">EMPLOYEE</EnterpriseBadge></td>
                     <td className="p-3 text-center font-mono text-[11px] text-[#e65100]">MAX 200K</td>
                     <td className="p-3 text-center font-mono text-[11px] text-[#e65100]">200K MMK</td>
                     <td className="p-3 text-center text-slate-300">—</td>
                     <td className="p-3 text-center font-mono text-[11px] text-[#e65100]">500K MMK</td>
                     <td className="p-3 text-center font-mono text-[11px] text-[#e65100]">15 TXN</td>
                   </tr>
                 </tbody>
               </table>
             </div>
          </EnterpriseCard>
        </TabsContent>

<TabsContent value="utilization" className="mt-4 outline-none">
          <EnterpriseTable
            data={[
              { scope: "COMPANY", target: "Tech Solutions Ltd", period: "Per Day", used: 3200000, limit: 5000000 },
              { scope: "COMPANY", target: "Tech Solutions Ltd", period: "Per Week", used: 18000000, limit: 25000000 },
              { scope: "COMPANY", target: "Tech Solutions Ltd", period: "Per Month", used: 65000000, limit: 100000000 },
              { scope: "GROUP", target: "Engineering Staff", period: "Per Day", used: 2100000, limit: 3000000 },
              { scope: "GROUP", target: "Engineering Staff", period: "Per Month", used: 8500000, limit: 12000000 },
              { scope: "EMPLOYEE", target: "Kyaw Kyaw", period: "Per Day", used: 150000, limit: 200000 },
              { scope: "EMPLOYEE", target: "Kyaw Kyaw", period: "Per Month", used: 320000, limit: 500000 },
              { scope: "EMPLOYEE", target: "Kyaw Kyaw", period: "Per Count/Cycle", used: 8, limit: 15 },
            ]}
            columns={[
              { id: "scope", header: "Scope", accessor: (u) => <EnterpriseBadge variant={u.scope === "COMPANY" ? "warning" : u.scope === "GROUP" ? "warning" : "success"}>{u.scope}</EnterpriseBadge> },
              { id: "target", header: "Target", accessor: (u) => <span className="text-[11px] font-bold text-[#100841]">{u.target}</span> },
              { id: "period", header: "Period", accessor: (u) => <span className="text-[10px] uppercase font-bold text-[#4f525d]">{u.period}</span> },
              { id: "used", header: "Used", isNumeric: true, align: "right", accessor: (u) => formatMMK(u.used) },
              { id: "limit", header: "Limit", isNumeric: true, align: "right", accessor: (u) => formatMMK(u.limit) },
              { id: "pct", header: "Usage %", accessor: (u) => {
                const pct = Math.round((u.used / u.limit) * 100);
                return (
                  <div className="flex flex-col items-center gap-1">
                    <span className={cn("text-[11px] font-mono font-bold", pct > 80 ? "text-[#c62828]" : "text-[#2e7d32]")}>{pct}%</span>
                    <div className="w-16 h-1 bg-[#dfdfdf] rounded-full overflow-hidden">
                      <div className={cn("h-full", pct > 80 ? "bg-[#c62828]" : "bg-[#2e7d32]")} style={{ width: `${pct}%` }} />
                    </div>
                  </div>
                );
              }},
              { id: "status", header: "Health", accessor: (u) => {
                const pct = (u.used / u.limit) * 100;
                return <EnterpriseBadge variant={pct > 80 ? "error" : "success"}>{pct > 80 ? "CRITICAL" : "NORMAL"}</EnterpriseBadge>;
              }}
            ]}
            rowKey={(u) => `${u.target}-${u.scope}-${u.period}`}
            searchPlaceholder="Filter utilization data..."
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/notifications/NotificationsPage.tsx"
/**
 * NotificationsPage — Notification Center
 * Design: Neobrutalist Fintech — Role-based notifications with channels and read status
 */
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
} from "@/components/EnterpriseComponents";
import { Mail, Bell, MessageSquare, Check, BellRing, Settings, Filter } from "lucide-react";

const notifications = [
  { id: "N-001", type: "Settlement Approved", message: "SET-2026-07-001 settlement approved by Checker", channel: "Email", recipients: "Finance, Operations", read: true, timestamp: "10:30 AM" },
  { id: "N-002", type: "Employee Verified", message: "Htet Oo Kyaw — Employment verification completed successfully", channel: "SMS", recipients: "HR, Employee", read: false, timestamp: "09:45 AM" },
  { id: "N-003", type: "Budget Alert", message: "Skyline Trading budget utilization reached 78% threshold", channel: "Email", recipients: "Finance, Risk", read: false, timestamp: "09:00 AM" },
  { id: "N-004", type: "Repayment Due", message: "REP-2026-07-003 payment due within 48 hours", channel: "SMS", recipients: "Operations, Company", read: true, timestamp: "08:30 AM" },
  { id: "N-005", type: "Risk Escalation", message: "Golden Harvest Foods credit score dropped below 60 threshold", channel: "Email", recipients: "Risk, Finance", read: false, timestamp: "08:00 AM" },
  { id: "N-006", type: "Transaction Completed", message: "TXN-2026-07-005 disbursed successfully to Aung Thu", channel: "SMS", recipients: "Employee, Operations", read: true, timestamp: "07:30 AM" },
  { id: "N-007", type: "Onboarding Complete", message: "Golden Harvest Foods onboarding completed — company now active", channel: "Email", recipients: "Sales, Operations", read: true, timestamp: "Yesterday" },
  { id: "N-008", type: "System Alert", message: "Late fee calculation engine updated — new slab rates effective", channel: "Email", recipients: "All Roles", read: false, timestamp: "Yesterday" },
];

export function NotificationsPage() {
  const unreadCount = notifications.filter(n => !n.read).length;

const columns: ColumnDef<typeof notifications[0]>[] = [
    {
      id: "type",
      header: "Alert Type",
      accessor: (n) => (
        <div className="flex items-center gap-2">
          {!n.read && <span className="w-2 h-2 rounded-full bg-[#31d891]" />}
          <span className="text-[12px] font-bold text-[#100841] uppercase tracking-tight">{n.type}</span>
        </div>
      ),
      searchString: (n) => n.type
    },
    {
      id: "message",
      header: "Payload / Message",
      accessor: (n) => <p className="text-[11px] text-[#4f525d] font-medium leading-relaxed max-w-[400px]">{n.message}</p>,
      searchString: (n) => n.message
    },
    {
      id: "channel",
      header: "Channel",
      accessor: (n) => {
        const icons: Record<string, any> = { "Email": Mail, "SMS": MessageSquare, "Push": Bell };
        const Icon = icons[n.channel] || Mail;
        return (
          <div className="flex items-center gap-1.5 text-[#100841] bg-[#efefff] px-2 py-0.5 rounded-[2px] border border-[#dfdfdf]">
            <Icon className="w-3 h-3" />
            <span className="text-[10px] font-bold uppercase tracking-wider">{n.channel}</span>
          </div>
        );
      }
    },
    {
      id: "recipients",
      header: "Target Groups",
      accessor: (n) => <span className="text-[10px] text-[#4f525d] font-mono font-bold uppercase">{n.recipients}</span>
    },
    {
      id: "timestamp",
      header: "Transmission",
      accessor: (n) => <span className="text-[10px] text-[#4f525d] font-mono">{n.timestamp}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (n) => <EnterpriseBadge variant={n.read ? "neutral" : "info"}>{n.read ? "READ" : "UNREAD"}</EnterpriseBadge>
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <BellRing className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Enterprise Notification Service</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Automated multi-channel alerts and system event broadcasts</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Check className="w-3.5 h-3.5" /> Mark All as Read
          </EnterpriseButton>
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Settings className="w-3.5 h-3.5" /> Channels
          </EnterpriseButton>
        </div>
      </div>

<EnterpriseCard className="border-[#dfdfdf] shadow-sm">
        <div className="p-4 bg-[#efefff] border-b border-[#dfdfdf] flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Filter className="w-4 h-4 text-[#100841]" />
            <span className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">Notification Audit Log</span>
          </div>
        </div>
        <EnterpriseTable
          data={notifications}
          columns={columns}
          rowKey={(n) => n.id}
          searchPlaceholder="Search audit stream..."
        />
      </EnterpriseCard>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/onboarding/OnboardingPage.old.tsx"
/**
 * OnboardingPage — Employee Onboarding & Import Wizard
 * SAP Fiori Pattern: 3-tab Object Page (Tasks / Requests / History) + 6-step Import Wizard
 * Design: Enterprise Fintech — Navy (#100841) + Teal (#31d891) | Sharp corners | Structured layout
 */
import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  employeeImportTasks, importBatches, onboardingPipeline, employees, companies,
  formatMMK, type EmployeeImportTask, type ImportBatch, type ImportRow,
} from "@/data/mockData";
import {
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  TableAction,
  EnterpriseCard
} from "@/components/EnterpriseComponents";
import {
  Search, Upload, Plus, Eye, FileDown, Download, CheckCircle2, Clock, XCircle,
  AlertCircle, ArrowRight, ArrowLeft, UserCheck, Users, Building2,
  FileText, CheckSquare, X, Trash2, MapPin, ChevronDown, ChevronRight,
  ArrowRightLeft, FileSpreadsheet, RotateCcw, ShieldCheck, ShieldX
} from "lucide-react";

/* ===== STATUS BADGE ===== */
function StatusBadge({ status }: { status: string }) {
  const map: Record<string, { bg: string; text: string; border: string }> = {
    "Pending": { bg: "bg-[#fff8e1]", text: "text-[#e65100]", border: "border-[#ffcc80]" },
    "Approved": { bg: "bg-[#e8f5e9]", text: "text-[#1b5e20]", border: "border-[#a5d6a7]" },
    "Rejected": { bg: "bg-[#fce4ec]", text: "text-[#b71c1c]", border: "border-[#ef9a9a]" },
    "Checking": { bg: "bg-[#e3f2fd]", text: "text-[#0d47a1]", border: "border-[#90caf9]" },
    "Maker_Submitted": { bg: "bg-[#fff3e0]", text: "text-[#e65100]", border: "border-[#ffcc80]" },
    "Column_Mapping": { bg: "bg-[#e3f2fd]", text: "text-[#0d47a1]", border: "border-[#90caf9]" },
    "Completed": { bg: "bg-[#e8f5e9]", text: "text-[#1b5e20]", border: "border-[#a5d6a7]" },
    "Checker_Rejected": { bg: "bg-[#fce4ec]", text: "text-[#b71c1c]", border: "border-[#ef9a9a]" },
    "Active": { bg: "bg-[#e8f5e9]", text: "text-[#1b5e20]", border: "border-[#a5d6a7]" },
    "KYC_REVIEW": { bg: "bg-[#e3f2fd]", text: "text-[#0d47a1]", border: "border-[#90caf9]" },
    "Configuration": { bg: "bg-[#fff8e1]", text: "text-[#e65100]", border: "border-[#ffcc80]" },
    "Integration": { bg: "bg-[#fff8e1]", text: "text-[#e65100]", border: "border-[#ffcc80]" },
    "SUBMITTED": { bg: "bg-[#fff8e1]", text: "text-[#e65100]", border: "border-[#ffcc80]" },
  };
  const c = map[status] || { bg: "bg-[#efefff]", text: "text-[#616161]", border: "border-[#c4c9ce]" };
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-[2px] text-[10px] font-bold uppercase tracking-wider ${c.bg} ${c.text} border ${c.border}`}>
      {status.replace("_", " ")}
    </span>
  );
}

/* ===== CATEGORY BADGE ===== */
function CategoryBadge({ category }: { category: string }) {
  const map: Record<string, { bg: string; text: string; border: string }> = {
    new: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200" },
    modified: { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200" },
    missing: { bg: "bg-red-50", text: "text-red-700", border: "border-red-200" },
    unchanged: { bg: "bg-slate-50", text: "text-slate-500", border: "border-slate-200" },
  };
  const c = map[category] || map.unchanged;
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-[2px] text-[10px] font-bold uppercase tracking-wider ${c.bg} ${c.text} border ${c.border}`}>
      {category.toUpperCase()}
    </span>
  );
}

/* ===== WIZARD STEP INDICATOR ===== */
function WizardStepper({ steps, current }: { steps: string[]; current: number }) {
  return (
    <div className="flex items-center gap-0 mb-6">
      {steps.map((step, i) => (
        <div key={step} className="flex items-center">
          <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-[2px] text-[10px] font-bold uppercase tracking-wider ${
            i < current ? "bg-emerald-500 text-white" :
            i === current ? "bg-[#31d891] text-white" :
            "bg-slate-100 text-slate-400"
          }`}>
            <span className="font-mono">{i + 1}</span>
            <span className="hidden sm:inline">{step}</span>
          </div>
          {i < steps.length - 1 && (
            <div className={`w-6 h-0.5 ${i < current ? "bg-emerald-500" : "bg-slate-200"}`} />
          )}
        </div>
      ))}
    </div>
  );
}

/* ===== SAMPLE IMPORT ROWS ===== */
const sampleImportRows: ImportRow[] = [
  { id: 1, category: "new", validation: "correct", data: { employee_code: "GH-004", name: "Aung Aung", phone: "09-771234567", salary: "450000", department: "Sales", branch: "Head Office" }, errors: [], warnings: [] },
  { id: 2, category: "new", validation: "correct", data: { employee_code: "GH-005", name: "Thiri Thuriya", phone: "09-971234567", salary: "500000", department: "Operations", branch: "Bago Branch" }, errors: [], warnings: [] },
  { id: 3, category: "new", validation: "incorrect", data: { employee_code: "GH-006", name: "", phone: "09-871234567", salary: "380000", department: "HR", branch: "Head Office" }, errors: ["Name is required"], warnings: [] },
  { id: 4, category: "modified", validation: "correct", data: { employee_code: "GH-001", name: "Thant Zin (Updated)", phone: "09-771234567", salary: "500000", department: "Sales", branch: "Head Office" }, errors: [], warnings: ["Salary changed from 450,000 to 500,000"] },
  { id: 5, category: "new", validation: "incorrect", data: { employee_code: "GH-007", name: "Mya Mya", phone: "09-671234567", salary: "0", department: "", branch: "" }, errors: ["Salary must be > 0", "Department is required"], warnings: [] },
  { id: 6, category: "missing", validation: "warning", data: { employee_code: "GH-003", name: "Zaw Win Htet", phone: "09-571234567", salary: "400000", department: "Operations", branch: "Bago Branch" }, errors: [], warnings: ["Employee in DB but not in file — action required"] },
  { id: 7, category: "unchanged", validation: "correct", data: { employee_code: "GH-002", name: "Myint Myint Aye", phone: "09-471234567", salary: "500000", department: "Operations", branch: "Head Office" }, errors: [], warnings: [] },
];

const SAMPLE_COLUMNS = [
  { fileColumn: "Employee ID", systemField: "employee_code", required: true },
  { fileColumn: "Full Name", systemField: "name", required: true },
  { fileColumn: "Phone", systemField: "phone", required: true },
  { fileColumn: "Salary (MMK)", systemField: "salary", required: true },
  { fileColumn: "Department", systemField: "department", required: false },
  { fileColumn: "Branch", systemField: "branch_code", required: false },
  { fileColumn: "Join Date", systemField: "join_date", required: false },
  { fileColumn: "NRC", systemField: "nrc", required: false },
];

export function OnboardingPage() {
  const [importWizardOpen, setImportWizardOpen] = useState(false);
  const [addEmployeeOpen, setAddEmployeeOpen] = useState(false);
  const [wizardStep, setWizardStep] = useState(0);
  const [selectedBatch, setSelectedBatch] = useState<ImportBatch | null>(null);
  const [detailBatchOpen, setDetailBatchOpen] = useState(false);
  const [detailTab, setDetailTab] = useState<string>("detail");

/* Single Employee Form State */
  const [employeeForm, setEmployeeForm] = useState({
    employee_code: "", name: "", phone: "", nrc: "",
    salary: "", department: "", branch_code: "", join_date: "",
    company_id: "cmp-001",
  });

const wizardSteps = ["Upload File", "Column Mapping", "Data Preview", "Validation", "Maker Submit", "Checker Approve"];

const activeBatches = importBatches.filter(b => b.status !== "Completed" && b.status !== "Checker_Rejected");
  const historyBatches = importBatches.filter(b => b.status === "Completed" || b.status === "Checker_Rejected");

// Define table columns for Tasks
  const taskColumns: ColumnDef<EmployeeImportTask>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (task) => <span className="text-xs font-mono text-slate-700">{task.id}</span>,
      searchString: (task) => task.id
    },
    {
      id: "employee",
      header: "Employee",
      accessor: (task) => (
        <div>
          <p className="text-xs font-medium text-slate-900">{task.employeeName}</p>
          <p className="text-[10px] text-slate-400 font-mono">{task.employeeCode}</p>
        </div>
      ),
      searchString: (task) => `${task.employeeName} ${task.employeeCode}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (task) => <span className="text-xs text-slate-700">{task.companyName}</span>,
      searchString: (task) => task.companyName
    },
    {
      id: "type",
      header: "Type",
      accessor: (task) => (
        <EnterpriseBadge variant={task.type === "add" ? "success" : "info"}>
          {task.type === "add" ? "ADD" : "UPDATE"}
        </EnterpriseBadge>
      )
    },
    {
      id: "overflow",
      header: "Budget Overflow",
      accessor: (task) => task.budgetOverflow ? (
        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-red-600">
          <AlertCircle className="w-3 h-3" /> Overflow ({task.budgetRequest})
        </span>
      ) : (
        <span className="text-[10px] text-slate-400">—</span>
      )
    },
    {
      id: "status",
      header: "Status",
      accessor: (task) => <StatusBadge status={task.status} />
    },
    {
      id: "submitted",
      header: "Submitted",
      accessor: (task) => <span className="text-xs text-slate-500">{task.submittedAt}</span>
    }
  ];

const taskActions: TableAction<EmployeeImportTask>[] = [
    { label: "Approve", icon: <CheckSquare className="w-3.5 h-3.5" />, onClick: (task) => console.log("Approve", task.id) },
    { label: "Reject", icon: <X className="w-3.5 h-3.5" />, onClick: (task) => console.log("Reject", task.id) },
    { label: "View Detail", icon: <Eye className="w-3.5 h-3.5" />, onClick: (task) => console.log("View", task.id) },
  ];

// Define table columns for Active Batches
  const batchColumns: ColumnDef<ImportBatch>[] = [
    {
      id: "id",
      header: "Batch ID",
      accessor: (batch) => <span className="text-xs font-mono text-slate-700">{batch.id}</span>,
      searchString: (batch) => batch.id
    },
    {
      id: "file",
      header: "File",
      accessor: (batch) => <span className="text-xs text-slate-700">{batch.fileName}</span>,
      searchString: (batch) => batch.fileName
    },
    {
      id: "rows",
      header: "Rows",
      isNumeric: true,
      accessor: (batch) => batch.totalRows
    },
    {
      id: "status",
      header: "Status",
      accessor: (batch) => <StatusBadge status={batch.status} />
    },
    {
      id: "new",
      header: "New",
      isNumeric: true,
      accessor: (batch) => batch.newCount,
      cellClassName: () => "text-emerald-600 font-bold"
    },
    {
      id: "modified",
      header: "Modified",
      isNumeric: true,
      accessor: (batch) => batch.modifiedCount,
      cellClassName: () => "text-amber-600 font-bold"
    },
    {
      id: "missing",
      header: "Missing",
      isNumeric: true,
      accessor: (batch) => batch.missingCount,
      cellClassName: () => "text-red-600 font-bold"
    },
    {
      id: "correct",
      header: "Correct",
      isNumeric: true,
      accessor: (batch) => batch.correctCount,
      cellClassName: () => "text-emerald-600 font-bold"
    },
    {
      id: "incorrect",
      header: "Incorrect",
      isNumeric: true,
      accessor: (batch) => batch.incorrectCount,
      cellClassName: () => "text-red-600 font-bold"
    }
  ];

const batchActions: TableAction<ImportBatch>[] = [
    { label: "View Details", icon: <Eye className="w-3.5 h-3.5" />, onClick: (batch) => { setSelectedBatch(batch); setDetailTab("preview"); setDetailBatchOpen(true); } },
  ];

// Pipeline Columns
  const pipelineColumns: ColumnDef<any>[] = [
    {
      id: "company",
      header: "Company",
      accessor: (ob) => (
        <div>
          <p className="text-xs font-medium text-slate-900">{ob.companyName}</p>
          <p className="text-[10px] text-slate-400 font-mono">{ob.id}</p>
        </div>
      ),
      searchString: (ob) => `${ob.companyName} ${ob.id}`
    },
    {
      id: "type",
      header: "Type",
      accessor: (ob) => <EnterpriseBadge variant="neutral" className="text-[10px] uppercase font-bold">{ob.companyType}</EnterpriseBadge>
    },
    {
      id: "stage",
      header: "Stage",
      accessor: (ob) => <span className="text-xs text-slate-700 font-medium">{ob.stageName}</span>
    },
    {
      id: "progress",
      header: "Progress",
      accessor: (ob) => (
        <div className="flex items-center gap-1">
          {[1, 2, 3, 4, 5].map(s => (
            <div key={s} className={`w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-bold ${
              s <= ob.stage ? "bg-emerald-500 text-white" : s === ob.stage ? "bg-amber-500 text-white" : "bg-slate-200 text-slate-400"
            }`}>{s <= ob.stage ? <CheckCircle2 className="w-3 h-3" /> : s}</div>
          ))}
        </div>
      )
    },
    {
      id: "submitted",
      header: "Submitted",
      accessor: (ob) => <span className="text-xs text-slate-500">{ob.submittedAt}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (ob) => <StatusBadge status={ob.currentStage} />
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide flex items-center gap-2">
            <Users className="w-4 h-4 text-[#31d891]" />
            Employee Onboarding
          </h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            Employee verification · Bulk import wizard · Budget eligibility integration
          </p>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]"
            onClick={() => setAddEmployeeOpen(true)}>
            <Plus className="w-3.5 h-3.5" /> Add
          </EnterpriseButton>
          <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#31d891] text-white"
            onClick={() => { setImportWizardOpen(true); setWizardStep(0); }}>
            <Upload className="w-3.5 h-3.5" /> Import
          </EnterpriseButton>
        </div>
      </div>

{/* Main Tabs */}
      <Tabs defaultValue="tasks" className="w-full">
        <TabsList>
          <TabsTrigger value="tasks">Tasks</TabsTrigger>
          <TabsTrigger value="requests">Requests</TabsTrigger>
          <TabsTrigger value="history">History</TabsTrigger>
        </TabsList>

{/* ===== TASKS TAB ===== */}
        <TabsContent value="tasks" className="mt-4 outline-none space-y-4">
          {/* Summary Cards */}
          <div className="grid grid-cols-4 gap-3">
            <EnterpriseKpiCard
              label="Pending Approvals"
              value={employeeImportTasks.filter(t => t.status === "Pending").length}
              accentColor="amber"
              icon={<Clock className="w-3.5 h-3.5 text-[#e65100]" />}
            />
            <EnterpriseKpiCard
              label="Budget Overflow"
              value={employeeImportTasks.filter(t => t.budgetOverflow && t.status === "Pending").length}
              accentColor="error"
              icon={<AlertCircle className="w-3.5 h-3.5 text-[#c62828]" />}
            />
            <EnterpriseKpiCard
              label="Verification Queue"
              value={employees.filter(e => e.status === "Pending Verification" || e.status === "KYC Pending").length}
              accentColor="info"
              icon={<UserCheck className="w-3.5 h-3.5 text-[#0d47a1]" />}
            />
            <EnterpriseKpiCard
              label="Approved Today"
              value="3"
              accentColor="success"
              icon={<CheckCircle2 className="w-3.5 h-3.5 text-[#2e7d32]" />}
            />
          </div>

<EnterpriseTable
            data={employeeImportTasks}
            columns={taskColumns}
            rowKey={(task) => task.id}
            actions={taskActions}
            selectable={true}
            searchPlaceholder="Search by employee name or code..."
          />
        </TabsContent>

{/* ===== REQUESTS TAB ===== */}
        <TabsContent value="requests" className="mt-4 outline-none">
          <EnterpriseTable
            data={activeBatches}
            columns={batchColumns}
            rowKey={(batch) => batch.id}
            actions={batchActions}
            searchPlaceholder="Search batches..."
          />
        </TabsContent>

{/* ===== HISTORY TAB ===== */}
        <TabsContent value="history" className="mt-4 outline-none space-y-6">
          <div className="space-y-3">
             <div className="flex items-center gap-2 px-1">
               <Building2 className="w-3.5 h-3.5 text-[#31d891]" />
               <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-wider">Company Onboarding Pipeline</h3>
             </div>
             <EnterpriseTable
               data={onboardingPipeline}
               columns={pipelineColumns}
               rowKey={(ob) => ob.id}
               searchPlaceholder="Search pipeline..."
             />
          </div>

<div className="space-y-3">
             <div className="flex items-center gap-2 px-1">
               <FileSpreadsheet className="w-3.5 h-3.5 text-[#31d891]" />
               <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-wider">Completed Import Batches</h3>
             </div>
             <EnterpriseTable
               data={historyBatches}
               columns={batchColumns}
               rowKey={(batch) => batch.id}
               actions={batchActions}
               searchPlaceholder="Search batch history..."
             />
          </div>
        </TabsContent>
      </Tabs>

{/* ===== IMPORT WIZARD DIALOG ===== */}
      <Dialog open={importWizardOpen} onOpenChange={setImportWizardOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-base font-bold text-[#100841] flex items-center gap-2">
              <FileSpreadsheet className="w-4 h-4 text-teal-500" />
              Bulk Employee Import Wizard
            </DialogTitle>
          </DialogHeader>

{/* Step 0: Upload File */}
          {wizardStep === 0 && (
            <div className="space-y-4">
              <div className="bg-slate-50 border-2 border-dashed border-slate-300 rounded-md p-8 text-center">
                <Upload className="w-8 h-8 text-slate-400 mx-auto mb-3" />
                <p className="text-sm font-medium text-slate-700">Drag & drop your employee file here</p>
                <p className="text-xs text-slate-400 mt-1">Supported: .xlsx, .xls, .csv (max 10,000 rows, 10MB)</p>
                <EnterpriseButton className="mt-3 h-8 text-xs bg-[#31d891] hover:bg-[#111111] text-white"
                  onClick={() => setWizardStep(1)}>
                  Simulate Upload (golden_harvest_batch_2026-07-12.xlsx)
                </EnterpriseButton>
              </div>
              <div className="grid grid-cols-3 gap-3">
                <EnterpriseCard className="p-3">
                  <p className="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Required Columns</p>
                  <p className="text-xs text-slate-700 mt-1">employee_code, name, phone, salary</p>
                </EnterpriseCard>
                <EnterpriseCard className="p-3">
                  <p className="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Optional Columns</p>
                  <p className="text-xs text-slate-700 mt-1">nrc, department, branch_code, join_date</p>
                </EnterpriseCard>
                <EnterpriseCard className="p-3">
                  <p className="text-[10px] text-slate-500 uppercase tracking-wider font-bold">File Limit</p>
                  <p className="text-xs text-slate-700 mt-1">10,000 rows / 10MB</p>
                </EnterpriseCard>
              </div>
            </div>
          )}

{/* Step 1: Column Mapping */}
          {wizardStep === 1 && (
            <div className="space-y-4">
              <EnterpriseCard className="overflow-hidden">
                <div className="px-4 py-3 bg-slate-50 border-b border-slate-200">
                  <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Auto-Detected Column Mapping</h4>
                </div>
                <div className="p-0">
                  <EnterpriseTable
                    data={SAMPLE_COLUMNS}
                    columns={[
                      {
                        id: "fileColumn",
                        header: "File Column",
                        accessor: (col) => <span className="text-xs font-medium text-slate-700">{col.fileColumn}</span>
                      },
                      {
                        id: "systemField",
                        header: "System Field",
                        accessor: (col) => (
                          <Select defaultValue={col.systemField}>
                            <SelectTrigger className="h-7 text-xs border-slate-200">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value={col.systemField}>{col.systemField}</SelectItem>
                              <SelectItem value="employee_code">employee_code</SelectItem>
                              <SelectItem value="name">name</SelectItem>
                              <SelectItem value="phone">phone</SelectItem>
                              <SelectItem value="salary">salary</SelectItem>
                              <SelectItem value="department">department</SelectItem>
                              <SelectItem value="branch_code">branch_code</SelectItem>
                              <SelectItem value="join_date">join_date</SelectItem>
                              <SelectItem value="nrc">nrc</SelectItem>
                            </SelectContent>
                          </Select>
                        )
                      },
                      {
                        id: "required",
                        header: "Required",
                        accessor: (col) => (
                          <EnterpriseBadge variant={col.required ? "error" : "neutral"} className="text-[9px] font-bold uppercase">
                            {col.required ? "Required" : "Optional"}
                          </EnterpriseBadge>
                        )
                      },
                      {
                        id: "confidence",
                        header: "Confidence",
                        accessor: (col, i) => (
                          <div className="flex items-center gap-1">
                            <div className="w-16 bg-slate-100 rounded-full h-1.5">
                              <div className="h-1.5 rounded-full bg-emerald-500" style={{ width: `${85 + (i || 0) * 2}%` }} />
                            </div>
                            <span className="text-[10px] text-emerald-600 font-bold">{85 + (i || 0) * 2}%</span>
                          </div>
                        )
                      },
                      {
                        id: "action",
                        header: "Action",
                        accessor: () => <EnterpriseButton variant="secondary" className="h-6 text-[10px] text-[#31d891] py-0 px-2">Remap</EnterpriseButton>
                      }
                    ]}
                    rowKey={(col) => col.fileColumn}
                  />
                </div>
              </EnterpriseCard>
            </div>
          )}

{/* Step 2: Data Preview */}
          {wizardStep === 2 && (
            <div className="space-y-4">
              <div className="flex items-center gap-2 mb-2">
                <Input placeholder="Search preview..." className="h-8 text-xs" />
                <Select defaultValue="all">
                  <SelectTrigger className="h-8 text-xs w-32">
                    <SelectValue placeholder="Filter" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Rows</SelectItem>
                    <SelectItem value="new">New Only</SelectItem>
                    <SelectItem value="modified">Modified Only</SelectItem>
                    <SelectItem value="missing">Missing Only</SelectItem>
                    <SelectItem value="incorrect">Errors Only</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <EnterpriseCard className="p-0 overflow-hidden">
                <ScrollArea className="max-h-[400px]">
                  <EnterpriseTable
                    data={sampleImportRows}
                    columns={[
                      { id: "id", header: "#", accessor: (row) => <span className="text-xs font-mono text-slate-500">{row.id}</span> },
                      { id: "category", header: "Category", accessor: (row) => <CategoryBadge category={row.category} /> },
                      { id: "validation", header: "Validation", accessor: (row) => <ValidationBadge validation={row.validation} /> },
                      { id: "code", header: "Code", accessor: (row) => <span className="text-xs font-mono text-slate-700">{row.data.employee_code}</span> },
                      { id: "name", header: "Name", accessor: (row) => <span className="text-xs text-slate-700">{row.data.name || <span className="text-red-400 italic">empty</span>}</span> },
                      { id: "phone", header: "Phone", accessor: (row) => <span className="text-xs text-slate-500">{row.data.phone}</span> },
                      { id: "salary", header: "Salary", accessor: (row) => <span className={`text-xs font-mono ${row.data.salary === "0" ? "text-red-600" : "text-slate-700"}`}>{row.data.salary === "0" ? "0 (invalid)" : formatMMK(Number(row.data.salary))}</span> },
                      { id: "dept", header: "Dept", accessor: (row) => <span className="text-xs text-slate-500">{row.data.department || <span className="text-red-400 italic">empty</span>}</span> }
                    ]}
                    rowKey={(row) => row.id}
                  />
                </ScrollArea>
              </EnterpriseCard>
            </div>
          )}

{/* Step 3: Validation Results */}
          {wizardStep === 3 && (
            <div className="space-y-4">
              {/* Summary Cards */}
              <div className="grid grid-cols-5 gap-3">
                <EnterpriseKpiCard label="Correct" value="40" accentColor="success" />
                <EnterpriseKpiCard label="Incorrect" value="5" accentColor="error" />
                <EnterpriseKpiCard label="Warnings" value="3" accentColor="amber" />
                <EnterpriseKpiCard label="New" value="30" accentColor="success" />
                <EnterpriseKpiCard label="Modified" value="8" accentColor="info" />
              </div>

{/* Error Details */}
              <EnterpriseCard className="p-0 overflow-hidden">
                <div className="px-4 py-3 bg-red-50 border-b border-red-200">
                  <h4 className="text-[11px] font-bold text-red-500 uppercase tracking-widest">Incorrect Rows (5)</h4>
                </div>
                <EnterpriseTable
                  data={sampleImportRows.filter(r => r.validation === "incorrect")}
                  columns={[
                    { id: "row", header: "Row", accessor: (row) => <span className="text-xs font-mono text-red-600">{row.id}</span> },
                    { id: "code", header: "Employee Code", accessor: (row) => <span className="text-xs font-mono text-slate-700">{row.data.employee_code}</span> },
                    { id: "name", header: "Name", accessor: (row) => <span className="text-xs text-slate-700">{row.data.name || <span className="text-red-400 italic">empty</span>}</span> },
                    { id: "errors", header: "Errors", accessor: (row) => (
                      <div className="space-y-0.5">
                        {row.errors.map((e, i) => (
                          <div key={i} className="flex items-center gap-1 text-[10px] text-red-600">
                            <XCircle className="w-3 h-3" /> {e}
                          </div>
                        ))}
                      </div>
                    )},
                    { id: "action", header: "Action", accessor: () => <EnterpriseButton variant="secondary" className="h-6 text-[10px] text-red-600 hover:bg-red-50 py-0 px-2"><RotateCcw className="w-3 h-3 mr-0.5" /> Fix</EnterpriseButton> }
                  ]}
                  rowKey={(row) => row.id}
                />
              </EnterpriseCard>

{/* Warning Details */}
              <EnterpriseCard className="p-0 overflow-hidden">
                <div className="px-4 py-3 bg-amber-50 border-b border-amber-200">
                  <h4 className="text-[11px] font-bold text-amber-500 uppercase tracking-widest">Warnings (3)</h4>
                </div>
                <EnterpriseTable
                  data={sampleImportRows.filter(r => r.warnings.length > 0)}
                  columns={[
                    { id: "row", header: "Row", accessor: (row) => <span className="text-xs font-mono text-amber-600">{row.id}</span> },
                    { id: "code", header: "Employee Code", accessor: (row) => <span className="text-xs font-mono text-slate-700">{row.data.employee_code}</span> },
                    { id: "warnings", header: "Warnings", accessor: (row) => (
                      <div className="space-y-0.5">
                        {row.warnings.map((w, i) => (
                          <div key={i} className="flex items-center gap-1 text-[10px] text-amber-600">
                            <AlertCircle className="w-3 h-3" /> {w}
                          </div>
                        ))}
                      </div>
                    )},
                    { id: "action", header: "Action", accessor: (row) => row.category === "missing" ? (
                      <Select defaultValue="freeze">
                        <SelectTrigger className="h-6 text-[10px] border-amber-200">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="freeze">Freeze</SelectItem>
                          <SelectItem value="suspend">Suspend</SelectItem>
                          <SelectItem value="ignore">Ignore</SelectItem>
                        </SelectContent>
                      </Select>
                    ) : null }
                  ]}
                  rowKey={(row) => row.id}
                />
              </EnterpriseCard>

{/* Error Report Download */}
              <div className="flex justify-end">
                <EnterpriseButton variant="secondary" className="h-8 text-xs border-slate-300">
                  <FileDown className="w-3.5 h-3.5 mr-1" /> Download Error Report (.xlsx)
                </EnterpriseButton>
              </div>
            </div>
          )}

{/* Step 4: Maker Submit */}
          {wizardStep === 4 && (
            <div className="space-y-4">
              <EnterpriseCard>
                <div className="px-4 py-3 border-b border-slate-200">
                  <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Import Summary</h4>
                </div>
                <div className="p-4 space-y-3">
                  <div className="grid grid-cols-2 gap-3">
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">File:</span>
                      <span className="font-medium text-slate-900">golden_harvest_batch_2026-07-12.xlsx</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Total Rows:</span>
                      <span className="font-medium text-slate-900">45</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">New Employees:</span>
                      <span className="font-medium text-emerald-600">30</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Modified:</span>
                      <span className="font-medium text-blue-600">8</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Correct:</span>
                      <span className="font-medium text-emerald-600">40</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Incorrect:</span>
                      <span className="font-medium text-red-600">5</span>
                    </div>
                  </div>
                  <div className="border-t border-slate-200 pt-3">
                    <label className="text-xs font-medium text-slate-700">Maker Notes (optional)</label>
                    <Textarea placeholder="Add any notes for the checker reviewer..." className="mt-1 text-xs" rows={3} />
                  </div>
                </div>
              </EnterpriseCard>
            </div>
          )}

{/* Step 5: Checker Approve */}
          {wizardStep === 5 && (
            <div className="space-y-4">
              <EnterpriseCard>
                <div className="px-4 py-3 border-b border-slate-200">
                  <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Checker Review — Pending Approval</h4>
                </div>
                <div className="p-4 space-y-3">
                  <div className="bg-slate-50 rounded-md p-3 text-xs text-slate-600">
                    <p><strong>Batch:</strong> IMP-2026-001</p>
                    <p><strong>Maker:</strong> Admin HR</p>
                    <p><strong>Submitted:</strong> 2026-07-12 10:30</p>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Correct rows:</span>
                      <span className="font-medium text-emerald-600">40</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Incorrect rows:</span>
                      <span className="font-medium text-red-600">5</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-slate-500">Missing employees:</span>
                      <span className="font-medium text-amber-600">5 (action needed)</span>
                    </div>
                  </div>
                  <div className="border-t border-slate-200 pt-3">
                    <label className="text-xs font-medium text-slate-700">Checker Decision</label>
                    <Select defaultValue="approve">
                      <SelectTrigger className="mt-1 h-8 text-xs border-slate-200">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="approve">Approve</SelectItem>
                        <SelectItem value="reject">Reject</SelectItem>
                        <SelectItem value="return">Return to Maker</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="text-xs font-medium text-slate-700">Comment / Rejection Reason</label>
                    <Textarea placeholder={wizardStep === 5 ? "Required if rejecting..." : "Optional comment..."} className="mt-1 text-xs" rows={3} />
                  </div>
                </div>
              </EnterpriseCard>
            </div>
          )}

<DialogFooter className="flex justify-between">
            <div>
              {wizardStep > 0 && (
                <EnterpriseButton variant="secondary" className="h-8 text-xs" onClick={() => setWizardStep(wizardStep - 1)}>
                  <ArrowLeft className="w-3.5 h-3.5 mr-1" /> Previous
                </EnterpriseButton>
              )}
            </div>
            <div className="flex items-center gap-2">
              <EnterpriseButton variant="secondary" className="h-8 text-xs" onClick={() => setImportWizardOpen(false)}>
                Cancel
              </EnterpriseButton>
              {wizardStep < 5 ? (
                <EnterpriseButton className="h-8 text-xs bg-[#31d891] hover:bg-[#111111] text-white"
                  onClick={() => setWizardStep(wizardStep + 1)}>
                  Next <ArrowRight className="w-3.5 h-3.5 ml-1" />
                </EnterpriseButton>
              ) : (
                <>
                  <EnterpriseButton variant="secondary" className="h-8 text-xs border-red-300 text-red-600 hover:bg-red-50">
                    <X className="w-3.5 h-3.5 mr-1" /> Reject
                  </EnterpriseButton>
                  <EnterpriseButton className="h-8 text-xs bg-emerald-600 hover:bg-emerald-700 text-white"
                    onClick={() => setImportWizardOpen(false)}>
                    <CheckCircle2 className="w-3.5 h-3.5 mr-1" /> Approve
                  </EnterpriseButton>
                </>
              )}
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* ===== ADD SINGLE EMPLOYEE DIALOG ===== */}
      <Dialog open={addEmployeeOpen} onOpenChange={setAddEmployeeOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-base font-bold text-[#100841] flex items-center gap-2">
              <UserCheck className="w-4 h-4 text-teal-500" />
              Add Employee — Single Onboarding
            </DialogTitle>
          </DialogHeader>

<div className="space-y-4">
            {/* Personal Information */}
            <EnterpriseCard>
              <div className="px-4 py-2 border-b border-slate-100">
                <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Personal Information</h4>
              </div>
              <div className="p-4 space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Employee Code <span className="text-red-500">*</span></label>
                    <Input value={employeeForm.employee_code} onChange={e => setEmployeeForm({ ...employeeForm, employee_code: e.target.value })} placeholder="e.g., MTS-007" className="h-8 text-xs mt-0.5" />
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Full Name <span className="text-red-500">*</span></label>
                    <Input value={employeeForm.name} onChange={e => setEmployeeForm({ ...employeeForm, name: e.target.value })} placeholder="Full name" className="h-8 text-xs mt-0.5" />
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Phone Number <span className="text-red-500">*</span></label>
                    <Input value={employeeForm.phone} onChange={e => setEmployeeForm({ ...employeeForm, phone: e.target.value })} placeholder="09-XXXXXXXXX" className="h-8 text-xs mt-0.5" />
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">NRC Number</label>
                    <Input value={employeeForm.nrc} onChange={e => setEmployeeForm({ ...employeeForm, nrc: e.target.value })} placeholder="12/NaKaTa(N)123456" className="h-8 text-xs mt-0.5" />
                  </div>
                </div>
              </div>
            </EnterpriseCard>

{/* Employment Information */}
            <EnterpriseCard>
              <div className="px-4 py-2 border-b border-slate-100">
                <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Employment Information</h4>
              </div>
              <div className="p-4 space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Company <span className="text-red-500">*</span></label>
                    <Select value={employeeForm.company_id} onValueChange={v => setEmployeeForm({ ...employeeForm, company_id: v })}>
                      <SelectTrigger className="h-8 text-xs mt-0.5">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {companies.map(c => (
                          <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Department</label>
                    <Input value={employeeForm.department} onChange={e => setEmployeeForm({ ...employeeForm, department: e.target.value })} placeholder="Department" className="h-8 text-xs mt-0.5" />
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Branch</label>
                    <Input value={employeeForm.branch_code} onChange={e => setEmployeeForm({ ...employeeForm, branch_code: e.target.value })} placeholder="Branch" className="h-8 text-xs mt-0.5" />
                  </div>
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Join Date</label>
                    <Input value={employeeForm.join_date} onChange={e => setEmployeeForm({ ...employeeForm, join_date: e.target.value })} placeholder="YYYY-MM-DD" className="h-8 text-xs mt-0.5" />
                  </div>
                </div>
              </div>
            </EnterpriseCard>

{/* Payroll & Budget */}
            <EnterpriseCard>
              <div className="px-4 py-2 border-b border-slate-100">
                <h4 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Payroll & Budget</h4>
              </div>
              <div className="p-4 space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="text-[10px] font-medium text-slate-600">Monthly Salary (MMK) <span className="text-red-500">*</span></label>
                    <Input value={employeeForm.salary} onChange={e => setEmployeeForm({ ...employeeForm, salary: e.target.value })} placeholder="e.g., 500000" className="h-8 text-xs mt-0.5" />
                  </div>
                </div>
                {employeeForm.salary && Number(employeeForm.salary) > 0 && (
                  <div className="bg-teal-50 border border-teal-200 rounded-md p-3">
                    <p className="text-xs font-medium text-teal-700">Auto-Calculated EWA Cap</p>
                    <p className="text-sm font-bold text-teal-800 mt-0.5">{formatMMK(Math.round(Number(employeeForm.salary) * 0.5))}</p>
                    <p className="text-[10px] text-teal-500 mt-0.5">50% of monthly salary</p>
                  </div>
                )}
                {employeeForm.salary && Number(employeeForm.salary) > 800000 && (
                  <div className="bg-amber-50 border border-amber-200 rounded-md p-3 flex items-center gap-2">
                    <AlertCircle className="w-4 h-4 text-amber-600" />
                    <p className="text-xs text-amber-700">Budget overflow detected — this will trigger an automatic Budget Request for approval</p>
                  </div>
                )}
              </div>
            </EnterpriseCard>
          </div>

<DialogFooter>
            <EnterpriseButton variant="secondary" className="h-8 text-xs" onClick={() => setAddEmployeeOpen(false)}>
              Cancel
            </EnterpriseButton>
            <EnterpriseButton className="h-8 text-xs bg-[#31d891] hover:bg-[#111111] text-white" onClick={() => setAddEmployeeOpen(false)}>
              <UserCheck className="w-3.5 h-3.5 mr-1" /> Submit for Verification
            </EnterpriseButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* ===== BATCH DETAIL SHEET ===== */}
      <Sheet open={detailBatchOpen} onOpenChange={setDetailBatchOpen}>
        <SheetContent side="right" className="w-[600px] overflow-y-auto">
          <SheetHeader>
            <SheetTitle className="text-base font-bold text-[#100841] flex items-center gap-2">
              <FileSpreadsheet className="w-4 h-4 text-teal-500" />
              Import Batch: {selectedBatch?.id}
            </SheetTitle>
          </SheetHeader>

<div className="space-y-4 mt-4">
            {/* Batch Info */}
            <div className="bg-slate-50 rounded-md p-3 text-xs space-y-1">
              <div className="flex justify-between"><span className="text-slate-500">File:</span><span className="font-medium">{selectedBatch?.fileName}</span></div>
              <div className="flex justify-between"><span className="text-slate-500">Uploaded by:</span><span className="font-medium">{selectedBatch?.uploadedBy}</span></div>
              <div className="flex justify-between"><span className="text-slate-500">Uploaded at:</span><span className="font-medium">{selectedBatch?.uploadedAt}</span></div>
              <div className="flex justify-between"><span className="text-slate-500">Status:</span><StatusBadge status={selectedBatch?.status || ""} /></div>
              {selectedBatch?.checkerName && <div className="flex justify-between"><span className="text-slate-500">Checked by:</span><span className="font-medium">{selectedBatch.checkerName}</span></div>}
              {selectedBatch?.checkedAt && <div className="flex justify-between"><span className="text-slate-500">Checked at:</span><span className="font-medium">{selectedBatch.checkedAt}</span></div>}
              {selectedBatch?.rejectReason && <div className="mt-2 p-2 bg-red-50 rounded text-red-700"><span className="font-bold">Rejection:</span> {selectedBatch.rejectReason}</div>}
            </div>

{/* Row Summary */}
            <div className="grid grid-cols-5 gap-2">
              <div className="bg-emerald-50 border border-emerald-200 rounded p-2 text-center">
                <p className="text-[9px] text-emerald-600 font-bold uppercase">New</p>
                <p className="text-sm font-bold text-emerald-700">{selectedBatch?.newCount}</p>
              </div>
              <div className="bg-blue-50 border border-blue-200 rounded p-2 text-center">
                <p className="text-[9px] text-blue-600 font-bold uppercase">Modified</p>
                <p className="text-sm font-bold text-blue-700">{selectedBatch?.modifiedCount}</p>
              </div>
              <div className="bg-amber-50 border border-amber-200 rounded p-2 text-center">
                <p className="text-[9px] text-amber-600 font-bold uppercase">Missing</p>
                <p className="text-sm font-bold text-amber-700">{selectedBatch?.missingCount}</p>
              </div>
              <div className="bg-emerald-50 border border-emerald-200 rounded p-2 text-center">
                <p className="text-[9px] text-emerald-600 font-bold uppercase">Correct</p>
                <p className="text-sm font-bold text-emerald-700">{selectedBatch?.correctCount}</p>
              </div>
              <div className="bg-red-50 border border-red-200 rounded p-2 text-center">
                <p className="text-[9px] text-red-600 font-bold uppercase">Incorrect</p>
                <p className="text-sm font-bold text-red-700">{selectedBatch?.incorrectCount}</p>
              </div>
            </div>

{/* Column Mapping */}
            <EnterpriseCard className="p-0 overflow-hidden">
              <div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
                <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Column Mapping</h4>
              </div>
              <EnterpriseTable
                data={selectedBatch?.columnMapping || []}
                columns={[
                  { id: "fileColumn", header: "File Column", accessor: (col) => <span className="text-xs text-slate-700">{col.fileColumn}</span> },
                  { id: "systemField", header: "System Field", accessor: (col) => <span className="text-xs font-mono text-teal-600">{col.systemField}</span> },
                  { id: "required", header: "Required", accessor: (col) => (
                    <EnterpriseBadge variant={col.required ? "error" : "neutral"} className="text-[9px]">
                      {col.required ? "Y" : "N"}
                    </EnterpriseBadge>
                  )}
                ]}
                rowKey={(col) => col.fileColumn}
              />
            </EnterpriseCard>

{/* Sample Rows */}
            <EnterpriseCard className="p-0 overflow-hidden">
              <div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
                <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sample Rows (Preview)</h4>
              </div>
              <EnterpriseTable
                data={sampleImportRows}
                columns={[
                  { id: "id", header: "#", accessor: (row) => <span className="text-xs font-mono text-slate-500">{row.id}</span> },
                  { id: "category", header: "Cat", accessor: (row) => <CategoryBadge category={row.category} /> },
                  { id: "validation", header: "Val", accessor: (row) => <ValidationBadge validation={row.validation} /> },
                  { id: "code", header: "Code", accessor: (row) => <span className="text-xs font-mono text-slate-700">{row.data.employee_code}</span> },
                  { id: "name", header: "Name", accessor: (row) => <span className="text-xs text-slate-700">{row.data.name || "—"}</span> },
                  { id: "salary", header: "Salary", accessor: (row) => <span className="text-xs font-mono text-slate-700">{formatMMK(Number(row.data.salary) || 0)}</span> }
                ]}
                rowKey={(row) => row.id}
              />
            </EnterpriseCard>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/onboarding/OnboardingPage.tsx"
/**
 * OnboardingPage — Stateful Orchestrator for Company Onboarding
 * Implements Top-Level Tabs to provide ample space instead of a tight dialog modal.
 * Connects the shared state of Onboarding Requests across the Dashboard, Wizard, and Detail modules.
 */
import { useState } from "react";
import OnboardingDashboard from "@/modules/onboarding/OnboardingDashboard";
import OnboardingWizard from "@/modules/onboarding/OnboardingWizard";
import OnboardingRequestDetail from "@/modules/onboarding/OnboardingRequestDetail";
import { OnboardingRequest } from "@/modules/onboarding/types";
import { MOCK_ONBOARDING_REQUESTS } from "@/modules/onboarding/mockData";
import { Building2, ClipboardList, PlusCircle, AlertCircle } from "lucide-react";

export function OnboardingPage() {
  const [requests, setRequests] = useState<OnboardingRequest[]>(MOCK_ONBOARDING_REQUESTS);
  const [selectedRequest, setSelectedRequest] = useState<OnboardingRequest | null>(null);
  const [activeTab, setActiveTab] = useState<"dashboard" | "new_onboarding" | "new_budget">("dashboard");

const handleCreateRequest = (newReq: OnboardingRequest) => {
    setRequests((prev) => [newReq, ...prev]);
    setActiveTab("dashboard");
    // Show a quick browser alert or UI notification
    alert(`Successfully registered "${newReq.companyName}" at Stage 6 (Operations Review) for dynamic flow tracing!`);
  };

const handleUpdateRequest = (updatedReq: OnboardingRequest) => {
    setRequests((prev) => prev.map((r) => (r.id === updatedReq.id ? updatedReq : r)));
    setSelectedRequest(updatedReq);
  };

if (selectedRequest) {
    // If viewing details, render the full-screen interactive view detail page
    return (
      <OnboardingRequestDetail
        request={selectedRequest}
        onBack={() => setSelectedRequest(null)}
        onUpdate={handleUpdateRequest}
      />
    );
  }

return (
    <div className="h-[calc(100vh-80px)] flex flex-col bg-[#efefff] font-sans">
      {/* Spacious Top Navigation Tabs */}
      <div className="bg-white border-b border-[#dfdfdf] px-6 py-2 flex items-center justify-between">
        <div className="flex items-center gap-6">
          <button
            onClick={() => setActiveTab("dashboard")}
            className={`py-2 text-[12px] font-bold uppercase tracking-wider transition-all relative ${
              activeTab === "dashboard" ? "text-[#31d891]" : "text-[#4f525d] hover:text-[#100841]"
            }`}
          >
            <span className="flex items-center gap-1.5">
              <ClipboardList size={14} />
              Onboarding Portal
            </span>
            {activeTab === "dashboard" && (
              <div className="absolute bottom-[-9px] left-0 right-0 h-0.5 bg-[#31d891]" />
            )}
          </button>

<button
            onClick={() => setActiveTab("new_onboarding")}
            className={`py-2 text-[12px] font-bold uppercase tracking-wider transition-all relative ${
              activeTab === "new_onboarding" ? "text-[#31d891]" : "text-[#4f525d] hover:text-[#100841]"
            }`}
          >
            <span className="flex items-center gap-1.5">
              <PlusCircle size={14} />
              New Corporate Onboarding (Spacious Tab)
            </span>
            {activeTab === "new_onboarding" && (
              <div className="absolute bottom-[-9px] left-0 right-0 h-0.5 bg-[#31d891]" />
            )}
          </button>

<button
            onClick={() => setActiveTab("new_budget")}
            className={`py-2 text-[12px] font-bold uppercase tracking-wider transition-all relative ${
              activeTab === "new_budget" ? "text-[#31d891]" : "text-[#4f525d] hover:text-[#100841]"
            }`}
          >
            <span className="flex items-center gap-1.5">
              <Building2 size={14} />
              New Budget Request
            </span>
            {activeTab === "new_budget" && (
              <div className="absolute bottom-[-9px] left-0 right-0 h-0.5 bg-[#31d891]" />
            )}
          </button>
        </div>
        <div className="text-[10px] bg-[#e3f2fd] text-[#0d47a1] px-2.5 py-1 rounded-[2px] font-bold uppercase tracking-wider border border-[#bbdefb]">
          2026 EWA Prototype
        </div>
      </div>

{/* Main Content Area */}
      <div className="flex-1 overflow-hidden p-6">
        {activeTab === "dashboard" && (
          <OnboardingDashboard
            requests={requests}
            onNewOnboarding={() => setActiveTab("new_onboarding")}
            onViewDetails={(req) => setSelectedRequest(req)}
          />
        )}

{activeTab === "new_onboarding" && (
          <div className="bg-white border border-[#dfdfdf] rounded-[3px] h-full overflow-hidden flex flex-col">
            <div className="bg-[#100841] text-white px-5 py-3 flex items-center justify-between">
              <div>
                <h3 className="text-[13px] font-bold uppercase tracking-wider">Spacious Corporate Onboarding Flow</h3>
                <p className="text-[9px] text-[#31d891] uppercase tracking-widest font-bold mt-0.5">
                  Filled with realistic default data for immediate demo trace-through
                </p>
              </div>
              <button
                onClick={() => setActiveTab("dashboard")}
                className="text-[10px] text-white/70 hover:text-white uppercase tracking-wider bg-white/10 px-2 py-1 rounded-[2px]"
              >
                Back to Portal
              </button>
            </div>
            <div className="flex-1 overflow-y-auto">
              <OnboardingWizard
                initialMode="onboarding"
                onSubmit={handleCreateRequest}
                onRequestClose={() => setActiveTab("dashboard")}
              />
            </div>
          </div>
        )}

{activeTab === "new_budget" && (
          <div className="bg-white border border-[#dfdfdf] rounded-[3px] h-full overflow-hidden flex flex-col">
            <div className="bg-[#100841] text-white px-5 py-3 flex items-center justify-between">
              <div>
                <h3 className="text-[13px] font-bold uppercase tracking-wider">Spacious Budget Request Flow</h3>
                <p className="text-[9px] text-[#31d891] uppercase tracking-widest font-bold mt-0.5">
                  Request incremental EWA fund allocations for approved entities
                </p>
              </div>
              <button
                onClick={() => setActiveTab("dashboard")}
                className="text-[10px] text-white/70 hover:text-white uppercase tracking-wider bg-white/10 px-2 py-1 rounded-[2px]"
              >
                Back to Portal
              </button>
            </div>
            <div className="flex-1 overflow-y-auto">
              <OnboardingWizard
                initialMode="budget_request"
                onSubmit={handleCreateRequest}
                onRequestClose={() => setActiveTab("dashboard")}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/payroll/PayrollPage.tsx"
/**
 * PayrollPage — Payroll & Deduction
 * Design: Enterprise Fintech — Reconciliation pattern
 * Company payroll policies, EWA deduction tracking, and payroll reconciliation
 */
import { formatMMK, employees, companies, type Employee, type Company } from "@/data/mockData";
import { FileSpreadsheet, DollarSign, ArrowDownCircle, Download, CheckCircle2 } from "lucide-react";
import {
  EnterpriseBadge,
  EnterpriseKpiCard,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction,
  EnterpriseButton,
  EnterpriseCard
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function PayrollPage() {
  const activeEmployees = employees.filter(e => e.status === "Active");
  const totalOutstanding = activeEmployees.reduce((s, e) => s + e.outstanding, 0);

// Column definitions for Payroll Deduction
  const payrollColumns: ColumnDef<Employee>[] = [
    {
      id: "employee",
      header: "Employee",
      accessor: (emp) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{emp.name}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{emp.employeeId}</p>
        </div>
      ),
      searchString: (emp) => `${emp.name} ${emp.employeeId}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (emp) => <span className="text-[11px] text-[#4f525d] font-medium">{emp.companyName}</span>,
      searchString: (emp) => emp.companyName
    },
    {
      id: "salary",
      header: "Salary",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.salary
    },
    {
      id: "outstanding",
      header: "EWA Due",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.outstanding
    },
    {
      id: "deduction",
      header: "Deduction",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.outstanding,
      cellClassName: (emp) => emp.outstanding > 0 ? "text-red-600 font-bold" : "text-[#4f525d]"
    },
    {
      id: "net",
      header: "Net Pay",
      isNumeric: true,
      align: "right",
      accessor: (emp) => emp.salary - emp.outstanding,
      cellClassName: () => "text-[#100841] font-bold"
    },
    {
      id: "status",
      header: "Status",
      accessor: (emp) => (
        <EnterpriseBadge variant={emp.outstanding > 0 ? "warning" : "success"}>
          {emp.outstanding > 0 ? "Deduct" : "No Deduction"}
        </EnterpriseBadge>
      )
    }
  ];

// Column definitions for Policy Summary
  const policyColumns: ColumnDef<Company>[] = [
    {
      id: "company",
      header: "Company",
      accessor: (c) => <span className="text-[12px] font-bold text-[#100841]">{c.name}</span>,
      searchString: (c) => c.name
    },
    {
      id: "payroll_day",
      header: "Payroll Day",
      accessor: () => <span className="text-[11px] text-[#4f525d] font-mono">25th of month</span>
    },
    {
      id: "deduction_pct",
      header: "Deduction %",
      accessor: () => <span className="text-[11px] text-[#4f525d] font-medium">100% of EWA</span>
    },
    {
      id: "max_cap",
      header: "Max Cap",
      isNumeric: true,
      align: "right",
      accessor: (c) => c.perEmployeeCap
    },
    {
      id: "status",
      header: "Status",
      accessor: (c) => <EnterpriseBadge variant={c.status === "Active" ? "success" : "error"}>{c.status}</EnterpriseBadge>
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Payroll & Deduction Reconciliation</h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            July 2026 Cycle · Pay Date: July 25, 2026
          </p>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Download className="w-3.5 h-3.5" /> Export Deduction File
          </EnterpriseButton>
          <EnterpriseButton className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841] text-white">
            <CheckCircle2 className="w-3.5 h-3.5" /> Finalize Cycle
          </EnterpriseButton>
        </div>
      </div>

{/* KPIs */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <EnterpriseKpiCard 
          label="Total EWA Outstanding" 
          value={formatMMK(totalOutstanding)} 
          subValue={`${activeEmployees.length} active employees`}
          icon={<DollarSign className="w-3 h-3 text-[#31d891]" />}
        />
        <EnterpriseKpiCard 
          label="Payroll Cycle" 
          value="July 2026" 
          subValue="25th pay day"
          icon={<FileSpreadsheet className="w-3 h-3 text-emerald-500" />}
        />
        <EnterpriseKpiCard 
          label="Deductions Ready" 
          value={activeEmployees.filter(e => e.outstanding > 0).length} 
          subValue="Pending payroll sync"
          icon={<ArrowDownCircle className="w-3 h-3 text-amber-500" />}
        />
      </div>

<Tabs defaultValue="deductions" className="w-full">
        <TabsList>
          <TabsTrigger value="deductions">Deduction Register</TabsTrigger>
          <TabsTrigger value="policies">Company Policies</TabsTrigger>
          <TabsTrigger value="reconciliation">Reconciliation Audit</TabsTrigger>
        </TabsList>

<TabsContent value="deductions" className="space-y-4 outline-none">
          <EnterpriseTable
            data={activeEmployees}
            columns={payrollColumns}
            rowKey={(e) => e.id}
            selectable={true}
            searchPlaceholder="Search by employee name or ID..."
            summary={{
              label: "TOTAL DEDUCTION",
              columns: {
                salary: activeEmployees.reduce((s, e) => s + e.salary, 0),
                outstanding: totalOutstanding,
                deduction: totalOutstanding,
                net: activeEmployees.reduce((s, e) => s + e.salary, 0) - totalOutstanding
              }
            }}
          />
        </TabsContent>

<TabsContent value="policies" className="space-y-4 outline-none">
          <EnterpriseTable
            data={companies}
            columns={policyColumns}
            rowKey={(c) => c.id}
            searchPlaceholder="Search by company name..."
          />
        </TabsContent>

<TabsContent value="reconciliation" className="mt-4 outline-none">
           <EnterpriseCard className="p-20 text-center bg-slate-50 border border-dashed border-[#dfdfdf]">
              <FileSpreadsheet className="w-10 h-10 text-slate-200 mx-auto mb-3" />
              <p className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">Run Reconciliation Audit to view discrepancies</p>
           </EnterpriseCard>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/repayment/RepaymentPage.tsx"
/**
 * RepaymentPage — Repayment & Settlement Module
 * Design: Consistent enterprise repayment workflow with maker-checker
 * Workflow: DRAFT → SUBMITTED → FINANCE_REVIEW → FINANCE_UPDATED → APPROVED → POSTED
 */
import { useState } from "react";
import { formatMMK, repaymentRequests, settlements, type RepaymentRequest, type Settlement } from "@/data/mockData";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  Eye, FileText, Layers
} from "lucide-react";
import {
  EnterpriseBadge,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction
} from "@/components/EnterpriseComponents";
import { cn } from "@/lib/utils";

function RepaymentStatusBadge({ status }: { status: string }) {
  const variantMap: Record<string, "success" | "warning" | "error" | "info" | "neutral"> = {
    "DRAFT": "neutral",
    "SUBMITTED": "info",
    "FINANCE_REVIEW": "warning",
    "FINANCE_UPDATED": "warning",
    "APPROVED": "success",
    "POSTED": "success",
    "REJECTED": "error",
  };
  return (
    <EnterpriseBadge variant={variantMap[status] || "neutral"}>
      {status.replace("_", " ")}
    </EnterpriseBadge>
  );
}

export function RepaymentPage() {
  const [selectedRepaymentId, setSelectedRepaymentId] = useState<string>("REP-2026-07-003");
  const [repaymentSelectedKeys, setRepaymentSelectedKeys] = useState<Set<string | number>>(new Set());
  const [settlementSelectedKeys, setSettlementSelectedKeys] = useState<Set<string | number>>(new Set());

// Columns for Repayments
  const repaymentColumns: ColumnDef<RepaymentRequest>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (req) => <span className="font-mono font-bold text-[#100841]">{req.id}</span>,
      searchString: (req) => req.id
    },
    {
      id: "companyName",
      header: "Company",
      accessor: (req) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{req.companyName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{req.companyId}</p>
        </div>
      ),
      searchString: (req) => `${req.companyName} ${req.companyId}`
    },
    {
      id: "initiator",
      header: "Initiator",
      accessor: (req) => (
        <div>
          <p className="text-[12px] text-[#100841] font-semibold">{req.initiatorName}</p>
          <p className="text-[10px] text-[#4f525d] font-mono">{req.initiator}</p>
        </div>
      ),
      searchString: (req) => req.initiatorName
    },
    {
      id: "period",
      header: "Period",
      accessor: (req) => <span className="font-semibold text-[#4f525d]">{req.period}</span>
    },
    {
      id: "totalAmount",
      header: "Total",
      isNumeric: true,
      align: "right",
      accessor: (req) => req.totalAmount
    },
    {
      id: "principalAmount",
      header: "Principal",
      isNumeric: true,
      align: "right",
      accessor: (req) => req.principalAmount
    },
    {
      id: "lateFeeAmount",
      header: "Late Fee",
      isNumeric: true,
      align: "right",
      accessor: (req) => req.lateFeeAmount
    },
    {
      id: "paymentMethod",
      header: "Payment",
      accessor: (req) => <span className="font-semibold text-[#4f525d]">{req.paymentMethod}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (req) => <RepaymentStatusBadge status={req.status} />
    },
    {
      id: "workflow",
      header: "Workflow Status",
      accessor: (req) => <WorkflowSteps status={req.status} />
    }
  ];

// Filters for Repayments
  const repaymentFilters: FilterDef<RepaymentRequest>[] = [
    {
      id: "status",
      label: "Status",
      options: [
        { label: "Draft", value: "DRAFT" },
        { label: "Submitted", value: "SUBMITTED" },
        { label: "Finance Review", value: "FINANCE_REVIEW" },
        { label: "Finance Updated", value: "FINANCE_UPDATED" },
        { label: "Approved", value: "APPROVED" },
        { label: "Posted", value: "POSTED" },
        { label: "Rejected", value: "REJECTED" }
      ],
      filterFn: (req, val) => req.status === val
    },
    {
      id: "payment",
      label: "Payment Method",
      options: [
        { label: "Bank Transfer", value: "Bank Transfer" },
        { label: "Corporate Wallet", value: "Corporate Wallet" },
        { label: "Direct Debit", value: "Direct Debit" }
      ],
      filterFn: (req, val) => req.paymentMethod === val
    }
  ];

// Actions for Repayments
  const repaymentActions: TableAction<RepaymentRequest>[] = [
    {
      label: "View Repayment Items",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (req) => setSelectedRepaymentId(req.id)
    }
  ];

// Columns for Settlements
  const settlementColumns: ColumnDef<Settlement>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (set) => <span className="font-mono font-bold text-[#100841]">{set.id}</span>,
      searchString: (set) => set.id
    },
    {
      id: "companyName",
      header: "Company",
      accessor: (set) => <span className="text-[12px] font-bold text-[#100841]">{set.companyName}</span>,
      searchString: (set) => set.companyName
    },
    {
      id: "submittedBy",
      header: "Submitted By",
      accessor: (set) => <span className="text-[11px] text-[#4f525d] font-semibold">{set.submittedBy}</span>,
      searchString: (set) => set.submittedBy
    },
    {
      id: "totalAmount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (set) => set.totalAmount
    },
    {
      id: "paymentMethod",
      header: "Method",
      accessor: (set) => <span className="text-[11px] text-[#4f525d] font-semibold">{set.paymentMethod}</span>
    },
    {
      id: "bankReference",
      header: "Bank Ref",
      accessor: (set) => <span className="text-[10px] font-mono text-slate-400 font-semibold">{set.bankReference}</span>,
      searchString: (set) => set.bankReference
    },
    {
      id: "status",
      header: "Status",
      accessor: (set) => {
        const setVariant = 
          set.status === "CHECKER_APPROVED" ? "success" : 
          set.status === "MAKER_APPROVED" ? "info" : "warning";
        return (
          <EnterpriseBadge variant={setVariant}>
            {set.status.replace("_", " ")}
          </EnterpriseBadge>
        );
      }
    },
    {
      id: "submittedAt",
      header: "Submitted",
      accessor: (set) => <span className="text-[10px] font-mono text-slate-400 font-semibold">{set.submittedAt}</span>
    }
  ];

// Filters for Settlements
  const settlementFilters: FilterDef<Settlement>[] = [
    {
      id: "status",
      label: "Status",
      options: [
        { label: "Maker Approved", value: "MAKER_APPROVED" },
        { label: "Checker Approved", value: "CHECKER_APPROVED" },
        { label: "Pending", value: "PENDING" }
      ],
      filterFn: (set, val) => set.status === val
    }
  ];

// Find active items list to show
  const activeRepaymentRequest = repaymentRequests.find(r => r.id === selectedRepaymentId) || repaymentRequests[2];

// Columns for Breakdown Items
  const breakdownColumns: ColumnDef<any>[] = [
    {
      id: "employee",
      header: "Employee",
      accessor: (item) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{item.employeeName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{item.employeeId}</p>
        </div>
      ),
      searchString: (item) => `${item.employeeName} ${item.employeeId}`
    },
    {
      id: "principal",
      header: "Principal",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.principal
    },
    {
      id: "lateFee",
      header: "Late Fee",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.lateFee,
      cellClassName: (item) => item.lateFee > 0 ? "text-[#e65100] font-bold" : "text-slate-300"
    },
    {
      id: "serviceFee",
      header: "Service Fee",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.serviceFee,
      cellClassName: () => "text-slate-400"
    },
    {
      id: "total",
      header: "Total",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.total,
      cellClassName: () => "font-bold text-[#100841]"
    },
    {
      id: "allocationPct",
      header: "Allocation %",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.allocationPct + "%",
      cellClassName: () => "font-bold text-[#4f525d]"
    },
    {
      id: "allocatedAmount",
      header: "Allocated",
      isNumeric: true,
      align: "right",
      accessor: (item) => item.allocatedAmount,
      cellClassName: () => "font-bold text-[#2e7d32]"
    }
  ];

return (
    <div className="space-y-4">
      {/* ===== Page Header ===== */}
      <div className="flex items-center gap-2">
        <Layers className="w-4 h-4 text-[#31d891]" />
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Repayment & Settlement</h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            Audit-safe reconciliation for Earned Wage Access distributions
          </p>
        </div>
      </div>

<Tabs defaultValue="repayments" className="w-full">
        <TabsList>
          <TabsTrigger value="repayments">Repayment Requests</TabsTrigger>
          <TabsTrigger value="settlements">Settlements</TabsTrigger>
        </TabsList>

{/* ===== Tab 1: Repayment Requests ===== */}
        <TabsContent value="repayments" className="space-y-4 outline-none">
          <EnterpriseTable
            data={repaymentRequests}
            columns={repaymentColumns}
            rowKey={(req) => req.id}
            filters={repaymentFilters}
            actions={repaymentActions}
            selectable={true}
            selectedKeys={repaymentSelectedKeys}
            onSelectionChange={setRepaymentSelectedKeys}
            searchPlaceholder="Search by ID or company name..."
          />

{/* Expanded Items Breakdown */}
          <div className="space-y-3">
            <div className="flex items-center gap-2 px-1">
              <FileText className="w-3.5 h-3.5 text-[#31d891]" />
              <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-wider">
                Breakdown Items — {activeRepaymentRequest.id} ({activeRepaymentRequest.companyName})
              </h3>
            </div>

<EnterpriseTable
              data={activeRepaymentRequest.items}
              columns={breakdownColumns}
              rowKey={(item) => item.employeeId}
              searchPlaceholder="Search by employee name or ID..."
              summary={{
                label: "TOTAL REPAYMENT",
                columns: {
                  principal: activeRepaymentRequest.principalAmount,
                  lateFee: activeRepaymentRequest.lateFeeAmount,
                  total: activeRepaymentRequest.totalAmount,
                  allocatedAmount: activeRepaymentRequest.totalAmount
                }
              }}
            />
          </div>
        </TabsContent>

{/* ===== Tab 2: Settlements ===== */}
        <TabsContent value="settlements" className="space-y-4 outline-none">
          <EnterpriseTable
            data={settlements}
            columns={settlementColumns}
            rowKey={(set) => set.id}
            filters={settlementFilters}
            selectable={true}
            selectedKeys={settlementSelectedKeys}
            onSelectionChange={setSettlementSelectedKeys}
            searchPlaceholder="Search by ID, reference or company..."
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/reports/ReportsPage.tsx"
/**
 * ReportsPage — Reports Center
 * Design: Enterprise Fintech — SAP Fiori inspired
 * Multi-report types, grouping, financial statements, audit trail
 */
import { useState } from "react";
import { formatMMK, transactions, repaymentRequests, companies, employees, glBalances, journalEntries } from "@/data/mockData";
import { FileText, Download, Eye, Receipt, FileSpreadsheet, Users, Building2, BookOpen, Lock, ArrowRightLeft } from "lucide-react";
import { ResponsiveContainer, LineChart, Line, CartesianGrid, Tooltip, Legend, XAxis, YAxis } from "recharts";
import {
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  TableAction,
  EnterpriseCard,
  EnterpriseSelect
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

const REPORT_TYPES: { id: ReportType; label: string; icon: React.ElementType }[] = [
  { id: "financial", label: "Financial Statements", icon: FileSpreadsheet },
  { id: "transaction", label: "Transaction Reports", icon: Receipt },
  { id: "employee", label: "Employee Reports", icon: Users },
  { id: "company", label: "Company Portfolio", icon: Building2 },
  { id: "gl", label: "GL Ledger Reports", icon: BookOpen },
  { id: "audit", label: "Audit Trail", icon: FileText },
];

export function ReportsPage() {
  const [reportType, setReportType] = useState<ReportType>("financial");
  const [period, setPeriod] = useState("July 2026");

const totalRevenue = transactions.reduce((s, t) => s + t.fee, 0) + repaymentRequests.reduce((s, r) => s + r.lateFeeAmount, 0);
  const totalDisbursed = transactions.reduce((s, t) => s + t.amount, 0);
  const totalRepaid = transactions.filter(t => t.status === "Repaid").reduce((s, t) => s + t.amount, 0);
  const totalOutstanding = transactions.filter(t => t.status === "Overdue" || t.status === "Disbursing" || t.status === "Approved").reduce((s, t) => s + t.amount, 0);
  const totalAssets = glBalances.filter(g => g.type === "Asset").reduce((s, g) => s + g.closingBalance, 0);
  const totalLiabilities = glBalances.filter(g => g.type === "Liability").reduce((s, g) => s + g.closingBalance, 0);
  const totalIncome = Math.abs(glBalances.filter(g => g.type === "Income").reduce((s, g) => s + g.closingBalance, 0));

const monthlyData = [
    { month: "Jan", disbursed: 2.1, repaid: 1.8, fee: 0.12 },
    { month: "Feb", disbursed: 2.5, repaid: 2.2, fee: 0.15 },
    { month: "Mar", disbursed: 3.0, repaid: 2.8, fee: 0.18 },
    { month: "Apr", disbursed: 2.8, repaid: 2.5, fee: 0.16 },
    { month: "May", disbursed: 3.5, repaid: 3.2, fee: 0.21 },
    { month: "Jun", disbursed: 4.0, repaid: 3.8, fee: 0.24 },
    { month: "Jul", disbursed: 0.72, repaid: 0.45, fee: 0.02 },
  ];

const typeColors: Record<string, "success" | "warning" | "error" | "info" | "neutral"> = {
    "Income": "success",
    "Asset": "info",
    "Liability": "warning",
    "Equity": "neutral",
    "Active": "success",
    "Repaid": "success",
    "Overdue": "error",
    "Frozen": "error",
    "Pending": "warning",
    "Disbursing": "warning",
    "Approved": "info",
    "Entry": "neutral",
  };

// Generic column def for reports
  const columns: ColumnDef<any>[] = [
    {
      id: "label",
      header: "Line Item / Descriptor",
      accessor: (r) => <span className="text-[12px] font-bold text-[#100841]">{r.label}</span>,
      searchString: (r) => r.label
    },
    {
      id: "value",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (r) => r.value,
      cellClassName: () => "font-mono font-bold text-[#100841]"
    },
    {
      id: "category",
      header: "Category / Status",
      accessor: (r) => <EnterpriseBadge variant={typeColors[r.type] || "neutral"}>{r.type}</EnterpriseBadge>
    }
  ];

const tableActions: TableAction<any>[] = [
    { label: "View Details", icon: <Eye className="w-3.5 h-3.5" />, onClick: (r) => console.log("View", r.label) },
    { label: "Audit Log", icon: <FileText className="w-3.5 h-3.5" />, onClick: (r) => console.log("Audit", r.label) },
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide flex items-center gap-2">
            <Lock className="w-4 h-4 text-[#100841]/40" />
            Institutional Reports Center
          </h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            Audit-safe financial extraction and monitoring
          </p>
        </div>
        <div className="flex items-center gap-2">
           <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Download className="w-3.5 h-3.5" /> Export All (PDF)
          </EnterpriseButton>
        </div>
      </div>

<EnterpriseCard className="p-3 border-[#dfdfdf] shadow-sm bg-white">
        <div className="flex items-center gap-3">
          <EnterpriseSelect 
            value={reportType} 
            onChange={(e) => setReportType(e.target.value as ReportType)}
            className="w-[240px] h-9 text-[11px]"
          >
            {REPORT_TYPES.map(r => (
              <option key={r.id} value={r.id}>{r.label}</option>
            ))}
          </EnterpriseSelect>

<EnterpriseSelect 
            value={period} 
            onChange={(e) => setPeriod(e.target.value)}
            className="w-[160px] h-9 text-[11px]"
          >
            <option value="July 2026">July 2026</option>
            <option value="June 2026">June 2026</option>
            <option value="Q2 2026">Q2 2026</option>
            <option value="FY 2026">FY 2026</option>
          </EnterpriseSelect>

<div className="ml-auto flex items-center gap-2">
             <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 text-[10px] font-bold">
               <Eye className="w-3 h-3 mr-1" /> PREVIEW
             </EnterpriseButton>
             <EnterpriseButton className="h-8 py-0 px-3 text-[10px] font-bold bg-[#100841] text-white">
               <Download className="w-3 h-3 mr-1" /> DOWNLOAD
             </EnterpriseButton>
          </div>
        </div>
      </EnterpriseCard>

<Tabs defaultValue="report" className="w-full">
        <TabsList>
          <TabsTrigger value="report">Extracted Data</TabsTrigger>
          <TabsTrigger value="visuals">Trend Visuals</TabsTrigger>
          <TabsTrigger value="history">Generation History</TabsTrigger>
        </TabsList>

<TabsContent value="report" className="space-y-4 outline-none">
          <EnterpriseTable
            data={reportRows}
            columns={columns}
            rowKey={(r) => r.label}
            actions={tableActions}
            searchPlaceholder="Search in report lines..."
          />
        </TabsContent>

<TabsContent value="visuals" className="mt-4 outline-none">
          <EnterpriseCard className="p-6 shadow-sm">
             <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-6">Financial Movement Trends — Institutional View</h3>
             <ResponsiveContainer width="100%" height={300}>
                <LineChart data={monthlyData} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#efefff" vertical={false} />
                  <XAxis dataKey="month" tick={{ fontSize: 10, fill: "#4f525d", fontWeight: 700 }} axisLine={false} tickLine={false} />
                  <YAxis tick={{ fontSize: 10, fill: "#4f525d", fontWeight: 700 }} axisLine={false} tickLine={false} tickFormatter={(v) => `${v}M`} />
                  <Tooltip 
                    contentStyle={{ borderRadius: "2px", border: "1px solid #dfdfdf", fontSize: "11px", fontWeight: 700 }}
                    formatter={(v: number) => [`${formatMMK(v * 1000000)}`, ""]} 
                  />
                  <Legend wrapperStyle={{ fontSize: 10, fontWeight: 700, paddingTop: "20px" }} />
                  <Line type="monotone" dataKey="disbursed" name="Disbursement Flow" stroke="#100841" strokeWidth={2} dot={{ r: 3, fill: "#100841" }} activeDot={{ r: 5 }} />
                  <Line type="monotone" dataKey="repaid" name="Repayment Cycle" stroke="#10b981" strokeWidth={2} dot={{ r: 3, fill: "#10b981" }} activeDot={{ r: 5 }} />
                  <Line type="monotone" dataKey="fee" name="Fee Yield" stroke="#31d891" strokeWidth={2} dot={{ r: 3, fill: "#31d891" }} activeDot={{ r: 5 }} />
                </LineChart>
              </ResponsiveContainer>
          </EnterpriseCard>
        </TabsContent>

<TabsContent value="history" className="mt-4 outline-none">
           <EnterpriseCard className="p-20 text-center bg-slate-50 border border-dashed border-[#dfdfdf]">
              <FileText className="w-10 h-10 text-slate-200 mx-auto mb-3" />
              <p className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">No historical report generations found for this period</p>
           </EnterpriseCard>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/risk/RiskPage.tsx"
/**
 * RiskPage — Risk & Backoffice Assessment
 * Design: Neobrutalist Fintech — Credit risk scoring, company assessment, and fraud detection
 */
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef
} from "@/components/EnterpriseComponents";
import { Progress } from "@/components/ui/progress";
import { formatMMK, riskAssessments, type RiskAssessment } from "@/data/mockData";
import { ShieldAlert, ShieldCheck, ShieldX, Radar } from "lucide-react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";

export function RiskPage() {
  const riskData = riskAssessments.map(r => ({
    name: r.companyName.split(" ")[0],
    revenueStability: r.revenueStability,
    employeeStability: r.employeeStability,
    industryRisk: r.industryRisk,
    financialHealth: r.financialHealth,
  }));

const columns: ColumnDef<RiskAssessment>[] = [
    {
      id: "company",
      header: "Company",
      accessor: (ra) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{ra.companyName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{ra.companyId}</p>
        </div>
      ),
      searchString: (ra) => `${ra.companyName} ${ra.companyId}`
    },
    {
      id: "riskTier",
      header: "Risk Tier",
      accessor: (ra) => (
        <EnterpriseBadge 
          variant={
            ra.riskTier === "A" ? "success" : 
            ra.riskTier === "B" ? "info" : 
            ra.riskTier === "C" ? "warning" : 
            ra.riskTier === "D" ? "warning" : "error"
          }
        >
          TIER {ra.riskTier}
        </EnterpriseBadge>
      )
    },
    {
      id: "totalScore",
      header: "Score",
      isNumeric: true,
      align: "right",
      accessor: (ra) => ra.totalScore,
      cellClassName: (ra) => ra.totalScore >= 80 ? "text-emerald-600 font-bold" : ra.totalScore >= 60 ? "text-amber-600 font-bold" : "text-red-600 font-bold"
    },
    {
      id: "revenueStability",
      header: "Revenue",
      isNumeric: true,
      align: "right",
      accessor: (ra) => (
        <div className="flex items-center gap-2 justify-end">
          <Progress value={ra.revenueStability} className="h-1 w-10" />
          <span className="text-[10px] font-mono text-[#4f525d]">{ra.revenueStability}</span>
        </div>
      )
    },
    {
      id: "employeeStability",
      header: "Stability",
      isNumeric: true,
      align: "right",
      accessor: (ra) => (
        <div className="flex items-center gap-2 justify-end">
          <Progress value={ra.employeeStability} className="h-1 w-10" />
          <span className="text-[10px] font-mono text-[#4f525d]">{ra.employeeStability}</span>
        </div>
      )
    },
    {
      id: "industryRisk",
      header: "Ind. Risk",
      isNumeric: true,
      align: "right",
      accessor: (ra) => (
        <div className="flex items-center gap-2 justify-end">
          <Progress value={ra.industryRisk} className="h-1 w-10" />
          <span className="text-[10px] font-mono text-[#4f525d]">{ra.industryRisk}</span>
        </div>
      )
    },
    {
      id: "financialHealth",
      header: "Health",
      isNumeric: true,
      align: "right",
      accessor: (ra) => (
        <div className="flex items-center gap-2 justify-end">
          <Progress value={ra.financialHealth} className="h-1 w-10" />
          <span className="text-[10px] font-mono text-[#4f525d]">{ra.financialHealth}</span>
        </div>
      )
    },
    {
      id: "creditPool",
      header: "Credit Pool",
      isNumeric: true,
      align: "right",
      accessor: (ra) => ra.creditPool
    },
    {
      id: "status",
      header: "Status",
      accessor: () => <EnterpriseBadge variant="success">APPROVED</EnterpriseBadge>
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <ShieldAlert className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Risk & Backoffice Assessment</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Credit scoring and portfolio risk monitoring</p>
          </div>
        </div>
        <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
          <Radar className="w-3.5 h-3.5" /> Run Scan
        </EnterpriseButton>
      </div>

<EnterpriseTable
        data={riskAssessments}
        columns={columns}
        rowKey={(ra) => ra.id}
        searchPlaceholder="Search by company name or ID..."
      />

<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <EnterpriseCard className="lg:col-span-2 p-4 border-[#dfdfdf] shadow-sm">
          <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Risk Dimensions Comparison</h3>
          <ResponsiveContainer width="100%" height={280}>
            <BarChart data={riskData} margin={{ top: 5, right: 10, left: -10, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#dfdfdf" />
              <XAxis dataKey="name" tick={{ fontSize: 9, fontWeight: 'bold' }} stroke="#4f525d" />
              <YAxis tick={{ fontSize: 9 }} stroke="#4f525d" />
              <Tooltip 
                contentStyle={{ borderRadius: '3px', border: '1px solid #dfdfdf', fontSize: '11px', fontWeight: 'bold' }}
              />
              <Bar dataKey="revenueStability" name="Revenue Stability" fill="#100841" radius={[2, 2, 0, 0]} />
              <Bar dataKey="employeeStability" name="Employee Stability" fill="#31d891" radius={[2, 2, 0, 0]} />
              <Bar dataKey="industryRisk" name="Industry Risk" fill="#10b981" radius={[2, 2, 0, 0]} />
              <Bar dataKey="financialHealth" name="Financial Health" fill="#f59e0b" radius={[2, 2, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </EnterpriseCard>

<EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm">
          <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Backoffice Controls</h3>
          <div className="space-y-3">
            {[
              { icon: ShieldAlert, title: "Ghost Detection", status: "Active", color: "text-emerald-500" },
              { icon: ShieldCheck, title: "ID Uniqueness", status: "Active", color: "text-emerald-500" },
              { icon: Radar, title: "Fraud Pattern", status: "Active", color: "text-emerald-500" },
              { icon: ShieldX, title: "Freeze Queue", status: "1 Pending", color: "text-amber-500" },
              { icon: ShieldAlert, title: "Overdraft Prot.", status: "Active", color: "text-emerald-500" },
              { icon: ShieldCheck, title: "Compliance", status: "88%", color: "text-blue-500" },
            ].map((ctrl, i) => (
              <div key={i} className="flex items-center justify-between p-2 rounded-[2px] bg-[#efefff] border border-[#dfdfdf]">
                <div className="flex items-center gap-2">
                  <ctrl.icon className={`w-3.5 h-3.5 ${ctrl.color}`} />
                  <span className="text-[11px] font-bold text-[#100841] uppercase tracking-tight">{ctrl.title}</span>
                </div>
                <span className="text-[10px] font-mono font-bold text-[#4f525d]">{ctrl.status}</span>
              </div>
            ))}
          </div>
          <EnterpriseButton variant="secondary" className="w-full mt-4 h-8 text-[10px] font-bold">Configure Controls</EnterpriseButton>
        </EnterpriseCard>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/service-catalog/ServiceCatalogPage.tsx"
/**
 * ServiceCatalogPage — Transaction Types, Service Classification (txn/non-txn/cos), Fee/Discount Mapping
 * Design: Enterprise Fintech — Service Registry pattern
 */
import { useState } from "react";
import { Layers, Plus, Eye, Download, Info, ArrowRightLeft } from "lucide-react";
import {
  EnterpriseCard,
  EnterpriseKpiCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  TableAction,
  EnterpriseKpiCard as KpiCard
} from "@/components/EnterpriseComponents";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

interface Service {
  id: string;
  code: string;
  name: string;
  description: string;
  serviceType: ServiceType;
  glPosting: boolean;
  category: string;
  status: "ACTIVE" | "INACTIVE" | "DRAFT";
  feeMappings: FeeMapping[];
  applicableTo: EntityRole[];
}

interface FeeMapping {
  id: string;
  feeName: string;
  feeCode: string;
  feeType: FeeMappingType;
  value: number;
  discountId: string | null;
  aggregator: string | null;
}

const services: Service[] = [
  { id: "SVC-001", code: "EWA_DISBURSE", name: "EWA Disbursement", description: "Employee wage advance disbursement to bank/wallet", serviceType: "TXN", glPosting: true, category: "Disbursement", status: "ACTIVE", feeMappings: [
    { id: "FM-001", feeName: "Service Fee", feeCode: "FEE-SVC-001", feeType: "PERCENT", value: 1.5, discountId: "DISC-001", aggregator: "AGG-KBZ" },
    { id: "FM-002", feeName: "Bank Charge", feeCode: "FEE-BANK-001", feeType: "FLAT", value: 1500, discountId: null, aggregator: null },
  ], applicableTo: ["SENDER", "RECEIVER", "DEPOSITOR", "BENEFICIARY"] },
  { id: "SVC-002", code: "EWA_REPAYMENT", name: "EWA Repayment", description: "Payroll deduction repayment processing", serviceType: "TXN", glPosting: true, category: "Repayment", status: "ACTIVE", feeMappings: [
    { id: "FM-003", feeName: "Processing Fee", feeCode: "FEE-SVC-002", feeType: "PERCENT", value: 0.5, discountId: null, aggregator: null },
  ], applicableTo: ["SENDER", "RECEIVER"] },
  { id: "SVC-003", code: "CORP_ONBOARD", name: "Corporate Onboarding", description: "Company registration and KYC process", serviceType: "NON_TXN", glPosting: false, category: "Onboarding", status: "ACTIVE", feeMappings: [
    { id: "FM-004", feeName: "Setup Fee", feeCode: "FEE-SETUP-001", feeType: "FLAT", value: 50000, discountId: "DISC-002", aggregator: null },
  ], applicableTo: ["SENDER"] },
  { id: "SVC-004", code: "EMP_ONBOARD", name: "Employee Onboarding", description: "Employee registration, verification, and budget allocation", serviceType: "NON_TXN", glPosting: false, category: "Onboarding", status: "ACTIVE", feeMappings: [], applicableTo: ["RECEIVER"] },
  { id: "SVC-005", code: "CASHOUT_OTC", name: "OTC Cash Out", description: "Agent-based cash withdrawal at authorized locations", serviceType: "TXN", glPosting: true, category: "Cash Out", status: "ACTIVE", feeMappings: [
    { id: "FM-005", feeName: "Agent Commission", feeCode: "FEE-AGT-001", feeType: "PERCENT", value: 2.0, discountId: null, aggregator: "AGG-OTC" },
  ], applicableTo: ["SENDER", "RECEIVER", "AGGREGATOR"] },
  { id: "SVC-006", code: "BUDGET_ALLOC", name: "Budget Allocation", description: "Company budget creation and allocation to departments/groups", serviceType: "COS", glPosting: false, category: "Budget", status: "ACTIVE", feeMappings: [], applicableTo: ["SENDER"] },
  { id: "SVC-007", code: "SETTLEMENT_VERIFY", name: "Settlement Verification", description: "Maker-checker verification of settlement batches", serviceType: "TXN", glPosting: true, category: "Settlement", status: "ACTIVE", feeMappings: [
    { id: "FM-006", feeName: "Verification Fee", feeCode: "FEE-VER-001", feeType: "FLAT", value: 500, discountId: null, aggregator: null },
  ], applicableTo: ["SENDER", "RECEIVER"] },
  { id: "SVC-008", code: "WRITE_OFF", name: "Write-Off Processing", description: "Loss provisioning and write-off approval workflow", serviceType: "TXN", glPosting: true, category: "Write-Off", status: "ACTIVE", feeMappings: [], applicableTo: ["SENDER"] },
];

const formatMMK = (amount: number) => {
  return new Intl.NumberFormat("en-US", { minimumFractionDigits: 0 }).format(amount) + " MMK";
};

export function ServiceCatalogPage() {
  const [selectedService, setSelectedService] = useState<Service | null>(null);

const columns: ColumnDef<Service>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (s) => <span className="font-mono font-bold text-[#100841]">{s.id}</span>,
      searchString: (s) => s.id
    },
    {
      id: "code",
      header: "Code",
      accessor: (s) => <span className="text-[11px] font-mono font-bold text-slate-400">{s.code}</span>,
      searchString: (s) => s.code
    },
    {
      id: "name",
      header: "Service Name",
      accessor: (s) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{s.name}</p>
          <p className="text-[9px] text-[#4f525d] line-clamp-1">{s.description}</p>
        </div>
      ),
      searchString: (s) => `${s.name} ${s.description}`
    },
    {
      id: "type",
      header: "Type",
      accessor: (s) => (
        <EnterpriseBadge variant={s.serviceType === "TXN" ? "info" : s.serviceType === "NON_TXN" ? "warning" : "neutral"}>
          {s.serviceType}
        </EnterpriseBadge>
      )
    },
    {
      id: "gl",
      header: "GL Post",
      accessor: (s) => <EnterpriseBadge variant={s.glPosting ? "success" : "neutral"}>{s.glPosting ? "YES" : "NO"}</EnterpriseBadge>
    },
    {
      id: "category",
      header: "Category",
      accessor: (s) => <span className="text-[11px] text-[#4f525d] font-medium">{s.category}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (s) => <EnterpriseBadge variant={s.status === "ACTIVE" ? "success" : "error"}>{s.status}</EnterpriseBadge>
    }
  ];

const tableActions: TableAction<Service>[] = [
    { label: "View Details", icon: <Eye className="w-3.5 h-3.5" />, onClick: (s) => setSelectedService(s) },
    { label: "Edit Service", icon: <Info className="w-3.5 h-3.5" />, onClick: (s) => console.log("Edit", s.id) },
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Layers className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Service Registry</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
              Service classification, fee mapping & entity role assignment
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#100841] text-white">
            <Plus className="w-3.5 h-3.5" /> Define Service
          </EnterpriseButton>
        </div>
      </div>

<div className="grid grid-cols-5 gap-2">
        <EnterpriseKpiCard label="Total Services" value={services.length} icon={<Layers className="w-3 h-3 text-slate-400" />} />
        <EnterpriseKpiCard label="Transaction (TXN)" value={services.filter(s => s.serviceType === "TXN").length} icon={<ArrowRightLeft className="w-3 h-3 text-blue-500" />} />
        <EnterpriseKpiCard label="Non-TXN" value={services.filter(s => s.serviceType === "NON_TXN").length} icon={<Info className="w-3 h-3 text-amber-500" />} />
        <EnterpriseKpiCard label="Config (COS)" value={services.filter(s => s.serviceType === "COS").length} icon={<Layers className="w-3 h-3 text-purple-500" />} />
        <EnterpriseKpiCard label="Active" value={services.filter(s => s.status === "ACTIVE").length} icon={<CheckCircle2 className="w-3 h-3 text-emerald-500" />} />
      </div>

<Tabs defaultValue="registry" className="w-full">
        <TabsList>
          <TabsTrigger value="registry">Service Registry</TabsTrigger>
          <TabsTrigger value="detail">Service Detail</TabsTrigger>
          <TabsTrigger value="fees">Fee Matrix</TabsTrigger>
        </TabsList>

<TabsContent value="registry" className="space-y-4 outline-none">
          <EnterpriseTable
            data={services}
            columns={columns}
            rowKey={(s) => s.id}
            actions={tableActions}
            selectable={true}
            searchPlaceholder="Search by code or service name..."
          />
        </TabsContent>

<TabsContent value="detail" className="mt-4 outline-none">
          {selectedService ? (
            <EnterpriseCard className="p-4 shadow-sm border-t-2 border-t-[#100841]">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-[3px] bg-[#ffffff] flex items-center justify-center border border-[#dfdfdf]">
                    <Layers className="w-5 h-5 text-[#100841]" />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold text-[#100841]">{selectedService.code} — {selectedService.name}</h3>
                    <p className="text-[10px] text-[#4f525d] font-mono">{selectedService.category}</p>
                  </div>
                </div>
                <EnterpriseBadge variant={selectedService.status === "ACTIVE" ? "success" : "error"}>{selectedService.status}</EnterpriseBadge>
              </div>

<div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px] mb-6">
                <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-bold mb-1">Service Description</p>
                <p className="text-xs text-[#100841] font-medium leading-relaxed">{selectedService.description}</p>
              </div>

<div className="mb-6">
                 <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Fee & Discount Mapping</p>
                 {selectedService.feeMappings.length > 0 ? (
                    <EnterpriseTable
                      data={selectedService.feeMappings}
                      columns={[
                        { id: "code", header: "Fee Code", accessor: (fm) => <span className="font-mono text-[10px]">{fm.feeCode}</span> },
                        { id: "name", header: "Name", accessor: (fm) => fm.feeName },
                        { id: "type", header: "Type", accessor: (fm) => <EnterpriseBadge variant={fm.feeType === "PERCENT" ? "info" : "success"}>{fm.feeType}</EnterpriseBadge> },
                        { id: "value", header: "Value", isNumeric: true, align: "right", accessor: (fm) => fm.feeType === "PERCENT" ? fm.value + "%" : formatMMK(fm.value) }
                      ]}
                      rowKey={(fm) => fm.id}
                    />
                 ) : (
                    <div className="p-6 text-center bg-slate-50 border border-dashed border-[#dfdfdf] rounded-[3px]">
                       <p className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">No fee mappings configured</p>
                    </div>
                 )}
              </div>

<div>
                <p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-3">Applicable Entity Roles</p>
                <div className="flex items-center gap-2">
                  {selectedService.applicableTo.map(role => (
                    <EnterpriseBadge key={role} variant="neutral" className="bg-white border-[#dfdfdf] text-[#100841]">{role}</EnterpriseBadge>
                  ))}
                </div>
              </div>
            </EnterpriseCard>
          ) : (
            <div className="text-center py-20 bg-slate-50 border border-dashed border-[#dfdfdf] rounded-[3px]">
              <Layers className="w-10 h-10 text-slate-200 mx-auto mb-3" />
              <p className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">Select a service to view technical specifications</p>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}

/* ===== Fiori Semantic Status Badge ===== */
function SettlementStatusBadge({ status }: { status: string }) {
  const c: Record<string, "success" | "warning" | "error" | "info" | "neutral"> = {
    "SUBMITTED": "warning",
    "MAKER_APPROVED": "info",
    "CHECKER_APPROVED": "success",
    "POSTED": "success",
    "REJECTED": "error",
  };
  return <EnterpriseBadge variant={c[status] || "neutral"}>{status.replace("_", " ")}</EnterpriseBadge>;
}

/* ===== Compact Workflow Stepper ===== */
function WorkflowStepper({ status }: { status: string }) {
  const steps = ["SUBMITTED", "MAKER_APPROVED", "CHECKER_APPROVED", "POSTED"];
  const labels = ["Submitted", "Maker Verified", "Checker Approved", "Posted"];
  const colors = ["#f59e0b", "#1565c0", "#2e7d32", "#1b5e20"];
  const currentIndex = steps.indexOf(status);
  const actualIndex = currentIndex === -1 ? (status === "REJECTED" ? -1 : steps.length - 1) : currentIndex;

return (
    <div className="flex items-center gap-1 py-1">
      {status === "REJECTED" ? (
        <div className="flex items-center gap-1.5 px-2 py-0.5 bg-[#fce4ec] border border-[#ef9a9a] rounded-[2px]">
          <XCircle className="w-3 h-3 text-[#c62828]" />
          <span className="text-[8px] font-bold text-[#b71c1c] uppercase tracking-wider">Rejected</span>
        </div>
      ) : (
        <>
          {steps.map((step, i) => {
            const isComplete = i < actualIndex;
            const isCurrent = i === actualIndex;
            return (
              <div key={step} className="flex items-center gap-1">
                <div className={`w-4 h-4 rounded-full flex items-center justify-center text-[8px] font-bold border ${
                  isComplete ? "bg-[#2e7d32] text-white border-[#2e7d32]" :
                  isCurrent ? `bg-white text-[#100841] border-2` :
                  "bg-[#efefff] text-[#c4c9ce] border-[#dfdfdf]"
                }`} style={isCurrent ? { borderColor: colors[i] } : {}}>
                  {isComplete ? <CheckCircle2 className="w-2.5 h-2.5" /> : i + 1}
                </div>
                {i < steps.length - 1 && (
                  <ChevronRight className={`w-2.5 h-2.5 ${i < actualIndex ? "text-[#2e7d32]" : "text-[#dfdfdf]"}`} />
                )}
              </div>
            );
          })}
          <span className="text-[8px] text-[#4f525d] font-medium ml-1">{labels[actualIndex >= 0 ? actualIndex : 0]}</span>
        </>
      )}
    </div>
  );
}

/* ===== Maker/Checker Identity Card ===== */
function IdentityCard({ role, name, verifiedAt }: { role: "Maker" | "Checker"; name: string; verifiedAt?: string }) {
  const isMaker = role === "Maker";
  return (
    <div className={`bg-white border rounded-[3px] p-3 ${isMaker ? "border-[#90caf9]" : "border-[#a5d6a7]"}`}>
      <div className="flex items-center gap-2 mb-2">
        <div className={`w-7 h-7 rounded-full flex items-center justify-center ${isMaker ? "bg-[#e3f2fd]" : "bg-[#e8f5e9]"}`}>
          {isMaker ? <User className="w-3.5 h-3.5 text-[#1565c0]" /> : <ShieldCheck className="w-3.5 h-3.5 text-[#2e7d32]" />}
        </div>
        <div>
          <p className="text-[9px] font-bold uppercase tracking-wider" style={{ color: isMaker ? "#1565c0" : "#2e7d32" }}>{role}</p>
          <p className="text-[11px] font-semibold text-[#100841]">{name}</p>
        </div>
      </div>
      {verifiedAt ? (
        <div className="flex items-center gap-1.5 text-[10px] text-[#2e7d32]">
          <CheckCircle2 className="w-3 h-3" />
          <span className="font-medium">Verified at {verifiedAt}</span>
        </div>
      ) : (
        <div className="text-[10px] text-[#e65100] font-medium">Awaiting verification</div>
      )}
    </div>
  );
}

/* ===== Settlement Detail Panel ===== */
function SettlementDetail({ set, onModalOpen }: { set: Settlement; onModalOpen: (role: "MAKER" | "CHECKER", mode: "APPROVE" | "REJECT") => void }) {
  const relatedRepayment = repaymentRequests.find(r => r.companyId === set.companyId);

return (
    <div className="space-y-3">
      {/* Settlement identity */}
      <div className="bg-[#efefff] border border-[#dfdfdf] rounded-[3px] p-4 shadow-sm">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-[13px] font-bold text-[#100841] flex items-center gap-2">
            <Hash className="w-4 h-4 text-[#31d891]" />
            Settlement {set.id}
          </h3>
          <SettlementStatusBadge status={set.status} />
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2">
          <div className="flex items-center gap-2 text-[11px]">
            <Building2 className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Company:</span>
            <span className="font-medium text-[#100841]">{set.companyName}</span>
          </div>
          <div className="flex items-center gap-2 text-[11px]">
            <User className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Submitted By:</span>
            <span className="font-medium text-[#4f525d]">{set.submittedBy}</span>
          </div>
          <div className="flex items-center gap-2 text-[11px]">
            <Landmark className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Bank Reference:</span>
            <span className="font-mono font-bold text-[#100841]">{set.bankReference}</span>
          </div>
          <div className="flex items-center gap-2 text-[11px]">
            <Repeat className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Payment Method:</span>
            <span className="font-medium text-[#4f525d]">{set.paymentMethod}</span>
          </div>
          <div className="flex items-center gap-2 text-[11px]">
            <ArrowRightLeft className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Amount:</span>
            <span className="font-mono font-bold text-[#2e7d32]">{formatMMK(set.totalAmount)}</span>
          </div>
          <div className="flex items-center gap-2 text-[11px]">
            <Clock className="w-3.5 h-3.5 text-[#868c95]" />
            <span className="text-[#868c95]">Submitted:</span>
            <span className="font-medium text-[#4f525d]">{set.submittedAt}</span>
          </div>
        </div>
      </div>

{/* Maker-Checker identities */}
      <div className="grid grid-cols-2 gap-3">
        <IdentityCard role="Maker" name="Finance Officer A" verifiedAt={set.makerVerifiedAt} />
        <IdentityCard role="Checker" name="Finance Manager B" verifiedAt={set.checkerApprovedAt} />
      </div>

{/* Bank reference verification */}
      <div className="bg-white border border-[#dfdfdf] rounded-[3px] p-3 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
        <h3 className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-2 flex items-center gap-1.5">
          <Landmark className="w-3.5 h-3.5" /> Bank Reference Verification
        </h3>
        <div className="space-y-2">
          <div className="flex items-center justify-between p-2.5 bg-[#efefff] rounded-[2px] border border-[#efefff]">
            <div>
              <p className="text-[11px] font-bold text-[#100841] font-mono">{set.bankReference}</p>
              <p className="text-[9px] text-[#868c95] mt-0.5">Transaction Reference Number</p>
            </div>
            <EnterpriseBadge variant="info">Verified</EnterpriseBadge>
          </div>
          <div className="flex items-center justify-between p-2.5 bg-[#efefff] rounded-[2px] border border-[#efefff]">
            <div>
              <p className="text-[11px] font-bold text-[#2e7d32] font-mono">{formatMMK(set.totalAmount)}</p>
              <p className="text-[9px] text-[#868c95] mt-0.5">Amount Match: {set.paymentMethod}</p>
            </div>
            <EnterpriseBadge variant="success">Match Confirmed</EnterpriseBadge>
          </div>
          <div className="flex items-center gap-2 text-[9px] text-[#e65100] p-2 bg-[#fff8e1] rounded-[2px] border border-[#ffcc80]">
            <ShieldAlert className="w-3 h-3" />
            <span>Maker and Checker must be different users. Both must independently verify bank reference and screenshot.</span>
          </div>
        </div>
      </div>

{/* Screenshot inspection */}
      <div className="bg-white border border-[#dfdfdf] rounded-[3px] p-3 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
        <h3 className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-2 flex items-center gap-1.5">
          <Camera className="w-3.5 h-3.5" /> Screenshot Inspection
        </h3>
        {set.screenshot ? (
          <div className="space-y-2">
            <div className="p-2.5 bg-[#efefff] rounded-[2px] border border-[#efefff]">
              <div className="flex items-center gap-2">
                <Eye className="w-3.5 h-3.5 text-[#868c95]" />
                <span className="text-[11px] font-medium text-[#4f525d]">Bank transfer screenshot attached</span>
              </div>
              <p className="text-[9px] text-[#868c95] mt-1">Shows {formatMMK(set.totalAmount)} transferred via {set.paymentMethod} to {set.companyName}</p>
            </div>
            <div className="flex items-center gap-2 text-[10px] text-[#2e7d32]">
              <CheckCircle2 className="w-3 h-3" />
              <span>Maker confirmed screenshot matches bank reference</span>
            </div>
          </div>
        ) : (
          <div className="flex items-center gap-2 text-[11px] text-[#b71c1c] p-2.5 bg-[#fce4ec] rounded-[2px] border border-[#ef9a9a]">
            <XCircle className="w-3.5 h-3.5" />
            <span className="font-bold">Screenshot Missing — Cannot proceed with verification</span>
          </div>
        )}
      </div>

{/* Related repayment items */}
      {relatedRepayment && (
        <div className="bg-white border border-[#dfdfdf] rounded-[3px] shadow-[0_1px_2px_rgba(0,0,0,0.04)] overflow-hidden">
          <h3 className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest p-3 pb-1.5 flex items-center gap-1.5">
            <FileCheck className="w-3.5 h-3.5" /> Related Repayment Items
          </h3>
          <ScrollArea className="max-h-[250px]">
            <EnterpriseTable
              data={relatedRepayment.items}
              columns={[
                {
                  id: "employee",
                  header: "Employee",
                  accessor: (item) => <span className="text-[11px] font-medium text-[#100841]">{item.employeeName}</span>,
                  searchString: (item) => item.employeeName
                },
                {
                  id: "principal",
                  header: "Principal",
                  isNumeric: true,
                  align: "right",
                  accessor: (item) => item.principal
                },
                {
                  id: "lateFee",
                  header: "Late Fee",
                  isNumeric: true,
                  align: "right",
                  accessor: (item) => item.lateFee,
                  cellClassName: () => "text-[#e65100]"
                },
                {
                  id: "total",
                  header: "Total",
                  isNumeric: true,
                  align: "right",
                  accessor: (item) => item.total,
                  cellClassName: () => "font-bold text-[#100841]"
                },
                {
                  id: "allocation",
                  header: "Alloc %",
                  isNumeric: true,
                  align: "right",
                  accessor: (item) => item.allocationPct + "%",
                  cellClassName: () => "text-[#868c95]"
                }
              ]}
              rowKey={(item) => item.employeeId}
              summary={{
                label: "Total",
                columns: {
                  principal: relatedRepayment.principalAmount,
                  lateFee: relatedRepayment.lateFeeAmount,
                  total: relatedRepayment.totalAmount,
                }
              }}
            />
          </ScrollArea>
        </div>
      )}

{/* Action buttons */}
      <div className="flex items-center gap-2 pt-1">
        {set.status === "SUBMITTED" && (
          <>
            <EnterpriseButton className="h-8 text-[10px] font-semibold bg-[#100841] text-white"
              onClick={() => onModalOpen("MAKER", "APPROVE")}>
              <CheckCircle2 className="w-3 h-3 mr-1" /> Verify as Maker
            </EnterpriseButton>
            <EnterpriseButton variant="secondary" className="h-8 text-[10px] font-medium text-[#b71c1c] border-[#ef9a9a]"
              onClick={() => onModalOpen("MAKER", "REJECT")}>
              <XCircle className="w-3 h-3 mr-1" /> Reject
            </EnterpriseButton>
          </>
        )}
        {set.status === "MAKER_APPROVED" && (
          <>
            <EnterpriseButton className="h-8 text-[10px] font-semibold bg-[#2e7d32] text-white"
              onClick={() => onModalOpen("CHECKER", "APPROVE")}>
              <ShieldCheck className="w-3 h-3 mr-1" /> Approve as Checker
            </EnterpriseButton>
            <EnterpriseButton variant="secondary" className="h-8 text-[10px] font-medium text-[#b71c1c] border-[#ef9a9a]"
              onClick={() => onModalOpen("CHECKER", "REJECT")}>
              <XCircle className="w-3 h-3 mr-1" /> Reject
            </EnterpriseButton>
          </>
        )}
        {set.status === "CHECKER_APPROVED" && (
          <div className="flex items-center gap-2 text-[#2e7d32]">
            <ShieldCheck className="w-3.5 h-3.5" />
            <span className="text-[11px] font-bold uppercase tracking-wider">Settlement Posted — Ledger Updated</span>
          </div>
        )}
        {set.status === "REJECTED" && (
          <div className="flex items-center gap-2 text-[#b71c1c]">
            <XCircle className="w-3.5 h-3.5" />
            <span className="text-[11px] font-bold uppercase tracking-wider">Settlement Rejected</span>
          </div>
        )}
      </div>
    </div>
  );
}

/* ===== MAIN PAGE ===== */
export function SettlementPage() {
  const [selectedSettlement, setSelectedSettlement] = useState<Settlement | null>(null);
  const [modalState, setModalState] = useState<{
    settlement: Settlement;
    role: "MAKER" | "CHECKER";
    mode: "APPROVE" | "REJECT";
  } | null>(null);

const handleModalSubmit = () => setModalState(null);

const columns: ColumnDef<Settlement>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (set) => <span className="font-mono font-bold text-[#100841]">{set.id}</span>,
      searchString: (set) => set.id
    },
    {
      id: "company",
      header: "Company",
      accessor: (set) => (
        <div>
          <p className="text-[11px] font-bold text-[#100841]">{set.companyName}</p>
          <p className="text-[8px] text-[#868c95] font-mono">{set.companyId}</p>
        </div>
      ),
      searchString: (set) => `${set.companyName} ${set.companyId}`
    },
    {
      id: "submittedBy",
      header: "Submitted By",
      accessor: (set) => <span className="text-[11px] text-[#4f525d] font-medium">{set.submittedBy}</span>,
      searchString: (set) => set.submittedBy
    },
    {
      id: "amount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (set) => set.totalAmount
    },
    {
      id: "method",
      header: "Method",
      accessor: (set) => <span className="text-[11px] text-[#4f525d] font-medium">{set.paymentMethod}</span>
    },
    {
      id: "bankRef",
      header: "Bank Ref",
      accessor: (set) => <span className="text-[9px] font-mono text-[#868c95] font-bold">{set.bankReference}</span>,
      searchString: (set) => set.bankReference
    },
    {
      id: "screenshot",
      header: "Evidence",
      accessor: (set) => (
        set.screenshot ? (
          <EnterpriseBadge variant="success">
            <Eye className="w-2.5 h-2.5 mr-0.5" /> Attached
          </EnterpriseBadge>
        ) : (
          <EnterpriseBadge variant="error">Missing</EnterpriseBadge>
        )
      )
    },
    {
      id: "status",
      header: "Status",
      accessor: (set) => <SettlementStatusBadge status={set.status} />
    },
    {
      id: "workflow",
      header: "Workflow",
      accessor: (set) => <WorkflowStepper status={set.status} />
    },
    {
      id: "submittedAt",
      header: "Date",
      accessor: (set) => <span className="text-[9px] text-[#868c95] font-mono">{set.submittedAt}</span>
    }
  ];

const tableActions: TableAction<Settlement>[] = [
    { label: "Verify Settlement", icon: <Eye className="w-3.5 h-3.5" />, onClick: (set) => setSelectedSettlement(set) },
    { label: "Audit Trail", icon: <FileText className="w-3.5 h-3.5" />, onClick: (set) => console.log("Audit", set.id) },
  ];

return (
    <div className="space-y-3">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Shield className="w-4 h-4 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Settlement Verification</h1>
            <p className="text-[10px] text-[#868c95] uppercase tracking-wider">
              Maker-Checker Protocol · {settlements.length} settlements
            </p>
          </div>
        </div>
      </div>

<Tabs defaultValue="queue" className="w-full">
        <TabsList>
          <TabsTrigger value="queue">Settlement Queue</TabsTrigger>
          <TabsTrigger value="detail">Verification Detail</TabsTrigger>
          <TabsTrigger value="history">Posted History</TabsTrigger>
        </TabsList>

<TabsContent value="queue" className="mt-3 outline-none">
          <EnterpriseTable
            data={settlements}
            columns={columns}
            rowKey={(set) => set.id}
            actions={tableActions}
            selectable={true}
            searchPlaceholder="Search by ID, company, or reference..."
          />
        </TabsContent>

<TabsContent value="detail" className="mt-3 outline-none">
          {selectedSettlement ? (
            <SettlementDetail set={selectedSettlement} onModalOpen={(role, mode) => setModalState({ settlement: selectedSettlement, role, mode })} />
          ) : (
            <div className="text-center py-20 bg-slate-50 border border-dashed border-[#dfdfdf] rounded-[3px]">
              <Shield className="w-10 h-10 text-[#dfdfdf] mx-auto mb-3" />
              <p className="text-[11px] font-bold text-[#868c95] uppercase tracking-widest">Select a settlement from the queue to verify</p>
            </div>
          )}
        </TabsContent>

<TabsContent value="history" className="mt-3 outline-none">
          <EnterpriseTable
            data={settlements.filter(s => s.status === "CHECKER_APPROVED" || s.status === "MAKER_APPROVED")}
            columns={columns.filter(c => c.id !== "workflow")}
            rowKey={(set) => set.id}
            searchPlaceholder="Search posted history..."
          />
        </TabsContent>
      </Tabs>

{/* Maker-Checker Modal */}
      {modalState && (
        <MakerCheckerModal
          settlement={modalState.settlement}
          role={modalState.role}
          mode={modalState.mode}
          onSubmit={handleModalSubmit}
          onClose={() => setModalState(null)}
        />
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/transactions/TransactionsPage.tsx"
/**
 * TransactionsPage — Transaction Monitor
 * Design: Enterprise Fintech — SAP Fiori List Report pattern
 * Full transaction lifecycle with journal references and audit trail
 */
import { useState } from "react";
import { formatMMK, transactions, type Transaction } from "@/data/mockData";
import { Search, Eye, Filter, Download } from "lucide-react";
import {
  EnterpriseBadge,
  LedgerDivider,
  EnterpriseTable,
  ColumnDef,
  FilterDef,
  TableAction,
  EnterpriseButton
} from "@/components/EnterpriseComponents";

function TxStatusBadge({ status }: { status: Transaction["status"] }) {
  const variantMap: Record<Transaction["status"], "success" | "warning" | "error" | "info" | "neutral"> = {
    "Approved": "success",
    "Disbursing": "info",
    "Repaid": "success",
    "Overdue": "error",
    "Failed": "neutral",
    "Pending": "warning",
  };
  return <EnterpriseBadge variant={variantMap[status] || "neutral"}>{status}</EnterpriseBadge>;
}

export function TransactionsPage() {
  const [selectedKeys, setSelectedKeys] = useState<Set<string | number>>(new Set());

// Define table columns
  const columns: ColumnDef<Transaction>[] = [
    {
      id: "id",
      header: "TXN ID",
      accessor: (tx) => <span className="font-mono font-bold text-[#100841]">{tx.id}</span>,
      searchString: (tx) => tx.id
    },
    {
      id: "employee",
      header: "Employee",
      accessor: (tx) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{tx.employeeName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{tx.employeeId}</p>
        </div>
      ),
      searchString: (tx) => `${tx.employeeName} ${tx.employeeId}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (tx) => <span className="text-[11px] text-[#4f525d] font-medium">{tx.companyName}</span>,
      searchString: (tx) => tx.companyName
    },
    {
      id: "amount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (tx) => tx.amount
    },
    {
      id: "fee",
      header: "Fee",
      isNumeric: true,
      align: "right",
      accessor: (tx) => tx.fee
    },
    {
      id: "net",
      header: "Net Amount",
      isNumeric: true,
      align: "right",
      accessor: (tx) => tx.netAmount
    },
    {
      id: "payout",
      header: "Payout Method",
      accessor: (tx) => <span className="text-[11px] text-[#4f525d] font-medium">{tx.payoutMethod}</span>
    },
    {
      id: "requested",
      header: "Requested",
      accessor: (tx) => <span className="text-[11px] text-[#4f525d] font-mono">{tx.requestDate}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (tx) => <TxStatusBadge status={tx.status} />
    },
    {
      id: "journal",
      header: "Journal Ref",
      accessor: (tx) => (
        <span className="text-[10px] font-mono text-slate-400 font-semibold">
          {tx.journalRef !== "—" ? tx.journalRef : "—"}
        </span>
      )
    }
  ];

// Define table filters
  const tableFilters: FilterDef<Transaction>[] = [
    {
      id: "status",
      label: "Status",
      options: [
        { label: "Approved", value: "Approved" },
        { label: "Disbursing", value: "Disbursing" },
        { label: "Repaid", value: "Repaid" },
        { label: "Overdue", value: "Overdue" },
        { label: "Failed", value: "Failed" },
        { label: "Pending", value: "Pending" }
      ],
      filterFn: (tx, val) => tx.status === val
    },
    {
      id: "payout",
      label: "Payout Method",
      options: [
        { label: "Bank Transfer", value: "Bank Transfer" },
        { label: "Mobile Wallet", value: "Mobile Wallet" },
        { label: "Agent OTC", value: "Agent OTC" }
      ],
      filterFn: (tx, val) => tx.payoutMethod === val
    }
  ];

// Define table actions
  const tableActions: TableAction<Transaction>[] = [
    {
      label: "View Details",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (tx) => console.log("View", tx.id)
    },
    {
      label: "Download Receipt",
      icon: <Download className="w-3.5 h-3.5" />,
      onClick: (tx) => console.log("Download", tx.id)
    }
  ];

return (
    <div className="space-y-4">
      {/* ===== Page Header ===== */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Transaction Monitor</h1>
          <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">
            Audit-safe tracking for all EWA disbursements
          </p>
        </div>
        <div className="flex items-center gap-2">
           <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Download className="w-3.5 h-3.5" /> Export Data
          </EnterpriseButton>
        </div>
      </div>

<EnterpriseTable
        data={transactions}
        columns={columns}
        rowKey={(tx) => tx.id}
        filters={tableFilters}
        actions={tableActions}
        selectable={true}
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        searchPlaceholder="Search by employee name, ID or TXN ID..."
      />
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/workflow/WorkflowPage.tsx"
import { useState } from "react";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef,
  TableAction
} from "@/components/EnterpriseComponents";
import {
  workflowCases, workItems, workflowActivities,
  type WorkflowCase, type WorkItem, type WorkflowActivity,
} from "@/data/mockData";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import {
  Clock, CheckCircle2, AlertCircle, XCircle, ArrowRight,
  UserCheck, FileText, MessageSquare,
  Play, RotateCcw, Bell, Timer, Activity,
  ShieldCheck, ShieldX, Eye, Users
} from "lucide-react";

/* ===== PRIORITY BADGE ===== */
function PriorityBadge({ priority }: { priority: string }) {
  const variantMap: Record<string, "success" | "warning" | "error" | "info" | "neutral"> = {
    "Critical": "error",
    "High": "warning",
    "Medium": "info",
    "Low": "neutral",
  };
  return <EnterpriseBadge variant={variantMap[priority] || "neutral"}>{priority}</EnterpriseBadge>;
}

/* ===== STATE MACHINE VISUALIZATION ===== */
function StateMachine({ caseData }: { caseData: WorkflowCase }) {
  const budgetPath = ["Submitted", "HR_Review", "Risk_Review", "Finance_Review", "Approved"];
  const importPath = ["Submitted", "Checking", "Maker_Submitted", "Checker_Approved", "Completed"];
  const verificationPath = ["Submitted", "Checking", "Approved"];
  const settlementPath = ["Submitted", "Checking", "Approved"];
  const onboardingPath = ["Submitted", "HR_Review", "Risk_Review", "Finance_Review", "Approved"];

let path: string[] = ["Submitted", "Checking", "Completed"];
  if (caseData.type === "budget_request") path = budgetPath;
  else if (caseData.type === "employee_import") path = importPath;
  else if (caseData.type === "employee_verification") path = verificationPath;
  else if (caseData.type === "settlement") path = settlementPath;
  else if (caseData.type === "company_onboarding") path = onboardingPath;

const currentIndex = path.indexOf(caseData.status);

return (
    <div className="space-y-3">
      <p className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">State Machine Visualization</p>
      <div className="flex items-center gap-0 overflow-x-auto py-2">
        {path.map((step, i) => {
          const isActive = i === currentIndex;
          const isComplete = i < currentIndex;
          const isRejected = caseData.status === "Rejected" && i >= currentIndex;
          return (
            <div key={step} className="flex items-center">
              <div className={cn(
                "flex flex-col items-center px-3 py-1.5 rounded-[2px] border transition-colors",
                isActive ? "bg-[#100841] text-white border-[#100841]" :
                isComplete ? "bg-emerald-500 text-white border-emerald-500" :
                isRejected ? "bg-[#fce4ec] text-[#b71c1c] border-[#ef9a9a]" :
                "bg-[#efefff] text-[#4f525d] border-[#dfdfdf]"
              )}>
                <span className="text-[8px] font-bold uppercase tracking-wider whitespace-nowrap">{step.replace("_", " ")}</span>
              </div>
              {i < path.length - 1 && (
                <div className={cn("w-6 h-0.5 transition-colors", isComplete ? "bg-emerald-500" : isActive ? "bg-[#100841]" : "bg-[#dfdfdf]")} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ===== SLA TIMER ===== */
function SLATimer({ remaining }: { remaining: string }) {
  const isOverdue = remaining === "—" || remaining.includes("—") || remaining.includes("OVERDUE");
  return (
    <span className={cn("inline-flex items-center gap-1 text-[10px] font-mono font-bold", isOverdue ? "text-[#c62828]" : "text-[#e65100]")}>
      <Timer className="w-3 h-3" />
      {isOverdue ? "OVERDUE" : remaining}
    </span>
  );
}

/* ===== AUDIT TRAIL TIMELINE ===== */
function AuditTimeline({ activities }: { activities: WorkflowActivity[] }) {
  const typeIcons: Record<string, { icon: React.ElementType; color: string; bg: string }> = {
    "created": { icon: Activity, color: "text-[#100841]", bg: "bg-[#e3f2fd]" },
    "submitted": { icon: Play, color: "text-[#31d891]", bg: "bg-[#e1f5fe]" },
    "approved": { icon: CheckCircle2, color: "text-emerald-600", bg: "bg-[#e8f5e9]" },
    "rejected": { icon: XCircle, color: "text-[#c62828]", bg: "bg-[#fce4ec]" },
    "returned": { icon: RotateCcw, color: "text-[#e65100]", bg: "bg-[#fff8e1]" },
    "escalated": { icon: AlertCircle, color: "text-[#c62828]", bg: "bg-[#fce4ec]" },
    "assigned": { icon: Users, color: "text-[#0d47a1]", bg: "bg-[#efefff]" },
    "claimed": { icon: UserCheck, color: "text-[#0d47a1]", bg: "bg-[#efefff]" },
    "completed": { icon: CheckCircle2, color: "text-emerald-600", bg: "bg-[#e8f5e9]" },
    "comment": { icon: MessageSquare, color: "text-[#4f525d]", bg: "bg-[#efefff]" },
  };
  return (
    <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
      {activities.map((a, i) => {
        const ti = typeIcons[a.type] || typeIcons.comment;
        const Icon = ti.icon;
        return (
          <div key={a.id} className="flex gap-4">
            <div className="flex flex-col items-center">
              <div className={cn("w-8 h-8 rounded-full flex items-center justify-center border border-[#dfdfdf]", ti.bg)}>
                <Icon className={cn("w-4 h-4", ti.color)} />
              </div>
              {i < activities.length - 1 && <div className="w-[1px] flex-1 bg-[#dfdfdf] my-1" />}
            </div>
            <div className="pb-6 flex-1">
              <div className="flex items-center justify-between">
                <span className="text-[12px] font-bold text-[#100841]">{a.action}</span>
                <span className="text-[10px] text-[#4f525d] font-mono">{a.timestamp}</span>
              </div>
              <p className="text-[10px] text-[#4f525d] mt-0.5 font-medium">{a.actor} · <span className="uppercase tracking-wider">{a.actorRole}</span></p>
              {a.details && (
                <div className="mt-2 p-2 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                  <p className="text-[10px] text-[#4f525d] leading-relaxed">{a.details}</p>
                </div>
              )}
              {a.fromState && a.toState && (
                <div className="flex items-center gap-2 mt-2">
                  <span className="text-[9px] font-bold text-[#e65100] uppercase tracking-wider bg-[#fff8e1] px-1.5 py-0.5 rounded-[2px]">{a.fromState.replace("_", " ")}</span>
                  <ArrowRight className="w-3 h-3 text-[#4f525d]" />
                  <span className="text-[9px] font-bold text-[#2e7d32] uppercase tracking-wider bg-[#e8f5e9] px-1.5 py-0.5 rounded-[2px]">{a.toState.replace("_", " ")}</span>
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ===== WORKFLOW CASE DETAIL PANEL ===== */
function CaseDetailPanel({ caseData, onClose }: { caseData: WorkflowCase; onClose: () => void }) {
  const caseActivities = workflowActivities.filter(a => a.caseId === caseData.id);
  const [activeTab, setActiveTab] = useState("overview");

const tabs = [
    { id: "overview", label: "Overview" },
    { id: "timeline", label: "Audit Trail" },
    { id: "actions", label: "Actions" },
  ];

return (
    <Sheet open onOpenChange={onClose}>
      <SheetContent side="right" className="w-[550px] p-0 border-l-[#dfdfdf]">
        <div className="h-full flex flex-col">
          <SheetHeader className="p-6 border-b border-[#dfdfdf] bg-[#efefff]">
            <SheetTitle className="text-[15px] font-bold text-[#100841] flex items-center gap-2 uppercase tracking-wide">
              <CaseTypeIcon type={caseData.type} />
              {caseData.id} — {caseData.title}
            </SheetTitle>
          </SheetHeader>

<div className="flex-1 overflow-y-auto p-6 space-y-6">
            {/* Case Info Grid */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">Status</p><EnterpriseBadge variant={caseData.status === "Approved" ? "success" : "info"}>{caseData.status.replace("_", " ")}</EnterpriseBadge></div>
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">Subject</p><p className="text-[12px] font-bold text-[#100841]">{caseData.subject}</p></div>
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">Priority</p><PriorityBadge priority={caseData.priority} /></div>
              </div>
              <div className="space-y-4">
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">Owner</p><p className="text-[12px] font-bold text-[#100841]">{caseData.currentOwner}</p><p className="text-[10px] text-[#4f525d] uppercase">{caseData.ownerRole}</p></div>
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">SLA</p><SLATimer remaining={caseData.slaRemaining} /></div>
                 <div><p className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest mb-1">Related ID</p><p className="text-[11px] font-mono font-bold text-[#31d891]">{caseData.relatedId || "—"}</p></div>
              </div>
            </div>

{/* State Machine */}
            <StateMachine caseData={caseData} />

{/* Tabs */}
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="w-full justify-start rounded-none bg-transparent border-b border-[#dfdfdf] p-0 h-auto">
                {tabs.map(tab => (
                  <TabsTrigger 
                    key={tab.id} 
                    value={tab.id}
                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-[#100841] data-[state=active]:bg-transparent px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-[#4f525d] data-[state=active]:text-[#100841]"
                  >
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>

<div className="pt-4">
                <TabsContent value="overview" className="mt-0 outline-none space-y-4">
                  <div className="p-4 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                    <p className="text-[12px] text-[#4f525d] leading-relaxed">
                      This case is currently at the <strong>{caseData.currentStep}</strong> stage. 
                      The next action is required from <strong>{caseData.currentOwner}</strong> ({caseData.ownerRole}). 
                      SLA expires in <strong>{caseData.slaRemaining}</strong>.
                    </p>
                  </div>
                </TabsContent>

<TabsContent value="actions" className="mt-0 outline-none space-y-3">
                  {caseActivities.map(a => (
                    <div key={a.id} className="flex items-center justify-between text-[11px] p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px]">
                      <span className="font-bold text-[#100841] uppercase tracking-wide">{a.action}</span>
                      <span className="font-mono text-[#4f525d]">{a.actor}</span>
                    </div>
                  ))}
                  {caseActivities.length === 0 && (
                    <div className="text-center py-12 opacity-40">
                      <FileText className="w-10 h-10 mx-auto mb-2" />
                      <p className="text-[11px] font-bold uppercase tracking-widest">No activities logged yet</p>
                    </div>
                  )}
                </TabsContent>
              </div>
            </Tabs>
          </div>

<div className="p-6 border-t border-[#dfdfdf] bg-[#efefff] flex items-center gap-3">
             {caseData.status !== "Completed" && caseData.status !== "Rejected" && caseData.status !== "Cancelled" && (
                <>
                  <EnterpriseButton variant="primary" className="flex-1 h-10 uppercase tracking-widest text-[11px] font-bold bg-[#100841]">
                    <CheckCircle2 className="w-4 h-4" /> Approve
                  </EnterpriseButton>
                  <EnterpriseButton variant="secondary" className="flex-1 h-10 uppercase tracking-widest text-[11px] font-bold border-[#c62828] text-[#c62828] hover:bg-[#fce4ec]">
                    <XCircle className="w-4 h-4" /> Reject
                  </EnterpriseButton>
                </>
             )}
             <EnterpriseButton variant="secondary" className="w-12 h-10 p-0" onClick={onClose}>
                <RotateCcw className="w-4 h-4" />
             </EnterpriseButton>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}

export function WorkflowPage() {
  const [selectedCase, setSelectedCase] = useState<WorkflowCase | null>(null);
  const [caseDetailOpen, setCaseDetailOpen] = useState(false);
  const [workItemAction, setWorkItemAction] = useState<WorkItem | null>(null);

const pendingTasks = workItems.filter(w => w.status === "Pending" || w.status === "Assigned" || w.status === "Overdue");
  const inProgressTasks = workItems.filter(w => w.status === "InProgress");
  const completedTasks = workItems.filter(w => w.status === "Completed");

const activeCases = workflowCases.filter(c => c.status !== "Completed" && c.status !== "Rejected" && c.status !== "Cancelled");
  const historyCases = workflowCases.filter(c => c.status === "Completed" || c.status === "Rejected" || c.status === "Cancelled");

const taskColumns: ColumnDef<WorkItem>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (item) => <span className="font-mono font-bold text-[#100841]">{item.id}</span>,
      searchString: (item) => item.id
    },
    {
      id: "case",
      header: "Case Context",
      accessor: (item) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{item.caseTitle}</p>
          <div className="flex items-center gap-1 mt-0.5">
            <CaseTypeIcon type={item.caseType} />
            <span className="text-[9px] text-[#4f525d] uppercase font-bold tracking-tighter">{item.caseType.replace("_", " ")}</span>
          </div>
        </div>
      ),
      searchString: (item) => item.caseTitle
    },
    {
      id: "step",
      header: "Current Step",
      accessor: (item) => <span className="text-[11px] font-bold text-[#100841] uppercase tracking-wider bg-[#efefff] px-2 py-1 border border-[#dfdfdf] rounded-[2px]">{item.stepName}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (item) => {
        const variant = item.status === "Overdue" ? "error" : item.status === "InProgress" ? "info" : "warning";
        return <EnterpriseBadge variant={variant}>{item.status.replace("_", " ")}</EnterpriseBadge>;
      }
    },
    {
      id: "priority",
      header: "Priority",
      accessor: (item) => <PriorityBadge priority={item.priority} />
    },
    {
      id: "sla",
      header: "SLA Due",
      accessor: (item) => <SLATimer remaining={item.slaDueAt.replace("2026-07-12", "0h remaining").replace("2026-07-13", "1d remaining").replace("2026-07-14", "2d remaining")} />
    },
    {
      id: "escalation",
      header: "Escalation",
      accessor: (item) => item.escalationLevel > 0 ? (
        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-[#c62828] uppercase tracking-widest">
          <AlertCircle className="w-3 h-3" /> L{item.escalationLevel}
        </span>
      ) : <span className="text-slate-200">—</span>
    }
  ];

const taskActions: TableAction<WorkItem>[] = [
    {
      label: "View Detail",
      icon: <Eye className="w-3.5 h-3.5" />,
      onClick: (item) => {
        const cs = workflowCases.find(c => c.id === item.caseId);
        if (cs) { setSelectedCase(cs); setCaseDetailOpen(true); }
      }
    },
    {
      label: "Process Action",
      icon: <CheckCircle2 className="w-3.5 h-3.5" />,
      onClick: (item) => setWorkItemAction(item)
    }
  ];

const caseColumns: ColumnDef<WorkflowCase>[] = [
    {
      id: "id",
      header: "Case ID",
      accessor: (c) => <span className="font-mono font-bold text-[#100841]">{c.id}</span>,
      searchString: (c) => c.id
    },
    {
      id: "title",
      header: "Request Title",
      accessor: (c) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{c.title}</p>
          <p className="text-[10px] text-[#4f525d]">{c.subject}</p>
        </div>
      ),
      searchString: (c) => c.title
    },
    {
      id: "type",
      header: "Type",
      accessor: (c) => (
        <div className="flex items-center gap-1">
          <CaseTypeIcon type={c.type} />
          <span className="text-[10px] text-[#4f525d] font-bold uppercase">{c.type.replace("_", " ")}</span>
        </div>
      )
    },
    {
      id: "status",
      header: "Status",
      accessor: (c) => <EnterpriseBadge variant={c.status === "Approved" || c.status === "Completed" ? "success" : "info"}>{c.status.replace("_", " ")}</EnterpriseBadge>
    },
    {
      id: "step",
      header: "Current Step",
      accessor: (c) => <span className="text-[11px] font-bold text-[#100841] uppercase tracking-wider">{c.currentStep}</span>
    },
    {
      id: "owner",
      header: "Current Owner",
      accessor: (c) => (
        <div>
          <p className="text-[11px] font-bold text-[#100841]">{c.currentOwner}</p>
          <p className="text-[9px] text-[#4f525d] uppercase tracking-tighter">{c.ownerRole}</p>
        </div>
      )
    },
    {
      id: "sla",
      header: "SLA",
      accessor: (c) => <SLATimer remaining={c.slaRemaining} />
    }
  ];

const caseActions: TableAction<WorkflowCase>[] = [
    {
      label: "Full History",
      icon: <FileText className="w-3.5 h-3.5" />,
      onClick: (c) => { setSelectedCase(c); setCaseDetailOpen(true); }
    }
  ];

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Activity className="w-5 h-5 text-[#31d891]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Enterprise Workflow Engine</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Unified case management and audit-safe task orchestration</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <EnterpriseButton variant="secondary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px]">
            <Bell className="w-3.5 h-3.5" /> Inbox ({pendingTasks.length})
          </EnterpriseButton>
        </div>
      </div>

{/* Summary Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        <EnterpriseKpiCard
          label="Pending Tasks"
          value={pendingTasks.length}
          accentColor="error"
          icon={<Clock className="w-3.5 h-3.5 text-[#c62828]" />}
        />
        <EnterpriseKpiCard
          label="In Progress"
          value={inProgressTasks.length}
          accentColor="info"
          icon={<Activity className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
        <EnterpriseKpiCard
          label="Completed"
          value={completedTasks.length}
          accentColor="success"
          icon={<CheckCircle2 className="w-3.5 h-3.5 text-[#2e7d32]" />}
        />
        <EnterpriseKpiCard
          label="Active Cases"
          value={activeCases.length}
          accentColor="amber"
          icon={<AlertCircle className="w-3.5 h-3.5 text-[#e65100]" />}
        />
        <EnterpriseKpiCard
          label="Escalated"
          value={activeCases.filter(c => c.escalationLevel > 0).length}
          accentColor="error"
          icon={<ShieldX className="w-3.5 h-3.5 text-[#c62828]" />}
        />
      </div>

<Tabs defaultValue="tasks" className="w-full">
        <TabsList>
          <TabsTrigger value="tasks">My Worklist</TabsTrigger>
          <TabsTrigger value="requests">Active Requests</TabsTrigger>
          <TabsTrigger value="history">Audit History</TabsTrigger>
        </TabsList>

<TabsContent value="tasks" className="mt-4 outline-none">
          <EnterpriseTable
            data={pendingTasks}
            columns={taskColumns}
            rowKey={(item) => item.id}
            actions={taskActions}
            selectable={true}
            searchPlaceholder="Filter my work items..."
          />
        </TabsContent>

<TabsContent value="requests" className="mt-4 outline-none">
          <EnterpriseTable
            data={activeCases}
            columns={caseColumns}
            rowKey={(c) => c.id}
            actions={caseActions}
            searchPlaceholder="Filter all active cases..."
          />
        </TabsContent>

<TabsContent value="history" className="mt-4 outline-none space-y-6">
          <EnterpriseTable
            data={historyCases}
            columns={caseColumns}
            rowKey={(c) => c.id}
            actions={caseActions}
            searchPlaceholder="Search historical cases..."
          />
          
          <EnterpriseCard className="p-4 border-[#dfdfdf] shadow-sm">
             <h3 className="text-[11px] font-bold text-[#100841] uppercase tracking-widest mb-4">Recent Audit Stream</h3>
             <AuditTimeline activities={workflowActivities.slice(-6).reverse()} />
          </EnterpriseCard>
        </TabsContent>
      </Tabs>

{/* Case Detail Panel */}
      {caseDetailOpen && selectedCase && (
        <CaseDetailPanel caseData={selectedCase} onClose={() => setCaseDetailOpen(false)} />
      )}

{/* Action Modal */}
      <Dialog open={!!workItemAction} onOpenChange={() => setWorkItemAction(null)}>
        <DialogContent className="max-w-md p-0 border-none rounded-[3px] overflow-hidden">
          <div className="bg-[#100841] p-4 flex items-center justify-between">
             <h2 className="text-[14px] font-bold text-white uppercase tracking-wider">Process Work Item</h2>
             <EnterpriseBadge variant="neutral" className="bg-white/10 text-white border-white/20">{workItemAction?.id}</EnterpriseBadge>
          </div>
          
          <div className="p-6 space-y-6">
            {workItemAction && (
              <>
                <div className="space-y-4">
                  <div className="p-3 bg-[#efefff] border border-[#dfdfdf] rounded-[2px] space-y-2">
                    <div className="flex justify-between items-center"><span className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">Case Context</span><span className="text-[11px] font-bold text-[#100841]">{workItemAction.caseTitle}</span></div>
                    <div className="flex justify-between items-center"><span className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">Current Step</span><span className="text-[11px] font-bold text-[#100841] uppercase tracking-widest">{workItemAction.stepName}</span></div>
                    <div className="flex justify-between items-center"><span className="text-[10px] font-bold text-[#4f525d] uppercase tracking-widest">Priority</span><PriorityBadge priority={workItemAction.priority} /></div>
                  </div>

<div className="space-y-2">
                    <label className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">Action Selection</label>
                    <div className="grid grid-cols-2 gap-2">
                      <EnterpriseButton variant="primary" className="bg-[#100841] uppercase tracking-widest text-[10px] h-10">
                        <CheckCircle2 className="w-3.5 h-3.5" /> Approve
                      </EnterpriseButton>
                      <EnterpriseButton variant="secondary" className="border-[#c62828] text-[#c62828] hover:bg-[#fce4ec] uppercase tracking-widest text-[10px] h-10">
                        <XCircle className="w-3.5 h-3.5" /> Reject
                      </EnterpriseButton>
                    </div>
                  </div>

<div className="space-y-2">
                    <label className="text-[11px] font-bold text-[#4f525d] uppercase tracking-widest">Decision Remarks</label>
                    <Textarea placeholder="Enter mandatory reason for rejection or optional comment for approval..." className="text-[12px] border-[#dfdfdf] rounded-[2px]" rows={4} />
                  </div>
                </div>
              </>
            )}
          </div>

<div className="p-4 bg-[#efefff] border-t border-[#dfdfdf] flex justify-end gap-2">
             <EnterpriseButton variant="secondary" className="h-9 px-4 uppercase tracking-widest text-[10px] font-bold" onClick={() => setWorkItemAction(null)}>Cancel</EnterpriseButton>
             <EnterpriseButton variant="primary" className="h-9 px-6 bg-[#100841] uppercase tracking-widest text-[10px] font-bold">Confirm Transaction</EnterpriseButton>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/pages/writeoff/WriteOffPage.tsx"
/**
 * WriteOffPage — Write-Off & Loss Provision
 * Design: Neobrutalist Fintech — Enterprise write-off management
 */
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  LedgerDivider,
  EnterpriseTable,
  EnterpriseKpiCard,
  ColumnDef
} from "@/components/EnterpriseComponents";
import { formatMMK } from "@/data/mockData";
import { AlertTriangle, XCircle, FileText, Plus } from "lucide-react";

const writeOffs = [
  { id: "WO-001", employeeName: "Phyo Min Soe", employeeId: "EMP-0019", companyName: "Skyline Trading", amount: 150000, daysOverdue: 120, reason: "Employee resigned, no payroll deduction possible", status: "Approved", approvedBy: "Finance", date: "2026-06-15" },
  { id: "WO-002", employeeName: "Aung Thu", employeeId: "EMP-0023", companyName: "TechBridge Solutions", amount: 85000, daysOverdue: 90, reason: "Company dispute, employee terminated", status: "Pending", approvedBy: "—", date: "2026-07-01" },
  { id: "WO-003", employeeName: "Mya Mya Aye", employeeId: "EMP-0011", companyName: "Myanmar Tech Solutions", amount: 200000, daysOverdue: 150, reason: "Fraudulent transaction detected", status: "Under Review", approvedBy: "—", date: "2026-07-05" },
];

export function WriteOffPage() {
  const columns: ColumnDef<any>[] = [
    {
      id: "id",
      header: "ID",
      accessor: (wo) => <span className="font-mono font-bold text-[#100841]">{wo.id}</span>,
      searchString: (wo) => wo.id
    },
    {
      id: "employee",
      header: "Employee",
      accessor: (wo) => (
        <div>
          <p className="text-[12px] font-bold text-[#100841]">{wo.employeeName}</p>
          <p className="text-[9px] text-[#4f525d] font-mono">{wo.employeeId}</p>
        </div>
      ),
      searchString: (wo) => `${wo.employeeName} ${wo.employeeId}`
    },
    {
      id: "company",
      header: "Company",
      accessor: (wo) => <span className="text-[11px] text-[#4f525d] font-medium">{wo.companyName}</span>,
      searchString: (wo) => wo.companyName
    },
    {
      id: "amount",
      header: "Amount",
      isNumeric: true,
      align: "right",
      accessor: (wo) => wo.amount,
      cellClassName: () => "text-[#c62828] font-bold"
    },
    {
      id: "daysOverdue",
      header: "Overdue",
      isNumeric: true,
      align: "right",
      accessor: (wo) => wo.daysOverdue + " Days",
      cellClassName: () => "text-[#e65100] font-bold"
    },
    {
      id: "reason",
      header: "Reason",
      accessor: (wo) => <span className="text-[11px] text-[#4f525d] max-w-[200px] truncate block">{wo.reason}</span>
    },
    {
      id: "status",
      header: "Status",
      accessor: (wo) => {
        const variant = wo.status === "Approved" ? "error" : wo.status === "Pending" ? "warning" : "info";
        return <EnterpriseBadge variant={variant}>{wo.status}</EnterpriseBadge>;
      }
    },
    {
      id: "date",
      header: "Date",
      accessor: (wo) => <span className="text-[10px] font-mono text-[#868c95]">{wo.date}</span>
    }
  ];

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <XCircle className="w-4 h-4 text-[#c62828]" />
          <div>
            <h1 className="text-[15px] font-bold text-[#100841] uppercase tracking-wide">Write-Off & Loss Provision</h1>
            <p className="text-[10px] text-[#4f525d] uppercase tracking-wider mt-0.5">Uncollectible EWA management</p>
          </div>
        </div>
        <EnterpriseButton variant="primary" className="h-8 py-0 px-3 flex items-center gap-1 text-[10px] bg-[#c62828] hover:bg-[#b71c1c] text-white">
          <Plus className="w-3.5 h-3.5" /> Initiate Write-Off
        </EnterpriseButton>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <EnterpriseKpiCard
          label="Total Written Off"
          value={formatMMK(writeOffs.reduce((s, w) => s + w.amount, 0))}
          accentColor="error"
          icon={<XCircle className="w-3.5 h-3.5 text-[#c62828]" />}
        />
        <EnterpriseKpiCard
          label="Pending Approval"
          value={writeOffs.filter(w => w.status === "Pending").length}
          accentColor="amber"
          icon={<AlertTriangle className="w-3.5 h-3.5 text-[#e65100]" />}
        />
        <EnterpriseKpiCard
          label="Under Review"
          value={writeOffs.filter(w => w.status === "Under Review").length}
          accentColor="info"
          icon={<FileText className="w-3.5 h-3.5 text-[#0d47a1]" />}
        />
      </div>

<EnterpriseTable
        data={writeOffs}
        columns={columns}
        rowKey={(wo) => wo.id}
        searchPlaceholder="Search write-off cases..."
      />
    </div>
  );
}
[V0_FILE]css:file="/client/src/index.css"
GENERATING126:Tb13de,[V0_FILE]typescriptreact:file="client/src/App.tsx"
/**
 * EWA 3.0 2026 — Enterprise UI Prototype
 * Design: Neobrutalist Fintech | Primary: Deep Navy (#100841) | Accent: Teal (#31d891)
 * Command Center Layout | Role-Based View Switching | 18 Enterprise Modules
 */
import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/NotFound";
import { Route, Router, Switch } from "wouter";
import ErrorBoundary from "./components/ErrorBoundary";
import { ThemeProvider } from "./contexts/ThemeContext";
import { ViewProvider } from "./contexts/ViewContext";
import { PortalLayout } from "./layouts/PortalLayout";

function AppRouter() {
  const base = import.meta.env.BASE_URL?.replace(/\/$/, "") || "";

return (
    <Router base={base}>
      <Switch>
        <Route path={"/"} component={PortalLayout} />
        <Route path={"/module/:module"} component={PortalLayout} />
        <Route path={"/404"} component={NotFound} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="light">
        <ViewProvider>
          <TooltipProvider>
            <Toaster />
            <AppRouter />
          </TooltipProvider>
        </ViewProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;
[V0_FILE]typescriptreact:file="client/src/components/EmployeeDetailSheet.tsx"
/**
 * EmployeeDetailSheet — Full employee detail with 9 tabbed sections
 * Tabs: Personal | Employment | Payroll | Budget | Policies | Bank | Documents | History | Transactions
 */
import { useState, useMemo } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { formatMMK, employees, transactions, type Employee, type Transaction } from "@/data/mockData";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  EnterpriseCard,
  EnterpriseBadge,
  EnterpriseButton,
  EnterpriseTable,
  ColumnDef
} from "@/components/EnterpriseComponents";
import { TransactionTimeline } from "@/components/TransactionTimeline";
import {
  ShieldCheck, ShieldX, Clock, User, Building2, Wallet, FileText, Landmark,
  History, CreditCard, AlertCircle, Eye, Download, UserCheck, Lock,
  Calendar, MapPin, Briefcase, Hash
} from "lucide-react";

interface Props {
  employee: Employee | null;
  onClose: () => void;
}

function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <EnterpriseCard className="p-4 mb-4">
      <h4 className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">{title}</h4>
      {children}
    </EnterpriseCard>
  );
}

// ─── TAB COMPONENTS ──────────────────────────────────────────────────────────

function PersonalTab({ emp }: { emp: Employee }) {
  return (
    <div className="space-y-4">
      <SectionCard title="Personal Information">
        <FieldRow label="Employee ID" value={emp.employeeId} highlight />
        <FieldRow label="Full Name" value={emp.name} />
        <FieldRow label="Company" value={emp.companyName} />
        <FieldRow label="Branch" value={emp.branch} />
        <FieldRow label="Join Date" value={emp.joinDate} />
        <FieldRow label="KYC Level" value={
          <span className="flex items-center gap-1">
            <UserCheck className={`w-3 h-3 ${emp.kycLevel === 2 ? "text-emerald-500" : "text-amber-500"}`} />
            Level {emp.kycLevel}
          </span>
        } />
      </SectionCard>
      <SectionCard title="Verification Status">
        <div className="space-y-2">
          <div className="flex items-center justify-between p-2 rounded bg-white border border-slate-200">
            <div className="flex items-center gap-2">
              <Briefcase className="w-3.5 h-3.5 text-slate-400" />
              <span className="text-xs font-medium text-slate-600">Employment Verification</span>
            </div>
            <EnterpriseBadge variant={emp.verification.employment === "Verified" ? "success" : "warning"}>
              {emp.verification.employment}
            </EnterpriseBadge>
          </div>
          <div className="flex items-center justify-between p-2 rounded bg-white border border-slate-200">
            <div className="flex items-center gap-2">
              <Lock className="w-3.5 h-3.5 text-slate-400" />
              <span className="text-xs font-medium text-slate-600">EWA Auto-Approval</span>
            </div>
            <EnterpriseBadge variant={emp.verification.ewaAutoApproved ? "success" : "warning"}>
              {emp.verification.ewaAutoApproved ? "Approved" : "Not Auto-Approved"}
            </EnterpriseBadge>
          </div>
        </div>
        <div className="mt-3 p-3 rounded bg-[#100841]/5 border border-[#100841]/10">
          <p className="text-[11px] text-[#100841]/80 font-medium">Both Employment Verification AND EWA Auto-Approval must pass for Trusted status and instant disbursement eligibility.</p>
        </div>
      </SectionCard>
    </div>
  );
}

function EmploymentTab({ emp }: { emp: Employee }) {
  return (
    <div className="space-y-4">
      <SectionCard title="Employment Details">
        <FieldRow label="Employee ID" value={emp.employeeId} highlight />
        <FieldRow label="Name" value={emp.name} />
        <FieldRow label="Company" value={
          <span className="flex items-center gap-1">
            <Building2 className="w-3 h-3 text-slate-400" />
            {emp.companyName}
          </span>
        } />
        <FieldRow label="Branch" value={
          <span className="flex items-center gap-1">
            <MapPin className="w-3 h-3 text-slate-400" />
            {emp.branch}
          </span>
        } />
        <FieldRow label="Status" value={(
          <EnterpriseBadge variant={
            emp.status === "Active" ? "success" :
            emp.status === "Frozen" ? "error" :
            "warning"
          }>{emp.status}</EnterpriseBadge>
        )} />
        <FieldRow label="Verification" value={<VerificationBadge emp={emp} />} />
      </SectionCard>
      <SectionCard title="Salary & EWA Parameters">
        <FieldRow label="Base Salary" value={formatMMK(emp.salary)} highlight />
        <FieldRow label="EWA Cap (50%)" value={formatMMK(emp.ewaCap)} />
        <FieldRow label="Current Available" value={
          <span className={emp.ewaAvailable > 0 ? "text-emerald-600" : "text-slate-300"}>{emp.ewaAvailable > 0 ? formatMMK(emp.ewaAvailable) : "—"}</span>
        } />
        <FieldRow label="Outstanding" value={
          <span className={emp.outstanding > 0 ? "text-amber-600" : "text-emerald-500"}>{emp.outstanding > 0 ? formatMMK(emp.outstanding) : "0"}</span>
        } />
      </SectionCard>
    </div>
  );
}

function PayrollTab({ emp }: { emp: Employee }) {
  const empTxns = transactions.filter(t => t.employeeId === emp.id);
  const totalAdvanced = empTxns.reduce((s, t) => s + t.amount, 0);
  const totalFees = empTxns.reduce((s, t) => s + t.fee, 0);

return (
    <div className="space-y-4">
      <SectionCard title="Payroll Summary">
        <FieldRow label="Base Salary" value={formatMMK(emp.salary)} highlight />
        <FieldRow label="Total Advanced (Cycle)" value={formatMMK(totalAdvanced)} />
        <FieldRow label="Total Fees (Cycle)" value={formatMMK(totalFees)} />
        <FieldRow label="Net Payouts (Cycle)" value={formatMMK(empTxns.reduce((s, t) => s + t.netAmount, 0))} />
        <FieldRow label="EWA Cap" value={formatMMK(emp.ewaCap)} />
        <FieldRow label="Cap Utilization" value={
          <span className="text-amber-600">{(totalAdvanced / emp.ewaCap * 100).toFixed(1)}%</span>
        } />
      </SectionCard>
      <SectionCard title="Transaction Count">
        <div className="flex gap-4">
          <div className="text-center p-3 bg-white rounded border border-slate-200 flex-1">
            <p className="text-lg font-bold text-[#100841] font-mono">{empTxns.length}</p>
            <p className="text-[10px] text-slate-400 uppercase tracking-wider">Total Requests</p>
          </div>
          <div className="text-center p-3 bg-white rounded border border-slate-200 flex-1">
            <p className="text-lg font-bold text-emerald-600 font-mono">{empTxns.filter(t => t.status === "Repaid").length}</p>
            <p className="text-[10px] text-slate-400 uppercase tracking-wider">Repaid</p>
          </div>
          <div className="text-center p-3 bg-white rounded border border-slate-200 flex-1">
            <p className="text-lg font-bold text-amber-600 font-mono">{empTxns.filter(t => t.status === "Approved" || t.status === "Disbursing").length}</p>
            <p className="text-[10px] text-slate-400 uppercase tracking-wider">Active</p>
          </div>
        </div>
      </SectionCard>
    </div>
  );
}

function BudgetTab({ emp }: { emp: Employee }) {
  const companyBudget = { total: 15000000, utilized: 8200000, remaining: 6800000 };
  const utilization = (companyBudget.utilized / companyBudget.total * 100);

return (
    <div className="space-y-4">
      <SectionCard title="Budget Eligibility">
        <FieldRow label="Salary × EWA%" value={`${formatMMK(emp.salary)} × 50%`} />
        <FieldRow label="Calculated EWA Cap" value={formatMMK(emp.ewaCap)} highlight />
        <FieldRow label="Pro-rata Factor" value="1.0 (Full cycle)" />
        <FieldRow label="Budget Check" value={
          <span className="text-emerald-600 font-medium">✓ Sufficient</span>
        } />
      </SectionCard>
      <SectionCard title="Company Budget Overview">
        <div className="space-y-2">
          <FieldRow label="Total Budget" value={formatMMK(companyBudget.total)} />
          <FieldRow label="Utilized" value={<span className="text-amber-600">{formatMMK(companyBudget.utilized)}</span>} />
          <FieldRow label="Remaining" value={<span className="text-emerald-600">{formatMMK(companyBudget.remaining)}</span>} />
        </div>
        <div className="mt-3">
          <div className="flex items-center justify-between text-[10px] text-slate-500 mb-1">
            <span>Utilization</span>
            <span className="font-bold">{utilization.toFixed(1)}%</span>
          </div>
          <div className="h-2 bg-slate-200 rounded-full overflow-hidden">
            <div className="h-full bg-gradient-to-r from-[#31d891] to-[#100841] rounded-full transition-all" style={{ width: `${utilization}%` }} />
          </div>
        </div>
      </SectionCard>
      <SectionCard title="Cap Generation">
        <FieldRow label="Cycle Limit" value={formatMMK(emp.ewaCap)} />
        <FieldRow label="Daily Available" value={formatMMK(Math.floor(emp.ewaCap / 30))} />
        <FieldRow label="Maximum Withdrawal" value={formatMMK(Math.floor(emp.ewaCap * 0.8))} />
        <FieldRow label="Current Available" value={
          <span className={emp.ewaAvailable > 0 ? "text-emerald-600 font-bold" : "text-slate-300"}>{emp.ewaAvailable > 0 ? formatMMK(emp.ewaAvailable) : "—"}</span>
        } />
      </SectionCard>
    </div>
  );
}

function PoliciesTab({ emp }: { emp: Employee }) {
  return (
    <div className="space-y-4">
      <SectionCard title="Assigned Policies">
        {["Payroll Policy", "EWA Policy", "Withdrawal Policy", "Fee Policy", "Company Rules", "Employee Category Rules"].map((p, i) => (
          <div key={i} className="flex items-center justify-between p-2 rounded bg-white border border-slate-200">
            <span className="text-xs font-medium text-slate-700">{p}</span>
            <EnterpriseBadge variant="success" className="text-[10px]">Active</EnterpriseBadge>
          </div>
        ))}
      </SectionCard>
      <SectionCard title="Policy Engine Assignment">
        <p className="text-[11px] text-slate-500 mb-2">Policies assigned based on employee attributes:</p>
        <FieldRow label="Payroll Cycle" value="Monthly (25th)" />
        <FieldRow label="EWA Eligibility" value={emp.verification.trustedEmployee ? "Instant" : "Requires Approval"} />
        <FieldRow label="Max Requests/Day" value="1" />
        <FieldRow label="Max Requests/Month" value="5" />
      </SectionCard>
    </div>
  );
}

function BankTab({ emp }: { emp: Employee }) {
  return (
    <div className="space-y-4">
      <SectionCard title="Bank Account">
        <FieldRow label="Bank Name" value="KBZ Bank" />
        <FieldRow label="Account Number" value="***-***-****-4521" />
        <FieldRow label="Account Type" value="Savings" />
        <FieldRow label="Branch" value="Main Branch, Yangon" />
        <FieldRow label="Status" value={<EnterpriseBadge variant="success" className="text-[10px]">Verified</EnterpriseBadge>} />
      </SectionCard>
      <SectionCard title="Mobile Wallet">
        <FieldRow label="Primary Method" value="KBZ Pay" />
        <FieldRow label="Phone Number" value="+95 9*** *** 421" />
        <FieldRow label="Status" value={<EnterpriseBadge variant="success" className="text-[10px]">Verified</EnterpriseBadge>} />
      </SectionCard>
      <SectionCard title="Payout History">
        <div className="grid grid-cols-3 gap-2 text-center">
          {["KBZ Pay", "Wave", "CB Pay"].map(m => (
            <div key={m} className="p-2 bg-white rounded border border-slate-200">
              <p className="text-xs font-bold text-slate-700">{m}</p>
              <p className="text-[10px] text-slate-400">Used</p>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

function DocumentsTab({ emp }: { emp: Employee }) {
  return (
    <div className="space-y-4">
      <SectionCard title="Uploaded Documents">
        {[
          { name: "National ID Card", status: "Verified", icon: UserCheck },
          { name: "Employment Letter", status: "Verified", icon: FileText },
          { name: "Bank Statement", status: "Verified", icon: Landmark },
          { name: "Selfie Verification", status: "Verified", icon: Eye },
        ].map((doc, i) => (
          <div key={i} className="flex items-center justify-between p-2.5 rounded bg-white border border-slate-200">
            <div className="flex items-center gap-2">
              <doc.icon className="w-3.5 h-3.5 text-slate-400" />
              <span className="text-xs font-medium text-slate-700">{doc.name}</span>
            </div>
            <div className="flex items-center gap-2">
              <EnterpriseBadge variant="success" className="text-[10px]">{doc.status}</EnterpriseBadge>
              <Eye className="w-3 h-3 text-slate-300 cursor-pointer hover:text-[#31d891]" />
            </div>
          </div>
        ))}
      </SectionCard>
      <SectionCard title="KYC Verification Trail">
        <div className="space-y-2">
          {[
            { step: "National ID Scan", date: "2025-01-15", status: "Pass" },
            { step: "Employment Cross-Check", date: "2025-01-15", status: "Pass" },
            { step: "Bank Account Verify", date: "2025-01-16", status: "Pass" },
            { step: "Selfie Match", date: "2025-01-16", status: "Pass" },
          ].map((item, i) => (
            <div key={i} className="flex items-center justify-between p-2 rounded bg-white border border-slate-200">
              <div className="flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center text-[10px] font-bold text-slate-500">{i + 1}</span>
                <span className="text-xs text-slate-600">{item.step}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-[10px] text-slate-400">{item.date}</span>
                <EnterpriseBadge variant="success" className="text-[9px]">{item.status}</EnterpriseBadge>
              </div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

function HistoryTab({ emp }: { emp: Employee }) {
  const events = [
    { date: "2025-01-15", event: "Employee onboarded", by: "HR Admin", type: "info" },
    { date: "2025-01-15", event: "Employment verified", by: "System", type: "success" },
    { date: "2025-01-15", event: "EWA auto-approved", by: "Policy Engine", type: "success" },
    { date: "2025-01-16", event: "Bank account verified", by: "System", type: "success" },
    { date: "2025-01-20", event: "Trusted status granted", by: "System", type: "success" },
    { date: "2025-02-14", event: "First EWA request", by: emp.name, type: "info" },
    { date: "2025-07-01", event: "Company annual review passed", by: "Risk Officer", type: "success" },
  ];

const typeColors: Record<string, string> = {
    success: "bg-emerald-500",
    info: "bg-blue-500",
    warning: "bg-amber-500",
    error: "bg-red-500",
  };

return (
    <div className="space-y-4">
      <SectionCard title="Employee Timeline">
        <div className="space-y-0 relative">
          <div className="absolute left-[11px] top-2 bottom-2 w-px bg-slate-200" />
          {events.map((ev, i) => (
            <div key={i} className="flex items-start gap-3 py-2 relative">
              <div className={`w-[10px] h-[10px] rounded-full mt-1 shrink-0 border-2 border-white ${typeColors[ev.type]}`} />
              <div className="flex-1">
                <p className="text-xs font-medium text-slate-700">{ev.event}</p>
                <p className="text-[10px] text-slate-400">{ev.date} · {ev.by}</p>
              </div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

function TransactionsTab({ emp }: { emp: Employee }) {
  const empTxns = transactions.filter(t => t.employeeId === emp.id);

const statusMap: Record<string, "success" | "info" | "warning" | "error" | "neutral"> = {
    "Repaid": "success",
    "Disbursing": "info",
    "Approved": "warning",
    "Overdue": "error",
    "Failed": "error",
    "Pending": "neutral",
  };

return (
    <div className="space-y-4">
      <SectionCard title={`Transaction History (${empTxns.length} records)`}>
        {empTxns.length === 0 ? (
          <div className="text-center py-6">
            <AlertCircle className="w-6 h-6 text-slate-200 mx-auto mb-2" />
            <p className="text-xs text-slate-400">No transactions found</p>
          </div>
        ) : (
          <EnterpriseTable
            data={empTxns}
            columns={[
              { id: "id", header: "TXN ID", accessor: (t) => <span className="font-mono">{t.id}</span> },
              { id: "amount", header: "Amount", isNumeric: true, align: "right", accessor: (t) => t.amount },
              { id: "fee", header: "Fee", isNumeric: true, align: "right", accessor: (t) => t.fee, cellClassName: "text-amber-600" },
              { id: "net", header: "Net", isNumeric: true, align: "right", accessor: (t) => t.netAmount },
              { id: "method", header: "Method", accessor: (t) => t.payoutMethod },
              { id: "status", header: "Status", accessor: (t) => <EnterpriseBadge variant={statusMap[t.status] || "neutral"}>{t.status}</EnterpriseBadge> },
              { id: "journal", header: "Journal", accessor: (t) => <span className="text-[10px] font-mono text-slate-400">{t.journalRef}</span> }
            ]}
            rowKey={(t) => t.id}
          />
        )}
      </SectionCard>
      {empTxns.length > 0 && (
        <SectionCard title="Transaction Summary">
          <div className="grid grid-cols-4 gap-3">
            <div className="text-center p-2 bg-white rounded border border-slate-200">
              <p className="text-sm font-bold text-[#100841] font-mono">{empTxns.length}</p>
              <p className="text-[9px] text-slate-400 uppercase">Total</p>
            </div>
            <div className="text-center p-2 bg-white rounded border border-slate-200">
              <p className="text-sm font-bold text-emerald-600 font-mono">{formatMMK(empTxns.reduce((s, t) => s + t.amount, 0))}</p>
              <p className="text-[9px] text-slate-400 uppercase">Gross</p>
            </div>
            <div className="text-center p-2 bg-white rounded border border-slate-200">
              <p className="text-sm font-bold text-amber-600 font-mono">{formatMMK(empTxns.reduce((s, t) => s + t.fee, 0))}</p>
              <p className="text-[9px] text-slate-400 uppercase">Fees</p>
            </div>
            <div className="text-center p-2 bg-white rounded border border-slate-200">
              <p className="text-sm font-bold text-[#100841] font-mono">{formatMMK(empTxns.reduce((s, t) => s + t.netAmount, 0))}</p>
              <p className="text-[9px] text-slate-400 uppercase">Net Paid</p>
            </div>
          </div>
        </SectionCard>
      )}
    </div>
  );
}

// ─── MAIN COMPONENT ──────────────────────────────────────────────────────────

const TABS = [
  { id: "personal", label: "Personal", icon: User },
  { id: "employment", label: "Employment", icon: Building2 },
  { id: "payroll", label: "Payroll", icon: Wallet },
  { id: "budget", label: "Budget", icon: Hash },
  { id: "policies", label: "Policies", icon: ShieldCheck },
  { id: "bank", label: "Bank", icon: Landmark },
  { id: "documents", label: "Documents", icon: FileText },
  { id: "history", label: "History", icon: History },
  { id: "transactions", label: "Transactions", icon: CreditCard },
];

export function EmployeeDetailSheet({ employee, onClose }: Props) {
  const [activeTab, setActiveTab] = useState("personal");

// Reset tab when employee changes
  useMemo(() => setActiveTab("personal"), [employee?.id]);

if (!employee) return null;

return (
    <Sheet open={!!employee} onOpenChange={(open) => !open && onClose()}>
      <SheetContent side="right" className="w-[85%] sm:max-w-[750px] p-0 flex flex-col bg-white">
        {/* Header */}
        <div className="shrink-0 border-b border-slate-200 bg-slate-50/80">
          <div className="flex items-center justify-between px-5 py-3">
            <div>
              <SheetTitle className="text-sm font-bold text-[#100841] flex items-center gap-2">
                <Lock className="w-4 h-4 text-[#100841]/40" />
                {employee.name}
              </SheetTitle>
              <SheetDescription className="text-[10px] text-slate-400 uppercase tracking-wider mt-0.5">
                {employee.employeeId} · {employee.companyName} · {employee.branch}
              </SheetDescription>
            </div>
            <div className="flex items-center gap-2">
              <VerificationBadge emp={employee} />
              <EnterpriseButton variant="secondary" className="h-7 text-[10px]">
                <Download className="w-3 h-3 mr-1" /> Export
              </EnterpriseButton>
            </div>
          </div>

{/* Quick stats bar */}
          <div className="flex items-center gap-4 px-5 py-2 border-t border-slate-100 bg-white">
            <div className="flex items-center gap-1.5">
              <span className="text-[10px] text-slate-400 uppercase">Salary</span>
              <span className="text-xs font-mono font-bold text-[#100841]">{formatMMK(employee.salary)}</span>
            </div>
            <div className="w-px h-4 bg-slate-200" />
            <div className="flex items-center gap-1.5">
              <span className="text-[10px] text-slate-400 uppercase">Cap</span>
              <span className="text-xs font-mono font-medium text-slate-600">{formatMMK(employee.ewaCap)}</span>
            </div>
            <div className="w-px h-4 bg-slate-200" />
            <div className="flex items-center gap-1.5">
              <span className="text-[10px] text-slate-400 uppercase">Available</span>
              <span className="text-xs font-mono font-medium text-emerald-600">{employee.ewaAvailable > 0 ? formatMMK(employee.ewaAvailable) : "—"}</span>
            </div>
            <div className="w-px h-4 bg-slate-200" />
            <div className="flex items-center gap-1.5">
              <span className="text-[10px] text-slate-400 uppercase">Outstanding</span>
              <span className={`text-xs font-mono font-medium ${employee.outstanding > 0 ? "text-amber-600" : "text-emerald-500"}`}>
                {employee.outstanding > 0 ? formatMMK(employee.outstanding) : "0"}
              </span>
            </div>
          </div>

{/* Ledger divider */}
          <div className="h-[1px] bg-gradient-to-r from-transparent via-[#31d891]/30 to-transparent" />
        </div>

{/* Tabs + Content */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
          <div className="shrink-0 border-b border-slate-200 px-4 bg-slate-50/50">
            <TabsList className="h-auto bg-transparent p-0 gap-0 flex-wrap">
              {TABS.map(tab => {
                const Icon = tab.icon;
                const isActive = activeTab === tab.id;
                return (
                  <TabsTrigger
                    key={tab.id}
                    value={tab.id}
                    className={`px-3 py-2.5 text-[11px] font-medium rounded-none border-b-2 transition-all data-[state=active]:border-[#31d891] data-[state=active]:text-[#100841] data-[state=active]:bg-white ${
                      isActive ? "border-[#31d891] text-[#100841] bg-white" : "border-transparent text-slate-500 hover:text-slate-700"
                    }`}
                  >
                    <Icon className="w-3 h-3 mr-1.5" />
                    {tab.label}
                  </TabsTrigger>
                );
              })}
            </TabsList>
          </div>

<ScrollArea className="flex-1 p-5">
            <TabsContent value="personal" className="mt-0"><PersonalTab emp={employee} /></TabsContent>
            <TabsContent value="employment" className="mt-0"><EmploymentTab emp={employee} /></TabsContent>
            <TabsContent value="payroll" className="mt-0"><PayrollTab emp={employee} /></TabsContent>
            <TabsContent value="budget" className="mt-0"><BudgetTab emp={employee} /></TabsContent>
            <TabsContent value="policies" className="mt-0"><PoliciesTab emp={employee} /></TabsContent>
            <TabsContent value="bank" className="mt-0"><BankTab emp={employee} /></TabsContent>
            <TabsContent value="documents" className="mt-0"><DocumentsTab emp={employee} /></TabsContent>
            <TabsContent value="history" className="mt-0"><HistoryTab emp={employee} /></TabsContent>
            <TabsContent value="transactions" className="mt-0"><TransactionTimeline transactions={transactions.filter(t => t.employeeId === employee.id)} /></TabsContent>
          </ScrollArea>
        </Tabs>
      </SheetContent>
    </Sheet>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/EnterpriseComponents.tsx"
import { cn } from "@/lib/utils";
import React from "react";

// =============================================================================
// Enterprise Card
// =============================================================================
export interface EnterpriseCardProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

export function EnterpriseCard({ className, children, ...props }: EnterpriseCardProps) {
  return (
    <div className={cn("card-enterprise", className)} {...props}>
      {children}
    </div>
  );
}

// =============================================================================
// Enterprise KPI Card
// =============================================================================
export interface EnterpriseKpiCardProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string;
  value: string | number;
  subValue?: string;
  accentColor?: string;
  icon?: React.ReactNode;
  change?: string;
  changeDir?: "up" | "down";
}

export function EnterpriseKpiCard({
  label,
  value,
  subValue,
  accentColor,
  icon,
  change,
  changeDir,
  className,
  ...props
}: EnterpriseKpiCardProps) {
  return (
    <div className={cn("kpi-card bg-white border border-[#dfdfdf] rounded-[3px] p-4 shadow-[0_1px_3px_rgba(0,0,0,0.06)]", className)} {...props}>
      <div className="flex items-center justify-between mb-2">
        <p className="text-[8px] text-[#4f525d] uppercase tracking-widest font-semibold">{label}</p>
        {icon && <span className="shrink-0">{icon}</span>}
      </div>
      <p className="text-xl font-bold text-[#100841] font-mono tracking-tight leading-none mb-1">{value}</p>
      
      {(subValue || change) && (
        <div className="flex items-center gap-1.5 mt-1">
          {change && (
            <span className={cn(
              "text-[9px] font-bold font-mono",
              changeDir === "up" ? "text-[#2e7d32]" : "text-[#c62828]"
            )}>
              {changeDir === "up" ? "↑" : "↓"} {change}
            </span>
          )}
          {subValue && (
            <p className="text-[9px] text-[#4f525d] font-medium font-mono">{subValue}</p>
          )}
        </div>
      )}
    </div>
  );
}

// =============================================================================
// Enterprise Badge
// =============================================================================
export type EnterpriseBadgeVariant = "success" | "warning" | "error" | "info" | "neutral";

export interface EnterpriseBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant: EnterpriseBadgeVariant;
  children: React.ReactNode;
}

export function EnterpriseBadge({ variant, children, className, ...props }: EnterpriseBadgeProps) {
  const classes = {
    success: "status-badge-success",
    warning: "status-badge-warning",
    error: "status-badge-error",
    info: "status-badge-info",
    neutral: "status-badge-neutral",
  };
  return (
    <span className={cn(classes[variant], "inline-flex items-center gap-1", className)} {...props}>
      <span className="w-1.5 h-1.5 rounded-full bg-current shrink-0" />
      {children}
    </span>
  );
}

// =============================================================================
// Enterprise Button
// =============================================================================
export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "danger";
  icon?: React.ReactNode;
}

export function EnterpriseButton({
  variant = "primary",
  icon,
  children,
  className,
  ...props
}: EnterpriseButtonProps) {
  const classes = {
    primary: "btn-enterprise-primary",
    secondary: "btn-enterprise-secondary",
    danger: "btn-enterprise-danger",
  };
  return (
    <button className={cn(classes[variant], "cursor-pointer", className)} {...props}>
      {icon && <span className="shrink-0">{icon}</span>}
      {children}
    </button>
  );
}

// =============================================================================
// Enterprise Message Strip
// =============================================================================
export interface EnterpriseMessageStripProps extends React.HTMLAttributes<HTMLDivElement> {
  variant: "info" | "warning" | "error" | "success";
  message: string;
}

export function EnterpriseMessageStrip({ variant, message, className, ...props }: EnterpriseMessageStripProps) {
  const classes = {
    info: "message-strip-info",
    warning: "message-strip-warning",
    error: "message-strip-error",
    success: "message-strip-success",
  };
  return (
    <div className={cn(classes[variant], className)} {...props}>
      {message}
    </div>
  );
}

// =============================================================================
// Enterprise Form Controls
// =============================================================================
export interface EnterpriseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

export function EnterpriseInput({ className, ...props }: EnterpriseInputProps) {
  return <input className={cn("input-enterprise", className)} {...props} />;
}

export interface EnterpriseSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}

export function EnterpriseSelect({ className, children, ...props }: EnterpriseSelectProps) {
  return (
    <select className={cn("select-enterprise", className)} {...props}>
      {children}
    </select>
  );
}

// =============================================================================
// Ledger Divider (Signature Motif)
// =============================================================================
export function LedgerDivider({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("relative h-px bg-[#dfdfdf] my-4 flex items-center justify-end", className)} {...props}>
      <span className="absolute right-0 w-2.5 h-1 bg-[#31d891]" />
    </div>
  );
}

// =============================================================================
// Re-export EnterpriseTable
// =============================================================================
export { EnterpriseTable } from "./EnterpriseTable";
export type { ColumnDef, FilterDef, TableAction, EnterpriseTableProps } from "./EnterpriseTable";
[V0_FILE]typescriptreact:file="client/src/components/EnterpriseDataTable.tsx"
/**
 * EnterpriseDataTable — Reusable enterprise-grade data table
 * Features: Pagination, row selection (checkbox), bulk actions, summary footer, search/filter bar
 * Design: Enterprise Fintech — Sharp borders, compact density, authoritative typography
 */
import { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
  Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
  Download, Filter, ArrowUpDown, CheckSquare, Square
} from "lucide-react";

interface Column<T> {
  key: keyof T | string;
  header: string;
  sortable?: boolean;
  className?: string;
  render?: (value: any, row: T) => React.ReactNode;
  width?: string;
}

interface EnterpriseDataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  searchKey?: keyof T | string;
  searchPlaceholder?: string;
  pageSize?: number;
  rowIdKey?: keyof T;
  onRowSelect?: (selected: T[]) => void;
  onRowClick?: (row: T) => void;
  bulkActions?: { label: string; icon?: React.ReactNode; onClick: (selected: T[]) => void; variant?: "default" | "destructive" | "outline" }[];
  title?: string;
  totalLabel?: string;
  extraControls?: React.ReactNode;
}

export function EnterpriseDataTable<T extends Record<string, any>>({
  data, columns, searchKey, searchPlaceholder = "Search...",
  pageSize = 10, rowIdKey = "id", onRowSelect, onRowClick,
  bulkActions, title, totalLabel, extraControls
}: EnterpriseDataTableProps<T>) {
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [selectedIds, setSelectedIds] = useState<Set<string | number>>(new Set());
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");

const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const pageData = filtered.slice((page - 1) * pageSize, page * pageSize);

const toggleSort = (key: string) => {
    if (sortKey === key) { setSortDir(d => d === "asc" ? "desc" : "asc"); }
    else { setSortKey(key); setSortDir("asc"); }
  };

const toggleRow = (id: string | number) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      const selected = filtered.filter(r => next.has(String(r[rowIdKey])));
      onRowSelect?.(selected);
      return next;
    });
  };

const selectedItems = filtered.filter(r => selectedIds.has(String(r[rowIdKey])));
  const allPageSelected = pageData.length > 0 && pageData.every(r => selectedIds.has(String(r[rowIdKey])));

const handleBulkAction = (action: { label: string; icon?: React.ReactNode; onClick: (selected: T[]) => void; variant?: "default" | "destructive" | "outline" }) => {
    action.onClick(selectedItems);
  };

return (
    <div className="space-y-3">
      {/* Header: Search + Controls */}
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2 flex-1">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
            <Input
              placeholder={searchPlaceholder}
              value={search}
              onChange={e => { setSearch(e.target.value); setPage(1); setSelectedIds(new Set()); }}
              className="pl-8 h-8 text-xs bg-white border-slate-200"
            />
          </div>
          <Button variant="outline" size="sm" className="h-8 text-xs border-slate-200">
            <Filter className="w-3.5 h-3.5 mr-1.5" /> Filter
          </Button>
          <Button variant="outline" size="sm" className="h-8 text-xs border-slate-200">
            <Download className="w-3.5 h-3.5 mr-1.5" /> Export
          </Button>
          {extraControls}
        </div>
        {title && (
          <div className="text-right shrink-0">
            <Badge variant="outline" className="text-[10px] font-mono bg-slate-50 text-slate-500 border-slate-200">
              {totalLabel || `${filtered.length} records`}
            </Badge>
          </div>
        )}
      </div>

{/* Table */}
      <div className="border border-slate-200 rounded-sm overflow-hidden bg-white">
        <div className="overflow-x-auto">
          <table className="table-enterprise">
            <thead>
              <tr>
                {onRowSelect && (
                  <th className="w-10 py-2 px-2 border-b-2 border-slate-200 bg-slate-50/80">
                    <Checkbox
                      checked={allPageSelected}
                      onCheckedChange={toggleAll}
                      className="border-slate-300"
                    />
                  </th>
                )}
                {columns.map(col => (
                  <th
                    key={String(col.key)}
                    className={col.className}
                    style={col.width ? { width: col.width } : undefined}
                  >
                    <button
                      onClick={() => col.sortable && toggleSort(String(col.key))}
                      className={`flex items-center gap-1.5 ${col.sortable ? "hover:text-[#100841]" : ""}`}
                    >
                      {col.header}
                      {col.sortable && sortKey === String(col.key) && (
                        <ArrowUpDown className={`w-3 h-3 ${sortDir === "desc" ? "rotate-180" : ""}`} />
                      )}
                    </button>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {pageData.length === 0 ? (
                <tr>
                  <td colSpan={columns.length + 1} className="py-8 text-center text-slate-400 text-xs">
                    No records match your search criteria.
                  </td>
                </tr>
              ) : (
                pageData.map(row => {
                  const id = String(row[rowIdKey]);
                  const isSelected = selectedIds.has(id);
                  return (
                    <tr
                      key={id}
                      className={`${isSelected ? "bg-blue-50/60" : ""} ${onRowClick ? "cursor-pointer" : ""}`}
                      onClick={() => onRowClick?.(row)}
                    >
                      {onRowSelect && (
                        <td className="py-2 px-2" onClick={e => e.stopPropagation()}>
                          <Checkbox
                            checked={isSelected}
                            onCheckedChange={() => toggleRow(id)}
                            className="border-slate-300"
                          />
                        </td>
                      )}
                      {columns.map(col => (
                        <td key={String(col.key)} className={col.className}>
                          {col.render
                            ? col.render(row[col.key as keyof T], row)
                            : <span className="text-slate-700">{row[col.key as keyof T] ?? "—"}</span>
                          }
                        </td>
                      ))}
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

{/* Footer: Summary + Pagination */}
        <div className="flex items-center justify-between px-3 py-2 border-t border-slate-200 bg-slate-50/50">
          <div className="flex items-center gap-2">
            {selectedItems.length > 0 && (
              <span className="text-[10px] font-medium text-[#100841]">
                <CheckSquare className="w-3 h-3 inline mr-1" />
                {selectedItems.length} selected
              </span>
            )}
            <span className="text-[10px] text-slate-400">
              Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, filtered.length)} of {filtered.length}
            </span>
          </div>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="w-6 h-6 p-0" disabled={page <= 1} onClick={() => setPage(1)}>
              <ChevronsLeft className="w-3 h-3" />
            </Button>
            <Button variant="ghost" size="icon" className="w-6 h-6 p-0" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
              <ChevronLeft className="w-3 h-3" />
            </Button>
            <span className="text-[10px] font-mono text-slate-500 px-1">
              {page} / {totalPages}
            </span>
            <Button variant="ghost" size="icon" className="w-6 h-6 p-0" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>
              <ChevronRight className="w-3 h-3" />
            </Button>
            <Button variant="ghost" size="icon" className="w-6 h-6 p-0" disabled={page >= totalPages} onClick={() => setPage(totalPages)}>
              <ChevronsRight className="w-3 h-3" />
            </Button>
          </div>
        </div>
      </div>

{/* Bulk Action Bar */}
      {selectedItems.length > 0 && bulkActions && (
        <div className="bulk-action-bar animate-in slide-in-from-bottom-2">
          <div className="flex items-center gap-3">
            <span className="text-sm font-bold">{selectedItems.length} item{selectedItems.length > 1 ? "s" : ""} selected</span>
            {bulkActions.map((action, i) => (
              <Button
                key={i}
                size="sm"
                variant={action.variant || "default"}
                className="h-7 text-xs"
                onClick={() => handleBulkAction(action)}
              >
                {action.icon && <span className="mr-1.5">{action.icon}</span>}
                {action.label}
              </Button>
            ))}
          </div>
          <Button size="sm" variant="ghost" className="h-7 text-xs text-white/70 hover:text-white hover:bg-white/10" onClick={() => { setSelectedIds(new Set()); onRowSelect?.([]); }}>
            Clear Selection
          </Button>
        </div>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/EnterpriseTable.tsx"
import React, { useState, useMemo, useRef, useEffect } from "react";
import { 
  ChevronLeft, 
  ChevronRight, 
  Search, 
  SlidersHorizontal, 
  MoreVertical, 
  Check, 
  AlertCircle,
  Eye,
  Edit2,
  Trash2,
  HelpCircle
} from "lucide-react";
import { cn } from "@/lib/utils";
import { EnterpriseBadge } from "./EnterpriseComponents";

export interface ColumnDef<T> {
  id: string;
  header: React.ReactNode;
  accessor: (row: T, index?: number) => React.ReactNode;
  // A string accessor for search filter
  searchString?: (row: T) => string;
  isNumeric?: boolean;
  align?: "left" | "right" | "center";
  cellClassName?: string | ((row: T) => string);
}

export interface FilterDef<T> {
  id: string;
  label: string;
  options: { label: string; value: string }[];
  filterFn: (row: T, value: string) => boolean;
}

export interface TableAction<T> {
  label: string;
  icon?: React.ReactNode;
  onClick: (row: T) => void;
  variant?: "normal" | "danger" | "success";
}

export interface EnterpriseTableProps<T> {
  data: T[];
  columns: ColumnDef<T>[];
  rowKey: (row: T) => string | number;
  filters?: FilterDef<T>[];
  actions?: TableAction<T>[];
  selectable?: boolean;
  selectedKeys?: Set<string | number>;
  onSelectionChange?: (selectedKeys: Set<string | number>) => void;
  searchPlaceholder?: string;
  initialSearch?: string;
  // Numeric column summaries (e.g. sum)
  showSummaries?: boolean;
  // Optional custom text for no data
  noDataText?: string;
  summary?: {
    label: string;
    columns: Record<string, number>;
  };
}

export function EnterpriseTable<T>({
  data,
  columns,
  rowKey,
  filters = [],
  actions = [],
  selectable = false,
  selectedKeys,
  onSelectionChange,
  searchPlaceholder = "Search records...",
  initialSearch = "",
  showSummaries = true,
  noDataText = "No records found matching your criteria",
  summary
}: EnterpriseTableProps<T>) {
  // State
  const [search, setSearch] = useState(initialSearch);
  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
  const [currentPage, setCurrentPage] = useState(1);
  const [activeActionMenuRowId, setActiveActionMenuRowId] = useState<string | number | null>(null);

// References
  const actionMenuRef = useRef<HTMLDivElement>(null);

// Reset to page 1 on filter/search change
  useEffect(() => {
    setCurrentPage(1);
  }, [search, filterValues]);

// Click outside to close action menu
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (actionMenuRef.current && !actionMenuRef.current.contains(event.target as Node)) {
        setActiveActionMenuRowId(null);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

// Filter and search logic
  const filteredData = useMemo(() => {
    return data.filter((row) => {
      // 1. Search filter
      if (search) {
        const query = search.toLowerCase();
        const matchesSearch = columns.some((col) => {
          if (col.searchString) {
            return col.searchString(row).toLowerCase().includes(query);
          }
          // Fallback to text representations
          try {
            const cellValue = col.accessor(row);
            if (typeof cellValue === "string" || typeof cellValue === "number") {
              return String(cellValue).toLowerCase().includes(query);
            }
          } catch (e) {
            // Ignore accessor errors
          }
          return false;
        });
        if (!matchesSearch) return false;
      }

// 2. Dropdown filters
      for (const filter of filters) {
        const selectedValue = filterValues[filter.id];
        if (selectedValue && selectedValue !== "All" && selectedValue !== "") {
          if (!filter.filterFn(row, selectedValue)) {
            return false;
          }
        }
      }

return true;
    });
  }, [data, columns, filters, filterValues, search]);

// Pagination bounds
  const totalRecords = filteredData.length;
  const pageSize = 10;
  const totalPages = Math.ceil(totalRecords / pageSize) || 1;
  const paginatedData = useMemo(() => {
    const startIdx = (currentPage - 1) * pageSize;
    return filteredData.slice(startIdx, startIdx + pageSize);
  }, [filteredData, currentPage]);

// Selected state management
  const localSelectedKeys = useMemo(() => selectedKeys || new Set<string | number>(), [selectedKeys]);

const isAllPaginatedRowsSelected = useMemo(() => {
    if (paginatedData.length === 0) return false;
    return paginatedData.every((row) => localSelectedKeys.has(rowKey(row)));
  }, [paginatedData, localSelectedKeys, rowKey]);

// Calculate Column Summaries (Sums for Numeric columns)
  const summaries = useMemo(() => {
    const sums: Record<string, number> = {};
    columns.forEach((col) => {
      if (col.isNumeric) {
        let total = 0;
        filteredData.forEach((row) => {
          // Attempt to extract numeric value from string or direct number
          const cellValue = col.accessor(row);
          if (typeof cellValue === "number") {
            total += cellValue;
          } else if (typeof cellValue === "string") {
            const parsed = parseFloat(cellValue.replace(/[^0-9.-]/g, ""));
            if (!isNaN(parsed)) {
              total += parsed;
            }
          }
        });
        sums[col.id] = total;
      }
    });
    return sums;
  }, [filteredData, columns]);

// Format summaries
  const formatValue = (colId: string, val: number) => {
    // Standard format MMK helper or currency helper
    if (colId.toLowerCase().includes("amount") || colId.toLowerCase().includes("salary") || colId.toLowerCase().includes("fee") || colId.toLowerCase().includes("cap") || colId.toLowerCase().includes("available") || colId.toLowerCase().includes("outstanding") || colId.toLowerCase().includes("total") || colId.toLowerCase().includes("principal")) {
      return new Intl.NumberFormat("en-US", { minimumFractionDigits: 0 }).format(val) + " MMK";
    }
    return new Intl.NumberFormat("en-US").format(val);
  };

// Pagination navigation helpers
  const startRecordNum = (currentPage - 1) * pageSize + 1;
  const endRecordNum = Math.min(currentPage * pageSize, totalRecords);

return (
    <div className="space-y-3 bg-white border border-[#dfdfdf] rounded-[3px] shadow-[0_1px_3px_rgba(0,0,0,0.06)] overflow-hidden">
      {/* ===== 1. TABLE CONTROL TOOLBAR ===== */}
      <div className="p-3 bg-slate-50 border-b border-[#dfdfdf] flex items-center gap-3 flex-wrap justify-between">
        <div className="flex items-center gap-2 flex-1 min-w-[280px]">
          {/* Main search bar */}
          <div className="relative flex-1">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#868c95]" />
            <input
              type="text"
              placeholder={searchPlaceholder}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-8 pr-3 py-1.5 text-[11px] border border-[#dfdfdf] rounded-[3px] bg-white focus:border-[#100841] focus:ring-1 focus:ring-[#100841]/20 outline-none transition-colors"
            />
            {search && (
              <button 
                onClick={() => setSearch("")}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 text-xs font-bold"
              >
                ✕
              </button>
            )}
          </div>

{/* Advanced Filters Button */}
          {filters.length > 0 && (
            <button
              onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
              className={cn(
                "inline-flex items-center gap-1.5 px-3 py-1.5 border rounded-[3px] text-[11px] font-semibold transition-colors cursor-pointer",
                showAdvancedFilters 
                  ? "bg-[#100841] text-white border-[#100841]" 
                  : "bg-white text-[#100841] border-[#dfdfdf] hover:bg-[#efefff]"
              )}
            >
              <SlidersHorizontal className="w-3.5 h-3.5" />
              <span>Advanced Filters</span>
              {Object.values(filterValues).filter(v => v && v !== "All").length > 0 && (
                <span className="ml-1 w-4 h-4 rounded-full bg-red-500 text-white flex items-center justify-center text-[9px] font-bold">
                  {Object.values(filterValues).filter(v => v && v !== "All").length}
                </span>
              )}
            </button>
          )}
        </div>

{/* Selected count info pill / general metadata */}
        <div className="flex items-center gap-2">
          {selectable && localSelectedKeys.size > 0 && (
            <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-[2px] bg-[#e3f2fd] border border-[#bbdefb] text-[#1565c0] text-[10px] font-bold uppercase tracking-wider animate-pulse">
              <Check className="w-3.5 h-3.5" />
              <span>{localSelectedKeys.size} Selected</span>
              <button 
                onClick={() => onSelectionChange?.(new Set())}
                className="ml-1 text-[#0d47a1] hover:text-red-500 font-bold"
              >
                Clear
              </button>
            </div>
          )}
          <span className="text-[10px] text-[#4f525d] font-mono uppercase tracking-wider font-bold">
            {totalRecords > 0 ? `Showing ${startRecordNum}-${endRecordNum} of ${totalRecords} Records` : "0 Records"}
          </span>
        </div>
      </div>

{/* ===== 2. COLLAPSIBLE ADVANCED FILTER PANEL ===== */}
      {filters.length > 0 && showAdvancedFilters && (
        <div className="p-3 bg-[#efefff] border-b border-[#dfdfdf] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 animate-in fade-in slide-in-from-top-1 duration-150">
          {filters.map((filter) => (
            <div key={filter.id} className="space-y-1">
              <label className="text-[9px] font-bold text-[#4f525d] uppercase tracking-widest">{filter.label}</label>
              <select
                value={filterValues[filter.id] || "All"}
                onChange={(e) => {
                  setFilterValues({ ...filterValues, [filter.id]: e.target.value });
                }}
                className="w-full px-2.5 py-1.5 text-[11px] border border-[#dfdfdf] rounded-[3px] bg-white text-[#100841] outline-none focus:border-[#100841] focus:ring-1 focus:ring-[#100841]/20"
              >
                <option value="All">All {filter.label}s</option>
                {filter.options.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </div>
          ))}
          <div className="sm:col-span-2 md:col-span-3 flex items-center justify-end pt-1">
            <button
              onClick={() => {
                setFilterValues({});
                setSearch("");
              }}
              className="text-[10px] font-bold uppercase tracking-wider text-red-500 hover:text-red-700 cursor-pointer"
            >
              Reset All Filters
            </button>
          </div>
        </div>
      )}

{/* ===== 3. DATA TABLE BODY ===== */}
      <div className="overflow-x-auto px-4 pb-2">
        <table className="w-full text-[11px] border-collapse">
          <thead>
            <tr className="bg-[#ffffff] border-b border-[#dfdfdf]">
              {selectable && (
                <th className="w-10 text-center py-2 px-3">
                  <input
                    type="checkbox"
                    checked={isAllPaginatedRowsSelected}
                    onChange={(e) => handleSelectAll(e.target.checked)}
                    className="w-3.5 h-3.5 rounded-[2px] border border-[#dfdfdf] accent-[#100841] cursor-pointer"
                  />
                </th>
              )}
              {columns.map((col) => (
                <th
                  key={col.id}
                  className={cn(
                    "py-2 px-3 font-bold text-[#4f525d] uppercase tracking-wider text-left whitespace-nowrap",
                    col.align === "right" && "text-right",
                    col.align === "center" && "text-center"
                  )}
                >
                  {col.header}
                </th>
              ))}
              {actions.length > 0 && (
                <th className="w-12 text-center py-2 px-3 font-bold text-[#4f525d] uppercase tracking-wider">
                  Actions
                </th>
              )}
            </tr>
          </thead>
          <tbody>
            {paginatedData.map((row, rowIdx) => {
              const id = rowKey(row);
              const isSelected = localSelectedKeys.has(id);
              return (
                <tr
                  key={id}
                  className={cn(
                    "hover:bg-[#efefff] border-b border-[#efefff] transition-colors relative",
                    isSelected && "bg-[#e8f0fe] hover:bg-[#e1ecfe]"
                  )}
                >
                  {selectable && (
                    <td className="py-2.5 px-3 text-center">
                      <input
                        type="checkbox"
                        checked={isSelected}
                        onChange={(e) => handleSelectRow(row, e.target.checked)}
                        className="w-3.5 h-3.5 rounded-[2px] border border-[#dfdfdf] accent-[#100841] cursor-pointer"
                      />
                    </td>
                  )}
                  {columns.map((col) => (
                    <td
                      key={col.id}
                      className={cn(
                        "py-2.5 px-3 whitespace-nowrap",
                        col.align === "right" && "text-right font-mono tabular-nums",
                        col.align === "center" && "text-center",
                        typeof col.cellClassName === "function" ? col.cellClassName(row) : col.cellClassName
                      )}
                    >
                      {col.accessor(row, rowIdx)}
                    </td>
                  ))}
                  {actions.length > 0 && (
                    <td className="py-2.5 px-3 text-center relative overflow-visible">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setActiveActionMenuRowId(activeActionMenuRowId === id ? null : id);
                        }}
                        className="p-1 hover:bg-slate-200/60 rounded-[3px] text-slate-500 hover:text-slate-800 transition-colors cursor-pointer"
                        title="Show Actions"
                      >
                        <MoreVertical className="w-3.5 h-3.5" />
                      </button>

{/* Floating Actions Menu */}
                      {activeActionMenuRowId === id && (
                        <div
                          ref={actionMenuRef}
                          className="absolute right-3 top-8 bg-white border border-[#dfdfdf] rounded-[3px] shadow-[0_4px_12px_rgba(0,0,0,0.12)] p-1 z-50 min-w-[120px] text-left animate-in fade-in duration-100"
                        >
                          {actions.map((act) => (
                            <button
                              key={act.label}
                              onClick={(e) => {
                                e.stopPropagation();
                                act.onClick(row);
                                setActiveActionMenuRowId(null);
                              }}
                              className={cn(
                                "w-full flex items-center gap-2 px-2.5 py-1.5 rounded-[2px] text-[10px] text-left font-semibold hover:bg-[#efefff] transition-colors cursor-pointer",
                                act.variant === "danger" 
                                  ? "text-red-600 hover:bg-red-50" 
                                  : act.variant === "success" 
                                    ? "text-emerald-600 hover:bg-emerald-50" 
                                    : "text-[#100841]"
                              )}
                            >
                              {act.icon && <span className="shrink-0">{act.icon}</span>}
                              <span>{act.label}</span>
                            </button>
                          ))}
                        </div>
                      )}
                    </td>
                  )}
                </tr>
              );
            })}

{/* Zero state */}
            {totalRecords === 0 && (
              <tr>
                <td
                  colSpan={columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)}
                  className="py-12 text-center text-[#868c95]"
                >
                  <AlertCircle className="w-6 h-6 text-[#dfdfdf] mx-auto mb-2" />
                  <p className="text-[11px] font-semibold">{noDataText}</p>
                </td>
              </tr>
            )}
          </tbody>

{/* ===== 4. SUMMARY FOOTER ROW ===== */}
          {showSummaries && totalRecords > 0 && (columns.some((col) => col.isNumeric) || summary) && (
            <tfoot>
              <tr className="bg-[#ffffff] border-t-2 border-[#dfdfdf] font-bold">
                {selectable && <td className="py-2 px-3" />}
                {columns.map((col, idx) => {
                  const isFirstCell = idx === 0;
                  if (col.isNumeric) {
                    const val = summary?.columns[col.id] ?? summaries[col.id];
                    return (
                      <td
                        key={col.id}
                        className={cn(
                          "py-2 px-3 font-mono tabular-nums text-[#100841]",
                          col.align === "right" && "text-right"
                        )}
                      >
                        {formatValue(col.id, val)}
                      </td>
                    );
                  }
                  return (
                    <td key={col.id} className="py-2 px-3 text-[#4f525d] text-[10px] uppercase tracking-wider font-bold">
                      {isFirstCell ? (summary?.label || "Total Summary") : ""}
                    </td>
                  );
                })}
                {actions.length > 0 && <td className="py-2 px-3" />}
              </tr>
            </tfoot>
          )}
        </table>
      </div>

{/* ===== 5. PAGINATION CONTROLS ===== */}
      {totalPages > 1 && (
        <div className="p-3 bg-slate-50 border-t border-[#dfdfdf] flex items-center justify-between gap-4">
          <span className="text-[10px] text-[#4f525d] font-mono">
            Page {currentPage} of {totalPages}
          </span>
          <div className="flex items-center gap-1">
            <button
              onClick={() => setCurrentPage(1)}
              disabled={currentPage === 1}
              className="px-2 py-1 text-[10px] font-semibold border border-[#dfdfdf] rounded-[2px] bg-white text-[#4f525d] hover:bg-[#efefff] transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
            >
              First
            </button>
            <button
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage === 1}
              className="p-1 border border-[#dfdfdf] rounded-[2px] bg-white text-[#4f525d] hover:bg-[#efefff] transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
            >
              <ChevronLeft className="w-3.5 h-3.5" />
            </button>
            
            {/* Page number indicators */}
            {Array.from({ length: totalPages }).map((_, idx) => {
              const pageNum = idx + 1;
              // Show window of pages around current page
              if (pageNum === 1 || pageNum === totalPages || Math.abs(pageNum - currentPage) <= 1) {
                return (
                  <button
                    key={pageNum}
                    onClick={() => setCurrentPage(pageNum)}
                    className={cn(
                      "px-2.5 py-1 text-[10px] font-bold border rounded-[2px] cursor-pointer transition-colors",
                      currentPage === pageNum
                        ? "bg-[#100841] text-white border-[#100841]"
                        : "bg-white text-[#4f525d] border-[#dfdfdf] hover:bg-[#efefff]"
                    )}
                  >
                    {pageNum}
                  </button>
                );
              }
              if (pageNum === 2 || pageNum === totalPages - 1) {
                return (
                  <span key={pageNum} className="px-1 text-slate-400 text-xs select-none">
                    ...
                  </span>
                );
              }
              return null;
            })}

<button
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
              className="p-1 border border-[#dfdfdf] rounded-[2px] bg-white text-[#4f525d] hover:bg-[#efefff] transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
            >
              <ChevronRight className="w-3.5 h-3.5" />
            </button>
            <button
              onClick={() => setCurrentPage(totalPages)}
              disabled={currentPage === totalPages}
              className="px-2 py-1 text-[10px] font-semibold border border-[#dfdfdf] rounded-[2px] bg-white text-[#4f525d] hover:bg-[#efefff] transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
            >
              Last
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="client/src/components/MakerCheckerModal.tsx"
/**
 * MakerCheckerModal — Approval/Rejection dialog for settlement verification
 * Maker: Verifies bank reference, amount, screenshot → Approve/Reject with reason
 * Checker: Reviews Maker's verification → Approve/Reject with notes
 * Design: Enterprise Fintech — Modal with identity cards, reason textarea, and workflow context
 */
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  ShieldCheck, XCircle, CheckCircle2, FileText, Banknote,
  Image, AlertTriangle, Info
} from "lucide-react";
import type { Settlement } from "@/data/mockData";

function formatMMK(amount: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "MMK", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount);
}

interface MakerCheckerModalProps {
  settlement: Settlement;
  role: "MAKER" | "CHECKER";
  mode: "APPROVE" | "REJECT";
  onSubmit: (note: string, confirmed: boolean) => void;
  onClose: () => void;
}

export function MakerCheckerModal({ settlement, role, mode, onSubmit, onClose }: MakerCheckerModalProps) {
  const [note, setNote] = useState("");
  const [bankVerified, setBankVerified] = useState(false);
  const [amountVerified, setAmountVerified] = useState(false);
  const [screenshotVerified, setScreenshotVerified] = useState(false);

const isApprove = mode === "APPROVE";
  const roleTitle = role === "MAKER" ? "Maker Verification" : "Checker Approval";
  const actionTitle = isApprove
    ? (role === "MAKER" ? "Verify Settlement" : "Approve Settlement")
    : "Reject Settlement";

const headerBg = isApprove ? "border-emerald-400 bg-emerald-50/50" : "border-red-400 bg-red-50/50";
  const headerIconColor = isApprove ? (role === "MAKER" ? "text-blue-500" : "text-emerald-600") : "text-red-500";
  const badgeClass = isApprove
    ? "text-emerald-600 border-emerald-300 bg-emerald-50"
    : "text-red-600 border-red-300 bg-red-50";
  const confirmBtnClass = isApprove
    ? "bg-emerald-600 hover:bg-emerald-700"
    : "bg-[#100841] hover:bg-[#1a3250]";

const verificationChecks = [
    { label: "Bank Reference Match", verified: bankVerified, set: setBankVerified, icon: Banknote },
    { label: "Amount Reconciliation", verified: amountVerified, set: setAmountVerified, icon: FileText },
    { label: "Payment Screenshot", verified: screenshotVerified, set: setScreenshotVerified, icon: Image },
  ];

const allVerified = verificationChecks.every(v => v.verified);
  const canApprove = isApprove && role === "MAKER" ? allVerified : true;

return (
    <div className="fixed inset-0 bg-black/40 z-[100] flex items-center justify-center p-4" onClick={onClose}>
      <div
        className="bg-white rounded-sm shadow-2xl w-full max-w-[640px] max-h-[90vh] overflow-auto border border-slate-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className={"px-5 py-4 border-b-2 " + headerBg}>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              {isApprove ? (
                <ShieldCheck className={"w-5 h-5 " + headerIconColor} />
              ) : (
                <AlertTriangle className="w-5 h-5 text-red-500" />
              )}
              <div>
                <h3 className="text-sm font-bold text-[#100841]">
                  {roleTitle} — {actionTitle}
                </h3>
                <p className="text-[10px] text-slate-400 uppercase tracking-wider">{settlement.id} · {settlement.companyName}</p>
              </div>
            </div>
            <Badge variant="outline" className={"text-[9px] font-bold uppercase " + badgeClass}>
              {actionTitle}
            </Badge>
          </div>
        </div>

{/* Settlement Summary */}
        <div className="px-5 py-4 border-b border-slate-100">
          <div className="grid grid-cols-3 gap-3">
            <div className="text-center p-2 bg-slate-50 rounded-sm border border-slate-100">
              <p className="text-[9px] text-slate-400 uppercase tracking-wider">Total Amount</p>
              <p className="text-base font-bold font-mono text-[#100841]">{formatMMK(settlement.totalAmount)}</p>
            </div>
            <div className="text-center p-2 bg-slate-50 rounded-sm border border-slate-100">
              <p className="text-[9px] text-slate-400 uppercase tracking-wider">Bank Reference</p>
              <p className="text-xs font-mono text-slate-600">{settlement.bankReference || "N/A"}</p>
            </div>
            <div className="text-center p-2 bg-slate-50 rounded-sm border border-slate-100">
              <p className="text-[9px] text-slate-400 uppercase tracking-wider">Submitted By</p>
              <p className="text-xs text-slate-600">{settlement.submittedBy}</p>
            </div>
          </div>

<div className="flex items-center gap-3 mt-3 text-[10px] text-slate-400">
            <Info className="w-3 h-3" />
            <span>Submitted: {settlement.submittedAt}</span>
            {settlement.makerVerifiedAt && (
              <>
                <span className="text-slate-300">·</span>
                <span className="text-blue-500">Maker Verified: {settlement.makerVerifiedAt}</span>
              </>
            )}
          </div>
        </div>

{/* Maker Verification Checks */}
        {role === "MAKER" && isApprove && (
          <div className="px-5 py-4 border-b border-slate-100">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">Verification Checklist</p>
            <div className="space-y-2">
              {verificationChecks.map((check, i) => {
                const Icon = check.icon;
                return (
                  <div key={i} className="flex items-center gap-3 p-2 rounded-sm border border-slate-100 bg-slate-50/50">
                    <input
                      type="checkbox"
                      checked={check.verified}
                      onChange={() => check.set(!check.verified)}
                      className="w-4 h-4 rounded border-slate-300 accent-emerald-500"
                    />
                    <Icon className={"w-4 h-4 " + (check.verified ? "text-emerald-500" : "text-slate-300")} />
                    <span className={"text-xs " + (check.verified ? "text-slate-700 font-medium" : "text-slate-400")}>
                      {check.label}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        )}

{/* Checker Review Summary */}
        {role === "CHECKER" && (
          <div className="px-5 py-4 border-b border-slate-100">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">Maker's Verification</p>
            <div className="p-3 bg-blue-50/50 border border-blue-100 rounded-sm">
              <div className="flex items-center gap-2 text-xs text-blue-700">
                <CheckCircle2 className="w-4 h-4" />
                <span className="font-medium">All checks verified by Maker</span>
              </div>
              <p className="text-[10px] text-blue-400 mt-1">
                Bank reference, amount, and screenshot confirmed. Ready for Checker review.
              </p>
            </div>
          </div>
        )}

{/* Notes / Reason Textarea */}
        <div className="px-5 py-4 border-b border-slate-100">
          <Label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2 block">
            {isApprove ? "Approval Notes (Optional)" : "Rejection Reason (Required)"}
          </Label>
          <Textarea
            placeholder={isApprove
              ? "Add any notes about this settlement approval..."
              : "Enter the reason for rejecting this settlement..."
            }
            value={note}
            onChange={(e) => setNote(e.target.value)}
            className="min-h-[80px] text-xs border-slate-200 resize-none"
          />
          {!isApprove && note.length < 5 && (
            <p className="text-[10px] text-red-400 mt-1">Minimum 5 characters required for rejection.</p>
          )}
        </div>