PHEE-379: add Account Mapper and G2P Config modules with functional create forms

src/components/shared/StatusBadge.tsx

@@ -8,22 +8,29 @@ const statusStyles: Record<string, string> = {
   Failed: 'bg-red-100 text-red-700',
   // Voucher statuses
   Active: 'bg-green-100 text-green-700',
-  Inactive: 'bg-gray-100 text-gray-500',
+  Inactive: 'bg-gray-100 text-gray-600',
+  'Inactive-G2P': 'bg-red-100 text-red-700',
   Canceled: 'bg-red-100 text-red-700',
   Expired: 'bg-purple-100 text-purple-700',
   Utilized: 'bg-gray-200 text-[#374151]',
   Suspended: 'bg-orange-100 text-orange-700',
 }
 
-export default function StatusBadge({ status }: { status: string }) {
+export default function StatusBadge({
+  status,
+  label,
+}: {
+  status: string
+  label?: string
+}) {
   return (
     <span
       className={cn(
         'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
         statusStyles[status] ?? 'bg-gray-100 text-gray-600'
       )}
     >
-      {status}
+      {label ?? status}
     </span>
   )
 }

src/components/ui/input.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/modules/account-mapper/AccountMapper.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import BeneficiariesTab from './BeneficiariesTab'
+import CreateBeneficiariesTab from './CreateBeneficiariesTab'
+
+export default function AccountMapper() {
+  const [tab, setTab] = useState('beneficiaries')
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        <Link to="/" className="hover:text-foreground transition-colors">
+          Dashboard
+        </Link>
+        <span>/</span>
+        <span className="text-foreground font-medium">Account Mapper</span>
+      </nav>
+
+      <h1 className="text-2xl font-semibold tracking-tight">Account Mapper</h1>
+
+      {/* Tabs */}
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList variant="line">
+          <TabsTrigger value="beneficiaries">Beneficiaries</TabsTrigger>
+          <TabsTrigger value="create-beneficiaries">Create Beneficiaries</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="beneficiaries" className="mt-4">
+          <BeneficiariesTab />
+        </TabsContent>
+
+        <TabsContent value="create-beneficiaries" className="mt-4">
+          <CreateBeneficiariesTab
+            onCancel={() => setTab('beneficiaries')}
+            onSuccess={() => setTab('beneficiaries')}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

src/modules/account-mapper/BeneficiariesTab.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react'
+import { beneficiaries } from './mocks/beneficiaries.mock'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+const filterChips = [
+  'Government Entity',
+  'Financial Institution',
+  'Functional ID',
+  'Financial Address',
+] as const
+
+export default function BeneficiariesTab() {
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(10)
+
+  const totalPages = Math.max(1, Math.ceil(beneficiaries.length / perPage))
+  const paginated = beneficiaries.slice((page - 1) * perPage, page * perPage)
+
+  return (
+    <div className="space-y-4">
+      {/* Filter chips — placeholders until search/filter inputs are wired */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {filterChips.map((chip) => (
+          <button
+            key={chip}
+            disabled
+            className="rounded-full px-3 py-1 text-xs font-medium border bg-gray-50 text-gray-400 border-gray-200 cursor-not-allowed"
+          >
+            {chip}
+          </button>
+        ))}
+      </div>
+
+      {/* Table */}
+      <div className="rounded-lg border bg-white">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Government Entity</TableHead>
+              <TableHead>Financial Institution</TableHead>
+              <TableHead>Functional ID</TableHead>
+              <TableHead>Financial Address</TableHead>
+              <TableHead>Payment Modality</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginated.map((b) => (
+              <TableRow key={b.functionalId}>
+                <TableCell>{b.governmentEntity}</TableCell>
+                <TableCell>{b.financialInstitution}</TableCell>
+                <TableCell className="font-medium">{b.functionalId}</TableCell>
+                <TableCell>{b.financialAddress}</TableCell>
+                <TableCell>{b.paymentModality}</TableCell>
+              </TableRow>
+            ))}
+            {paginated.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
+                  No records found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+
+        {/* Pagination */}
+        <div className="flex items-center justify-between border-t px-4 py-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>Items per page</span>
+            <Select
+              value={String(perPage)}
+              onValueChange={(v) => {
+                setPerPage(Number(v))
+                setPage(1)
+              }}
+            >
+              <SelectTrigger className="w-[70px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5</SelectItem>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="20">20</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              {beneficiaries.length === 0
+                ? '0–0 of 0'
+                : `${(page - 1) * perPage + 1}–${Math.min(page * perPage, beneficiaries.length)} of ${beneficiaries.length}`}
+            </span>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              disabled={page <= 1}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              disabled={page >= totalPages}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}