From 8775285f9950654bf99120bcb8f31453afc5c9aa Mon Sep 17 00:00:00 2001
From: FlashL3opard <69573060+Flashl3opard@users.noreply.github.com>
Date: Tue, 7 Jul 2026 16:08:40 +0530
Subject: [PATCH 1/2] PHEE-379: add Account Mapper and G2P Config modules with
 functional create forms

---
 src/components/shared/StatusBadge.tsx         |  13 +-
 src/components/ui/input.tsx                   |  18 ++
 src/components/ui/label.tsx                   |  17 ++
 src/modules/account-mapper/AccountMapper.tsx  |  43 ++++
 .../account-mapper/BeneficiariesTab.tsx       | 130 ++++++++++++
 .../account-mapper/CreateBeneficiariesTab.tsx | 176 ++++++++++++++++
 .../mocks/beneficiaries.mock.ts               |  74 +++++++
 src/modules/account-mapper/types.ts           |   7 +
 src/modules/g2p-config/CreateG2PTab.tsx       | 172 +++++++++++++++
 src/modules/g2p-config/G2PConfig.tsx          |  43 ++++
 src/modules/g2p-config/G2PPaymentTab.tsx      | 197 ++++++++++++++++++
 .../g2p-config/mocks/g2pConfigs.mock.ts       |  39 ++++
 src/modules/g2p-config/types.ts               |   7 +
 src/pages/AccountMapper.tsx                   |   8 +-
 src/pages/G2PConfig.tsx                       |   8 +-
 15 files changed, 935 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/modules/account-mapper/AccountMapper.tsx
 create mode 100644 src/modules/account-mapper/BeneficiariesTab.tsx
 create mode 100644 src/modules/account-mapper/CreateBeneficiariesTab.tsx
 create mode 100644 src/modules/account-mapper/mocks/beneficiaries.mock.ts
 create mode 100644 src/modules/account-mapper/types.ts
 create mode 100644 src/modules/g2p-config/CreateG2PTab.tsx
 create mode 100644 src/modules/g2p-config/G2PConfig.tsx
 create mode 100644 src/modules/g2p-config/G2PPaymentTab.tsx
 create mode 100644 src/modules/g2p-config/mocks/g2pConfigs.mock.ts
 create mode 100644 src/modules/g2p-config/types.ts

diff --git a/src/components/shared/StatusBadge.tsx b/src/components/shared/StatusBadge.tsx
index 1451695..8f7b893 100644
--- a/src/components/shared/StatusBadge.tsx
+++ b/src/components/shared/StatusBadge.tsx
@@ -8,14 +8,21 @@ 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(
@@ -23,7 +30,7 @@ export default function StatusBadge({ status }: { status: string }) {
         statusStyles[status] ?? 'bg-gray-100 text-gray-600'
       )}
     >
