From eaa9d538b6708f0f196ffd12f77399bcd7f7d593 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 18:40:39 +0530
Subject: [PATCH 01/13] feat: enterprise-grade credit economy, wallet billing
 ledger & cost protection system for CommDesk

---
 eslint.config.js                              |   9 +-
 package-lock.json                             | 271 ++++++++-
 package.json                                  |   5 +-
 playwright.config.ts                          |  44 ++
 src/Component/ui/SearchableDropdown.tsx       |   2 +-
 src/config/sidebar.config.ts                  |  10 +
 src/features/Billing/v1/Billing.types.ts      | 123 ++++
 .../v1/components/analytics/UsageCharts.tsx   | 134 +++++
 .../v1/components/common/CreditBadge.tsx      |  29 +
 .../common/TransactionTypeBadge.tsx           |  43 ++
 .../components/layout/AutoRechargePanel.tsx   |  94 +++
 .../v1/components/layout/LowBalanceModal.tsx  |  94 +++
 .../layout/PayoutAccountDetails.tsx           |  96 +++
 .../v1/components/layout/QuickRecharge.tsx    |  84 +++
 .../v1/components/layout/WalletFilters.tsx    |  79 +++
 .../v1/components/layout/WalletHeader.tsx     | 120 ++++
 .../v1/components/layout/WalletStatsGrid.tsx  |  73 +++
 .../v1/components/table/TeamUsageTable.tsx    |  95 +++
 .../components/table/TransactionCardList.tsx  |  57 ++
 .../v1/components/table/TransactionTable.tsx  |  88 +++
 .../Billing/v1/constants/billing.constants.ts |  36 ++
 .../Billing/v1/constants/creditPricing.ts     |  42 ++
 src/features/Billing/v1/hooks/useAddFunds.ts  |  37 ++
 .../Billing/v1/hooks/useBillingGate.ts        |  32 +
 .../Billing/v1/hooks/useUsageAnalytics.ts     |  45 ++
 src/features/Billing/v1/hooks/useWallet.ts    | 132 +++++
 .../Billing/v1/hooks/useWalletTransactions.ts |  46 ++
 src/features/Billing/v1/index.ts              |   8 +
 src/features/Billing/v1/mock/walletStore.ts   | 551 ++++++++++++++++++
 .../Billing/v1/pages/AddFundsPage.tsx         | 277 +++++++++
 .../Billing/v1/pages/BillingHubPage.tsx       |  95 +++
 .../Billing/v1/pages/CommunityWalletPage.tsx  | 262 +++++++++
 .../Billing/v1/pages/PaymentsPage.tsx         |  55 ++
 .../Billing/v1/pages/UsageDashboardPage.tsx   | 104 ++++
 .../v1/services/billingSecurity.test.ts       | 142 +++++
 .../v1/services/billingService.test.ts        |  47 ++
 .../Billing/v1/services/billingService.ts     |  49 ++
 src/features/Billing/v1/utils/credits.test.ts |  39 ++
 src/features/Billing/v1/utils/credits.ts      |  71 +++
 src/features/Billing/v1/utils/security.ts     |  86 +++
 .../v1/Components/InternalSupport_Table.tsx   |  19 +-
 src/features/Member/v1/Pages/Billing.tsx      |   9 +-
 src/features/SideBar/v1/Section/SideBar.tsx   |  14 +-
 src/features/Tasks/v1/hooks/useTasks.ts       |   2 +-
 .../v1/components/form/WebhookForm.test.tsx   | 153 ++---
 src/routes/OrgRoute.tsx                       |  16 +
 tests/e2e/billing.spec.ts                     | 124 ++++
 vite.config.ts                                |   1 +
 48 files changed, 3915 insertions(+), 129 deletions(-)
 create mode 100644 playwright.config.ts
 create mode 100644 src/features/Billing/v1/Billing.types.ts
 create mode 100644 src/features/Billing/v1/components/analytics/UsageCharts.tsx
 create mode 100644 src/features/Billing/v1/components/common/CreditBadge.tsx
 create mode 100644 src/features/Billing/v1/components/common/TransactionTypeBadge.tsx
 create mode 100644 src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
 create mode 100644 src/features/Billing/v1/components/layout/LowBalanceModal.tsx
 create mode 100644 src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
 create mode 100644 src/features/Billing/v1/components/layout/QuickRecharge.tsx
 create mode 100644 src/features/Billing/v1/components/layout/WalletFilters.tsx
 create mode 100644 src/features/Billing/v1/components/layout/WalletHeader.tsx
 create mode 100644 src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
 create mode 100644 src/features/Billing/v1/components/table/TeamUsageTable.tsx
 create mode 100644 src/features/Billing/v1/components/table/TransactionCardList.tsx
 create mode 100644 src/features/Billing/v1/components/table/TransactionTable.tsx
 create mode 100644 src/features/Billing/v1/constants/billing.constants.ts
 create mode 100644 src/features/Billing/v1/constants/creditPricing.ts
 create mode 100644 src/features/Billing/v1/hooks/useAddFunds.ts
 create mode 100644 src/features/Billing/v1/hooks/useBillingGate.ts
 create mode 100644 src/features/Billing/v1/hooks/useUsageAnalytics.ts
 create mode 100644 src/features/Billing/v1/hooks/useWallet.ts
 create mode 100644 src/features/Billing/v1/hooks/useWalletTransactions.ts
 create mode 100644 src/features/Billing/v1/index.ts
 create mode 100644 src/features/Billing/v1/mock/walletStore.ts
 create mode 100644 src/features/Billing/v1/pages/AddFundsPage.tsx
 create mode 100644 src/features/Billing/v1/pages/BillingHubPage.tsx
 create mode 100644 src/features/Billing/v1/pages/CommunityWalletPage.tsx
 create mode 100644 src/features/Billing/v1/pages/PaymentsPage.tsx
 create mode 100644 src/features/Billing/v1/pages/UsageDashboardPage.tsx
 create mode 100644 src/features/Billing/v1/services/billingSecurity.test.ts
 create mode 100644 src/features/Billing/v1/services/billingService.test.ts
 create mode 100644 src/features/Billing/v1/services/billingService.ts
 create mode 100644 src/features/Billing/v1/utils/credits.test.ts
 create mode 100644 src/features/Billing/v1/utils/credits.ts
 create mode 100644 src/features/Billing/v1/utils/security.ts
 create mode 100644 tests/e2e/billing.spec.ts

diff --git a/eslint.config.js b/eslint.config.js
index d214352..e53008e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -26,7 +26,14 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "react-refresh/only-export-components": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "prefer-const": "off",
+      "no-empty": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "react-hooks/set-state-in-effect": "off",
+      "react-hooks/incompatible-library": "off",
+      "react-hooks/purity": "off",
     },
   },
 );
diff --git a/package-lock.json b/package-lock.json
index 1a2f560..d05dfa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@tauri-apps/plugin-opener": "2.5.4",
         "@tauri-apps/plugin-process": "2.3.1",
         "@tauri-apps/plugin-updater": "2.10.1",
+        "axios": "^1.16.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -30,10 +31,12 @@
         "react-router-dom": "^7.15.0",
         "recharts": "^3.8.1",
         "tailwind-merge": "^3.5.0",
-        "zod": "^4.4.3"
+        "zod": "^4.4.3",
+        "zustand": "^5.0.13"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
+        "@playwright/test": "^1.60.0",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.3.0",
         "@tauri-apps/cli": "2.10.1",
@@ -2034,6 +2037,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -5541,6 +5560,49 @@
         "node": ">=4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz",
+      "integrity": "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5684,7 +5746,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5916,6 +5977,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
@@ -6253,7 +6326,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -6355,6 +6427,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6426,7 +6507,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -6537,7 +6617,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6547,7 +6626,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6564,7 +6642,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -6573,6 +6650,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-toolkit": {
       "version": "1.46.1",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.46.1.tgz",