-      {status}
+      {label ?? status}
     </span>
   )
 }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..7fe1fde
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..d1ab7f5
--- /dev/null
+++ b/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 }
diff --git a/src/modules/account-mapper/AccountMapper.tsx b/src/modules/account-mapper/AccountMapper.tsx
new file mode 100644
index 0000000..3f8dde0
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/modules/account-mapper/BeneficiariesTab.tsx b/src/modules/account-mapper/BeneficiariesTab.tsx
new file mode 100644
index 0000000..3d87bc5
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/modules/account-mapper/CreateBeneficiariesTab.tsx b/src/modules/account-mapper/CreateBeneficiariesTab.tsx
new file mode 100644
index 0000000..5cf4221
--- /dev/null
+++ b/src/modules/account-mapper/CreateBeneficiariesTab.tsx
@@ -0,0 +1,176 @@
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { CheckCircle } from 'lucide-react'
+
+const PAYMENT_MODALITIES = [
+  '(01) Mobile Money',
+  '(02) Voucher',
+  '(03) Digital Wallet',
+  '(04) Bank Account',
+]
+
+interface Props {
+  onCancel: () => void
+  onSuccess: () => void
+}
+
+interface FormState {
+  fullName: string
+  governmentEntity: string
+  financialInstitution: string
+  functionalId: string
+  financialAddress: string
+  paymentModality: string
+}
+
+const empty: FormState = {
+  fullName: '',
+  governmentEntity: '',
+  financialInstitution: '',
+  functionalId: '',
+  financialAddress: '',
+  paymentModality: '',
+}
+
+export default function CreateBeneficiariesTab({ onCancel, onSuccess }: Props) {
+  const [form, setForm] = useState<FormState>(empty)
+  const [success, setSuccess] = useState(false)
+
+  function set(field: keyof FormState, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }))
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSuccess(true)
+    setTimeout(() => {
+      setSuccess(false)
+      setForm(empty)
+      onSuccess()
+    }, 1500)
+  }
+
+  return (
+    <div className="flex justify-center py-8">
+      <div className="w-full max-w-125 space-y-6">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900">Add Beneficiary</h2>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Register new beneficiaries and map their financial accounts
+          </p>
+        </div>
+
+        {success && (
+          <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+            <CheckCircle className="h-4 w-4 shrink-0" />
+            Beneficiary added successfully
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="fullName">Full Name</Label>
+            <Input
+              id="fullName"
+              placeholder="Enter full name"
+              value={form.fullName}
+              onChange={(e) => set('fullName', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="governmentEntity">Government Entity</Label>
+            <Input
+              id="governmentEntity"
+              placeholder="Enter government entity"
+              value={form.governmentEntity}
+              onChange={(e) => set('governmentEntity', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="financialInstitution">Financial Institution</Label>
+            <Input
+              id="financialInstitution"
+              placeholder="Enter financial institution"
+              value={form.financialInstitution}
+              onChange={(e) => set('financialInstitution', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="functionalId">Functional ID</Label>
+            <Input
+              id="functionalId"
+              placeholder="Enter functional ID"
+              value={form.functionalId}
+              onChange={(e) => set('functionalId', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="financialAddress">Financial Address</Label>
+            <Input
+              id="financialAddress"
+              placeholder="Enter financial address"
+              value={form.financialAddress}
+              onChange={(e) => set('financialAddress', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="paymentModality">Payment Modality</Label>
+            <Select
+              value={form.paymentModality}
+              onValueChange={(v) => set('paymentModality', v)}
+              required
+            >
+              <SelectTrigger id="paymentModality" className="w-full">
+                <SelectValue placeholder="Select modality" />
+              </SelectTrigger>
+              <SelectContent>
+                {PAYMENT_MODALITIES.map((m) => (
+                  <SelectItem key={m} value={m}>
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-2 pt-2">
+            <Button
+              type="submit"
+              className="w-full bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+              disabled={success}
+            >
+              Add Beneficiary
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/account-mapper/mocks/beneficiaries.mock.ts b/src/modules/account-mapper/mocks/beneficiaries.mock.ts
new file mode 100644
index 0000000..06d2310
--- /dev/null
+++ b/src/modules/account-mapper/mocks/beneficiaries.mock.ts
@@ -0,0 +1,74 @@
+import type { Beneficiary } from '../types'
+
+export const beneficiaries: Beneficiary[] = [
+  {
+    governmentEntity: 'Ministry of Finance',
+    financialInstitution: 'GREENBANK',
+    functionalId: 'BEN-FIN-001',
+    financialAddress: 'rajesh.kumar@greenbank',
+    paymentModality: '(04) Bank Account',
+  },
+  {
+    governmentEntity: 'Ministry of Education',
+    financialInstitution: 'HDFC',
+    functionalId: 'BEN-EDU-002',
+    financialAddress: 'priya.sharma@hdfc',
+    paymentModality: '(04) Bank Account',
+  },
+  {
+    governmentEntity: 'Ministry of Health',
+    financialInstitution: 'DIGIWALLET',
+    functionalId: 'BEN-HLT-003',
+    financialAddress: '9876543210@digiwallet',
+    paymentModality: '(03) Digital Wallet',
+  },
+  {
+    governmentEntity: 'Ministry of Rural Development',
+    financialInstitution: 'BLUEBANK',
+    functionalId: 'BEN-RD-004',
+    financialAddress: 'anita.verma@bluebank',
+    paymentModality: '(04) Bank Account',
+  },
+  {
+    governmentEntity: 'Ministry of Corporate Affairs',
+    financialInstitution: 'SBI',
+    functionalId: 'BEN-CA-005',
+    financialAddress: 'suresh.nair@sbi',
+    paymentModality: '(04) Bank Account',
+  },
+  {
+    governmentEntity: 'Ministry of Agriculture',
+    financialInstitution: 'REDBANK',
+    functionalId: 'BEN-AGR-006',
+    financialAddress: '8765432109@redbank',
+    paymentModality: '(01) Mobile Money',
+  },
+  {
+    governmentEntity: 'Ministry of Health',
+    financialInstitution: 'VOUCHERFSP',
+    functionalId: 'BEN-HLT-007',
+    financialAddress: 'meena.patel@voucherfsp',
+    paymentModality: '(02) Voucher',
+  },
+  {
+    governmentEntity: 'Ministry of Education',
+    financialInstitution: 'DIGIWALLET',
+    functionalId: 'BEN-EDU-008',
+    financialAddress: '7654321098@digiwallet',
+    paymentModality: '(03) Digital Wallet',
+  },
+  {
+    governmentEntity: 'Ministry of Finance',
+    financialInstitution: 'SBI',
+    functionalId: 'BEN-FIN-009',
+    financialAddress: 'vikram.singh@sbi',
+    paymentModality: '(04) Bank Account',
+  },
+  {
+    governmentEntity: 'Ministry of Rural Development',
+    financialInstitution: 'GREENBANK',
+    functionalId: 'BEN-RD-010',
+    financialAddress: 'kavitha.rao@greenbank',
+    paymentModality: '(01) Mobile Money',
+  },
+]
diff --git a/src/modules/account-mapper/types.ts b/src/modules/account-mapper/types.ts
new file mode 100644
index 0000000..160502b
--- /dev/null
+++ b/src/modules/account-mapper/types.ts
@@ -0,0 +1,7 @@
+export interface Beneficiary {
+  governmentEntity: string
+  financialInstitution: string
+  functionalId: string
+  financialAddress: string
+  paymentModality: string
+}
diff --git a/src/modules/g2p-config/CreateG2PTab.tsx b/src/modules/g2p-config/CreateG2PTab.tsx
new file mode 100644
index 0000000..c65e490
--- /dev/null
+++ b/src/modules/g2p-config/CreateG2PTab.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { CheckCircle } from 'lucide-react'
+import type { G2PConfig } from './types'
+
+const PAYER_DFSPS = ['Green Bank', 'Blue Bank', 'Red Bank', 'SBI', 'HDFC']
+const STATUSES: G2PConfig['status'][] = ['Active', 'Inactive']
+
+interface Props {
+  onCancel: () => void
+  onSuccess: () => void
+}
+
+interface FormState {
+  governmentEntity: string
+  program: string
+  payerDFSP: string
+  paymentAccount: string
+  status: string
+}
+
+const empty: FormState = {
+  governmentEntity: '',
+  program: '',
+  payerDFSP: '',
+  paymentAccount: '',
+  status: '',
+}
+
+export default function CreateG2PTab({ onCancel, onSuccess }: Props) {
+  const [form, setForm] = useState<FormState>(empty)
+  const [success, setSuccess] = useState(false)
+
+  function set(field: keyof FormState, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }))
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSuccess(true)
+    setTimeout(() => {
+      setSuccess(false)
+      setForm(empty)
+      onSuccess()
+    }, 1500)
+  }
+
+  return (
+    <div className="flex justify-center py-8">
+      <div className="w-full max-w-125 space-y-6">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900">Create G2P Payment Config</h2>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Define a new government-to-person payment configuration
+          </p>
+        </div>
+
+        {success && (
+          <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+            <CheckCircle className="h-4 w-4 shrink-0" />
+            G2P Payment Config created successfully
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="governmentEntity">Government Entity</Label>
+            <Input
+              id="governmentEntity"
+              placeholder="e.g. Ministry of Finance"
+              value={form.governmentEntity}
+              onChange={(e) => set('governmentEntity', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="program">Program</Label>
+            <Input
+              id="program"
+              placeholder="e.g. Financial Aid"
+              value={form.program}
+              onChange={(e) => set('program', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="payerDFSP">Payer DFSP</Label>
+            <Select
+              value={form.payerDFSP}
+              onValueChange={(v) => set('payerDFSP', v)}
+              required
+            >
+              <SelectTrigger id="payerDFSP" className="w-full">
+                <SelectValue placeholder="Select bank" />
+              </SelectTrigger>
+              <SelectContent>
+                {PAYER_DFSPS.map((d) => (
+                  <SelectItem key={d} value={d}>
+                    {d}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="paymentAccount">Payment Account</Label>
+            <Input
+              id="paymentAccount"
+              placeholder="12-digit account number"
+              inputMode="numeric"
+              pattern="\d{12}"
+              maxLength={12}
+              value={form.paymentAccount}
+              onChange={(e) => set('paymentAccount', e.target.value.replace(/\D/g, ''))}
+              required
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="status">Status</Label>
+            <Select
+              value={form.status}
+              onValueChange={(v) => set('status', v)}
+              required
+            >
+              <SelectTrigger id="status" className="w-full">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUSES.map((s) => (
+                  <SelectItem key={s} value={s}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-2 pt-2">
+            <Button
+              type="submit"
+              className="w-full bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+              disabled={success}
+            >
+              + Create Config
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/g2p-config/G2PConfig.tsx b/src/modules/g2p-config/G2PConfig.tsx
new file mode 100644
index 0000000..1045fa5
--- /dev/null
+++ b/src/modules/g2p-config/G2PConfig.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 G2PPaymentTab from './G2PPaymentTab'
+import CreateG2PTab from './CreateG2PTab'
+
+export default function G2PConfig() {
+  const [tab, setTab] = useState('g2p-payment')
+
+  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">G2P Payment Config</span>
+      </nav>
+
+      <h1 className="text-2xl font-semibold tracking-tight">G2P Payment Config</h1>
+
+      {/* Tabs */}
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList variant="line">
+          <TabsTrigger value="g2p-payment">G2P Payment</TabsTrigger>
+          <TabsTrigger value="create">Create</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="g2p-payment" className="mt-4">
+          <G2PPaymentTab />
+        </TabsContent>
+
+        <TabsContent value="create" className="mt-4">
+          <CreateG2PTab
+            onCancel={() => setTab('g2p-payment')}
+            onSuccess={() => setTab('g2p-payment')}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/src/modules/g2p-config/G2PPaymentTab.tsx b/src/modules/g2p-config/G2PPaymentTab.tsx
new file mode 100644
index 0000000..68f2eb7
--- /dev/null
+++ b/src/modules/g2p-config/G2PPaymentTab.tsx
@@ -0,0 +1,197 @@
+import { useState } from 'react'
+import { g2pConfigs } from './mocks/g2pConfigs.mock'
+import type { G2PConfig } from './types'
+import StatusBadge from '@/components/shared/StatusBadge'
+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',
+  'Program',
+  'Payer DFSP',
+  'Payment Account',
+  'Status',
+] as const
+
+type FilterChip = (typeof filterChips)[number]
+
+const statuses: G2PConfig['status'][] = ['Active', 'Inactive']
+
+export default function G2PPaymentTab() {
+  const [activeChip, setActiveChip] = useState<FilterChip | null>(null)
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(10)
+
+  const filtered = g2pConfigs.filter(
+    (c) => statusFilter === 'all' || c.status === statusFilter
+  )
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
+  const paginated = filtered.slice((page - 1) * perPage, page * perPage)
+
+  return (
+    <div className="space-y-4">
+      {/* Filter chips */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <button
+          onClick={() => {
+            setActiveChip(null)
+            setStatusFilter('all')
+            setPage(1)
+          }}
+          className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
+            activeChip === null
+              ? 'bg-[#1565C0] text-white border-[#1565C0]'
+              : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
+          }`}
+        >
+          All
+        </button>
+        {filterChips.map((chip) => {
+          const isActive = chip === 'Status'
+          return (
+            <button
+              key={chip}
+              disabled={!isActive}
+              onClick={() => {
+                setActiveChip(chip)
+                setPage(1)
+              }}
+              className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
+                !isActive
+                  ? 'bg-gray-50 text-gray-400 border-gray-200 cursor-not-allowed'
+                  : activeChip === chip
+                    ? 'bg-[#1565C0] text-white border-[#1565C0]'
+                    : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
+              }`}
+            >
+              {chip}
+            </button>
+          )
+        })}
+
+        {/* Status sub-filter */}
+        {activeChip === 'Status' && (
+          <div className="flex items-center gap-2 flex-wrap ml-2 pl-2 border-l border-gray-200">
+            {statuses.map((s) => (
+              <button
+                key={s}
+                onClick={() => {
+                  setStatusFilter(s)
+                  setPage(1)
+                }}
+                className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
+                  statusFilter === s
+                    ? 'bg-[#1565C0] text-white border-[#1565C0]'
+                    : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'
+                }`}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="rounded-lg border bg-white">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Government Entity</TableHead>
+              <TableHead>Program</TableHead>
+              <TableHead>Payer DFSP</TableHead>
+              <TableHead>Payment Account</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginated.map((config) => (
+              <TableRow key={config.paymentAccount}>
+                <TableCell>{config.governmentEntity}</TableCell>
+                <TableCell>{config.program}</TableCell>
+                <TableCell>{config.payerDFSP}</TableCell>
+                <TableCell className="font-medium">{config.paymentAccount}</TableCell>
+                <TableCell>
+                  <StatusBadge
+                    status={config.status === 'Inactive' ? 'Inactive-G2P' : config.status}
+                    label={config.status}
+                  />
+                </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>
+              {filtered.length === 0
+                ? '0–0 of 0'
+                : `${(page - 1) * perPage + 1}–${Math.min(page * perPage, filtered.length)} of ${filtered.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>
+  )
+}
diff --git a/src/modules/g2p-config/mocks/g2pConfigs.mock.ts b/src/modules/g2p-config/mocks/g2pConfigs.mock.ts
new file mode 100644
index 0000000..66bc787
--- /dev/null
+++ b/src/modules/g2p-config/mocks/g2pConfigs.mock.ts
@@ -0,0 +1,39 @@
+import type { G2PConfig } from '../types'
+
+export const g2pConfigs: G2PConfig[] = [
+  {
+    governmentEntity: 'Ministry of Education',
+    program: 'Scholarship Support',
+    payerDFSP: 'Green Bank',
+    paymentAccount: '410200834521',
+    status: 'Active',
+  },
+  {
+    governmentEntity: 'Ministry of Health',
+    program: 'Healthcare Initiative',
+    payerDFSP: 'Blue Bank',
+    paymentAccount: '502103976412',
+    status: 'Active',
+  },
+  {
+    governmentEntity: 'Ministry of Finance',
+    program: 'Financial Aid',
+    payerDFSP: 'HDFC',
+    paymentAccount: '623401258934',
+    status: 'Inactive',
+  },
+  {
+    governmentEntity: 'Ministry of Rural Development',
+    program: 'Rural Employment',
+    payerDFSP: 'Red Bank',
+    paymentAccount: '317809124670',
+    status: 'Active',
+  },
+  {
+    governmentEntity: 'Ministry of Corporate Affairs',
+    program: 'School Meals',
+    payerDFSP: 'SBI',
+    paymentAccount: '754312098456',
+    status: 'Inactive',
+  },
+]
diff --git a/src/modules/g2p-config/types.ts b/src/modules/g2p-config/types.ts
new file mode 100644
index 0000000..6b815e8
--- /dev/null
+++ b/src/modules/g2p-config/types.ts
@@ -0,0 +1,7 @@
+export interface G2PConfig {
+  governmentEntity: string
+  program: string
+  payerDFSP: string
+  paymentAccount: string
+  status: 'Active' | 'Inactive'
+}
diff --git a/src/pages/AccountMapper.tsx b/src/pages/AccountMapper.tsx
index 8701fc6..42c14bc 100644
--- a/src/pages/AccountMapper.tsx
+++ b/src/pages/AccountMapper.tsx
@@ -1,7 +1 @@
-export default function AccountMapper() {
-  return (
-    <div className="flex items-center justify-center py-32">
-      <span className="text-2xl font-semibold text-gray-500">Account Mapper</span>
-    </div>
-  )
-}
+export { default } from '@/modules/account-mapper/AccountMapper'
diff --git a/src/pages/G2PConfig.tsx b/src/pages/G2PConfig.tsx
index 23dcca6..b9f5128 100644
--- a/src/pages/G2PConfig.tsx
+++ b/src/pages/G2PConfig.tsx
@@ -1,7 +1 @@
-export default function G2PConfig() {
-  return (
-    <div className="flex items-center justify-center py-32">
-      <span className="text-2xl font-semibold text-gray-500">G2P Config</span>
-    </div>
-  )
-}
+export { default } from '@/modules/g2p-config/G2PConfig'

From cffcdb103db003f7f278ad79808f034feb91ca68 Mon Sep 17 00:00:00 2001
From: FlashL3opard <69573060+Flashl3opard@users.noreply.github.com>
Date: Tue, 7 Jul 2026 16:28:53 +0530
Subject: [PATCH 2/2] fix Copilot review suggestions - regex pattern, FormEvent
 import and Tailwind class

---
 src/modules/account-mapper/CreateBeneficiariesTab.tsx | 4 ++--
 src/modules/g2p-config/CreateG2PTab.tsx               | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/account-mapper/CreateBeneficiariesTab.tsx b/src/modules/account-mapper/CreateBeneficiariesTab.tsx
index 5cf4221..c4bfd30 100644
--- a/src/modules/account-mapper/CreateBeneficiariesTab.tsx
+++ b/src/modules/account-mapper/CreateBeneficiariesTab.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
@@ -61,7 +61,7 @@ export default function CreateBeneficiariesTab({ onCancel, onSuccess }: Props) {
 
   return (
     <div className="flex justify-center py-8">
-      <div className="w-full max-w-125 space-y-6">
+      <div className="w-full max-w-xl space-y-6">
         <div>
           <h2 className="text-lg font-semibold text-gray-900">Add Beneficiary</h2>
           <p className="text-sm text-muted-foreground mt-0.5">
diff --git a/src/modules/g2p-config/CreateG2PTab.tsx b/src/modules/g2p-config/CreateG2PTab.tsx
index c65e490..a3901af 100644
--- a/src/modules/g2p-config/CreateG2PTab.tsx
+++ b/src/modules/g2p-config/CreateG2PTab.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
@@ -56,7 +56,7 @@ export default function CreateG2PTab({ onCancel, onSuccess }: Props) {
 
   return (
     <div className="flex justify-center py-8">
-      <div className="w-full max-w-125 space-y-6">
+      <div className="w-full max-w-xl space-y-6">
         <div>
           <h2 className="text-lg font-semibold text-gray-900">Create G2P Payment Config</h2>
           <p className="text-sm text-muted-foreground mt-0.5">
@@ -120,7 +120,7 @@ export default function CreateG2PTab({ onCancel, onSuccess }: Props) {
               id="paymentAccount"
               placeholder="12-digit account number"
               inputMode="numeric"
-              pattern="\d{12}"
+              pattern="[0-9]{12}"
               maxLength={12}
               value={form.paymentAccount}
               onChange={(e) => set('paymentAccount', e.target.value.replace(/\D/g, ''))}