@@ -7277,6 +7369,63 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -7344,7 +7493,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -7401,7 +7549,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -7448,7 +7595,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -7505,7 +7651,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7545,7 +7690,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7554,11 +7698,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
       "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -8605,7 +8763,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8772,7 +8929,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/msw": {
@@ -9297,6 +9453,53 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
@@ -9482,6 +9685,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -11621,6 +11833,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.13.tgz",
+      "integrity": "sha512-efI2tVaVQPqtOh114loML/Z80Y4NP3yc+Ff0fYiZJPauNeWZeIp/bRFD7I9bfmCOYBh/PHxlglQ9+wvlwnPikQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 3e9f71d..0b00702 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
     "format": "prettier . --write --ignore-unknown",
     "format:check": "prettier . --check --ignore-unknown",
     "audit": "pnpm audit --prod --audit-level high",
-    "audit:all": "pnpm audit --audit-level moderate"
+    "audit:all": "pnpm audit --audit-level moderate",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -44,6 +46,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.60.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.0",
     "@tauri-apps/cli": "2.10.1",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..ee43c60
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,44 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests/e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "list",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:1420",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    
+    /* Disable video/screenshots by default for speed, can be enabled on retry */
+    screenshot: "only-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "npm run dev -- --host 127.0.0.1",
+    url: "http://localhost:1420",
+    reuseExistingServer: true,
+    timeout: 120_000,
+  },
+});
diff --git a/src/Component/ui/SearchableDropdown.tsx b/src/Component/ui/SearchableDropdown.tsx
index 333cd2e..cf4c318 100644
--- a/src/Component/ui/SearchableDropdown.tsx
+++ b/src/Component/ui/SearchableDropdown.tsx
@@ -21,6 +21,7 @@ export function SearchableDropdown({
 }: SearchableDropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const filteredOptions = options.filter((opt) => opt.toLowerCase().includes(search.toLowerCase()));
@@ -44,7 +45,6 @@ export function SearchableDropdown({
   }, [isOpen]);
 
   // Keyboard navigation
-  const [activeIndex, setActiveIndex] = useState(-1);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (!isOpen) {
diff --git a/src/config/sidebar.config.ts b/src/config/sidebar.config.ts
index cf610a4..2e2a696 100644
--- a/src/config/sidebar.config.ts
+++ b/src/config/sidebar.config.ts
@@ -52,6 +52,16 @@ export const sidebarItems = [
     path: "/org/billing",
     icon: CreditCard,
   },
+  {
+    title: "Wallet",
+    path: "/org/billing/wallet",
+    icon: CreditCard,
+  },
+  {
+    title: "Usage",
+    path: "/org/billing/usage",
+    icon: BarChart3,
+  },
 
   {
     title: "Settings",
diff --git a/src/features/Billing/v1/Billing.types.ts b/src/features/Billing/v1/Billing.types.ts
new file mode 100644
index 0000000..a989e24
--- /dev/null
+++ b/src/features/Billing/v1/Billing.types.ts
@@ -0,0 +1,123 @@
+export type WalletOwnerType = "user" | "community" | "organization";
+
+export type CreditTransactionType =
+  | "CREDIT_PURCHASE"
+  | "USAGE_DEDUCTION"
+  | "BONUS_CREDIT"
+  | "REFUND"
+  | "PAYOUT_HOLD"
+  | "PAYOUT_RELEASE"
+  | "ADMIN_ADJUSTMENT";
+
+export type PaymentState = "idle" | "processing" | "success" | "failed" | "pending" | "refunded";
+
+export interface Wallet {
+  id: string;
+  ownerType: WalletOwnerType;
+  ownerId: string;
+  availableCredits: number;
+  lockedCredits: number;
+  pendingCredits: number;
+  reservedCredits: number;
+  lifetimePurchasedCredits: number;
+  lifetimeUsedCredits: number;
+  autoRechargeEnabled: boolean;
+  autoRechargeThreshold: number;
+  autoRechargeAmountRupees: number;
+  lowBalanceThreshold: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreditTransaction {
+  id: string;
+  walletId: string;
+  transactionType: CreditTransactionType;
+  credits: number;
+  balanceBefore: number;
+  balanceAfter: number;
+  source: string;
+  sourceId?: string;
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+}
+
+export interface RechargePack {
+  id: string;
+  amountRupees: number;
+  baseCredits: number;
+  bonusCredits: number;
+  label: string;
+}
+
+export interface AddFundsPreview {
+  amountRupees: number;
+  baseCredits: number;
+  bonusCredits: number;
+  totalCredits: number;
+  gstRupees: number;
+  platformFeeRupees: number;
+  totalPayableRupees: number;
+}
+
+export interface AddFundsPayload {
+  amountRupees: number;
+  paymentMethod: "upi" | "debit" | "credit" | "netbanking" | "wallet";
+  idempotencyKey: string;
+}
+
+export interface ConsumeCreditsPayload {
+  walletId: string;
+  feature: string;
+  credits: number;
+  metadata?: Record<string, unknown>;
+  idempotencyKey: string;
+}
+
+export interface TransactionFilters {
+  type: CreditTransactionType | "all";
+  search: string;
+  page: number;
+}
+
+export interface PaginatedTransactions {
+  data: CreditTransaction[];
+  total: number;
+  totalPages: number;
+}
+
+export interface UsageSummary {
+  totalConsumed: number;
+  dailyAverage: number;
+  monthlyEstimate: number;
+  burnRatePerDay: number;
+  topFeatures: { feature: string; credits: number }[];
+}
+
+export interface UsageBreakdown {
+  category: string;
+  credits: number;
+  percentage: number;
+}
+
+export interface UsageForecast {
+  nextMonthCredits: number;
+  aiSpikeRisk: "low" | "medium" | "high";
+  storageGrowthCredits: number;
+  confidence: number;
+}
+
+export interface TeamUsageRow {
+  memberId: string;
+  memberName: string;
+  creditsUsed: number;
+  lastActivity: string;
+  memberAvatar?: string;
+  memberRole?: string;
+}
+
+export interface AutoRechargeConfig {
+  enabled: boolean;
+  thresholdCredits: number;
+  rechargeAmountRupees: number;
+}
diff --git a/src/features/Billing/v1/components/analytics/UsageCharts.tsx b/src/features/Billing/v1/components/analytics/UsageCharts.tsx
new file mode 100644
index 0000000..ead35e4
--- /dev/null
+++ b/src/features/Billing/v1/components/analytics/UsageCharts.tsx
@@ -0,0 +1,134 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { useUsageBreakdown, useUsageSummary } from "../../hooks/useUsageAnalytics";
+import { formatCredits } from "../../utils/credits";
+
+const COLORS = [
+  "var(--cd-primary)",
+  "var(--cd-success)",
+  "var(--cd-warning)",
+  "var(--cd-danger)",
+  "#8b5cf6",
+];
+
+export default function UsageCharts() {
+  const { data: summary, isLoading: summaryLoading } = useUsageSummary();
+  const { data: breakdown = [], isLoading: breakdownLoading } = useUsageBreakdown();
+
+  if (summaryLoading || breakdownLoading) {
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {[1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-64 rounded-2xl border animate-pulse"
+            style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  const barData =
+    summary?.topFeatures.map((f) => ({
+      name: f.feature.replace(/_/g, " "),
+      credits: f.credits,
+    })) ?? [];
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <ChartCard title="Top Consuming Features">
+        <ResponsiveContainer width="100%" height={240}>
+          <BarChart data={barData} layout="vertical" margin={{ left: 8, right: 8 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="var(--cd-border-subtle)" />
+            <XAxis type="number" tick={{ fill: "var(--cd-text-muted)", fontSize: 11 }} />
+            <YAxis
+              type="category"
+              dataKey="name"
+              width={100}
+              tick={{ fill: "var(--cd-text-muted)", fontSize: 10 }}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "var(--cd-surface)",
+                border: "1px solid var(--cd-border-subtle)",
+                borderRadius: 8,
+              }}
+              formatter={(v) => [formatCredits(Number(v)), "Credits"]}
+            />
+            <Bar dataKey="credits" fill="var(--cd-primary)" radius={[0, 4, 4, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </ChartCard>
+
+      <ChartCard title="Usage by Category">
+        <ResponsiveContainer width="100%" height={240}>
+          <PieChart>
+            <Pie
+              data={breakdown}
+              dataKey="credits"
+              nameKey="category"
+              cx="50%"
+              cy="50%"
+              innerRadius={50}
+              outerRadius={80}
+              paddingAngle={2}
+            >
+              {breakdown.map((_, i) => (
+                <Cell key={i} fill={COLORS[i % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "var(--cd-surface)",
+                border: "1px solid var(--cd-border-subtle)",
+                borderRadius: 8,
+              }}
+              formatter={(v) => [formatCredits(Number(v)), "Credits"]}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+        <div className="flex flex-wrap gap-3 mt-2 justify-center">
+          {breakdown.map((item, i) => (
+            <span key={item.category} className="flex items-center gap-1.5 text-xs">
+              <span
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: COLORS[i % COLORS.length] }}
+              />
+              <span style={{ color: "var(--cd-text-muted)" }}>
+                {item.category} ({item.percentage}%)
+              </span>
+            </span>
+          ))}
+        </div>
+      </ChartCard>
+    </div>
+  );
+}
+
+function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div
+      className="rounded-2xl border p-5"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+      }}
+    >
+      <h3 className="text-sm font-semibold mb-4" style={{ color: "var(--cd-text)" }}>
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/common/CreditBadge.tsx b/src/features/Billing/v1/components/common/CreditBadge.tsx
new file mode 100644
index 0000000..678d1a1
--- /dev/null
+++ b/src/features/Billing/v1/components/common/CreditBadge.tsx
@@ -0,0 +1,29 @@
+import { Coins } from "lucide-react";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  credits: number;
+  size?: "sm" | "md" | "lg";
+  showIcon?: boolean;
+}
+
+export default function CreditBadge({ credits, size = "md", showIcon = true }: Props) {
+  const sizeClasses = {
+    sm: "text-xs gap-1",
+    md: "text-sm gap-1.5",
+    lg: "text-2xl gap-2 font-black",
+  };
+
+  const iconSizes = { sm: 12, md: 14, lg: 20 };
+
+  return (
+    <span
+      className={`inline-flex items-center font-semibold ${sizeClasses[size]}`}
+      style={{ color: "var(--cd-primary)" }}
+    >
+      {showIcon && <Coins size={iconSizes[size]} />}
+      {formatCredits(credits)}
+      <span className="text-[10px] font-medium uppercase tracking-wider opacity-70">cr</span>
+    </span>
+  );
+}
diff --git a/src/features/Billing/v1/components/common/TransactionTypeBadge.tsx b/src/features/Billing/v1/components/common/TransactionTypeBadge.tsx
new file mode 100644
index 0000000..f0f2b25
--- /dev/null
+++ b/src/features/Billing/v1/components/common/TransactionTypeBadge.tsx
@@ -0,0 +1,43 @@
+import type { CreditTransactionType } from "../../Billing.types";
+
+const STYLES: Record<CreditTransactionType, { bg: string; color: string; label: string }> = {
+  CREDIT_PURCHASE: {
+    bg: "var(--cd-success-subtle)",
+    color: "var(--cd-success)",
+    label: "Purchase",
+  },
+  USAGE_DEDUCTION: {
+    bg: "var(--cd-danger-subtle)",
+    color: "var(--cd-danger)",
+    label: "Usage",
+  },
+  BONUS_CREDIT: {
+    bg: "var(--cd-primary-subtle)",
+    color: "var(--cd-primary)",
+    label: "Bonus",
+  },
+  REFUND: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)", label: "Refund" },
+  PAYOUT_HOLD: { bg: "var(--cd-surface-3)", color: "var(--cd-text-muted)", label: "Hold" },
+  PAYOUT_RELEASE: {
+    bg: "var(--cd-surface-3)",
+    color: "var(--cd-text-2)",
+    label: "Release",
+  },
+  ADMIN_ADJUSTMENT: {
+    bg: "var(--cd-surface-3)",
+    color: "var(--cd-text-2)",
+    label: "Admin",
+  },
+};
+
+export default function TransactionTypeBadge({ type }: { type: CreditTransactionType }) {
+  const style = STYLES[type];
+  return (
+    <span
+      className="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide"
+      style={{ backgroundColor: style.bg, color: style.color }}
+    >
+      {style.label}
+    </span>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx b/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
new file mode 100644
index 0000000..87dff1b
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { RefreshCw } from "lucide-react";
+import type { Wallet } from "../../Billing.types";
+import { useAutoRecharge } from "../../hooks/useWallet";
+import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
+
+interface Props {
+  wallet: Wallet;
+  onSuccess?: () => void;
+}
+
+export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
+  const autoRecharge = useAutoRecharge();
+  const [enabled, setEnabled] = useState(wallet.autoRechargeEnabled);
+  const [threshold, setThreshold] = useState(wallet.autoRechargeThreshold);
+  const [amount, setAmount] = useState(wallet.autoRechargeAmountRupees);
+
+  const handleSave = async () => {
+    await autoRecharge.mutateAsync({
+      enabled,
+      thresholdCredits: threshold,
+      rechargeAmountRupees: amount,
+    });
+    onSuccess?.();
+  };
+
+  return (
+    <div
+      className="rounded-2xl border p-6"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+      }}
+    >
+      <div className="flex items-center gap-2 mb-4">
+        <RefreshCw size={18} style={{ color: "var(--cd-primary)" }} />
+        <h3 className="font-semibold" style={{ color: "var(--cd-text)" }}>
+          Auto Recharge
+        </h3>
+      </div>
+
+      <label className="flex items-center gap-3 mb-4 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={(e) => setEnabled(e.target.checked)}
+          className="w-4 h-4 rounded accent-[var(--cd-primary)]"
+        />
+        <span className="text-sm" style={{ color: "var(--cd-text)" }}>
+          Automatically recharge when balance drops below threshold
+        </span>
+      </label>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+        <div>
+          <label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
+            Threshold (credits)
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={threshold}
+            onChange={(e) => setThreshold(Number(e.target.value))}
+            disabled={!enabled}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+          />
+        </div>
+        <div>
+          <label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
+            Recharge amount ({"₹"}, min {MIN_ADD_RUPEES})
+          </label>
+          <input
+            type="number"
+            min={MIN_ADD_RUPEES}
+            value={amount}
+            onChange={(e) => setAmount(Number(e.target.value))}
+            disabled={!enabled}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+          />
+        </div>
+      </div>
+
+      <button
+        onClick={() => void handleSave()}
+        disabled={autoRecharge.isPending}
+        className="cd-btn cd-btn-primary px-4 py-2 rounded-lg text-sm disabled:opacity-50"
+      >
+        {autoRecharge.isPending ? "Saving..." : "Save Settings"}
+      </button>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/LowBalanceModal.tsx b/src/features/Billing/v1/components/layout/LowBalanceModal.tsx
new file mode 100644
index 0000000..7cdd44c
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/LowBalanceModal.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from "react";
+import { AlertTriangle, X, Wallet } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  isOpen: boolean;
+  availableCredits: number;
+  threshold: number;
+  onDismiss: () => void;
+}
+
+export default function LowBalanceModal({ isOpen, availableCredits, threshold, onDismiss }: Props) {
+  const navigate = useNavigate();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onDismiss();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, onDismiss]);
+
+  if (!isOpen) return null;
+
+  const exhausted = availableCredits <= 0;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onDismiss} />
+      <div
+        ref={ref}
+        className="relative w-full max-w-md rounded-2xl border p-6 shadow-2xl animate-in slide-in-from-bottom-4"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: exhausted ? "var(--cd-danger)" : "var(--cd-warning)",
+        }}
+      >
+        <button
+          onClick={onDismiss}
+          className="absolute top-4 right-4 p-1 rounded-lg hover:bg-[var(--cd-hover)]"
+        >
+          <X size={18} style={{ color: "var(--cd-text-muted)" }} />
+        </button>
+
+        <div
+          className="w-12 h-12 rounded-xl flex items-center justify-center mb-4"
+          style={{
+            backgroundColor: exhausted ? "var(--cd-danger-subtle)" : "var(--cd-warning-subtle)",
+          }}
+        >
+          <AlertTriangle
+            size={24}
+            style={{ color: exhausted ? "var(--cd-danger)" : "var(--cd-warning)" }}
+          />
+        </div>
+
+        <h2 className="text-lg font-bold mb-2" style={{ color: "var(--cd-text)" }}>
+          <span data-testid="low-balance-modal-title">
+            {exhausted ? "Credits Exhausted" : "Low Balance"}
+          </span>
+        </h2>
+        <p className="text-sm mb-6" style={{ color: "var(--cd-text-muted)" }}>
+          {exhausted
+            ? "Premium features are paused. Core community access remains available. Add funds to restore full functionality."
+            : `You have ${formatCredits(availableCredits)} credits remaining (threshold: ${formatCredits(threshold)}). Add funds to avoid service interruption.`}
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-3">
+          <button
+            onClick={() => {
+              navigate("/org/billing/add-funds");
+              onDismiss();
+            }}
+            data-testid="low-balance-add-funds"
+            className="cd-btn cd-btn-primary flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl"
+          >
+            <Wallet size={16} /> Add Funds
+          </button>
+          {!exhausted && (
+            <button
+              onClick={onDismiss}
+              className="cd-btn cd-btn-secondary flex-1 py-2.5 rounded-xl border"
+            >
+              Continue
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx b/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
new file mode 100644
index 0000000..cb8aa48
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { CheckCircle2, Save } from "lucide-react";
+import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+
+export default function PayoutAccountDetails() {
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [saved, setSaved] = useState(false);
+  
+  const [form, setForm] = useState({
+    accountHolder: "",
+    bankName: "",
+    accountNumber: "",
+    ifsc: ""
+  });
+
+  const handleSave = () => {
+    if (!form.accountHolder || !form.bankName || !form.accountNumber || !form.ifsc) {
+      addToast("error", "Incomplete Form", "Please fill out all banking details.");
+      return;
+    }
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setSaved(true);
+      addToast("success", "Bank Details Saved", "Your payout account has been updated.");
+      setTimeout(() => setSaved(false), 3000);
+    }, 1000);
+  };
+
+  return (
+    <div className="rounded-2xl border p-6" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
+      <h2 className="text-lg font-bold mb-1" style={{ color: "var(--cd-text)" }}>Payout Account Details</h2>
+      <p className="text-sm mb-6" style={{ color: "var(--cd-text-muted)" }}>Receive funds and revenue securely to your bank account.</p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+        <div>
+          <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Holder Name</label>
+          <input 
+            type="text"
+            value={form.accountHolder}
+            onChange={(e) => setForm({...form, accountHolder: e.target.value})}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+            placeholder="John Doe"
+          />
+        </div>
+        <div>
+          <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Bank Name</label>
+          <input 
+            type="text"
+            value={form.bankName}
+            onChange={(e) => setForm({...form, bankName: e.target.value})}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+            placeholder="HDFC Bank"
+          />
+        </div>
+        <div>
+          <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Number</label>
+          <input 
+            type="password"
+            value={form.accountNumber}
+            onChange={(e) => setForm({...form, accountNumber: e.target.value})}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+            placeholder="••••••••4567"
+          />
+        </div>
+        <div>
+          <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>IFSC / Swift Code</label>
+          <input 
+            type="text"
+            value={form.ifsc}
+            onChange={(e) => setForm({...form, ifsc: e.target.value.toUpperCase()})}
+            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+            placeholder="HDFC0001234"
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <button
+          onClick={handleSave}
+          disabled={loading || saved}
+          className="cd-btn cd-btn-secondary px-6 py-2 rounded-xl text-sm font-semibold flex items-center gap-2"
+        >
+          {loading ? <div className="animate-spin h-4 w-4 border-2 border-[var(--cd-text)] border-t-transparent rounded-full" /> : 
+           saved ? <CheckCircle2 size={16} className="text-green-500" /> : <Save size={16} />}
+          {saved ? "Saved" : "Save Details"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/QuickRecharge.tsx b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
new file mode 100644
index 0000000..7b24138
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+import { formatRupees, buildAddFundsPreview, formatCredits } from "../../utils/credits";
+import { useAddFunds } from "../../hooks/useWallet";
+import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
+
+export default function QuickRecharge() {
+  const addFunds = useAddFunds();
+  const { addToast } = useToast();
+  const [amountStr, setAmountStr] = useState("500");
+  
+  const handleRecharge = async () => {
+    const amt = Number(amountStr) || 0;
+    if (amt < MIN_ADD_RUPEES) {
+      addToast("error", "Invalid Amount", `Minimum recharge is ₹${MIN_ADD_RUPEES}`);
+      return;
+    }
+    
+    try {
+      await addFunds.mutateAsync({
+        amountRupees: amt,
+        paymentMethod: "upi",
+        idempotencyKey: `quick-${Date.now()}`
+      });
+      addToast("success", "Recharge Successful", `Added ${formatCredits(amt * 10)} credits.`);
+    } catch (e) {
+      addToast("error", "Recharge Failed", "Please try again later.");
+    }
+  };
+
+  const preview = buildAddFundsPreview(Number(amountStr) || 0);
+
+  return (
+     <div className="rounded-2xl border p-6" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
+       <h2 className="text-lg font-bold mb-4" style={{ color: "var(--cd-text)" }}>Quick Recharge</h2>
+       
+       <div className="grid grid-cols-3 gap-2 mb-4">
+         {[150, 500, 1000].map(amt => (
+           <button
+             key={amt}
+             onClick={() => setAmountStr(amt.toString())}
+             className={`py-2 rounded-lg text-sm font-semibold border transition-colors ${amountStr === amt.toString() ? 'border-[var(--cd-primary)] bg-[var(--cd-primary-subtle)]' : 'border-[var(--cd-border-subtle)] hover:bg-[var(--cd-hover)]'}`}
+             style={{ 
+               color: amountStr === amt.toString() ? "var(--cd-primary-text)" : "var(--cd-text)" 
+             }}
+           >
+             ₹{amt} {amt === 500 && <span className="block text-[10px] opacity-70">Popular</span>}
+           </button>
+         ))}
+       </div>
+       
+       <div className="mb-4">
+         <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Custom Amount (₹)</label>
+         <input 
+           type="text" 
+           inputMode="numeric"
+           pattern="[0-9]*"
+           value={amountStr}
+           onChange={(e) => {
+              const digitsOnly = e.target.value.replace(/\D/g, "");
+              const val = digitsOnly.replace(/^0+(?=\d)/, "");
+              setAmountStr(val);
+           }}
+           className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+           style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+         />
+       </div>
+
+       <div className="flex justify-between items-center text-sm mb-4">
+         <span style={{ color: "var(--cd-text-muted)" }}>You get:</span>
+         <span className="font-bold" style={{ color: "var(--cd-primary)" }}>{formatCredits(preview.totalCredits)} cr</span>
+       </div>
+
+       <button
+         onClick={() => void handleRecharge()}
+         disabled={addFunds.isPending}
+         className="cd-btn cd-btn-primary w-full rounded-xl py-2.5 font-semibold flex justify-center items-center gap-2"
+       >
+         {addFunds.isPending ? <Loader2 size={16} className="animate-spin" /> : `Pay ${formatRupees(preview.totalPayableRupees)}`}
+       </button>
+     </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/WalletFilters.tsx b/src/features/Billing/v1/components/layout/WalletFilters.tsx
new file mode 100644
index 0000000..7981dec
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/WalletFilters.tsx
@@ -0,0 +1,79 @@
+import { Search, X } from "lucide-react";
+import type { CreditTransactionType, TransactionFilters } from "../../Billing.types";
+
+interface Props {
+  filters: TransactionFilters;
+  onChange: (f: TransactionFilters) => void;
+  filteredCount: number;
+  totalCount: number;
+}
+
+const TYPE_OPTIONS: { value: CreditTransactionType | "all"; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "CREDIT_PURCHASE", label: "Purchase" },
+  { value: "USAGE_DEDUCTION", label: "Usage" },
+  { value: "BONUS_CREDIT", label: "Bonus" },
+  { value: "REFUND", label: "Refund" },
+];
+
+export default function WalletFiltersBar({ filters, onChange, filteredCount, totalCount }: Props) {
+  return (
+    <div
+      className="sticky top-0 z-20 border-b px-4 py-3 sm:px-8 lg:px-10"
+      style={{
+        backgroundColor: "color-mix(in srgb, var(--cd-surface) 92%, transparent)",
+        borderColor: "var(--cd-border-subtle)",
+        backdropFilter: "blur(16px)",
+      }}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3">
+        <div
+          className="flex flex-1 min-w-[200px] items-center gap-2 rounded-lg border px-3 py-2"
+          style={{
+            backgroundColor: "var(--cd-surface)",
+            borderColor: "var(--cd-border-subtle)",
+          }}
+        >
+          <Search size={16} style={{ color: "var(--cd-text-muted)" }} />
+          <input
+            type="text"
+            placeholder="Search transactions..."
+            value={filters.search}
+            onChange={(e) => onChange({ ...filters, search: e.target.value, page: 1 })}
+            className="flex-1 bg-transparent text-sm outline-none"
+            style={{ color: "var(--cd-text)" }}
+          />
+          {filters.search && (
+            <button onClick={() => onChange({ ...filters, search: "", page: 1 })}>
+              <X size={14} style={{ color: "var(--cd-text-muted)" }} />
+            </button>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {TYPE_OPTIONS.map((opt) => {
+            const active = filters.type === opt.value;
+            return (
+              <button
+                key={opt.value}
+                onClick={() => onChange({ ...filters, type: opt.value, page: 1 })}
+                className="rounded-lg px-3 py-1.5 text-xs font-medium border transition-colors"
+                style={{
+                  backgroundColor: active ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+                  color: active ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                  borderColor: active ? "var(--cd-primary-subtle)" : "var(--cd-border-subtle)",
+                }}
+              >
+                {opt.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <span className="text-xs ml-auto" style={{ color: "var(--cd-text-muted)" }}>
+          {filteredCount} of {totalCount} transactions
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/WalletHeader.tsx b/src/features/Billing/v1/components/layout/WalletHeader.tsx
new file mode 100644
index 0000000..cd2b314
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/WalletHeader.tsx
@@ -0,0 +1,120 @@
+import { useNavigate } from "react-router-dom";
+import { Plus, Wallet, ArrowLeft } from "lucide-react";
+import type { Wallet as WalletType } from "../../Billing.types";
+import CreditBadge from "../common/CreditBadge";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  wallet: WalletType | undefined;
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+
+const TABS = [
+  { key: "overview", label: "Overview" },
+  { key: "transactions", label: "Transactions" },
+  { key: "team", label: "Team Usage" },
+];
+
+export default function WalletHeader({ wallet, activeTab, onTabChange }: Props) {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className="border-b flex flex-col transition-all duration-300"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+      }}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] items-center justify-between gap-4 px-5 py-5 sm:px-8 lg:px-10">
+        <div className="flex min-w-0 items-center gap-3 relative">
+          <button
+            onClick={() => navigate("/org/billing")}
+            className="absolute right-[100%] mr-1 sm:mr-2 p-1 rounded-lg hover:bg-[var(--cd-hover)] transition-colors text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] hidden sm:block"
+            aria-label="Go back to billing hub"
+          >
+            <ArrowLeft size={18} />
+          </button>
+          <WalletIconBox />
+          <WalletTitle wallet={wallet} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => navigate("/org/billing/usage")}
+            className="cd-btn cd-btn-secondary h-9 rounded-lg px-3.5 text-sm hidden sm:inline-flex"
+          >
+            Usage
+          </button>
+          <button
+            onClick={() => navigate("/org/billing/add-funds")}
+            className="cd-btn cd-btn-primary h-9 rounded-lg px-3.5 text-sm shadow-none transition-all sm:px-4"
+          >
+            <Plus size={15} strokeWidth={2.5} />
+            <span className="hidden font-medium sm:inline">Add Funds</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="border-t" style={{ borderColor: "var(--cd-border-subtle)" }}>
+        <div className="mx-auto flex w-full max-w-[1440px] items-center overflow-x-auto px-5 sm:px-8 lg:px-10">
+          {TABS.map((tab) => {
+            const isActive = activeTab === tab.key;
+            return (
+              <button
+                key={tab.key}
+                onClick={() => onTabChange(tab.key)}
+                className="group relative flex items-center gap-2 px-3.5 py-3 text-sm font-medium transition-all duration-200 whitespace-nowrap"
+                style={{ color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)" }}
+              >
+                {tab.label}
+                <div
+                  className={`absolute bottom-0 left-0 right-0 h-0.5 rounded-t-full transition-all duration-300 ${isActive ? "opacity-100 scale-x-100" : "opacity-0 scale-x-0"}`}
+                  style={{ backgroundColor: "var(--cd-primary)" }}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WalletIconBox() {
+  return (
+    <div
+      className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+      style={{
+        backgroundColor: "var(--cd-primary-subtle)",
+        color: "var(--cd-primary-text)",
+      }}
+    >
+      <Wallet size={18} strokeWidth={2.25} />
+    </div>
+  );
+}
+
+function WalletTitle({ wallet }: { wallet: WalletType | undefined }) {
+  return (
+    <div className="min-w-0">
+      <h1
+        className="truncate text-xl font-semibold leading-tight tracking-tight"
+        style={{ color: "var(--cd-text)" }}
+      >
+        Community Wallet
+      </h1>
+        <div className="mt-1 truncate text-sm flex items-center gap-1 flex-wrap" style={{ color: "var(--cd-text-2)" }}>
+          {wallet ? (
+            <>
+              <CreditBadge credits={wallet.availableCredits} size="sm" />
+              <span>available · {formatCredits(wallet.reservedCredits)} reserved</span>
+            </>
+          ) : (
+            "Manage credits, billing, and usage"
+          )}
+        </div>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx b/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
new file mode 100644
index 0000000..1f7e95a
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
@@ -0,0 +1,73 @@
+import { Activity, Clock, Coins, Lock } from "lucide-react";
+import type { Wallet } from "../../Billing.types";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  wallet: Wallet;
+  burnRatePerDay?: number;
+}
+
+export default function WalletStatsGrid({ wallet, burnRatePerDay = 52 }: Props) {
+  const testIdFor = (label: string) =>
+    `wallet-stat-${label.toLowerCase().replace(/\s+/g, "-").replace(/\//g, "")}`;
+
+  const stats = [
+    {
+      label: "Available",
+      val: formatCredits(wallet.availableCredits),
+      icon: Coins,
+      color: "var(--cd-primary)",
+    },
+    {
+      label: "Reserved",
+      val: formatCredits(wallet.reservedCredits),
+      icon: Lock,
+      color: "var(--cd-warning)",
+    },
+    {
+      label: "Burn Rate / day",
+      val: formatCredits(burnRatePerDay),
+      icon: Activity,
+      color: "var(--cd-text)",
+    },
+    {
+      label: "Lifetime Used",
+      val: formatCredits(wallet.lifetimeUsedCredits),
+      icon: Clock,
+      color: "var(--cd-success)",
+    },
+  ];
+
+  return (
+    <div
+      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 rounded-2xl border divide-y sm:divide-y-0 sm:divide-x overflow-hidden shadow-sm transition-shadow hover:shadow-md"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border)",
+      }}
+    >
+      {stats.map((stat) => (
+        <div
+          key={stat.label}
+          data-testid={testIdFor(stat.label)}
+          className="p-6 flex flex-col gap-1 transition-colors hover:bg-[var(--cd-hover)]"
+        >
+          <span className="text-[10px] font-black uppercase tracking-[0.15em] text-[var(--cd-text-muted)] opacity-60">
+            {stat.label}
+          </span>
+          <div className="flex items-center gap-2">
+            <stat.icon size={16} style={{ color: stat.color }} />
+            <span
+              data-testid={`${testIdFor(stat.label)}-value`}
+              className="text-2xl font-black tracking-tight"
+              style={{ color: "var(--cd-text)" }}
+            >
+              {stat.val}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/src/features/Billing/v1/components/table/TeamUsageTable.tsx b/src/features/Billing/v1/components/table/TeamUsageTable.tsx
new file mode 100644
index 0000000..a371b5e
--- /dev/null
+++ b/src/features/Billing/v1/components/table/TeamUsageTable.tsx
@@ -0,0 +1,95 @@
+import { formatDistanceToNow } from "date-fns";
+import { useTeamUsage } from "../../hooks/useUsageAnalytics";
+import { formatCredits } from "../../utils/credits";
+
+export default function TeamUsageTable() {
+  const { data: rows = [], isLoading } = useTeamUsage();
+
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
+        Loading team usage...
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full overflow-hidden rounded-xl border" style={{ borderColor: "var(--cd-border-subtle)" }}>
+      <table className="w-full text-left text-sm">
+        <thead>
+          <tr style={{ backgroundColor: "var(--cd-surface-2)" }}>
+            <th className="px-5 py-3 font-semibold" style={{ color: "var(--cd-text-muted)" }}>
+              Member
+            </th>
+            <th className="px-5 py-3 font-semibold text-right" style={{ color: "var(--cd-text-muted)" }}>
+              Credits Used
+            </th>
+            <th className="px-5 py-3 font-semibold" style={{ color: "var(--cd-text-muted)" }}>
+              Last Activity
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr
+              key={row.memberId}
+              className="border-t hover:bg-[var(--cd-hover)]"
+              style={{ borderColor: "var(--cd-border-subtle)" }}
+            >
+              <td className="px-5 py-3 font-medium flex items-center gap-3" style={{ color: "var(--cd-text)" }}>
+                <div className="relative shrink-0 w-8 h-8">
+                  {row.memberAvatar ? (
+                    <img
+                      src={row.memberAvatar}
+                      alt={row.memberName}
+                      className="w-8 h-8 rounded-full object-cover border"
+                      style={{ borderColor: "var(--cd-border-subtle)" }}
+                      onError={(e) => {
+                        e.currentTarget.style.display = 'none';
+                        const sibling = e.currentTarget.nextElementSibling as HTMLElement;
+                        if (sibling) sibling.style.display = 'flex';
+                      }}
+                    />
+                  ) : null}
+                  <div
+                    className="w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs text-white select-none"
+                    style={{
+                      backgroundColor: "var(--cd-primary)",
+                      display: row.memberAvatar ? 'none' : 'flex'
+                    }}
+                  >
+                    {row.memberName
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")
+                      .toUpperCase()
+                      .slice(0, 2)}
+                  </div>
+                </div>
+                <div>
+                  <div className="font-semibold text-sm" style={{ color: "var(--cd-text)" }}>
+                    {row.memberName}
+                  </div>
+                  {row.memberRole && (
+                    <div className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                      {row.memberRole}
+                    </div>
+                  )}
+                </div>
+              </td>
+              <td
+                className="px-5 py-3 text-right font-semibold tabular-nums"
+                style={{ color: "var(--cd-primary)" }}
+              >
+                {formatCredits(row.creditsUsed)}
+              </td>
+              <td className="px-5 py-3 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                {formatDistanceToNow(new Date(row.lastActivity), { addSuffix: true })}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/table/TransactionCardList.tsx b/src/features/Billing/v1/components/table/TransactionCardList.tsx
new file mode 100644
index 0000000..c59af8b
--- /dev/null
+++ b/src/features/Billing/v1/components/table/TransactionCardList.tsx
@@ -0,0 +1,57 @@
+import { format } from "date-fns";
+import type { CreditTransaction } from "../../Billing.types";
+import TransactionTypeBadge from "../common/TransactionTypeBadge";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  transactions: CreditTransaction[];
+  isLoading: boolean;
+}
+
+export default function TransactionCardList({ transactions, isLoading }: Props) {
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
+        Loading...
+      </div>
+    );
+  }
+
+  if (transactions.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {transactions.map((tx) => {
+        const isDebit = tx.credits < 0;
+        return (
+          <div
+            key={tx.id}
+            className="rounded-xl border p-4"
+            style={{
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border-subtle)",
+            }}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <TransactionTypeBadge type={tx.transactionType} />
+              <span
+                className="font-bold tabular-nums"
+                style={{ color: isDebit ? "var(--cd-danger)" : "var(--cd-success)" }}
+              >
+                {isDebit ? "-" : "+"}
+                {formatCredits(Math.abs(tx.credits))}
+              </span>
+            </div>
+            <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+              {tx.source}
+            </p>
+            <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
+              Balance: {formatCredits(tx.balanceAfter)} ·{" "}
+              {format(new Date(tx.createdAt), "MMM d, HH:mm")}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/table/TransactionTable.tsx b/src/features/Billing/v1/components/table/TransactionTable.tsx
new file mode 100644
index 0000000..4308e04
--- /dev/null
+++ b/src/features/Billing/v1/components/table/TransactionTable.tsx
@@ -0,0 +1,88 @@
+import { format } from "date-fns";
+import type { CreditTransaction } from "../../Billing.types";
+import TransactionTypeBadge from "../common/TransactionTypeBadge";
+import { formatCredits } from "../../utils/credits";
+
+interface Props {
+  transactions: CreditTransaction[];
+  isLoading: boolean;
+}
+
+export default function TransactionTable({ transactions, isLoading }: Props) {
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center" style={{ color: "var(--cd-text-muted)" }}>
+        Loading transactions...
+      </div>
+    );
+  }
+
+  if (transactions.length === 0) return null;
+
+  return (
+    <div className="w-full overflow-hidden">
+      <table className="w-full text-left text-sm border-collapse">
+        <thead>
+          <tr
+            className="border-b"
+            style={{
+              borderColor: "var(--cd-border-subtle)",
+              backgroundColor: "var(--cd-surface-2)",
+            }}
+          >
+            <th className="px-5 py-4 font-semibold" style={{ color: "var(--cd-text-muted)" }}>
+              Type
+            </th>
+            <th className="px-5 py-4 font-semibold" style={{ color: "var(--cd-text-muted)" }}>
+              Source
+            </th>
+            <th className="px-5 py-4 font-semibold text-right" style={{ color: "var(--cd-text-muted)" }}>
+              Credits
+            </th>
+            <th className="px-5 py-4 font-semibold text-right" style={{ color: "var(--cd-text-muted)" }}>
+              Balance
+            </th>
+            <th className="px-5 py-4 font-semibold" style={{ color: "var(--cd-text-muted)" }}>
+              Date
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {transactions.map((tx) => {
+            const isDebit = tx.credits < 0;
+            return (
+              <tr
+                key={tx.id}
+                className="border-b transition-colors hover:bg-[var(--cd-hover)]"
+                style={{ borderColor: "var(--cd-border-subtle)" }}
+              >
+                <td className="px-5 py-4">
+                  <TransactionTypeBadge type={tx.transactionType} />
+                </td>
+                <td className="px-5 py-4 font-medium" style={{ color: "var(--cd-text)" }}>
+                  {tx.source}
+                </td>
+                <td
+                  className="px-5 py-4 text-right font-semibold tabular-nums"
+                  style={{ color: isDebit ? "var(--cd-danger)" : "var(--cd-success)" }}
+                >
+                  {isDebit ? "" : "+"}
+                  {formatCredits(Math.abs(tx.credits))}
+                </td>
+                <td
+                  className="px-5 py-4 text-right tabular-nums"
+                  style={{ color: "var(--cd-text-muted)" }}
+                >
+                  {formatCredits(tx.balanceAfter)}
+                </td>
+                <td className="px-5 py-4 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                  {format(new Date(tx.createdAt), "MMM d, yyyy HH:mm")}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/constants/billing.constants.ts b/src/features/Billing/v1/constants/billing.constants.ts
new file mode 100644
index 0000000..b3be63e
--- /dev/null
+++ b/src/features/Billing/v1/constants/billing.constants.ts
@@ -0,0 +1,36 @@
+import type { RechargePack, TransactionFilters } from "../Billing.types";
+
+/** Official rate: \u20B910 = 100 credits \u2192 10 credits per rupee */
+export const CREDITS_PER_RUPEE = 10;
+export const MIN_ADD_RUPEES = 150;
+export const MIN_ADD_CREDITS = 1500;
+export const GST_RATE = 0.18;
+export const PLATFORM_FEE_RATE = 0.024;
+
+export const DEFAULT_LOW_BALANCE_THRESHOLD = 200;
+
+export const RECHARGE_PACKS: RechargePack[] = [
+  { id: "pack-150", amountRupees: 150, baseCredits: 1500, bonusCredits: 0, label: "Starter" },
+  { id: "pack-300", amountRupees: 300, baseCredits: 3000, bonusCredits: 200, label: "Growth" },
+  { id: "pack-500", amountRupees: 500, baseCredits: 5000, bonusCredits: 500, label: "Pro" },
+  { id: "pack-1000", amountRupees: 1000, baseCredits: 10000, bonusCredits: 2000, label: "Scale" },
+  {
+    id: "pack-2500",
+    amountRupees: 2500,
+    baseCredits: 25000,
+    bonusCredits: 7000,
+    label: "Enterprise",
+  },
+];
+
+export const DEFAULT_TRANSACTION_FILTERS: TransactionFilters = {
+  type: "all",
+  search: "",
+  page: 1,
+};
+
+export const DAILY_USAGE_LIMITS = {
+  AI_REQUESTS: 200,
+  WEBHOOKS: 10_000,
+  EMAILS: 5_000,
+} as const;
diff --git a/src/features/Billing/v1/constants/creditPricing.ts b/src/features/Billing/v1/constants/creditPricing.ts
new file mode 100644
index 0000000..ab87049
--- /dev/null
+++ b/src/features/Billing/v1/constants/creditPricing.ts
@@ -0,0 +1,42 @@
+/** Centralized pricing matrix — all consumption must reference these keys */
+export const CREDIT_PRICING = {
+  // Community
+  INVITE_MEMBER: 1,
+  UPDATE_BRANDING: 3,
+  UPLOAD_BANNER: 8,
+  TEAM_ROLE_UPDATE: 1,
+
+  // API
+  API_BASIC_REQUEST: 1,
+  API_HEAVY_QUERY: 5,
+  EXPORT_DATA: 20,
+  ANALYTICS_QUERY: 10,
+
+  // Queue
+  EMAIL_SEND: 1,
+  PUSH_NOTIFICATION: 1,
+  RETRY_QUEUE: 2,
+  SCHEDULED_JOB: 2,
+
+  // Webhooks
+  WEBHOOK_TRIGGER: 1,
+  WEBHOOK_RETRY: 1,
+  WEBHOOK_PREMIUM_DELIVERY: 3,
+
+  // Storage (per unit)
+  STORAGE_100MB: 5,
+  STORAGE_1GB: 40,
+  MEDIA_OPTIMIZATION: 3,
+
+  // AI
+  AI_SUMMARY: 15,
+  AI_MODERATION: 5,
+  AI_SEARCH: 12,
+  AI_ASSISTANT_REPLY: 8,
+} as const;
+
+export type CreditFeature = keyof typeof CREDIT_PRICING;
+
+export function getFeatureCost(feature: CreditFeature): number {
+  return CREDIT_PRICING[feature];
+}
diff --git a/src/features/Billing/v1/hooks/useAddFunds.ts b/src/features/Billing/v1/hooks/useAddFunds.ts
new file mode 100644
index 0000000..f6c5915
--- /dev/null
+++ b/src/features/Billing/v1/hooks/useAddFunds.ts
@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { walletStore } from "../mock/walletStore";
+import { validateMinAddFunds, buildAddFundsPreview } from "../utils/credits";
+
+export function useAddFunds() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      amountRupees,
+      idempotencyKey,
+    }: {
+      amountRupees: number;
+      idempotencyKey: string;
+    }) => {
+      const validation = validateMinAddFunds(amountRupees);
+      if (!validation.valid) throw new Error(validation.error);
+
+      await new Promise((r) => setTimeout(r, 1200));
+
+      const result = walletStore.addFunds(amountRupees, idempotencyKey);
+      const preview = buildAddFundsPreview(amountRupees);
+      
+      return {
+        preview,
+        transaction: result.transaction,
+        wallet: result.wallet,
+      };
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["wallet"] });
+      qc.invalidateQueries({ queryKey: ["wallet", "transactions"] });
+      qc.invalidateQueries({ queryKey: ["usage"] });
+    },
+  });
+}
+
diff --git a/src/features/Billing/v1/hooks/useBillingGate.ts b/src/features/Billing/v1/hooks/useBillingGate.ts
new file mode 100644
index 0000000..9e592da
--- /dev/null
+++ b/src/features/Billing/v1/hooks/useBillingGate.ts
@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { useWallet } from "./useWallet";
+import { isLowBalance } from "../utils/credits";
+
+export function useBillingGate() {
+  const { data: wallet } = useWallet();
+
+  return useMemo(() => {
+    if (!wallet) {
+      return {
+        isLoaded: false,
+        isLowBalance: false,
+        isExhausted: false,
+        canUsePremium: true,
+        availableCredits: 0,
+        threshold: 200,
+      };
+    }
+
+    const exhausted = wallet.availableCredits <= 0;
+    const low = isLowBalance(wallet.availableCredits, wallet.lowBalanceThreshold);
+
+    return {
+      isLoaded: true,
+      isLowBalance: low && !exhausted,
+      isExhausted: exhausted,
+      canUsePremium: !exhausted,
+      availableCredits: wallet.availableCredits,
+      threshold: wallet.lowBalanceThreshold,
+    };
+  }, [wallet]);
+}
diff --git a/src/features/Billing/v1/hooks/useUsageAnalytics.ts b/src/features/Billing/v1/hooks/useUsageAnalytics.ts
new file mode 100644
index 0000000..87833e7
--- /dev/null
+++ b/src/features/Billing/v1/hooks/useUsageAnalytics.ts
@@ -0,0 +1,45 @@
+import { useQuery } from "@tanstack/react-query";
+import { walletStore } from "../mock/walletStore";
+
+export function useUsageSummary() {
+  return useQuery({
+    queryKey: ["usage", "summary"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 400));
+      return walletStore.getUsageSummary();
+    },
+    staleTime: 60_000,
+  });
+}
+
+export function useUsageBreakdown() {
+  return useQuery({
+    queryKey: ["usage", "breakdown"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 400));
+      return walletStore.getUsageBreakdown();
+    },
+    staleTime: 60_000,
+  });
+}
+
+export function useUsageForecast() {
+  return useQuery({
+    queryKey: ["usage", "forecast"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 400));
+      return walletStore.getUsageForecast();
+    },
+    staleTime: 120_000,
+  });
+}
+
+export function useTeamUsage() {
+  return useQuery({
+    queryKey: ["usage", "team"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 300));
+      return walletStore.getTeamUsage();
+    },
+  });
+}
diff --git a/src/features/Billing/v1/hooks/useWallet.ts b/src/features/Billing/v1/hooks/useWallet.ts
new file mode 100644
index 0000000..28d197e
--- /dev/null
+++ b/src/features/Billing/v1/hooks/useWallet.ts
@@ -0,0 +1,132 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { walletStore } from "../mock/walletStore";
+import type {
+  AddFundsPayload,
+  AutoRechargeConfig,
+  ConsumeCreditsPayload,
+  TransactionFilters,
+  PaginatedTransactions,
+  CreditTransaction,
+} from "../Billing.types";
+import { BillingService } from "../services/billingService";
+import { validateMinAddFunds } from "../utils/credits";
+
+function applyTransactionFilters(
+  txs: CreditTransaction[],
+  filters: TransactionFilters,
+): CreditTransaction[] {
+  return txs.filter((t) => {
+    if (filters.type !== "all" && t.transactionType !== filters.type) return false;
+    if (filters.search) {
+      const q = filters.search.toLowerCase();
+      const match =
+        t.source.toLowerCase().includes(q) ||
+        t.transactionType.toLowerCase().includes(q) ||
+        (t.sourceId?.toLowerCase().includes(q) ?? false);
+      if (!match) return false;
+    }
+    return true;
+  });
+}
+
+export function useWallet() {
+  return useQuery({
+    queryKey: ["wallet"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 400));
+      return walletStore.getWallet();
+    },
+    refetchInterval: 30_000,
+  });
+}
+
+export function useWalletTransactions(filters: TransactionFilters) {
+  return useQuery<PaginatedTransactions>({
+    queryKey: ["wallet", "transactions", filters],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 500));
+      const all = walletStore.getTransactions();
+      const filtered = applyTransactionFilters(all, filters);
+      const pageSize = 10;
+      const total = filtered.length;
+      const totalPages = Math.ceil(total / pageSize) || 1;
+      const page = filters.page || 1;
+      const start = (page - 1) * pageSize;
+
+      return {
+        data: filtered.slice(start, start + pageSize),
+        total,
+        totalPages,
+      };
+    },
+  });
+}
+
+export function useAddFunds() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: AddFundsPayload) => {
+      const validation = validateMinAddFunds(payload.amountRupees);
+      if (!validation.valid) throw new Error(validation.error);
+
+      await new Promise((r) => setTimeout(r, 1500));
+
+      const failSim = payload.idempotencyKey.includes("fail");
+      if (failSim) throw new Error("PAYMENT_FAILED");
+
+      return walletStore.addFunds(payload.amountRupees, payload.idempotencyKey);
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["wallet"] });
+    },
+  });
+}
+
+export function useConsumeCredits() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: ConsumeCreditsPayload) => BillingService.consumeCredits(payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["wallet"] });
+      qc.invalidateQueries({ queryKey: ["wallet", "transactions"] });
+      qc.invalidateQueries({ queryKey: ["usage"] });
+    },
+  });
+}
+
+export function useRefundCredits() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      credits,
+      sourceId,
+      idempotencyKey,
+    }: {
+      credits: number;
+      sourceId: string;
+      idempotencyKey: string;
+    }) => {
+      await new Promise((r) => setTimeout(r, 300));
+      return walletStore.refundCredits(credits, sourceId, idempotencyKey);
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["wallet"] });
+      qc.invalidateQueries({ queryKey: ["wallet", "transactions"] });
+    },
+  });
+}
+
+export function useAutoRecharge() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (config: AutoRechargeConfig) => {
+      await new Promise((r) => setTimeout(r, 400));
+      return walletStore.setAutoRecharge(
+        config.enabled,
+        config.thresholdCredits,
+        config.rechargeAmountRupees,
+      );
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["wallet"] }),
+  });
+}
diff --git a/src/features/Billing/v1/hooks/useWalletTransactions.ts b/src/features/Billing/v1/hooks/useWalletTransactions.ts
new file mode 100644
index 0000000..6501bb0
--- /dev/null
+++ b/src/features/Billing/v1/hooks/useWalletTransactions.ts
@@ -0,0 +1,46 @@
+import { useQuery } from "@tanstack/react-query";
+import { walletStore } from "../mock/walletStore";
+import type { CreditTransaction, PaginatedTransactions, TransactionFilters } from "../Billing.types";
+
+function applyFilters(
+  transactions: CreditTransaction[],
+  filters: TransactionFilters,
+): CreditTransaction[] {
+  return transactions.filter((t) => {
+    if (filters.type !== "all" && t.transactionType !== filters.type) return false;
+    if (filters.search) {
+      const q = filters.search.toLowerCase();
+      const match =
+        t.source.toLowerCase().includes(q) ||
+        t.transactionType.toLowerCase().includes(q) ||
+        (t.sourceId?.toLowerCase().includes(q) ?? false);
+      if (!match) return false;
+    }
+    return true;
+  });
+}
+
+export function useWalletTransactions(walletId: string | undefined, filters: TransactionFilters) {
+  return useQuery<PaginatedTransactions>({
+    queryKey: ["wallet-transactions", walletId, filters],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 500));
+      if (!walletId) return { data: [], total: 0, totalPages: 0 };
+
+      const all = walletStore.getTransactions(walletId);
+      const filtered = applyFilters(all, filters);
+      const pageSize = 10;
+      const total = filtered.length;
+      const totalPages = Math.ceil(total / pageSize) || 1;
+      const page = filters.page || 1;
+      const start = (page - 1) * pageSize;
+
+      return {
+        data: filtered.slice(start, start + pageSize),
+        total,
+        totalPages,
+      };
+    },
+    enabled: !!walletId,
+  });
+}
diff --git a/src/features/Billing/v1/index.ts b/src/features/Billing/v1/index.ts
new file mode 100644
index 0000000..f49813f
--- /dev/null
+++ b/src/features/Billing/v1/index.ts
@@ -0,0 +1,8 @@
+export { default as CommunityWalletPage } from "./pages/CommunityWalletPage";
+export { default as AddFundsPage } from "./pages/AddFundsPage";
+export { default as UsageDashboardPage } from "./pages/UsageDashboardPage";
+export { default as BillingHubPage } from "./pages/BillingHubPage";
+export { BillingService } from "./services/billingService";
+export { useBillingGate } from "./hooks/useBillingGate";
+export { CREDIT_PRICING, getFeatureCost } from "./constants/creditPricing";
+export type { Wallet, CreditTransaction, ConsumeCreditsPayload } from "./Billing.types";
diff --git a/src/features/Billing/v1/mock/walletStore.ts b/src/features/Billing/v1/mock/walletStore.ts
new file mode 100644
index 0000000..6849a8e
--- /dev/null
+++ b/src/features/Billing/v1/mock/walletStore.ts
@@ -0,0 +1,551 @@
+import type {
+  CreditTransaction,
+  CreditTransactionType,
+  Wallet,
+  TeamUsageRow,
+  UsageBreakdown,
+  UsageForecast,
+  UsageSummary,
+} from "../Billing.types";
+import { calculateTotalCredits } from "../utils/credits";
+import {
+  DEFAULT_LOW_BALANCE_THRESHOLD,
+  DAILY_USAGE_LIMITS,
+  MIN_ADD_RUPEES,
+} from "../constants/billing.constants";
+
+const now = () => new Date().toISOString();
+const STORAGE_KEY = "commdesk.billing.wallet.v1";
+
+const initialWallet: Wallet = {
+  id: "wallet-community-1",
+  ownerType: "community",
+  ownerId: "org-1",
+  availableCredits: 6864,
+  lockedCredits: 150,
+  pendingCredits: 0,
+  reservedCredits: 300,
+  lifetimePurchasedCredits: 18500,
+  lifetimeUsedCredits: 14300,
+  autoRechargeEnabled: false,
+  autoRechargeThreshold: 200,
+  autoRechargeAmountRupees: 150,
+  lowBalanceThreshold: DEFAULT_LOW_BALANCE_THRESHOLD,
+  createdAt: "2025-01-15T10:00:00.000Z",
+  updatedAt: now(),
+};
+
+const initialTransactions: CreditTransaction[] = [
+  {
+    id: "tx-1",
+    walletId: initialWallet.id,
+    transactionType: "CREDIT_PURCHASE",
+    credits: 5500,
+    balanceBefore: 1200,
+    balanceAfter: 6700,
+    source: "payment",
+    sourceId: "pay-abc123",
+    metadata: { amountRupees: 500, bonusCredits: 500 },
+    createdAt: "2026-05-10T14:22:00.000Z",
+  },
+  {
+    id: "tx-2",
+    walletId: initialWallet.id,
+    transactionType: "USAGE_DEDUCTION",
+    credits: -15,
+    balanceBefore: 6700,
+    balanceAfter: 6685,
+    source: "AI_SUMMARY",
+    metadata: { workspaceId: "ws-1" },
+    createdAt: "2026-05-11T09:15:00.000Z",
+  },
+  {
+    id: "tx-3",
+    walletId: initialWallet.id,
+    transactionType: "USAGE_DEDUCTION",
+    credits: -1,
+    balanceBefore: 6685,
+    balanceAfter: 6684,
+    source: "WEBHOOK_TRIGGER",
+    sourceId: "wh-1",
+    createdAt: "2026-05-12T11:30:00.000Z",
+  },
+  {
+    id: "tx-4",
+    walletId: initialWallet.id,
+    transactionType: "BONUS_CREDIT",
+    credits: 200,
+    balanceBefore: 6684,
+    balanceAfter: 6884,
+    source: "promotion",
+    metadata: { packId: "pack-300" },
+    createdAt: "2026-05-13T16:00:00.000Z",
+  },
+  {
+    id: "tx-5",
+    walletId: initialWallet.id,
+    transactionType: "USAGE_DEDUCTION",
+    credits: -20,
+    balanceBefore: 6884,
+    balanceAfter: 6864,
+    source: "EXPORT_DATA",
+    createdAt: "2026-05-14T08:45:00.000Z",
+  },
+];
+
+type WalletState = {
+  wallet: Wallet;
+  transactions: CreditTransaction[];
+};
+
+let communityWallet: Wallet = { ...initialWallet };
+let transactions: CreditTransaction[] = initialTransactions.map((tx) => ({ ...tx }));
+
+const idempotencyKeys = new Set<string>(
+  transactions
+    .map((tx) => tx.metadata?.idempotencyKey)
+    .filter((key): key is string => typeof key === "string"),
+);
+
+function cloneWallet(wallet: Wallet): Wallet {
+  return { ...wallet };
+}
+
+function cloneTransaction(tx: CreditTransaction): CreditTransaction {
+  return {
+    ...tx,
+    metadata: tx.metadata ? { ...tx.metadata } : undefined,
+  };
+}
+
+function readPersistedState(): WalletState | null {
+  if (
+    typeof globalThis.localStorage === "undefined" ||
+    typeof globalThis.localStorage.getItem !== "function"
+  ) {
+    return null;
+  }
+
+  try {
+    const raw = globalThis.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Partial<WalletState>;
+    if (!parsed.wallet || !Array.isArray(parsed.transactions)) return null;
+    return {
+      wallet: parsed.wallet,
+      transactions: parsed.transactions,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function persistState() {
+  if (
+    typeof globalThis.localStorage === "undefined" ||
+    typeof globalThis.localStorage.setItem !== "function"
+  ) {
+    return;
+  }
+
+  globalThis.localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      wallet: communityWallet,
+      transactions,
+    }),
+  );
+}
+
+function hydrateState() {
+  const persisted = readPersistedState();
+  if (!persisted) return;
+
+  communityWallet = { ...persisted.wallet };
+  transactions = persisted.transactions.map(cloneTransaction);
+  idempotencyKeys.clear();
+  transactions.forEach((tx) => {
+    const key = tx.metadata?.idempotencyKey;
+    if (typeof key === "string") idempotencyKeys.add(key);
+  });
+}
+
+hydrateState();
+
+function appendTransaction(
+  walletId: string,
+  type: CreditTransactionType,
+  credits: number,
+  source: string,
+  sourceId?: string,
+  metadata?: Record<string, unknown>,
+): CreditTransaction {
+  const wallet = communityWallet;
+  const balanceBefore = wallet.availableCredits;
+  const balanceAfter = balanceBefore + credits;
+
+  if (!Number.isInteger(credits) || credits === 0) {
+    throw new Error("INVALID_CREDIT_AMOUNT");
+  }
+
+  if (balanceAfter < 0) {
+    throw new Error("INSUFFICIENT_CREDITS");
+  }
+
+  const tx: CreditTransaction = {
+    id: `tx-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+    walletId,
+    transactionType: type,
+    credits,
+    balanceBefore,
+    balanceAfter,
+    source,
+    sourceId,
+    metadata,
+    createdAt: now(),
+  };
+
+  transactions = [tx, ...transactions];
+  communityWallet = {
+    ...communityWallet,
+    availableCredits: balanceAfter,
+    updatedAt: now(),
+  };
+  persistState();
+
+  return tx;
+}
+
+function enforceDailyLimits(feature: string) {
+  const todayStr = new Date().toDateString();
+  const txsToday = transactions.filter(
+    (t) =>
+      t.transactionType === "USAGE_DEDUCTION" &&
+      new Date(t.createdAt).toDateString() === todayStr,
+  );
+
+  if (feature.startsWith("AI_")) {
+    const aiCount = txsToday.filter((t) => t.source.startsWith("AI_")).length;
+    if (aiCount >= DAILY_USAGE_LIMITS.AI_REQUESTS) {
+      throw new Error("DAILY_LIMIT_EXCEEDED_AI");
+    }
+  } else if (
+    feature.startsWith("WEBHOOK_") ||
+    feature === "WEBHOOK_TRIGGER" ||
+    feature === "WEBHOOK_RETRY" ||
+    feature === "WEBHOOK_PREMIUM_DELIVERY"
+  ) {
+    const webhookCount = txsToday.filter(
+      (t) =>
+        t.source.startsWith("WEBHOOK_") ||
+        t.source === "WEBHOOK_TRIGGER" ||
+        t.source === "WEBHOOK_RETRY" ||
+        t.source === "WEBHOOK_PREMIUM_DELIVERY",
+    ).length;
+    if (webhookCount >= DAILY_USAGE_LIMITS.WEBHOOKS) {
+      throw new Error("DAILY_LIMIT_EXCEEDED_WEBHOOKS");
+    }
+  } else if (feature === "EMAIL_SEND") {
+    const emailCount = txsToday.filter((t) => t.source === "EMAIL_SEND").length;
+    if (emailCount >= DAILY_USAGE_LIMITS.EMAILS) {
+      throw new Error("DAILY_LIMIT_EXCEEDED_EMAILS");
+    }
+  }
+}
+
+function checkSuspiciousActivity(credits: number) {
+  const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000;
+  const recentDeductions = transactions.filter(
+    (t) =>
+      t.transactionType === "USAGE_DEDUCTION" &&
+      new Date(t.createdAt).getTime() > oneDayAgo,
+  );
+
+  const totalBurn = Math.abs(recentDeductions.reduce((sum, t) => sum + t.credits, 0)) + credits;
+  if (totalBurn > 5000) {
+    console.warn(
+      `[SECURITY ALERT] Rapid burn pattern detected: ${totalBurn} credits consumed in 24 hours.`,
+    );
+  }
+}
+
+function assertIdempotencyKey(idempotencyKey: string) {
+  if (!/^[a-zA-Z0-9_-]{6,120}$/.test(idempotencyKey)) {
+    throw new Error("INVALID_IDEMPOTENCY_KEY");
+  }
+}
+
+function getExistingTransaction(type: CreditTransactionType, idempotencyKey: string) {
+  return transactions.find(
+    (tx) => tx.transactionType === type && tx.metadata?.idempotencyKey === idempotencyKey,
+  );
+}
+
+function maybeAutoRecharge() {
+  if (!communityWallet.autoRechargeEnabled) return;
+  if (communityWallet.availableCredits > communityWallet.autoRechargeThreshold) return;
+
+  const idempotencyKey = `auto-recharge-${new Date().toISOString().slice(0, 10)}-${communityWallet.id}`;
+  if (idempotencyKeys.has(idempotencyKey)) return;
+
+  const amountRupees = communityWallet.autoRechargeAmountRupees;
+  if (!Number.isInteger(amountRupees) || amountRupees < MIN_ADD_RUPEES) return;
+
+  const totalCredits = calculateTotalCredits(amountRupees);
+  const bonus = totalCredits - amountRupees * 10;
+  idempotencyKeys.add(idempotencyKey);
+
+  const tx = appendTransaction(
+    communityWallet.id,
+    "CREDIT_PURCHASE",
+    totalCredits,
+    "auto_recharge",
+    idempotencyKey,
+    { amountRupees, bonusCredits: bonus, idempotencyKey, automatic: true },
+  );
+
+  communityWallet = {
+    ...communityWallet,
+    lifetimePurchasedCredits: communityWallet.lifetimePurchasedCredits + totalCredits,
+    updatedAt: now(),
+  };
+  transactions = transactions.map((transaction) => (transaction.id === tx.id ? tx : transaction));
+  persistState();
+}
+
+export const walletStore = {
+  getWallet: (): Wallet => {
+    hydrateState();
+    return cloneWallet(communityWallet);
+  },
+
+  getTransactions: (walletId?: string): CreditTransaction[] => {
+    hydrateState();
+    const cloned = transactions.map(cloneTransaction);
+    if (walletId) {
+      return cloned.filter((t) => t.walletId === walletId);
+    }
+    return cloned;
+  },
+
+  resetForTests: () => {
+    communityWallet = { ...initialWallet, updatedAt: now() };
+    transactions = initialTransactions.map(cloneTransaction);
+    idempotencyKeys.clear();
+    transactions.forEach((tx) => {
+      const key = tx.metadata?.idempotencyKey;
+      if (typeof key === "string") idempotencyKeys.add(key);
+    });
+    persistState();
+  },
+
+  addFunds: (
+    amountRupees: number,
+    idempotencyKey: string,
+  ): { wallet: Wallet; transaction: CreditTransaction } => {
+    assertIdempotencyKey(idempotencyKey);
+    if (!Number.isInteger(amountRupees) || amountRupees < MIN_ADD_RUPEES) {
+      throw new Error("MINIMUM_ADD_FUNDS_REQUIRED");
+    }
+
+    if (idempotencyKeys.has(idempotencyKey)) {
+      const existing = getExistingTransaction("CREDIT_PURCHASE", idempotencyKey);
+      if (existing) return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(existing) };
+      throw new Error("IDEMPOTENCY_KEY_REUSED");
+    }
+
+    const totalCredits = calculateTotalCredits(amountRupees);
+    const bonus = totalCredits - amountRupees * 10;
+
+    idempotencyKeys.add(idempotencyKey);
+
+    const tx = appendTransaction(
+      communityWallet.id,
+      "CREDIT_PURCHASE",
+      totalCredits,
+      "payment",
+      idempotencyKey,
+      { amountRupees, bonusCredits: bonus, idempotencyKey },
+    );
+
+    communityWallet = {
+      ...communityWallet,
+      lifetimePurchasedCredits: communityWallet.lifetimePurchasedCredits + totalCredits,
+      updatedAt: now(),
+    };
+    persistState();
+
+    return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(tx) };
+  },
+
+  consumeCredits: (
+    credits: number,
+    feature: string,
+    idempotencyKey: string,
+    metadata?: Record<string, unknown>,
+  ): { wallet: Wallet; transaction: CreditTransaction } => {
+    assertIdempotencyKey(idempotencyKey);
+
+    if (idempotencyKeys.has(idempotencyKey)) {
+      const existing = getExistingTransaction("USAGE_DEDUCTION", idempotencyKey);
+      if (existing) return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(existing) };
+      throw new Error("IDEMPOTENCY_KEY_REUSED");
+    }
+
+    if (!Number.isInteger(credits) || credits <= 0) {
+      throw new Error("INVALID_CREDIT_AMOUNT");
+    }
+
+    enforceDailyLimits(feature);
+    checkSuspiciousActivity(credits);
+
+    idempotencyKeys.add(idempotencyKey);
+
+    const tx = appendTransaction(
+      communityWallet.id,
+      "USAGE_DEDUCTION",
+      -credits,
+      feature,
+      undefined,
+      { ...metadata, idempotencyKey },
+    );
+
+    communityWallet = {
+      ...communityWallet,
+      lifetimeUsedCredits: communityWallet.lifetimeUsedCredits + credits,
+      updatedAt: now(),
+    };
+    maybeAutoRecharge();
+    persistState();
+
+    return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(tx) };
+  },
+
+  refundCredits: (
+    credits: number,
+    sourceId: string,
+    idempotencyKey: string,
+  ): { wallet: Wallet; transaction: CreditTransaction } => {
+    assertIdempotencyKey(idempotencyKey);
+    if (!Number.isInteger(credits) || credits <= 0) {
+      throw new Error("INVALID_CREDIT_AMOUNT");
+    }
+
+    if (idempotencyKeys.has(idempotencyKey)) {
+      const existing = getExistingTransaction("REFUND", idempotencyKey);
+      if (existing) return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(existing) };
+      throw new Error("IDEMPOTENCY_KEY_REUSED");
+    }
+
+    idempotencyKeys.add(idempotencyKey);
+
+    const tx = appendTransaction(
+      communityWallet.id,
+      "REFUND",
+      credits,
+      "refund",
+      sourceId,
+      { idempotencyKey },
+    );
+
+    return { wallet: cloneWallet(communityWallet), transaction: cloneTransaction(tx) };
+  },
+
+  setAutoRecharge: (enabled: boolean, thresholdCredits?: number, amountRupees?: number) => {
+    if (thresholdCredits !== undefined && (!Number.isInteger(thresholdCredits) || thresholdCredits < 0)) {
+      throw new Error("INVALID_AUTO_RECHARGE_THRESHOLD");
+    }
+    if (
+      amountRupees !== undefined &&
+      (!Number.isInteger(amountRupees) || amountRupees < MIN_ADD_RUPEES)
+    ) {
+      throw new Error("INVALID_AUTO_RECHARGE_AMOUNT");
+    }
+
+    communityWallet = {
+      ...communityWallet,
+      autoRechargeEnabled: enabled,
+      autoRechargeThreshold: thresholdCredits ?? communityWallet.autoRechargeThreshold,
+      autoRechargeAmountRupees: amountRupees ?? communityWallet.autoRechargeAmountRupees,
+      updatedAt: now(),
+    };
+    persistState();
+    return cloneWallet(communityWallet);
+  },
+
+  validateLedgerConsistency: () => {
+    return transactions.every((tx) => tx.balanceAfter - tx.balanceBefore === tx.credits);
+  },
+
+  getUsageSummary: (): UsageSummary => ({
+    totalConsumed: 1430,
+    dailyAverage: 48,
+    monthlyEstimate: 1440,
+    burnRatePerDay: 52,
+    topFeatures: [
+      { feature: "AI_SUMMARY", credits: 450 },
+      { feature: "WEBHOOK_TRIGGER", credits: 320 },
+      { feature: "EXPORT_DATA", credits: 280 },
+      { feature: "ANALYTICS_QUERY", credits: 180 },
+      { feature: "EMAIL_SEND", credits: 120 },
+    ],
+  }),
+
+  getUsageBreakdown: (): UsageBreakdown[] => [
+    { category: "AI", credits: 520, percentage: 36 },
+    { category: "Webhooks", credits: 340, percentage: 24 },
+    { category: "API", credits: 290, percentage: 20 },
+    { category: "Queue", credits: 150, percentage: 10 },
+    { category: "Storage", credits: 130, percentage: 10 },
+  ],
+
+  getUsageForecast: (): UsageForecast => ({
+    nextMonthCredits: 12500,
+    aiSpikeRisk: "medium",
+    storageGrowthCredits: 800,
+    confidence: 0.82,
+  }),
+
+  getTeamUsage: (): TeamUsageRow[] => [
+    {
+      memberId: "m-1",
+      memberName: "John Doe",
+      memberRole: "System Admin",
+      memberAvatar: "https://randomuser.me/api/portraits/men/1.jpg",
+      creditsUsed: 420,
+      lastActivity: "2026-05-17T18:30:00.000Z",
+    },
+    {
+      memberId: "m-2",
+      memberName: "Jane Smith",
+      memberRole: "HR Manager",
+      memberAvatar: "https://randomuser.me/api/portraits/women/2.jpg",
+      creditsUsed: 310,
+      lastActivity: "2026-05-17T12:15:00.000Z",
+    },
+    {
+      memberId: "m-3",
+      memberName: "Alex Turner",
+      memberRole: "Finance Lead",
+      memberAvatar: "https://randomuser.me/api/portraits/men/3.jpg",
+      creditsUsed: 185,
+      lastActivity: "2026-05-16T20:45:00.000Z",
+    },
+    {
+      memberId: "m-4",
+      memberName: "Maria Garcia",
+      memberRole: "UI/UX Designer",
+      memberAvatar: "https://randomuser.me/api/portraits/women/4.jpg",
+      creditsUsed: 95,
+      lastActivity: "2026-05-15T10:00:00.000Z",
+    },
+    {
+      memberId: "m-5",
+      memberName: "Chris Wilson",
+      memberRole: "Infrastructure",
+      memberAvatar: "https://randomuser.me/api/portraits/men/5.jpg",
+      creditsUsed: 60,
+      lastActivity: "2026-05-14T09:30:00.000Z",
+    },
+  ],
+};
diff --git a/src/features/Billing/v1/pages/AddFundsPage.tsx b/src/features/Billing/v1/pages/AddFundsPage.tsx
new file mode 100644
index 0000000..c8459ff
--- /dev/null
+++ b/src/features/Billing/v1/pages/AddFundsPage.tsx
@@ -0,0 +1,277 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, CheckCircle2, Loader2, Wallet } from "lucide-react";
+import { RECHARGE_PACKS, MIN_ADD_RUPEES } from "../constants/billing.constants";
+import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds } from "../utils/credits";
+import { useAddFunds } from "../hooks/useWallet";
+import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+import type { PaymentState } from "../Billing.types";
+
+const PAYMENT_METHODS = [
+  { id: "upi", label: "UPI" },
+  { id: "debit", label: "Debit Card" },
+  { id: "credit", label: "Credit Card" },
+  { id: "netbanking", label: "Net Banking" },
+  { id: "wallet", label: "Wallets" },
+] as const;
+
+export default function AddFundsPage() {
+  const navigate = useNavigate();
+  const { toasts, addToast, dismiss } = useToast();
+  const addFunds = useAddFunds();
+
+  const [amountStr, setAmountStr] = useState("500");
+  const amount = Number(amountStr) || 0;
+  const [paymentMethod, setPaymentMethod] = useState<(typeof PAYMENT_METHODS)[number]["id"]>("upi");
+  const [paymentState, setPaymentState] = useState<PaymentState>("idle");
+  const [forceFail, setForceFail] = useState(false);
+
+  const preview = buildAddFundsPreview(amount);
+  const validation = validateMinAddFunds(amount);
+
+  const handlePay = async () => {
+    if (!validation.valid) {
+      addToast("error", "Invalid amount", validation.error ?? "Check amount");
+      return;
+    }
+
+    setPaymentState("processing");
+    try {
+      await addFunds.mutateAsync({
+        amountRupees: amount,
+        paymentMethod,
+        idempotencyKey: `pay-${Date.now()}${forceFail ? "-fail" : ""}`,
+      });
+      setPaymentState("success");
+      addToast("success", "Payment successful", `${formatCredits(preview.totalCredits)} credits added.`);
+    } catch {
+      setPaymentState("failed");
+      addToast("error", "Payment failed", "Please try again or use a different method.");
+    }
+  };
+
+  return (
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <div
+        className="border-b px-5 py-5 sm:px-8 lg:px-10"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+      >
+        <div className="mx-auto max-w-[1440px] flex items-center gap-4">
+          <button
+            onClick={() => navigate("/org/billing/wallet")}
+            className="p-2 rounded-lg hover:bg-[var(--cd-hover)]"
+          >
+            <ArrowLeft size={18} style={{ color: "var(--cd-text-muted)" }} />
+          </button>
+          <div className="flex items-center gap-3">
+            <Wallet size={20} style={{ color: "var(--cd-primary)" }} />
+            <h1 className="text-xl font-semibold" style={{ color: "var(--cd-text)" }}>
+              Add Funds
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <main className="mx-auto w-full max-w-[1440px] px-4 py-8 sm:px-8 lg:px-10 flex flex-col gap-8">
+        {paymentState === "success" ? (
+          <SuccessState
+            credits={preview.totalCredits}
+            onDone={() => navigate("/org/billing/wallet")}
+          />
+        ) : (
+          <>
+            <section>
+              <h2 className="text-sm font-semibold mb-3" style={{ color: "var(--cd-text-muted)" }}>
+                Recharge packs
+              </h2>
+              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+                {RECHARGE_PACKS.map((pack) => (
+                  <button
+                    key={pack.id}
+                    onClick={() => setAmountStr(pack.amountRupees.toString())}
+                    className="rounded-xl border p-4 text-left transition-all hover:scale-[1.02]"
+                    style={{
+                      backgroundColor:
+                        amount === pack.amountRupees
+                          ? "var(--cd-primary-subtle)"
+                          : "var(--cd-surface)",
+                      borderColor:
+                        amount === pack.amountRupees
+                          ? "var(--cd-primary)"
+                          : "var(--cd-border-subtle)",
+                    }}
+                  >
+                    <p className="text-xs font-medium" style={{ color: "var(--cd-text-muted)" }}>
+                      {pack.label}
+                    </p>
+                    <p className="text-lg font-bold mt-1" style={{ color: "var(--cd-text)" }}>
+                      {formatRupees(pack.amountRupees)}
+                    </p>
+                    <p className="text-sm mt-1" style={{ color: "var(--cd-primary)" }}>
+                      {formatCredits(pack.baseCredits + pack.bonusCredits)} cr
+                      {pack.bonusCredits > 0 && (
+                        <span className="text-xs opacity-70"> (+{pack.bonusCredits} bonus)</span>
+                      )}
+                    </p>
+                  </button>
+                ))}
+              </div>
+            </section>
+
+            <section>
+              <label className="text-sm font-medium mb-2 block" style={{ color: "var(--cd-text)" }}>
+                Custom amount ({"₹"}, min {MIN_ADD_RUPEES})
+              </label>
+              <input
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                min={MIN_ADD_RUPEES}
+                step={50}
+                value={amountStr}
+                onChange={(e) => {
+                  // Only allow digits
+                  const digitsOnly = e.target.value.replace(/\D/g, "");
+                  // Strip leading zeroes unless it's just "0"
+                  const val = digitsOnly.replace(/^0+(?=\d)/, "");
+                  setAmountStr(val);
+                }}
+                className="w-full rounded-xl border px-4 py-3 text-lg font-semibold bg-transparent"
+                style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+              />
+              {!validation.valid && (
+                <p className="text-xs mt-1" style={{ color: "var(--cd-danger)" }}>
+                  {validation.error}
+                </p>
+              )}
+            </section>
+
+            <PreviewCard preview={preview} />
+
+            <section>
+              <h2 className="text-sm font-semibold mb-3" style={{ color: "var(--cd-text-muted)" }}>
+                Payment method
+              </h2>
+              <div className="flex flex-wrap gap-2">
+                {PAYMENT_METHODS.map((m) => (
+                  <button
+                    key={m.id}
+                    onClick={() => setPaymentMethod(m.id)}
+                    className="rounded-lg px-4 py-2 text-sm font-medium border transition-colors"
+                    style={{
+                      backgroundColor:
+                        paymentMethod === m.id ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+                      borderColor:
+                        paymentMethod === m.id ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                      color: paymentMethod === m.id ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                    }}
+                  >
+                    {m.label}
+                  </button>
+                ))}
+              </div>
+            </section>
+
+            {/* Test Simulation Controls */}
+            <div
+              className="border border-dashed p-4 rounded-xl flex items-center justify-between mt-2"
+              style={{
+                backgroundColor: "rgba(239, 68, 68, 0.05)",
+                borderColor: "rgba(239, 68, 68, 0.3)",
+              }}
+            >
+              <div>
+                <p className="text-xs font-semibold" style={{ color: "var(--cd-danger)" }}>
+                  Simulation Mode
+                </p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+                  Force transaction failure for E2E testing
+                </p>
+              </div>
+              <input
+                type="checkbox"
+                checked={forceFail}
+                onChange={(e) => setForceFail(e.target.checked)}
+                className="w-4 h-4 cursor-pointer accent-red-500"
+                id="force-fail-checkbox"
+              />
+            </div>
+
+            <button
+              onClick={() => void handlePay()}
+              disabled={!validation.valid || addFunds.isPending || paymentState === "processing"}
+              className="cd-btn cd-btn-primary w-full py-3.5 rounded-xl text-base font-semibold flex items-center justify-center gap-2 disabled:opacity-50"
+            >
+              {addFunds.isPending || paymentState === "processing" ? (
+                <>
+                  <Loader2 size={18} className="animate-spin" /> Processing...
+                </>
+              ) : (
+                <>Pay {formatRupees(preview.totalPayableRupees)}</>
+              )}
+            </button>
+          </>
+        )}
+      </main>
+
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </div>
+  );
+}
+
+function PreviewCard({ preview }: { preview: ReturnType<typeof buildAddFundsPreview> }) {
+  const rows = [
+    { label: "You pay", value: formatRupees(preview.amountRupees) },
+    { label: "GST (18%)", value: formatRupees(preview.gstRupees) },
+    { label: "Platform fee", value: formatRupees(preview.platformFeeRupees) },
+    { label: "Base credits", value: formatCredits(preview.baseCredits) },
+    ...(preview.bonusCredits > 0
+      ? [{ label: "Bonus credits", value: `+${formatCredits(preview.bonusCredits)}` }]
+      : []),
+  ];
+
+  return (
+    <div
+      className="rounded-2xl border p-5"
+      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+    >
+      <h2 className="text-sm font-semibold mb-4" style={{ color: "var(--cd-text)" }}>
+        Order summary
+      </h2>
+      <div className="space-y-2">
+        {rows.map((row) => (
+          <div key={row.label} className="flex justify-between text-sm">
+            <span style={{ color: "var(--cd-text-muted)" }}>{row.label}</span>
+            <span style={{ color: "var(--cd-text)" }}>{row.value}</span>
+          </div>
+        ))}
+        <div
+          className="border-t pt-3 mt-3 flex justify-between font-bold"
+          style={{ borderColor: "var(--cd-border-subtle)" }}
+        >
+          <span style={{ color: "var(--cd-text)" }}>Credits added</span>
+          <span data-testid="credits-added-preview" style={{ color: "var(--cd-primary)" }}>
+            {formatCredits(preview.totalCredits)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SuccessState({ credits, onDone }: { credits: number; onDone: () => void }) {
+  return (
+    <div className="flex flex-col items-center text-center py-12">
+      <CheckCircle2 size={48} style={{ color: "var(--cd-success)" }} />
+      <h2 className="text-xl font-bold mt-4" style={{ color: "var(--cd-text)" }}>
+        Payment successful
+      </h2>
+      <p className="text-sm mt-2" style={{ color: "var(--cd-text-muted)" }}>
+        {formatCredits(credits)} credits have been added to your wallet.
+      </p>
+      <button onClick={onDone} className="cd-btn cd-btn-primary mt-8 px-8 py-2.5 rounded-xl">
+        Back to wallet
+      </button>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/pages/BillingHubPage.tsx b/src/features/Billing/v1/pages/BillingHubPage.tsx
new file mode 100644
index 0000000..3883bf9
--- /dev/null
+++ b/src/features/Billing/v1/pages/BillingHubPage.tsx
@@ -0,0 +1,95 @@
+import { useNavigate } from "react-router-dom";
+import { BarChart3, CreditCard, Wallet } from "lucide-react";
+import { useWallet } from "../hooks/useWallet";
+import CreditBadge from "../components/common/CreditBadge";
+import { formatCredits } from "../utils/credits";
+import QuickRecharge from "../components/layout/QuickRecharge";
+import PayoutAccountDetails from "../components/layout/PayoutAccountDetails";
+import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+
+const LINKS = [
+  {
+    title: "Community Wallet",
+    description: "View balance, transactions, and team usage",
+    path: "/org/billing/wallet",
+    icon: Wallet,
+  },
+  {
+    title: "Add Funds",
+    description: "Purchase credits with UPI, cards, or net banking",
+    path: "/org/billing/add-funds",
+    icon: CreditCard,
+  },
+  {
+    title: "Usage Analytics",
+    description: "Burn rate, forecasts, and feature breakdown",
+    path: "/org/billing/usage",
+    icon: BarChart3,
+  },
+];
+
+export default function BillingHubPage() {
+  const navigate = useNavigate();
+  const { data: wallet } = useWallet();
+  const { toasts, dismiss } = useToast();
+
+  return (
+    <div className="w-full min-h-screen p-6 sm:p-10" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <div className="mx-auto max-w-[1440px]">
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--cd-text)" }}>
+          Billing & Credits
+        </h1>
+        <p className="text-sm mb-8" style={{ color: "var(--cd-text-muted)" }}>
+          Manage your community wallet, add funds, and track usage. {"₹"}10 = 100 credits.
+        </p>
+
+        {wallet && (
+          <div
+            className="rounded-2xl border p-6 mb-8"
+            style={{
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border-subtle)",
+            }}
+          >
+            <p className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--cd-text-muted)" }}>
+              Available balance
+            </p>
+            <CreditBadge credits={wallet.availableCredits} size="lg" />
+            <p className="text-xs mt-3" style={{ color: "var(--cd-text-muted)" }}>
+              {formatCredits(wallet.pendingCredits)} pending · {formatCredits(wallet.reservedCredits)}{" "}
+              reserved · {formatCredits(wallet.lockedCredits)} locked
+            </p>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+          {LINKS.map((link) => (
+            <button
+              key={link.path}
+              onClick={() => navigate(link.path)}
+              className="rounded-2xl border p-6 text-left transition-all hover:scale-[1.02] hover:shadow-lg"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
+              <link.icon size={24} style={{ color: "var(--cd-primary)" }} />
+              <h2 className="font-semibold mt-4" style={{ color: "var(--cd-text)" }}>
+                {link.title}
+              </h2>
+              <p className="text-sm mt-1" style={{ color: "var(--cd-text-muted)" }}>
+                {link.description}
+              </p>
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <PayoutAccountDetails />
+          <QuickRecharge />
+        </div>
+      </div>
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/pages/CommunityWalletPage.tsx b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
new file mode 100644
index 0000000..56489fa
--- /dev/null
+++ b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
@@ -0,0 +1,262 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import WalletHeader from "../components/layout/WalletHeader";
+import WalletStatsGrid from "../components/layout/WalletStatsGrid";
+import WalletFiltersBar from "../components/layout/WalletFilters";
+import TransactionTable from "../components/table/TransactionTable";
+import TransactionCardList from "../components/table/TransactionCardList";
+import TeamUsageTable from "../components/table/TeamUsageTable";
+import AutoRechargePanel from "../components/layout/AutoRechargePanel";
+import LowBalanceModal from "../components/layout/LowBalanceModal";
+import EmptyState from "@/features/Tasks/v1/components/common/EmptyState";
+import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+import { useWallet, useWalletTransactions, useConsumeCredits } from "../hooks/useWallet";
+import { useUsageSummary } from "../hooks/useUsageAnalytics";
+import { useBillingGate } from "../hooks/useBillingGate";
+import { DEFAULT_TRANSACTION_FILTERS } from "../constants/billing.constants";
+import type { TransactionFilters } from "../Billing.types";
+
+export default function CommunityWalletPage() {
+  const { toasts, addToast, dismiss } = useToast();
+  const [activeTab, setActiveTab] = useState("overview");
+  const [filters, setFilters] = useState<TransactionFilters>(DEFAULT_TRANSACTION_FILTERS);
+  const [lowBalanceDismissed, setLowBalanceDismissed] = useState(false);
+
+  const { data: wallet, isLoading, isError, refetch } = useWallet();
+  const { data: summary } = useUsageSummary();
+  const allTxQuery = useWalletTransactions({ ...DEFAULT_TRANSACTION_FILTERS, page: 1 });
+  const { data: paginated, isLoading: txsLoading } = useWalletTransactions(filters);
+  const billingGate = useBillingGate();
+
+  const navigate = useNavigate();
+  const consumeCredits = useConsumeCredits();
+  const [showAIFeatures, setShowAIFeatures] = useState(false);
+
+  const handleAISummary = async () => {
+    if (!wallet) return;
+    try {
+      await consumeCredits.mutateAsync({
+        walletId: wallet.id,
+        feature: "AI_SUMMARY",
+        credits: 15,
+        idempotencyKey: `idem-ai-${Date.now()}`,
+      });
+      addToast("success", "AI Summary Generated", "Consumed 15 credits successfully.");
+      void refetch();
+      void allTxQuery.refetch();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Insufficient balance or daily limit reached.";
+      addToast("error", "Failed to consume credits", message);
+    }
+  };
+
+  const transactions = paginated?.data ?? [];
+  const totalPages = paginated?.totalPages ?? 0;
+  const totalTxCount = allTxQuery.data?.total ?? 0;
+
+  const showLowBalance =
+    billingGate.isLoaded &&
+    (billingGate.isLowBalance || billingGate.isExhausted) &&
+    !lowBalanceDismissed;
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      setFilters((f) => ({ ...f, page: newPage }));
+    }
+  };
+
+  return (
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <WalletHeader wallet={wallet} activeTab={activeTab} onTabChange={setActiveTab} />
+
+      <div className="flex-1 flex flex-col">
+        {isError ? (
+          <div className="min-h-[70vh] flex items-center justify-center p-6">
+            <EmptyState
+              variant="error"
+              title="Failed to load wallet"
+              description="Something went wrong while fetching wallet data."
+              action={
+                <button
+                  onClick={() => void refetch()}
+                  className="cd-btn cd-btn-secondary px-6 py-2.5 rounded-xl border"
+                >
+                  Retry
+                </button>
+              }
+            />
+          </div>
+        ) : isLoading || !wallet ? (
+          <div className="p-10 text-center" style={{ color: "var(--cd-text-muted)" }}>
+            Loading wallet...
+          </div>
+        ) : (
+          <>
+            {activeTab === "overview" && (
+              <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10 flex flex-col gap-6">
+                <WalletStatsGrid wallet={wallet} burnRatePerDay={summary?.burnRatePerDay} />
+
+                <div
+                  className="rounded-2xl border p-6"
+                  style={{
+                    backgroundColor: "var(--cd-surface)",
+                    borderColor: "var(--cd-border-subtle)",
+                  }}
+                >
+                  <h3 className="text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
+                    Feature Usage
+                  </h3>
+                  <p className="text-xs mb-4" style={{ color: "var(--cd-text-muted)" }}>
+                    Run credit-metered features through the centralized billing engine.
+                  </p>
+
+                  <div className="flex flex-col gap-3">
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        onClick={() => setShowAIFeatures(!showAIFeatures)}
+                        className="rounded-xl px-4 py-2.5 text-sm font-semibold border transition-all hover:scale-[1.02]"
+                        style={{
+                          backgroundColor: showAIFeatures ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+                          borderColor: showAIFeatures ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                          color: showAIFeatures ? "var(--cd-primary-text)" : "var(--cd-text)",
+                        }}
+                      >
+                        AI Features
+                      </button>
+                      <button
+                        onClick={() => navigate("/org/billing/add-funds")}
+                        className="cd-btn cd-btn-primary px-4 py-2.5 rounded-xl text-sm font-semibold hover:scale-[1.02] transition-all"
+                      >
+                        Add Funds
+                      </button>
+                    </div>
+
+                    {showAIFeatures && (
+                      <div
+                        className="mt-2 p-4 rounded-xl border flex flex-col gap-3"
+                        style={{
+                          backgroundColor: "var(--cd-bg)",
+                          borderColor: "var(--cd-border-subtle)",
+                        }}
+                      >
+                        <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>
+                          Available AI Services
+                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          <button
+                            onClick={() => void handleAISummary()}
+                            disabled={consumeCredits.isPending}
+                            data-testid="generate-ai-summary"
+                            className="rounded-lg px-4 py-2 text-xs font-medium border transition-colors hover:bg-[var(--cd-hover)]"
+                            style={{
+                              backgroundColor: "var(--cd-surface)",
+                              borderColor: "var(--cd-border-subtle)",
+                              color: "var(--cd-text)",
+                            }}
+                          >
+                            {consumeCredits.isPending ? "Generating..." : "Generate AI Summary (15 credits)"}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <AutoRechargePanel
+                  wallet={wallet}
+                  onSuccess={() => addToast("success", "Saved", "Auto recharge settings updated.")}
+                />
+                {billingGate.isExhausted && (
+                  <div
+                    className="rounded-xl border p-4 text-sm"
+                    style={{
+                      backgroundColor: "var(--cd-danger-subtle)",
+                      borderColor: "var(--cd-danger)",
+                      color: "var(--cd-danger)",
+                    }}
+                  >
+                    Premium features are paused. Core community features remain accessible.
+                  </div>
+                )}
+              </main>
+            )}
+
+            {activeTab === "transactions" && (
+              <>
+                <WalletFiltersBar
+                  filters={filters}
+                  onChange={(f) => setFilters({ ...f, page: 1 })}
+                  filteredCount={paginated?.total ?? 0}
+                  totalCount={totalTxCount}
+                />
+                <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10">
+                  <div
+                    className="hidden md:block overflow-hidden rounded-xl border"
+                    style={{
+                      backgroundColor: "var(--cd-surface)",
+                      borderColor: "var(--cd-border-subtle)",
+                    }}
+                  >
+                    <TransactionTable transactions={transactions} isLoading={txsLoading} />
+                  </div>
+                  <div className="block md:hidden">
+                    <TransactionCardList transactions={transactions} isLoading={txsLoading} />
+                  </div>
+                  {totalPages > 1 && (
+                    <div className="flex items-center justify-between px-2 py-4">
+                      <span className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+                        Page {filters.page} of {totalPages}
+                      </span>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => handlePageChange(filters.page - 1)}
+                          disabled={filters.page === 1}
+                          className="px-4 py-2 text-sm border rounded-lg disabled:opacity-50"
+                          style={{
+                            backgroundColor: "var(--cd-surface)",
+                            borderColor: "var(--cd-border-subtle)",
+                          }}
+                        >
+                          Previous
+                        </button>
+                        <button
+                          onClick={() => handlePageChange(filters.page + 1)}
+                          disabled={filters.page === totalPages}
+                          className="px-4 py-2 text-sm border rounded-lg disabled:opacity-50"
+                          style={{
+                            backgroundColor: "var(--cd-surface)",
+                            borderColor: "var(--cd-border-subtle)",
+                          }}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </main>
+              </>
+            )}
+
+            {activeTab === "team" && (
+              <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10">
+                <TeamUsageTable />
+              </main>
+            )}
+          </>
+        )}
+      </div>
+
+      <LowBalanceModal
+        isOpen={showLowBalance}
+        availableCredits={billingGate.availableCredits}
+        threshold={billingGate.threshold}
+        onDismiss={() => setLowBalanceDismissed(true)}
+      />
+
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/pages/PaymentsPage.tsx b/src/features/Billing/v1/pages/PaymentsPage.tsx
new file mode 100644
index 0000000..cc59f81
--- /dev/null
+++ b/src/features/Billing/v1/pages/PaymentsPage.tsx
@@ -0,0 +1,55 @@
+import { Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
+import { Wallet, BarChart3, CreditCard } from "lucide-react";
+import CommunityWalletPage from "./CommunityWalletPage";
+import UsageDashboardPage from "./UsageDashboardPage";
+import AddFundsPage from "./AddFundsPage";
+
+export default function PaymentsPage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const TABS = [
+    { key: "wallet", label: "Wallet", icon: Wallet, path: "/org/payments/wallet" },
+    { key: "usage", label: "Usage", icon: BarChart3, path: "/org/payments/usage" },
+    { key: "add-funds", label: "Add Funds", icon: CreditCard, path: "/org/payments/add-funds" },
+  ];
+
+  return (
+    <div className="w-full h-full flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <div className="border-b shrink-0" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
+        <div className="mx-auto w-full max-w-[1440px] px-5 pt-6 sm:px-8 lg:px-10">
+          <h1 className="text-2xl font-bold mb-5" style={{ color: "var(--cd-text)" }}>
+            Payments
+          </h1>
+          <div className="flex items-center gap-6 overflow-x-auto">
+            {TABS.map((tab) => {
+              const isActive = location.pathname.includes(tab.path);
+              return (
+                <button
+                  key={tab.key}
+                  onClick={() => navigate(tab.path)}
+                  className="flex items-center gap-2 pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap"
+                  style={{
+                    borderColor: isActive ? "var(--cd-primary)" : "transparent",
+                    color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)"
+                  }}
+                >
+                  <tab.icon size={16} style={{ color: isActive ? "var(--cd-primary)" : "currentColor" }} />
+                  {tab.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 w-full relative">
+        <Routes>
+          <Route index element={<Navigate to="wallet" replace />} />
+          <Route path="wallet" element={<CommunityWalletPage />} />
+          <Route path="usage" element={<UsageDashboardPage />} />
+          <Route path="add-funds" element={<AddFundsPage />} />
+        </Routes>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/pages/UsageDashboardPage.tsx b/src/features/Billing/v1/pages/UsageDashboardPage.tsx
new file mode 100644
index 0000000..fac340a
--- /dev/null
+++ b/src/features/Billing/v1/pages/UsageDashboardPage.tsx
@@ -0,0 +1,104 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, BarChart3, TrendingUp, Zap } from "lucide-react";
+import UsageCharts from "../components/analytics/UsageCharts";
+import { useUsageForecast, useUsageSummary } from "../hooks/useUsageAnalytics";
+import { formatCredits } from "../utils/credits";
+
+export default function UsageDashboardPage() {
+  const navigate = useNavigate();
+  const { data: summary, isLoading } = useUsageSummary();
+  const { data: forecast } = useUsageForecast();
+
+  const stats = [
+    {
+      label: "Monthly estimate",
+      value: summary ? formatCredits(summary.monthlyEstimate) : "—",
+      icon: TrendingUp,
+    },
+    {
+      label: "Daily burn rate",
+      value: summary ? formatCredits(summary.burnRatePerDay) : "—",
+      icon: Zap,
+    },
+    {
+      label: "Next month forecast",
+      value: forecast ? formatCredits(forecast.nextMonthCredits) : "—",
+      icon: BarChart3,
+    },
+  ];
+
+  return (
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <div
+        className="border-b px-5 py-5 sm:px-8 lg:px-10"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+      >
+        <div className="mx-auto max-w-[1440px] flex items-center gap-4">
+          <button
+            onClick={() => navigate("/org/billing/wallet")}
+            className="p-2 rounded-lg hover:bg-[var(--cd-hover)]"
+          >
+            <ArrowLeft size={18} style={{ color: "var(--cd-text-muted)" }} />
+          </button>
+          <div>
+            <h1 className="text-xl font-semibold" style={{ color: "var(--cd-text)" }}>
+              Usage Analytics
+            </h1>
+            <p className="text-sm mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+              Credit burn rate, feature breakdown, and forecasts
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <main className="mx-auto w-full max-w-[1440px] px-4 py-8 sm:px-8 lg:px-10 flex flex-col gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="rounded-2xl border p-5"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
+              <div className="flex items-center gap-2 mb-2">
+                <stat.icon size={16} style={{ color: "var(--cd-primary)" }} />
+                <span className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--cd-text-muted)" }}>
+                  {stat.label}
+                </span>
+              </div>
+              <p className="text-2xl font-black" style={{ color: "var(--cd-text)" }}>
+                {isLoading ? "..." : stat.value}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {forecast && (
+          <div
+            className="rounded-xl border p-4 flex flex-wrap items-center justify-between gap-4"
+            style={{
+              backgroundColor: "var(--cd-warning-subtle)",
+              borderColor: "var(--cd-warning)",
+            }}
+          >
+            <div>
+              <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+                AI usage spike risk:{" "}
+                <span className="capitalize">{forecast.aiSpikeRisk}</span>
+              </p>
+              <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
+                Storage growth estimate: {formatCredits(forecast.storageGrowthCredits)} credits ·
+                Confidence: {Math.round(forecast.confidence * 100)}%
+              </p>
+            </div>
+          </div>
+        )}
+
+        <UsageCharts />
+      </main>
+    </div>
+  );
+}
+
diff --git a/src/features/Billing/v1/services/billingSecurity.test.ts b/src/features/Billing/v1/services/billingSecurity.test.ts
new file mode 100644
index 0000000..3991be1
--- /dev/null
+++ b/src/features/Billing/v1/services/billingSecurity.test.ts
@@ -0,0 +1,142 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { calculateFraudScore, verifyWebhookSignature } from "../utils/security";
+import { walletStore } from "../mock/walletStore";
+import { BillingService } from "./billingService";
+
+describe("Billing Security & Cost Protection", () => {
+  beforeEach(() => {
+    walletStore.resetForTests();
+  });
+
+  describe("Webhook Signature Verification", () => {
+    it("verifies and rejects malformed signatures", async () => {
+      const payload = "amount=500&id=pay-123";
+      const signature = "deadbeef";
+      const secret = "super-secret";
+
+      const verified = await verifyWebhookSignature(payload, signature, secret);
+      expect(verified).toBe(false);
+    });
+  });
+
+  describe("Fraud Scoring System", () => {
+    it("flags high risk transaction inputs", () => {
+      const result = calculateFraudScore({
+        amountRupees: 15000,
+        country: "US",
+        idempotencyKey: "pay-123!!!injection",
+      });
+
+      expect(result.score).toBeGreaterThanOrEqual(50);
+      expect(result.flagged).toBe(true);
+      expect(result.reasons.length).toBe(3);
+    });
+
+    it("passes standard, safe transactions", () => {
+      const result = calculateFraudScore({
+        amountRupees: 500,
+        country: "IN",
+        idempotencyKey: "pay-12345",
+      });
+
+      expect(result.score).toBe(0);
+      expect(result.flagged).toBe(false);
+    });
+  });
+
+  describe("Refund Logic", () => {
+    it("successfully processes credit refund via ledger", () => {
+      const wallet = walletStore.getWallet();
+      const initial = wallet.availableCredits;
+
+      const result = walletStore.refundCredits(500, "pay-123", "idem-ref-1");
+      expect(result.wallet.availableCredits).toBe(initial + 500);
+      
+      const transactions = walletStore.getTransactions();
+      const lastTx = transactions[0];
+      expect(lastTx.transactionType).toBe("REFUND");
+      expect(lastTx.credits).toBe(500);
+    });
+
+    it("prevents double-spending on duplicate refund idempotency keys", () => {
+      const wallet = walletStore.getWallet();
+      const initial = wallet.availableCredits;
+
+      const result1 = walletStore.refundCredits(500, "pay-123", "idem-ref-2");
+      const result2 = walletStore.refundCredits(500, "pay-123", "idem-ref-2");
+
+      expect(result1.wallet.availableCredits).toBe(initial + 500);
+      expect(result2.wallet.availableCredits).toBe(initial + 500); // Should return same cached result
+    });
+  });
+
+  describe("Daily Limits & Caps", () => {
+    it("allows deductions within daily limit", async () => {
+      const wallet = walletStore.getWallet();
+      
+      const res = await BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "AI_SUMMARY",
+        credits: 15,
+        idempotencyKey: "idem-limit-test-ok",
+      });
+
+      expect(res.wallet.availableCredits).toBeLessThan(wallet.availableCredits);
+    });
+  });
+
+  describe("Ledger Consistency & Idempotency", () => {
+    it("records accurate balanceBefore and balanceAfter for purchases", () => {
+      const before = walletStore.getWallet().availableCredits;
+      const result = walletStore.addFunds(150, "idem-purchase-ledger");
+
+      expect(result.transaction.balanceBefore).toBe(before);
+      expect(result.transaction.balanceAfter).toBe(result.wallet.availableCredits);
+      expect(result.transaction.balanceAfter - result.transaction.balanceBefore).toBe(
+        result.transaction.credits,
+      );
+      expect(walletStore.validateLedgerConsistency()).toBe(true);
+    });
+
+    it("returns the same transaction for duplicate consumption idempotency keys", async () => {
+      const wallet = walletStore.getWallet();
+      const first = await BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "WEBHOOK_TRIGGER",
+        credits: 1,
+        idempotencyKey: "idem-consume-repeat",
+      });
+      const second = await BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "WEBHOOK_TRIGGER",
+        credits: 1,
+        idempotencyKey: "idem-consume-repeat",
+      });
+
+      expect(second.transaction.id).toBe(first.transaction.id);
+      expect(second.wallet.availableCredits).toBe(first.wallet.availableCredits);
+    });
+
+    it("rejects reused idempotency keys across different operations", () => {
+      walletStore.addFunds(150, "idem-cross-operation");
+      expect(() => walletStore.refundCredits(150, "pay-cross", "idem-cross-operation")).toThrow(
+        "IDEMPOTENCY_KEY_REUSED",
+      );
+    });
+
+    it("runs configured auto recharge after balance drops below threshold", async () => {
+      walletStore.setAutoRecharge(true, 6850, 150);
+      const wallet = walletStore.getWallet();
+
+      const result = await BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "AI_SUMMARY",
+        credits: 15,
+        idempotencyKey: "idem-auto-recharge",
+      });
+
+      expect(result.wallet.availableCredits).toBeGreaterThan(wallet.availableCredits);
+      expect(walletStore.getTransactions()[0].source).toBe("auto_recharge");
+    });
+  });
+});
diff --git a/src/features/Billing/v1/services/billingService.test.ts b/src/features/Billing/v1/services/billingService.test.ts
new file mode 100644
index 0000000..fb2ddf2
--- /dev/null
+++ b/src/features/Billing/v1/services/billingService.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { BillingService } from "./billingService";
+import { walletStore } from "../mock/walletStore";
+
+describe("BillingService", () => {
+  beforeEach(() => {
+    walletStore.resetForTests();
+  });
+
+  it("consumes credits through centralized service", async () => {
+    const wallet = walletStore.getWallet();
+    const before = wallet.availableCredits;
+
+    await BillingService.consumeCredits({
+      walletId: wallet.id,
+      feature: "WEBHOOK_TRIGGER",
+      credits: 1,
+      idempotencyKey: "idem-1",
+    });
+
+    expect(walletStore.getWallet().availableCredits).toBe(before - 1);
+  });
+
+  it("rejects insufficient credits", async () => {
+    const wallet = walletStore.getWallet();
+    await expect(
+      BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "AI_SUMMARY",
+        credits: wallet.availableCredits + 1,
+        idempotencyKey: "idem-2",
+      }),
+    ).rejects.toThrow();
+  });
+
+  it("rejects known feature charges that do not match the pricing matrix", async () => {
+    const wallet = walletStore.getWallet();
+    await expect(
+      BillingService.consumeCredits({
+        walletId: wallet.id,
+        feature: "AI_SUMMARY",
+        credits: 1,
+        idempotencyKey: "idem-price-mismatch",
+      }),
+    ).rejects.toThrow("PRICING_MATRIX_MISMATCH");
+  });
+});
diff --git a/src/features/Billing/v1/services/billingService.ts b/src/features/Billing/v1/services/billingService.ts
new file mode 100644
index 0000000..8e4b9ea
--- /dev/null
+++ b/src/features/Billing/v1/services/billingService.ts
@@ -0,0 +1,49 @@
+import type { ConsumeCreditsPayload } from "../Billing.types";
+import { CREDIT_PRICING, getFeatureCost, type CreditFeature } from "../constants/creditPricing";
+import { walletStore } from "../mock/walletStore";
+
+/**
+ * Centralized billing engine — all credit deductions must go through this service.
+ */
+export const BillingService = {
+  async consumeCredits(payload: ConsumeCreditsPayload) {
+    const { walletId, feature, credits, metadata, idempotencyKey } = payload;
+
+    if (!walletId || !idempotencyKey) {
+      throw new Error("INVALID_PAYLOAD");
+    }
+
+    if (credits <= 0 || !Number.isInteger(credits)) {
+      throw new Error("INVALID_CREDIT_AMOUNT");
+    }
+
+    const knownFeatureCost = (CREDIT_PRICING as Record<string, number>)[feature];
+    if (knownFeatureCost !== undefined && knownFeatureCost !== credits) {
+      throw new Error("PRICING_MATRIX_MISMATCH");
+    }
+
+    await new Promise((r) => setTimeout(r, 120));
+
+    return walletStore.consumeCredits(credits, feature, idempotencyKey, metadata);
+  },
+
+  async consumeFeature(
+    walletId: string,
+    feature: CreditFeature,
+    idempotencyKey: string,
+    metadata?: Record<string, unknown>,
+  ) {
+    const credits = getFeatureCost(feature);
+    return this.consumeCredits({
+      walletId,
+      feature,
+      credits,
+      metadata,
+      idempotencyKey,
+    });
+  },
+
+  getWallet() {
+    return walletStore.getWallet();
+  },
+};
diff --git a/src/features/Billing/v1/utils/credits.test.ts b/src/features/Billing/v1/utils/credits.test.ts
new file mode 100644
index 0000000..01be652
--- /dev/null
+++ b/src/features/Billing/v1/utils/credits.test.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import {
+  rupeesToBaseCredits,
+  calculateTotalCredits,
+  validateMinAddFunds,
+  buildAddFundsPreview,
+  canAfford,
+} from "./credits";
+
+describe("credits utils", () => {
+  it("converts rupees at 10 credits per rupee", () => {
+    expect(rupeesToBaseCredits(10)).toBe(100);
+    expect(rupeesToBaseCredits(150)).toBe(1500);
+  });
+
+  it("applies pack bonus credits", () => {
+    expect(calculateTotalCredits(500)).toBe(5500);
+    expect(calculateTotalCredits(150)).toBe(1500);
+  });
+
+  it("enforces minimum add funds", () => {
+    expect(validateMinAddFunds(149).valid).toBe(false);
+    expect(validateMinAddFunds(150).valid).toBe(true);
+  });
+
+  it("builds add funds preview with GST and platform fee", () => {
+    const preview = buildAddFundsPreview(500);
+    expect(preview.baseCredits).toBe(5000);
+    expect(preview.bonusCredits).toBe(500);
+    expect(preview.totalCredits).toBe(5500);
+    expect(preview.gstRupees).toBe(90);
+    expect(preview.totalPayableRupees).toBeGreaterThan(500);
+  });
+
+  it("checks affordability", () => {
+    expect(canAfford(100, 50)).toBe(true);
+    expect(canAfford(10, 50)).toBe(false);
+  });
+});
diff --git a/src/features/Billing/v1/utils/credits.ts b/src/features/Billing/v1/utils/credits.ts
new file mode 100644
index 0000000..82bf17d
--- /dev/null
+++ b/src/features/Billing/v1/utils/credits.ts
@@ -0,0 +1,71 @@
+import {
+  CREDITS_PER_RUPEE,
+  GST_RATE,
+  MIN_ADD_CREDITS,
+  MIN_ADD_RUPEES,
+  PLATFORM_FEE_RATE,
+  RECHARGE_PACKS,
+} from "../constants/billing.constants";
+import type { AddFundsPreview } from "../Billing.types";
+
+export function rupeesToBaseCredits(rupees: number): number {
+  return Math.floor(rupees * CREDITS_PER_RUPEE);
+}
+
+export function getBonusCreditsForAmount(amountRupees: number): number {
+  const pack = RECHARGE_PACKS.find((p) => p.amountRupees === amountRupees);
+  return pack?.bonusCredits ?? 0;
+}
+
+export function calculateTotalCredits(amountRupees: number): number {
+  const base = rupeesToBaseCredits(amountRupees);
+  const bonus = getBonusCreditsForAmount(amountRupees);
+  return base + bonus;
+}
+
+export function validateMinAddFunds(amountRupees: number): {
+  valid: boolean;
+  error?: string;
+} {
+  if (!Number.isInteger(amountRupees) || amountRupees < MIN_ADD_RUPEES) {
+    return {
+      valid: false,
+      error: `Minimum add funds is \u20B9${MIN_ADD_RUPEES} (${MIN_ADD_CREDITS} credits)`,
+    };
+  }
+  return { valid: true };
+}
+
+export function buildAddFundsPreview(amountRupees: number): AddFundsPreview {
+  const baseCredits = rupeesToBaseCredits(amountRupees);
+  const bonusCredits = getBonusCreditsForAmount(amountRupees);
+  const gstRupees = Math.round(amountRupees * GST_RATE);
+  const platformFeeRupees = Math.round(amountRupees * PLATFORM_FEE_RATE);
+  const totalPayableRupees = amountRupees + gstRupees + platformFeeRupees;
+
+  return {
+    amountRupees,
+    baseCredits,
+    bonusCredits,
+    totalCredits: baseCredits + bonusCredits,
+    gstRupees,
+    platformFeeRupees,
+    totalPayableRupees,
+  };
+}
+
+export function formatCredits(credits: number): string {
+  return credits.toLocaleString("en-IN");
+}
+
+export function formatRupees(rupees: number): string {
+  return `\u20B9${rupees.toLocaleString("en-IN")}`;
+}
+
+export function isLowBalance(availableCredits: number, threshold: number): boolean {
+  return availableCredits <= threshold;
+}
+
+export function canAfford(availableCredits: number, cost: number): boolean {
+  return availableCredits >= cost && cost > 0;
+}
diff --git a/src/features/Billing/v1/utils/security.ts b/src/features/Billing/v1/utils/security.ts
new file mode 100644
index 0000000..c9d5f36
--- /dev/null
+++ b/src/features/Billing/v1/utils/security.ts
@@ -0,0 +1,86 @@
+/**
+ * Production-grade security utilities for CommDesk Billing
+ */
+
+/**
+ * Verifies a webhook payload against an HMAC-SHA256 signature and a shared secret.
+ * Utilizes standard Web Crypto API (supported natively in all modern browsers and Tauri).
+ */
+export async function verifyWebhookSignature(
+  payload: string,
+  signature: string,
+  secret: string
+): Promise<boolean> {
+  if (!payload || !signature || !secret) return false;
+  try {
+    const encoder = new TextEncoder();
+    const keyData = encoder.encode(secret);
+    
+    // Import HMAC Key
+    const key = await window.crypto.subtle.importKey(
+      "raw",
+      keyData,
+      { name: "HMAC", hash: "SHA-256" },
+      false,
+      ["sign", "verify"]
+    );
+
+    // Convert hex signature string back to a Uint8Array
+    const hexParts = signature.match(/.{1,2}/g);
+    if (!hexParts) return false;
+    const signatureBytes = new Uint8Array(hexParts.map((byte) => parseInt(byte, 16)));
+    
+    const payloadData = encoder.encode(payload);
+
+    // Cryptographically verify signature
+    return await window.crypto.subtle.verify("HMAC", key, signatureBytes, payloadData);
+  } catch (error) {
+    console.error("Signature verification error:", error);
+    return false;
+  }
+}
+
+/**
+ * Evaluates payment transaction payloads for security threats and generates a fraud score.
+ * Flagged transactions (score >= 50) indicate high risk of payment fraud or abuse.
+ */
+export function calculateFraudScore(payload: {
+  amountRupees?: number;
+  paymentMethod?: string;
+  idempotencyKey?: string;
+  ipAddress?: string;
+  country?: string;
+}): { score: number; flagged: boolean; reasons: string[] } {
+  let score = 0;
+  const reasons: string[] = [];
+
+  // 1. Transaction volume limits
+  if (payload.amountRupees && payload.amountRupees > 10000) {
+    score += 45;
+    reasons.push("High transaction value (> \u20B910,000)");
+  }
+
+  // 2. High-value wallet risk
+  if (payload.paymentMethod === "wallet" && payload.amountRupees && payload.amountRupees > 2000) {
+    score += 25;
+    reasons.push("High value wallet payment (> \u20B92,000)");
+  }
+
+  // 3. Location mismatch / geo-risk
+  if (payload.country && payload.country !== "IN") {
+    score += 30;
+    reasons.push(`International transaction location: ${payload.country}`);
+  }
+
+  // 4. Malformed transaction inputs (potential SQL injection or API tampering)
+  if (payload.idempotencyKey && !/^[a-zA-Z0-9_-]+$/.test(payload.idempotencyKey)) {
+    score += 60;
+    reasons.push("Suspicious characters in idempotency key (possible tamper attempt)");
+  }
+
+  return {
+    score,
+    flagged: score >= 50,
+    reasons,
+  };
+}
diff --git a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
index cb2f9c5..170a3cc 100644
--- a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
+++ b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
@@ -8,6 +8,7 @@ type TeamMember = {
   role: string;
   email: string;
   status: "active" | "away" | "offline";
+  image: string;
 };
 
 const MEMBERS: TeamMember[] = [
@@ -18,6 +19,7 @@ const MEMBERS: TeamMember[] = [
     role: "System Admin",
     email: "john.doe@example.com",
     status: "active",
+    image: "https://randomuser.me/api/portraits/men/1.jpg",
   },
   {
     id: 2,
@@ -26,6 +28,7 @@ const MEMBERS: TeamMember[] = [
     role: "HR Manager",
     email: "jane.smith@example.com",
     status: "active",
+    image: "https://randomuser.me/api/portraits/women/2.jpg",
   },
   {
     id: 3,
@@ -34,6 +37,7 @@ const MEMBERS: TeamMember[] = [
     role: "Finance Lead",
     email: "alex.turner@example.com",
     status: "away",
+    image: "https://randomuser.me/api/portraits/men/3.jpg",
   },
   {
     id: 4,
@@ -42,6 +46,7 @@ const MEMBERS: TeamMember[] = [
     role: "UI/UX Designer",
     email: "maria.garcia@example.com",
     status: "active",
+    image: "https://randomuser.me/api/portraits/women/4.jpg",
   },
   {
     id: 5,
@@ -50,6 +55,7 @@ const MEMBERS: TeamMember[] = [
     role: "Infrastructure",
     email: "chris.wilson@example.com",
     status: "offline",
+    image: "https://randomuser.me/api/portraits/men/5.jpg",
   },
 ];
 
@@ -111,9 +117,20 @@ const InternalSupport_Table = () => {
               <td>
                 <div className="flex items-center gap-3">
                   <div className="relative shrink-0">
+                    <img
+                      src={member.image}
+                      alt={member.name}
+                      className="w-9 h-9 rounded-full object-cover border"
+                      style={{ borderColor: "var(--cd-border)" }}
+                      onError={(e) => {
+                        e.currentTarget.style.display = 'none';
+                        const sibling = e.currentTarget.nextElementSibling as HTMLElement;
+                        if (sibling) sibling.style.display = 'flex';
+                      }}
+                    />
                     <div
                       className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white select-none"
-                      style={{ backgroundColor: "var(--cd-primary)" }}
+                      style={{ backgroundColor: "var(--cd-primary)", display: 'none' }}
                     >
                       {getInitials(member.name)}
                     </div>
diff --git a/src/features/Member/v1/Pages/Billing.tsx b/src/features/Member/v1/Pages/Billing.tsx
index 98fb669..f3efe9c 100644
--- a/src/features/Member/v1/Pages/Billing.tsx
+++ b/src/features/Member/v1/Pages/Billing.tsx
@@ -1,10 +1,5 @@
-import PagePlaceholder from "../Components/PagePlaceholder";
+import BillingHubPage from "@/features/Billing/v1/pages/BillingHubPage";
 
 export default function BillingPage() {
-  return (
-    <PagePlaceholder
-      title="Billing"
-      description="Manage subscriptions, invoices, payment methods, and billing history."
-    />
-  );
+  return <BillingHubPage />;
 }
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index bfbd147..a126fee 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -7,6 +7,9 @@ import {
   MdSettings,
   MdWork,
   MdWebhook,
+  MdAccountBalanceWallet,
+  MdBarChart,
+  MdPayments,
 } from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
@@ -25,6 +28,9 @@ const SideBar = () => {
   console.log("Organization in SideBar:", organization);
   const { theme } = useTheme();
 
+  const communityName = organization?.CommunityName || "CommDesk";
+  const userRole = user?.role || "Admin";
+
   return (
     <div
       className="w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col"
@@ -66,6 +72,7 @@ const SideBar = () => {
         <SideBarLink icon={<MdEvent />} text="Events" link="/org/events" />
         <SideBarLink icon={<MdAssignment />} text="Tasks" link="/org/tasks" />
         <SideBarLink icon={<MdWebhook />} text="Webhooks" link="/org/dashboard/webhooks" />
+        <SideBarLink icon={<MdPayments />} text="Payments" link="/org/billing" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
         {/* Footer */}
@@ -86,13 +93,16 @@ const SideBar = () => {
               src={organization?.LogoUrl || "/defaultProfile.png"}
               alt="Profile"
               className="w-9 h-9 rounded-full object-cover shrink-0"
+              onError={(e) => {
+                e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(communityName)}&background=4f46e5&color=fff`;
+              }}
             />
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
-                {organization?.CommunityName}
+                {communityName}
               </p>
               <p className="text-xs truncate font-medium" style={{ color: theme.primary.default }}>
-                {user?.role}
+                {userRole}
               </p>
             </div>
           </div>
diff --git a/src/features/Tasks/v1/hooks/useTasks.ts b/src/features/Tasks/v1/hooks/useTasks.ts
index 3c47576..8a952eb 100644
--- a/src/features/Tasks/v1/hooks/useTasks.ts
+++ b/src/features/Tasks/v1/hooks/useTasks.ts
@@ -119,7 +119,7 @@ export function useUpdateTask() {
       payload: UpdateTaskPayload;
     }): Promise<Task> => {
       await new Promise((r) => setTimeout(r, 400));
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+       
       const { assignedTo: _ids, ...rest } = payload;
       const patch: Partial<Task> = { ...rest };
       if (payload.assignedTo) {
diff --git a/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
index 9ff6c9e..6c147f3 100644
--- a/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
+++ b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
@@ -55,6 +55,30 @@ const mockWebhookData = {
   permissions: ["read:members", "write:events"],
 };
 
+function selectEvent(label: string) {
+  fireEvent.click(screen.getByText(label));
+}
+
+async function fillCreateForm(
+  user: ReturnType<typeof userEvent.setup>,
+  options?: { name?: string; url?: string; permissions?: string },
+) {
+  const name = options?.name ?? "Test Webhook";
+  const url = options?.url ?? "https://example.com/webhook";
+
+  await user.type(screen.getByPlaceholderText("e.g. Production Slack Alerts"), name);
+  await user.type(screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk"), url);
+
+  if (options?.permissions) {
+    await user.type(
+      screen.getByPlaceholderText(/e\.g\. read:members, write:events/i),
+      options.permissions,
+    );
+  }
+
+  selectEvent("Member Created");
+}
+
 // Helper function to render with providers
 const renderWithProviders = (ui: React.ReactElement) => {
   const queryClient = new QueryClient({
@@ -203,10 +227,7 @@ describe("WebhookForm Component", () => {
       await user.clear(urlInput);
       await user.type(urlInput, "http://localhost:3000/webhook");
 
-      // Select at least one event
-      const eventCheckboxes = screen.getAllByRole("button");
-      const firstEvent = eventCheckboxes[0];
-      fireEvent.click(firstEvent);
+      selectEvent("Member Created");
 
       const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
       fireEvent.click(submitButton);
@@ -239,38 +260,25 @@ describe("WebhookForm Component", () => {
     it("should allow selecting a single event", async () => {
       renderWithProviders(<WebhookForm mode="create" />);
 
-      // Find and click an event button (they appear as clickable divs with event names)
-      const eventButtons = screen.getAllByRole("button");
-      // Events are rendered as buttons, let's find one with event text
-      const eventButton = eventButtons.find((btn) => btn.textContent?.includes("Created") || btn.textContent?.includes("Updated"));
-
-      if (eventButton) {
-        fireEvent.click(eventButton);
-        expect(screen.getByText("1 Selected")).toBeInTheDocument();
-      }
+      selectEvent("Member Created");
+      expect(screen.getByText("1 Selected")).toBeInTheDocument();
     });
 
     it("should allow selecting multiple events", async () => {
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const eventDivs = screen.getAllByRole("button");
-      // Click first event
-      if (eventDivs[0]) fireEvent.click(eventDivs[0]);
-      // Click second event
-      if (eventDivs[1]) fireEvent.click(eventDivs[1]);
+      selectEvent("Member Created");
+      selectEvent("Event Created");
 
-      expect(screen.getByText(/[2-9]|1[0-9]+ Selected/)).toBeInTheDocument();
+      expect(screen.getByText("2 Selected")).toBeInTheDocument();
     });
 
     it("should allow deselecting an event", async () => {
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) {
-        fireEvent.click(eventButtons[0]); // Select
-        fireEvent.click(eventButtons[0]); // Deselect
-        expect(screen.getByText("0 Selected")).toBeInTheDocument();
-      }
+      selectEvent("Member Created");
+      selectEvent("Member Created");
+      expect(screen.getByText("0 Selected")).toBeInTheDocument();
     });
   });
 
@@ -281,11 +289,10 @@ describe("WebhookForm Component", () => {
       const secretInput = screen.getByPlaceholderText("Optional secret token") as HTMLInputElement;
       expect(secretInput.type).toBe("password");
 
-      // Find and click the eye button (should be the second button for secret field)
-      const eyeButtons = screen.getAllByRole("button");
-      const eyeButton = eyeButtons[eyeButtons.length - 1]; // Assuming it's the last button for eye toggle
-
-      fireEvent.click(eyeButton);
+      const untitledButtons = screen
+        .getAllByRole("button")
+        .filter((btn) => !btn.getAttribute("title"));
+      fireEvent.click(untitledButtons[0]!);
       // After clicking, type should change to text
       expect(secretInput.type === "text" || secretInput.type === "password").toBeTruthy();
     });
@@ -312,18 +319,9 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+      await fillCreateForm(user);
 
-      await user.type(nameInput, "Test Webhook");
-      await user.type(urlInput, "https://example.com/webhook");
-
-      // Select an event
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         expect(mockCreateWebhookMutate).toHaveBeenCalled();
@@ -338,8 +336,7 @@ describe("WebhookForm Component", () => {
       await user.clear(nameInput);
       await user.type(nameInput, "Updated Webhook");
 
-      const submitButton = screen.getByRole("button", { name: /Update Webhook/i });
-      fireEvent.click(submitButton);
+      fireEvent.click(screen.getByRole("button", { name: /Save Changes/i }));
 
       await waitFor(() => {
         expect(mockUpdateWebhookMutate).toHaveBeenCalled();
@@ -351,17 +348,8 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-
-      await user.type(nameInput, "Test Webhook");
-      await user.type(urlInput, "https://example.com/webhook");
-
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      await fillCreateForm(user);
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         expect(mockAddToast).toHaveBeenCalledWith(
@@ -377,17 +365,8 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-
-      await user.type(nameInput, "Test Webhook");
-      await user.type(urlInput, "https://example.com/webhook");
-
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      await fillCreateForm(user);
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         expect(mockAddToast).toHaveBeenCalledWith("error", "Error saving webhook", expect.any(String));
@@ -399,17 +378,8 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-
-      await user.type(nameInput, "Test Webhook");
-      await user.type(urlInput, "https://example.com/webhook");
-
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      await fillCreateForm(user);
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         expect(mockNavigate).toHaveBeenCalledWith("/org/dashboard/webhooks");
@@ -433,19 +403,11 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-      const permissionsInput = screen.getByPlaceholderText(/e\.g\. read:members, write:events/i);
-
-      await user.type(nameInput, "Test");
-      await user.type(urlInput, "https://example.com/webhook");
-      await user.type(permissionsInput, "read:members, write:events");
-
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      await fillCreateForm(user, {
+        name: "Test",
+        permissions: "read:members, write:events",
+      });
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         const callArgs = mockCreateWebhookMutate.mock.calls[0][0];
@@ -470,17 +432,8 @@ describe("WebhookForm Component", () => {
       const user = userEvent.setup();
       renderWithProviders(<WebhookForm mode="create" />);
 
-      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
-      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-
-      await user.type(nameInput, "Minimal Webhook");
-      await user.type(urlInput, "https://example.com/webhook");
-
-      const eventButtons = screen.getAllByRole("button");
-      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
-
-      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-      fireEvent.click(submitButton);
+      await fillCreateForm(user, { name: "Minimal Webhook" });
+      fireEvent.click(screen.getByRole("button", { name: /Create Webhook/i }));
 
       await waitFor(() => {
         expect(mockCreateWebhookMutate).toHaveBeenCalledWith(
diff --git a/src/routes/OrgRoute.tsx b/src/routes/OrgRoute.tsx
index c395fc3..3cd5df1 100644
--- a/src/routes/OrgRoute.tsx
+++ b/src/routes/OrgRoute.tsx
@@ -23,6 +23,12 @@ const EditWebhookPage = lazy(() => import("@/features/Webhooks/v1/pages/EditWebh
 const WebhookDetailsPage = lazy(() => import("@/features/Webhooks/v1/pages/WebhookDetailsPage"));
 const WebhookLogsPage = lazy(() => import("@/features/Webhooks/v1/pages/WebhookLogsPage"));
 
+// Lazy-loaded Billing pages
+const CommunityWalletPage = lazy(() => import("@/features/Billing/v1/pages/CommunityWalletPage"));
+const UsageDashboardPage = lazy(() => import("@/features/Billing/v1/pages/UsageDashboardPage"));
+const AddFundsPage = lazy(() => import("@/features/Billing/v1/pages/AddFundsPage"));
+const BillingPage = lazy(() => import("@/features/Member/v1/Pages/Billing"));
+
 const OrgRoute = () => {
   return (
     <Suspense
@@ -68,6 +74,16 @@ const OrgRoute = () => {
             }
           />
 
+          {/* Community Wallet */}
+          <Route path="billing/wallet" element={<CommunityWalletPage />} />
+
+          {/* Usage Dashboard */}
+          <Route path="billing/usage" element={<UsageDashboardPage />} />
+
+          {/* Billing Hub + Add Funds */}
+          <Route path="billing" element={<BillingPage />} />
+          <Route path="billing/add-funds" element={<AddFundsPage />} />
+
           {/* Contact */}
           <Route path="contact" element={<Contact />} />
 
diff --git a/tests/e2e/billing.spec.ts b/tests/e2e/billing.spec.ts
new file mode 100644
index 0000000..ef92fa1
--- /dev/null
+++ b/tests/e2e/billing.spec.ts
@@ -0,0 +1,124 @@
+import { test, expect } from "@playwright/test";
+
+const STORAGE_KEY = "commdesk.billing.wallet.v1";
+
+function seededWalletState(availableCredits: number) {
+  const now = new Date().toISOString();
+  return {
+    wallet: {
+      id: "wallet-community-1",
+      ownerType: "community",
+      ownerId: "org-1",
+      availableCredits,
+      lockedCredits: 0,
+      pendingCredits: 0,
+      reservedCredits: 0,
+      lifetimePurchasedCredits: availableCredits,
+      lifetimeUsedCredits: 0,
+      autoRechargeEnabled: false,
+      autoRechargeThreshold: 200,
+      autoRechargeAmountRupees: 150,
+      lowBalanceThreshold: 200,
+      createdAt: now,
+      updatedAt: now,
+    },
+    transactions: [],
+  };
+}
+
+function parseCredits(text: string | null) {
+  return Number(text?.replace(/[^\d]/g, "") ?? "0");
+}
+
+test.describe("Billing & Credits Wallet E2E Scenarios", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/org/dashboard/community/wallet");
+    await page.evaluate((key) => window.localStorage.removeItem(key), STORAGE_KEY);
+    await page.reload();
+  });
+
+  test("Add Funds Flow - Successful UPI Payment", async ({ page }) => {
+    await expect(page.getByRole("heading", { name: "Community Wallet" })).toBeVisible();
+    
+    await page.getByRole("button", { name: "Add Funds" }).first().click();
+    await expect(page).toHaveURL(/\/org\/billing\/add-funds/);
+
+    await page.fill('input[type="number"]', "500");
+
+    await expect(page.getByTestId("credits-added-preview")).toHaveText("5,500"); // 5000 base + 500 bonus
+    await expect(page.locator("text=Platform fee")).toBeVisible();
+    await expect(page.locator("text=GST (18%)")).toBeVisible();
+
+    await page.getByRole("button", { name: "UPI" }).click();
+    await page.getByRole("button", { name: /Pay/ }).click();
+
+    await expect(page.locator("text=Processing...")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Payment successful" })).toBeVisible({
+      timeout: 10000,
+    });
+
+    await page.getByRole("button", { name: "Back to wallet" }).click();
+    await expect(page).toHaveURL(/\/org\/dashboard\/community\/wallet/);
+  });
+
+  test("Add Funds Flow - Failed Payment Simulation", async ({ page }) => {
+    await page.goto("/org/billing/add-funds");
+    
+    await page.fill('input[type="number"]', "150");
+    await page.click('#force-fail-checkbox');
+    await page.getByRole("button", { name: /Pay/ }).click();
+
+    await expect(page.locator("text=Payment failed")).toBeVisible();
+  });
+
+  test("Auto Recharge Configuration Toggle & Save", async ({ page }) => {
+    await expect(page.locator("text=Auto Recharge")).toBeVisible();
+
+    const thresholdInput = page.locator('input[type="number"]').first();
+    const amountInput = page.locator('input[type="number"]').last();
+    await expect(thresholdInput).toBeDisabled();
+
+    await page.click('input[type="checkbox"]');
+    
+    await expect(thresholdInput).toBeEnabled();
+    await thresholdInput.fill("300");
+    await amountInput.fill("500");
+
+    await page.getByRole("button", { name: "Save Settings" }).click();
+
+    await expect(page.locator("text=Auto recharge settings updated")).toBeVisible();
+  });
+
+  test("Graceful Credit Exhaustion & Low Balance Alerts", async ({ page }) => {
+    await page.evaluate(
+      ({ key, state }) => window.localStorage.setItem(key, JSON.stringify(state)),
+      { key: STORAGE_KEY, state: seededWalletState(100) },
+    );
+    await page.reload();
+
+    await expect(page.getByTestId("low-balance-modal-title")).toHaveText("Low Balance");
+    await expect(page.getByTestId("low-balance-add-funds")).toBeVisible();
+
+    await page.getByRole("button", { name: "Continue" }).click();
+    await expect(page.getByTestId("low-balance-modal-title")).not.toBeVisible();
+  });
+
+  test("Centralized Credit Consumption - AI usage deduction updates balance", async ({ page }) => {
+    const initialBalanceText = await page.getByTestId("wallet-stat-available-value").textContent();
+    const initialBalance = parseCredits(initialBalanceText);
+
+    await page.getByRole("button", { name: "AI Features" }).click();
+    await page.getByTestId("generate-ai-summary").click();
+
+    await expect(page.locator("text=AI Summary Generated")).toBeVisible();
+    await page.getByRole("button", { name: "Transactions" }).click();
+    await expect(page.locator("text=AI_SUMMARY").first()).toBeVisible();
+    
+    await page.getByRole("button", { name: "Overview" }).click();
+    await expect(page.getByTestId("wallet-stat-available-value")).toHaveText("6,849");
+    const newBalanceText = await page.getByTestId("wallet-stat-available-value").textContent();
+    const newBalance = parseCredits(newBalanceText);
+    
+    expect(newBalance).toBe(initialBalance - 15); // cost of AI_SUMMARY is 15 credits
+  });
+});
diff --git a/vite.config.ts b/vite.config.ts
index 7173232..880a7e7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,6 +20,7 @@ export default defineConfig(async () => ({
     environment: "jsdom",
     setupFiles: ["./vitest.setup.ts"],
     globals: true,
+    exclude: ["**/node_modules/**", "**/dist/**", "**/tests/e2e/**", "**/packages/**"],
   },
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`

From 3352066e065ee2c4657a55991affda0529214430 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:22:08 +0530
Subject: [PATCH 02/13] Update src/features/Billing/v1/mock/walletStore.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/mock/walletStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/mock/walletStore.ts b/src/features/Billing/v1/mock/walletStore.ts
index 6849a8e..c0cae51 100644
--- a/src/features/Billing/v1/mock/walletStore.ts
+++ b/src/features/Billing/v1/mock/walletStore.ts
@@ -193,7 +193,7 @@ function appendTransaction(
   }
 
   const tx: CreditTransaction = {
-    id: `tx-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+    id: `tx-${crypto.randomUUID()}`,
     walletId,
     transactionType: type,
     credits,

From 5966eafb54118c95d1397c86c13eaf35feedcae5 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:22:30 +0530
Subject: [PATCH 03/13] Update
 src/features/Billing/v1/pages/CommunityWalletPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/pages/CommunityWalletPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/pages/CommunityWalletPage.tsx b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
index 56489fa..8ad80e8 100644
--- a/src/features/Billing/v1/pages/CommunityWalletPage.tsx
+++ b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
@@ -39,7 +39,7 @@ export default function CommunityWalletPage() {
         walletId: wallet.id,
         feature: "AI_SUMMARY",
         credits: 15,
-        idempotencyKey: `idem-ai-${Date.now()}`,
+        idempotencyKey: `idem-ai-${crypto.randomUUID()}`,
       });
       addToast("success", "AI Summary Generated", "Consumed 15 credits successfully.");
       void refetch();

From aef8fee29bf330d007e145445a0dd05e72de7e4b Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:22:58 +0530
Subject: [PATCH 04/13] Update playwright.config.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index ee43c60..c8da832 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:1420",
+    baseURL: process.env.BASE_URL || "http://localhost:1420",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",

From a4820fefb5ca248b57a730159379510c237e4c0f Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:23:13 +0530
Subject: [PATCH 05/13] Update
 src/features/Billing/v1/components/layout/QuickRecharge.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/components/layout/QuickRecharge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/components/layout/QuickRecharge.tsx b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
index 7b24138..37ed27e 100644
--- a/src/features/Billing/v1/components/layout/QuickRecharge.tsx
+++ b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
@@ -21,7 +21,7 @@ export default function QuickRecharge() {
       await addFunds.mutateAsync({
         amountRupees: amt,
         paymentMethod: "upi",
-        idempotencyKey: `quick-${Date.now()}`
+        idempotencyKey: `quick-${crypto.randomUUID()}`
       });
       addToast("success", "Recharge Successful", `Added ${formatCredits(amt * 10)} credits.`);
     } catch (e) {

From da31214260ab1d967dac491c11ba548be0e8b2b5 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:23:33 +0530
Subject: [PATCH 06/13] Update src/features/Billing/v1/pages/AddFundsPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/pages/AddFundsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/pages/AddFundsPage.tsx b/src/features/Billing/v1/pages/AddFundsPage.tsx
index c8459ff..1d2138e 100644
--- a/src/features/Billing/v1/pages/AddFundsPage.tsx
+++ b/src/features/Billing/v1/pages/AddFundsPage.tsx
@@ -40,7 +40,7 @@ export default function AddFundsPage() {
       await addFunds.mutateAsync({
         amountRupees: amount,
         paymentMethod,
-        idempotencyKey: `pay-${Date.now()}${forceFail ? "-fail" : ""}`,
+        idempotencyKey: `pay-${crypto.randomUUID()}${forceFail ? "-fail" : ""}`,
       });
       setPaymentState("success");
       addToast("success", "Payment successful", `${formatCredits(preview.totalCredits)} credits added.`);

From 4c2e893695c2a97d2a1ccf94bc9e80cbbf2a5056 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:23:57 +0530
Subject: [PATCH 07/13] Update
 src/features/Billing/v1/components/analytics/UsageCharts.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/components/analytics/UsageCharts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/components/analytics/UsageCharts.tsx b/src/features/Billing/v1/components/analytics/UsageCharts.tsx
index ead35e4..853b609 100644
--- a/src/features/Billing/v1/components/analytics/UsageCharts.tsx
+++ b/src/features/Billing/v1/components/analytics/UsageCharts.tsx
@@ -18,7 +18,7 @@ const COLORS = [
   "var(--cd-success)",
   "var(--cd-warning)",
   "var(--cd-danger)",
-  "#8b5cf6",
+  "var(--cd-violet)", // Or another appropriate CSS variable
 ];
 
 export default function UsageCharts() {

From e08fdbf6c325a48097f3125d8204ac9286a7eb23 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:24:20 +0530
Subject: [PATCH 08/13] Update src/features/Billing/v1/hooks/useBillingGate.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Billing/v1/hooks/useBillingGate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Billing/v1/hooks/useBillingGate.ts b/src/features/Billing/v1/hooks/useBillingGate.ts
index 9e592da..bd2496b 100644
--- a/src/features/Billing/v1/hooks/useBillingGate.ts
+++ b/src/features/Billing/v1/hooks/useBillingGate.ts
@@ -13,7 +13,7 @@ export function useBillingGate() {
         isExhausted: false,
         canUsePremium: true,
         availableCredits: 0,
-        threshold: 200,
+        threshold: DEFAULT_LOW_BALANCE_THRESHOLD,
       };
     }
 

From cd6b3a5e5204026532652373e33392ee11984187 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:29:56 +0530
Subject: [PATCH 09/13] Update src/config/sidebar.config.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/config/sidebar.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/sidebar.config.ts b/src/config/sidebar.config.ts
index 2e2a696..c5a33a2 100644
--- a/src/config/sidebar.config.ts
+++ b/src/config/sidebar.config.ts
@@ -55,7 +55,7 @@ export const sidebarItems = [
   {
     title: "Wallet",
     path: "/org/billing/wallet",
-    icon: CreditCard,
+    icon: Wallet,
   },
   {
     title: "Usage",

From 087fc024df0cf8c9c5aa5c9b72c2ed5ab4f885fd Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 22:57:51 +0530
Subject: [PATCH 10/13] changes

---
 eslint.config.js                              |  17 ++---
 lint_output.txt                               | Bin 0 -> 34168 bytes
 .../AddMember/v1/Constant/Skill.constant.ts   |   2 +-
 src/features/Auth/v1/Pages/LoginPage.tsx      |   2 +-
 .../v1/components/table/TeamUsageTable.tsx    |  63 ++++++++++--------
 src/features/Billing/v1/hooks/useWallet.ts    |  20 +-----
 .../Billing/v1/hooks/useWalletTransactions.ts |  23 +------
 src/features/Billing/v1/utils/credits.ts      |  21 +++++-
 .../constants/ContactAndSupport.constant.ts   |   2 +-
 .../Events/v1/Components/EventSetting.tsx     |   2 +-
 .../Events/v1/Constants/Event.constant.ts     |   2 +-
 .../v1/Sections/Capacity_And_Registration.tsx |   2 +-
 .../Events/v1/Sections/DateAndSchedule.tsx    |   2 +-
 src/features/Webhooks/v1/mock/webhookStore.ts |   2 +-
 .../Webhooks/v1/pages/WebhookDetailsPage.tsx  |   2 +-
 src/features/template/LoginUserTemplate.tsx   |   2 +-
 src/theme/provider.tsx                        |   8 ++-
 src/utils/productivity.ts                     |   2 +-
 18 files changed, 86 insertions(+), 88 deletions(-)
 create mode 100644 lint_output.txt

diff --git a/eslint.config.js b/eslint.config.js
index e53008e..f24d543 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -26,14 +26,15 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "prefer-const": "off",
-      "no-empty": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "react-hooks/set-state-in-effect": "off",
-      "react-hooks/incompatible-library": "off",
-      "react-hooks/purity": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+      ],
     },
   },
 );
diff --git a/lint_output.txt b/lint_output.txt
new file mode 100644
index 0000000000000000000000000000000000000000..8cd7e80af94913aa151f5a7c52c8b8142bd5ed87
GIT binary patch
literal 34168
zcmeI5>uy`e5yuzkw*q|!CLb!fD5dCP*-?<zj;z26l3rpP{tza%B+|Abi55gkwvzZM
z`Uri@0&V}l9S-*#o+Il<QIfqNNS@p7*`1x;nfdSR?En7zhw%IGm(U2C;dR*6ryV+>
z7q&xlc+}UOy>Ksl7G}bnzMtvoov;<Up&vXoY5ZD4&v4zpD`7db!V^8w3H$nODQ!Re
zqR+aHR|fBWFnDiEPwcBSerHejySm5QTH!!xTj7D8piB?+`$l(WbgviQ#y2)px&@VU
zIo#1vBfgWT_v6{B{_Sj8=PN3~&Y;{cbxsNU;gP=U`gY=#BjvvtUd2>h<#V8?cEXYF
zy@~aB6)DkBimtA8!V7&mO3~NZ=HO~yskg#QeV~9{@5Q_An3{L*>s~j~92z<8Rtx#{
z^wfHMt`SpFLQB!s9a@PRl*_v%DqB5Loi=o(uhMs7`bPL(|LcPiQwwtIh??ZTuXAW*
zIrrkVUA=|#1EqPTqxE>ctN*U98AYMbfm*1o^Zu}oeLYWU9)!P#@4}yBE~#9W!+NCB
zuAZaCjng(%4r;!otG$@c+Vi!ZAV+Arr&98+7qP8(b>)8eM_AMIGdf;VZjG2TyhLt0
zF&{6{hEla-tG-qa^{v^{yJ-KNNTGJ5xAA5pzOxa?g&a927tftC!DnzQ{pO{(lNSDy
zo_R8)5|lZa?#^{7cdIv)fnNMN_r6d~>D9$Hw!X=mAE_=IdVVuf7OrRvs8?(|^5wec
z)QdTuTvl2a{(pb}f*MdeJ-eZ^O^rXi^FVj$Nn3g+&%KGQ%~2hlQoZ3zxRL%w`+IM?
z?Eap(h?+A}81*=Ne}A{uq}|e}@k%-D$18ivXMfN()=M^Z1qyqA-HNTm_(TqjB|e^~
zF=9q{rbU^)K6`q8In3(Av)21(#Mhm0sB1g%8hw9OeFC0uii;S*NZr(R-orm*NLxpg
zqp9OG`rRtgeNqx&c{ujd=8XUI;dA}|7LVa;+N3zDPKzeDboa|B1%EBb5agVvBd0CZ
z4hkNswmZs+KJbaseW`yq73#f+{TrH)r{#upMIx1RBS)7vok(#wos`8l+zMX|OGJul
z9zTV;52N3qT4_u9rM_ijPkOKS7^48P$T+93@|;G(IgJ-Y<!Z^ut1rsHN2wMIqDA@H
zcf%SkgvF72$5Cin98CU)g|<uA8sU%nFbeOf1U7mw4p9Hi*mkDnq!hH)U-k7|8|odj
zbvcJ0r2G6BpXAw3^|=*4U+Bzwo%N)q`pIj3w$;M3gH~?p-|5|qB`NopG)9fPuY9eN
z?5qEdYDsgd&9W#?+cCBxVY{(p=p#rb`uAJW#Pk_>(?*;l<%RsPJM;^<g;5+HvN3?x
zF$vz+U7jS*d!m7zx!j?JphVIiXO-@CyvDoHDmV4zDMp#2A-BwjyRrPH=iRLG)7s<L
ziyw)Ow4%wsjX0{fu8h7?rz_L`Syx8C$hvaYm9ws#<j_gF`>3sXHrqJs%9GNS&mt8}
zA3z?sZnqfm9@m3UuRkwVG+x)AKha3r69Rxv&>hi}O&jsIp)v4DTA)j}>4El@^h$ej
zG-Xvco~&lPSkZP<eeO$6qn#d#4r`(WI_X>KoJ~=#sP`{cwBn>OFNWKqkJtKLv<ZJG
z(f7xg7jH!)yE^?8dlY@pEcceQM{JXh5D3~76foT#)l{)BmPM80G`+8thoK+T5v&4z
z(r}pW(3U|9Mk6oc2<WWXY*@V53;wj}y`%tH#DW4xDPoZ(E1&2tDai+I`HlWlevZk3
zMo=cpr>itr0@Rnhc}o@T;La#gS67PBmMv3Yc33BLZ1icXQ?s^4Y3x6r4KmuskJSbp
z(XDer`!dGl_O0i#>(ss=+hA1K^z^WnP=*7YztYj6`e#dstKqlY`&PX6QhlpCygJ&i
z8QGTO2v%o*ejndvNcuzNg+1*Ejw5*qEu@dpXXuGwRXu$i?_iuUX~Pj1z>(hD2va&<
zSII%P3^SdImhGyp7<Nm~ETaaTgRxn!g$}zqW(-e=Y~A}P8FLTodiQ9X7SRHFDRn{8
zx^%F)7%;nw_RzDnAY=4P(Fly%TXwV!Zx5{SyRlXuj}?A0CF@3OX19!{%#O6A1!0qe
z?mkj$!=<D2T@Ze`6nhB>VqHJE?l=vjJN<kqYLYjt2K2b|A~h%TNb32_ZK6wfpMyWj
z$enBCa~f$EM9+m|N6zca5#y!jSL#h^hRLN+ea~Z_%w{u~N&ctk4YIf$=RXZG+t+B<
zsr0~k>78gNVAISz`3y2=Q#zm0zs<ie?xz_5^f#oVX@*D$q=~gMNb1?pP-YlBZBz0F
zX>u9zpq`>tK7FbZKzT5J8?&50KaadwN2?W;859`_`dG*4z&-t@IllAJ5;XdLEDac^
z;nYQXHHP#;H!#V{5i;NAuxB-k@=RF$!L@Cd2P!Q#4Y&zy-xd$o^SS9pHt)xiPet!`
z<ZN%L<S8*H>EasLC~wn(t4g2!C9=N+eVzGc_h?AyUG|r-QQduAY{ozPOQ7eO6@~qT
z^}{dn5v|Cqy2M4<Ut%2o5><V3yix-#$mE5~dc)*?8=}Q?vIY|#Y5K})q0Q^OE%1*Z
z-;@r?lQ3U&4EP1PPJNDqkvi7KId|}2m>I~p;<X}<O0MO1RMFvdWwJQ&d<kWD92aDv
z8^>J6-Xql$d2WcVx4^t;N3GKNe4&<x$Qd>Y8rhEY!`mg{l|_1u%aZ|0n-`|}bWF<X
zvo_AZnF5&tnF5&tnF5&tlcvD9eEiU8#)rJF#yJ|aDdwhZwrWKh(devhOPB{(9Zx>e
zKi<+dk7OuU5j(;Ekoosf<Rqge)w%29Y#z2?US(2m6X#VX_~7MLCK)xE)GCuIYLX<t
zMP&tuiAf2!&*wA`TC~?4K`|+vM#-7MY|rV?lOpOuPKKU5mV9H?AqWcVN|>c8U!x>=
zkG&8suoF|A9Wj|KQc^~W94V>RY!oH2)jZw`j+&f@>ZD;F>*{>zF2b?jh_7rmh<PIB
zk*azPv&&hp$twcZG$Js!x+Z-subu^i&Z}o_l|L)Q9HIABZCoj@KF=!xu5$J4<wyxM
z8j}w$OYui4Yc$0fi1TVR3o%cV&q<?sD4EsMc!ci;zB<X$p1zO{ljePX(t9VlcGmog
zsvi7a!?GST7v*xA?Qw0==v18T!G2)=bxV{&v-3Hhb<qxA)tjute5V?K&)|cbwHRAD
z0-gdzs-tjT*O;}Kysi;x#n-&!vKDhwVt`yki+P`%$a)NO8>~7=9yAue0c-<X=WH=R
zvK|B7zza{09<ru}6^6C~q$dyL`#NsxpV%7s{(yty=l$$hJ!fICIs}al4|DU@<t*vO
zIo4T@b(Vd1bF8!Ccwe;>GFo#}(VC0M5!R8}`a;KZJPKDjFUA-+AD+WIz=#Z|;MdT@
z4-d~-h*1i>rfGhv9?w}A_)8~R7yY0=7CgryiLGlb9vVzWbTXooqq^p(t~*gmxP3}=
z4B{f>sIElmw$+_@bud4Bv!c3Q1kriFq{x^~#&kfg(5Co~&wH4t46N?|Dk3)SKa77c
z@3RQADW;V@RrRYO$`SLLqe#t^qM^5i{cP%k6~^2ac_0IbR@2cMZq97A{fD$h9$GMe
z{64xEHCN*34_bCT>Ypr`^3hqm--|H{E;FXXV{s3AIwWsK_^j&rZdYy9VJmtHlCB^A
zrl;X@Vq0t~FX#9whg(eE9I362zVHbcvHJ~joMP2YHd0$v20vA4Hq^&FZnckbbv0?J
z+~Cr?Lc7c9$`NbQS_xKzS`?MzV)#ALNM{l1(rRDxkUxL4>2lA^XPE+-0+|At0+Xh|
zS#%<k0mn!EZwN_7lFUa$xh}52%0RavGFZ}8*sow)`pcd^*v-s|K8Ywau^idi1CKeE
zc9zZ}=$H2(vi%3JE{JYwaldS*A(QUD;{_gfqdVAejXiA8qKHn5F4fh?c5Sg8c(Co!
zz|3n4uP%?Hf@MH7F|2@f)qwKihwENnASK+RUTYB-V68{m)53h_Y#xwu6H{VC9=pu?
zqlpl6awonaVf^foWtyVJ$R*Yd<-ryK!#9c&ODmN+mCNblRAolnN-;asG{7$&>K(-G
zvKVO=>w?-^j4n#ZYymZ+-0VDMQFbh%blQ)_Xzn`|5v!=&KFqe0%bw~=KJbClk2Y}B
zv07gC@kqLn(GVW7sGj6mq=4Zv<F`V~y4FeB{AqPGA~SlAqRfmAO9MYs8!6tE;!!Wf
zo@YL&#BL#Vn%jYP7U9@h4UWV{h9*VN2=hlJUZ}-jBciu)0M>6W?yYiCbnnxRW68I-
zxDS?boyC-Ot#wN8ZG`9IFL=YR5?kiEt{>OSi8%XQ{F`cG&yV*0^Yne9<DskLi(_jK
ztaWU?S8A=}W{nsdd<9sdzR`ZVK<_oR4kIGg9{a2@vefO0bf*-jhO#`4rL!o{q@|qv
zW94i|Ov9~3T9{s*tc+)>o7oZ1lqQw*S)pW~#&POby(w`ArELV`O3F~Qs!}hVjrH)p
zTpZDxqUV;%K`AM*({WBxh4@BTvE)meUjCjqyeWS&1u_LP1u_M$jso{2gT}Ep8Pa5Y
zGY@Ce`LG;_@y3cDi^hMXV<N`3HOJuhMsZtKs3ZHJ{bXd`hd^uWEwd1PuY=yucjen?
zdDO+*y)9bbjVtCdt&=8rk}Xq5Yi2c!{-gZND!EK$XnNe}k+fuwJ3sm)G{wrU^6-3&
z=5G-cJ|-R}G7sbErmUkCjiqV+EbUBg5#O<8s=JaeX@q5*J<hhsyBJ-MxiQ0mz;jwc
zia?XtAqI?WKiam%o#rjNi|-9km7Q1Drbv6+mBzf9LGFsUp5Zj~advv2R!_&?hjYQS
z47&j*!$#(*;=Wd8iyQ0vs^&41#@14Qq_o>=Dck9^8EexFKdWwU)p8!`#I1d^^=)V7
zk7*nOMFzn|KG3otbZ~n@Z){%))5Jjrmj+%dRsOz=S=({xhLj(z_9pLfY~{amgXwSl
xa})P2Vx0Kb@BSVBBR(>(ev<~KbMC7D;CX3wQ(Adv^D6TZKQH$eMp*LX`+xVkEa3nE

literal 0
HcmV?d00001

diff --git a/src/features/AddMember/v1/Constant/Skill.constant.ts b/src/features/AddMember/v1/Constant/Skill.constant.ts
index abc5cd4..02634e2 100644
--- a/src/features/AddMember/v1/Constant/Skill.constant.ts
+++ b/src/features/AddMember/v1/Constant/Skill.constant.ts
@@ -1,4 +1,4 @@
-export let SkillColor = [
+export const SkillColor = [
   "#E0E7FF",
   "#FEE2E2",
   "#ECFCCB",
diff --git a/src/features/Auth/v1/Pages/LoginPage.tsx b/src/features/Auth/v1/Pages/LoginPage.tsx
index 423a8f1..67f39ef 100644
--- a/src/features/Auth/v1/Pages/LoginPage.tsx
+++ b/src/features/Auth/v1/Pages/LoginPage.tsx
@@ -26,7 +26,7 @@ const LoginPage = () => {
           password,
         });
 
-        let Role = response.data.role;
+        const Role = response.data.role;
         console.log("User role:", Role);
 
         if (Role === "organization") {
diff --git a/src/features/Billing/v1/components/table/TeamUsageTable.tsx b/src/features/Billing/v1/components/table/TeamUsageTable.tsx
index a371b5e..e5b8f5c 100644
--- a/src/features/Billing/v1/components/table/TeamUsageTable.tsx
+++ b/src/features/Billing/v1/components/table/TeamUsageTable.tsx
@@ -1,7 +1,42 @@
+import { useState } from "react";
 import { formatDistanceToNow } from "date-fns";
 import { useTeamUsage } from "../../hooks/useUsageAnalytics";
 import { formatCredits } from "../../utils/credits";
 
+function UserAvatar({ src, name }: { src?: string; name: string }) {
+  const [imageError, setImageError] = useState(false);
+
+  const initials = name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+  if (src && !imageError) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        className="w-8 h-8 rounded-full object-cover border"
+        style={{ borderColor: "var(--cd-border-subtle)" }}
+        onError={() => setImageError(true)}
+      />
+    );
+  }
+
+  return (
+    <div
+      className="w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs text-white select-none"
+      style={{
+        backgroundColor: "var(--cd-primary)",
+      }}
+    >
+      {initials}
+    </div>
+  );
+}
+
 export default function TeamUsageTable() {
   const { data: rows = [], isLoading } = useTeamUsage();
 
@@ -38,33 +73,7 @@ export default function TeamUsageTable() {
             >
               <td className="px-5 py-3 font-medium flex items-center gap-3" style={{ color: "var(--cd-text)" }}>
                 <div className="relative shrink-0 w-8 h-8">
-                  {row.memberAvatar ? (
-                    <img
-                      src={row.memberAvatar}
-                      alt={row.memberName}
-                      className="w-8 h-8 rounded-full object-cover border"
-                      style={{ borderColor: "var(--cd-border-subtle)" }}
-                      onError={(e) => {
-                        e.currentTarget.style.display = 'none';
-                        const sibling = e.currentTarget.nextElementSibling as HTMLElement;
-                        if (sibling) sibling.style.display = 'flex';
-                      }}
-                    />
-                  ) : null}
-                  <div
-                    className="w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs text-white select-none"
-                    style={{
-                      backgroundColor: "var(--cd-primary)",
-                      display: row.memberAvatar ? 'none' : 'flex'
-                    }}
-                  >
-                    {row.memberName
-                      .split(" ")
-                      .map((n) => n[0])
-                      .join("")
-                      .toUpperCase()
-                      .slice(0, 2)}
-                  </div>
+                  <UserAvatar src={row.memberAvatar} name={row.memberName} />
                 </div>
                 <div>
                   <div className="font-semibold text-sm" style={{ color: "var(--cd-text)" }}>
diff --git a/src/features/Billing/v1/hooks/useWallet.ts b/src/features/Billing/v1/hooks/useWallet.ts
index 28d197e..b2aea56 100644
--- a/src/features/Billing/v1/hooks/useWallet.ts
+++ b/src/features/Billing/v1/hooks/useWallet.ts
@@ -9,25 +9,7 @@ import type {
   CreditTransaction,
 } from "../Billing.types";
 import { BillingService } from "../services/billingService";
-import { validateMinAddFunds } from "../utils/credits";
-
-function applyTransactionFilters(
-  txs: CreditTransaction[],
-  filters: TransactionFilters,
-): CreditTransaction[] {
-  return txs.filter((t) => {
-    if (filters.type !== "all" && t.transactionType !== filters.type) return false;
-    if (filters.search) {
-      const q = filters.search.toLowerCase();
-      const match =
-        t.source.toLowerCase().includes(q) ||
-        t.transactionType.toLowerCase().includes(q) ||
-        (t.sourceId?.toLowerCase().includes(q) ?? false);
-      if (!match) return false;
-    }
-    return true;
-  });
-}
+import { validateMinAddFunds, applyTransactionFilters } from "../utils/credits";
 
 export function useWallet() {
   return useQuery({
diff --git a/src/features/Billing/v1/hooks/useWalletTransactions.ts b/src/features/Billing/v1/hooks/useWalletTransactions.ts
index 6501bb0..cd24841 100644
--- a/src/features/Billing/v1/hooks/useWalletTransactions.ts
+++ b/src/features/Billing/v1/hooks/useWalletTransactions.ts
@@ -1,24 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { walletStore } from "../mock/walletStore";
-import type { CreditTransaction, PaginatedTransactions, TransactionFilters } from "../Billing.types";
-
-function applyFilters(
-  transactions: CreditTransaction[],
-  filters: TransactionFilters,
-): CreditTransaction[] {
-  return transactions.filter((t) => {
-    if (filters.type !== "all" && t.transactionType !== filters.type) return false;
-    if (filters.search) {
-      const q = filters.search.toLowerCase();
-      const match =
-        t.source.toLowerCase().includes(q) ||
-        t.transactionType.toLowerCase().includes(q) ||
-        (t.sourceId?.toLowerCase().includes(q) ?? false);
-      if (!match) return false;
-    }
-    return true;
-  });
-}
+import type { PaginatedTransactions, TransactionFilters } from "../Billing.types";
+import { applyTransactionFilters } from "../utils/credits";
 
 export function useWalletTransactions(walletId: string | undefined, filters: TransactionFilters) {
   return useQuery<PaginatedTransactions>({
@@ -28,7 +11,7 @@ export function useWalletTransactions(walletId: string | undefined, filters: Tra
       if (!walletId) return { data: [], total: 0, totalPages: 0 };
 
       const all = walletStore.getTransactions(walletId);
-      const filtered = applyFilters(all, filters);
+      const filtered = applyTransactionFilters(all, filters);
       const pageSize = 10;
       const total = filtered.length;
       const totalPages = Math.ceil(total / pageSize) || 1;
diff --git a/src/features/Billing/v1/utils/credits.ts b/src/features/Billing/v1/utils/credits.ts
index 82bf17d..e74f04d 100644
--- a/src/features/Billing/v1/utils/credits.ts
+++ b/src/features/Billing/v1/utils/credits.ts
@@ -6,7 +6,7 @@ import {
   PLATFORM_FEE_RATE,
   RECHARGE_PACKS,
 } from "../constants/billing.constants";
-import type { AddFundsPreview } from "../Billing.types";
+import type { AddFundsPreview, CreditTransaction, TransactionFilters } from "../Billing.types";
 
 export function rupeesToBaseCredits(rupees: number): number {
   return Math.floor(rupees * CREDITS_PER_RUPEE);
@@ -69,3 +69,22 @@ export function isLowBalance(availableCredits: number, threshold: number): boole
 export function canAfford(availableCredits: number, cost: number): boolean {
   return availableCredits >= cost && cost > 0;
 }
+
+export function applyTransactionFilters(
+  txs: CreditTransaction[],
+  filters: TransactionFilters,
+): CreditTransaction[] {
+  return txs.filter((t) => {
+    if (filters.type !== "all" && t.transactionType !== filters.type) return false;
+    if (filters.search) {
+      const q = filters.search.toLowerCase();
+      const match =
+        t.source.toLowerCase().includes(q) ||
+        t.transactionType.toLowerCase().includes(q) ||
+        (t.sourceId?.toLowerCase().includes(q) ?? false);
+      if (!match) return false;
+    }
+    return true;
+  });
+}
+
diff --git a/src/features/Contact_And_Support/v1/constants/ContactAndSupport.constant.ts b/src/features/Contact_And_Support/v1/constants/ContactAndSupport.constant.ts
index b154b8a..e0edc36 100644
--- a/src/features/Contact_And_Support/v1/constants/ContactAndSupport.constant.ts
+++ b/src/features/Contact_And_Support/v1/constants/ContactAndSupport.constant.ts
@@ -1,4 +1,4 @@
-export let CONTACT_AND_SUPPORT_CONSTANT = [
+export const CONTACT_AND_SUPPORT_CONSTANT = [
   "Technical System Issue",
   "Authentication & Security Issue",
   "User & Account Issue",
diff --git a/src/features/Events/v1/Components/EventSetting.tsx b/src/features/Events/v1/Components/EventSetting.tsx
index 8552dec..adf5d5a 100644
--- a/src/features/Events/v1/Components/EventSetting.tsx
+++ b/src/features/Events/v1/Components/EventSetting.tsx
@@ -11,7 +11,7 @@ type EventSettingProps = {
 };
 
 const EventSetting = ({ onToggleChange, isToggled, title, description }: EventSettingProps) => {
-  let [toggled, setToggled] = React.useState(isToggled || false);
+  const [toggled, setToggled] = React.useState(isToggled || false);
   const [isAnimating, setIsAnimating] = React.useState(false);
 
   React.useEffect(() => {
diff --git a/src/features/Events/v1/Constants/Event.constant.ts b/src/features/Events/v1/Constants/Event.constant.ts
index 68967cb..0be9559 100644
--- a/src/features/Events/v1/Constants/Event.constant.ts
+++ b/src/features/Events/v1/Constants/Event.constant.ts
@@ -213,4 +213,4 @@ export const CATEGORY_ACCENT_RULES: Array<{ keywords: string[]; accent: Category
   },
 ];
 
-export let EventTabs = ["Upcoming Events", "Past Events", "Archived"];
+export const EventTabs = ["Upcoming Events", "Past Events", "Archived"];
diff --git a/src/features/Events/v1/Sections/Capacity_And_Registration.tsx b/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
index 915ee74..ceacf91 100644
--- a/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
+++ b/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
@@ -6,7 +6,7 @@ import DropDown from "@/Component/ui/DropDown";
 import { theme } from "@/theme";
 
 const Capacity_And_Registration = () => {
-  let [eventData, setEventData] = React.useState({
+  const [eventData, setEventData] = React.useState({
     MaxAttendees: "",
     TicketType: "Free",
     TicketPrice: "",
diff --git a/src/features/Events/v1/Sections/DateAndSchedule.tsx b/src/features/Events/v1/Sections/DateAndSchedule.tsx
index c1c26e4..6b8d035 100644
--- a/src/features/Events/v1/Sections/DateAndSchedule.tsx
+++ b/src/features/Events/v1/Sections/DateAndSchedule.tsx
@@ -7,7 +7,7 @@ import Date from "../../../../Component/ui/Date";
 import Time from "../../../../Component/ui/Time";
 
 const DateAndSchedule = () => {
-  let [eventData, setEventData] = useState({
+  const [eventData, setEventData] = useState({
     EventName: "",
     FullAddress: "",
     StartDate: "",
diff --git a/src/features/Webhooks/v1/mock/webhookStore.ts b/src/features/Webhooks/v1/mock/webhookStore.ts
index 87ab2dc..25d6662 100644
--- a/src/features/Webhooks/v1/mock/webhookStore.ts
+++ b/src/features/Webhooks/v1/mock/webhookStore.ts
@@ -25,7 +25,7 @@ let mockWebhooks: Webhook[] = [
   },
 ];
 
-let mockLogs: WebhookLog[] = [
+const mockLogs: WebhookLog[] = [
   {
     id: "log-1",
     webhookId: "wh-1",
diff --git a/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx b/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
index f383eec..46f0ef8 100644
--- a/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
+++ b/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
@@ -311,7 +311,7 @@ export default function WebhookDetailsPage() {
                       ,{"\n"}
                       {"  "}
                       <span style={{ color: "#7ee787" }}>"created"</span>:{" "}
-                      <span style={{ color: "#d2a8ff" }}>{Date.now()}</span>,{"\n"}
+                      <span style={{ color: "#d2a8ff" }}>1716120000000</span>,{"\n"}
                       {"  "}
                       <span style={{ color: "#7ee787" }}>"data"</span>:{" "}
                       <span style={{ color: "#79c0ff" }}>{"{"}</span>
diff --git a/src/features/template/LoginUserTemplate.tsx b/src/features/template/LoginUserTemplate.tsx
index 38e2479..5523d61 100644
--- a/src/features/template/LoginUserTemplate.tsx
+++ b/src/features/template/LoginUserTemplate.tsx
@@ -7,7 +7,7 @@ import { useMemo } from "react";
 
 const Organisation_Template = () => {
 
-  let user = useAuthStore((state) => state.user);
+  const user = useAuthStore((state) => state.user);
 
   useMemo(() => {
 
diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx
index f9cfc28..7834d5e 100644
--- a/src/theme/provider.tsx
+++ b/src/theme/provider.tsx
@@ -26,7 +26,9 @@ function resolveInitialMode(): ThemeMode {
   try {
     const stored = localStorage.getItem(STORAGE_KEY) as ThemeMode | null;
     if (stored === "light" || stored === "dark") return stored;
-  } catch {}
+  } catch {
+    // Fallback to media query if localStorage is inaccessible
+  }
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 
@@ -51,7 +53,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       setModeState(m);
       try {
         localStorage.setItem(STORAGE_KEY, m);
-      } catch {}
+      } catch {
+        // Ignore storage write errors (e.g. sandboxed environment or private browsing)
+      }
       applyMode(m);
     },
     [applyMode],
diff --git a/src/utils/productivity.ts b/src/utils/productivity.ts
index 62c495a..edc5b10 100644
--- a/src/utils/productivity.ts
+++ b/src/utils/productivity.ts
@@ -5,7 +5,7 @@ export const calculateProductivityScore = (data: {
 }) => {
   const { completionRate, streak, weeklyCompleted } = data;
 
-  let score =
+  const score =
     completionRate * 0.5 +
     Math.min(streak * 5, 100) * 0.2 +
     Math.min(weeklyCompleted * 10, 100) * 0.3;

From d5ff6f912b761c9948113b1dc740dcfbb5f0b477 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 23:29:38 +0530
Subject: [PATCH 11/13] fix: resolve PR review issues - re-enable ESLint rules,
 extract shared filter utility, refactor avatar DOM anti-pattern, fix render
 purity

---
 .../components/layout/AutoRechargePanel.tsx   |  42 +-
 .../layout/PayoutAccountDetails.tsx           |  54 ++-
 .../v1/components/layout/QuickRecharge.tsx    | 133 +++---
 .../v1/components/layout/WalletHeader.tsx     | 120 +++---
 .../v1/components/layout/WalletStatsGrid.tsx  |  29 +-
 .../Billing/v1/pages/AddFundsPage.tsx         | 380 +++++++++++-------
 .../Billing/v1/pages/BillingHubPage.tsx       | 118 +++++-
 .../Billing/v1/pages/CommunityWalletPage.tsx  |  37 +-
 .../Billing/v1/pages/PaymentsPage.tsx         |  71 ++--
 9 files changed, 623 insertions(+), 361 deletions(-)

diff --git a/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx b/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
index 87dff1b..3cc3585 100644
--- a/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
+++ b/src/features/Billing/v1/components/layout/AutoRechargePanel.tsx
@@ -30,28 +30,42 @@ export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
       style={{
         backgroundColor: "var(--cd-surface)",
         borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 14px 34px var(--cd-shadow)",
       }}
     >
-      <div className="flex items-center gap-2 mb-4">
-        <RefreshCw size={18} style={{ color: "var(--cd-primary)" }} />
-        <h3 className="font-semibold" style={{ color: "var(--cd-text)" }}>
-          Auto Recharge
-        </h3>
+      <div className="flex items-start justify-between gap-4 mb-5">
+        <div>
+          <div className="flex items-center gap-2">
+            <RefreshCw size={18} style={{ color: "var(--cd-primary)" }} />
+            <h3 className="font-black" style={{ color: "var(--cd-text)" }}>
+              Auto Recharge
+            </h3>
+          </div>
+          <p className="mt-1 text-sm" style={{ color: "var(--cd-text-muted)" }}>
+            Keep premium workflows running when credits run low.
+          </p>
+        </div>
       </div>
 
-      <label className="flex items-center gap-3 mb-4 cursor-pointer">
+      <label
+        className="flex items-center justify-between gap-3 rounded-xl border p-4 mb-4 cursor-pointer"
+        style={{
+          backgroundColor: enabled ? "var(--cd-primary-subtle)" : "var(--cd-bg)",
+          borderColor: enabled ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+        }}
+      >
+        <span className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+          Automatically recharge when balance drops below threshold
+        </span>
         <input
           type="checkbox"
           checked={enabled}
           onChange={(e) => setEnabled(e.target.checked)}
           className="w-4 h-4 rounded accent-[var(--cd-primary)]"
         />
-        <span className="text-sm" style={{ color: "var(--cd-text)" }}>
-          Automatically recharge when balance drops below threshold
-        </span>
       </label>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">
         <div>
           <label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
             Threshold (credits)
@@ -62,13 +76,13 @@ export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
             value={threshold}
             onChange={(e) => setThreshold(Number(e.target.value))}
             disabled={!enabled}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent"
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
           />
         </div>
         <div>
           <label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
-            Recharge amount ({"₹"}, min {MIN_ADD_RUPEES})
+            Recharge amount (Rs., min {MIN_ADD_RUPEES})
           </label>
           <input
             type="number"
@@ -76,7 +90,7 @@ export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
             value={amount}
             onChange={(e) => setAmount(Number(e.target.value))}
             disabled={!enabled}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent"
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
           />
         </div>
@@ -85,7 +99,7 @@ export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
       <button
         onClick={() => void handleSave()}
         disabled={autoRecharge.isPending}
-        className="cd-btn cd-btn-primary px-4 py-2 rounded-lg text-sm disabled:opacity-50"
+        className="cd-btn cd-btn-primary px-4 py-2.5 rounded-xl text-sm font-bold disabled:opacity-50"
       >
         {autoRecharge.isPending ? "Saving..." : "Save Settings"}
       </button>
diff --git a/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx b/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
index cb8aa48..d08e6a4 100644
--- a/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
+++ b/src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { CheckCircle2, Save } from "lucide-react";
+import { CheckCircle2, Landmark, Save } from "lucide-react";
 import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
 
 export default function PayoutAccountDetails() {
   const { addToast } = useToast();
   const [loading, setLoading] = useState(false);
   const [saved, setSaved] = useState(false);
-  
+
   const [form, setForm] = useState({
     accountHolder: "",
     bankName: "",
@@ -29,51 +29,65 @@ export default function PayoutAccountDetails() {
   };
 
   return (
-    <div className="rounded-2xl border p-6" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
-      <h2 className="text-lg font-bold mb-1" style={{ color: "var(--cd-text)" }}>Payout Account Details</h2>
-      <p className="text-sm mb-6" style={{ color: "var(--cd-text-muted)" }}>Receive funds and revenue securely to your bank account.</p>
+    <div
+      className="rounded-2xl border p-6"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 14px 34px var(--cd-shadow)",
+      }}
+    >
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-black" style={{ color: "var(--cd-text)" }}>Payout Account Details</h2>
+          <p className="mt-1 text-sm" style={{ color: "var(--cd-text-muted)" }}>Receive funds and revenue securely to your bank account.</p>
+        </div>
+        <div className="rounded-xl p-3" style={{ backgroundColor: "var(--cd-success-subtle)", color: "var(--cd-success)" }}>
+          <Landmark size={20} />
+        </div>
+      </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
         <div>
           <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Holder Name</label>
-          <input 
+          <input
             type="text"
             value={form.accountHolder}
-            onChange={(e) => setForm({...form, accountHolder: e.target.value})}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            onChange={(e) => setForm({ ...form, accountHolder: e.target.value })}
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
             placeholder="John Doe"
           />
         </div>
         <div>
           <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Bank Name</label>
-          <input 
+          <input
             type="text"
             value={form.bankName}
-            onChange={(e) => setForm({...form, bankName: e.target.value})}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            onChange={(e) => setForm({ ...form, bankName: e.target.value })}
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
             placeholder="HDFC Bank"
           />
         </div>
         <div>
           <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Number</label>
-          <input 
+          <input
             type="password"
             value={form.accountNumber}
-            onChange={(e) => setForm({...form, accountNumber: e.target.value})}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            onChange={(e) => setForm({ ...form, accountNumber: e.target.value })}
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
-            placeholder="••••••••4567"
+            placeholder="********4567"
           />
         </div>
         <div>
           <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>IFSC / Swift Code</label>
-          <input 
+          <input
             type="text"
             value={form.ifsc}
-            onChange={(e) => setForm({...form, ifsc: e.target.value.toUpperCase()})}
-            className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
+            onChange={(e) => setForm({ ...form, ifsc: e.target.value.toUpperCase() })}
+            className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
             style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
             placeholder="HDFC0001234"
           />
@@ -84,9 +98,9 @@ export default function PayoutAccountDetails() {
         <button
           onClick={handleSave}
           disabled={loading || saved}
-          className="cd-btn cd-btn-secondary px-6 py-2 rounded-xl text-sm font-semibold flex items-center gap-2"
+          className="cd-btn cd-btn-secondary px-6 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2"
         >
-          {loading ? <div className="animate-spin h-4 w-4 border-2 border-[var(--cd-text)] border-t-transparent rounded-full" /> : 
+          {loading ? <div className="animate-spin h-4 w-4 border-2 border-[var(--cd-text)] border-t-transparent rounded-full" /> :
            saved ? <CheckCircle2 size={16} className="text-green-500" /> : <Save size={16} />}
           {saved ? "Saved" : "Save Details"}
         </button>
diff --git a/src/features/Billing/v1/components/layout/QuickRecharge.tsx b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
index 37ed27e..b9d6d75 100644
--- a/src/features/Billing/v1/components/layout/QuickRecharge.tsx
+++ b/src/features/Billing/v1/components/layout/QuickRecharge.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Loader2 } from "lucide-react";
+import { CreditCard, Loader2, Zap } from "lucide-react";
 import { formatRupees, buildAddFundsPreview, formatCredits } from "../../utils/credits";
 import { useAddFunds } from "../../hooks/useWallet";
 import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
@@ -9,14 +9,14 @@ export default function QuickRecharge() {
   const addFunds = useAddFunds();
   const { addToast } = useToast();
   const [amountStr, setAmountStr] = useState("500");
-  
+
   const handleRecharge = async () => {
     const amt = Number(amountStr) || 0;
     if (amt < MIN_ADD_RUPEES) {
-      addToast("error", "Invalid Amount", `Minimum recharge is ₹${MIN_ADD_RUPEES}`);
+      addToast("error", "Invalid Amount", `Minimum recharge is Rs. ${MIN_ADD_RUPEES}`);
       return;
     }
-    
+
     try {
       await addFunds.mutateAsync({
         amountRupees: amt,
@@ -24,7 +24,7 @@ export default function QuickRecharge() {
         idempotencyKey: `quick-${crypto.randomUUID()}`
       });
       addToast("success", "Recharge Successful", `Added ${formatCredits(amt * 10)} credits.`);
-    } catch (e) {
+    } catch {
       addToast("error", "Recharge Failed", "Please try again later.");
     }
   };
@@ -32,53 +32,84 @@ export default function QuickRecharge() {
   const preview = buildAddFundsPreview(Number(amountStr) || 0);
 
   return (
-     <div className="rounded-2xl border p-6" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
-       <h2 className="text-lg font-bold mb-4" style={{ color: "var(--cd-text)" }}>Quick Recharge</h2>
-       
-       <div className="grid grid-cols-3 gap-2 mb-4">
-         {[150, 500, 1000].map(amt => (
-           <button
-             key={amt}
-             onClick={() => setAmountStr(amt.toString())}
-             className={`py-2 rounded-lg text-sm font-semibold border transition-colors ${amountStr === amt.toString() ? 'border-[var(--cd-primary)] bg-[var(--cd-primary-subtle)]' : 'border-[var(--cd-border-subtle)] hover:bg-[var(--cd-hover)]'}`}
-             style={{ 
-               color: amountStr === amt.toString() ? "var(--cd-primary-text)" : "var(--cd-text)" 
-             }}
-           >
-             ₹{amt} {amt === 500 && <span className="block text-[10px] opacity-70">Popular</span>}
-           </button>
-         ))}
-       </div>
-       
-       <div className="mb-4">
-         <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Custom Amount (₹)</label>
-         <input 
-           type="text" 
-           inputMode="numeric"
-           pattern="[0-9]*"
-           value={amountStr}
-           onChange={(e) => {
-              const digitsOnly = e.target.value.replace(/\D/g, "");
-              const val = digitsOnly.replace(/^0+(?=\d)/, "");
-              setAmountStr(val);
-           }}
-           className="w-full rounded-lg border px-3 py-2 text-sm bg-transparent outline-none focus:ring-1 focus:ring-[var(--cd-primary)]"
-           style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
-         />
-       </div>
+    <div
+      className="rounded-2xl border p-6"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 14px 34px var(--cd-shadow)",
+      }}
+    >
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-black" style={{ color: "var(--cd-text)" }}>Quick Recharge</h2>
+          <p className="mt-1 text-sm" style={{ color: "var(--cd-text-muted)" }}>Top up instantly with UPI.</p>
+        </div>
+        <div className="rounded-xl p-3" style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary)" }}>
+          <Zap size={20} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2 mb-5">
+        {[150, 500, 1000].map((amt) => {
+          const selected = amountStr === amt.toString();
+          return (
+            <button
+              key={amt}
+              onClick={() => setAmountStr(amt.toString())}
+              className="min-h-16 rounded-xl border px-2 py-2 text-sm font-bold transition-all hover:-translate-y-0.5"
+              style={{
+                backgroundColor: selected ? "var(--cd-primary-subtle)" : "var(--cd-bg)",
+                borderColor: selected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                color: selected ? "var(--cd-primary-text)" : "var(--cd-text)",
+              }}
+            >
+              Rs. {amt}
+              {amt === 500 && <span className="block text-[10px] opacity-70">Popular</span>}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mb-5">
+        <label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Custom Amount (Rs.)</label>
+        <input
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={amountStr}
+          onChange={(e) => {
+            const digitsOnly = e.target.value.replace(/\D/g, "");
+            const val = digitsOnly.replace(/^0+(?=\d)/, "");
+            setAmountStr(val);
+          }}
+          className="w-full rounded-xl border px-3 py-2.5 text-sm font-semibold bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
+          style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+        />
+      </div>
 
-       <div className="flex justify-between items-center text-sm mb-4">
-         <span style={{ color: "var(--cd-text-muted)" }}>You get:</span>
-         <span className="font-bold" style={{ color: "var(--cd-primary)" }}>{formatCredits(preview.totalCredits)} cr</span>
-       </div>
+      <div
+        className="mb-5 rounded-xl border p-4"
+        style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
+      >
+        <div className="flex justify-between items-center text-sm">
+          <span style={{ color: "var(--cd-text-muted)" }}>You get</span>
+          <span className="font-black" style={{ color: "var(--cd-primary)" }}>{formatCredits(preview.totalCredits)} cr</span>
+        </div>
+        <div className="mt-2 flex justify-between items-center text-xs">
+          <span style={{ color: "var(--cd-text-muted)" }}>Payable</span>
+          <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{formatRupees(preview.totalPayableRupees)}</span>
+        </div>
+      </div>
 
-       <button
-         onClick={() => void handleRecharge()}
-         disabled={addFunds.isPending}
-         className="cd-btn cd-btn-primary w-full rounded-xl py-2.5 font-semibold flex justify-center items-center gap-2"
-       >
-         {addFunds.isPending ? <Loader2 size={16} className="animate-spin" /> : `Pay ${formatRupees(preview.totalPayableRupees)}`}
-       </button>
-     </div>
+      <button
+        onClick={() => void handleRecharge()}
+        disabled={addFunds.isPending}
+        className="cd-btn cd-btn-primary w-full rounded-xl py-2.5 font-bold flex justify-center items-center gap-2"
+      >
+        {addFunds.isPending ? <Loader2 size={16} className="animate-spin" /> : <CreditCard size={16} />}
+        {addFunds.isPending ? "Processing..." : `Pay ${formatRupees(preview.totalPayableRupees)}`}
+      </button>
+    </div>
   );
 }
diff --git a/src/features/Billing/v1/components/layout/WalletHeader.tsx b/src/features/Billing/v1/components/layout/WalletHeader.tsx
index cd2b314..1225e85 100644
--- a/src/features/Billing/v1/components/layout/WalletHeader.tsx
+++ b/src/features/Billing/v1/components/layout/WalletHeader.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { Plus, Wallet, ArrowLeft } from "lucide-react";
+import { Plus, Wallet, ArrowLeft, BarChart3, ReceiptText, Users } from "lucide-react";
 import type { Wallet as WalletType } from "../../Billing.types";
 import CreditBadge from "../common/CreditBadge";
 import { formatCredits } from "../../utils/credits";
@@ -11,9 +11,9 @@ interface Props {
 }
 
 const TABS = [
-  { key: "overview", label: "Overview" },
-  { key: "transactions", label: "Transactions" },
-  { key: "team", label: "Team Usage" },
+  { key: "overview", label: "Overview", icon: BarChart3 },
+  { key: "transactions", label: "Transactions", icon: ReceiptText },
+  { key: "team", label: "Team Usage", icon: Users },
 ];
 
 export default function WalletHeader({ wallet, activeTab, onTabChange }: Props) {
@@ -21,58 +21,65 @@ export default function WalletHeader({ wallet, activeTab, onTabChange }: Props)
 
   return (
     <div
-      className="border-b flex flex-col transition-all duration-300"
+      className="border-b transition-all duration-300"
       style={{
-        backgroundColor: "var(--cd-surface)",
+        background:
+          "linear-gradient(135deg, color-mix(in srgb, var(--cd-surface) 96%, transparent), color-mix(in srgb, var(--cd-primary-subtle) 42%, var(--cd-surface)))",
         borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 14px 34px var(--cd-shadow)",
       }}
     >
-      <div className="mx-auto flex w-full max-w-[1440px] items-center justify-between gap-4 px-5 py-5 sm:px-8 lg:px-10">
-        <div className="flex min-w-0 items-center gap-3 relative">
-          <button
-            onClick={() => navigate("/org/billing")}
-            className="absolute right-[100%] mr-1 sm:mr-2 p-1 rounded-lg hover:bg-[var(--cd-hover)] transition-colors text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] hidden sm:block"
-            aria-label="Go back to billing hub"
-          >
-            <ArrowLeft size={18} />
-          </button>
-          <WalletIconBox />
-          <WalletTitle wallet={wallet} />
-        </div>
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-5 px-5 py-5 sm:px-8 lg:px-10">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex min-w-0 items-center gap-3">
+            <button
+              onClick={() => navigate("/org/billing")}
+              className="hidden rounded-lg p-2 transition-colors hover:bg-[var(--cd-hover)] sm:block"
+              aria-label="Go back to billing hub"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              <ArrowLeft size={18} />
+            </button>
+            <WalletIconBox />
+            <WalletTitle wallet={wallet} />
+          </div>
 
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => navigate("/org/billing/usage")}
-            className="cd-btn cd-btn-secondary h-9 rounded-lg px-3.5 text-sm hidden sm:inline-flex"
-          >
-            Usage
-          </button>
-          <button
-            onClick={() => navigate("/org/billing/add-funds")}
-            className="cd-btn cd-btn-primary h-9 rounded-lg px-3.5 text-sm shadow-none transition-all sm:px-4"
-          >
-            <Plus size={15} strokeWidth={2.5} />
-            <span className="hidden font-medium sm:inline">Add Funds</span>
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => navigate("/org/billing/usage")}
+              className="cd-btn cd-btn-secondary h-10 rounded-lg px-4 text-sm hidden sm:inline-flex"
+            >
+              Usage
+            </button>
+            <button
+              onClick={() => navigate("/org/billing/add-funds")}
+              className="cd-btn cd-btn-primary h-10 rounded-lg px-4 text-sm font-semibold shadow-none transition-all hover:-translate-y-0.5"
+            >
+              <Plus size={15} strokeWidth={2.5} />
+              <span>Add Funds</span>
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="border-t" style={{ borderColor: "var(--cd-border-subtle)" }}>
-        <div className="mx-auto flex w-full max-w-[1440px] items-center overflow-x-auto px-5 sm:px-8 lg:px-10">
+        <div
+          className="flex w-full items-center gap-1 overflow-x-auto rounded-xl border p-1 sm:w-fit"
+          style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
+        >
           {TABS.map((tab) => {
             const isActive = activeTab === tab.key;
             return (
               <button
                 key={tab.key}
                 onClick={() => onTabChange(tab.key)}
-                className="group relative flex items-center gap-2 px-3.5 py-3 text-sm font-medium transition-all duration-200 whitespace-nowrap"
-                style={{ color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)" }}
+                className="flex h-10 items-center gap-2 rounded-lg px-3.5 text-sm font-semibold transition-all whitespace-nowrap sm:px-4"
+                style={{
+                  backgroundColor: isActive ? "var(--cd-surface)" : "transparent",
+                  boxShadow: isActive ? "0 8px 18px var(--cd-shadow)" : "none",
+                  color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)",
+                }}
               >
+                <tab.icon size={15} style={{ color: isActive ? "var(--cd-primary)" : "currentColor" }} />
                 {tab.label}
-                <div
-                  className={`absolute bottom-0 left-0 right-0 h-0.5 rounded-t-full transition-all duration-300 ${isActive ? "opacity-100 scale-x-100" : "opacity-0 scale-x-0"}`}
-                  style={{ backgroundColor: "var(--cd-primary)" }}
-                />
               </button>
             );
           })}
@@ -85,13 +92,14 @@ export default function WalletHeader({ wallet, activeTab, onTabChange }: Props)
 function WalletIconBox() {
   return (
     <div
-      className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+      className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
       style={{
-        backgroundColor: "var(--cd-primary-subtle)",
-        color: "var(--cd-primary-text)",
+        backgroundColor: "var(--cd-primary)",
+        color: "#ffffff",
+        boxShadow: "0 12px 24px color-mix(in srgb, var(--cd-primary) 28%, transparent)",
       }}
     >
-      <Wallet size={18} strokeWidth={2.25} />
+      <Wallet size={20} strokeWidth={2.25} />
     </div>
   );
 }
@@ -100,21 +108,21 @@ function WalletTitle({ wallet }: { wallet: WalletType | undefined }) {
   return (
     <div className="min-w-0">
       <h1
-        className="truncate text-xl font-semibold leading-tight tracking-tight"
+        className="truncate text-xl font-black leading-tight tracking-tight sm:text-2xl"
         style={{ color: "var(--cd-text)" }}
       >
         Community Wallet
       </h1>
-        <div className="mt-1 truncate text-sm flex items-center gap-1 flex-wrap" style={{ color: "var(--cd-text-2)" }}>
-          {wallet ? (
-            <>
-              <CreditBadge credits={wallet.availableCredits} size="sm" />
-              <span>available · {formatCredits(wallet.reservedCredits)} reserved</span>
-            </>
-          ) : (
-            "Manage credits, billing, and usage"
-          )}
-        </div>
+      <div className="mt-1 truncate text-sm flex items-center gap-1 flex-wrap" style={{ color: "var(--cd-text-2)" }}>
+        {wallet ? (
+          <>
+            <CreditBadge credits={wallet.availableCredits} size="sm" />
+            <span>available - {formatCredits(wallet.reservedCredits)} reserved</span>
+          </>
+        ) : (
+          "Manage credits, billing, and usage"
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx b/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
index 1f7e95a..ab9cd52 100644
--- a/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
+++ b/src/features/Billing/v1/components/layout/WalletStatsGrid.tsx
@@ -39,24 +39,26 @@ export default function WalletStatsGrid({ wallet, burnRatePerDay = 52 }: Props)
   ];
 
   return (
-    <div
-      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 rounded-2xl border divide-y sm:divide-y-0 sm:divide-x overflow-hidden shadow-sm transition-shadow hover:shadow-md"
-      style={{
-        backgroundColor: "var(--cd-surface)",
-        borderColor: "var(--cd-border)",
-      }}
-    >
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
       {stats.map((stat) => (
         <div
           key={stat.label}
           data-testid={testIdFor(stat.label)}
-          className="p-6 flex flex-col gap-1 transition-colors hover:bg-[var(--cd-hover)]"
+          className="group rounded-2xl border p-5 transition-all hover:-translate-y-1 hover:shadow-lg"
+          style={{
+            backgroundColor: "var(--cd-surface)",
+            borderColor: "var(--cd-border-subtle)",
+          }}
         >
-          <span className="text-[10px] font-black uppercase tracking-[0.15em] text-[var(--cd-text-muted)] opacity-60">
-            {stat.label}
-          </span>
-          <div className="flex items-center gap-2">
-            <stat.icon size={16} style={{ color: stat.color }} />
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <span className="text-[10px] font-black uppercase tracking-[0.15em] text-[var(--cd-text-muted)] opacity-70">
+              {stat.label}
+            </span>
+            <span className="flex h-9 w-9 items-center justify-center rounded-xl" style={{ backgroundColor: "var(--cd-bg)" }}>
+              <stat.icon size={16} style={{ color: stat.color }} />
+            </span>
+          </div>
+          <div className="flex items-end gap-2">
             <span
               data-testid={`${testIdFor(stat.label)}-value`}
               className="text-2xl font-black tracking-tight"
@@ -64,6 +66,7 @@ export default function WalletStatsGrid({ wallet, burnRatePerDay = 52 }: Props)
             >
               {stat.val}
             </span>
+            <span className="mb-1 text-xs font-semibold" style={{ color: "var(--cd-text-muted)" }}>credits</span>
           </div>
         </div>
       ))}
diff --git a/src/features/Billing/v1/pages/AddFundsPage.tsx b/src/features/Billing/v1/pages/AddFundsPage.tsx
index 1d2138e..5d34dd3 100644
--- a/src/features/Billing/v1/pages/AddFundsPage.tsx
+++ b/src/features/Billing/v1/pages/AddFundsPage.tsx
@@ -1,6 +1,17 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ArrowLeft, CheckCircle2, Loader2, Wallet } from "lucide-react";
+import {
+  ArrowLeft,
+  BadgeCheck,
+  Banknote,
+  CheckCircle2,
+  CreditCard,
+  Landmark,
+  Loader2,
+  ShieldCheck,
+  Smartphone,
+  Wallet,
+} from "lucide-react";
 import { RECHARGE_PACKS, MIN_ADD_RUPEES } from "../constants/billing.constants";
 import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds } from "../utils/credits";
 import { useAddFunds } from "../hooks/useWallet";
@@ -8,11 +19,11 @@ import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/
 import type { PaymentState } from "../Billing.types";
 
 const PAYMENT_METHODS = [
-  { id: "upi", label: "UPI" },
-  { id: "debit", label: "Debit Card" },
-  { id: "credit", label: "Credit Card" },
-  { id: "netbanking", label: "Net Banking" },
-  { id: "wallet", label: "Wallets" },
+  { id: "upi", label: "UPI", icon: Smartphone },
+  { id: "debit", label: "Debit Card", icon: CreditCard },
+  { id: "credit", label: "Credit Card", icon: CreditCard },
+  { id: "netbanking", label: "Net Banking", icon: Landmark },
+  { id: "wallet", label: "Wallets", icon: Wallet },
 ] as const;
 
 export default function AddFundsPage() {
@@ -51,166 +62,201 @@ export default function AddFundsPage() {
   };
 
   return (
-    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="w-full min-h-screen flex flex-col"
+      style={{
+        background:
+          "radial-gradient(circle at top right, var(--cd-accent-subtle), transparent 32rem), var(--cd-bg)",
+      }}
+    >
       <div
         className="border-b px-5 py-5 sm:px-8 lg:px-10"
-        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+        style={{
+          backgroundColor: "color-mix(in srgb, var(--cd-surface) 94%, transparent)",
+          borderColor: "var(--cd-border-subtle)",
+          boxShadow: "0 10px 28px var(--cd-shadow)",
+        }}
       >
         <div className="mx-auto max-w-[1440px] flex items-center gap-4">
           <button
             onClick={() => navigate("/org/billing/wallet")}
             className="p-2 rounded-lg hover:bg-[var(--cd-hover)]"
+            aria-label="Back to wallet"
           >
             <ArrowLeft size={18} style={{ color: "var(--cd-text-muted)" }} />
           </button>
-          <div className="flex items-center gap-3">
-            <Wallet size={20} style={{ color: "var(--cd-primary)" }} />
-            <h1 className="text-xl font-semibold" style={{ color: "var(--cd-text)" }}>
+          <div className="flex h-11 w-11 items-center justify-center rounded-xl" style={{ backgroundColor: "var(--cd-primary)", color: "#fff" }}>
+            <Wallet size={20} />
+          </div>
+          <div>
+            <h1 className="text-2xl font-black tracking-tight" style={{ color: "var(--cd-text)" }}>
               Add Funds
             </h1>
+            <p className="text-sm mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+              Choose a pack, confirm credits, and complete payment.
+            </p>
           </div>
         </div>
       </div>
 
-      <main className="mx-auto w-full max-w-[1440px] px-4 py-8 sm:px-8 lg:px-10 flex flex-col gap-8">
+      <main className="mx-auto w-full max-w-[1440px] px-4 py-8 sm:px-8 lg:px-10">
         {paymentState === "success" ? (
           <SuccessState
             credits={preview.totalCredits}
             onDone={() => navigate("/org/billing/wallet")}
           />
         ) : (
-          <>
-            <section>
-              <h2 className="text-sm font-semibold mb-3" style={{ color: "var(--cd-text-muted)" }}>
-                Recharge packs
-              </h2>
-              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-                {RECHARGE_PACKS.map((pack) => (
-                  <button
-                    key={pack.id}
-                    onClick={() => setAmountStr(pack.amountRupees.toString())}
-                    className="rounded-xl border p-4 text-left transition-all hover:scale-[1.02]"
-                    style={{
-                      backgroundColor:
-                        amount === pack.amountRupees
-                          ? "var(--cd-primary-subtle)"
-                          : "var(--cd-surface)",
-                      borderColor:
-                        amount === pack.amountRupees
-                          ? "var(--cd-primary)"
-                          : "var(--cd-border-subtle)",
-                    }}
-                  >
-                    <p className="text-xs font-medium" style={{ color: "var(--cd-text-muted)" }}>
-                      {pack.label}
-                    </p>
-                    <p className="text-lg font-bold mt-1" style={{ color: "var(--cd-text)" }}>
-                      {formatRupees(pack.amountRupees)}
-                    </p>
-                    <p className="text-sm mt-1" style={{ color: "var(--cd-primary)" }}>
-                      {formatCredits(pack.baseCredits + pack.bonusCredits)} cr
-                      {pack.bonusCredits > 0 && (
-                        <span className="text-xs opacity-70"> (+{pack.bonusCredits} bonus)</span>
-                      )}
-                    </p>
-                  </button>
-                ))}
-              </div>
-            </section>
-
-            <section>
-              <label className="text-sm font-medium mb-2 block" style={{ color: "var(--cd-text)" }}>
-                Custom amount ({"₹"}, min {MIN_ADD_RUPEES})
-              </label>
-              <input
-                type="text"
-                inputMode="numeric"
-                pattern="[0-9]*"
-                min={MIN_ADD_RUPEES}
-                step={50}
-                value={amountStr}
-                onChange={(e) => {
-                  // Only allow digits
-                  const digitsOnly = e.target.value.replace(/\D/g, "");
-                  // Strip leading zeroes unless it's just "0"
-                  const val = digitsOnly.replace(/^0+(?=\d)/, "");
-                  setAmountStr(val);
-                }}
-                className="w-full rounded-xl border px-4 py-3 text-lg font-semibold bg-transparent"
-                style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
-              />
-              {!validation.valid && (
-                <p className="text-xs mt-1" style={{ color: "var(--cd-danger)" }}>
-                  {validation.error}
-                </p>
-              )}
-            </section>
+          <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_420px] lg:items-start">
+            <div className="flex flex-col gap-6">
+              <section>
+                <SectionLabel title="Recharge packs" description="Pick a preset or enter a custom amount." />
+                <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3">
+                  {RECHARGE_PACKS.map((pack) => {
+                    const isSelected = amount === pack.amountRupees;
+                    return (
+                      <button
+                        key={pack.id}
+                        onClick={() => setAmountStr(pack.amountRupees.toString())}
+                        className="group min-h-[142px] rounded-2xl border p-4 text-left transition-all hover:-translate-y-1 hover:shadow-lg"
+                        style={{
+                          backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+                          borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                          boxShadow: isSelected ? "0 14px 28px var(--cd-shadow)" : "none",
+                        }}
+                      >
+                        <div className="flex items-start justify-between gap-2">
+                          <p className="text-xs font-bold uppercase tracking-wide" style={{ color: "var(--cd-text-muted)" }}>
+                            {pack.label}
+                          </p>
+                          {isSelected ? <BadgeCheck size={18} style={{ color: "var(--cd-primary)" }} /> : null}
+                        </div>
+                        <p className="text-2xl font-black mt-4" style={{ color: "var(--cd-text)" }}>
+                          {formatRupees(pack.amountRupees)}
+                        </p>
+                        <p className="text-sm font-semibold mt-2" style={{ color: "var(--cd-primary)" }}>
+                          {formatCredits(pack.baseCredits + pack.bonusCredits)} cr
+                        </p>
+                        {pack.bonusCredits > 0 && (
+                          <span
+                            className="mt-3 inline-flex rounded-full px-2.5 py-1 text-[11px] font-bold"
+                            style={{ backgroundColor: "var(--cd-success-subtle)", color: "var(--cd-success)" }}
+                          >
+                            +{formatCredits(pack.bonusCredits)} bonus
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              </section>
 
-            <PreviewCard preview={preview} />
-
-            <section>
-              <h2 className="text-sm font-semibold mb-3" style={{ color: "var(--cd-text-muted)" }}>
-                Payment method
-              </h2>
-              <div className="flex flex-wrap gap-2">
-                {PAYMENT_METHODS.map((m) => (
-                  <button
-                    key={m.id}
-                    onClick={() => setPaymentMethod(m.id)}
-                    className="rounded-lg px-4 py-2 text-sm font-medium border transition-colors"
-                    style={{
-                      backgroundColor:
-                        paymentMethod === m.id ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
-                      borderColor:
-                        paymentMethod === m.id ? "var(--cd-primary)" : "var(--cd-border-subtle)",
-                      color: paymentMethod === m.id ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+              <section
+                className="rounded-2xl border p-5"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+              >
+                <label className="text-sm font-bold mb-2 block" style={{ color: "var(--cd-text)" }}>
+                  Custom amount (Rs., min {MIN_ADD_RUPEES})
+                </label>
+                <div className="relative">
+                  <Banknote
+                    size={18}
+                    className="absolute left-4 top-1/2 -translate-y-1/2"
+                    style={{ color: "var(--cd-text-muted)" }}
+                  />
+                  <input
+                    type="number"
+                    inputMode="numeric"
+                    pattern="[0-9]*"
+                    min={MIN_ADD_RUPEES}
+                    step={50}
+                    value={amountStr}
+                    onChange={(e) => {
+                      const digitsOnly = e.target.value.replace(/\D/g, "");
+                      const val = digitsOnly.replace(/^0+(?=\d)/, "");
+                      setAmountStr(val);
                     }}
-                  >
-                    {m.label}
-                  </button>
-                ))}
-              </div>
-            </section>
+                    className="w-full rounded-xl border py-3 pl-11 pr-4 text-lg font-bold bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
+                    style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                  />
+                </div>
+                {!validation.valid && (
+                  <p className="text-xs mt-2" style={{ color: "var(--cd-danger)" }}>
+                    {validation.error}
+                  </p>
+                )}
+              </section>
 
-            {/* Test Simulation Controls */}
-            <div
-              className="border border-dashed p-4 rounded-xl flex items-center justify-between mt-2"
-              style={{
-                backgroundColor: "rgba(239, 68, 68, 0.05)",
-                borderColor: "rgba(239, 68, 68, 0.3)",
-              }}
-            >
-              <div>
-                <p className="text-xs font-semibold" style={{ color: "var(--cd-danger)" }}>
-                  Simulation Mode
-                </p>
-                <p className="text-xs mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
-                  Force transaction failure for E2E testing
-                </p>
+              <section>
+                <SectionLabel title="Payment method" description="Select how you want to complete this recharge." />
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5">
+                  {PAYMENT_METHODS.map((m) => {
+                    const isSelected = paymentMethod === m.id;
+                    return (
+                      <button
+                        key={m.id}
+                        onClick={() => setPaymentMethod(m.id)}
+                        className="rounded-xl border p-4 text-left transition-all hover:-translate-y-0.5"
+                        style={{
+                          backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+                          borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                          color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)",
+                          boxShadow: isSelected ? "0 10px 22px var(--cd-shadow)" : "none",
+                        }}
+                      >
+                        <m.icon size={19} />
+                        <span className="mt-3 block text-sm font-bold">{m.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </section>
+
+              <div
+                className="border border-dashed p-4 rounded-xl flex items-center justify-between mt-2"
+                style={{
+                  backgroundColor: "rgba(239, 68, 68, 0.05)",
+                  borderColor: "rgba(239, 68, 68, 0.3)",
+                }}
+              >
+                <div>
+                  <p className="text-xs font-semibold" style={{ color: "var(--cd-danger)" }}>
+                    Simulation Mode
+                  </p>
+                  <p className="text-xs mt-0.5" style={{ color: "var(--cd-text-muted)" }}>
+                    Force transaction failure for E2E testing
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={forceFail}
+                  onChange={(e) => setForceFail(e.target.checked)}
+                  className="w-4 h-4 cursor-pointer accent-red-500"
+                  id="force-fail-checkbox"
+                />
               </div>
-              <input
-                type="checkbox"
-                checked={forceFail}
-                onChange={(e) => setForceFail(e.target.checked)}
-                className="w-4 h-4 cursor-pointer accent-red-500"
-                id="force-fail-checkbox"
-              />
             </div>
 
-            <button
-              onClick={() => void handlePay()}
-              disabled={!validation.valid || addFunds.isPending || paymentState === "processing"}
-              className="cd-btn cd-btn-primary w-full py-3.5 rounded-xl text-base font-semibold flex items-center justify-center gap-2 disabled:opacity-50"
-            >
-              {addFunds.isPending || paymentState === "processing" ? (
-                <>
-                  <Loader2 size={18} className="animate-spin" /> Processing...
-                </>
-              ) : (
-                <>Pay {formatRupees(preview.totalPayableRupees)}</>
-              )}
-            </button>
-          </>
+            <aside className="lg:sticky lg:top-6">
+              <PreviewCard preview={preview} />
+              <button
+                onClick={() => void handlePay()}
+                disabled={!validation.valid || addFunds.isPending || paymentState === "processing"}
+                className="cd-btn cd-btn-primary mt-4 w-full py-3.5 rounded-xl text-base font-bold flex items-center justify-center gap-2 disabled:opacity-50"
+              >
+                {addFunds.isPending || paymentState === "processing" ? (
+                  <>
+                    <Loader2 size={18} className="animate-spin" /> Processing...
+                  </>
+                ) : (
+                  <>Pay {formatRupees(preview.totalPayableRupees)}</>
+                )}
+              </button>
+              <div className="mt-3 flex items-center justify-center gap-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                <ShieldCheck size={14} style={{ color: "var(--cd-success)" }} />
+                Encrypted payment simulation
+              </div>
+            </aside>
+          </div>
         )}
       </main>
 
@@ -219,6 +265,19 @@ export default function AddFundsPage() {
   );
 }
 
+function SectionLabel({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="mb-3">
+      <h2 className="text-sm font-black uppercase tracking-wide" style={{ color: "var(--cd-text)" }}>
+        {title}
+      </h2>
+      <p className="mt-1 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+        {description}
+      </p>
+    </div>
+  );
+}
+
 function PreviewCard({ preview }: { preview: ReturnType<typeof buildAddFundsPreview> }) {
   const rows = [
     { label: "You pay", value: formatRupees(preview.amountRupees) },
@@ -233,20 +292,34 @@ function PreviewCard({ preview }: { preview: ReturnType<typeof buildAddFundsPrev
   return (
     <div
       className="rounded-2xl border p-5"
-      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 18px 38px var(--cd-shadow)",
+      }}
     >
-      <h2 className="text-sm font-semibold mb-4" style={{ color: "var(--cd-text)" }}>
-        Order summary
-      </h2>
-      <div className="space-y-2">
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-black" style={{ color: "var(--cd-text)" }}>
+            Order summary
+          </h2>
+          <p className="text-xs mt-1" style={{ color: "var(--cd-text-muted)" }}>
+            Review credits before payment.
+          </p>
+        </div>
+        <div className="rounded-xl p-2.5" style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary)" }}>
+          <CreditCard size={20} />
+        </div>
+      </div>
+      <div className="space-y-3">
         {rows.map((row) => (
-          <div key={row.label} className="flex justify-between text-sm">
+          <div key={row.label} className="flex justify-between gap-4 text-sm">
             <span style={{ color: "var(--cd-text-muted)" }}>{row.label}</span>
-            <span style={{ color: "var(--cd-text)" }}>{row.value}</span>
+            <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{row.value}</span>
           </div>
         ))}
         <div
-          className="border-t pt-3 mt-3 flex justify-between font-bold"
+          className="border-t pt-4 mt-4 flex justify-between gap-4 font-black"
           style={{ borderColor: "var(--cd-border-subtle)" }}
         >
           <span style={{ color: "var(--cd-text)" }}>Credits added</span>
@@ -261,9 +334,18 @@ function PreviewCard({ preview }: { preview: ReturnType<typeof buildAddFundsPrev
 
 function SuccessState({ credits, onDone }: { credits: number; onDone: () => void }) {
   return (
-    <div className="flex flex-col items-center text-center py-12">
-      <CheckCircle2 size={48} style={{ color: "var(--cd-success)" }} />
-      <h2 className="text-xl font-bold mt-4" style={{ color: "var(--cd-text)" }}>
+    <div
+      className="mx-auto flex max-w-xl flex-col items-center rounded-2xl border px-6 py-12 text-center"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+        boxShadow: "0 18px 44px var(--cd-shadow)",
+      }}
+    >
+      <div className="rounded-full p-4" style={{ backgroundColor: "var(--cd-success-subtle)" }}>
+        <CheckCircle2 size={48} style={{ color: "var(--cd-success)" }} />
+      </div>
+      <h2 className="text-2xl font-black mt-5" style={{ color: "var(--cd-text)" }}>
         Payment successful
       </h2>
       <p className="text-sm mt-2" style={{ color: "var(--cd-text-muted)" }}>
diff --git a/src/features/Billing/v1/pages/BillingHubPage.tsx b/src/features/Billing/v1/pages/BillingHubPage.tsx
index 3883bf9..85ca4ee 100644
--- a/src/features/Billing/v1/pages/BillingHubPage.tsx
+++ b/src/features/Billing/v1/pages/BillingHubPage.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { BarChart3, CreditCard, Wallet } from "lucide-react";
+import { ArrowRight, BarChart3, CreditCard, ShieldCheck, Sparkles, Wallet } from "lucide-react";
 import { useWallet } from "../hooks/useWallet";
 import CreditBadge from "../components/common/CreditBadge";
 import { formatCredits } from "../utils/credits";
@@ -34,31 +34,95 @@ export default function BillingHubPage() {
   const { toasts, dismiss } = useToast();
 
   return (
-    <div className="w-full min-h-screen p-6 sm:p-10" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="w-full min-h-screen p-5 sm:p-8 lg:p-10"
+      style={{
+        background:
+          "radial-gradient(circle at top left, var(--cd-primary-subtle), transparent 34rem), var(--cd-bg)",
+      }}
+    >
       <div className="mx-auto max-w-[1440px]">
-        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--cd-text)" }}>
-          Billing & Credits
-        </h1>
-        <p className="text-sm mb-8" style={{ color: "var(--cd-text-muted)" }}>
-          Manage your community wallet, add funds, and track usage. {"₹"}10 = 100 credits.
-        </p>
+        <section
+          className="mb-6 overflow-hidden rounded-2xl border p-6 sm:p-8"
+          style={{
+            backgroundColor: "color-mix(in srgb, var(--cd-surface) 92%, transparent)",
+            borderColor: "var(--cd-border-subtle)",
+            boxShadow: "0 18px 48px var(--cd-shadow)",
+          }}
+        >
+          <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+            <div className="max-w-2xl">
+              <div
+                className="mb-3 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold"
+                style={{
+                  backgroundColor: "var(--cd-accent-subtle)",
+                  borderColor: "color-mix(in srgb, var(--cd-accent) 28%, transparent)",
+                  color: "var(--cd-text)",
+                }}
+              >
+                <Sparkles size={14} style={{ color: "var(--cd-accent)" }} />
+                Credits command center
+              </div>
+              <h1 className="text-3xl font-black tracking-tight sm:text-4xl" style={{ color: "var(--cd-text)" }}>
+                Billing & Credits
+              </h1>
+              <p className="mt-3 text-sm leading-6 sm:text-base" style={{ color: "var(--cd-text-2)" }}>
+                Manage your community wallet, add funds, and track usage. Rs. 10 = 100 credits.
+              </p>
+            </div>
+
+            <div
+              className="grid min-w-[260px] gap-3 rounded-xl border p-4"
+              style={{
+                backgroundColor: "var(--cd-bg)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
+              <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide" style={{ color: "var(--cd-text-muted)" }}>
+                <ShieldCheck size={15} style={{ color: "var(--cd-success)" }} />
+                Secure wallet
+              </div>
+              {wallet ? <CreditBadge credits={wallet.availableCredits} size="lg" /> : null}
+              <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                Fast recharge, usage visibility, and payout details in one place.
+              </p>
+            </div>
+          </div>
+        </section>
 
         {wallet && (
           <div
-            className="rounded-2xl border p-6 mb-8"
+            className="rounded-2xl border p-5 mb-6 sm:p-6"
             style={{
-              backgroundColor: "var(--cd-surface)",
+              backgroundColor: "color-mix(in srgb, var(--cd-surface) 94%, transparent)",
               borderColor: "var(--cd-border-subtle)",
+              boxShadow: "0 12px 34px var(--cd-shadow)",
             }}
           >
-            <p className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--cd-text-muted)" }}>
-              Available balance
-            </p>
-            <CreditBadge credits={wallet.availableCredits} size="lg" />
-            <p className="text-xs mt-3" style={{ color: "var(--cd-text-muted)" }}>
-              {formatCredits(wallet.pendingCredits)} pending · {formatCredits(wallet.reservedCredits)}{" "}
-              reserved · {formatCredits(wallet.lockedCredits)} locked
-            </p>
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: "var(--cd-text-muted)" }}>
+                  Available balance
+                </p>
+                <CreditBadge credits={wallet.availableCredits} size="lg" />
+              </div>
+              <div className="grid grid-cols-3 gap-2 text-center">
+                {[
+                  ["Pending", wallet.pendingCredits],
+                  ["Reserved", wallet.reservedCredits],
+                  ["Locked", wallet.lockedCredits],
+                ].map(([label, value]) => (
+                  <div key={label} className="rounded-lg px-3 py-2" style={{ backgroundColor: "var(--cd-surface-2)" }}>
+                    <p className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--cd-text-muted)" }}>
+                      {label}
+                    </p>
+                    <p className="text-sm font-bold" style={{ color: "var(--cd-text)" }}>
+                      {formatCredits(Number(value))}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         )}
 
@@ -67,14 +131,26 @@ export default function BillingHubPage() {
             <button
               key={link.path}
               onClick={() => navigate(link.path)}
-              className="rounded-2xl border p-6 text-left transition-all hover:scale-[1.02] hover:shadow-lg"
+              className="group rounded-2xl border p-5 text-left transition-all hover:-translate-y-1 hover:shadow-xl"
               style={{
                 backgroundColor: "var(--cd-surface)",
                 borderColor: "var(--cd-border-subtle)",
               }}
             >
-              <link.icon size={24} style={{ color: "var(--cd-primary)" }} />
-              <h2 className="font-semibold mt-4" style={{ color: "var(--cd-text)" }}>
+              <div className="flex items-start justify-between gap-3">
+                <span
+                  className="flex h-11 w-11 items-center justify-center rounded-xl"
+                  style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
+                >
+                  <link.icon size={22} />
+                </span>
+                <ArrowRight
+                  size={18}
+                  className="translate-x-0 opacity-40 transition-all group-hover:translate-x-1 group-hover:opacity-100"
+                  style={{ color: "var(--cd-primary)" }}
+                />
+              </div>
+              <h2 className="font-bold mt-5" style={{ color: "var(--cd-text)" }}>
                 {link.title}
               </h2>
               <p className="text-sm mt-1" style={{ color: "var(--cd-text-muted)" }}>
diff --git a/src/features/Billing/v1/pages/CommunityWalletPage.tsx b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
index 8ad80e8..880020e 100644
--- a/src/features/Billing/v1/pages/CommunityWalletPage.tsx
+++ b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
@@ -69,7 +69,13 @@ export default function CommunityWalletPage() {
   };
 
   return (
-    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="w-full min-h-screen flex flex-col"
+      style={{
+        background:
+          "radial-gradient(circle at top right, var(--cd-primary-subtle), transparent 34rem), var(--cd-bg)",
+      }}
+    >
       <WalletHeader wallet={wallet} activeTab={activeTab} onTabChange={setActiveTab} />
 
       <div className="flex-1 flex flex-col">
@@ -104,14 +110,25 @@ export default function CommunityWalletPage() {
                   style={{
                     backgroundColor: "var(--cd-surface)",
                     borderColor: "var(--cd-border-subtle)",
+                    boxShadow: "0 14px 34px var(--cd-shadow)",
                   }}
                 >
-                  <h3 className="text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
-                    Feature Usage
-                  </h3>
-                  <p className="text-xs mb-4" style={{ color: "var(--cd-text-muted)" }}>
-                    Run credit-metered features through the centralized billing engine.
-                  </p>
+                  <div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                      <h3 className="text-lg font-black" style={{ color: "var(--cd-text)" }}>
+                        Feature Usage
+                      </h3>
+                      <p className="text-sm mt-1" style={{ color: "var(--cd-text-muted)" }}>
+                        Run credit-metered features through the centralized billing engine.
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => navigate("/org/billing/add-funds")}
+                      className="cd-btn cd-btn-primary px-4 py-2.5 rounded-xl text-sm font-bold hover:-translate-y-0.5 transition-all"
+                    >
+                      Add Funds
+                    </button>
+                  </div>
 
                   <div className="flex flex-col gap-3">
                     <div className="flex flex-wrap gap-3">
@@ -126,12 +143,6 @@ export default function CommunityWalletPage() {
                       >
                         AI Features
                       </button>
-                      <button
-                        onClick={() => navigate("/org/billing/add-funds")}
-                        className="cd-btn cd-btn-primary px-4 py-2.5 rounded-xl text-sm font-semibold hover:scale-[1.02] transition-all"
-                      >
-                        Add Funds
-                      </button>
                     </div>
 
                     {showAIFeatures && (
diff --git a/src/features/Billing/v1/pages/PaymentsPage.tsx b/src/features/Billing/v1/pages/PaymentsPage.tsx
index cc59f81..ed7f03f 100644
--- a/src/features/Billing/v1/pages/PaymentsPage.tsx
+++ b/src/features/Billing/v1/pages/PaymentsPage.tsx
@@ -1,5 +1,5 @@
 import { Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
-import { Wallet, BarChart3, CreditCard } from "lucide-react";
+import { Wallet, BarChart3, CreditCard, Sparkles } from "lucide-react";
 import CommunityWalletPage from "./CommunityWalletPage";
 import UsageDashboardPage from "./UsageDashboardPage";
 import AddFundsPage from "./AddFundsPage";
@@ -16,29 +16,52 @@ export default function PaymentsPage() {
 
   return (
     <div className="w-full h-full flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
-      <div className="border-b shrink-0" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
-        <div className="mx-auto w-full max-w-[1440px] px-5 pt-6 sm:px-8 lg:px-10">
-          <h1 className="text-2xl font-bold mb-5" style={{ color: "var(--cd-text)" }}>
-            Payments
-          </h1>
-          <div className="flex items-center gap-6 overflow-x-auto">
-            {TABS.map((tab) => {
-              const isActive = location.pathname.includes(tab.path);
-              return (
-                <button
-                  key={tab.key}
-                  onClick={() => navigate(tab.path)}
-                  className="flex items-center gap-2 pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap"
-                  style={{
-                    borderColor: isActive ? "var(--cd-primary)" : "transparent",
-                    color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)"
-                  }}
-                >
-                  <tab.icon size={16} style={{ color: isActive ? "var(--cd-primary)" : "currentColor" }} />
-                  {tab.label}
-                </button>
-              );
-            })}
+      <div
+        className="shrink-0 border-b"
+        style={{
+          backgroundColor: "color-mix(in srgb, var(--cd-surface) 94%, transparent)",
+          borderColor: "var(--cd-border-subtle)",
+          boxShadow: "0 10px 28px var(--cd-shadow)",
+        }}
+      >
+        <div className="mx-auto w-full max-w-[1440px] px-5 py-5 sm:px-8 lg:px-10">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <div
+                className="mb-2 inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold"
+                style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
+              >
+                <Sparkles size={13} />
+                Payments workspace
+              </div>
+              <h1 className="text-2xl font-black tracking-tight" style={{ color: "var(--cd-text)" }}>
+                Payments
+              </h1>
+            </div>
+
+            <div
+              className="flex items-center gap-1 overflow-x-auto rounded-xl border p-1"
+              style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
+            >
+              {TABS.map((tab) => {
+                const isActive = location.pathname.includes(tab.path);
+                return (
+                  <button
+                    key={tab.key}
+                    onClick={() => navigate(tab.path)}
+                    className="flex h-10 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition-all whitespace-nowrap"
+                    style={{
+                      backgroundColor: isActive ? "var(--cd-surface)" : "transparent",
+                      boxShadow: isActive ? "0 8px 18px var(--cd-shadow)" : "none",
+                      color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)",
+                    }}
+                  >
+                    <tab.icon size={16} style={{ color: isActive ? "var(--cd-primary)" : "currentColor" }} />
+                    {tab.label}
+                  </button>
+                );
+              })}
+            </div>
           </div>
         </div>
       </div>

From 5c2628e676f8742661fa593e3fc4293c56bf1aab Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Tue, 19 May 2026 23:54:43 +0530
Subject: [PATCH 12/13] Add wallet add-funds popup

---
 .../v1/components/layout/AddFundsModal.tsx    | 337 ++++++++++++++++++
 .../v1/components/layout/LowBalanceModal.tsx  |   9 +-
 .../v1/components/layout/WalletHeader.tsx     |   5 +-
 src/features/Billing/v1/hooks/useWallet.ts    |   1 -
 .../Billing/v1/pages/CommunityWalletPage.tsx  |  26 +-
 src/features/SideBar/v1/Section/SideBar.tsx   |   2 -
 6 files changed, 369 insertions(+), 11 deletions(-)
 create mode 100644 src/features/Billing/v1/components/layout/AddFundsModal.tsx

diff --git a/src/features/Billing/v1/components/layout/AddFundsModal.tsx b/src/features/Billing/v1/components/layout/AddFundsModal.tsx
new file mode 100644
index 0000000..c362a0d
--- /dev/null
+++ b/src/features/Billing/v1/components/layout/AddFundsModal.tsx
@@ -0,0 +1,337 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  BadgeCheck,
+  Banknote,
+  CheckCircle2,
+  CreditCard,
+  Landmark,
+  Loader2,
+  ShieldCheck,
+  Smartphone,
+  Wallet,
+  X,
+} from "lucide-react";
+import { MIN_ADD_RUPEES, RECHARGE_PACKS } from "../../constants/billing.constants";
+import { useAddFunds } from "../../hooks/useWallet";
+import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds } from "../../utils/credits";
+import type { AddFundsPayload, PaymentState } from "../../Billing.types";
+
+const PAYMENT_METHODS: Array<{
+  id: AddFundsPayload["paymentMethod"];
+  label: string;
+  icon: typeof Smartphone;
+}> = [
+  { id: "upi", label: "UPI", icon: Smartphone },
+  { id: "debit", label: "Debit Card", icon: CreditCard },
+  { id: "credit", label: "Credit Card", icon: CreditCard },
+  { id: "netbanking", label: "Net Banking", icon: Landmark },
+  { id: "wallet", label: "Wallets", icon: Wallet },
+];
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (credits: number) => void;
+  onError?: (message: string) => void;
+}
+
+export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: Props) {
+  const addFunds = useAddFunds();
+  const [amountStr, setAmountStr] = useState("500");
+  const [paymentMethod, setPaymentMethod] = useState<AddFundsPayload["paymentMethod"]>("upi");
+  const [paymentState, setPaymentState] = useState<PaymentState>("idle");
+
+  const amount = Number(amountStr) || 0;
+  const preview = useMemo(() => buildAddFundsPreview(amount), [amount]);
+  const validation = useMemo(() => validateMinAddFunds(amount), [amount]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && paymentState !== "processing") onClose();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, paymentState]);
+
+  useEffect(() => {
+    if (isOpen) setPaymentState("idle");
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handlePay = async () => {
+    if (!validation.valid) {
+      onError?.(validation.error ?? "Check amount");
+      return;
+    }
+
+    setPaymentState("processing");
+    try {
+      await addFunds.mutateAsync({
+        amountRupees: amount,
+        paymentMethod,
+        idempotencyKey: `pay-${crypto.randomUUID()}`,
+      });
+      setPaymentState("success");
+      onSuccess?.(preview.totalCredits);
+    } catch {
+      setPaymentState("failed");
+      onError?.("Please try again or use a different payment method.");
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[120] flex items-end justify-center p-3 sm:items-center sm:p-5">
+      <div
+        className="absolute inset-0 bg-black/55 backdrop-blur-sm"
+        onClick={() => paymentState !== "processing" && onClose()}
+      />
+      <div
+        className="relative max-h-[92vh] w-full max-w-4xl overflow-y-auto rounded-2xl border shadow-2xl"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="add-funds-modal-title"
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={paymentState === "processing"}
+          className="absolute right-4 top-4 z-10 rounded-lg p-2 transition-colors hover:bg-[var(--cd-hover)] disabled:opacity-50"
+          aria-label="Close add funds form"
+        >
+          <X size={18} style={{ color: "var(--cd-text-muted)" }} />
+        </button>
+
+        {paymentState === "success" ? (
+          <SuccessContent credits={preview.totalCredits} onClose={onClose} />
+        ) : (
+          <div className="grid gap-0 lg:grid-cols-[minmax(0,1fr)_340px]">
+            <form
+              className="p-5 sm:p-6"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void handlePay();
+              }}
+            >
+              <div className="pr-10">
+                <p className="text-xs font-black uppercase tracking-wide" style={{ color: "var(--cd-primary)" }}>
+                  Community wallet
+                </p>
+                <h2 id="add-funds-modal-title" className="mt-1 text-2xl font-black" style={{ color: "var(--cd-text)" }}>
+                  Add Funds
+                </h2>
+                <p className="mt-1 text-sm" style={{ color: "var(--cd-text-muted)" }}>
+                  Enter an amount, review credits, then confirm payment details.
+                </p>
+              </div>
+
+              <section className="mt-6">
+                <SectionTitle title="Credit calculator" />
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                  {RECHARGE_PACKS.slice(0, 4).map((pack) => {
+                    const isSelected = amount === pack.amountRupees;
+                    return (
+                      <button
+                        type="button"
+                        key={pack.id}
+                        onClick={() => setAmountStr(pack.amountRupees.toString())}
+                        className="min-h-24 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5"
+                        style={{
+                          backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-bg)",
+                          borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                          color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)",
+                        }}
+                      >
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="text-xs font-bold">{pack.label}</span>
+                          {isSelected ? <BadgeCheck size={16} /> : null}
+                        </div>
+                        <span className="mt-3 block text-lg font-black">{formatRupees(pack.amountRupees)}</span>
+                        <span className="mt-1 block text-xs font-semibold">
+                          {formatCredits(pack.baseCredits + pack.bonusCredits)} cr
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <label className="mt-4 block text-sm font-bold" style={{ color: "var(--cd-text)" }}>
+                  Custom amount (Rs., min {MIN_ADD_RUPEES})
+                </label>
+                <div className="relative mt-2">
+                  <Banknote
+                    size={18}
+                    className="absolute left-4 top-1/2 -translate-y-1/2"
+                    style={{ color: "var(--cd-text-muted)" }}
+                  />
+                  <input
+                    type="number"
+                    inputMode="numeric"
+                    pattern="[0-9]*"
+                    min={MIN_ADD_RUPEES}
+                    step={50}
+                    value={amountStr}
+                    onChange={(event) => {
+                      const digitsOnly = event.target.value.replace(/\D/g, "");
+                      setAmountStr(digitsOnly.replace(/^0+(?=\d)/, ""));
+                    }}
+                    className="w-full rounded-xl border bg-transparent py-3 pl-11 pr-4 text-lg font-bold outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
+                    style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                  />
+                </div>
+                {!validation.valid && (
+                  <p className="mt-2 text-xs font-semibold" style={{ color: "var(--cd-danger)" }}>
+                    {validation.error}
+                  </p>
+                )}
+              </section>
+
+              <section className="mt-6">
+                <SectionTitle title="Payment method" />
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
+                  {PAYMENT_METHODS.map((method) => {
+                    const isSelected = paymentMethod === method.id;
+                    return (
+                      <button
+                        type="button"
+                        key={method.id}
+                        onClick={() => setPaymentMethod(method.id)}
+                        className="min-h-20 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5"
+                        style={{
+                          backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-bg)",
+                          borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+                          color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)",
+                        }}
+                      >
+                        <method.icon size={18} />
+                        <span className="mt-2 block text-xs font-bold">{method.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </section>
+            </form>
+
+            <aside
+              className="border-t p-5 sm:p-6 lg:border-l lg:border-t-0"
+              style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
+            >
+              <SectionTitle title="Pay details" />
+              <div
+                className="mt-3 rounded-xl border p-4"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+              >
+                <div className="space-y-3 text-sm">
+                  <SummaryRow label="Wallet amount" value={formatRupees(preview.amountRupees)} />
+                  <SummaryRow label="GST (18%)" value={formatRupees(preview.gstRupees)} />
+                  <SummaryRow label="Platform fee" value={formatRupees(preview.platformFeeRupees)} />
+                  <SummaryRow label="Base credits" value={formatCredits(preview.baseCredits)} />
+                  {preview.bonusCredits > 0 ? (
+                    <SummaryRow label="Bonus credits" value={`+${formatCredits(preview.bonusCredits)}`} accent />
+                  ) : null}
+                </div>
+                <div
+                  className="mt-4 border-t pt-4"
+                  style={{ borderColor: "var(--cd-border-subtle)" }}
+                >
+                  <SummaryRow label="Credits added" value={formatCredits(preview.totalCredits)} accent strong />
+                  <SummaryRow label="Total payable" value={formatRupees(preview.totalPayableRupees)} strong />
+                </div>
+              </div>
+
+              {paymentState === "failed" ? (
+                <div
+                  className="mt-4 rounded-xl border p-3 text-sm font-semibold"
+                  style={{
+                    backgroundColor: "var(--cd-danger-subtle)",
+                    borderColor: "var(--cd-danger)",
+                    color: "var(--cd-danger)",
+                  }}
+                >
+                  Payment failed. Please try again or use a different method.
+                </div>
+              ) : null}
+
+              <button
+                type="button"
+                onClick={() => void handlePay()}
+                disabled={!validation.valid || addFunds.isPending || paymentState === "processing"}
+                className="cd-btn cd-btn-primary mt-4 flex w-full items-center justify-center gap-2 rounded-xl py-3.5 text-base font-bold disabled:opacity-50"
+              >
+                {addFunds.isPending || paymentState === "processing" ? (
+                  <>
+                    <Loader2 size={18} className="animate-spin" /> Processing...
+                  </>
+                ) : (
+                  <>Pay {formatRupees(preview.totalPayableRupees)}</>
+                )}
+              </button>
+
+              <div className="mt-3 flex items-center justify-center gap-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                <ShieldCheck size={14} style={{ color: "var(--cd-success)" }} />
+                Encrypted payment simulation
+              </div>
+            </aside>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SectionTitle({ title }: { title: string }) {
+  return (
+    <h3 className="mb-3 text-sm font-black uppercase tracking-wide" style={{ color: "var(--cd-text)" }}>
+      {title}
+    </h3>
+  );
+}
+
+function SummaryRow({
+  label,
+  value,
+  accent = false,
+  strong = false,
+}: {
+  label: string;
+  value: string;
+  accent?: boolean;
+  strong?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className={strong ? "font-bold" : ""} style={{ color: "var(--cd-text-muted)" }}>
+        {label}
+      </span>
+      <span
+        className={strong ? "font-black" : "font-semibold"}
+        style={{ color: accent ? "var(--cd-primary)" : "var(--cd-text)" }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function SuccessContent({ credits, onClose }: { credits: number; onClose: () => void }) {
+  return (
+    <div className="flex flex-col items-center px-6 py-12 text-center">
+      <div className="rounded-full p-4" style={{ backgroundColor: "var(--cd-success-subtle)" }}>
+        <CheckCircle2 size={48} style={{ color: "var(--cd-success)" }} />
+      </div>
+      <h2 className="mt-5 text-2xl font-black" style={{ color: "var(--cd-text)" }}>
+        Payment successful
+      </h2>
+      <p className="mt-2 text-sm" style={{ color: "var(--cd-text-muted)" }}>
+        {formatCredits(credits)} credits have been added to your wallet.
+      </p>
+      <button type="button" onClick={onClose} className="cd-btn cd-btn-primary mt-8 rounded-xl px-8 py-2.5">
+        Done
+      </button>
+    </div>
+  );
+}
diff --git a/src/features/Billing/v1/components/layout/LowBalanceModal.tsx b/src/features/Billing/v1/components/layout/LowBalanceModal.tsx
index 7cdd44c..312b13a 100644
--- a/src/features/Billing/v1/components/layout/LowBalanceModal.tsx
+++ b/src/features/Billing/v1/components/layout/LowBalanceModal.tsx
@@ -8,9 +8,10 @@ interface Props {
   availableCredits: number;
   threshold: number;
   onDismiss: () => void;
+  onAddFunds?: () => void;
 }
 
-export default function LowBalanceModal({ isOpen, availableCredits, threshold, onDismiss }: Props) {
+export default function LowBalanceModal({ isOpen, availableCredits, threshold, onDismiss, onAddFunds }: Props) {
   const navigate = useNavigate();
   const ref = useRef<HTMLDivElement>(null);
 
@@ -71,7 +72,11 @@ export default function LowBalanceModal({ isOpen, availableCredits, threshold, o
         <div className="flex flex-col sm:flex-row gap-3">
           <button
             onClick={() => {
-              navigate("/org/billing/add-funds");
+              if (onAddFunds) {
+                onAddFunds();
+              } else {
+                navigate("/org/billing/add-funds");
+              }
               onDismiss();
             }}
             data-testid="low-balance-add-funds"
diff --git a/src/features/Billing/v1/components/layout/WalletHeader.tsx b/src/features/Billing/v1/components/layout/WalletHeader.tsx
index 1225e85..7eacf64 100644
--- a/src/features/Billing/v1/components/layout/WalletHeader.tsx
+++ b/src/features/Billing/v1/components/layout/WalletHeader.tsx
@@ -8,6 +8,7 @@ interface Props {
   wallet: WalletType | undefined;
   activeTab: string;
   onTabChange: (tab: string) => void;
+  onAddFunds: () => void;
 }
 
 const TABS = [
@@ -16,7 +17,7 @@ const TABS = [
   { key: "team", label: "Team Usage", icon: Users },
 ];
 
-export default function WalletHeader({ wallet, activeTab, onTabChange }: Props) {
+export default function WalletHeader({ wallet, activeTab, onTabChange, onAddFunds }: Props) {
   const navigate = useNavigate();
 
   return (
@@ -52,7 +53,7 @@ export default function WalletHeader({ wallet, activeTab, onTabChange }: Props)
               Usage
             </button>
             <button
-              onClick={() => navigate("/org/billing/add-funds")}
+              onClick={onAddFunds}
               className="cd-btn cd-btn-primary h-10 rounded-lg px-4 text-sm font-semibold shadow-none transition-all hover:-translate-y-0.5"
             >
               <Plus size={15} strokeWidth={2.5} />
diff --git a/src/features/Billing/v1/hooks/useWallet.ts b/src/features/Billing/v1/hooks/useWallet.ts
index b2aea56..9979fc3 100644
--- a/src/features/Billing/v1/hooks/useWallet.ts
+++ b/src/features/Billing/v1/hooks/useWallet.ts
@@ -6,7 +6,6 @@ import type {
   ConsumeCreditsPayload,
   TransactionFilters,
   PaginatedTransactions,
-  CreditTransaction,
 } from "../Billing.types";
 import { BillingService } from "../services/billingService";
 import { validateMinAddFunds, applyTransactionFilters } from "../utils/credits";
diff --git a/src/features/Billing/v1/pages/CommunityWalletPage.tsx b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
index 880020e..0cb6178 100644
--- a/src/features/Billing/v1/pages/CommunityWalletPage.tsx
+++ b/src/features/Billing/v1/pages/CommunityWalletPage.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import WalletHeader from "../components/layout/WalletHeader";
 import WalletStatsGrid from "../components/layout/WalletStatsGrid";
 import WalletFiltersBar from "../components/layout/WalletFilters";
@@ -8,12 +7,14 @@ import TransactionCardList from "../components/table/TransactionCardList";
 import TeamUsageTable from "../components/table/TeamUsageTable";
 import AutoRechargePanel from "../components/layout/AutoRechargePanel";
 import LowBalanceModal from "../components/layout/LowBalanceModal";
+import AddFundsModal from "../components/layout/AddFundsModal";
 import EmptyState from "@/features/Tasks/v1/components/common/EmptyState";
 import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
 import { useWallet, useWalletTransactions, useConsumeCredits } from "../hooks/useWallet";
 import { useUsageSummary } from "../hooks/useUsageAnalytics";
 import { useBillingGate } from "../hooks/useBillingGate";
 import { DEFAULT_TRANSACTION_FILTERS } from "../constants/billing.constants";
+import { formatCredits } from "../utils/credits";
 import type { TransactionFilters } from "../Billing.types";
 
 export default function CommunityWalletPage() {
@@ -21,6 +22,7 @@ export default function CommunityWalletPage() {
   const [activeTab, setActiveTab] = useState("overview");
   const [filters, setFilters] = useState<TransactionFilters>(DEFAULT_TRANSACTION_FILTERS);
   const [lowBalanceDismissed, setLowBalanceDismissed] = useState(false);
+  const [isAddFundsOpen, setIsAddFundsOpen] = useState(false);
 
   const { data: wallet, isLoading, isError, refetch } = useWallet();
   const { data: summary } = useUsageSummary();
@@ -28,7 +30,6 @@ export default function CommunityWalletPage() {
   const { data: paginated, isLoading: txsLoading } = useWalletTransactions(filters);
   const billingGate = useBillingGate();
 
-  const navigate = useNavigate();
   const consumeCredits = useConsumeCredits();
   const [showAIFeatures, setShowAIFeatures] = useState(false);
 
@@ -76,7 +77,12 @@ export default function CommunityWalletPage() {
           "radial-gradient(circle at top right, var(--cd-primary-subtle), transparent 34rem), var(--cd-bg)",
       }}
     >
-      <WalletHeader wallet={wallet} activeTab={activeTab} onTabChange={setActiveTab} />
+      <WalletHeader
+        wallet={wallet}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        onAddFunds={() => setIsAddFundsOpen(true)}
+      />
 
       <div className="flex-1 flex flex-col">
         {isError ? (
@@ -123,7 +129,7 @@ export default function CommunityWalletPage() {
                       </p>
                     </div>
                     <button
-                      onClick={() => navigate("/org/billing/add-funds")}
+                      onClick={() => setIsAddFundsOpen(true)}
                       className="cd-btn cd-btn-primary px-4 py-2.5 rounded-xl text-sm font-bold hover:-translate-y-0.5 transition-all"
                     >
                       Add Funds
@@ -265,6 +271,18 @@ export default function CommunityWalletPage() {
         availableCredits={billingGate.availableCredits}
         threshold={billingGate.threshold}
         onDismiss={() => setLowBalanceDismissed(true)}
+        onAddFunds={() => setIsAddFundsOpen(true)}
+      />
+
+      <AddFundsModal
+        isOpen={isAddFundsOpen}
+        onClose={() => setIsAddFundsOpen(false)}
+        onSuccess={(credits) => {
+          addToast("success", "Payment successful", `${formatCredits(credits)} credits added.`);
+          void refetch();
+          void allTxQuery.refetch();
+        }}
+        onError={(message) => addToast("error", "Payment failed", message)}
       />
 
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index a126fee..1b4857e 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -7,8 +7,6 @@ import {
   MdSettings,
   MdWork,
   MdWebhook,
-  MdAccountBalanceWallet,
-  MdBarChart,
   MdPayments,
 } from "react-icons/md";
 import { useTheme } from "@/theme";

From 63bdc0ddf15f9d1132ee9d55ef3431829bc770df Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Wed, 20 May 2026 00:14:28 +0530
Subject: [PATCH 13/13] Refine add funds modal and review fixes

---
 .../v1/components/layout/AddFundsModal.tsx    | 77 ++++++++++--------
 .../Billing/v1/pages/PaymentsPage.tsx         | 78 -------------------
 .../v1/Components/InternalSupport_Table.tsx   | 59 +++++++-------
 src/features/SideBar/v1/Section/SideBar.tsx   | 36 +++++++--
 tests/e2e/billing.spec.ts                     | 19 ++---
 5 files changed, 116 insertions(+), 153 deletions(-)
 delete mode 100644 src/features/Billing/v1/pages/PaymentsPage.tsx

diff --git a/src/features/Billing/v1/components/layout/AddFundsModal.tsx b/src/features/Billing/v1/components/layout/AddFundsModal.tsx
index c362a0d..3067c0b 100644
--- a/src/features/Billing/v1/components/layout/AddFundsModal.tsx
+++ b/src/features/Billing/v1/components/layout/AddFundsModal.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 import {
-  BadgeCheck,
   Banknote,
   CheckCircle2,
   CreditCard,
@@ -11,7 +10,7 @@ import {
   Wallet,
   X,
 } from "lucide-react";
-import { MIN_ADD_RUPEES, RECHARGE_PACKS } from "../../constants/billing.constants";
+import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
 import { useAddFunds } from "../../hooks/useWallet";
 import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds } from "../../utils/credits";
 import type { AddFundsPayload, PaymentState } from "../../Billing.types";
@@ -130,36 +129,8 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
               </div>
 
               <section className="mt-6">
-                <SectionTitle title="Credit calculator" />
-                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                  {RECHARGE_PACKS.slice(0, 4).map((pack) => {
-                    const isSelected = amount === pack.amountRupees;
-                    return (
-                      <button
-                        type="button"
-                        key={pack.id}
-                        onClick={() => setAmountStr(pack.amountRupees.toString())}
-                        className="min-h-24 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5"
-                        style={{
-                          backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-bg)",
-                          borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border-subtle)",
-                          color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)",
-                        }}
-                      >
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-xs font-bold">{pack.label}</span>
-                          {isSelected ? <BadgeCheck size={16} /> : null}
-                        </div>
-                        <span className="mt-3 block text-lg font-black">{formatRupees(pack.amountRupees)}</span>
-                        <span className="mt-1 block text-xs font-semibold">
-                          {formatCredits(pack.baseCredits + pack.bonusCredits)} cr
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-
-                <label className="mt-4 block text-sm font-bold" style={{ color: "var(--cd-text)" }}>
+                <SectionTitle title="Custom amount" />
+                <label className="block text-sm font-bold" style={{ color: "var(--cd-text)" }}>
                   Custom amount (Rs., min {MIN_ADD_RUPEES})
                 </label>
                 <div className="relative mt-2">
@@ -190,6 +161,21 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
                 )}
               </section>
 
+              <section className="mt-6">
+                <SectionTitle title="Credit calculator" />
+                <div
+                  className="grid gap-3 rounded-xl border p-4 sm:grid-cols-3"
+                  style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
+                >
+                  <GeneratedCreditTile label="Base credits" value={formatCredits(preview.baseCredits)} />
+                  <GeneratedCreditTile
+                    label="Bonus credits"
+                    value={preview.bonusCredits > 0 ? `+${formatCredits(preview.bonusCredits)}` : "0"}
+                  />
+                  <GeneratedCreditTile label="Total credits" value={formatCredits(preview.totalCredits)} accent />
+                </div>
+              </section>
+
               <section className="mt-6">
                 <SectionTitle title="Payment method" />
                 <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
@@ -291,6 +277,33 @@ function SectionTitle({ title }: { title: string }) {
   );
 }
 
+function GeneratedCreditTile({
+  label,
+  value,
+  accent = false,
+}: {
+  label: string;
+  value: string;
+  accent?: boolean;
+}) {
+  return (
+    <div
+      className="min-h-24 rounded-xl border p-4"
+      style={{
+        backgroundColor: accent ? "var(--cd-primary-subtle)" : "var(--cd-surface)",
+        borderColor: accent ? "var(--cd-primary)" : "var(--cd-border-subtle)",
+      }}
+    >
+      <span className="text-xs font-bold uppercase tracking-wide" style={{ color: "var(--cd-text-muted)" }}>
+        {label}
+      </span>
+      <span className="mt-3 block text-2xl font-black" style={{ color: accent ? "var(--cd-primary)" : "var(--cd-text)" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
 function SummaryRow({
   label,
   value,
diff --git a/src/features/Billing/v1/pages/PaymentsPage.tsx b/src/features/Billing/v1/pages/PaymentsPage.tsx
deleted file mode 100644
index ed7f03f..0000000
--- a/src/features/Billing/v1/pages/PaymentsPage.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
-import { Wallet, BarChart3, CreditCard, Sparkles } from "lucide-react";
-import CommunityWalletPage from "./CommunityWalletPage";
-import UsageDashboardPage from "./UsageDashboardPage";
-import AddFundsPage from "./AddFundsPage";
-
-export default function PaymentsPage() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const TABS = [
-    { key: "wallet", label: "Wallet", icon: Wallet, path: "/org/payments/wallet" },
-    { key: "usage", label: "Usage", icon: BarChart3, path: "/org/payments/usage" },
-    { key: "add-funds", label: "Add Funds", icon: CreditCard, path: "/org/payments/add-funds" },
-  ];
-
-  return (
-    <div className="w-full h-full flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
-      <div
-        className="shrink-0 border-b"
-        style={{
-          backgroundColor: "color-mix(in srgb, var(--cd-surface) 94%, transparent)",
-          borderColor: "var(--cd-border-subtle)",
-          boxShadow: "0 10px 28px var(--cd-shadow)",
-        }}
-      >
-        <div className="mx-auto w-full max-w-[1440px] px-5 py-5 sm:px-8 lg:px-10">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div>
-              <div
-                className="mb-2 inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold"
-                style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
-              >
-                <Sparkles size={13} />
-                Payments workspace
-              </div>
-              <h1 className="text-2xl font-black tracking-tight" style={{ color: "var(--cd-text)" }}>
-                Payments
-              </h1>
-            </div>
-
-            <div
-              className="flex items-center gap-1 overflow-x-auto rounded-xl border p-1"
-              style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border-subtle)" }}
-            >
-              {TABS.map((tab) => {
-                const isActive = location.pathname.includes(tab.path);
-                return (
-                  <button
-                    key={tab.key}
-                    onClick={() => navigate(tab.path)}
-                    className="flex h-10 items-center gap-2 rounded-lg px-4 text-sm font-semibold transition-all whitespace-nowrap"
-                    style={{
-                      backgroundColor: isActive ? "var(--cd-surface)" : "transparent",
-                      boxShadow: isActive ? "0 8px 18px var(--cd-shadow)" : "none",
-                      color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)",
-                    }}
-                  >
-                    <tab.icon size={16} style={{ color: isActive ? "var(--cd-primary)" : "currentColor" }} />
-                    {tab.label}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex-1 w-full relative">
-        <Routes>
-          <Route index element={<Navigate to="wallet" replace />} />
-          <Route path="wallet" element={<CommunityWalletPage />} />
-          <Route path="usage" element={<UsageDashboardPage />} />
-          <Route path="add-funds" element={<AddFundsPage />} />
-        </Routes>
-      </div>
-    </div>
-  );
-}
diff --git a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
index 170a3cc..671e462 100644
--- a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
+++ b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
@@ -99,6 +99,38 @@ const CopyEmailButton = ({ email }: { email: string }) => {
   );
 };
 
+const TeamMemberAvatar = ({ member }: { member: TeamMember }) => {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  return (
+    <div className="relative shrink-0">
+      {imageFailed ? (
+        <div
+          className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white select-none"
+          style={{ backgroundColor: "var(--cd-primary)" }}
+        >
+          {getInitials(member.name)}
+        </div>
+      ) : (
+        <img
+          src={member.image}
+          alt={member.name}
+          className="w-9 h-9 rounded-full object-cover border"
+          style={{ borderColor: "var(--cd-border)" }}
+          onError={() => setImageFailed(true)}
+        />
+      )}
+      <span
+        className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2"
+        style={{
+          backgroundColor: STATUS_COLOR[member.status],
+          borderColor: "var(--cd-surface)",
+        }}
+      />
+    </div>
+  );
+};
+
 const InternalSupport_Table = () => {
   return (
     <div className="w-full h-fit overflow-x-auto">
@@ -116,32 +148,7 @@ const InternalSupport_Table = () => {
             <tr key={member.id}>
               <td>
                 <div className="flex items-center gap-3">
-                  <div className="relative shrink-0">
-                    <img
-                      src={member.image}
-                      alt={member.name}
-                      className="w-9 h-9 rounded-full object-cover border"
-                      style={{ borderColor: "var(--cd-border)" }}
-                      onError={(e) => {
-                        e.currentTarget.style.display = 'none';
-                        const sibling = e.currentTarget.nextElementSibling as HTMLElement;
-                        if (sibling) sibling.style.display = 'flex';
-                      }}
-                    />
-                    <div
-                      className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white select-none"
-                      style={{ backgroundColor: "var(--cd-primary)", display: 'none' }}
-                    >
-                      {getInitials(member.name)}
-                    </div>
-                    <span
-                      className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2"
-                      style={{
-                        backgroundColor: STATUS_COLOR[member.status],
-                        borderColor: "var(--cd-surface)",
-                      }}
-                    />
-                  </div>
+                  <TeamMemberAvatar member={member} />
                   <span className="font-medium text-sm" style={{ color: "var(--cd-text)" }}>
                     {member.name}
                   </span>
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index 1b4857e..582b995 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,4 +1,5 @@
 import { RiContactsBookFill } from "react-icons/ri";
+import { useEffect, useState } from "react";
 import {
   MdAssignment,
   MdDashboard,
@@ -21,6 +22,7 @@ import useOrganizationStore from "@/features/Auth/v1/Store/Organization.Store";
 const SideBar = () => {
   const user = useAuthStore((state) => state.user);
   const organization = useOrganizationStore((state) => state.organization);
+  const [profileImageFailed, setProfileImageFailed] = useState(false);
 
   console.log("User in SideBar:", user);
   console.log("Organization in SideBar:", organization);
@@ -28,6 +30,17 @@ const SideBar = () => {
 
   const communityName = organization?.CommunityName || "CommDesk";
   const userRole = user?.role || "Admin";
+  const profileImageUrl = organization?.LogoUrl || "/defaultProfile.png";
+  const initials = communityName
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+  useEffect(() => {
+    setProfileImageFailed(false);
+  }, [profileImageUrl]);
 
   return (
     <div
@@ -87,14 +100,21 @@ const SideBar = () => {
             className="mt-3 w-full rounded-xl p-3 flex items-center gap-3 cursor-pointer transition-colors duration-150"
             style={{ backgroundColor: theme.bg.surfaceSecondary }}
           >
-            <img
-              src={organization?.LogoUrl || "/defaultProfile.png"}
-              alt="Profile"
-              className="w-9 h-9 rounded-full object-cover shrink-0"
-              onError={(e) => {
-                e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(communityName)}&background=4f46e5&color=fff`;
-              }}
-            />
+            {profileImageFailed ? (
+              <div
+                className="w-9 h-9 rounded-full shrink-0 flex items-center justify-center text-xs font-bold text-white"
+                style={{ backgroundColor: theme.primary.default }}
+              >
+                {initials || "CD"}
+              </div>
+            ) : (
+              <img
+                src={profileImageUrl}
+                alt="Profile"
+                className="w-9 h-9 rounded-full object-cover shrink-0"
+                onError={() => setProfileImageFailed(true)}
+              />
+            )}
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
                 {communityName}
diff --git a/tests/e2e/billing.spec.ts b/tests/e2e/billing.spec.ts
index ef92fa1..4ad5b47 100644
--- a/tests/e2e/billing.spec.ts
+++ b/tests/e2e/billing.spec.ts
@@ -41,23 +41,25 @@ test.describe("Billing & Credits Wallet E2E Scenarios", () => {
     await expect(page.getByRole("heading", { name: "Community Wallet" })).toBeVisible();
     
     await page.getByRole("button", { name: "Add Funds" }).first().click();
-    await expect(page).toHaveURL(/\/org\/billing\/add-funds/);
+    const addFundsDialog = page.getByRole("dialog", { name: "Add Funds" });
+    await expect(addFundsDialog).toBeVisible();
 
-    await page.fill('input[type="number"]', "500");
+    await addFundsDialog.locator('input[type="number"]').fill("500");
 
-    await expect(page.getByTestId("credits-added-preview")).toHaveText("5,500"); // 5000 base + 500 bonus
-    await expect(page.locator("text=Platform fee")).toBeVisible();
-    await expect(page.locator("text=GST (18%)")).toBeVisible();
+    await expect(addFundsDialog.locator("text=Total credits")).toBeVisible();
+    await expect(addFundsDialog.locator("text=5,500")).toBeVisible();
+    await expect(addFundsDialog.locator("text=Platform fee")).toBeVisible();
+    await expect(addFundsDialog.locator("text=GST (18%)")).toBeVisible();
 
-    await page.getByRole("button", { name: "UPI" }).click();
-    await page.getByRole("button", { name: /Pay/ }).click();
+    await addFundsDialog.getByRole("button", { name: "UPI" }).click();
+    await addFundsDialog.getByRole("button", { name: /Pay/ }).click();
 
     await expect(page.locator("text=Processing...")).toBeVisible();
     await expect(page.getByRole("heading", { name: "Payment successful" })).toBeVisible({
       timeout: 10000,
     });
 
-    await page.getByRole("button", { name: "Back to wallet" }).click();
+    await page.getByRole("button", { name: "Done" }).click();
     await expect(page).toHaveURL(/\/org\/dashboard\/community\/wallet/);
   });
 
@@ -115,7 +117,6 @@ test.describe("Billing & Credits Wallet E2E Scenarios", () => {
     await expect(page.locator("text=AI_SUMMARY").first()).toBeVisible();
     
     await page.getByRole("button", { name: "Overview" }).click();
-    await expect(page.getByTestId("wallet-stat-available-value")).toHaveText("6,849");
     const newBalanceText = await page.getByTestId("wallet-stat-available-value").textContent();
     const newBalance = parseCredits(newBalanceText);