diff --git a/package-lock.json b/package-lock.json
index cec640f..97df709 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "jaiben-ui",
       "version": "0.1.0",
       "dependencies": {
+        "date-fns": "^4.1.0",
+        "jspdf": "^4.2.1",
+        "jspdf-autotable": "^5.0.7",
         "lucide-react": "^1.8.0",
         "next": "16.2.4",
         "react": "19.2.4",
@@ -229,6 +232,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1570,6 +1582,19 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -1590,6 +1615,13 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.59.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.0.tgz",
@@ -2447,6 +2479,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.20",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.20.tgz",
@@ -2597,6 +2639,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2654,6 +2716,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2669,6 +2743,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2737,6 +2821,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2821,6 +2915,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.1.tgz",
+      "integrity": "sha512-JahakDAIg1gyOm7dlgWSDjV4n7Ip2PKR55NIT6jrMfIgLFgWo81vdr1/QGqWtFNRqXP9UV71oVePtjqS2ebnPw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3521,6 +3625,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -3531,6 +3646,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3916,6 +4037,20 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3968,6 +4103,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4492,6 +4633,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.7.tgz",
+      "integrity": "sha512-2wr7H6liNDBYNwt25hMQwXkEWFOEopgKIvR1Eukuw6Zmprm/ZcnmLTQEjW7Xx3FCbD3v7pflLcnMAv/h1jFDQw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3 || ^4"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5281,6 +5448,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5321,6 +5494,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5432,6 +5612,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@@ -5483,6 +5673,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -5559,6 +5756,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5876,6 +6083,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6075,6 +6292,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
@@ -6096,6 +6323,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -6433,6 +6670,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 5e649f2..a8b2269 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.7",
     "lucide-react": "^1.8.0",
     "next": "16.2.4",
     "react": "19.2.4",
diff --git a/src/app/admin/accounting/page.tsx b/src/app/admin/accounting/page.tsx
new file mode 100644
index 0000000..784860e
--- /dev/null
+++ b/src/app/admin/accounting/page.tsx
@@ -0,0 +1,1319 @@
+'use client';
+
+import { useState, useMemo, useEffect, useRef } from 'react';
+import {
+  Plus, Search, Download, Eye, Edit, Trash2, X, TrendingUp, TrendingDown,
+  DollarSign, Calendar, FileText, ArrowDownLeft, ArrowUpRight, Building,
+  ChevronLeft, ChevronRight, Wallet, Receipt, BookOpen, PieChart, List,
+  Banknote, Smartphone, Users, Home, Wrench, Printer, FileSpreadsheet,
+  Filter, ShoppingCart, Tag, Move, Calculator, Save, CreditCard, Bike
+} from 'lucide-react';
+
+export type AccountType = 'asset' | 'liability' | 'equity' | 'income' | 'expense';
+
+export type TransactionType =
+  | 'deposit'
+  | 'rent_income'
+  | 'investor_funding'
+  | 'investor_withdraw'
+  | 'salary'
+  | 'rent_expense'
+  | 'utility'
+  | 'maintenance'
+  | 'bike_purchase'
+  | 'bike_sale'
+  | 'other_income'
+  | 'other_expense';
+
+export interface ChartOfAccount {
+  id: string;
+  code: string;
+  name: string;
+  type: AccountType;
+  parentId?: string;
+  isActive: boolean;
+  balance: number;
+}
+
+export interface JournalEntry {
+  id: string;
+  date: string;
+  reference: string;
+  description: string;
+  entries: {
+    accountId: string;
+    accountCode: string;
+    accountName: string;
+    debit: number;
+    credit: number;
+  }[];
+  isPosted: boolean;
+  isAuto: boolean;
+  sourceType?: TransactionType;
+  createdAt: string;
+  createdBy: string;
+}
+
+export interface AccountingTransaction {
+  id: string;
+  date: string;
+  type: TransactionType;
+  amount: number;
+  description: string;
+  beneficiary?: string;
+  beneficiaryPhone?: string;
+  paymentMethod: 'cash' | 'bank' | 'mobile';
+  reference?: string;
+  notes?: string;
+  bikeId?: string;
+  bikeDetails?: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+const defaultAccounts: ChartOfAccount[] = [
+  { id: 'ASSET-001', code: '1000', name: 'Assets', type: 'asset', isActive: true, balance: 0 },
+  { id: 'ASSET-101', code: '1100', name: 'Cash in Hand', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 85000 },
+  { id: 'ASSET-102', code: '1200', name: 'Bank - City Bank', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 125000 },
+  { id: 'ASSET-103', code: '1300', name: 'bKash Business', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 28000 },
+  { id: 'ASSET-104', code: '1400', name: 'Accounts Receivable', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 15000 },
+  { id: 'ASSET-104A', code: '1410', name: 'Cheque Receivable', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 0 },
+  { id: 'ASSET-105', code: '1500', name: 'Bikes & Equipment', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 2500000 },
+  { id: 'ASSET-106', code: '1600', name: 'Bike Inventory', type: 'asset', parentId: 'ASSET-001', isActive: true, balance: 0 },
+
+  { id: 'LIAB-001', code: '2000', name: 'Liabilities', type: 'liability', isActive: true, balance: 0 },
+  { id: 'LIAB-201', code: '2100', name: 'Accounts Payable', type: 'liability', parentId: 'LIAB-001', isActive: true, balance: 5000 },
+  { id: 'LIAB-202', code: '2200', name: 'Investor Liabilities', type: 'liability', parentId: 'LIAB-001', isActive: true, balance: 500000 },
+  { id: 'LIAB-203', code: '2300', name: 'Bike Supplier Payable', type: 'liability', parentId: 'LIAB-001', isActive: true, balance: 0 },
+
+  { id: 'EQUITY-001', code: '3000', name: 'Equity', type: 'equity', isActive: true, balance: 0 },
+  { id: 'EQUITY-301', code: '3100', name: 'Owner Equity', type: 'equity', parentId: 'EQUITY-001', isActive: true, balance: 2000000 },
+  { id: 'EQUITY-302', code: '3200', name: 'Retained Earnings', type: 'equity', parentId: 'EQUITY-001', isActive: true, balance: 198000 },
+
+  { id: 'INC-001', code: '4000', name: 'Income', type: 'income', isActive: true, balance: 0 },
+  { id: 'INC-401', code: '4100', name: 'Bike Deposit Income', type: 'income', parentId: 'INC-001', isActive: true, balance: 50000 },
+  { id: 'INC-402', code: '4200', name: 'Rental Income', type: 'income', parentId: 'INC-001', isActive: true, balance: 185000 },
+  { id: 'INC-403', code: '4300', name: 'Investor Funding', type: 'income', parentId: 'INC-001', isActive: true, balance: 500000 },
+  { id: 'INC-404', code: '4400', name: 'Bike Sales Income', type: 'income', parentId: 'INC-001', isActive: true, balance: 0 },
+  { id: 'INC-405', code: '4500', name: 'Other Income', type: 'income', parentId: 'INC-001', isActive: true, balance: 0 },
+
+  { id: 'EXP-001', code: '5000', name: 'Expenses', type: 'expense', isActive: true, balance: 0 },
+  { id: 'EXP-501', code: '5100', name: 'Salary Expense', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 25000 },
+  { id: 'EXP-502', code: '5200', name: 'Rent Expense', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 35000 },
+  { id: 'EXP-503', code: '5300', name: 'Utility Expense', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 8500 },
+  { id: 'EXP-504', code: '5400', name: 'Maintenance Expense', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 2500 },
+  { id: 'EXP-505', code: '5500', name: 'Investor Withdrawal', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 15000 },
+  { id: 'EXP-506', code: '5600', name: 'Bike Cost of Sales', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 0 },
+  { id: 'EXP-507', code: '5700', name: 'Other Expense', type: 'expense', parentId: 'EXP-001', isActive: true, balance: 0 },
+];
+
+const mockTransactions: AccountingTransaction[] = [
+  { id: 'TXN-001', date: '2024-03-20', type: 'deposit', amount: 5000, description: 'Bike deposit from Rahim Ahmed', beneficiary: 'Rahim Ahmed', beneficiaryPhone: '01712345678', paymentMethod: 'cash', reference: 'DEP-001', createdAt: '2024-03-20T10:30:00', createdBy: 'Admin' },
+  { id: 'TXN-002', date: '2024-03-20', type: 'rent_income', amount: 1200, description: 'Daily rental - Rahim Ahmed', beneficiary: 'Rahim Ahmed', paymentMethod: 'mobile', reference: 'REN-002', createdAt: '2024-03-20T14:00:00', createdBy: 'Admin' },
+  { id: 'TXN-003', date: '2024-03-19', type: 'investor_funding', amount: 50000, description: 'Investment from Mohammad Islam', beneficiary: 'Mohammad Islam', beneficiaryPhone: '01987654321', paymentMethod: 'bank', reference: 'INV-001', createdAt: '2024-03-19T09:00:00', createdBy: 'Admin' },
+  { id: 'TXN-004', date: '2024-03-19', type: 'salary', amount: 25000, description: 'Monthly salary - March 2024', beneficiary: 'Staff Team', paymentMethod: 'bank', reference: 'SAL-003', createdAt: '2024-03-19T16:00:00', createdBy: 'Admin' },
+  { id: 'TXN-005', date: '2024-03-18', type: 'rent_expense', amount: 35000, description: 'Office rent - March 2024', beneficiary: 'Landlord', paymentMethod: 'bank', reference: 'RNT-001', createdAt: '2024-03-18T10:00:00', createdBy: 'Admin' },
+  { id: 'TXN-006', date: '2024-03-18', type: 'utility', amount: 8500, description: 'Electricity bill - March 2024', beneficiary: 'DESCO', paymentMethod: 'mobile', reference: 'UTL-001', createdAt: '2024-03-18T11:30:00', createdBy: 'Admin' },
+  { id: 'TXN-007', date: '2024-03-17', type: 'investor_withdraw', amount: 15000, description: 'Monthly profit withdrawal', beneficiary: 'Mohammad Islam', beneficiaryPhone: '01987654321', paymentMethod: 'bank', reference: 'WTH-002', createdAt: '2024-03-17T15:00:00', createdBy: 'Admin' },
+  { id: 'TXN-008', date: '2024-03-17', type: 'maintenance', amount: 2500, description: 'Bike maintenance - Battery', beneficiary: 'Service Center', paymentMethod: 'cash', reference: 'MNT-001', createdAt: '2024-03-17T13:00:00', createdBy: 'Admin' },
+  { id: 'TXN-009', date: '2024-03-15', type: 'bike_purchase', amount: 150000, description: 'Purchased 5 EVs from supplier', beneficiary: 'Green EV Bangladesh', beneficiaryPhone: '02-1234567', paymentMethod: 'bank', reference: 'PUR-001', bikeDetails: '5x Yadea DT3', createdAt: '2024-03-15T09:00:00', createdBy: 'Admin' },
+  { id: 'TXN-010', date: '2024-03-10', type: 'bike_sale', amount: 45000, description: 'Sold EV to customer', beneficiary: 'John Doe', beneficiaryPhone: '01812345678', paymentMethod: 'bank', reference: 'SAL-001', bikeDetails: 'Dhaka Metro Cha-5679', createdAt: '2024-03-10T11:00:00', createdBy: 'Admin' },
+];
+
+const mockJournalEntries: JournalEntry[] = [
+  {
+    id: 'JE-001', date: '2024-03-20', reference: 'DEP-001', description: 'Bike deposit from Rahim Ahmed',
+    entries: [
+      { accountId: 'ASSET-101', accountCode: '1100', accountName: 'Cash in Hand', debit: 5000, credit: 0 },
+      { accountId: 'INC-401', accountCode: '4100', accountName: 'Bike Deposit Income', debit: 0, credit: 5000 },
+    ],
+    isPosted: true, isAuto: false, sourceType: 'deposit', createdAt: '2024-03-20T10:30:00', createdBy: 'Admin',
+  },
+  {
+    id: 'JE-002', date: '2024-03-20', reference: 'REN-002', description: 'Daily rental income',
+    entries: [
+      { accountId: 'ASSET-103', accountCode: '1300', accountName: 'bKash Business', debit: 1200, credit: 0 },
+      { accountId: 'INC-402', accountCode: '4200', accountName: 'Rental Income', debit: 0, credit: 1200 },
+    ],
+    isPosted: true, isAuto: true, sourceType: 'rent_income', createdAt: '2024-03-20T14:00:00', createdBy: 'System',
+  },
+  {
+    id: 'JE-003', date: '2024-03-19', reference: 'INV-001', description: 'Investment received',
+    entries: [
+      { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: 50000, credit: 0 },
+      { accountId: 'LIAB-202', accountCode: '2200', accountName: 'Investor Liabilities', debit: 0, credit: 50000 },
+    ],
+    isPosted: true, isAuto: true, sourceType: 'investor_funding', createdAt: '2024-03-19T09:00:00', createdBy: 'System',
+  },
+  {
+    id: 'JE-004', date: '2024-03-19', reference: 'SAL-003', description: 'Monthly salary payment',
+    entries: [
+      { accountId: 'EXP-501', accountCode: '5100', accountName: 'Salary Expense', debit: 25000, credit: 0 },
+      { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: 0, credit: 25000 },
+    ],
+    isPosted: true, isAuto: false, sourceType: 'salary', createdAt: '2024-03-19T16:00:00', createdBy: 'Admin',
+  },
+  {
+    id: 'JE-005', date: '2024-03-15', reference: 'PUR-001', description: 'Purchased 5 EVs',
+    entries: [
+      { accountId: 'ASSET-105', accountCode: '1500', accountName: 'Bikes & Equipment', debit: 150000, credit: 0 },
+      { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: 0, credit: 150000 },
+    ],
+    isPosted: true, isAuto: true, sourceType: 'bike_purchase', createdAt: '2024-03-15T09:00:00', createdBy: 'System',
+  },
+  {
+    id: 'JE-006', date: '2024-03-10', reference: 'SAL-001', description: 'Sold EV to customer',
+    entries: [
+      { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: 45000, credit: 0 },
+      { accountId: 'INC-404', accountCode: '4400', accountName: 'Bike Sales Income', debit: 0, credit: 45000 },
+    ],
+    isPosted: true, isAuto: true, sourceType: 'bike_sale', createdAt: '2024-03-10T11:00:00', createdBy: 'System',
+  },
+  {
+    id: 'JE-007', date: '2024-03-17', reference: 'WTH-002', description: 'Investor profit withdrawal',
+    entries: [
+      { accountId: 'LIAB-202', accountCode: '2200', accountName: 'Investor Liabilities', debit: 15000, credit: 0 },
+      { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: 0, credit: 15000 },
+    ],
+    isPosted: true, isAuto: true, sourceType: 'investor_withdraw', createdAt: '2024-03-17T15:00:00', createdBy: 'System',
+  },
+];
+
+const accountTypeConfig: Record<AccountType, { label: string; color: string; bg: string }> = {
+  asset: { label: 'Asset', color: 'text-blue-600', bg: 'bg-blue-50' },
+  liability: { label: 'Liability', color: 'text-red-600', bg: 'bg-red-50' },
+  equity: { label: 'Equity', color: 'text-purple-600', bg: 'bg-purple-50' },
+  income: { label: 'Income', color: 'text-green-600', bg: 'bg-green-50' },
+  expense: { label: 'Expense', color: 'text-amber-600', bg: 'bg-amber-50' },
+};
+
+const transactionTypeConfig: Record<TransactionType, { label: string; category: 'income' | 'expense' | 'asset'; icon: React.ElementType }> = {
+  deposit: { label: 'Bike Deposit', category: 'income', icon: Banknote },
+  rent_income: { label: 'Rental Income', category: 'income', icon: Tag },
+  investor_funding: { label: 'Investor Funding', category: 'income', icon: Users },
+  investor_withdraw: { label: 'Investor Withdraw', category: 'expense', icon: Users },
+  salary: { label: 'Salary Payment', category: 'expense', icon: Users },
+  rent_expense: { label: 'Office Rent', category: 'expense', icon: Home },
+  utility: { label: 'Utility Bills', category: 'expense', icon: Building },
+  maintenance: { label: 'Maintenance', category: 'expense', icon: Wrench },
+  bike_purchase: { label: 'Buy Bike', category: 'asset', icon: ShoppingCart },
+  bike_sale: { label: 'Sell Bike', category: 'income', icon: Bike },
+  other_income: { label: 'Other Income', category: 'income', icon: DollarSign },
+  other_expense: { label: 'Other Expense', category: 'expense', icon: DollarSign },
+};
+
+function generateAutoJournalEntries(type: TransactionType, amount: number, description: string, isManualEntry: boolean = false): JournalEntry['entries'] {
+  if (isManualEntry) return [];
+
+  const config: Partial<Record<TransactionType, { debitAccount: string; debitCode: string; creditAccount: string; creditCode: string }>> = {
+    rent_income: { debitAccount: 'ASSET-103', debitCode: '1300', creditAccount: 'INC-402', creditCode: '4200' },
+    investor_funding: { debitAccount: 'ASSET-102', debitCode: '1200', creditAccount: 'LIAB-202', creditCode: '2200' },
+    investor_withdraw: { debitAccount: 'LIAB-202', debitCode: '2200', creditAccount: 'ASSET-102', creditCode: '1200' },
+    bike_purchase: { debitAccount: 'ASSET-105', debitCode: '1500', creditAccount: 'ASSET-102', creditCode: '1200' },
+    bike_sale: { debitAccount: 'ASSET-102', debitCode: '1200', creditAccount: 'INC-404', creditCode: '4400' },
+  };
+
+  const c = config[type];
+  if (!c) return [];
+
+  return [
+    { accountId: c.debitAccount, accountCode: c.debitCode, accountName: '', debit: amount, credit: 0 },
+    { accountId: c.creditAccount, accountCode: c.creditCode, accountName: '', debit: 0, credit: amount },
+  ];
+}
+
+export default function AccountingPage() {
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'transactions' | 'journal' | 'ledger' | 'accounts'>('dashboard');
+  const [transactions, setTransactions] = useState(mockTransactions);
+  const [accounts] = useState(defaultAccounts);
+  const [journalEntries, setJournalEntries] = useState(mockJournalEntries);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [timePeriod, setTimePeriod] = useState<'this_month' | 'last_month' | 'last_3_months'>('this_month');
+  const [showModal, setShowModal] = useState(false);
+  const [editingTransaction, setEditingTransaction] = useState<AccountingTransaction | null>(null);
+  const [viewingTransaction, setViewingTransaction] = useState<AccountingTransaction | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  const getDateRange = (period: 'this_month' | 'last_month' | 'last_3_months') => {
+    const now = new Date();
+    let from: Date, to: Date = new Date(now);
+    let label: string;
+
+    if (period === 'this_month') {
+      from = new Date(now.getFullYear(), now.getMonth(), 1);
+      to = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      label = now.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+    } else if (period === 'last_month') {
+      from = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      to = new Date(now.getFullYear(), now.getMonth(), 0);
+      label = from.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+    } else {
+      from = new Date(now.getFullYear(), now.getMonth() - 2, 1);
+      to = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      const startLabel = from.toLocaleString('en-US', { month: 'short', year: 'numeric' });
+      const endLabel = to.toLocaleString('en-US', { month: 'short', year: 'numeric' });
+      label = `${startLabel} - ${endLabel}`;
+    }
+
+    return {
+      from: from.toISOString().split('T')[0],
+      to: to.toISOString().split('T')[0],
+      label: label
+    };
+  };
+
+  const periodInfo = getDateRange(timePeriod);
+
+  const filteredTransactions = useMemo(() => {
+    return transactions.filter(t => {
+      const matchesSearch = !searchQuery ||
+        t.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        t.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        t.beneficiary?.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesDate = (!dateFrom || t.date >= dateFrom) && (!dateTo || t.date <= dateTo);
+      return matchesSearch && matchesDate;
+    }).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [transactions, searchQuery, dateFrom, dateTo]);
+
+  const paginatedTransactions = useMemo(() => {
+    const start = (currentPage - 1) * itemsPerPage;
+    return filteredTransactions.slice(start, start + itemsPerPage);
+  }, [filteredTransactions, currentPage]);
+
+  const totalPages = Math.ceil(filteredTransactions.length / itemsPerPage);
+
+  const stats = useMemo(() => {
+    const periodRange = getDateRange(timePeriod);
+    const transactionData = transactions.filter(t => t.date >= periodRange.from && t.date <= periodRange.to);
+    const income = transactionData.filter(t => ['deposit', 'rent_income', 'investor_funding', 'bike_sale', 'other_income'].includes(t.type)).reduce((sum, t) => sum + t.amount, 0);
+    const expense = transactionData.filter(t => ['investor_withdraw', 'salary', 'rent_expense', 'utility', 'maintenance', 'bike_purchase', 'other_expense'].includes(t.type)).reduce((sum, t) => sum + t.amount, 0);
+    const assets = accounts.filter(a => a.type === 'asset').reduce((sum, a) => sum + a.balance, 0);
+    const liabilities = accounts.filter(a => a.type === 'liability').reduce((sum, a) => sum + a.balance, 0);
+    const equity = accounts.filter(a => a.type === 'equity').reduce((sum, a) => sum + a.balance, 0);
+    return { income, expense, netProfit: income - expense, assets, liabilities, equity: equity + (income - expense), transactionCount: transactionData.length };
+  }, [accounts, transactions, timePeriod]);
+
+  const handleSaveTransaction = (data: Partial<AccountingTransaction>, isManual: boolean = false) => {
+    const isAuto = !isManual && ['rent_income', 'investor_funding', 'investor_withdraw', 'bike_purchase', 'bike_sale'].includes(data.type || '');
+    const autoEntries = isAuto ? generateAutoJournalEntries(data.type!, data.amount!, data.description!, isManual) : [];
+
+    const accMap = Object.fromEntries(accounts.map(a => [a.id, a.name]));
+    autoEntries.forEach(e => { e.accountName = accMap[e.accountId] || e.accountName; });
+
+    const newEntry: JournalEntry = {
+      id: `JE-${String(Date.now()).slice(-6)}`,
+      date: data.date || new Date().toISOString().split('T')[0],
+      reference: data.reference || `${data.type?.toUpperCase()}-${Date.now()}`,
+      description: data.description || '',
+      entries: autoEntries.length > 0 ? autoEntries : [
+        { accountId: 'ASSET-101', accountCode: '1100', accountName: 'Cash in Hand', debit: data.amount || 0, credit: 0 },
+        { accountId: 'EXP-507', accountCode: '5700', accountName: 'Other Expense', debit: 0, credit: data.amount || 0 },
+      ],
+      isPosted: true,
+      isAuto: isAuto,
+      sourceType: data.type,
+      createdAt: new Date().toISOString(),
+      createdBy: isAuto ? 'System' : 'Admin',
+    };
+
+    if (editingTransaction) {
+      setTransactions(prev => prev.map(t => t.id === editingTransaction.id ? { ...t, ...data } as AccountingTransaction : t));
+    } else {
+      const newTransaction: AccountingTransaction = {
+        id: `TXN-${String(Date.now()).slice(-6)}`,
+        date: data.date || new Date().toISOString().split('T')[0],
+        type: data.type || 'other_expense',
+        amount: data.amount || 0,
+        description: data.description || '',
+        beneficiary: data.beneficiary,
+        beneficiaryPhone: data.beneficiaryPhone,
+        paymentMethod: data.paymentMethod || 'cash',
+        reference: data.reference,
+        notes: data.notes,
+        bikeDetails: data.bikeDetails,
+        createdAt: new Date().toISOString(),
+        createdBy: 'Admin',
+      };
+      setTransactions(prev => [newTransaction, ...prev]);
+      setJournalEntries(prev => [...prev, newEntry]);
+    }
+    setShowModal(false);
+    setEditingTransaction(null);
+  };
+
+  const handleDeleteTransaction = (id: string) => {
+    if (confirm('Are you sure you want to delete this transaction?')) {
+      const txn = transactions.find(t => t.id === id);
+      if (txn) {
+        setTransactions(prev => prev.filter(t => t.id !== id));
+        setJournalEntries(prev => prev.filter(j => j.reference !== txn.reference));
+      }
+    }
+  };
+
+  const handleExportPDF = () => {
+    import('jspdf').then(jsPDF => {
+      const doc = new jsPDF.default();
+
+      doc.setFontSize(18);
+      doc.setTextColor(6, 95, 70);
+      doc.text('JAIBEN Mobility Ltd', 20, 20);
+
+      doc.setFontSize(12);
+      doc.setTextColor(0);
+      const title = activeTab === 'transactions' ? 'Transactions Report' :
+        activeTab === 'journal' ? 'Journal Entries Report' :
+          activeTab === 'ledger' ? 'General Ledger Report' : 'Accounting Report';
+      doc.text(title, 20, 30);
+
+      doc.setFontSize(9);
+      doc.setTextColor(100);
+      doc.text(`Date: ${new Date().toLocaleDateString()}`, 20, 38);
+      if (dateFrom || dateTo) {
+        doc.text(`Period: ${dateFrom || 'Start'} to ${dateTo || 'Now'}`, 20, 45);
+      }
+
+      doc.setFontSize(9);
+      doc.setTextColor(150);
+      doc.text('Generated from JAIBEN Accounting System', 20, 280);
+
+      doc.save(`accounting-${activeTab}-${new Date().toISOString().split('T')[0]}.pdf`);
+    });
+  };
+
+  const handleExportExcel = () => {
+    let csv = '';
+    if (activeTab === 'transactions') {
+      csv = 'ID,Date,Type,Amount,Beneficiary,Payment Method,Description\n';
+      filteredTransactions.forEach(t => {
+        csv += `${t.id},${t.type},${t.amount},${t.beneficiary || ''},${t.paymentMethod},${t.description}\n`;
+      });
+    } else if (activeTab === 'journal') {
+      csv = 'Date,Reference,Account,Debit,Credit\n';
+      journalEntries.forEach(j => {
+        j.entries.forEach(e => {
+          csv += `${j.date},${j.reference},${e.accountName},${e.debit},${e.credit}\n`;
+        });
+      });
+    }
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `accounting-${activeTab}-${new Date().toISOString().split('T')[0]}.csv`;
+    a.click();
+  };
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  const tabs = [
+    { id: 'dashboard', label: 'Dashboard', icon: PieChart },
+    { id: 'transactions', label: 'Transactions', icon: Receipt },
+    { id: 'journal', label: 'Journal', icon: BookOpen },
+    { id: 'ledger', label: 'Ledger', icon: List },
+    { id: 'accounts', label: 'Chart of Accounts', icon: Calculator },
+  ];
+
+  return (
+    <div className="p-4 lg:p-6">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
+        <div>
+          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Accounting</h1>
+          <p className="text-sm text-slate-500 mt-1">Double-entry bookkeeping with auto-journals</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => { setEditingTransaction(null); setShowModal(true); }}
+            className="inline-flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-lg font-semibold hover:bg-accent-dark transition-colors"
+          >
+            <Plus className="w-5 h-5" />
+            <span>New Transaction</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
+        <div className="flex overflow-x-auto">
+          {tabs.map(tab => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id as typeof activeTab)}
+                className={`flex items-center gap-2 px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${activeTab === tab.id
+                    ? 'border-accent text-accent bg-accent-light/30'
+                    : 'border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-50'
+                  }`}
+              >
+                <Icon className="w-4 h-4" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {(activeTab === 'transactions' || activeTab === 'journal' || activeTab === 'ledger') && (
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 mb-6 flex flex-wrap gap-3 items-center">
+          <div className="relative flex-1 min-w-[200px]">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
+              className="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent/20"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-slate-500">From:</span>
+            <input
+              type="date"
+              value={dateFrom}
+              onChange={(e) => { setDateFrom(e.target.value); setCurrentPage(1); }}
+              className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent/20"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-slate-500">To:</span>
+            <input
+              type="date"
+              value={dateTo}
+              onChange={(e) => { setDateTo(e.target.value); setCurrentPage(1); }}
+              className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent/20"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={handleExportPDF} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600" title="Export PDF">
+              <FileText className="w-5 h-5" />
+            </button>
+            <button onClick={handleExportExcel} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600" title="Export Excel">
+              <FileSpreadsheet className="w-5 h-5" />
+            </button>
+            <button onClick={handlePrint} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600" title="Print">
+              <Printer className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'dashboard' && (
+        <>
+          <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
+            <div>
+              <h2 className="text-lg font-bold text-slate-800">Financial Overview</h2>
+              <p className="text-sm text-slate-500">{periodInfo.label}</p>
+            </div>
+            <div className="flex rounded-lg overflow-hidden border border-slate-200 shadow-sm">
+              {[
+                { id: 'this_month', label: 'This Month' },
+                { id: 'last_month', label: 'Last Month' },
+                { id: 'last_3_months', label: '3 Months' },
+              ].map((period) => (
+                <button
+                  key={period.id}
+                  onClick={() => setTimePeriod(period.id as typeof timePeriod)}
+                  className={`px-4 py-2 text-sm font-medium transition-colors ${timePeriod === period.id
+                      ? 'bg-accent text-white'
+                      : 'bg-white text-slate-600 hover:bg-slate-50'
+                    }`}
+                >
+                  {period.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <DashboardView stats={stats} accounts={accounts} monthLabel={periodInfo.label} />
+        </>
+      )}
+      {activeTab === 'transactions' && (
+        <TransactionsView
+          transactions={paginatedTransactions}
+          totalPages={totalPages}
+          currentPage={currentPage}
+          onPageChange={setCurrentPage}
+          onView={setViewingTransaction}
+          onEdit={(t: AccountingTransaction) => { setEditingTransaction(t); setShowModal(true); }}
+          onDelete={handleDeleteTransaction}
+        />
+      )}
+      {activeTab === 'journal' && <JournalView entries={journalEntries} dateFrom={dateFrom} dateTo={dateTo} />}
+      {activeTab === 'ledger' && <LedgerView accounts={accounts} journalEntries={journalEntries} dateFrom={dateFrom} dateTo={dateTo} />}
+      {activeTab === 'accounts' && <AccountsView accounts={accounts} />}
+
+      <TransactionModal
+        isOpen={showModal}
+        onClose={() => { setShowModal(false); setEditingTransaction(null); }}
+        onSave={handleSaveTransaction}
+        transaction={editingTransaction}
+        accounts={accounts}
+      />
+
+      <ViewTransactionModal
+        isOpen={!!viewingTransaction}
+        onClose={() => setViewingTransaction(null)}
+        transaction={viewingTransaction}
+        accounts={accounts}
+      />
+    </div>
+  );
+}
+
+function DashboardView({ stats, accounts, monthLabel = 'This Month' }: { stats: any; accounts: ChartOfAccount[]; monthLabel?: string }) {
+  const currentMonth = new Date().toLocaleString('en-US', { month: 'long', year: 'numeric' });
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+        <StatCard label="Total Income" value={stats.income} icon={TrendingUp} color="green" />
+        <StatCard label="Total Expenses" value={stats.expense} icon={TrendingDown} color="red" />
+        <StatCard label="Net Profit" value={stats.netProfit} icon={Wallet} color="blue" />
+        <StatCard label="Transactions" value={stats.transactionCount} icon={Receipt} color="slate" />
+        <StatCard label="Total Assets" value={stats.assets} icon={Building} color="purple" />
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+          <div className="px-5 py-4 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-blue-100/50">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-blue-500" />
+              <h3 className="font-bold text-slate-800">Accounting Equation</h3>
+            </div>
+            <p className="text-xs text-slate-500 mt-1">A = L + E</p>
+          </div>
+          <div className="p-5 space-y-4">
+            <div className="flex items-center justify-between p-4 bg-blue-50 rounded-xl border border-blue-100">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center">
+                  <Building className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-blue-700">Assets</p>
+                  <p className="text-xs text-blue-500">&lt;1000&gt; Code Series</p>
+                </div>
+              </div>
+              <p className="text-xl font-bold text-blue-700">৳{stats.assets.toLocaleString()}</p>
+            </div>
+
+            <div className="flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center">
+                <span className="text-slate-500">=</span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-red-50 rounded-xl border border-red-100">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-red-500 flex items-center justify-center">
+                  <CreditCard className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-red-700">Liabilities</p>
+                  <p className="text-xs text-red-500">&lt;2000&gt; Code Series</p>
+                </div>
+              </div>
+              <p className="text-xl font-bold text-red-700">৳{stats.liabilities.toLocaleString()}</p>
+            </div>
+
+            <div className="flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center">
+                <span className="text-slate-500">+</span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-purple-50 rounded-xl border border-purple-100">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-purple-500 flex items-center justify-center">
+                  <Wallet className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-purple-700">Equity</p>
+                  <p className="text-xs text-purple-500">&lt;3000&gt; Code Series</p>
+                </div>
+              </div>
+              <p className="text-xl font-bold text-purple-700">৳{stats.equity.toLocaleString()}</p>
+            </div>
+
+            <div className="flex items-center justify-between pt-3 border-t border-slate-100">
+              <p className="text-sm text-slate-500">Balance Check:</p>
+              <span className={`text-sm font-medium ${stats.assets === stats.liabilities + stats.equity ? 'text-green-600' : 'text-amber-600'}`}>
+                {stats.assets === stats.liabilities + stats.equity ? '✓ Balanced' : '⚠ Check Required'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+          <div className="px-5 py-4 border-b border-slate-100 bg-gradient-to-r from-green-50 to-green-100/50">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-green-500" />
+              <h3 className="font-bold text-slate-800">Auto-Journal Sources</h3>
+            </div>
+            <p className="text-xs text-slate-500 mt-1">System-generated entries</p>
+          </div>
+          <div className="p-4 space-y-2  overflow-y-auto">
+            {[
+              { label: 'Rental Income', desc: 'When bike is rented via payment', auto: true },
+              { label: 'Investor Funding', desc: 'When investor adds money', auto: true },
+              { label: 'Investor Withdraw', desc: 'When investor withdraws profit', auto: true },
+              { label: 'Bike Purchase', desc: 'When bikes are purchased', auto: true },
+              { label: 'Bike Sales', desc: 'When bikes are sold', auto: true },
+              { label: 'Maintenance Expense', desc: 'When damage/repair is paid', auto: true },
+              { label: 'Manual Entry', desc: 'User creates manually', auto: false },
+            ].map((item, i) => (
+              <div key={i} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
+                <div className="flex items-center gap-2">
+                  {item.auto ? <Tag className="w-4 h-4 text-green-500" /> : <Edit className="w-4 h-4 text-amber-500" />}
+                  <div>
+                    <p className="text-sm font-medium text-slate-700">{item.label}</p>
+                    <p className="text-xs text-slate-500">{item.desc}</p>
+                  </div>
+                </div>
+                <span className={`text-xs px-2 py-1 rounded-full font-medium ${item.auto ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
+                  {item.auto ? 'Auto' : 'Manual'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ label, value, icon: Icon, color }: { label: string; value: number; icon: React.ElementType; color: string }) {
+  const colors: Record<string, string> = { green: 'bg-green-50 text-green-600', red: 'bg-red-50 text-red-600', blue: 'bg-blue-50 text-blue-600', purple: 'bg-purple-50 text-purple-600', slate: 'bg-slate-100 text-slate-600' };
+  const showCurrency = label !== 'Transactions';
+  return (
+    <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+      <div className="flex items-start justify-between mb-3">
+        <div className={`w-12 h-12 rounded-xl ${colors[color]} flex items-center justify-center`}>
+          <Icon className="w-6 h-6" />
+        </div>
+      </div>
+      <p className="text-2xl font-extrabold text-slate-800">{showCurrency ? `৳${value.toLocaleString()}` : value.toLocaleString()}</p>
+      <p className="text-sm text-slate-500 mt-1">{label}</p>
+    </div>
+  );
+}
+
+function TransactionsView({ transactions, totalPages, currentPage, onPageChange, onView, onEdit, onDelete }: any) {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-slate-50">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">ID</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Beneficiary</th>
+              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Amount</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-50">
+            {transactions.map((txn: AccountingTransaction) => (
+              <tr key={txn.id} className="hover:bg-slate-50 transition-colors">
+                <td className="px-4 py-3"><span className="text-sm font-medium text-slate-700">{txn.id}</span></td>
+                <td className="px-4 py-3"><span className="text-sm text-slate-600">{txn.date}</span></td>
+                <td className="px-4 py-3">
+                  <span className="text-sm text-slate-600 capitalize">{txn.type.replace('_', ' ')}</span>
+                </td>
+                <td className="px-4 py-3"><span className="text-sm text-slate-600">{txn.beneficiary || '-'}</span></td>
+                <td className="px-4 py-3 text-right">
+                  <span className="text-sm font-semibold text-slate-700">৳{txn.amount.toLocaleString()}</span>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-1">
+                    <button onClick={() => onView(txn)} className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-500">
+                      <Eye className="w-4 h-4" />
+                    </button>
+                    <button onClick={() => onEdit(txn)} className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-500">
+                      <Edit className="w-4 h-4" />
+                    </button>
+                    <button onClick={() => onDelete(txn.id)} className="p-1.5 hover:bg-red-50 rounded-lg text-red-400">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="px-4 py-3 border-t border-slate-100 flex items-center justify-between">
+          <p className="text-sm text-slate-500">Page {currentPage} of {totalPages}</p>
+          <div className="flex items-center gap-2">
+            <button onClick={() => onPageChange(Math.max(1, currentPage - 1))} disabled={currentPage === 1} className="p-2 hover:bg-slate-100 rounded-lg disabled:opacity-50">
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <button onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))} disabled={currentPage === totalPages} className="p-2 hover:bg-slate-100 rounded-lg disabled:opacity-50">
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function JournalView({ entries, dateFrom, dateTo }: { entries: JournalEntry[]; dateFrom: string; dateTo: string }) {
+  const filtered = entries.filter(e => (!dateFrom || e.date >= dateFrom) && (!dateTo || e.date <= dateTo));
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+      <div className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-bold text-slate-800">Journal Entries</h2>
+        <p className="text-sm text-slate-500">{filtered.length} entries found</p>
+      </div>
+      <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
+        <table className="w-full">
+          <thead className="bg-slate-50 sticky top-0">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Ref</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Account</th>
+              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Debit</th>
+              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Credit</th>
+              <th className="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase">Type</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-50">
+            {filtered.map((entry) => (
+              <>
+                {entry.entries.map((line, idx) => (
+                  <tr key={`${entry.id}-${idx}`} className="hover:bg-slate-50">
+                    {idx === 0 && (
+                      <>
+                        <td className="px-4 py-3" rowSpan={entry.entries.length}>
+                          <span className="text-sm text-slate-600">{entry.date}</span>
+                        </td>
+                        <td className="px-4 py-3" rowSpan={entry.entries.length}>
+                          <span className="text-sm font-medium text-slate-700">{entry.reference}</span>
+                        </td>
+                      </>
+                    )}
+                    <td className="px-4 py-3">
+                      <span className="text-sm text-slate-600">{line.accountName}</span>
+                      <span className="text-xs text-slate-400 ml-2">({line.accountCode})</span>
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      {line.debit > 0 && <span className="text-sm text-slate-700">৳{line.debit.toLocaleString()}</span>}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      {line.credit > 0 && <span className="text-sm text-slate-700">৳{line.credit.toLocaleString()}</span>}
+                    </td>
+                    {idx === 0 && (
+                      <td className="px-4 py-3 text-center" rowSpan={entry.entries.length}>
+                        <span className={`text-xs px-2 py-1 rounded-full ${entry.isAuto ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
+                          {entry.isAuto ? 'Auto' : 'Manual'}
+                        </span>
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function LedgerView({ accounts, journalEntries, dateFrom, dateTo }: { accounts: ChartOfAccount[]; journalEntries: JournalEntry[]; dateFrom: string; dateTo: string }) {
+  const filteredEntries = journalEntries.filter(e => (!dateFrom || e.date >= dateFrom) && (!dateTo || e.date <= dateTo));
+  const ledgerAccounts = accounts.filter(a => a.isActive && a.parentId);
+
+  return (
+    <div className="space-y-4">
+      {ledgerAccounts.map(account => {
+        const entries = filteredEntries.flatMap(je =>
+          je.entries.filter(e => e.accountId === account.id).map(e => ({
+            date: je.date,
+            reference: je.reference,
+            debit: e.debit,
+            credit: e.credit,
+            isAuto: je.isAuto
+          }))
+        );
+
+        let balance = 0;
+        if (account.type === 'asset' || account.type === 'expense') {
+          balance = entries.reduce((sum, e) => sum + e.debit - e.credit, 0);
+        } else {
+          balance = entries.reduce((sum, e) => sum + e.credit - e.debit, 0);
+        }
+
+        return (
+          <div key={account.id} className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+            <div className="px-5 py-3 border-b border-slate-100 flex items-center justify-between bg-slate-50">
+              <div className="flex items-center gap-3">
+                <span className="text-sm font-mono text-slate-500">{account.code}</span>
+                <span className="font-medium text-slate-800">{account.name}</span>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${accountTypeConfig[account.type].bg} ${accountTypeConfig[account.type].color}`}>
+                  {accountTypeConfig[account.type].label}
+                </span>
+              </div>
+              <span className="font-bold text-slate-700">৳{balance.toLocaleString()}</span>
+            </div>
+            {entries.length > 0 && (
+              <table className="w-full">
+                <thead className="bg-slate-25">
+                  <tr>
+                    <th className="px-4 py-2 text-left text-xs font-semibold text-slate-500">Date</th>
+                    <th className="px-4 py-2 text-left text-xs font-semibold text-slate-500">Ref</th>
+                    <th className="px-4 py-2 text-right text-xs font-semibold text-slate-500">Debit</th>
+                    <th className="px-4 py-2 text-right text-xs font-semibold text-slate-500">Credit</th>
+                    <th className="px-4 py-2 text-right text-xs font-semibold text-slate-500">Balance</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-50">
+                  {entries.slice(0, 10).map((entry, idx) => {
+                    let runningBalance = 0;
+                    if (account.type === 'asset' || account.type === 'expense') {
+                      runningBalance = entries.slice(0, idx + 1).reduce((sum, e) => sum + e.debit - e.credit, 0);
+                    } else {
+                      runningBalance = entries.slice(0, idx + 1).reduce((sum, e) => sum + e.credit - e.debit, 0);
+                    }
+                    return (
+                      <tr key={idx}>
+                        <td className="px-4 py-2 text-sm text-slate-600">{entry.date}</td>
+                        <td className="px-4 py-2 text-sm text-slate-600">{entry.reference}</td>
+                        <td className="px-4 py-2 text-sm text-slate-600 text-right">{entry.debit > 0 ? `৳${entry.debit}` : '-'}</td>
+                        <td className="px-4 py-2 text-sm text-slate-600 text-right">{entry.credit > 0 ? `৳${entry.credit}` : '-'}</td>
+                        <td className="px-4 py-2 text-sm font-medium text-slate-700 text-right">৳{runningBalance}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function AccountsView({ accounts }: { accounts: ChartOfAccount[] }) {
+  const accountTypes: AccountType[] = ['asset', 'liability', 'equity', 'income', 'expense'];
+
+  return (
+    <div className="space-y-4">
+      {accountTypes.map(type => {
+        const typeAccounts = accounts.filter(a => a.type === type && a.isActive);
+        const parentAccounts = typeAccounts.filter(a => !a.parentId);
+
+        return (
+          <div key={type} className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+            <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className={`px-2 py-1 rounded-lg text-xs font-semibold ${accountTypeConfig[type].bg} ${accountTypeConfig[type].color}`}>
+                  {accountTypeConfig[type].label}
+                </span>
+                <span className="font-bold text-slate-800">{typeAccounts.length} Accounts</span>
+              </div>
+              <span className="font-bold text-slate-700">৳{typeAccounts.reduce((sum, a) => sum + a.balance, 0).toLocaleString()}</span>
+            </div>
+            <div className="divide-y divide-slate-50">
+              {parentAccounts.map(account => {
+                const children = typeAccounts.filter(a => a.parentId === account.id);
+                return (
+                  <div key={account.id}>
+                    <div className="px-5 py-3 flex items-center justify-between hover:bg-slate-50">
+                      <div className="flex items-center gap-3">
+                        <span className="text-sm font-mono text-slate-500 w-16">{account.code}</span>
+                        <span className="font-medium text-slate-700">{account.name}</span>
+                      </div>
+                      <span className="font-semibold text-slate-600">৳{account.balance.toLocaleString()}</span>
+                    </div>
+                    {children.map(child => (
+                      <div key={child.id} className="px-5 py-2 pl-12 flex items-center justify-between bg-slate-25">
+                        <div className="flex items-center gap-3">
+                          <span className="text-sm font-mono text-slate-400 w-16">{child.code}</span>
+                          <span className="text-sm text-slate-600">{child.name}</span>
+                        </div>
+                        <span className="text-sm font-semibold text-slate-600">৳{child.balance.toLocaleString()}</span>
+                      </div>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function TransactionModal({ isOpen, onClose, onSave, transaction, accounts }: { isOpen: boolean; onClose: () => void; onSave: (data: Partial<AccountingTransaction>, isManual?: boolean) => void; transaction: AccountingTransaction | null; accounts: ChartOfAccount[] }) {
+  const [formData, setFormData] = useState<Partial<AccountingTransaction>>({
+    date: new Date().toISOString().split('T')[0],
+    type: 'rent_income',
+    amount: 0,
+    description: '',
+    beneficiary: '',
+    beneficiaryPhone: '',
+    paymentMethod: 'cash',
+    reference: '',
+    notes: '',
+    bikeDetails: '',
+  });
+
+  useEffect(() => {
+    if (transaction) {
+      setFormData(transaction);
+    } else {
+      setFormData({
+        date: new Date().toISOString().split('T')[0],
+        type: 'rent_income',
+        amount: 0,
+        description: '',
+        beneficiary: '',
+        beneficiaryPhone: '',
+        paymentMethod: 'cash',
+        reference: '',
+        notes: '',
+        bikeDetails: '',
+      });
+    }
+  }, [transaction, isOpen]);
+
+  const getPaymentAccount = (method: string) => {
+    switch (method) {
+      case 'bank': return { code: '1200', name: 'Bank - City Bank' };
+      case 'cash': return { code: '1100', name: 'Cash in Hand' };
+      case 'mobile': return { code: '1300', name: 'bKash Business' };
+      case 'cheque': return { code: '1410', name: 'Cheque Receivable' };
+      default: return { code: '1100', name: 'Cash in Hand' };
+    }
+  };
+
+  const getTransactionAccounts = (type: TransactionType, amount: number, method: string) => {
+    const payment = getPaymentAccount(method);
+    
+    const journalMap: Record<string, { debit: { code: string; name: string }; credit: { code: string; name: string } }> = {
+      deposit: { debit: payment, credit: { code: '4100', name: 'Bike Deposit Income' } },
+      rent_income: { debit: payment, credit: { code: '4200', name: 'Rental Income' } },
+      investor_funding: { debit: payment, credit: { code: '2200', name: 'Investor Liabilities' } },
+      investor_withdraw: { debit: { code: '2200', name: 'Investor Liabilities' }, credit: payment },
+      salary: { debit: { code: '5100', name: 'Salary Expense' }, credit: payment },
+      rent_expense: { debit: { code: '5200', name: 'Rent Expense' }, credit: payment },
+      utility: { debit: { code: '5300', name: 'Utility Expense' }, credit: payment },
+      maintenance: { debit: { code: '5400', name: 'Maintenance Expense' }, credit: payment },
+      bike_purchase: { debit: { code: '1500', name: 'Bikes & Equipment' }, credit: payment },
+      bike_sale: { debit: payment, credit: { code: '4400', name: 'Bike Sales Income' } },
+      other_income: { debit: payment, credit: { code: '4500', name: 'Other Income' } },
+      other_expense: { debit: { code: '5700', name: 'Other Expense' }, credit: payment },
+    };
+    
+    const entry = journalMap[type] || { debit: payment, credit: { code: '5700', name: 'Other Expense' } };
+    return entry;
+  };
+
+  const typeConfig = transactionTypeConfig[formData.type || 'rent_income'];
+  const journalEntry = getTransactionAccounts(formData.type || 'rent_income', formData.amount || 0, formData.paymentMethod || 'cash');
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center ${isOpen ? '' : 'hidden'}`}>
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="absolute inset-4 lg:inset-auto lg:w-full lg:max-w-3xl bg-white rounded-xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-accent-light to-white">
+          <div>
+            <h2 className="text-lg font-bold text-slate-800">
+              {transaction ? 'Edit Transaction' : 'New Transaction'}
+            </h2>
+            <p className="text-xs text-slate-500">Create manual journal entry</p>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <form onSubmit={(e) => { e.preventDefault(); onSave(formData, true); }} className="flex-1 overflow-y-auto p-6 space-y-5">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Transaction Date</label>
+              <input 
+                type="date" 
+                value={formData.date} 
+                onChange={(e) => setFormData({ ...formData, date: e.target.value })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm bg-white" 
+                required 
+              />
+            </div>
+            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Transaction Type *</label>
+              <select 
+                value={formData.type} 
+                onChange={(e) => setFormData({ ...formData, type: e.target.value as TransactionType })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm bg-white"
+              >
+                <optgroup label="Income">
+                  <option value="deposit">Bike Deposit</option>
+                  <option value="rent_income">Rental Income</option>
+                  <option value="investor_funding">Investor Funding</option>
+                  <option value="bike_sale">Sell Bike</option>
+                  <option value="other_income">Other Income</option>
+                </optgroup>
+                <optgroup label="Expense">
+                  <option value="investor_withdraw">Investor Withdraw</option>
+                  <option value="salary">Salary Payment</option>
+                  <option value="rent_expense">Office/Shop Rent</option>
+                  <option value="utility">Utility Bills</option>
+                  <option value="maintenance">Maintenance</option>
+                  <option value="bike_purchase">Buy Bike</option>
+                  <option value="other_expense">Other Expense</option>
+                </optgroup>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-green-50 p-4 rounded-xl border border-green-200">
+              <label className="block text-xs font-semibold text-green-700 uppercase mb-2">Amount (৳) *</label>
+              <input 
+                type="number" 
+                value={formData.amount} 
+                onChange={(e) => setFormData({ ...formData, amount: Number(e.target.value) })} 
+                className="w-full px-3 py-2.5 border border-green-200 rounded-lg text-sm bg-white font-bold text-green-700" 
+                required 
+                min="0" 
+                placeholder="0"
+              />
+            </div>
+            <div className="bg-blue-50 p-4 rounded-xl border border-blue-200">
+              <label className="block text-xs font-semibold text-blue-700 uppercase mb-2">Payment Method</label>
+              <select 
+                value={formData.paymentMethod} 
+                onChange={(e) => setFormData({ ...formData, paymentMethod: e.target.value as 'cash' | 'bank' | 'mobile' })} 
+                className="w-full px-3 py-2.5 border border-blue-200 rounded-lg text-sm bg-white"
+              >
+                <option value="cash">Cash</option>
+                <option value="bank">Bank Transfer</option>
+                <option value="mobile">Mobile Banking</option>
+                <option value="cheque">Cheque</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="bg-white p-4 rounded-xl border border-slate-200">
+            <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Description *</label>
+            <input 
+              type="text" 
+              value={formData.description} 
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })} 
+              className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+              required 
+              placeholder="Enter transaction description"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-white p-4 rounded-xl border border-slate-200">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Beneficiary/Recipient</label>
+              <input 
+                type="text" 
+                value={formData.beneficiary} 
+                onChange={(e) => setFormData({ ...formData, beneficiary: e.target.value })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+                placeholder="Name of person or organization"
+              />
+            </div>
+            <div className="bg-white p-4 rounded-xl border border-slate-200">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Phone Number</label>
+              <input 
+                type="text" 
+                value={formData.beneficiaryPhone} 
+                onChange={(e) => setFormData({ ...formData, beneficiaryPhone: e.target.value })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+                placeholder="Contact number"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-white p-4 rounded-xl border border-slate-200">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Reference No.</label>
+              <input 
+                type="text" 
+                value={formData.reference} 
+                onChange={(e) => setFormData({ ...formData, reference: e.target.value })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+                placeholder="Auto-generated if empty"
+              />
+            </div>
+            <div className="bg-white p-4 rounded-xl border border-slate-200 md:col-span-2">
+              <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Bike Details</label>
+              <input 
+                type="text" 
+                value={formData.bikeDetails} 
+                onChange={(e) => setFormData({ ...formData, bikeDetails: e.target.value })} 
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+                placeholder="Bike model, plate number, etc."
+              />
+            </div>
+          </div>
+
+          <div className="bg-white p-4 rounded-xl border border-slate-200">
+            <label className="block text-xs font-semibold text-slate-500 uppercase mb-2">Notes</label>
+            <textarea 
+              value={formData.notes} 
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })} 
+              className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm" 
+              rows={2}
+              placeholder="Additional notes..."
+            />
+          </div>
+
+          <div className="bg-gradient-to-r from-amber-50 to-yellow-50 p-5 rounded-xl border border-amber-200">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <BookOpen className="w-5 h-5 text-amber-600" />
+                <h4 className="font-semibold text-amber-800">Journal Entry Preview</h4>
+              </div>
+              <span className="text-xs px-3 py-1 rounded-full bg-amber-200 text-amber-800 font-medium">
+                Manual Entry
+              </span>
+            </div>
+            
+            <div className="space-y-3">
+              <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-amber-100">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
+                    <ArrowDownLeft className="w-4 h-4 text-green-600" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500">Debit (Dr)</p>
+                    <p className="text-sm font-medium text-slate-700">{journalEntry.debit.name}</p>
+                    <p className="text-xs text-slate-400">({journalEntry.debit.code})</p>
+                  </div>
+                </div>
+                <p className="text-lg font-bold text-green-600">৳{(formData.amount || 0).toLocaleString()}</p>
+              </div>
+
+              <div className="flex justify-center">
+                <div className="w-8 h-8 rounded-full bg-amber-200 flex items-center justify-center">
+                  <ArrowDownLeft className="w-4 h-4 text-amber-600 rotate-180" />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-amber-100">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
+                    <ArrowUpRight className="w-4 h-4 text-red-600" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500">Credit (Cr)</p>
+                    <p className="text-sm font-medium text-slate-700">{journalEntry.credit.name}</p>
+                    <p className="text-xs text-slate-400">({journalEntry.credit.code})</p>
+                  </div>
+                </div>
+                <p className="text-lg font-bold text-red-600">৳{(formData.amount || 0).toLocaleString()}</p>
+              </div>
+            </div>
+
+            <div className="mt-3 pt-3 border-t border-amber-200 flex items-center justify-between">
+              <p className="text-xs text-amber-600">Total Debit = Total Credit</p>
+              <p className="text-sm font-bold text-amber-800">৳{(formData.amount || 0).toLocaleString()}</p>
+            </div>
+          </div>
+        </form>
+
+        <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between bg-slate-50">
+          <button type="button" onClick={onClose} className="px-4 py-2.5 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-100">
+            Cancel
+          </button>
+          <button onClick={() => onSave(formData, true)} className="px-6 py-2.5 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2">
+            <Save className="w-4 h-4" />
+            {transaction ? 'Update Transaction' : 'Create Transaction'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ViewTransactionModal({ isOpen, onClose, transaction, accounts }: { isOpen: boolean; onClose: () => void; transaction: AccountingTransaction | null; accounts: ChartOfAccount[] }) {
+  if (!transaction) return null;
+  const typeConfig = transactionTypeConfig[transaction.type as TransactionType];
+
+  const generatePDF = () => {
+    import('jspdf').then(jsPDF => {
+      const doc = new jsPDF.default();
+
+      doc.setFontSize(20);
+      doc.setTextColor(6, 95, 70);
+      doc.text('JAIBEN Mobility Ltd', 20, 25);
+
+      doc.setFontSize(14);
+      doc.setTextColor(0);
+      doc.text('Transaction Invoice / Voucher', 20, 35);
+
+      doc.setFontSize(10);
+      doc.setTextColor(100);
+      doc.text(`Date: ${transaction.date}`, 20, 45);
+      doc.text(`Invoice No: ${transaction.id}`, 20, 52);
+      doc.text(`Type: ${typeConfig.label}`, 20, 59);
+      doc.text(`Amount: ৳${transaction.amount.toLocaleString()}`, 20, 66);
+
+      if (transaction.beneficiary) doc.text(`Beneficiary: ${transaction.beneficiary}`, 20, 76);
+      if (transaction.bikeDetails) doc.text(`Bike: ${transaction.bikeDetails}`, 20, 83);
+      doc.text(`Payment: ${transaction.paymentMethod}`, 20, 90);
+      doc.text(`Description: ${transaction.description}`, 20, 100);
+
+      doc.save(`invoice-${transaction.id}.pdf`);
+    });
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center ${isOpen ? '' : 'hidden'}`}>
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="absolute inset-4 lg:inset-auto lg:w-full lg:max-w-lg bg-white rounded-xl shadow-xl overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-slate-800">Transaction Details</h2>
+            <p className="text-sm text-slate-500">{transaction.id}</p>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-6 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div><p className="text-sm text-slate-500">Date</p><p className="font-medium text-slate-800">{transaction.date}</p></div>
+            <div><p className="text-sm text-slate-500">Amount</p><p className="font-semibold text-slate-800">৳{transaction.amount.toLocaleString()}</p></div>
+          </div>
+          <div><p className="text-sm text-slate-500">Type</p><p className="font-medium text-slate-800">{typeConfig.label}</p></div>
+          <div><p className="text-sm text-slate-500">Description</p><p className="font-medium text-slate-800">{transaction.description}</p></div>
+          {transaction.beneficiary && <div><p className="text-sm text-slate-500">Beneficiary</p><p className="font-medium text-slate-800">{transaction.beneficiary}</p></div>}
+          {transaction.bikeDetails && <div><p className="text-sm text-slate-500">Bike</p><p className="font-medium text-slate-800">{transaction.bikeDetails}</p></div>}
+          <div className="grid grid-cols-2 gap-4">
+            <div><p className="text-sm text-slate-500">Payment Method</p><p className="font-medium text-slate-800 capitalize">{transaction.paymentMethod}</p></div>
+            <div><p className="text-sm text-slate-500">Reference</p><p className="font-medium text-slate-800">{transaction.reference || '-'}</p></div>
+          </div>
+        </div>
+
+        <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between">
+          <button onClick={generatePDF} className="inline-flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark">
+            <Download className="w-4 h-4" /> Download PDF
+          </button>
+          <button onClick={onClose} className="px-4 py-2.5 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/bikers/[id]/page.tsx b/src/app/admin/bikers/[id]/page.tsx
index 99dd444..e79fb3d 100644
--- a/src/app/admin/bikers/[id]/page.tsx
+++ b/src/app/admin/bikers/[id]/page.tsx
@@ -7,8 +7,8 @@ import {
   User, Phone, Mail, MapPin, Calendar, Heart, Briefcase, Car, Navigation,
   FileText, Clock, TrendingUp, CreditCard, Shield, Award, Star, Activity,
   Eye, Edit, Trash2, ArrowLeft, PhoneCall, MessageCircle, CheckCircle, XCircle,
-  AlertTriangle, DollarSign, Wallet, Bike as BikeIcon, Wrench, Ban, MoreHorizontal, Copy,
-  ExternalLink, Download, Upload, Bell, MessageSquare, Send, RefreshCcw
+  AlertTriangle, DollarSign as DollarSignIcon, Wallet, Bike as BikeIcon, Wrench, Ban, MoreHorizontal, Copy,
+  ExternalLink, Download, Upload, Bell, MessageSquare, Send, RefreshCcw, Image
 } from 'lucide-react';
 
 interface DrivingLicense {
@@ -168,12 +168,31 @@ export default function BikerDetailPage({ params }: PageProps) {
     { id: 'personal', label: 'Personal', icon: User },
     { id: 'license', label: 'License & GPS', icon: Car },
     { id: 'documents', label: 'Documents', icon: FileText },
-    { id: 'reviews', label: 'Reviews', icon: MessageCircle },
-    { id: 'stats', label: 'Statistics', icon: TrendingUp },
+    { id: 'rent', label: 'Rent History', icon: DollarSignIcon },
+    { id: 'bike', label: 'Bike', icon: BikeIcon },
+    // { id: 'reviews', label: 'Reviews', icon: MessageCircle },
+    // { id: 'stats', label: 'Statistics', icon: TrendingUp },
     { id: 'account', label: 'Account', icon: CreditCard },
     { id: 'activity', label: 'Activity', icon: Activity },
   ];
 
+  const rentHistory = [
+    { id: 'R001', date: '2024-03-21', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R002', date: '2024-03-20', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R003', date: '2024-03-19', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R004', date: '2024-03-18', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R005', date: '2024-03-17', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R006', date: '2024-03-16', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R007', date: '2024-03-15', amount: 50, status: 'paid', bikeId: 'EV001', plan: 'Single' },
+    { id: 'R008', date: '2024-03-14', amount: 0, status: 'pending', bikeId: 'EV001', plan: 'Single' },
+  ];
+
+  const rentedBikesHistory = [
+    { id: 'RB001', bikeId: 'EV001', bikeName: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012', startDate: '2024-03-14', endDate: null, status: 'active', plan: 'Single', dailyRate: 50, totalDays: 8, totalRent: 400 },
+    { id: 'RB002', bikeId: 'EV003', bikeName: 'Yadea DT3', plate: 'Dhaka Metro Cha-5678', startDate: '2024-02-01', endDate: '2024-03-13', status: 'returned', plan: 'Rent-to-Own', dailyRate: 45, totalDays: 42, totalRent: 1890 },
+    { id: 'RB003', bikeId: 'EV005', bikeName: 'Etron ET50', plate: 'Dhaka Metro Cha-1234', startDate: '2024-01-10', endDate: '2024-01-31', status: 'returned', plan: 'Shared', dailyRate: 60, totalDays: 22, totalRent: 1320 },
+  ];
+
   return (
     <div className="p-4 lg:p-6 min-h-screen">
       <div className="flex items-center gap-3 mb-4">
@@ -389,6 +408,249 @@ export default function BikerDetailPage({ params }: PageProps) {
           </div>
         )}
 
+        {activeTab === 'rent' && (
+          <div className="p-4 lg:p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <DollarSignIcon className="w-5 h-5 text-accent" /> Daily Rent History
+              </h3>
+              <div className="flex gap-2">
+                <button className="px-3 py-1.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 flex items-center gap-1">
+                  <Download className="w-4 h-4" /> Export
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+              <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                <p className="text-xs text-green-600 font-medium">Total Paid</p>
+                <p className="text-lg font-bold text-green-700">৳{rentHistory.filter(r => r.status === 'paid').reduce((sum, r) => sum + r.amount, 0)}</p>
+              </div>
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                <p className="text-xs text-red-600 font-medium">Pending</p>
+                <p className="text-lg font-bold text-red-700">৳{rentHistory.filter(r => r.status === 'pending').reduce((sum, r) => sum + r.amount, 0)}</p>
+              </div>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <p className="text-xs text-blue-600 font-medium">Total Days</p>
+                <p className="text-lg font-bold text-blue-700">{rentHistory.length}</p>
+              </div>
+              <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
+                <p className="text-xs text-slate-600 font-medium">Current Plan</p>
+                <p className="text-lg font-bold text-slate-700">{biker.membershipType}</p>
+              </div>
+            </div>
+
+            <div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
+              <table className="w-full">
+                <thead className="bg-slate-50">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Bike ID</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Plan</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Amount</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {rentHistory.map(rent => (
+                    <tr key={rent.id} className="hover:bg-slate-50">
+                      <td className="px-4 py-3 text-sm text-slate-600">{rent.date}</td>
+                      <td className="px-4 py-3 text-sm text-slate-600">{rent.bikeId}</td>
+                      <td className="px-4 py-3 text-sm text-slate-600">{rent.plan}</td>
+                      <td className="px-4 py-3 text-sm font-semibold text-slate-700">৳{rent.amount}</td>
+                      <td className="px-4 py-3">
+                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${rent.status === 'paid'
+                            ? 'bg-green-100 text-green-700'
+                            : 'bg-amber-100 text-amber-700'
+                          }`}>
+                          {rent.status === 'paid' && <CheckCircle className="w-3 h-3" />}
+                          {rent.status === 'pending' && <Clock className="w-3 h-3" />}
+                          {rent.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        {rent.status === 'pending' ? (
+                          <button className="px-3 py-1.5 bg-accent text-white text-xs rounded-lg hover:bg-accent-dark">
+                            Collect
+                          </button>
+                        ) : (
+                          <span className="text-xs text-slate-400">-</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'bike' && (
+          <div className="p-4 lg:p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <BikeIcon className="w-5 h-5 text-accent" /> Rented Bikes Details
+              </h3>
+              <div className="flex gap-2">
+                <button className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-1">
+                  <Edit className="w-4 h-4" /> Update
+                </button>
+              </div>
+            </div>
+
+            <div className="bg-white border border-slate-200 rounded-lg p-4 mb-6">
+              <div className="flex items-center gap-4">
+                <div className="w-16 h-16 rounded-lg bg-slate-100 flex items-center justify-center">
+                  <BikeIcon className="w-8 h-8 text-slate-400" />
+                </div>
+                <div>
+                  <p className="font-semibold text-slate-700">{biker.currentBike || 'No Bike Assigned'}</p>
+                  <p className="text-sm text-slate-500">Plate: {biker.bikePlate || 'N/A'}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+              <div className="bg-white border border-slate-200 rounded-lg p-4">
+                <h4 className="font-medium text-slate-700 mb-4">Mileage</h4>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Current Odometer (km)</label>
+                    <input
+                      type="number"
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Enter current reading"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Last Updated</label>
+                    <p className="text-sm text-slate-700">{biker.lastRideAt || 'N/A'}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Total Distance</label>
+                    <p className="text-lg font-bold text-blue-600">{biker.totalDistance.toLocaleString()} km</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-white border border-slate-200 rounded-lg p-4">
+                <h4 className="font-medium text-slate-700 mb-4">Battery Health</h4>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Battery Percentage</label>
+                    <div className="flex items-center gap-3">
+                      <input
+                        type="number"
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                        placeholder="0-100"
+                      />
+                      <span className="text-slate-500">%</span>
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Health Status</label>
+                    <span className="inline-flex items-center gap-1 text-sm font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
+                      <CheckCircle className="w-4 h-4" /> Good
+                    </span>
+                  </div>
+                  <div>
+                    <label className="text-sm text-slate-500 block mb-1">Estimated Range</label>
+                    <p className="text-lg font-bold text-green-600">85 km</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white border border-slate-200 rounded-lg p-4 mb-6">
+              <h4 className="font-medium text-slate-700 mb-4">Bike Images</h4>
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <div className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center">
+                  <Image className="w-8 h-8 text-slate-400 mb-2" />
+                  <span className="text-xs text-slate-500">Front</span>
+                </div>
+                <div className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center">
+                  <Image className="w-8 h-8 text-slate-400 mb-2" />
+                  <span className="text-xs text-slate-500">Back</span>
+                </div>
+                <div className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center">
+                  <Image className="w-8 h-8 text-slate-400 mb-2" />
+                  <span className="text-xs text-slate-500">Left Side</span>
+                </div>
+                <div className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center">
+                  <Image className="w-8 h-8 text-slate-400 mb-2" />
+                  <span className="text-xs text-slate-500">Right Side</span>
+                </div>
+              </div>
+              <button className="mt-4 px-4 py-2 border border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-accent hover:text-accent w-full">
+                + Upload Images
+              </button>
+            </div>
+
+            <div className="bg-white border border-slate-200 rounded-lg p-4">
+              <h4 className="font-medium text-slate-700 mb-4">Notes</h4>
+              <textarea
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                rows={4}
+                placeholder="Add notes about the bike condition, issues, etc..."
+              ></textarea>
+            </div>
+
+            <div className="mt-6">
+              <h4 className="font-semibold text-slate-800 mb-4 flex items-center gap-2">
+                <Clock className="w-5 h-5 text-accent" /> Rented Bikes History
+              </h4>
+              <div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-slate-50">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Bike</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Plate</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Plan</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Start Date</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">End Date</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Days</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Total Rent</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {rentedBikesHistory.map(rental => (
+                      <tr key={rental.id} className="hover:bg-slate-50">
+                        <td className="px-4 py-3">
+                          <div className="flex items-center gap-2">
+                            <BikeIcon className="w-4 h-4 text-slate-400" />
+                            <div>
+                              <p className="text-sm font-medium text-slate-700">{rental.bikeName}</p>
+                              <p className="text-xs text-slate-400">{rental.bikeId}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{rental.plate}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{rental.plan}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{rental.startDate}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{rental.endDate || '-'}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{rental.totalDays}</td>
+                        <td className="px-4 py-3 text-sm font-semibold text-green-600">৳{rental.totalRent}</td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${rental.status === 'active'
+                              ? 'bg-green-100 text-green-700'
+                              : 'bg-slate-100 text-slate-600'
+                            }`}>
+                            {rental.status === 'active' && <Activity className="w-3 h-3" />}
+                            {rental.status === 'returned' && <CheckCircle className="w-3 h-3" />}
+                            {rental.status === 'active' ? 'Active' : 'Returned'}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )}
+
         {activeTab === 'stats' && (
           <div className="p-4 lg:p-6">
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
diff --git a/src/app/admin/bikers/page.tsx b/src/app/admin/bikers/page.tsx
index dbf0b60..cfe87a4 100644
--- a/src/app/admin/bikers/page.tsx
+++ b/src/app/admin/bikers/page.tsx
@@ -136,6 +136,10 @@ interface Biker {
   lastRideAt?: string;
   firstRideAt?: string;
   joinedFrom: string;
+
+  pendingRent?: number;
+  pendingRentDays?: number;
+  lastRentPaidAt?: string;
 }
 
 const mockBikers: Biker[] = [
@@ -191,6 +195,9 @@ const mockBikers: Biker[] = [
     lastRideAt: '2024-03-21',
     firstRideAt: '2024-01-15',
     joinedFrom: 'App Store',
+    pendingRent: 0,
+    pendingRentDays: 0,
+    lastRentPaidAt: '2024-03-21',
   },
   {
     id: 'B002',
@@ -323,6 +330,9 @@ const mockBikers: Biker[] = [
     insuranceExpiry: '2024-12-01',
     tags: ['top_rider', 'vip'],
     joinedFrom: 'Facebook',
+    pendingRent: 150,
+    pendingRentDays: 3,
+    lastRentPaidAt: '2024-03-18',
   },
   {
     id: 'B005',
@@ -411,7 +421,10 @@ export default function BikersPage() {
       biker.gpsDeviceId?.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesStatus = statusFilter === 'all' || biker.status === statusFilter;
     const matchesKyc = kycFilter === 'all' || biker.kycStatus === kycFilter;
-    return matchesSearch && matchesStatus && matchesKyc;
+    const matchesRent = (statusFilter === 'rent_pending') 
+      ? (biker.pendingRent && biker.pendingRent > 0)
+      : true;
+    return matchesSearch && matchesStatus && matchesKyc && matchesRent;
   });
 
   const sortedBikers = [...filteredBikers].sort((a, b) => {
@@ -587,6 +600,7 @@ export default function BikersPage() {
               <option value="pending">Pending</option>
               <option value="inactive">Inactive</option>
               <option value="blocked">Blocked</option>
+              <option value="rent_pending" className="text-amber-600">Rent Pending</option>
             </select>
             <select
               value={kycFilter}
@@ -626,7 +640,7 @@ export default function BikersPage() {
                   <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Financial</th>
                   <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
                   <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">KYC</th>
-                  <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Status</th>
                   <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
                 </tr>
               </thead>
@@ -678,18 +692,27 @@ export default function BikersPage() {
                       </span>
                     </td>
                     <td className="px-4 py-3">
-                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[biker.status]}`}>
-                        {biker.status === 'active' && <Activity className="w-3 h-3" />}
-                        {biker.status === 'pending' && <Clock className="w-3 h-3" />}
-                        {biker.status === 'blocked' && <Ban className="w-3 h-3" />}
-                        {biker.status}
-                      </span>
-                      {biker.rating > 0 && (
-                        <p className="text-xs text-amber-600 mt-1 flex items-center gap-1">★ {biker.rating} ({biker.totalRatings})</p>
+                      {(biker.pendingRent && biker.pendingRent > 0) ? (
+                        <div>
+                          <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
+                            <AlertTriangle className="w-3 h-3" /> Pending
+                          </span>
+                          <p className="text-xs text-amber-600 mt-1">৳{biker.pendingRent} ({biker.pendingRentDays}d)</p>
+                        </div>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
+                          <CheckCircle className="w-3 h-3" /> Clear
+                        </span>
                       )}
                     </td>
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-1">
+                        <a href={`tel:${biker.phone}`} className="p-2 hover:bg-green-50 rounded-lg" title="Call">
+                          <PhoneCall className="w-4 h-4 text-green-600" />
+                        </a>
+                        <a href={`sms:${biker.phone}`} className="p-2 hover:bg-blue-50 rounded-lg" title="Message">
+                          <MessageCircle className="w-4 h-4 text-blue-500" />
+                        </a>
                         <button onClick={() => handleViewDetails(biker)} className="p-2 hover:bg-slate-100 rounded-lg" title="View Details">
                           <Eye className="w-4 h-4 text-blue-500" />
                         </button>
diff --git a/src/app/admin/fleet/[id]/page.tsx b/src/app/admin/fleet/[id]/page.tsx
index f07b062..8b1ecc5 100644
--- a/src/app/admin/fleet/[id]/page.tsx
+++ b/src/app/admin/fleet/[id]/page.tsx
@@ -8,7 +8,8 @@ import {
   MessageCircle, Calendar, DollarSign, Clock, Navigation, Car, FileText, Shield, Zap,
   GaugeCircle, CheckCircle, AlertTriangle, Activity, Award, TrendingUp, Wallet,
   MoreHorizontal, Map, Navigation2, Satellite, FileCheck, FileX, Clock3,
-  History, CreditCard, User2, Phone, Mail, MapPinned
+  History, CreditCard, User2, Phone, Mail, MapPinned, ExternalLink, Plus,
+  AlertCircle, Image as ImageIcon
 } from 'lucide-react';
 
 interface GPSDevice {
@@ -49,6 +50,48 @@ interface ActivityLog {
   by: string;
 }
 
+interface BikeAssignment {
+  id: string;
+  bikeId: string;
+  bikerId: string;
+  bikerName: string;
+  assignedAt: string;
+  assignedBy: string;
+  unassignedAt?: string;
+  unassignedBy?: string;
+  reason?: string;
+  status: 'active' | 'completed';
+  notes?: string;
+}
+
+interface DamageRecord {
+  id: string;
+  date: string;
+  type: 'accident' | 'theft' | 'natural' | 'wear_tear' | 'other';
+  description: string;
+  reportedBy: string;
+  reportedAt: string;
+  estimatedCost?: number;
+  actualCost?: number;
+  status: 'reported' | 'under_repair' | 'repaired' | 'claim_rejected';
+  images?: string[];
+  billImage?: string;
+  resolvedAt?: string;
+  notes?: string;
+}
+
+interface MaintenanceRecord {
+  id: string;
+  date: string;
+  type: 'routine' | 'battery' | 'tire' | 'brake' | 'engine' | 'electrical' | 'other';
+  description: string;
+  performedBy: string;
+  cost: number;
+  nextDueDate?: string;
+  status: 'scheduled' | 'in_progress' | 'completed';
+  notes?: string;
+}
+
 interface Bike {
   id: string;
   model: string;
@@ -76,10 +119,13 @@ interface Bike {
   documents?: BikeDocument[];
   rentalHistory?: RentalHistory[];
   activityLog?: ActivityLog[];
+  assignmentHistory?: BikeAssignment[];
+  damageHistory?: DamageRecord[];
+  maintenanceHistory?: MaintenanceRecord[];
 }
 
 const mockBikes: Bike[] = [
-  { 
+  {
     id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: '', plateNumber: 'Dhaka Metro Cha-A-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'Rahim Ahmed', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-15', purchasePrice: 125000, currentRent: 350, totalRides: 156, totalDistance: 2340, totalEarnings: 54600, lastService: '2024-03-01', nextService: '2024-04-01', insuranceExpiry: '2025-01-15', registrationExpiry: '2026-01-15',
     gpsDevice: { id: 'GPS001', phone: '01712345601', imei: '861234567890123', lastActive: '2024-03-21 14:30', signal: 85, battery: 72 },
     documents: [
@@ -99,9 +145,18 @@ const mockBikes: Bike[] = [
       { id: 'A003', action: 'GPS Update', details: 'New GPS device installed', date: '2024-02-15', by: 'Admin' },
       { id: 'A004', action: 'Rental Completed', details: 'Rent-to-own by Jamal Khan', date: '2024-02-28 23:59', by: 'System' },
       { id: 'A005', action: 'Insurance Renewed', details: 'Insurance renewed for 1 year', date: '2024-01-15', by: 'Admin' },
+    ],
+    damageHistory: [
+      { id: 'DMG001', date: '2024-02-10', type: 'accident', description: 'Minor collision at Mirpur intersection', reportedBy: 'Jamal Khan', reportedAt: '2024-02-10 14:30', estimatedCost: 5000, actualCost: 4500, status: 'repaired', resolvedAt: '2024-02-15' },
+      { id: 'DMG002', date: '2024-03-15', type: 'wear_tear', description: 'Front tire wear - replaced', reportedBy: 'Rahim Ahmed', reportedAt: '2024-03-15 09:00', estimatedCost: 2500, actualCost: 2200, status: 'repaired', resolvedAt: '2024-03-16' },
+    ],
+    maintenanceHistory: [
+      { id: 'MNT001', date: '2024-03-01', type: 'routine', description: 'Full service - oil change, brake check, tire rotation', performedBy: 'Service Center', cost: 1500, nextDueDate: '2024-04-01', status: 'completed' },
+      { id: 'MNT002', date: '2024-02-15', type: 'battery', description: 'Battery health check and terminal cleaning', performedBy: 'Service Center', cost: 500, nextDueDate: '2024-05-15', status: 'completed' },
+      { id: 'MNT003', date: '2024-01-20', type: 'tire', description: 'Tire pressure check and inflation', performedBy: 'Service Center', cost: 300, nextDueDate: '2024-04-20', status: 'completed' },
     ]
   },
-  { 
+  {
     id: 'EV002', model: 'Yadea DT3', brand: 'Yadea', image: '', plateNumber: 'Dhaka Metro Cha-A-5678', status: 'available', batteryLevel: 95, location: 'Banani', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-02-01', purchasePrice: 118000, totalRides: 89, totalDistance: 1567, totalEarnings: 31150, lastService: '2024-03-15', nextService: '2024-04-15', insuranceExpiry: '2025-02-01', registrationExpiry: '2026-02-01',
     gpsDevice: { id: 'GPS002', phone: '01712345602', imei: '861234567890124', lastActive: '2024-03-21 15:00', signal: 92, battery: 88 },
     documents: [
@@ -117,7 +172,7 @@ const mockBikes: Bike[] = [
       { id: 'A007', action: 'Added to Fleet', details: 'Bike registered in system', date: '2024-02-01', by: 'Admin' },
     ]
   },
-  { 
+  {
     id: 'EV003', model: 'AIMA Lightning', brand: 'AIMA', image: '', plateNumber: 'Dhaka Metro Cha-A-9012', status: 'rented', batteryLevel: 62, location: 'Uttara', assignedTo: 'Karim Singh', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-20', purchasePrice: 132000, currentRent: 400, totalRides: 203, totalDistance: 3890, totalEarnings: 71100, lastService: '2024-03-10', nextService: '2024-04-10', insuranceExpiry: '2025-01-20', registrationExpiry: '2026-01-20',
     gpsDevice: { id: 'GPS003', phone: '01712345603', imei: '861234567890125', lastActive: '2024-03-21 14:45', signal: 78, battery: 55 },
     documents: [
@@ -128,7 +183,7 @@ const mockBikes: Bike[] = [
     rentalHistory: [],
     activityLog: []
   },
-  { 
+  {
     id: 'EV004', model: 'TVS iQube', brand: 'TVS', image: '', plateNumber: 'Dhaka Metro Cha-A-3456', status: 'maintenance', batteryLevel: 45, location: 'Workshop - Banani', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2023-12-10', purchasePrice: 145000, totalRides: 312, totalDistance: 5670, totalEarnings: 98000, lastService: '2024-03-20', nextService: '2024-03-25', insuranceExpiry: '2024-12-10', registrationExpiry: '2025-12-10', notes: 'Motor issue - awaiting parts',
     gpsDevice: { id: 'GPS004', phone: '01712345604', imei: '861234567890126', lastActive: '2024-03-20 10:00', signal: 0, battery: 12 },
     documents: [
@@ -138,7 +193,7 @@ const mockBikes: Bike[] = [
     rentalHistory: [],
     activityLog: []
   },
-  { 
+  {
     id: 'EV005', model: 'Bajaj Chetak', brand: 'Bajaj', image: '', plateNumber: 'Dhaka Metro Cha-A-7890', status: 'available', batteryLevel: 100, location: 'Dhanmondi', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2024-02-15', purchasePrice: 138000, totalRides: 67, totalDistance: 890, totalEarnings: 23450, lastService: '2024-03-18', nextService: '2024-04-18', insuranceExpiry: '2025-02-15', registrationExpiry: '2026-02-15',
     gpsDevice: { id: 'GPS005', phone: '01712345605', imei: '861234567890127', lastActive: '2024-03-21 15:30', signal: 95, battery: 92 },
     documents: [
@@ -173,10 +228,105 @@ export default function FleetDetailPage({ params }: { params: Promise<{ id: stri
   const resolvedParams = use(params);
   const router = useRouter();
   const bikeData = getBikeById(resolvedParams.id);
-  
-  const [activeTab, setActiveTab] = useState('overview');
 
-  if (!bikeData) {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [bikes, setBikes] = useState<Bike[]>(mockBikes);
+  const [showDamageModal, setShowDamageModal] = useState(false);
+  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
+  const [editingDamage, setEditingDamage] = useState<DamageRecord | null>(null);
+  const [editingMaintenance, setEditingMaintenance] = useState<MaintenanceRecord | null>(null);
+
+  const bike = bikes.find(b => b.id === resolvedParams.id) || bikes[0];
+
+  const damageTypes = [
+    { value: 'accident', label: 'Accident' },
+    { value: 'theft', label: 'Theft' },
+    { value: 'natural', label: 'Natural Disaster' },
+    { value: 'wear_tear', label: 'Wear & Tear' },
+    { value: 'other', label: 'Other' },
+  ];
+
+  const maintenanceTypes = [
+    { value: 'routine', label: 'Routine Service' },
+    { value: 'battery', label: 'Battery' },
+    { value: 'tire', label: 'Tire' },
+    { value: 'brake', label: 'Brake' },
+    { value: 'engine', label: 'Engine' },
+    { value: 'electrical', label: 'Electrical' },
+    { value: 'other', label: 'Other' },
+  ];
+
+  const handleAddDamage = (damage: DamageRecord) => {
+    setBikes(bikes.map(b => {
+      if (b.id === bike.id) {
+        return { ...b, damageHistory: [...(b.damageHistory || []), damage] };
+      }
+      return b;
+    }));
+    setShowDamageModal(false);
+  };
+
+  const handleUpdateDamage = (damage: DamageRecord) => {
+    setBikes(bikes.map(b => {
+      if (b.id === bike.id) {
+        return {
+          ...b,
+          damageHistory: (b.damageHistory || []).map(d => d.id === damage.id ? damage : d)
+        };
+      }
+      return b;
+    }));
+    setShowDamageModal(false);
+    setEditingDamage(null);
+  };
+
+  const handleDeleteDamage = (damageId: string) => {
+    if (confirm('Are you sure you want to delete this damage record?')) {
+      setBikes(bikes.map(b => {
+        if (b.id === bike.id) {
+          return { ...b, damageHistory: (b.damageHistory || []).filter(d => d.id !== damageId) };
+        }
+        return b;
+      }));
+    }
+  };
+
+  const handleAddMaintenance = (maintenance: MaintenanceRecord) => {
+    setBikes(bikes.map(b => {
+      if (b.id === bike.id) {
+        return { ...b, maintenanceHistory: [...(b.maintenanceHistory || []), maintenance] };
+      }
+      return b;
+    }));
+    setShowMaintenanceModal(false);
+  };
+
+  const handleUpdateMaintenance = (maintenance: MaintenanceRecord) => {
+    setBikes(bikes.map(b => {
+      if (b.id === bike.id) {
+        return {
+          ...b,
+          maintenanceHistory: (b.maintenanceHistory || []).map(m => m.id === maintenance.id ? maintenance : m)
+        };
+      }
+      return b;
+    }));
+    setShowMaintenanceModal(false);
+    setEditingMaintenance(null);
+  };
+
+  const handleDeleteMaintenance = (maintenanceId: string) => {
+    if (confirm('Are you sure you want to delete this maintenance record?')) {
+      setBikes(bikes.map(b => {
+        if (b.id === bike.id) {
+          return { ...b, maintenanceHistory: (b.maintenanceHistory || []).filter(m => m.id !== maintenanceId) };
+        }
+        return b;
+      }));
+    }
+  };
+
+  if (!bike) {
     return (
       <div className="p-4 lg:p-6">
         <div className="bg-white rounded-xl p-8 text-center">
@@ -189,13 +339,14 @@ export default function FleetDetailPage({ params }: { params: Promise<{ id: stri
     );
   }
 
-  const bike = bikeData;
-
   const tabs = [
     { id: 'overview', label: 'Overview', icon: Bike },
+    { id: 'biker-assignment', label: 'Assign Bikers', icon: User },
     { id: 'gps', label: 'GPS & Tracking', icon: Navigation2 },
     { id: 'documents', label: 'Documents', icon: FileText },
     { id: 'rental', label: 'Rental History', icon: History },
+    { id: 'damage', label: 'Damage History', icon: AlertTriangle },
+    { id: 'maintenance', label: 'Maintenance', icon: Wrench },
     { id: 'activity', label: 'Activity Log', icon: Clock3 },
     { id: 'investor', label: 'Investor Info', icon: User2 },
   ];
@@ -220,11 +371,10 @@ export default function FleetDetailPage({ params }: { params: Promise<{ id: stri
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
-            className={`px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap flex items-center gap-2 ${
-              activeTab === tab.id 
-                ? 'bg-accent text-white' 
+            className={`px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap flex items-center gap-2 ${activeTab === tab.id
+                ? 'bg-accent text-white'
                 : 'bg-white text-slate-600 border border-slate-200'
-            }`}
+              }`}
           >
             <tab.icon className="w-4 h-4" />
             {tab.label}
@@ -233,24 +383,209 @@ export default function FleetDetailPage({ params }: { params: Promise<{ id: stri
       </div>
 
       {activeTab === 'overview' && <OverviewTab bike={bike} />}
+      {activeTab === 'biker-assignment' && <BikerAssignmentTab bike={bike} />}
       {activeTab === 'gps' && <GPSTab bike={bike} />}
       {activeTab === 'documents' && <DocumentsTab bike={bike} />}
       {activeTab === 'rental' && <RentalTab bike={bike} />}
       {activeTab === 'activity' && <ActivityTab bike={bike} />}
       {activeTab === 'investor' && <InvestorTab bike={bike} />}
 
-      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-slate-200 lg:relative lg:bg-transparent lg:border-0 lg:p-0 z-50">
-        <div className="flex gap-2 max-w-2xl mx-auto">
-          <button className="flex-1 py-2 px-4 bg-accent text-white rounded-lg font-semibold text-sm flex items-center justify-center gap-2 hover:bg-accent-dark transition-colors">
-            <Edit className="w-4 h-4" /> 
-            <span>Edit Bike</span>
-          </button>
-          <button className="flex-1 py-2 px-4 border border-red-200 text-red-600 rounded-lg font-semibold text-sm flex items-center justify-center gap-2 hover:bg-red-50 transition-colors">
-            <Trash2 className="w-4 h-4" />
-            <span>Delete</span>
-          </button>
+      {activeTab === 'damage' && (
+        <div className="space-y-4">
+          <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-slate-700 flex items-center gap-2">
+                <AlertTriangle className="w-5 h-5 text-accent" /> Damage History
+              </h3>
+              <button 
+                onClick={() => { setEditingDamage(null); setShowDamageModal(true); }}
+                className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
+              >
+                <Plus className="w-4 h-4" /> Add Damage
+              </button>
+            </div>
+
+            {(bike.damageHistory || []).length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-50">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Reported By</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Est. Cost</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actual Cost</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {bike.damageHistory?.map(damage => (
+                      <tr key={damage.id} className="hover:bg-slate-50">
+                        <td className="px-4 py-3 text-sm text-slate-600">{damage.date}</td>
+                        <td className="px-4 py-3">
+                          <span className="text-sm text-slate-700 capitalize">{damage.type.replace('_', ' ')}</span>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{damage.description}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{damage.reportedBy}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">৳{damage.estimatedCost || 0}</td>
+                        <td className="px-4 py-3 text-sm font-medium text-slate-700">৳{damage.actualCost || '-'}</td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
+                            damage.status === 'repaired' ? 'bg-green-100 text-green-700' :
+                            damage.status === 'under_repair' ? 'bg-amber-100 text-amber-700' :
+                            damage.status === 'claim_rejected' ? 'bg-red-100 text-red-700' :
+                            'bg-slate-100 text-slate-700'
+                          }`}>
+                            {damage.status.replace('_', ' ')}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <div className="flex items-center gap-1">
+                            <button 
+                              onClick={() => { setEditingDamage(damage); setShowDamageModal(true); }}
+                              className="p-2 hover:bg-slate-100 rounded-lg"
+                              title="Edit"
+                            >
+                              <Edit className="w-4 h-4 text-slate-400" />
+                            </button>
+                            <button 
+                              onClick={() => handleDeleteDamage(damage.id)}
+                              className="p-2 hover:bg-red-50 rounded-lg"
+                              title="Delete"
+                            >
+                              <Trash2 className="w-4 h-4 text-red-400" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <AlertTriangle className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+                <p className="text-slate-500">No damage records found</p>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
+
+      {activeTab === 'maintenance' && (
+        <div className="space-y-4">
+          <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-slate-700 flex items-center gap-2">
+                <Wrench className="w-5 h-5 text-accent" /> Maintenance History
+              </h3>
+              <button 
+                onClick={() => { setEditingMaintenance(null); setShowMaintenanceModal(true); }}
+                className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
+              >
+                <Plus className="w-4 h-4" /> Add Maintenance
+              </button>
+            </div>
+
+            {(bike.maintenanceHistory || []).length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-50">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Performed By</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cost</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Next Due</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {bike.maintenanceHistory?.map(maintenance => (
+                      <tr key={maintenance.id} className="hover:bg-slate-50">
+                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.date}</td>
+                        <td className="px-4 py-3">
+                          <span className="text-sm text-slate-700 capitalize">{maintenance.type}</span>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{maintenance.description}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.performedBy}</td>
+                        <td className="px-4 py-3 text-sm font-medium text-slate-700">৳{maintenance.cost}</td>
+                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.nextDueDate || '-'}</td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
+                            maintenance.status === 'completed' ? 'bg-green-100 text-green-700' :
+                            maintenance.status === 'in_progress' ? 'bg-amber-100 text-amber-700' :
+                            'bg-slate-100 text-slate-700'
+                          }`}>
+                            {maintenance.status.replace('_', ' ')}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <div className="flex items-center gap-1">
+                            <button 
+                              onClick={() => { setEditingMaintenance(maintenance); setShowMaintenanceModal(true); }}
+                              className="p-2 hover:bg-slate-100 rounded-lg"
+                              title="Edit"
+                            >
+                              <Edit className="w-4 h-4 text-slate-400" />
+                            </button>
+                            <button 
+                              onClick={() => handleDeleteMaintenance(maintenance.id)}
+                              className="p-2 hover:bg-red-50 rounded-lg"
+                              title="Delete"
+                            >
+                              <Trash2 className="w-4 h-4 text-red-400" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Wrench className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+                <p className="text-slate-500">No maintenance records found</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {showDamageModal && (
+        <DamageModal
+          bike={bike}
+          damage={editingDamage}
+          onClose={() => { setShowDamageModal(false); setEditingDamage(null); }}
+          onSave={(damage) => {
+            if (editingDamage) {
+              handleUpdateDamage(damage);
+            } else {
+              handleAddDamage(damage);
+            }
+          }}
+        />
+      )}
+
+      {showMaintenanceModal && (
+        <MaintenanceModal
+          bike={bike}
+          maintenance={editingMaintenance}
+          onClose={() => { setShowMaintenanceModal(false); setEditingMaintenance(null); }}
+          onSave={(maintenance) => {
+            if (editingMaintenance) {
+              handleUpdateMaintenance(maintenance);
+            } else {
+              handleAddMaintenance(maintenance);
+            }
+          }}
+        />
+      )}
     </div>
   );
 }
@@ -276,7 +611,7 @@ function OverviewTab({ bike }: { bike: Bike }) {
             </div>
           </div>
         </div>
-        
+
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
           <div className="bg-slate-50 rounded-lg p-3">
             <p className="text-xs text-slate-500">Plate Number</p>
@@ -457,9 +792,8 @@ function DocumentsTab({ bike }: { bike: Bike }) {
                     <p className="text-xs text-slate-400">Issued: {doc.issueDate} • Expires: {doc.expiryDate}</p>
                   </div>
                 </div>
-                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
-                  doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
-                }`}>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
+                  }`}>
                   {doc.verified ? <CheckCircle className="w-3 h-3" /> : <Clock3 className="w-3 h-3" />}
                   {doc.verified ? 'Verified' : 'Pending'}
                 </span>
@@ -498,7 +832,7 @@ function RentalTab({ bike }: { bike: Bike }) {
   const getRateDisplay = (type: string, rate: number) => {
     switch (type) {
       case 'single': return `৳${rate}/day`;
-      case 'shared': return `৳${rate/2}+${rate/2} (2 person)`;
+      case 'shared': return `৳${rate / 2}+${rate / 2} (2 person)`;
       case 'rent-to-own': return `৳${rate}/day`;
       default: return `৳${rate}`;
     }
@@ -522,19 +856,18 @@ function RentalTab({ bike }: { bike: Bike }) {
                     <p className="font-medium text-slate-700">{rental.bikerName}</p>
                     <p className="text-xs text-slate-500">ID: {rental.id}</p>
                   </div>
-                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
-                    rental.status === 'active' ? 'bg-green-100 text-green-700' : 
-                    rental.status === 'completed' ? 'bg-blue-100 text-blue-700' : 
-                    'bg-red-100 text-red-700'
-                  }`}>
+                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${rental.status === 'active' ? 'bg-green-100 text-green-700' :
+                      rental.status === 'completed' ? 'bg-blue-100 text-blue-700' :
+                        'bg-red-100 text-red-700'
+                    }`}>
                     {rental.status}
                   </span>
                 </div>
                 <div className="flex flex-wrap gap-3 text-xs">
                   <span className="bg-slate-100 px-2 py-1 rounded text-slate-600">
-                    {rental.type === 'single' ? 'Single (৳350/day)' : 
-                     rental.type === 'shared' ? 'Shared (৳60/day)' : 
-                     'Rent-to-Own (৳450/day)'}
+                    {rental.type === 'single' ? 'Single (৳350/day)' :
+                      rental.type === 'shared' ? 'Shared (৳60/day)' :
+                        'Rent-to-Own (৳450/day)'}
                   </span>
                   <span className="text-slate-500">
                     {rental.startDate} {rental.endDate && `to ${rental.endDate}`}
@@ -619,6 +952,273 @@ function ActivityTab({ bike }: { bike: Bike }) {
   );
 }
 
+function BikerAssignmentTab({ bike }: { bike: Bike }) {
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [rentalPlan, setRentalPlan] = useState<'single' | 'shared' | 'rent-to-own'>('single');
+  const [assignedBikers, setAssignedBikers] = useState<any[]>([]);
+  const [selectedBikerId, setSelectedBikerId] = useState('');
+  const [showAddBikerModal, setShowAddBikerModal] = useState(false);
+  const [newBikerDetails, setNewBikerDetails] = useState({
+    name: '', phone: '', email: '', licenseNumber: '', nidNumber: '', address: '', dailyRate: 0, notes: ''
+  });
+
+  const assignmentHistory = bike.assignmentHistory || [];
+  const activeAssignments = assignmentHistory.filter(a => a.status === 'active');
+
+  const availableBikers = [
+    { id: 'u1', name: 'Karim Ahmed', phone: '01712345678', email: 'karim@email.com', license: 'DL123456', nid: '1234567890' },
+    { id: 'u2', name: 'Sofiq Rahman', phone: '01722345678', email: 'sofiq@email.com', license: 'DL234567', nid: '2345678901' },
+    { id: 'u3', name: 'Rahim Khan', phone: '01732345678', email: 'rahim@email.com', license: 'DL345678', nid: '3456789012' },
+    { id: 'u4', name: 'Jamal Hossain', phone: '01742345678', email: 'jamal@email.com', license: 'DL456789', nid: '4567890123' },
+    { id: 'u5', name: 'Ripon Mia', phone: '01752345678', email: 'ripon@email.com', license: 'DL567890', nid: '5678901234' },
+    { id: 'u6', name: 'Mizanur Rahman', phone: '01762345678', email: 'mizan@email.com', license: 'DL678901', nid: '6789012345' },
+  ];
+
+  const planDetails = {
+    single: { name: 'Rental (Single)', price: '৳50/day', maxBikers: 1 },
+    shared: { name: 'Rental (2 Person Shared)', price: '৳30+30=৳60/day', maxBikers: 2 },
+    'rent-to-own': { name: 'Rent-to-Own', price: '৳45/day', maxBikers: 1 },
+  };
+
+  const handleAddBiker = () => {
+    if (!selectedBikerId) return;
+    const biker = availableBikers.find(b => b.id === selectedBikerId);
+    if (biker && assignedBikers.length < planDetails[rentalPlan].maxBikers) {
+      setAssignedBikers([...assignedBikers, { ...biker, dailyRate: rentalPlan === 'single' ? 50 : rentalPlan === 'shared' ? 30 : 45 }]);
+      setSelectedBikerId('');
+    }
+  };
+
+  const handleRemoveBiker = (id: string) => {
+    setAssignedBikers(assignedBikers.filter(b => b.id !== id));
+  };
+
+  const handleSubmitAssignment = () => {
+    alert(`Assigned ${assignedBikers.length} biker(s) under ${planDetails[rentalPlan].name}!\nTotal Daily Rate: ৳${assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}`);
+    setShowAssignModal(false);
+    setAssignedBikers([]);
+    setRentalPlan('single');
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="font-semibold text-slate-700">Current Biker Assignments</h3>
+          <button
+            onClick={() => setShowAssignModal(true)}
+            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2"
+          >
+            <User className="w-4 h-4" /> Assign Bikers
+          </button>
+        </div>
+
+        {activeAssignments.length > 0 ? (
+          <div className="space-y-3">
+            {activeAssignments.map((assignment, idx) => (
+              <div key={idx} className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+                      <User className="w-6 h-6 text-green-600" />
+                    </div>
+                    <div>
+                      <p className="font-semibold text-slate-700">{assignment.bikerName}</p>
+                      <p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
+                      <p className="text-xs text-slate-400">Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
+                    </div>
+                  </div>
+                  <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">Active</span>
+                </div>
+                {assignment.notes && <p className="mt-2 text-sm text-slate-600">{assignment.notes}</p>}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-8 border-2 border-dashed border-slate-200 rounded-lg">
+            <User className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+            <p className="text-slate-500">No biker currently assigned</p>
+            <button onClick={() => setShowAssignModal(true)} className="mt-2 text-accent hover:underline">Assign bikers</button>
+          </div>
+        )}
+      </div>
+
+      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
+        <h3 className="font-semibold text-slate-700 mb-4">Assignment History</h3>
+        {assignmentHistory.length > 0 ? (
+          <div className="space-y-3">
+            {assignmentHistory.map((assignment, idx) => (
+              <div key={idx} className={`p-4 rounded-lg border ${assignment.status === 'active' ? 'bg-green-50 border-green-200' : 'bg-slate-50 border-slate-200'}`}>
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${assignment.status === 'active' ? 'bg-green-100' : 'bg-slate-200'}`}>
+                      <User className={`w-5 h-5 ${assignment.status === 'active' ? 'text-green-600' : 'text-slate-500'}`} />
+                    </div>
+                    <div>
+                      <p className="font-medium text-slate-700">{assignment.bikerName}</p>
+                      <p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
+                    </div>
+                  </div>
+                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${assignment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-600'}`}>
+                    {assignment.status === 'active' ? 'Active' : 'Completed'}
+                  </span>
+                </div>
+                <div className="mt-2 text-sm text-slate-500 grid grid-cols-2 gap-2">
+                  <p>Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
+                  {assignment.unassignedAt && <p>Unassigned: {new Date(assignment.unassignedAt).toLocaleString()}</p>}
+                </div>
+                {assignment.reason && <p className="mt-1 text-sm text-slate-400">Reason: {assignment.reason}</p>}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-slate-400">
+            <History className="w-10 h-10 mx-auto mb-2 opacity-50" />
+            <p>No assignment history</p>
+          </div>
+        )}
+      </div>
+
+      {showAssignModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+              <h2 className="text-lg font-bold text-slate-800">Assign Bikers to {bike.id}</h2>
+              <button onClick={() => setShowAssignModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+
+            <div className="p-5 overflow-y-auto max-h-[70vh]">
+              <div className="mb-6">
+                <label className="text-sm font-medium text-slate-600 mb-2 block">Choose Rental Plan</label>
+                <div className="grid grid-cols-3 gap-3">
+                  {Object.entries(planDetails).map(([key, plan]) => (
+                    <button
+                      key={key}
+                      onClick={() => { setRentalPlan(key as any); setAssignedBikers([]); }}
+                      className={`p-4 rounded-lg border text-left transition-all ${rentalPlan === key
+                          ? 'border-accent bg-accent/5'
+                          : 'border-slate-200 hover:border-accent/50'
+                        }`}
+                    >
+                      <p className="font-semibold text-slate-700">{plan.name}</p>
+                      <p className="text-sm text-green-600 font-medium">{plan.price}</p>
+                      <p className="text-xs text-slate-500 mt-1">Max {plan.maxBikers} biker{plan.maxBikers > 1 ? 's' : ''}</p>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="mb-4">
+                <label className="text-sm font-medium text-slate-600 mb-2 block">
+                  Add Biker{rentalPlan === 'shared' ? 's (Shared Rental)' : ''} ({assignedBikers.length}/{planDetails[rentalPlan].maxBikers})
+                </label>
+                {assignedBikers.length < planDetails[rentalPlan].maxBikers ? (
+                  <div className="flex gap-2">
+                    <select
+                      value={selectedBikerId}
+                      onChange={(e) => setSelectedBikerId(e.target.value)}
+                      className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    >
+                      <option value="">Select biker</option>
+                      {availableBikers.filter(b => !assignedBikers.some(ab => ab.id === b.id)).map(b => (
+                        <option key={b.id} value={b.id}>{b.name} - {b.phone}</option>
+                      ))}
+                    </select>
+                    <button
+                      onClick={handleAddBiker}
+                      disabled={!selectedBikerId}
+                      className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark disabled:opacity-50"
+                    >
+                      Add
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-sm text-green-600">Maximum bikers assigned for this plan</p>
+                )}
+              </div>
+
+              {assignedBikers.length > 0 && (
+                <div className="space-y-3 mb-4">
+                  {assignedBikers.map((biker, idx) => (
+                    <div key={idx} className="p-4 bg-slate-50 rounded-lg border border-slate-200">
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                            <User className="w-6 h-6 text-blue-600" />
+                          </div>
+                          <div>
+                            <p className="font-semibold text-slate-700">{biker.name}</p>
+                            <p className="text-sm text-slate-500">{biker.phone}</p>
+                            <p className="text-xs text-slate-400">{biker.email}</p>
+                          </div>
+                        </div>
+                        <button onClick={() => handleRemoveBiker(biker.id)} className="p-1 hover:bg-red-50 rounded">
+                          <X className="w-4 h-4 text-red-500" />
+                        </button>
+                      </div>
+                      <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
+                        <div>
+                          <label className="text-xs text-slate-400">Daily Rate</label>
+                          <input
+                            type="number"
+                            value={biker.dailyRate}
+                            onChange={(e) => {
+                              const updated = [...assignedBikers];
+                              updated[idx].dailyRate = Number(e.target.value);
+                              setAssignedBikers(updated);
+                            }}
+                            className="w-full px-2 py-1 border border-slate-200 rounded text-sm"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-xs text-slate-400">License</label>
+                          <p className="text-slate-600">{biker.license}</p>
+                        </div>
+                      </div>
+                      <div className="mt-2">
+                        <label className="text-xs text-slate-400 block">Notes</label>
+                        <input
+                          type="text"
+                          placeholder="Additional notes..."
+                          className="w-full px-2 py-1 border border-slate-200 rounded text-sm"
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {assignedBikers.length > 0 && (
+                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-semibold text-slate-700">Total Daily Rate:</span>
+                    <span className="text-xl font-bold text-green-600">
+                      ৳{assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}/day
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
+              <button onClick={() => setShowAssignModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
+<button 
+                onClick={handleSubmitAssignment}
+                disabled={assignedBikers.length === 0}
+                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
+              >
+                Assign {assignedBikers.length} Biker{assignedBikers.length !== 1 ? 's' : ''}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function InvestorTab({ bike }: { bike: Bike }) {
   return (
     <div className="space-y-4">
@@ -635,10 +1235,16 @@ function InvestorTab({ bike }: { bike: Bike }) {
               <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                 <User2 className="w-6 h-6 text-purple-600" />
               </div>
-              <div>
+              <div className="flex-1">
                 <p className="font-semibold text-slate-700">{bike.investorName || 'Investor'}</p>
                 <p className="text-sm text-slate-500">ID: {bike.investorId}</p>
               </div>
+              <Link 
+                href={`/admin/investors/${bike.investorId}`}
+                className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 flex items-center gap-2"
+              >
+                <ExternalLink className="w-4 h-4" /> View Investor
+              </Link>
             </div>
 
             <div className="grid grid-cols-2 gap-3">
@@ -657,8 +1263,8 @@ function InvestorTab({ bike }: { bike: Bike }) {
               <div className="bg-slate-50 rounded-lg p-3">
                 <p className="text-xs text-slate-500">ROI</p>
                 <p className="font-semibold text-amber-600">
-                  {bike.purchasePrice && bike.totalEarnings 
-                    ? ((bike.totalEarnings / bike.purchasePrice) * 100).toFixed(1) 
+                  {bike.purchasePrice && bike.totalEarnings
+                    ? ((bike.totalEarnings / bike.purchasePrice) * 100).toFixed(1)
                     : 0}%
                 </p>
               </div>
@@ -686,4 +1292,267 @@ function InvestorTab({ bike }: { bike: Bike }) {
       </div>
     </div>
   );
+}
+
+function DamageModal({ bike, damage, onClose, onSave }: { bike: Bike; damage: DamageRecord | null; onClose: () => void; onSave: (damage: DamageRecord) => void }) {
+  const [formData, setFormData] = useState({
+    id: damage?.id || `DMG${Date.now()}`,
+    date: damage?.date || new Date().toISOString().split('T')[0],
+    type: damage?.type || 'accident',
+    description: damage?.description || '',
+    reportedBy: damage?.reportedBy || '',
+    reportedAt: damage?.reportedAt || new Date().toISOString().replace('T', ' ').slice(0, 16),
+    estimatedCost: damage?.estimatedCost || 0,
+    actualCost: damage?.actualCost || 0,
+    status: damage?.status || 'reported',
+  });
+
+  const damageTypes = [
+    { value: 'accident', label: 'Accident' },
+    { value: 'theft', label: 'Theft' },
+    { value: 'natural', label: 'Natural Disaster' },
+    { value: 'wear_tear', label: 'Wear & Tear' },
+    { value: 'other', label: 'Other' },
+  ];
+
+  const statusOptions = [
+    { value: 'reported', label: 'Reported' },
+    { value: 'under_repair', label: 'Under Repair' },
+    { value: 'repaired', label: 'Repaired' },
+    { value: 'claim_rejected', label: 'Claim Rejected' },
+  ];
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData as DamageRecord);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-hidden">
+        <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+          <h2 className="text-lg font-bold text-slate-800">{damage ? 'Edit Damage Record' : 'Add Damage Record'}</h2>
+          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
+            <input
+              type="date"
+              value={formData.date}
+              onChange={(e) => setFormData({ ...formData, date: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
+            <select
+              value={formData.type}
+              onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+            >
+              {damageTypes.map(t => (
+                <option key={t.value} value={t.value}>{t.label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
+            <textarea
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              rows={3}
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Reported By</label>
+            <input
+              type="text"
+              value={formData.reportedBy}
+              onChange={(e) => setFormData({ ...formData, reportedBy: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-sm font-medium text-slate-600 mb-1 block">Estimated Cost (৳)</label>
+              <input
+                type="number"
+                value={formData.estimatedCost}
+                onChange={(e) => setFormData({ ...formData, estimatedCost: Number(e.target.value) })}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium text-slate-600 mb-1 block">Actual Cost (৳)</label>
+              <input
+                type="number"
+                value={formData.actualCost}
+                onChange={(e) => setFormData({ ...formData, actualCost: Number(e.target.value) })}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
+            <select
+              value={formData.status}
+              onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+            >
+              {statusOptions.map(s => (
+                <option key={s.value} value={s.value}>{s.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex justify-end gap-3 pt-4">
+            <button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+              Cancel
+            </button>
+            <button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
+              {damage ? 'Update' : 'Add'} Record
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function MaintenanceModal({ bike, maintenance, onClose, onSave }: { bike: Bike; maintenance: MaintenanceRecord | null; onClose: () => void; onSave: (maintenance: MaintenanceRecord) => void }) {
+  const [formData, setFormData] = useState({
+    id: maintenance?.id || `MNT${Date.now()}`,
+    date: maintenance?.date || new Date().toISOString().split('T')[0],
+    type: maintenance?.type || 'routine',
+    description: maintenance?.description || '',
+    performedBy: maintenance?.performedBy || '',
+    cost: maintenance?.cost || 0,
+    nextDueDate: maintenance?.nextDueDate || '',
+    status: maintenance?.status || 'completed',
+  });
+
+  const maintenanceTypes = [
+    { value: 'routine', label: 'Routine Service' },
+    { value: 'battery', label: 'Battery' },
+    { value: 'tire', label: 'Tire' },
+    { value: 'brake', label: 'Brake' },
+    { value: 'engine', label: 'Engine' },
+    { value: 'electrical', label: 'Electrical' },
+    { value: 'other', label: 'Other' },
+  ];
+
+  const statusOptions = [
+    { value: 'scheduled', label: 'Scheduled' },
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'completed', label: 'Completed' },
+  ];
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData as MaintenanceRecord);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-hidden">
+        <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+          <h2 className="text-lg font-bold text-slate-800">{maintenance ? 'Edit Maintenance Record' : 'Add Maintenance Record'}</h2>
+          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
+            <input
+              type="date"
+              value={formData.date}
+              onChange={(e) => setFormData({ ...formData, date: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
+            <select
+              value={formData.type}
+              onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+            >
+              {maintenanceTypes.map(t => (
+                <option key={t.value} value={t.value}>{t.label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
+            <textarea
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              rows={3}
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Performed By</label>
+            <input
+              type="text"
+              value={formData.performedBy}
+              onChange={(e) => setFormData({ ...formData, performedBy: e.target.value })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-sm font-medium text-slate-600 mb-1 block">Cost (৳)</label>
+              <input
+                type="number"
+                value={formData.cost}
+                onChange={(e) => setFormData({ ...formData, cost: Number(e.target.value) })}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                required
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium text-slate-600 mb-1 block">Next Due Date</label>
+              <input
+                type="date"
+                value={formData.nextDueDate}
+                onChange={(e) => setFormData({ ...formData, nextDueDate: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
+            <select
+              value={formData.status}
+              onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+            >
+              {statusOptions.map(s => (
+                <option key={s.value} value={s.value}>{s.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex justify-end gap-3 pt-4">
+            <button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+              Cancel
+            </button>
+            <button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
+              {maintenance ? 'Update' : 'Add'} Record
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/app/admin/investors/[id]/page.tsx b/src/app/admin/investors/[id]/page.tsx
index a2e1655..a8208b2 100644
--- a/src/app/admin/investors/[id]/page.tsx
+++ b/src/app/admin/investors/[id]/page.tsx
@@ -8,7 +8,7 @@ import type { Investor } from '@/data/mockData';
 import { 
   ArrowLeft, Wallet, TrendingUp, Banknote, Calendar, Phone, Mail, MapPin, Edit, Trash2, Plus, X, Bike, 
   User, FileText, CreditCard, DollarSign, Clock, ChevronDown, ExternalLink, Download, Upload, 
-  AlertTriangle, Shield, Star, CheckCircle, XCircle, Search, Filter
+  AlertTriangle, Shield, Star, CheckCircle, XCircle, Search, Filter, BookOpen, ArrowRight, Printer
 } from 'lucide-react';
 
 const statusColors: Record<string, string> = {
@@ -54,6 +54,10 @@ export default function InvestorDetailPage() {
   const [showAssignBikeModal, setShowAssignBikeModal] = useState(false);
   const [selectedBikeId, setSelectedBikeId] = useState('');
   const [showCreateInvestmentModal, setShowCreateInvestmentModal] = useState(false);
+  const [showInvoiceModal, setShowInvoiceModal] = useState(false);
+  const [showJournalModal, setShowJournalModal] = useState(false);
+  const [selectedInvoice, setSelectedInvoice] = useState<any>(null);
+  const [investorJournals, setInvestorJournals] = useState<any[]>([]);
   const [showBankModal, setShowBankModal] = useState(false);
   const [showMobileBankingModal, setShowMobileBankingModal] = useState(false);
   const [showTaxModal, setShowTaxModal] = useState(false);
@@ -101,8 +105,40 @@ export default function InvestorDetailPage() {
   };
 
   const handleCreateInvestment = () => {
-    const invId = `ip${Date.now()}`;
-    const transactionId = `INV/${new Date().getFullYear()}/${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
+    const invId = `INV-${Date.now()}`;
+    const year = new Date().getFullYear();
+    const transactionRef = newInvestment.transactionReference || `INV/${year}/${String(investor.investments.length + 1).padStart(4, '0')}`;
+    
+    const getDebitAccount = (method: string) => {
+      switch (method) {
+        case 'bank': return { code: '1200', name: 'Bank - City Bank' };
+        case 'cash': return { code: '1100', name: 'Cash in Hand' };
+        case 'mobile': return { code: '1300', name: 'bKash Business' };
+        case 'cheque': return { code: '1410', name: 'Cheque Receivable' };
+        default: return { code: '1200', name: 'Bank - City Bank' };
+      }
+    };
+    
+    const debitAccount = getDebitAccount(newInvestment.paymentMethod);
+    
+    const journalEntry = {
+      entryId: `JE-${Date.now()}`,
+      date: newInvestment.startDate,
+      reference: transactionRef,
+      description: `${investor.name} - ${newInvestment.planName}`,
+      entries: [
+        { accountCode: debitAccount.code, accountName: debitAccount.name, debit: newInvestment.totalInvestment, credit: 0 },
+        { accountCode: '2200', accountName: 'Investor Liabilities', debit: 0, credit: newInvestment.totalInvestment },
+      ],
+      isAuto: true,
+      sourceType: 'investor_funding',
+      createdAt: new Date().toISOString(),
+      type: 'investment',
+      amount: newInvestment.totalInvestment,
+      paymentMethod: newInvestment.paymentMethod
+    };
+    
+    setInvestorJournals([journalEntry, ...investorJournals]);
     
     console.log('Creating Investment:', {
       id: invId,
@@ -110,23 +146,26 @@ export default function InvestorDetailPage() {
       ...newInvestment,
       actualEarnings: 0,
       status: 'active' as const,
-      transactionId: transactionId,
+      transactionId: transactionRef,
       createdAt: new Date().toISOString()
     });
     
-    console.log('Accounting Entry:', {
-      entryId: `AC-${Date.now()}`,
-      type: 'investment_created',
-      investorId: investor.id,
-      investmentId: invId,
-      amount: newInvestment.totalInvestment,
-      debitAccount: 'Investment Asset - Investor',
-      creditAccount: newInvestment.paymentMethod === 'bank' ? 'Bank Account' : 'Cash Account',
-      transactionRef: transactionId,
-      createdAt: new Date().toISOString()
-    });
-    
-    alert(`Investment created successfully!\n\nInvestment ID: ${invId}\nTransaction Ref: ${transactionId}\nAmount: ৳${newInvestment.totalInvestment.toLocaleString()}\n\nAccounting entries have been logged.`);
+    alert(`Investment created successfully!
+
+Investor: ${investor.name}
+Investment ID: ${invId}
+Transaction Ref: ${transactionRef}
+Amount: ৳${newInvestment.totalInvestment.toLocaleString()}
+
+Accounting Entry Created (Auto-Journal):
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Date: ${newInvestment.startDate}
+Ref: ${transactionRef}
+Description: ${investor.name} - ${newInvestment.planName}
+
+Debit (Dr): ${debitAccount.name}    ৳${newInvestment.totalInvestment.toLocaleString()}
+Credit (Cr): Investor Liability  ৳${newInvestment.totalInvestment.toLocaleString()}
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
     setShowCreateInvestmentModal(false);
     setNewInvestment({
       planName: '',
@@ -745,7 +784,59 @@ export default function InvestorDetailPage() {
                         </div>
                         <div>
                           <p className="text-sm font-medium text-slate-700">{tx.description}</p>
-                          <p className="text-xs text-slate-400">{tx.createdAt} {tx.referenceNumber && `• Ref: ${tx.referenceNumber}`}</p>
+                          <div className="flex items-center gap-2">
+                            <p className="text-xs text-slate-400">{tx.createdAt}</p>
+                            {tx.referenceNumber && (
+                              <button 
+                                onClick={() => {
+                                  const getAccountingInfo = (type: string, amount: number) => {
+                                    if (type === 'investment') {
+                                      return {
+                                        debitAccount: 'Bank - City Bank (1200)',
+                                        creditAccount: 'Investor Liabilities (2200)',
+                                        amount: amount
+                                      };
+                                    } else if (type === 'earning' || type === 'bike_earning' || type === 'investment_return') {
+                                      return {
+                                        debitAccount: 'Investor Liabilities (2200)',
+                                        creditAccount: 'Rental Income (4200)',
+                                        amount: amount
+                                      };
+                                    } else if (type === 'withdrawal') {
+                                      return {
+                                        debitAccount: 'Investor Liabilities (2200)',
+                                        creditAccount: 'Bank - City Bank (1200)',
+                                        amount: amount
+                                      };
+                                    }
+                                    return {
+                                      debitAccount: 'N/A',
+                                      creditAccount: 'N/A',
+                                      amount: amount
+                                    };
+                                  };
+                                  const accounting = getAccountingInfo(tx.type, tx.amount);
+                                  setSelectedInvoice({
+                                    reference: tx.referenceNumber,
+                                    date: tx.createdAt,
+                                    type: tx.type,
+                                    amount: tx.amount,
+                                    description: tx.description,
+                                    status: tx.status,
+                                    investorName: investor.name,
+                                    investorId: investor.id,
+                                    debitAccount: accounting.debitAccount,
+                                    creditAccount: accounting.creditAccount
+                                  });
+                                  setShowInvoiceModal(true);
+                                }}
+                                className="text-xs text-investor hover:underline flex items-center gap-1"
+                              >
+                                • Ref: {tx.referenceNumber}
+                                <BookOpen className="w-3 h-3" />
+                              </button>
+                            )}
+                          </div>
                         </div>
                       </div>
                       <div className="text-right">
@@ -1034,14 +1125,52 @@ export default function InvestorDetailPage() {
                 />
               </div>
 
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                <h4 className="font-semibold text-blue-800 mb-2">Accounting Entries to be Created:</h4>
-                <div className="text-sm text-blue-700 space-y-1">
-                  <p>• Debit: Investment Asset - Investor ({newInvestment.totalInvestment ? `৳${newInvestment.totalInvestment.toLocaleString()}` : '৳0'})</p>
-                  <p>• Credit: {newInvestment.paymentMethod === 'bank' ? 'Bank Account' : newInvestment.paymentMethod === 'mobile' ? 'Mobile Wallet' : newInvestment.paymentMethod === 'cash' ? 'Cash Account' : 'Cheque Receivable'} ({newInvestment.totalInvestment ? `৳${newInvestment.totalInvestment.toLocaleString()}` : '৳0'})</p>
-                  <p>• Transaction ID will be auto-generated</p>
-                </div>
-              </div>
+              {(() => {
+                const getDebitAccountDisplay = (method: string) => {
+                  switch (method) {
+                    case 'bank': return 'Bank - City Bank (1200)';
+                    case 'cash': return 'Cash in Hand (1100)';
+                    case 'mobile': return 'bKash Business (1300)';
+                    case 'cheque': return 'Cheque Receivable (1410)';
+                    default: return 'Bank - City Bank (1200)';
+                  }
+                };
+                const debitDisplay = getDebitAccountDisplay(newInvestment.paymentMethod);
+                
+                return (
+                  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                    <div className="flex items-center gap-2 mb-3">
+                      <TrendingUp className="w-5 h-5 text-green-600" />
+                      <h4 className="font-semibold text-green-800">Auto-Journal Entry</h4>
+                    </div>
+                    <div className="text-sm text-green-700 space-y-2">
+                      <p className="text-xs text-green-600 uppercase font-medium mb-2">Double EntryAccounting</p>
+                      <div className="flex items-center justify-between bg-white rounded p-2 border border-green-100">
+                        <div>
+                          <p className="font-medium">Debit (Dr)</p>
+                          <p className="text-xs text-green-600">{debitDisplay}</p>
+                        </div>
+                        <p className="font-bold text-green-700">৳{newInvestment.totalInvestment.toLocaleString()}</p>
+                      </div>
+                      <div className="flex items-center justify-center py-1">
+                        <div className="w-6 h-6 rounded-full bg-green-200 flex items-center justify-center">
+                          <span className="text-green-600 text-xs">▼</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center justify-between bg-white rounded p-2 border border-green-100">
+                        <div>
+                          <p className="font-medium">Credit (Cr)</p>
+                          <p className="text-xs text-green-600">Investor Liabilities (2200)</p>
+                        </div>
+                        <p className="font-bold text-green-700">৳{newInvestment.totalInvestment.toLocaleString()}</p>
+                      </div>
+                      <div className="mt-3 pt-2 border-t border-green-200">
+                        <p className="text-xs text-green-600">Transaction Ref: Auto Generate</p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })()}
             </div>
 
             <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
@@ -1212,6 +1341,202 @@ export default function InvestorDetailPage() {
           </div>
         </div>
       )}
+
+      {showJournalModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+              <h2 className="text-lg font-bold text-slate-800">Journal Records</h2>
+              <button onClick={() => setShowJournalModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-5 overflow-y-auto flex-1">
+              {investorJournals.length > 0 ? (
+                <div className="space-y-3">
+                  {investorJournals.map((journal, idx) => (
+                    <div key={idx} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs font-mono text-slate-500">{journal.reference}</span>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700">Auto</span>
+                        </div>
+                        <span className="text-xs text-slate-500">{journal.date}</span>
+                      </div>
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between bg-white p-2 rounded border border-slate-200">
+                          <div>
+                            <p className="text-sm font-medium">Debit (Dr)</p>
+                            <p className="text-xs text-slate-500">Bank - City Bank (1200)</p>
+                          </div>
+                          <p className="font-bold text-green-600">৳{journal.amount.toLocaleString()}</p>
+                        </div>
+                        <div className="flex items-center justify-center py-0.5">
+                          <ArrowRight className="w-4 h-4 text-slate-400 rotate-90" />
+                        </div>
+                        <div className="flex items-center justify-between bg-white p-2 rounded border border-slate-200">
+                          <div>
+                            <p className="text-sm font-medium">Credit (Cr)</p>
+                            <p className="text-xs text-slate-500">Investor Liabilities (2200)</p>
+                          </div>
+                          <p className="font-bold text-red-600">৳{journal.amount.toLocaleString()}</p>
+                        </div>
+                      </div>
+                      <div className="mt-2 pt-2 border-t border-slate-200 text-xs text-slate-500">
+                        {journal.description}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-slate-400">
+                  <BookOpen className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                  <p>No journal records yet</p>
+                  <p className="text-sm">Create an investment to see auto-journal entries</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showInvoiceModal && selectedInvoice && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+              <h2 className="text-lg font-bold text-slate-800">Invoice</h2>
+              <button onClick={() => setShowInvoiceModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            
+            <div className="p-6" id="invoice-content">
+              <div className="text-center border-b border-slate-200 pb-4 mb-4">
+                <h1 className="text-xl font-extrabold text-investor">JAIBEN Mobility Ltd</h1>
+                <p className="text-xs text-slate-500">EV Rental & Investment Company</p>
+              </div>
+              
+              <div className="flex justify-between mb-4">
+                <div>
+                  <p className="text-xs text-slate-500">Invoice No</p>
+                  <p className="text-sm font-medium">{selectedInvoice.reference}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-xs text-slate-500">Date</p>
+                  <p className="text-sm font-medium">{selectedInvoice.date}</p>
+                </div>
+              </div>
+              
+              <div className="mb-4">
+                <p className="text-xs text-slate-500">Investor</p>
+                <p className="text-sm font-medium">{selectedInvoice.investorName}</p>
+                <p className="text-xs text-slate-400">{selectedInvoice.investorId}</p>
+              </div>
+              
+              <table className="w-full mb-4">
+                <thead>
+                  <tr className="border-b border-slate-200">
+                    <th className="text-left py-2 text-xs text-slate-500">Description</th>
+                    <th className="text-right py-2 text-xs text-slate-500">Amount</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="border-b border-slate-100">
+                    <td className="py-3 text-sm">{selectedInvoice.description}</td>
+                    <td className="py-3 text-sm text-right font-medium">৳{selectedInvoice.amount.toLocaleString()}</td>
+                  </tr>
+                </tbody>
+                <tfoot>
+                  <tr>
+                    <td className="py-2 text-sm font-medium">Total</td>
+                    <td className="py-2 text-sm font-bold text-right">৳{selectedInvoice.amount.toLocaleString()}</td>
+                  </tr>
+                </tfoot>
+              </table>
+              
+              <div className="flex justify-between mb-2">
+                <span className="text-xs text-slate-500">Status</span>
+                <span className={`text-xs px-2 py-1 rounded-full ${
+                  selectedInvoice.status === 'completed' ? 'bg-green-100 text-green-700' : 
+                  selectedInvoice.status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-700'
+                }`}>
+                  {selectedInvoice.status}
+                </span>
+              </div>
+              
+              <div className="mt-4 pt-4 border-t border-slate-200">
+                <p className="text-xs text-slate-500 mb-2">Double Entry Accounting (Journal)</p>
+                <div className="bg-slate-50 rounded-lg p-3 border border-slate-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <div>
+                      <p className="text-xs font-medium">Debit (Dr)</p>
+                      <p className="text-xs text-slate-500">{selectedInvoice.debitAccount || 'N/A'}</p>
+                    </div>
+                    <p className="text-sm font-bold">৳{selectedInvoice.amount.toLocaleString()}</p>
+                  </div>
+                  <div className="flex items-center justify-center py-1">
+                    <ArrowRight className="w-4 h-4 text-slate-400 rotate-90" />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-xs font-medium">Credit (Cr)</p>
+                      <p className="text-xs text-slate-500">{selectedInvoice.creditAccount || 'N/A'}</p>
+                    </div>
+                    <p className="text-sm font-bold">৳{selectedInvoice.amount.toLocaleString()}</p>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="mt-6 pt-4 border-t border-slate-200 text-center">
+                <p className="text-xs text-slate-400">Thank you for your investment!</p>
+                <p className="text-xs text-slate-400">Generated on {new Date().toLocaleDateString()}</p>
+              </div>
+            </div>
+            
+            <div className="p-5 border-t border-slate-100 flex justify-between">
+              <button 
+                onClick={() => window.print()} 
+                className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark flex items-center gap-2"
+              >
+                <Printer className="w-4 h-4" /> Print
+              </button>
+              <button 
+                onClick={() => {
+                  import('jspdf').then(jsPDF => {
+                    const doc = new jsPDF.default();
+                    doc.setFontSize(18);
+                    doc.setTextColor(6, 95, 70);
+                    doc.text('JAIBEN Mobility Ltd', 20, 20);
+                    doc.setFontSize(12);
+                    doc.setTextColor(0);
+                    doc.text('Invoice: ' + selectedInvoice.reference, 20, 30);
+                    doc.text('Date: ' + selectedInvoice.date, 20, 38);
+                    doc.text('Investor: ' + selectedInvoice.investorName, 20, 46);
+                    doc.text('Description: ' + selectedInvoice.description, 20, 54);
+                    doc.text('Amount: ৳' + selectedInvoice.amount.toLocaleString(), 20, 64);
+                    doc.text('Status: ' + selectedInvoice.status, 20, 72);
+                    if (selectedInvoice.debitAccount) {
+                      doc.setFontSize(10);
+                      doc.setTextColor(100);
+                      doc.text('Double Entry Accounting:', 20, 85);
+                      doc.text('Dr: ' + selectedInvoice.debitAccount + '  ৳' + selectedInvoice.amount.toLocaleString(), 20, 93);
+                      doc.text('Cr: ' + selectedInvoice.creditAccount + '  ৳' + selectedInvoice.amount.toLocaleString(), 20, 101);
+                    }
+                    doc.setFontSize(9);
+                    doc.setTextColor(150);
+                    doc.text('Thank you for your investment!', 20, 115);
+                    doc.save(`invoice-${selectedInvoice.reference}.pdf`);
+                  });
+                }} 
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2"
+              >
+                <Download className="w-4 h-4" /> PDF
+              </button>
+              <button onClick={() => setShowInvoiceModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Close</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/admin/kyc/[id]/page.tsx b/src/app/admin/kyc/[id]/page.tsx
new file mode 100644
index 0000000..28434eb
--- /dev/null
+++ b/src/app/admin/kyc/[id]/page.tsx
@@ -0,0 +1,695 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import {
+  Shield, Check, Clock, Bike, User, Phone,
+  MapPin, FileText, Image, DollarSign, Wrench, Battery,
+  CheckCircle, XCircle, ArrowLeft, Save, Printer, Send,
+  MessageSquare, Edit, UserCheck, Wallet, Store, Globe, Calendar, Briefcase, Plus, Upload
+} from 'lucide-react';
+
+type ApplicationSource = 'app' | 'web' | 'walkin' | 'referral';
+type KYCType = 'biker' | 'investor' | 'shop' | 'merchant' | 'general';
+type RiderPlan = 'daily_rent' | 'weekly_rent' | 'monthly_rent' | 'rent_to_own' | 'share_ev';
+type VerificationStage = 'application' | 'document_collection' | 'risk_check' | 'plan_selection' | 'payment' | 'agreement' | 'allocated' | 'active';
+
+interface Document {
+  id: string;
+  name: string;
+  status: 'pending' | 'uploaded' | 'approved' | 'rejected';
+  imageUrl?: string;
+  rejectedReason?: string;
+  uploadedAt?: string;
+}
+
+interface Request {
+  id: string;
+  applicationSource: ApplicationSource;
+  sourceDetails?: string;
+  name: string;
+  phone: string;
+  email: string;
+  type: KYCType;
+  status: 'pending' | 'documents_needed' | 'under_review' | 'risk_check' | 'approved' | 'rejected';
+  verificationStage: VerificationStage;
+  submittedAt: string;
+  location: string;
+  address: string;
+  requiredDocuments: Document[];
+  riderPlan?: RiderPlan;
+  nomineeDetails?: { name: string; phone: string; relationship: string; nid: string };
+  employmentInfo?: { company: string; dailyEarning: number; whyEV: string; experience: string };
+  riskCheck?: { nidVerified: boolean; nomineeNidVerified: boolean; deliveryPlatformStatus: string; paymentReliability: string; notes: string };
+  agreement?: { dailyRentObligation: number; latePenalty: number; signedAt?: string };
+  evAllocation?: { evId: string; bikeModel: string; batteryId: string; hubLocation: string; gpsActivated: boolean };
+  securityDeposit?: number;
+  advancePayment?: number;
+  paymentMethod?: 'bank' | 'wallet' | 'cash';
+  bikeRequested?: string;
+  scheduleDate?: string;
+  notes: string[];
+  messageHistory: { date: string; message: string; from: 'admin' | 'user' }[];
+}
+
+const mockRequests: Request[] = [
+  {
+    id: 'REQ001',
+    applicationSource: 'app',
+    name: 'Rahim Ahmed',
+    phone: '01712345678',
+    email: 'rahim@email.com',
+    type: 'biker',
+    status: 'pending',
+    verificationStage: 'application',
+    submittedAt: '2024-03-20',
+    location: 'Gulshan, Dhaka',
+    address: 'House 12, Road 5, Gulshan 1',
+    requiredDocuments: [
+      { id: 'd1', name: 'NID Front', status: 'uploaded', uploadedAt: '2024-03-20' },
+      { id: 'd2', name: 'NID Back', status: 'uploaded', uploadedAt: '2024-03-20' },
+      { id: 'd3', name: 'Driving License', status: 'pending' },
+      { id: 'd4', name: 'Profile Photo', status: 'uploaded', uploadedAt: '2024-03-20' },
+    ],
+    riderPlan: 'daily_rent',
+    employmentInfo: { company: 'Foodpanda', dailyEarning: 2500, whyEV: 'Low maintenance, good for delivery', experience: '3 years bike riding' },
+    nomineeDetails: { name: 'Fatema', phone: '01712345699', relationship: 'Wife', nid: '1234567890123' },
+    securityDeposit: 5000,
+    advancePayment: 500,
+    bikeRequested: 'AIMA Lightning',
+    notes: ['Downloaded app and applied through mobile'],
+    messageHistory: [],
+  },
+  {
+    id: 'REQ002',
+    applicationSource: 'walkin',
+    sourceDetails: 'Gulshan Hub',
+    name: 'Karim Hasan',
+    phone: '01712345679',
+    email: 'karim@email.com',
+    type: 'investor',
+    status: 'documents_needed',
+    verificationStage: 'document_collection',
+    submittedAt: '2024-03-19',
+    location: 'Banani, Dhaka',
+    address: 'Flat 3B, House 22, Banani',
+    requiredDocuments: [
+      { id: 'd5', name: 'NID', status: 'uploaded', uploadedAt: '2024-03-19' },
+      { id: 'd6', name: 'TIN Certificate', status: 'pending' },
+      { id: 'd7', name: 'Bank Statement', status: 'pending' },
+    ],
+    notes: ['Walked in at Gulshan office - referred by current biker'],
+    messageHistory: [],
+  },
+];
+
+const statusColors: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  documents_needed: 'bg-orange-100 text-orange-700',
+  under_review: 'bg-blue-100 text-blue-700',
+  risk_check: 'bg-purple-100 text-purple-700',
+  approved: 'bg-green-100 text-green-700',
+  rejected: 'bg-red-100 text-red-700',
+};
+
+const stageLabels: Record<string, string> = {
+  application: 'Application',
+  document_collection: 'Documents',
+  risk_check: 'Risk Check',
+  plan_selection: 'Plan Selection',
+  payment: 'Payment',
+  agreement: 'Agreement',
+  allocated: 'EV Allocated',
+  active: 'Active',
+};
+
+const sourceLabels: Record<string, string> = {
+  app: 'Mobile App',
+  web: 'Website',
+  walkin: 'Walk-in',
+  referral: 'Referral',
+};
+
+const planLabels: Record<string, string> = {
+  daily_rent: 'Daily Rent',
+  weekly_rent: 'Weekly Rent',
+  monthly_rent: 'Monthly Rent',
+  rent_to_own: 'Rent-to-Own',
+  share_ev: 'Share EV',
+};
+
+const typeIcons: Record<string, any> = {
+  biker: Bike,
+  investor: DollarSign,
+  shop: Store,
+  merchant: User,
+};
+
+export default function KYCDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [request, setRequest] = useState<Request | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<Request>>({});
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [showAddNoteModal, setShowAddNoteModal] = useState(false);
+  const [newNoteText, setNewNoteText] = useState('');
+  const [newMessageText, setNewMessageText] = useState('');
+  const [showAddDocModal, setShowAddDocModal] = useState(false);
+  const [newDocName, setNewDocName] = useState('');
+  const [showUploadDocModal, setShowUploadDocModal] = useState(false);
+  const [uploadDocId, setUploadDocId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const found = mockRequests.find(r => r.id === id);
+    if (found) {
+      setRequest(found);
+      setEditForm(found);
+    }
+  }, [id]);
+
+  if (!request) {
+    return (
+      <div className="p-6 flex items-center justify-center min-h-[50vh]">
+        <div className="text-center">
+          <Shield className="w-16 h-16 text-slate-300 mx-auto mb-4" />
+          <p className="text-slate-500">Request not found</p>
+          <button
+            onClick={() => router.push('/admin/kyc')}
+            className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
+          >
+            Back to KYC
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSaveEdit = () => {
+    setRequest(prev => prev ? { ...prev, ...editForm } : null);
+    setEditMode(false);
+  };
+
+  const handleAddNote = () => {
+    if (!request || !newNoteText.trim()) return;
+    setRequest(prev => prev ? { ...prev, notes: [...prev.notes, newNoteText] } : null);
+    setNewNoteText('');
+    setShowAddNoteModal(false);
+  };
+
+  const handleSendMessage = () => {
+    if (!request || !newMessageText.trim()) return;
+    setRequest(prev => prev ? {
+      ...prev,
+      messageHistory: [...prev.messageHistory, { date: new Date().toISOString().split('T')[0], message: newMessageText, from: 'admin' as const }]
+    } : null);
+    setNewMessageText('');
+    setShowMessageModal(false);
+  };
+
+  const handleAddDocument = () => {
+    if (!request || !newDocName.trim()) return;
+    setRequest(prev => prev ? {
+      ...prev,
+      requiredDocuments: [...prev.requiredDocuments, { id: `doc-${Date.now()}`, name: newDocName, status: 'pending' as const }]
+    } : null);
+    setNewDocName('');
+    setShowAddDocModal(false);
+  };
+
+  const handleApproveDocument = (docId: string) => {
+    if (!request) return;
+    setRequest(prev => prev ? {
+      ...prev,
+      requiredDocuments: prev.requiredDocuments.map(doc =>
+        doc.id === docId ? { ...doc, status: 'approved' as const } : doc
+      )
+    } : null);
+  };
+
+const handleRejectDocument = (docId: string) => {
+    const reason = prompt('Enter rejection reason:');
+    if (reason) {
+      setRequest(prev => prev ? {
+        ...prev,
+        requiredDocuments: prev.requiredDocuments.map(doc =>
+          doc.id === docId ? { ...doc, status: 'rejected' as const, rejectedReason: reason } : doc
+        )
+      } : null);
+    }
+  };
+
+  const handleUploadDocument = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !uploadDocId || !request) return;
+    const imageUrl = URL.createObjectURL(file);
+    setRequest(prev => prev ? {
+      ...prev,
+      requiredDocuments: prev.requiredDocuments.map(doc =>
+        doc.id === uploadDocId ? { ...doc, status: 'uploaded' as const, imageUrl, uploadedAt: new Date().toISOString() } : doc
+      )
+    } : null);
+    setShowUploadDocModal(false);
+  };
+
+  const openUploadModal = (docId: string) => {
+    setUploadDocId(docId);
+    setShowUploadDocModal(true);
+  };
+
+  const TypeIcon = typeIcons[request.type];
+
+  return (
+    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
+      <button
+        onClick={() => router.push('/admin/kyc')}
+        className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
+      >
+        <ArrowLeft className="w-4 h-4" /> Back to KYC
+      </button>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+        <div className="p-6 border-b border-slate-100">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-extrabold text-slate-800">{request.id}</h1>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[request.status]}`}>
+                  {request.status.replace('_', ' ')}
+                </span>
+                {request.type === 'biker' && request.verificationStage && (
+                  <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-cyan-100 text-cyan-700">
+                    {stageLabels[request.verificationStage]}
+                  </span>
+                )}
+              </div>
+              <p className="text-slate-500 mt-1">{request.name} • {request.submittedAt}</p>
+            </div>
+            <div className="flex gap-2">
+              {editMode ? (
+                <>
+                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
+                    <Save className="w-4 h-4" /> Save
+                  </button>
+                  <button onClick={() => { setEditForm(request); setEditMode(false); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                    Cancel
+                  </button>
+                </>
+              ) : (
+                <>
+                  {request.type === 'biker' && request.status !== 'approved' && (
+                    <button 
+                      onClick={() => {
+                        if (confirm('Approve this request and create biker profile?')) {
+                          setRequest(prev => prev ? { ...prev, status: 'approved', verificationStage: 'active' } : null);
+                          alert('Biker created successfully!');
+                        }
+                      }}
+                      className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
+                    >
+                      <Bike className="w-4 h-4" /> Make Biker
+                    </button>
+                  )}
+                  {request.type === 'investor' && request.status !== 'approved' && (
+                    <button 
+                      onClick={() => {
+                        if (confirm('Approve this request and create investor profile?')) {
+                          setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
+                          alert('Investor created successfully!');
+                        }
+                      }}
+                      className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
+                    >
+                      <DollarSign className="w-4 h-4" /> Make Investor
+                    </button>
+                  )}
+                  {request.type === 'shop' && request.status !== 'approved' && (
+                    <button 
+                      onClick={() => {
+                        if (confirm('Approve this request and create shop profile?')) {
+                          setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
+                          alert('Shop created successfully!');
+                        }
+                      }}
+                      className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+                    >
+                      <Store className="w-4 h-4" /> Make Shop
+                    </button>
+                  )}
+                  {request.type === 'merchant' && request.status !== 'approved' && (
+                    <button 
+                      onClick={() => {
+                        if (confirm('Approve this request and create merchant profile?')) {
+                          setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
+                          alert('Merchant created successfully!');
+                        }
+                      }}
+                      className="px-4 py-2 bg-orange-600 text-white rounded-lg text-sm hover:bg-orange-700 flex items-center gap-2"
+                    >
+                      <User className="w-4 h-4" /> Make Merchant
+                    </button>
+                  )}
+                  <button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <Edit className="w-4 h-4" /> Edit
+                  </button>
+                  <button onClick={() => setShowAddNoteModal(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4" /> Note
+                  </button>
+                  <button onClick={() => setShowMessageModal(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <Send className="w-4 h-4" /> Message
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
+                <User className="w-5 h-5" /> Personal Info
+              </h3>
+              {editMode ? (
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    value={editForm.name || ''}
+                    onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+                    placeholder="Full Name"
+                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                  />
+                  <input
+                    type="text"
+                    value={editForm.phone || ''}
+                    onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })}
+                    placeholder="Phone"
+                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                  />
+                  <input
+                    type="email"
+                    value={editForm.email || ''}
+                    onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
+                    placeholder="Email"
+                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                  />
+                  <input
+                    type="text"
+                    value={editForm.location || ''}
+                    onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
+                    placeholder="Location"
+                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                  />
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <div className="flex justify-between"><span className="text-sm text-blue-600">Name</span><span className="text-sm font-medium text-blue-800">{request.name}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-blue-600">Phone</span><span className="text-sm font-medium text-blue-800">{request.phone}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-blue-600">Email</span><span className="text-sm font-medium text-blue-800">{request.email || '-'}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-blue-600">Location</span><span className="text-sm font-medium text-blue-800">{request.location}</span></div>
+                </div>
+              )}
+            </div>
+
+            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
+                <Globe className="w-5 h-5" /> Source
+              </h3>
+              <div className="space-y-2">
+                <div className="flex justify-between"><span className="text-sm text-green-600">Source</span><span className="text-sm font-medium text-green-800">{sourceLabels[request.applicationSource]}</span></div>
+                {request.sourceDetails && <div className="flex justify-between"><span className="text-sm text-green-600">Details</span><span className="text-sm font-medium text-green-800">{request.sourceDetails}</span></div>}
+                <div className="flex justify-between"><span className="text-sm text-green-600">Type</span><span className="text-sm font-medium text-green-800 capitalize flex items-center gap-1"><TypeIcon className="w-4 h-4" /> {request.type}</span></div>
+              </div>
+            </div>
+
+            {request.type === 'biker' && (
+              <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+                <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
+                  <Calendar className="w-5 h-5" /> Plan Selection
+                </h3>
+                {editMode ? (
+                  <div className="space-y-3">
+                    <select
+                      value={editForm.riderPlan || ''}
+                      onChange={(e) => setEditForm({ ...editForm, riderPlan: e.target.value as RiderPlan })}
+                      className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
+                    >
+                      <option value="">Select Plan</option>
+                      <option value="daily_rent">Daily Rent</option>
+                      <option value="weekly_rent">Weekly Rent</option>
+                      <option value="monthly_rent">Monthly Rent</option>
+                      <option value="rent_to_own">Rent-to-Own</option>
+                      <option value="share_ev">Share EV</option>
+                    </select>
+                    <input
+                      type="text"
+                      value={editForm.bikeRequested || ''}
+                      onChange={(e) => setEditForm({ ...editForm, bikeRequested: e.target.value })}
+                      placeholder="Bike Model"
+                      className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
+                    />
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <div className="flex justify-between"><span className="text-sm text-purple-600">Plan</span><span className="text-sm font-medium text-purple-800">{request.riderPlan ? planLabels[request.riderPlan] : '-'}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-purple-600">Bike</span><span className="text-sm font-medium text-purple-800">{request.bikeRequested || '-'}</span></div>
+                    {request.scheduleDate && <div className="flex justify-between"><span className="text-sm text-purple-600">Schedule</span><span className="text-sm font-medium text-purple-800">{request.scheduleDate}</span></div>}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {request.type === 'biker' && request.nomineeDetails && (
+              <div className="bg-pink-50 p-4 rounded-xl border border-pink-100">
+                <h3 className="font-semibold text-pink-800 mb-3 flex items-center gap-2">
+                  <User className="w-5 h-5" /> Nominee Details
+                </h3>
+                {editMode ? (
+                  <div className="space-y-3">
+                    <input
+                      type="text"
+                      value={editForm.nomineeDetails?.name || ''}
+                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, name: e.target.value } })}
+                      placeholder="Nominee Name"
+                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
+                    />
+                    <input
+                      type="text"
+                      value={editForm.nomineeDetails?.phone || ''}
+                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, phone: e.target.value } })}
+                      placeholder="Phone"
+                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
+                    />
+                    <input
+                      type="text"
+                      value={editForm.nomineeDetails?.relationship || ''}
+                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, relationship: e.target.value } })}
+                      placeholder="Relationship"
+                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
+                    />
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <div className="flex justify-between"><span className="text-sm text-pink-600">Name</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.name}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-pink-600">Phone</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.phone}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-pink-600">Relationship</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.relationship}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-pink-600">NID</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.nid}</span></div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-4">
+            <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-semibold text-amber-800 flex items-center gap-2">
+                  <FileText className="w-5 h-5" /> Documents ({request.requiredDocuments.length})
+                </h3>
+                <button
+                  onClick={() => setShowAddDocModal(true)}
+                  className="text-xs px-2 py-1 bg-white rounded border border-amber-200 text-amber-700 hover:bg-amber-100 flex items-center gap-1"
+                >
+                  <Plus className="w-3 h-3" /> Add
+                </button>
+              </div>
+              <div className="space-y-2">
+                {request.requiredDocuments.map((doc) => (
+                  <div key={doc.id} className="flex items-center justify-between p-2 bg-white rounded-lg">
+                    <div className="flex items-center gap-2">
+                      {doc.status === 'pending' && <Clock className="w-4 h-4 text-amber-400" />}
+                      {doc.status === 'uploaded' && <FileText className="w-4 h-4 text-blue-400" />}
+                      {doc.status === 'approved' && <CheckCircle className="w-4 h-4 text-green-500" />}
+                      {doc.status === 'rejected' && <XCircle className="w-4 h-4 text-red-500" />}
+                      <span className="text-sm text-slate-700">{doc.name}</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {doc.status === 'pending' && (
+                        <button onClick={() => openUploadModal(doc.id)} className="p-1 bg-amber-100 text-amber-600 rounded hover:bg-amber-200" title="Upload"><Upload className="w-4 h-4" /></button>
+                      )}
+                      {(doc.status === 'uploaded' || doc.status === 'approved') && doc.imageUrl && (
+                        <button onClick={() => window.open(doc.imageUrl, '_blank')} className="p-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200" title="View"><Image className="w-4 h-4" /></button>
+                      )}
+                      {doc.status === 'uploaded' && (
+                        <>
+                          <button onClick={() => handleApproveDocument(doc.id)} className="p-1 bg-green-100 text-green-600 rounded hover:bg-green-200" title="Approve"><CheckCircle className="w-4 h-4" /></button>
+                          <button onClick={() => handleRejectDocument(doc.id)} className="p-1 bg-red-100 text-red-600 rounded hover:bg-red-200" title="Reject"><XCircle className="w-4 h-4" /></button>
+                        </>
+                      )}
+                      {doc.status === 'approved' && <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full">Approved</span>}
+                      {doc.status === 'rejected' && <span className="text-xs px-2 py-1 bg-red-100 text-red-700 rounded-full">Rejected</span>}
+                      {doc.status === 'pending' && <span className="text-xs px-2 py-1 bg-amber-100 text-amber-700 rounded-full">Pending</span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {request.type === 'biker' && request.employmentInfo && (
+              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+                <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
+                  <Briefcase className="w-5 h-5" /> Employment
+                </h3>
+                <div className="space-y-2">
+                  <div className="flex justify-between"><span className="text-sm text-slate-600">Company</span><span className="text-sm font-medium text-slate-800">{request.employmentInfo.company}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-slate-600">Daily Earning</span><span className="text-sm font-medium text-slate-800">৳{request.employmentInfo.dailyEarning}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-slate-600">Experience</span><span className="text-sm font-medium text-slate-800">{request.employmentInfo.experience}</span></div>
+                </div>
+              </div>
+            )}
+
+            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
+                <MessageSquare className="w-5 h-5" /> Notes ({request.notes.length})
+              </h3>
+              {request.notes.length > 0 ? (
+                <div className="space-y-2">
+                  {request.notes.map((note, idx) => (
+                    <div key={idx} className="text-sm text-slate-600 p-2 bg-white rounded-lg">• {note}</div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-slate-400">No notes yet</p>
+              )}
+            </div>
+
+            <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
+              <h3 className="font-semibold text-indigo-800 mb-3 flex items-center gap-2">
+                <Send className="w-5 h-5" /> Messages ({request.messageHistory.length})
+              </h3>
+              {request.messageHistory.length > 0 ? (
+                <div className="space-y-2 max-h-40 overflow-y-auto">
+                  {request.messageHistory.map((msg, idx) => (
+                    <div key={idx} className={`text-sm p-2 rounded-lg ${msg.from === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-white text-slate-600'}`}>
+                      <span className="font-medium">{msg.from === 'admin' ? 'Admin' : 'User'}:</span> {msg.message}
+                      <span className="text-xs text-slate-400 ml-2">{msg.date}</span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-indigo-400">No messages yet</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showMessageModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Send Message</h3>
+              <button onClick={() => setShowMessageModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <textarea
+                value={newMessageText}
+                onChange={(e) => setNewMessageText(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                rows={4}
+                placeholder="Type message to send to user..."
+              />
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowMessageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleSendMessage} disabled={!newMessageText.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Send</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showAddNoteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Add Note</h3>
+              <button onClick={() => setShowAddNoteModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <textarea
+                value={newNoteText}
+                onChange={(e) => setNewNoteText(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                rows={4}
+                placeholder="Enter note..."
+              />
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowAddNoteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleAddNote} disabled={!newNoteText.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Save</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showAddDocModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Request New Document</h3>
+              <button onClick={() => setShowAddDocModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <input
+                type="text"
+                value={newDocName}
+                onChange={(e) => setNewDocName(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                placeholder="Document name..."
+              />
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowAddDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleAddDocument} disabled={!newDocName.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Add Document</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showUploadDocModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Upload Document</h3>
+              <button onClick={() => setShowUploadDocModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <input
+                type="file"
+                accept="image/*,.pdf"
+                onChange={handleUploadDocument}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm file:mr-4 file:px-4 file:py-2 file:bg-accent file:text-white file:rounded-lg file:border-0 cursor-pointer"
+              />
+              <p className="text-xs text-slate-500 mt-2">Supported: JPG, PNG, PDF</p>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowUploadDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/kyc/page.tsx b/src/app/admin/kyc/page.tsx
index 5dda346..5e39f88 100644
--- a/src/app/admin/kyc/page.tsx
+++ b/src/app/admin/kyc/page.tsx
@@ -1,40 +1,490 @@
-import { Shield, Search, Filter, Check, X, Clock, User, Phone, MapPin, FileText, Eye, Download } from 'lucide-react';
-import { kycRequests } from '@/data/mockData';
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { 
+  Shield, Search, Filter, Check, X, Clock, User, Phone, MapPin, FileText, 
+  Eye, Download, Send, MessageSquare, AlertCircle, DollarSign, Bike, 
+  Store, Users, ChevronDown, ChevronUp, Bell, MoreHorizontal, Image as ImageIcon,
+  Upload, CheckCircle, XCircle, Camera, AlertTriangle, Edit, Globe, Wallet, Calendar,
+  CreditCard, FileSignature, MapPinned, Key, BatteryCharging, Briefcase, Plus
+} from 'lucide-react';
+
+export type ApplicationSource = 'app' | 'web' | 'walkin' | 'referral';
+export type KYCType = 'biker' | 'investor' | 'shop' | 'merchant' | 'general';
+export type RiderPlan = 'daily_rent' | 'weekly_rent' | 'monthly_rent' | 'rent_to_own' | 'share_ev';
+export type VerificationStage = 'application' | 'document_collection' | 'risk_check' | 'plan_selection' | 'payment' | 'agreement' | 'allocated' | 'active';
+
+interface NomineeDetails {
+  name: string;
+  phone: string;
+  relationship: string;
+  nid: string;
+}
+
+interface EmploymentInfo {
+  company: string;
+  dailyEarning: number;
+  whyEV: string;
+  experience: string;
+}
+
+interface RiskCheck {
+  nidVerified: boolean;
+  nomineeNidVerified: boolean;
+  deliveryPlatformStatus: 'active' | 'inactive' | 'suspended';
+  paymentReliability: 'good' | 'fair' | 'poor';
+  notes: string;
+  checkedAt?: string;
+  checkedBy?: string;
+}
+
+interface Agreement {
+  dailyRentObligation: number;
+  latePenalty: number;
+  damageTerms: string;
+  vehicleRules: string;
+  signedAt?: string;
+  signedBy?: string;
+}
+
+interface EVAllocation {
+  evId?: string;
+  bikeModel?: string;
+  batteryId?: string;
+  hubLocation?: string;
+  assignedAt?: string;
+  gpsActivated: boolean;
+  checklist?: string[];
+}
+
+interface Document {
+  id: string;
+  name: string;
+  status: 'pending' | 'uploaded' | 'approved' | 'rejected';
+  imageUrl?: string;
+  rejectedReason?: string;
+  uploadedAt?: string;
+}
+
+interface Request {
+  id: string;
+  applicationSource: ApplicationSource;
+  sourceDetails?: string;
+  name: string;
+  phone: string;
+  email: string;
+  type: KYCType;
+  status: 'pending' | 'documents_needed' | 'under_review' | 'risk_check' | 'approved' | 'rejected';
+  verificationStage: VerificationStage;
+  submittedAt: string;
+  location: string;
+  address: string;
+  requiredDocuments: Document[];
+  
+  riderPlan?: RiderPlan;
+  nomineeDetails?: NomineeDetails;
+  employmentInfo?: EmploymentInfo;
+  riskCheck?: RiskCheck;
+  agreement?: Agreement;
+  evAllocation?: EVAllocation;
+  
+  securityDeposit?: number;
+  advancePayment?: number;
+  paymentMethod?: 'bank' | 'wallet' | 'cash';
+  
+  bikeRequested?: string;
+  scheduleDate?: string;
+  appointmentDate?: string;
+  
+  notes: string[];
+  messageHistory: { date: string; message: string; from: 'admin' | 'user' }[];
+}
+
+const mockRequests: Request[] = [
+  {
+    id: 'REQ001',
+    applicationSource: 'app',
+    name: 'Rahim Ahmed',
+    phone: '01712345678',
+    email: 'rahim@email.com',
+    type: 'biker',
+    status: 'pending',
+    verificationStage: 'application',
+    submittedAt: '2024-03-20',
+    location: 'Gulshan, Dhaka',
+    address: 'House 12, Road 5, Gulshan 1',
+    requiredDocuments: [
+      { id: 'd1', name: 'NID Front', status: 'uploaded', uploadedAt: '2024-03-20' },
+      { id: 'd2', name: 'NID Back', status: 'uploaded', uploadedAt: '2024-03-20' },
+      { id: 'd3', name: 'Driving License', status: 'pending' },
+      { id: 'd4', name: 'Profile Photo', status: 'uploaded', uploadedAt: '2024-03-20' },
+    ],
+    riderPlan: 'daily_rent',
+    employmentInfo: { company: 'Foodpanda', dailyEarning: 2500, whyEV: 'Low maintenance, good for delivery', experience: '3 years bike riding' },
+    notes: ['Downloaded app and applied through mobile'],
+    messageHistory: [],
+  },
+  {
+    id: 'REQ002',
+    applicationSource: 'walkin',
+    sourceDetails: 'Gulshan Hub',
+    name: 'Karim Hasan',
+    phone: '01712345679',
+    email: 'karim@email.com',
+    type: 'investor',
+    status: 'documents_needed',
+    verificationStage: 'document_collection',
+    submittedAt: '2024-03-19',
+    location: 'Banani, Dhaka',
+    address: 'Flat 3B, House 22, Banani',
+    requiredDocuments: [
+      { id: 'd5', name: 'NID', status: 'uploaded', uploadedAt: '2024-03-19' },
+      { id: 'd6', name: 'TIN Certificate', status: 'pending' },
+      { id: 'd7', name: 'Bank Statement', status: 'pending' },
+    ],
+    messageHistory: [
+      { date: '2024-03-19', message: 'Please upload your TIN certificate and latest bank statement', from: 'admin' },
+      { date: '2024-03-19', message: 'I will upload them today', from: 'user' },
+    ],
+    notes: ['Walked in at Gulshan office - referred by current biker'],
+  },
+  {
+    id: 'REQ003',
+    applicationSource: 'web',
+    name: 'Jamal Store',
+    phone: '01712345680',
+    email: 'jamal@shop.com',
+    type: 'shop',
+    status: 'under_review',
+    verificationStage: 'plan_selection',
+    submittedAt: '2024-03-18',
+    location: 'Mirpur, Dhaka',
+    address: 'Shop 45, Mirpur Market',
+    requiredDocuments: [
+      { id: 'd8', name: 'Trade License', status: 'uploaded', uploadedAt: '2024-03-18' },
+      { id: 'd9', name: 'NID', status: 'uploaded', uploadedAt: '2024-03-18' },
+      { id: 'd10', name: 'Shop Photos', status: 'uploaded', uploadedAt: '2024-03-18' },
+    ],
+    notes: ['Applied through website'],
+    messageHistory: [],
+  },
+  {
+    id: 'REQ004',
+    applicationSource: 'app',
+    name: 'Sofiq Rahman',
+    phone: '01712345681',
+    email: 'sofiq@email.com',
+    type: 'biker',
+    status: 'approved',
+    verificationStage: 'active',
+    submittedAt: '2024-03-15',
+    location: 'Dhanmondi, Dhaka',
+    address: 'Road 8, Dhanmondi',
+    requiredDocuments: [
+      { id: 'd11', name: 'NID', status: 'approved', uploadedAt: '2024-03-15' },
+      { id: 'd12', name: 'Driving License', status: 'approved', uploadedAt: '2024-03-15' },
+      { id: 'd13', name: 'Profile Photo', status: 'approved', uploadedAt: '2024-03-15' },
+    ],
+    riderPlan: 'rent_to_own',
+    nomineeDetails: { name: 'Fatema Begum', phone: '01712345699', relationship: 'Wife', nid: '1234567890123' },
+    employmentInfo: { company: 'Pathao', dailyEarning: 3000, whyEV: 'Want to own EV eventually', experience: '5 years motorcycle experience' },
+    riskCheck: { nidVerified: true, nomineeNidVerified: true, deliveryPlatformStatus: 'active', paymentReliability: 'good', notes: 'Verified - clean record', checkedAt: '2024-03-15', checkedBy: 'Admin' },
+    agreement: { dailyRentObligation: 500, latePenalty: 100, damageTerms: 'Standard terms', vehicleRules: 'Follow JAIBEN guidelines', signedAt: '2024-03-15', signedBy: 'Sofiq Rahman' },
+    evAllocation: { evId: 'EV-004', bikeModel: 'AIMA Lightning', batteryId: 'BAT-044', hubLocation: 'Dhanmondi Hub', assignedAt: '2024-03-15', gpsActivated: true, checklist: ['Front light working', 'Brakes OK', 'Horn working', 'Tire pressure OK'] },
+    securityDeposit: 10000,
+    advancePayment: 500,
+    paymentMethod: 'bank',
+    bikeRequested: 'AIMA Lightning',
+    scheduleDate: '2024-03-15',
+    appointmentDate: '2024-03-15',
+    notes: ['Approved and active - EV allocated'],
+    messageHistory: [],
+  },
+  {
+    id: 'REQ005',
+    applicationSource: 'referral',
+    sourceDetails: 'Rahim (BIKER-001)',
+    name: 'Mizanur Investment',
+    phone: '01712345682',
+    email: 'mizan@invest.com',
+    type: 'investor',
+    status: 'rejected',
+    verificationStage: 'application',
+    submittedAt: '2024-03-10',
+    location: 'Uttara, Dhaka',
+    address: 'Sector 4, Uttara',
+    requiredDocuments: [
+      { id: 'd14', name: 'NID', status: 'rejected', rejectedReason: 'Image is blurry and unreadable', uploadedAt: '2024-03-10' },
+      { id: 'd15', name: 'TIN Certificate', status: 'uploaded', uploadedAt: '2024-03-10' },
+      { id: 'd16', name: 'Bank Statement', status: 'uploaded', uploadedAt: '2024-03-10' },
+    ],
+    messageHistory: [
+      { date: '2024-03-10', message: 'Your NID document is not clear. Please re-upload.', from: 'admin' },
+    ],
+    notes: ['NID was unclear/blurry'],
+  },
+  {
+    id: 'REQ006',
+    applicationSource: 'web',
+    name: 'Ripon Mia',
+    phone: '01712345683',
+    email: 'ripon@email.com',
+    type: 'biker',
+    status: 'under_review',
+    verificationStage: 'risk_check',
+    submittedAt: '2024-03-21',
+    location: 'Mohakhali, Dhaka',
+    address: 'House 8, Mohakhali',
+    requiredDocuments: [
+      { id: 'd17', name: 'NID', status: 'uploaded', uploadedAt: '2024-03-21' },
+      { id: 'd18', name: 'Driving License', status: 'uploaded', uploadedAt: '2024-03-21' },
+      { id: 'd19', name: 'Profile Photo', status: 'uploaded', uploadedAt: '2024-03-21' },
+    ],
+    riderPlan: 'monthly_rent',
+    nomineeDetails: { name: 'Rashid', phone: '01798765432', relationship: 'Brother', nid: '9876543210987' },
+    employmentInfo: { company: ' ssl', dailyEarning: 2000, whyEV: 'Better income than fuel bike', experience: '2 years' },
+    notes: [],
+    messageHistory: [],
+  },
+];
 
 const statusColors: Record<string, string> = {
   pending: 'bg-amber-100 text-amber-700',
+  documents_needed: 'bg-orange-100 text-orange-700',
+  under_review: 'bg-blue-100 text-blue-700',
+  risk_check: 'bg-purple-100 text-purple-700',
   approved: 'bg-green-100 text-green-700',
   rejected: 'bg-red-100 text-red-700',
 };
 
-export default function KYCReviewsPage() {
-  const pending = kycRequests.filter(k => k.status === 'pending');
-  const approved = kycRequests.filter(k => k.status === 'approved');
-  const rejected = kycRequests.filter(k => k.status === 'rejected');
+const statusLabels: Record<string, string> = {
+  pending: 'Pending',
+  documents_needed: 'Documents Needed',
+  under_review: 'Under Review',
+  risk_check: 'Risk Check',
+  approved: 'Approved',
+  rejected: 'Rejected',
+};
+
+const stageLabels: Record<string, string> = {
+  application: 'Application',
+  document_collection: 'Documents',
+  risk_check: 'Risk Check',
+  plan_selection: 'Plan Selection',
+  payment: 'Payment',
+  agreement: 'Agreement',
+  allocated: 'EV Allocated',
+  active: 'Active',
+};
+
+const sourceLabels: Record<string, string> = {
+  app: 'Mobile App',
+  web: 'Website',
+  walkin: 'Walk-in',
+  referral: 'Referral',
+};
+
+const sourceColors: Record<string, string> = {
+  app: 'bg-blue-100 text-blue-700',
+  web: 'bg-green-100 text-green-700',
+  walkin: 'bg-amber-100 text-amber-700',
+  referral: 'bg-purple-100 text-purple-700',
+};
+
+const planLabels: Record<string, string> = {
+  daily_rent: 'Daily Rent',
+  weekly_rent: 'Weekly Rent',
+  monthly_rent: 'Monthly Rent',
+  rent_to_own: 'Rent-to-Own',
+  share_ev: 'Share EV',
+};
+
+const typeIcons: Record<string, any> = {
+  biker: Bike,
+  investor: DollarSign,
+  shop: Store,
+  merchant: Users,
+};
+
+const typeColors: Record<string, string> = {
+  biker: 'bg-blue-100 text-blue-700',
+  investor: 'bg-purple-100 text-purple-700',
+  shop: 'bg-green-100 text-green-700',
+  merchant: 'bg-orange-100 text-orange-700',
+  general: 'bg-slate-100 text-slate-700',
+};
+
+const sourceIcons: Record<string, any> = {
+  app: Phone,
+  web: Globe,
+  walkin: User,
+  referral: Users,
+};
+
+export default function RequestsPage() {
+  const [activeTab, setActiveTab] = useState<'all' | 'biker' | 'investor' | 'shop' | 'merchant'>('all');
+  const [requests, setRequests] = useState<Request[]>(mockRequests);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [selectedRequest, setSelectedRequest] = useState<Request | null>(null);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [showDetailsModal, setShowDetailsModal] = useState(false);
+  const [showNewApplicationModal, setShowNewApplicationModal] = useState(false);
+  const [messageText, setMessageText] = useState('');
+  const [showActionModal, setShowActionModal] = useState(false);
+  const [actionType, setActionType] = useState<'approve' | 'reject' | 'documents'>('approve');
+  const [rejectReason, setRejectReason] = useState('');
+  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
+
+  const handleApproveDocument = (docId: string) => {
+    if (!selectedRequest) return;
+    const updatedRequests = requests.map(req => {
+      if (req.id === selectedRequest.id) {
+        return {
+          ...req,
+          requiredDocuments: req.requiredDocuments.map(doc => 
+            doc.id === docId ? { ...doc, status: 'approved' as const } : doc
+          )
+        };
+      }
+      return req;
+    });
+    setRequests(updatedRequests);
+    alert('Document approved!');
+  };
+
+  const handleRejectDocument = (docId: string, reason: string) => {
+    if (!selectedRequest || !reason.trim()) {
+      alert('Please enter a reason for rejection');
+      return;
+    }
+    const updatedRequests = requests.map(req => {
+      if (req.id === selectedRequest.id) {
+        return {
+          ...req,
+          requiredDocuments: req.requiredDocuments.map(doc => 
+            doc.id === docId ? { ...doc, status: 'rejected' as const, rejectedReason: reason } : doc
+          )
+        };
+      }
+      return req;
+    });
+    setRequests(updatedRequests);
+    setRejectReason('');
+    alert('Document rejected!');
+  };
+
+  const filteredRequests = requests.filter(req => {
+    const matchesTab = activeTab === 'all' || req.type === activeTab;
+    const matchesSearch = req.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      req.phone.includes(searchQuery) ||
+      req.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      req.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || req.status === statusFilter;
+    return matchesTab && matchesSearch && matchesStatus;
+  });
+
+  const pending = requests.filter(r => r.status === 'pending' || r.status === 'documents_needed').length;
+  const underReview = requests.filter(r => r.status === 'under_review').length;
+  const approved = requests.filter(r => r.status === 'approved').length;
+
+  const handleSendMessage = () => {
+    if (selectedRequest && messageText.trim()) {
+      const updatedRequests = requests.map(req => {
+        if (req.id === selectedRequest.id) {
+          return {
+            ...req,
+            status: 'documents_needed' as const,
+            messageHistory: [
+              ...req.messageHistory,
+              { date: new Date().toISOString().split('T')[0], message: messageText, from: 'admin' as const }
+            ],
+            notes: [...req.notes, messageText]
+          };
+        }
+        return req;
+      });
+      setRequests(updatedRequests);
+      setShowMessageModal(false);
+      setMessageText('');
+      alert(`Message sent to ${selectedRequest.phone}: "${messageText}"`);
+    }
+  };
+
+  const handleAction = (request: Request, action: 'approve' | 'reject' | 'documents') => {
+    setSelectedRequest(request);
+    setActionType(action);
+    setShowActionModal(true);
+  };
+
+  const confirmAction = () => {
+    if (!selectedRequest) return;
+
+    let newStatus: Request['status'] = selectedRequest.status;
+    let successMessage = '';
+
+    if (actionType === 'approve') {
+      newStatus = 'approved';
+      successMessage = selectedRequest.type === 'biker' 
+        ? `Approved! SMS sent to ${selectedRequest.phone}: Welcome! Your biker request has been approved.`
+        : `Approved! SMS sent to ${selectedRequest.phone}: Welcome! Your investor request has been approved.`;
+    } else if (actionType === 'reject') {
+      newStatus = 'rejected';
+      successMessage = `Rejected! SMS sent to ${selectedRequest.phone}: Sorry, your request has been rejected.`;
+    } else if (actionType === 'documents') {
+      newStatus = 'documents_needed';
+      successMessage = `Documents requested! SMS sent to ${selectedRequest.phone}: Please upload required documents.`;
+    }
+
+    const updatedRequests = requests.map(req => 
+      req.id === selectedRequest.id ? { ...req, status: newStatus } : req
+    );
+    setRequests(updatedRequests);
+    setShowActionModal(false);
+    alert(successMessage);
+  };
 
   return (
     <div className="p-4 lg:p-6">
       <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
         <div>
-          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">KYC Verification</h1>
-          <p className="text-sm text-slate-500 mt-1">Review and verify biker identity documents</p>
+          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Requests & Verification</h1>
+          <p className="text-sm text-slate-500 mt-1">Manage biker, investor, and shop requests</p>
         </div>
         <div className="flex items-center gap-2">
+          <button 
+            onClick={() => setShowNewApplicationModal(true)}
+            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" /> New Application
+          </button>
           <button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
             <Download className="w-4 h-4" /> Export
           </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-3 gap-4 mb-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
         <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
           <div className="flex items-center gap-3">
             <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
               <Clock className="w-6 h-6 text-amber-600" />
             </div>
             <div>
-              <p className="text-2xl font-extrabold text-slate-800">{pending.length}</p>
-              <p className="text-sm text-slate-500">Pending Review</p>
+              <p className="text-2xl font-extrabold text-slate-800">{pending}</p>
+              <p className="text-sm text-slate-500">Pending</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
+              <Eye className="w-6 h-6 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-extrabold text-slate-800">{underReview}</p>
+              <p className="text-sm text-slate-500">Under Review</p>
             </div>
           </div>
         </div>
@@ -44,85 +494,1017 @@ export default function KYCReviewsPage() {
               <Check className="w-6 h-6 text-green-600" />
             </div>
             <div>
-              <p className="text-2xl font-extrabold text-slate-800">{approved.length}</p>
+              <p className="text-2xl font-extrabold text-slate-800">{approved}</p>
               <p className="text-sm text-slate-500">Approved</p>
             </div>
           </div>
         </div>
         <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
           <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
-              <X className="w-6 h-6 text-red-600" />
+            <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center">
+              <Users className="w-6 h-6 text-slate-600" />
             </div>
             <div>
-              <p className="text-2xl font-extrabold text-slate-800">{rejected.length}</p>
-              <p className="text-sm text-slate-500">Rejected</p>
+              <p className="text-2xl font-extrabold text-slate-800">{requests.length}</p>
+              <p className="text-sm text-slate-500">Total Requests</p>
             </div>
           </div>
         </div>
       </div>
 
-      <div className="bg-white rounded-xl shadow-sm border border-slate-100">
+      <div className="bg-white rounded-xl shadow-sm border border-slate-100 mb-6">
         <div className="p-4 border-b border-slate-100">
-          <div className="flex items-center gap-2">
-            <button className="px-3 py-1.5 bg-slate-800 text-white rounded-lg text-sm font-medium">All</button>
-            <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Pending</button>
-            <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Approved</button>
-            <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Rejected</button>
+          <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+            <div className="flex items-center gap-2 flex-wrap">
+              <button 
+                onClick={() => setActiveTab('all')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium ${activeTab === 'all' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                All
+              </button>
+              <button 
+                onClick={() => setActiveTab('biker')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'biker' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Bike className="w-4 h-4" /> Bikers
+              </button>
+              <button 
+                onClick={() => setActiveTab('investor')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'investor' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <DollarSign className="w-4 h-4" /> Investors
+              </button>
+              <button 
+                onClick={() => setActiveTab('shop')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'shop' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Store className="w-4 h-4" /> Shops
+              </button>
+              <button 
+                onClick={() => setActiveTab('merchant')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'merchant' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Users className="w-4 h-4" /> Merchants
+              </button>
+            </div>
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                <input
+                  type="text"
+                  placeholder="Search by name, phone, email..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full lg:w-64 pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm"
+                />
+              </div>
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600"
+            >
+              <option value="all">All Status</option>
+              <option value="pending">Pending</option>
+              <option value="documents_needed">Documents Needed</option>
+              <option value="under_review">Under Review</option>
+              <option value="risk_check">Risk Check</option>
+              <option value="approved">Approved</option>
+              <option value="rejected">Rejected</option>
+            </select>
           </div>
         </div>
 
         <div className="divide-y divide-slate-50">
-          {kycRequests.map(kyc => (
-            <div key={kyc.id} className="p-5 hover:bg-slate-50 transition-colors">
-              <div className="flex flex-col lg:flex-row lg:items-start gap-4">
-                <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center">
-                    <User className="w-6 h-6 text-slate-600" />
+          {filteredRequests.map(request => {
+            const TypeIcon = typeIcons[request.type];
+            return (
+              <Link key={request.id} href={`/admin/kyc/${request.id}`} className="block p-5 hover:bg-slate-50 transition-colors">
+                <div className="flex flex-col lg:flex-row lg:items-start gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center">
+                      <User className="w-6 h-6 text-slate-600" />
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <p className="font-semibold text-slate-800">{request.name}</p>
+                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${typeColors[request.type]}`}>
+                          <TypeIcon className="w-3 h-3" /> {request.type}
+                        </span>
+                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${sourceColors[request.applicationSource]}`}>
+                          <Phone className="w-3 h-3" /> {sourceLabels[request.applicationSource]}
+                        </span>
+                      </div>
+                      <p className="text-sm text-slate-500 flex items-center gap-2">
+                        <Phone className="w-3 h-3" /> {request.phone}
+                        <span className="text-slate-300">|</span>
+                        <MapPin className="w-3 h-3" /> {request.location}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1">
+                    <div className="flex flex-wrap gap-4 text-sm text-slate-600">
+                      <p className="flex items-center gap-1">
+                        <Clock className="w-3 h-3" /> {request.submittedAt}
+                      </p>
+                      <p className="flex items-center gap-1">
+                        <FileText className="w-3 h-3" /> Docs: {request.requiredDocuments.filter(d => d.status === 'uploaded' || d.status === 'approved').length}/{request.requiredDocuments.length}
+                      </p>
+                      {request.type === 'biker' && request.verificationStage && (
+                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 text-cyan-700`}>
+                          <Check className="w-3 h-3" /> {stageLabels[request.verificationStage]}
+                        </span>
+                      )}
+                      {request.messageHistory.length > 0 && (
+                        <p className="flex items-center gap-1 text-blue-600">
+                          <MessageSquare className="w-3 h-3" /> {request.messageHistory.length} msg
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-3">
+                    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[request.status]}`}>
+                      {request.status === 'pending' && <Clock className="w-3 h-3" />}
+                      {request.status === 'documents_needed' && <AlertCircle className="w-3 h-3" />}
+                      {request.status === 'under_review' && <Eye className="w-3 h-3" />}
+                      {request.status === 'approved' && <Check className="w-3 h-3" />}
+                      {request.status === 'rejected' && <X className="w-3 h-3" />}
+                      {statusLabels[request.status]}
+                    </span>
+                    
+                    {request.status !== 'approved' && request.status !== 'rejected' && (
+                      <div className="flex gap-2">
+                        {request.type === 'biker' && request.status === 'under_review' && (
+                          <button 
+                            onClick={() => handleAction(request, 'approve')}
+                            className="py-1.5 px-3 bg-green-600 text-white text-xs font-semibold rounded-lg hover:bg-green-700 flex items-center gap-1"
+                          >
+                            <Check className="w-3 h-3" /> Make Biker
+                          </button>
+                        )}
+                        {request.type === 'investor' && request.status === 'under_review' && (
+                          <button 
+                            onClick={() => handleAction(request, 'approve')}
+                            className="py-1.5 px-3 bg-purple-600 text-white text-xs font-semibold rounded-lg hover:bg-purple-700 flex items-center gap-1"
+                          >
+                            <DollarSign className="w-3 h-3" /> Make Investor
+                          </button>
+                        )}
+                        {request.type === 'shop' && request.status === 'under_review' && (
+                          <button 
+                            onClick={() => handleAction(request, 'approve')}
+                            className="py-1.5 px-3 bg-green-600 text-white text-xs font-semibold rounded-lg hover:bg-green-700 flex items-center gap-1"
+                          >
+                            <Store className="w-3 h-3" /> Approve Shop
+                          </button>
+                        )}
+                        <button 
+                          onClick={(e) => { e.preventDefault(); setSelectedRequest(request); setShowDetailsModal(true); }}
+                          className="py-1.5 px-3 border border-slate-200 text-slate-600 text-xs font-semibold rounded-lg hover:bg-slate-50 flex items-center gap-1"
+                        >
+                          <Eye className="w-3 h-3" /> Details
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+          
+          {filteredRequests.length === 0 && (
+            <div className="p-12 text-center">
+              <Users className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+              <p className="text-slate-500">No requests found</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showMessageModal && selectedRequest && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Send Message to {selectedRequest.name}</h3>
+              <button onClick={() => setShowMessageModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="bg-slate-50 p-3 rounded-lg">
+                <p className="text-sm text-slate-600">Phone: {selectedRequest.phone}</p>
+                <p className="text-sm text-slate-600">Type: {selectedRequest.type}</p>
+              </div>
+              
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-2 block">Quick Messages</label>
+                <div className="flex flex-wrap gap-2">
+                  <button 
+                    onClick={() => setMessageText('Please upload your NID document.')}
+                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
+                  >
+                    Request NID
+                  </button>
+                  <button 
+                    onClick={() => setMessageText('Please upload your Driving License.')}
+                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
+                  >
+                    Request License
+                  </button>
+                  <button 
+                    onClick={() => setMessageText('Please upload your TIN Certificate.')}
+                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
+                  >
+                    Request TIN
+                  </button>
+                  <button 
+                    onClick={() => setMessageText('Please upload your Bank Statement (last 3 months).')}
+                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
+                  >
+                    Request Bank Statement
+                  </button>
+                  <button 
+                    onClick={() => setMessageText('Your document is not clear. Please re-upload with better quality.')}
+                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
+                  >
+                    Document Unclear
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-2 block">Message</label>
+                <textarea
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                  rows={4}
+                  placeholder="Type your message..."
+                ></textarea>
+                <p className="text-xs text-slate-400 mt-1">This message will be sent via SMS to {selectedRequest.phone}</p>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button 
+                onClick={() => setShowMessageModal(false)}
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleSendMessage}
+                disabled={!messageText.trim()}
+                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50 flex items-center gap-2"
+              >
+                <Send className="w-4 h-4" /> Send Message
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showDetailsModal && selectedRequest && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Request Details - {selectedRequest.id}</h3>
+              <button onClick={() => setShowDetailsModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto max-h-[70vh]">
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Name</p>
+                  <p className="font-semibold text-slate-800">{selectedRequest.name}</p>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Phone</p>
+                  <p className="font-semibold text-slate-800">{selectedRequest.phone}</p>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Email</p>
+                  <p className="font-semibold text-slate-800">{selectedRequest.email}</p>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Location</p>
+                  <p className="font-semibold text-slate-800">{selectedRequest.location}</p>
+                </div>
+              </div>
+
+              {selectedRequest.type === 'biker' && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
+                    <Bike className="w-5 h-5 text-accent" /> Bike Details
+                  </h4>
+                  <div className="bg-slate-50 p-4 rounded-lg">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-xs text-slate-500 block mb-1">Bike Model</label>
+                        <select 
+                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                          value={selectedRequest.bikeRequested || ''}
+                          onChange={(e) => {
+                            const updated = requests.map(r => 
+                              r.id === selectedRequest.id 
+                                ? { ...r, bikeRequested: e.target.value }
+                                : r
+                            );
+                            setRequests(updated);
+                          }}
+                        >
+                          <option value="">Select Bike Model</option>
+                          <option value="AIMA Lightning">AIMA Lightning</option>
+                          <option value="Yadea DT3">Yadea DT3</option>
+                          <option value="Etron ET50">Etron ET50</option>
+                          <option value="AIMA i3">AIMA i3</option>
+                          <option value="TVS iQube">TVS iQube</option>
+                          <option value="Benling Aura">Benling Aura</option>
+                          <option value="Okinawa Ridge">Okinawa Ridge</option>
+                          <option value="Hero Optima">Hero Optima</option>
+                          <option value="Ampere Magnus">Ampere Magnus</option>
+                          <option value="Other">Other</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-xs text-slate-500 block mb-1">Brand</label>
+                        <input 
+                          type="text" 
+                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                          placeholder="Enter details"
+                          value={selectedRequest.evAllocation?.bikeModel || ''}
+                          onChange={(e) => {
+                            const updated = requests.map(r => 
+                              r.id === selectedRequest.id 
+                                ? { ...r, evAllocation: { ...r.evAllocation!, bikeModel: e.target.value } }
+                                : r
+                            );
+                            setRequests(updated);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <div className="mb-6">
+                <h4 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
+                  <FileText className="w-5 h-5 text-accent" /> Documents
+                </h4>
+                <div className="space-y-2">
+                  {selectedRequest.requiredDocuments.map((doc, idx) => (
+                    <div key={idx} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        {doc.status === 'pending' ? (
+                          <Upload className="w-4 h-4 text-amber-400" />
+                        ) : doc.status === 'uploaded' ? (
+                          <FileText className="w-4 h-4 text-blue-400" />
+                        ) : doc.status === 'approved' ? (
+                          <CheckCircle className="w-4 h-4 text-green-500" />
+                        ) : (
+                          <XCircle className="w-4 h-4 text-red-500" />
+                        )}
+                        <div>
+                          <span className="text-sm text-slate-600">{doc.name}</span>
+                          {doc.uploadedAt && <span className="text-xs text-slate-400 ml-2">{doc.uploadedAt}</span>}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {doc.status === 'pending' && (
+                          <span className="text-xs text-amber-600 flex items-center gap-1">
+                            <Upload className="w-3 h-3" /> Waiting for upload
+                          </span>
+                        )}
+                        {(doc.status === 'uploaded' || doc.status === 'approved') && (
+                          <button 
+                            onClick={() => handleApproveDocument(doc.id)}
+                            className="p-1.5 bg-green-100 text-green-600 rounded-lg hover:bg-green-200"
+                            title="Approve"
+                          >
+                            <CheckCircle className="w-4 h-4" />
+                          </button>
+                        )}
+                        {(doc.status === 'uploaded' || doc.status === 'approved') && (
+                          <button 
+                            onClick={() => {
+                              const reason = prompt('Enter rejection reason:');
+                              if (reason) handleRejectDocument(doc.id, reason);
+                            }}
+                            className="p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200"
+                            title="Reject"
+                          >
+                            <XCircle className="w-4 h-4" />
+                          </button>
+                        )}
+                        {doc.status === 'rejected' && (
+                          <span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full bg-red-100 text-red-700">
+                            <XCircle className="w-3 h-3" /> Rejected
+                          </span>
+                        )}
+                        {doc.status === 'approved' && (
+                          <span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-700">
+                            <CheckCircle className="w-3 h-3" /> Approved
+                          </span>
+                        )}
+                        {doc.status === 'rejected' && doc.rejectedReason && (
+                          <div className="text-xs text-red-600 mt-1">Reason: {doc.rejectedReason}</div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {selectedRequest.type === 'biker' && selectedRequest.bikeRequested && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
+                    <Camera className="w-5 h-5 text-accent" /> Bike Images (When Taking Bike)
+                  </h4>
+                  <div className="grid grid-cols-4 gap-3">
+                    {['Front', 'Back', 'Left Side', 'Right Side'].map((view) => (
+                      <div key={view} className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:bg-slate-200 transition-colors">
+                        <Camera className="w-8 h-8 text-slate-400 mb-2" />
+                        <span className="text-xs text-slate-500">{view}</span>
+                        <span className="text-xs text-amber-500 mt-1">Upload</span>
+                      </div>
+                    ))}
+                  </div>
+                  <button className="mt-3 px-4 py-2 border border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-accent hover:text-accent w-full">
+                    + Add More Images
+                  </button>
+                </div>
+              )}
+
+              {selectedRequest.messageHistory.length > 0 && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3">Message History</h4>
+                  <div className="space-y-2">
+                    {selectedRequest.messageHistory.map((msg, idx) => (
+                      <div key={idx} className={`p-3 rounded-lg ${msg.from === 'admin' ? 'bg-blue-50' : 'bg-slate-50'}`}>
+                        <div className="flex items-center justify-between mb-1">
+                          <span className={`text-xs font-medium ${msg.from === 'admin' ? 'text-blue-600' : 'text-slate-600'}`}>
+                            {msg.from === 'admin' ? 'Admin' : 'User'}
+                          </span>
+                          <span className="text-xs text-slate-400">{msg.date}</span>
+                        </div>
+                        <p className="text-sm text-slate-700">{msg.message}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedRequest.notes.length > 0 && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3">Notes</h4>
+                  <div className="space-y-2">
+                    {selectedRequest.notes.map((note, idx) => (
+                      <div key={idx} className="p-3 bg-amber-50 rounded-lg">
+                        <p className="text-sm text-slate-700">{note}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              {selectedRequest.status !== 'approved' && selectedRequest.status !== 'rejected' && (
+                <>
+                  {selectedRequest.type === 'biker' && (
+                    <button 
+                      onClick={() => { setShowDetailsModal(false); handleAction(selectedRequest, 'approve'); }}
+                      className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+                    >
+                      <Check className="w-4 h-4" /> Make Biker
+                    </button>
+                  )}
+                  {selectedRequest.type === 'investor' && (
+                    <button 
+                      onClick={() => { setShowDetailsModal(false); handleAction(selectedRequest, 'approve'); }}
+                      className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
+                    >
+                      <DollarSign className="w-4 h-4" /> Make Investor
+                    </button>
+                  )}
+                  {selectedRequest.type === 'shop' && (
+                    <button 
+                      onClick={() => { setShowDetailsModal(false); handleAction(selectedRequest, 'approve'); }}
+                      className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+                    >
+                      <Store className="w-4 h-4" /> Approve Shop
+                    </button>
+                  )}
+                </>
+              )}
+              <button 
+                onClick={() => setShowDetailsModal(false)}
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showActionModal && selectedRequest && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100">
+              <h3 className="font-semibold text-slate-800">
+                {actionType === 'approve' ? 'Approve Request' : actionType === 'reject' ? 'Reject Request' : 'Request Documents'}
+              </h3>
+            </div>
+            <div className="p-4">
+              <p className="text-sm text-slate-600 mb-4">
+                {actionType === 'approve' && `Are you sure you want to approve ${selectedRequest.name} as a ${selectedRequest.type}?`}
+                {actionType === 'reject' && `Are you sure you want to reject ${selectedRequest.name}'s request?`}
+                {actionType === 'documents' && `Send a message to ${selectedRequest.name} requesting required documents.`}
+              </p>
+              <div className="bg-slate-50 p-3 rounded-lg">
+                <p className="text-sm"><strong>Name:</strong> {selectedRequest.name}</p>
+                <p className="text-sm"><strong>Phone:</strong> {selectedRequest.phone}</p>
+                <p className="text-sm"><strong>Type:</strong> {selectedRequest.type}</p>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button 
+                onClick={() => setShowActionModal(false)}
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={confirmAction}
+                className={`px-4 py-2 text-white rounded-lg text-sm flex items-center gap-2 ${
+                  actionType === 'approve' ? 'bg-green-600 hover:bg-green-700' :
+                  actionType === 'reject' ? 'bg-red-600 hover:bg-red-700' :
+                  'bg-amber-600 hover:bg-amber-700'
+                }`}
+              >
+                {actionType === 'approve' && <><Check className="w-4 h-4" /> Confirm Approve</>}
+                {actionType === 'reject' && <><X className="w-4 h-4" /> Confirm Reject</>}
+                {actionType === 'documents' && <><Send className="w-4 h-4" /> Send Request</>}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <NewApplicationModal
+        isOpen={showNewApplicationModal}
+        onClose={() => setShowNewApplicationModal(false)}
+        onSave={(data) => {
+          const newRequest: Request = {
+            id: `REQ${String(Date.now()).slice(-6)}`,
+            applicationSource: data.applicationSource || 'walkin',
+            sourceDetails: data.sourceDetails || '',
+            name: data.name || '',
+            phone: data.phone || '',
+            email: data.email || '',
+            type: data.type || 'biker',
+            location: data.location || '',
+            address: data.address || '',
+            status: 'pending',
+            verificationStage: 'application',
+            submittedAt: new Date().toISOString().split('T')[0],
+            requiredDocuments: data.type === 'biker' ? [
+              { id: 'doc1', name: 'NID Front', status: 'pending' },
+              { id: 'doc2', name: 'NID Back', status: 'pending' },
+              { id: 'doc3', name: 'Driving License', status: 'pending' },
+              { id: 'doc4', name: 'Profile Photo', status: 'pending' },
+            ] : data.type === 'investor' ? [
+              { id: 'doc1', name: 'NID', status: 'pending' },
+              { id: 'doc2', name: 'TIN Certificate', status: 'pending' },
+              { id: 'doc3', name: 'Bank Statement', status: 'pending' },
+            ] : [
+              { id: 'doc1', name: 'NID', status: 'pending' },
+              { id: 'doc2', name: 'Trade License', status: 'pending' },
+              { id: 'doc3', name: 'Shop Photo', status: 'pending' },
+            ],
+            riderPlan: data.riderPlan,
+            employmentInfo: data.employmentInfo,
+            nomineeDetails: data.nomineeDetails,
+            securityDeposit: data.securityDeposit,
+            advancePayment: data.advancePayment,
+            paymentMethod: data.paymentMethod,
+            bikeRequested: data.bikeRequested,
+            scheduleDate: data.scheduleDate,
+            notes: [],
+            messageHistory: [],
+          };
+          setRequests([newRequest, ...requests]);
+          setShowNewApplicationModal(false);
+          alert('Application created successfully!');
+        }}
+      />
+    </div>
+  );
+}
+
+function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onClose: () => void; onSave: (data: Partial<Request>) => void }) {
+  const [formData, setFormData] = useState<Partial<Request>>({
+    applicationSource: 'walkin',
+    sourceDetails: '',
+    name: '',
+    phone: '',
+    email: '',
+    type: 'biker',
+    location: '',
+    address: '',
+    riderPlan: 'daily_rent',
+    nomineeDetails: { name: '', phone: '', relationship: '', nid: '' },
+    employmentInfo: { company: '', dailyEarning: 0, whyEV: '', experience: '' },
+    securityDeposit: 0,
+    advancePayment: 0,
+    paymentMethod: 'cash',
+  });
+
+  const [step, setStep] = useState(1);
+
+  const updateField = (field: string, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const updateNested = (parent: string, field: string, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [parent]: { ...(prev as any)[parent], [field]: value }
+    }));
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold text-slate-800">New Application</h3>
+            <p className="text-xs text-slate-500">Step {step} of 5</p>
+          </div>
+          <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded">
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+
+        <div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
+          <div className="flex items-center gap-1">
+            {[
+              { n: 1, l: 'Basic Info' },
+              { n: 2, l: 'Documents' },
+              { n: 3, l: 'Employment' },
+              { n: 4, l: 'Plan' },
+              { n: 5, l: 'Nominee' },
+            ].map(s => (
+              <div key={s.n} className={`flex-1 h-1 rounded-full ${step >= s.n ? 'bg-accent' : 'bg-slate-200'}`} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+          {step === 1 && (
+            <div className="space-y-4">
+              <div className="bg-blue-50 p-4 rounded-xl border border-blue-200">
+                <h4 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
+                  <User className="w-5 h-5" /> Basic Information
+                </h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Application Source *</label>
+                    <select
+                      value={formData.applicationSource}
+                      onChange={(e) => updateField('applicationSource', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    >
+                      <option value="walkin">Walk-in Customer</option>
+                      <option value="app">From Mobile App</option>
+                      <option value="web">From Website</option>
+                      <option value="referral">Referral</option>
+                    </select>
                   </div>
                   <div>
-                    <p className="font-semibold text-slate-800">{kyc.userName}</p>
-                    <p className="text-sm text-slate-500 flex items-center gap-1">
-                      <Phone className="w-3 h-3" /> {kyc.phone}
-                    </p>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">KYC Type *</label>
+                    <select
+                      value={formData.type}
+                      onChange={(e) => updateField('type', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    >
+                      <option value="biker">Biker (Rider)</option>
+                      <option value="investor">Investor</option>
+                      <option value="shop">Shop</option>
+                      <option value="merchant">Merchant</option>
+                    </select>
                   </div>
-                </div>
-                <div className="flex-1">
-                  <div className="flex flex-wrap gap-4 text-sm text-slate-600">
-                    <p className="flex items-center gap-1">
-                      <Clock className="w-3 h-3" /> Submitted: {kyc.submittedAt}
-                    </p>
-                    <p className="flex items-center gap-1">
-                      <MapPin className="w-3 h-3" /> Dhaka, Bangladesh
-                    </p>
-                    <p className="flex items-center gap-1">
-                      <FileText className="w-3 h-3" /> NID: 1234567890
-                    </p>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Full Name *</label>
+                    <input
+                      type="text"
+                      value={formData.name}
+                      onChange={(e) => updateField('name', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Enter full name"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Phone Number *</label>
+                    <input
+                      type="text"
+                      value={formData.phone}
+                      onChange={(e) => updateField('phone', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="01XXXXXXXXX"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Email</label>
+                    <input
+                      type="email"
+                      value={formData.email}
+                      onChange={(e) => updateField('email', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="email@example.com"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Location *</label>
+                    <input
+                      type="text"
+                      value={formData.location}
+                      onChange={(e) => updateField('location', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Area, Dhaka"
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Full Address</label>
+                    <input
+                      type="text"
+                      value={formData.address}
+                      onChange={(e) => updateField('address', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Complete address"
+                    />
                   </div>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[kyc.status]}`}>
-                    {kyc.status}
-                  </span>
-                  {kyc.status === 'pending' && (
-                    <div className="flex gap-2">
-                      <button className="py-2 px-4 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 flex items-center gap-1">
-                        <Check className="w-4 h-4" /> Approve
-                      </button>
-                      <button className="py-2 px-4 border border-red-200 text-red-600 text-sm font-semibold rounded-lg hover:bg-red-50 flex items-center gap-1">
-                        <X className="w-4 h-4" /> Reject
-                      </button>
-                      <button className="py-2 px-3 border border-slate-200 text-slate-600 text-sm font-semibold rounded-lg hover:bg-slate-50 flex items-center gap-1">
-                        <Eye className="w-4 h-4" /> View Docs
-                      </button>
-                    </div>
-                  )}
                 </div>
               </div>
             </div>
-          ))}
+          )}
+
+          {step === 2 && (
+            <div className="space-y-4">
+              <div className="bg-green-50 p-4 rounded-xl border border-green-200">
+                <h4 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
+                  <FileText className="w-5 h-5" /> Required Documents
+                </h4>
+                <p className="text-sm text-slate-600 mb-4">Documents to be collected from the applicant</p>
+                <div className="grid grid-cols-2 gap-3">
+                  {formData.type === 'biker' && [
+                    { n: 'NID (Front)', f: 'nid_front' },
+                    { n: 'NID (Back)', f: 'nid_back' },
+                    { n: 'Driving License', f: 'driving_license' },
+                    { n: 'Profile Photo', f: 'profile_photo' },
+                    { n: 'Bank Account Card', f: 'bank_card' },
+                    { n: 'Mobile Wallet Info', f: 'wallet_info' },
+                  ].map(doc => (
+                    <div key={doc.f} className="flex items-center justify-between p-3 bg-white rounded-lg border border-green-100">
+                      <span className="text-sm text-slate-700">{doc.n}</span>
+                      <span className="text-xs text-amber-600 flex items-center gap-1">
+                        <Upload className="w-3 h-3" /> Pending
+                      </span>
+                    </div>
+                  ))}
+                  {formData.type === 'investor' && [
+                    { n: 'NID Copy', f: 'nid' },
+                    { n: 'TIN Certificate', f: 'tin' },
+                    { n: 'Bank Statement (3 months)', f: 'bank_stmt' },
+                    { n: 'Photo', f: 'photo' },
+                  ].map(doc => (
+                    <div key={doc.f} className="flex items-center justify-between p-3 bg-white rounded-lg border border-purple-100">
+                      <span className="text-sm text-slate-700">{doc.n}</span>
+                      <span className="text-xs text-amber-600 flex items-center gap-1">
+                        <Upload className="w-3 h-3" /> Pending
+                      </span>
+                    </div>
+                  ))}
+                  {formData.type === 'shop' && [
+                    { n: 'Trade License', f: 'trade_license' },
+                    { n: 'Shop Owner NID', f: 'owner_nid' },
+                    { n: 'Shop Photos', f: 'shop_photos' },
+                    { n: 'Electricity Bill', f: 'electricity' },
+                  ].map(doc => (
+                    <div key={doc.f} className="flex items-center justify-between p-3 bg-white rounded-lg border border-green-100">
+                      <span className="text-sm text-slate-700">{doc.n}</span>
+                      <span className="text-xs text-amber-600 flex items-center gap-1">
+                        <Upload className="w-3 h-3" /> Pending
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 3 && formData.type === 'biker' && (
+            <div className="space-y-4">
+              <div className="bg-purple-50 p-4 rounded-xl border border-purple-200">
+                <h4 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
+                  <Briefcase className="w-5 h-5" /> Employment Information
+                </h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Current Company (if any)</label>
+                    <input
+                      type="text"
+                      value={formData.employmentInfo?.company}
+                      onChange={(e) => updateNested('employmentInfo', 'company', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="e.g., Foodpanda, ssl, Pathao"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Daily Earning (Tk)</label>
+                    <input
+                      type="number"
+                      value={formData.employmentInfo?.dailyEarning}
+                      onChange={(e) => updateNested('employmentInfo', 'dailyEarning', Number(e.target.value))}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="0"
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Why want EV?</label>
+                    <textarea
+                      value={formData.employmentInfo?.whyEV}
+                      onChange={(e) => updateNested('employmentInfo', 'whyEV', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      rows={2}
+                      placeholder="Reason for choosing EV..."
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Driving Experience</label>
+                    <input
+                      type="text"
+                      value={formData.employmentInfo?.experience}
+                      onChange={(e) => updateNested('employmentInfo', 'experience', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="e.g., 3 years motorcycle experience"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 4 && formData.type === 'biker' && (
+            <div className="space-y-4">
+              <div className="bg-amber-50 p-4 rounded-xl border border-amber-200">
+                <h4 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
+                  <Calendar className="w-5 h-5" /> Plan Selection
+                </h4>
+                <div className="grid grid-cols-2 gap-3 mb-4">
+                  {[
+                    { v: 'daily_rent', l: 'Daily Rent', d: 'Pay per day' },
+                    { v: 'weekly_rent', l: 'Weekly Rent', d: '7 days plan' },
+                    { v: 'monthly_rent', l: 'Monthly Rent', d: '30 days plan' },
+                    { v: 'rent_to_own', l: 'Rent to Own', d: 'Own after X months' },
+                    { v: 'share_ev', l: 'Share EV', d: 'Shared bike' },
+                  ].map(plan => (
+                    <button
+                      key={plan.v}
+                      onClick={() => updateField('riderPlan', plan.v)}
+                      className={`p-3 rounded-lg border text-left transition-colors ${
+                        formData.riderPlan === plan.v
+                          ? 'border-accent bg-accent-light/30'
+                          : 'border-slate-200 bg-white hover:border-accent'
+                      }`}
+                    >
+                      <p className="text-sm font-medium text-slate-800">{plan.l}</p>
+                      <p className="text-xs text-slate-500">{plan.d}</p>
+                    </button>
+                  ))}
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Requested EV Model</label>
+                    <select
+                      value={formData.bikeRequested}
+                      onChange={(e) => updateField('bikeRequested', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    >
+                      <option value="">Select Model</option>
+                      <option value="AIMA Lightning">AIMA Lightning</option>
+                      <option value="Yadea DT3">Yadea DT3</option>
+                      <option value="Etron ET50">Etron ET50</option>
+                      <option value="AIMA i3">AIMA i3</option>
+                      <option value="TVS iQube">TVS iQube</option>
+                      <option value="Other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Schedule Date</label>
+                    <input
+                      type="date"
+                      value={formData.scheduleDate}
+                      onChange={(e) => updateField('scheduleDate', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 5 && formData.type === 'biker' && (
+            <div className="space-y-4">
+              <div className="bg-pink-50 p-4 rounded-xl border border-pink-200">
+                <h4 className="font-semibold text-pink-800 mb-3 flex items-center gap-2">
+                  <Users className="w-5 h-5" /> Nominee Details (Emergency Contact)
+                </h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee Name</label>
+                    <input
+                      type="text"
+                      value={formData.nomineeDetails?.name}
+                      onChange={(e) => updateNested('nomineeDetails', 'name', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Nominee name"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Relationship</label>
+                    <select
+                      value={formData.nomineeDetails?.relationship}
+                      onChange={(e) => updateNested('nomineeDetails', 'relationship', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    >
+                      <option value="">Select</option>
+                      <option value="Spouse">Spouse</option>
+                      <option value="Father">Father</option>
+                      <option value="Mother">Mother</option>
+                      <option value="Brother">Brother</option>
+                      <option value="Sister">Sister</option>
+                      <option value="Friend">Friend</option>
+                      <option value="Other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee Phone</label>
+                    <input
+                      type="text"
+                      value={formData.nomineeDetails?.phone}
+                      onChange={(e) => updateNested('nomineeDetails', 'phone', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Phone number"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee NID</label>
+                    <input
+                      type="text"
+                      value={formData.nomineeDetails?.nid}
+                      onChange={(e) => updateNested('nomineeDetails', 'nid', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="NID number"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="p-4 border-t border-slate-100 flex justify-between">
+          <button
+            onClick={() => setStep(Math.max(1, step - 1))}
+            className={`px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 ${step === 1 ? 'invisible' : ''}`}
+          >
+            Previous
+          </button>
+          <div className="flex gap-2">
+            <button onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+              Cancel
+            </button>
+            {step < 5 ? (
+              <button onClick={() => setStep(step + 1)} className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
+                Next
+              </button>
+            ) : (
+              <button
+                onClick={() => onSave(formData)}
+                className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+              >
+                <Check className="w-4 h-4" /> Create Application
+              </button>
+            )}
+          </div>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/maintenance/[id]/page.tsx b/src/app/admin/maintenance/[id]/page.tsx
new file mode 100644
index 0000000..0154d5d
--- /dev/null
+++ b/src/app/admin/maintenance/[id]/page.tsx
@@ -0,0 +1,941 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import {
+  AlertTriangle, Search, Plus, X, Check, Clock, Bike, User, Phone,
+  MapPin, FileText, Image, DollarSign, Wrench, Battery, Key,
+  CheckCircle, XCircle, ChevronLeft, Save, Printer, Send, QrCode,
+  Wallet, Building, Edit, MessageSquare, Calendar, ArrowLeft
+} from 'lucide-react';
+
+type TransactionType = 'deposit' | 'rent_income' | 'investor_funding' | 'investor_withdraw' | 'salary' | 'rent_expense' | 'utility' | 'maintenance' | 'bike_purchase' | 'bike_sale' | 'other_income' | 'other_expense';
+
+type MaintenanceType = 'damage' | 'repair' | 'service' | 'battery_swap' | 'inspection' | 'other';
+type DamageSeverity = 'critical' | 'major' | 'minor' | 'cosmetic';
+type MaintenanceStatus = 'reported' | 'in_progress' | 'parts_ordered' | 'completed' | 'cancelled';
+type PaymentStatus = 'pending' | 'approved' | 'paid' | 'rejected';
+
+interface MaintenanceRecord {
+  id: string;
+  date: string;
+  type: MaintenanceType;
+  severity: DamageSeverity;
+  status: MaintenanceStatus;
+  paymentStatus: PaymentStatus;
+  bikeId: string;
+  bikeModel: string;
+  bikePlate: string;
+  batteryId?: string;
+  reporterId: string;
+  reporterName: string;
+  reporterPhone: string;
+  reporterRole: 'biker' | 'staff' | 'hub';
+  description: string;
+  location: string;
+  estimatedCost: number;
+  actualCost?: number;
+  partsUsed?: string[];
+  images: { id: string; name: string; url: string; uploadedAt: string }[];
+  assignedTo?: string;
+  notes: string[];
+  resolvedAt?: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+const mockMaintenance: MaintenanceRecord[] = [
+  {
+    id: 'MNT-001',
+    date: '2024-03-21',
+    type: 'damage',
+    severity: 'major',
+    status: 'in_progress',
+    paymentStatus: 'approved',
+    bikeId: 'EV-004',
+    bikeModel: 'AIMA Lightning',
+    bikePlate: 'Dhaka Metro Cha-5679',
+    batteryId: 'BAT-044',
+    reporterId: 'BIKER-004',
+    reporterName: 'Sofiq Rahman',
+    reporterPhone: '01712345681',
+    reporterRole: 'biker',
+    description: 'Front fender damaged in accident at Gulshan signal',
+    location: 'Gulshan, Dhaka',
+    estimatedCost: 3500,
+    actualCost: 3200,
+    partsUsed: ['Front fender', 'Mounting brackets'],
+    images: [
+      { id: 'img1', name: 'Damage Front', url: '', uploadedAt: '2024-03-21' },
+      { id: 'img2', name: 'Damage Side', url: '', uploadedAt: '2024-03-21' },
+    ],
+    assignedTo: 'Service Center A',
+    notes: ['Parts ordered from supplier'],
+    createdAt: '2024-03-21T10:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-002',
+    date: '2024-03-20',
+    type: 'service',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'paid',
+    bikeId: 'EV-002',
+    bikeModel: 'Yadea DT3',
+    bikePlate: 'Dhaka Metro Ba-1234',
+    batteryId: 'BAT-021',
+    reporterId: 'BIKER-002',
+    reporterName: 'Karim Hasan',
+    reporterPhone: '01712345679',
+    reporterRole: 'biker',
+    description: 'Routine service - brake adjustment and chain lubrication',
+    location: 'Banani Hub',
+    estimatedCost: 500,
+    actualCost: 450,
+    images: [],
+    notes: ['Service completed'],
+    resolvedAt: '2024-03-20T14:00:00',
+    createdAt: '2024-03-20T08:00:00',
+    createdBy: 'Hub Staff',
+  },
+  {
+    id: 'MNT-003',
+    date: '2024-03-19',
+    type: 'battery_swap',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'pending',
+    bikeId: 'EV-007',
+    bikeModel: 'Etron ET50',
+    bikePlate: 'Dhaka Metro Ca-8901',
+    reporterId: 'BIKER-007',
+    reporterName: 'Jamal',
+    reporterPhone: '01712345687',
+    reporterRole: 'biker',
+    description: 'Battery not holding charge properly - need replacement',
+    location: 'Dhanmondi, Dhaka',
+    estimatedCost: 0,
+    images: [],
+    notes: ['Battery replaced under warranty'],
+    resolvedAt: '2024-03-19T16:00:00',
+    createdAt: '2024-03-19T12:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-004',
+    date: '2024-03-18',
+    type: 'repair',
+    severity: 'critical',
+    status: 'in_progress',
+    paymentStatus: 'pending',
+    bikeId: 'EV-010',
+    bikeModel: 'TVS iQube',
+    bikePlate: 'Dhaka Metro Da-4567',
+    reporterId: 'BIKER-010',
+    reporterName: 'Ripon',
+    reporterPhone: '01712345690',
+    reporterRole: 'biker',
+    description: 'Motor issue - bike not moving properly',
+    location: 'Mirpur, Dhaka',
+    estimatedCost: 8000,
+    images: [
+      { id: 'img3', name: 'Motor Damage', url: '', uploadedAt: '2024-03-18' },
+    ],
+    assignedTo: 'Authorized Service Center',
+    notes: ['Motor needs replacement - ordered', 'Waiting for parts'],
+    createdAt: '2024-03-18T09:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-005',
+    date: '2024-03-17',
+    type: 'inspection',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'paid',
+    bikeId: 'EV-001',
+    bikeModel: 'AIMA Lightning',
+    bikePlate: 'Dhaka Metro Aa-1111',
+    reporterId: 'Hub-01',
+    reporterName: 'Gulshan Hub',
+    reporterPhone: '02-1234567',
+    reporterRole: 'hub',
+    description: 'Monthly inspection completed',
+    location: 'Gulshan Hub',
+    estimatedCost: 300,
+    actualCost: 250,
+    images: [],
+    notes: ['All checks passed'],
+    resolvedAt: '2024-03-17T15:00:00',
+    createdAt: '2024-03-17T10:00:00',
+    createdBy: 'Hub Staff',
+  },
+  {
+    id: 'MNT-006',
+    date: '2024-03-15',
+    type: 'damage',
+    severity: 'cosmetic',
+    status: 'completed',
+    paymentStatus: 'rejected',
+    bikeId: 'EV-005',
+    bikeModel: 'Yadea DT3',
+    bikePlate: 'Dhaka Metro Ba-5678',
+    reporterId: 'BIKER-005',
+    reporterName: 'Rahim',
+    reporterPhone: '01712345685',
+    reporterRole: 'biker',
+    description: 'Minor scratch on mirror - customer dropped bike slowly',
+    location: 'Uttara, Dhaka',
+    estimatedCost: 500,
+    images: [],
+    notes: ['Denied - user responsibility'],
+    createdAt: '2024-03-15T14:00:00',
+    createdBy: 'Admin',
+  },
+];
+
+const statusColors: Record<string, string> = {
+  reported: 'bg-amber-100 text-amber-700',
+  in_progress: 'bg-blue-100 text-blue-700',
+  parts_ordered: 'bg-purple-100 text-purple-700',
+  completed: 'bg-green-100 text-green-700',
+  cancelled: 'bg-red-100 text-red-700',
+};
+
+const severityColors: Record<string, string> = {
+  critical: 'bg-red-100 text-red-700',
+  major: 'bg-orange-100 text-orange-700',
+  minor: 'bg-amber-100 text-amber-700',
+  cosmetic: 'bg-slate-100 text-slate-700',
+};
+
+const paymentColors: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  approved: 'bg-blue-100 text-blue-700',
+  paid: 'bg-green-100 text-green-700',
+  rejected: 'bg-red-100 text-red-700',
+};
+
+const typeLabels: Record<string, string> = {
+  damage: 'Damage',
+  repair: 'Repair',
+  service: 'Service',
+  battery_swap: 'Battery Swap',
+  inspection: 'Inspection',
+  other: 'Other',
+};
+
+export default function MaintenanceDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [record, setRecord] = useState<MaintenanceRecord | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [showCompleteModal, setShowCompleteModal] = useState(false);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [showInvoiceModal, setShowInvoiceModal] = useState(false);
+  const [showAddNoteModal, setShowAddNoteModal] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<MaintenanceRecord>>({});
+  const [newNoteText, setNewNoteText] = useState('');
+  const [actualCost, setActualCost] = useState('');
+
+  useEffect(() => {
+    const found = mockMaintenance.find(r => r.id === id);
+    if (found) {
+      setRecord(found);
+      setEditForm(found);
+      setActualCost(found.actualCost?.toString() || found.estimatedCost.toString());
+    }
+  }, [id]);
+
+  if (!record) {
+    return (
+      <div className="p-6 flex items-center justify-center min-h-[50vh]">
+        <div className="text-center">
+          <Wrench className="w-16 h-16 text-slate-300 mx-auto mb-4" />
+          <p className="text-slate-500">Record not found</p>
+          <button
+            onClick={() => router.push('/admin/maintenance')}
+            className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
+          >
+            Back to Maintenance
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSaveEdit = () => {
+    setRecord(prev => prev ? { ...prev, ...editForm } : null);
+    setEditMode(false);
+  };
+
+  const handleComplete = () => {
+    if (!record) return;
+    const cost = parseInt(actualCost) || record.estimatedCost;
+    setRecord(prev => prev ? {
+      ...prev,
+      status: 'completed',
+      resolvedAt: new Date().toISOString().split('T')[0],
+      actualCost: cost
+    } : null);
+    setShowCompleteModal(false);
+  };
+
+  const handlePayment = (source: 'bank' | 'cash' | 'biker') => {
+    if (!record) return;
+    const cost = record.actualCost || record.estimatedCost;
+
+    setRecord(prev => prev ? { ...prev, paymentStatus: 'paid' } : null);
+    setShowPaymentModal(false);
+    setShowInvoiceModal(true);
+  };
+
+  const handleGenerateInvoice = () => {
+    if (!record) return;
+    import('jspdf').then(jsPDF => {
+      const doc = new jsPDF.default();
+      const cost = record.actualCost || record.estimatedCost;
+      const qrData = `INV-${record.id}|${record.bikePlate}|${record.type}|${cost}|${new Date().toISOString().split('T')[0]}`;
+
+      doc.setFontSize(20);
+      doc.setTextColor(6, 95, 70);
+      doc.text('JAIBEN Mobility Ltd', 20, 20);
+
+      doc.setFontSize(14);
+      doc.setTextColor(0);
+      doc.text('Maintenance Invoice', 20, 32);
+
+      doc.setFontSize(10);
+      doc.setTextColor(100);
+      doc.text(`Invoice No: INV-${record.id}`, 20, 42);
+      doc.text(`Date: ${record.date}`, 20, 48);
+      doc.text(`Issue Type: ${typeLabels[record.type]}`, 20, 54);
+      doc.text(`Severity: ${record.severity}`, 20, 60);
+      doc.text(`Status: ${record.status}`, 20, 66);
+
+      doc.setFontSize(11);
+      doc.setTextColor(0);
+      doc.text('Bike Details', 20, 80);
+      doc.setFontSize(10);
+      doc.text(`Bike ID: ${record.bikeId}`, 20, 86);
+      doc.text(`Model: ${record.bikeModel}`, 20, 92);
+      doc.text(`License Plate: ${record.bikePlate}`, 20, 98);
+      if (record.batteryId) doc.text(`Battery ID: ${record.batteryId}`, 20, 104);
+
+      doc.setFontSize(11);
+      doc.text('Reporter', 20, 118);
+      doc.setFontSize(10);
+      doc.text(`Name: ${record.reporterName}`, 20, 124);
+      doc.text(`Phone: ${record.reporterPhone}`, 20, 130);
+      doc.text(`Role: ${record.reporterRole}`, 20, 136);
+
+      doc.setFontSize(11);
+      doc.text('Description', 20, 150);
+      doc.setFontSize(10);
+      const descLines = doc.splitTextToSize(record.description, 170);
+      doc.text(descLines, 20, 156);
+
+      doc.setFontSize(11);
+      doc.text('Service Details', 120, 80);
+      doc.setFontSize(10);
+      doc.text(`Location: ${record.location}`, 120, 86);
+      if (record.assignedTo) doc.text(`Assigned: ${record.assignedTo}`, 120, 92);
+      if (record.resolvedAt) doc.text(`Resolved: ${record.resolvedAt}`, 120, 98);
+
+      doc.setFontSize(11);
+      doc.text('Cost Breakdown', 20, 175);
+      doc.setFontSize(10);
+      doc.text(`Estimated Cost: ৳${record.estimatedCost}`, 20, 181);
+      if (record.actualCost) doc.text(`Actual Cost: ৳${record.actualCost}`, 20, 187);
+      if (record.partsUsed && record.partsUsed.length > 0) {
+        doc.text(`Parts: ${record.partsUsed.join(', ')}`, 20, 193);
+      }
+
+      doc.setFontSize(14);
+      doc.setTextColor(6, 95, 70);
+      doc.text(`Total: ৳${cost}`, 20, 205);
+
+      doc.setFontSize(9);
+      doc.setTextColor(150);
+      doc.text('Generated from JAIBEN Maintenance System', 20, 280);
+      doc.text(`QR: ${qrData}`, 20, 286);
+
+      doc.save(`maintenance-invoice-${record.id}.pdf`);
+    });
+    setShowInvoiceModal(false);
+  };
+
+  const handleAddNote = () => {
+    if (!record || !newNoteText.trim()) return;
+    setRecord(prev => prev ? { ...prev, notes: [...prev.notes, newNoteText] } : null);
+    setNewNoteText('');
+    setShowAddNoteModal(false);
+  };
+
+  return (
+    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
+      <button
+        onClick={() => router.push('/admin/maintenance')}
+        className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
+      >
+        <ArrowLeft className="w-4 h-4" /> Back to Maintenance
+      </button>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+        <div className="p-6 border-b border-slate-100">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-extrabold text-slate-800">{record.id}</h1>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${severityColors[record.severity]}`}>
+                  {record.severity}
+                </span>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[record.status]}`}>
+                  {record.status.replace('_', ' ')}
+                </span>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${paymentColors[record.paymentStatus]}`}>
+                  {record.paymentStatus}
+                </span>
+              </div>
+              <p className="text-slate-500 mt-1">{typeLabels[record.type]} • {record.date}</p>
+            </div>
+            <div className="flex gap-2">
+              {editMode ? (
+                <>
+                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
+                    <Save className="w-4 h-4" /> Save
+                  </button>
+                  <button onClick={() => setEditMode(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                    Cancel
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <Edit className="w-4 h-4" /> Edit
+                  </button>
+                  <button onClick={() => setShowAddNoteModal(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4" /> Note
+                  </button>
+                  {record.status !== 'completed' && (
+                    <button
+                      onClick={() => setShowCompleteModal(true)}
+                      className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+                    >
+                      <Check className="w-4 h-4" /> Complete
+                    </button>
+                  )}
+                  {record.status === 'completed' && record.paymentStatus !== 'paid' && (
+                    <button
+                      onClick={() => setShowPaymentModal(true)}
+                      className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
+                    >
+                      <DollarSign className="w-4 h-4" /> Payment
+                    </button>
+                  )}
+                  {record.paymentStatus === 'paid' && (
+                    <button
+                      onClick={() => setShowInvoiceModal(true)}
+                      className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
+                    >
+                      <Printer className="w-4 h-4" /> Invoice
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
+                <Bike className="w-5 h-5" /> Bike Information
+              </h3>
+              {editMode ? (
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="text-xs text-blue-700 block mb-1">Bike ID</label>
+                    <input
+                      type="text"
+                      value={editForm.bikeId || ''}
+                      onChange={(e) => setEditForm({ ...editForm, bikeId: e.target.value })}
+                      className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs text-blue-700 block mb-1">License Plate</label>
+                    <input
+                      type="text"
+                      value={editForm.bikePlate || ''}
+                      onChange={(e) => setEditForm({ ...editForm, bikePlate: e.target.value })}
+                      className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs text-blue-700 block mb-1">Model</label>
+                    <input
+                      type="text"
+                      value={editForm.bikeModel || ''}
+                      onChange={(e) => setEditForm({ ...editForm, bikeModel: e.target.value })}
+                      className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs text-blue-700 block mb-1">Battery ID</label>
+                    <input
+                      type="text"
+                      value={editForm.batteryId || ''}
+                      onChange={(e) => setEditForm({ ...editForm, batteryId: e.target.value })}
+                      className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-blue-600">Bike ID</span>
+                    <span className="text-sm font-medium text-blue-800">{record.bikeId}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-blue-600">Model</span>
+                    <span className="text-sm font-medium text-blue-800">{record.bikeModel}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-blue-600">License Plate</span>
+                    <span className="text-sm font-medium text-blue-800">{record.bikePlate}</span>
+                  </div>
+                  {record.batteryId && (
+                    <div className="flex justify-between">
+                      <span className="text-sm text-blue-600">Battery ID</span>
+                      <span className="text-sm font-medium text-blue-800">{record.batteryId}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
+                <User className="w-5 h-5" /> Reporter
+              </h3>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm text-green-600">Name</span>
+                  <span className="text-sm font-medium text-green-800">{record.reporterName}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-green-600">Phone</span>
+                  <span className="text-sm font-medium text-green-800">{record.reporterPhone}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-green-600">Role</span>
+                  <span className="text-sm font-medium text-green-800 capitalize">{record.reporterRole}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
+              <h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
+                <FileText className="w-5 h-5" /> Description
+              </h3>
+              {editMode ? (
+                <textarea
+                  value={editForm.description || ''}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm"
+                  rows={3}
+                />
+              ) : (
+                <>
+                  <p className="text-sm text-amber-700 mb-3">{record.description}</p>
+                  <div className="flex items-center gap-2 text-xs text-amber-600">
+                    <MapPin className="w-3 h-3" /> {record.location}
+                  </div>
+                </>
+              )}
+            </div>
+
+            <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+              <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
+                <DollarSign className="w-5 h-5" /> Cost Details
+              </h3>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="bg-white p-3 rounded-lg">
+                  <p className="text-xs text-purple-600">Estimated</p>
+                  {editMode ? (
+                    <input
+                      type="number"
+                      value={editForm.estimatedCost || 0}
+                      onChange={(e) => setEditForm({ ...editForm, estimatedCost: parseInt(e.target.value) })}
+                      className="w-full px-2 py-1 border border-purple-200 rounded text-sm"
+                    />
+                  ) : (
+                    <p className="text-lg font-bold text-purple-800">৳{record.estimatedCost}</p>
+                  )}
+                </div>
+                <div className="bg-white p-3 rounded-lg">
+                  <p className="text-xs text-purple-600">Actual</p>
+                  <p className="text-lg font-bold text-purple-800">৳{record.actualCost || record.estimatedCost}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-cyan-50 p-4 rounded-xl border border-cyan-100">
+              <h3 className="font-semibold text-cyan-800 mb-3 flex items-center gap-2">
+                <User className="w-5 h-5" /> Assigned To
+              </h3>
+              {editMode ? (
+                <select
+                  value={editForm.assignedTo || ''}
+                  onChange={(e) => setEditForm({ ...editForm, assignedTo: e.target.value })}
+                  className="w-full px-3 py-2 border border-cyan-200 rounded-lg text-sm"
+                >
+                  <option value="">Select Service Center</option>
+                  <option value="Service Center A">Service Center A</option>
+                  <option value="Service Center B">Service Center B</option>
+                  <option value="Authorized Service Center">Authorized Service Center</option>
+                  <option value="Gulshan Hub">Gulshan Hub</option>
+                  <option value="Banani Hub">Banani Hub</option>
+                  <option value="Dhanmondi Hub">Dhanmondi Hub</option>
+                </select>
+              ) : (
+                <p className="text-sm text-cyan-700">{record.assignedTo || 'Not assigned'}</p>
+              )}
+            </div>
+
+            <div className="bg-orange-50 p-4 rounded-xl border border-orange-100">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-semibold text-orange-800 flex items-center gap-2">
+                  <Wrench className="w-5 h-5" /> Parts Used
+                </h3>
+                {editMode && (
+                  <select
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        const currentParts = editForm.partsUsed || [];
+                        if (!currentParts.includes(e.target.value)) {
+                          setEditForm({ ...editForm, partsUsed: [...currentParts, e.target.value] });
+                        }
+                        e.target.value = '';
+                      }
+                    }}
+                    className="px-2 py-1 text-xs border border-orange-200 rounded"
+                  >
+                    <option value="">+ Add Part</option>
+                    <option value="Front fender">Front fender</option>
+                    <option value="Rear fender">Rear fender</option>
+                    <option value="Mirror">Mirror</option>
+                    <option value="Headlight">Headlight</option>
+                    <option value="Tail light">Tail light</option>
+                    <option value="Brake pad">Brake pad</option>
+                    <option value="Brake shoe">Brake shoe</option>
+                    <option value="Chain">Chain</option>
+                    <option value="Battery">Battery</option>
+                    <option value="Motor">Motor</option>
+                    <option value="Controller">Controller</option>
+                    <option value="Throttle">Throttle</option>
+                    <option value="Lever">Lever</option>
+                    <option value="Stand">Stand</option>
+                    <option value="Seat">Seat</option>
+                    <option value="Tyre">Tyre</option>
+                    <option value="Tube">Tube</option>
+                    <option value="Mounting brackets">Mounting brackets</option>
+                    <option value="Bolt set">Bolt set</option>
+                  </select>
+                )}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {(editMode ? editForm.partsUsed : record.partsUsed)?.map((part, idx) => (
+                  <span key={idx} className="px-3 py-1 bg-white rounded-full text-sm text-orange-700 border border-orange-200 flex items-center gap-1">
+                    {part}
+                    {editMode && (
+                      <button
+                        onClick={() => {
+                          const updated = [...(editForm.partsUsed || [])];
+                          updated.splice(idx, 1);
+                          setEditForm({ ...editForm, partsUsed: updated });
+                        }}
+                        className="ml-1 text-orange-400 hover:text-red-500"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </span>
+                ))}
+                {(editMode ? editForm.partsUsed : record.partsUsed)?.length === 0 && (
+                  <p className="text-sm text-orange-400">No parts added</p>
+                )}
+              </div>
+            </div>
+
+            <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
+              <h3 className="font-semibold text-indigo-800 mb-3 flex items-center gap-2">
+                <Image className="w-5 h-5" /> Images ({(editMode ? editForm.images : record.images)?.length})
+              </h3>
+              <div className="grid grid-cols-4 gap-2">
+                {(editMode ? editForm.images : record.images)?.map((img) => (
+                  <div key={img.id} className="relative aspect-square bg-white rounded-lg flex flex-col items-center justify-center border border-indigo-100">
+                    <Image className="w-8 h-8 text-indigo-400" />
+                    <span className="text-xs text-indigo-500 mt-1 text-center">{img.name}</span>
+                    {editMode && (
+                      <button
+                        onClick={() => {
+                          const updated = (editForm.images || []).filter((i: any) => i.id !== img.id);
+                          setEditForm({ ...editForm, images: updated });
+                        }}
+                        className="absolute top-1 right-1 w-5 h-5 bg-red-100 rounded-full text-red-500 text-xs flex items-center justify-center"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
+                ))}
+                {editMode && (
+                  <label className="aspect-square bg-white rounded-lg flex flex-col items-center justify-center border border-dashed border-indigo-200 cursor-pointer hover:bg-indigo-50">
+                    <Image className="w-8 h-8 text-indigo-400" />
+                    <span className="text-xs text-indigo-500 mt-1">+ Add</span>
+                    <input type="file" className="hidden" accept="image/*" />
+                  </label>
+                )}
+                {(editMode ? editForm.images : record.images)?.length === 0 && !editMode && (
+                  <p className="text-sm text-indigo-400 col-span-4 text-center py-4">No images</p>
+                )}
+              </div>
+            </div>
+
+            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
+                <MessageSquare className="w-5 h-5" /> Notes ({(editMode ? editForm.notes : record.notes)?.length})
+              </h3>
+              {editMode && (
+                <div className="flex gap-2 mb-3">
+                  <input
+                    type="text"
+                    id="newNoteInput"
+                    placeholder="Add a note..."
+                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    onKeyPress={(e) => {
+                      if (e.key === 'Enter') {
+                        const input = e.currentTarget as HTMLInputElement;
+                        if (input.value.trim()) {
+                          setEditForm({ ...editForm, notes: [...(editForm.notes || []), input.value.trim()] });
+                          input.value = '';
+                        }
+                      }
+                    }}
+                  />
+                  <button
+                    onClick={() => {
+                      const input = document.getElementById('newNoteInput') as HTMLInputElement;
+                      if (input?.value.trim()) {
+                        setEditForm({ ...editForm, notes: [...(editForm.notes || []), input.value.trim()] });
+                        input.value = '';
+                      }
+                    }}
+                    className="px-4 py-2 bg-accent text-white rounded-lg text-sm"
+                  >
+                    Add
+                  </button>
+                </div>
+              )}
+              <div className="space-y-2">
+                {(editMode ? editForm.notes : record.notes)?.map((note, idx) => (
+                  <div key={idx} className="text-sm text-slate-600 p-2 bg-white rounded-lg">
+                    • {note}
+                  </div>
+                ))}
+                {(editMode ? editForm.notes : record.notes)?.length === 0 && (
+                  <p className="text-sm text-slate-400">No notes yet</p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showCompleteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100">
+              <h3 className="font-semibold text-slate-800">Complete Maintenance</h3>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="bg-green-50 p-4 rounded-lg">
+                <p className="text-sm text-green-700">Enter actual cost to complete this record</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-2 block">Actual Cost (৳)</label>
+                <input
+                  type="number"
+                  value={actualCost}
+                  onChange={(e) => setActualCost(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-lg font-bold"
+                />
+              </div>
+              <div className="text-sm text-slate-500">
+                Estimated: ৳{record.estimatedCost}
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowCompleteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button
+                onClick={handleComplete}
+                className="px-4 py-2 bg-green-600 text-white rounded-lg flex items-center gap-2"
+              >
+                <Check className="w-4 h-4" /> Mark Complete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showPaymentModal && record && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div className="p-4 border-b border-slate-100">
+              <h3 className="font-semibold text-slate-800">Process Payment - {record.id}</h3>
+              <p className="text-sm text-slate-500">Amount: ৳{record.actualCost || record.estimatedCost}</p>
+            </div>
+            <div className="p-4 space-y-4">
+              <p className="text-sm text-slate-600 mb-2">Select payment method:</p>
+              <button
+                onClick={() => handlePayment('bank')}
+                className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
+                    <Building className="w-5 h-5 text-blue-600" />
+                  </div>
+                  <div className="text-left">
+                    <p className="font-medium text-slate-800">Bank Transfer</p>
+                    <p className="text-xs text-slate-500">Debit Bank (1200) → Credit Maintenance (5400)</p>
+                  </div>
+                </div>
+              </button>
+              <button
+                onClick={() => handlePayment('cash')}
+                className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-green-500 hover:bg-green-50 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
+                    <Wallet className="w-5 h-5 text-green-600" />
+                  </div>
+                  <div className="text-left">
+                    <p className="font-medium text-slate-800">Cash</p>
+                    <p className="text-xs text-slate-500">Debit Cash (1100) → Credit Maintenance (5400)</p>
+                  </div>
+                </div>
+              </button>
+              <button
+                onClick={() => handlePayment('biker')}
+                className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
+                    <User className="w-5 h-5 text-purple-600" />
+                  </div>
+                  <div className="text-left">
+                    <p className="font-medium text-slate-800">Biker Wallet</p>
+                    <p className="text-xs text-slate-500">Deduct from rider wallet</p>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end">
+              <button onClick={() => setShowPaymentModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showInvoiceModal && record && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Invoice Generated!</h3>
+            </div>
+            <div className="p-6 text-center">
+              <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
+                <CheckCircle className="w-10 h-10 text-green-600" />
+              </div>
+              <p className="text-lg font-semibold text-slate-800 mb-2">Payment Complete</p>
+              <p className="text-slate-600 mb-4">Invoice INV-{record.id} is ready</p>
+
+              <div className="bg-slate-50 p-4 rounded-lg text-left mb-4">
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-500">Maintenance ID</span>
+                  <span className="text-sm font-medium">{record.id}</span>
+                </div>
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-500">Bike</span>
+                  <span className="text-sm font-medium">{record.bikePlate}</span>
+                </div>
+                <div className="flex justify-between mb-2">
+                  <span className="text-sm text-slate-500">Amount Paid</span>
+                  <span className="text-sm font-bold text-green-600">৳{record.actualCost || record.estimatedCost}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-center mb-4">
+                <div className="w-24 h-24 bg-white border-2 border-slate-200 rounded-lg flex items-center justify-center">
+                  <QrCode className="w-16 h-16 text-slate-400" />
+                </div>
+              </div>
+              <p className="text-xs text-slate-400">Scan QR for verification</p>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-between">
+              <button
+                onClick={() => setShowInvoiceModal(false)}
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg"
+              >
+                Close
+              </button>
+              <button
+                onClick={handleGenerateInvoice}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg flex items-center gap-2"
+              >
+                <Printer className="w-4 h-4" /> Download PDF
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showAddNoteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100">
+              <h3 className="font-semibold text-slate-800">Add Note</h3>
+            </div>
+            <div className="p-4">
+              <textarea
+                value={newNoteText}
+                onChange={(e) => setNewNoteText(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                rows={4}
+                placeholder="Enter note..."
+              />
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowAddNoteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button
+                onClick={handleAddNote}
+                disabled={!newNoteText.trim()}
+                className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50"
+              >
+                Save Note
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/maintenance/page.tsx b/src/app/admin/maintenance/page.tsx
new file mode 100644
index 0000000..bef82ed
--- /dev/null
+++ b/src/app/admin/maintenance/page.tsx
@@ -0,0 +1,958 @@
+'use client';
+
+import Link from 'next/link';
+
+import { useState } from 'react';
+import { 
+  AlertTriangle, Search, Plus, X, Check, Clock, Bike, User, Phone, 
+  MapPin, FileText, Image, DollarSign, Wrench, Battery, Key,
+  CheckCircle, XCircle, ChevronDown, ChevronUp, Download, Eye, Edit,
+  MessageSquare, Filter, Calendar, Save, Printer, Send
+} from 'lucide-react';
+
+type TransactionType = 'deposit' | 'rent_income' | 'investor_funding' | 'investor_withdraw' | 'salary' | 'rent_expense' | 'utility' | 'maintenance' | 'bike_purchase' | 'bike_sale' | 'other_income' | 'other_expense';
+
+type MaintenanceType = 'damage' | 'repair' | 'service' | 'battery_swap' | 'inspection' | 'other';
+type DamageSeverity = 'critical' | 'major' | 'minor' | 'cosmetic';
+type MaintenanceStatus = 'reported' | 'in_progress' | 'parts_ordered' | 'completed' | 'cancelled';
+type PaymentStatus = 'pending' | 'approved' | 'paid' | 'rejected';
+
+interface MaintenanceRecord {
+  id: string;
+  date: string;
+  type: MaintenanceType;
+  severity: DamageSeverity;
+  status: MaintenanceStatus;
+  paymentStatus: PaymentStatus;
+  
+  bikeId: string;
+  bikeModel: string;
+  bikePlate: string;
+  batteryId?: string;
+  
+  reporterId: string;
+  reporterName: string;
+  reporterPhone: string;
+  reporterRole: 'biker' | 'staff' | 'hub';
+  
+  description: string;
+  location: string;
+  
+  estimatedCost: number;
+  actualCost?: number;
+  partsUsed?: string[];
+  
+  images: { id: string; name: string; url: string; uploadedAt: string }[];
+  bills?: { id: string; name: string; url: string }[];
+  
+  assignedTo?: string;
+  notes: string[];
+  resolvedAt?: string;
+  
+  createdAt: string;
+  createdBy: string;
+}
+
+const mockMaintenance: MaintenanceRecord[] = [
+  {
+    id: 'MNT-001',
+    date: '2024-03-21',
+    type: 'damage',
+    severity: 'major',
+    status: 'in_progress',
+    paymentStatus: 'approved',
+    bikeId: 'EV-004',
+    bikeModel: 'AIMA Lightning',
+    bikePlate: 'Dhaka Metro Cha-5679',
+    batteryId: 'BAT-044',
+    reporterId: 'BIKER-004',
+    reporterName: 'Sofiq Rahman',
+    reporterPhone: '01712345681',
+    reporterRole: 'biker',
+    description: 'Front fender damaged in accident at Gulshan signal',
+    location: 'Gulshan, Dhaka',
+    estimatedCost: 3500,
+    actualCost: 3200,
+    partsUsed: ['Front fender', 'Mounting brackets'],
+    images: [
+      { id: 'img1', name: 'Damage Front', url: '', uploadedAt: '2024-03-21' },
+      { id: 'img2', name: 'Damage Side', url: '', uploadedAt: '2024-03-21' },
+    ],
+    assignedTo: 'Service Center A',
+    notes: ['Parts ordered from supplier'],
+    createdAt: '2024-03-21T10:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-002',
+    date: '2024-03-20',
+    type: 'service',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'paid',
+    bikeId: 'EV-002',
+    bikeModel: 'Yadea DT3',
+    bikePlate: 'Dhaka Metro Ba-1234',
+    batteryId: 'BAT-021',
+    reporterId: 'BIKER-002',
+    reporterName: 'Karim Hasan',
+    reporterPhone: '01712345679',
+    reporterRole: 'biker',
+    description: 'Routine service - brake adjustment and chain lubrication',
+    location: 'Banani Hub',
+    estimatedCost: 500,
+    actualCost: 450,
+    images: [],
+    notes: ['Service completed'],
+    resolvedAt: '2024-03-20T14:00:00',
+    createdAt: '2024-03-20T08:00:00',
+    createdBy: 'Hub Staff',
+  },
+  {
+    id: 'MNT-003',
+    date: '2024-03-19',
+    type: 'battery_swap',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'pending',
+    bikeId: 'EV-007',
+    bikeModel: 'Etron ET50',
+    bikePlate: 'Dhaka Metro Ca-8901',
+    reporterId: 'BIKER-007',
+    reporterName: 'Jamal',
+    reporterPhone: '01712345687',
+    reporterRole: 'biker',
+    description: 'Battery not holding charge properly - need replacement',
+    location: 'Dhanmondi, Dhaka',
+    estimatedCost: 0,
+    images: [],
+    notes: ['Battery replaced under warranty'],
+    resolvedAt: '2024-03-19T16:00:00',
+    createdAt: '2024-03-19T12:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-004',
+    date: '2024-03-18',
+    type: 'repair',
+    severity: 'critical',
+    status: 'parts_ordered',
+    paymentStatus: 'pending',
+    bikeId: 'EV-010',
+    bikeModel: 'TVS iQube',
+    bikePlate: 'Dhaka Metro Da-4567',
+    reporterId: 'BIKER-010',
+    reporterName: 'Ripon',
+    reporterPhone: '01712345690',
+    reporterRole: 'biker',
+    description: 'Motor issue - bike not moving properly',
+    location: 'Mirpur, Dhaka',
+    estimatedCost: 8000,
+    images: [
+      { id: 'img3', name: 'Motor Damage', url: '', uploadedAt: '2024-03-18' },
+    ],
+    assignedTo: 'Authorized Service Center',
+    notes: ['Motor needs replacement - ordered', 'Waiting for parts'],
+    createdAt: '2024-03-18T09:00:00',
+    createdBy: 'Admin',
+  },
+  {
+    id: 'MNT-005',
+    date: '2024-03-17',
+    type: 'inspection',
+    severity: 'minor',
+    status: 'completed',
+    paymentStatus: 'paid',
+    bikeId: 'EV-001',
+    bikeModel: 'AIMA Lightning',
+    bikePlate: 'Dhaka Metro Aa-1111',
+    reporterId: 'Hub-01',
+    reporterName: 'Gulshan Hub',
+    reporterPhone: '02-1234567',
+    reporterRole: 'hub',
+    description: 'Monthly inspection completed',
+    location: 'Gulshan Hub',
+    estimatedCost: 300,
+    actualCost: 250,
+    images: [],
+    notes: ['All checks passed'],
+    resolvedAt: '2024-03-17T15:00:00',
+    createdAt: '2024-03-17T10:00:00',
+    createdBy: 'Hub Staff',
+  },
+  {
+    id: 'MNT-006',
+    date: '2024-03-15',
+    type: 'damage',
+    severity: 'cosmetic',
+    status: 'completed',
+    paymentStatus: 'rejected',
+    bikeId: 'EV-005',
+    bikeModel: 'Yadea DT3',
+    bikePlate: 'Dhaka Metro Ba-5678',
+    reporterId: 'BIKER-005',
+    reporterName: 'Rahim',
+    reporterPhone: '01712345685',
+    reporterRole: 'biker',
+    description: 'Minor scratch on mirror - customer dropped bike slowly',
+    location: 'Uttara, Dhaka',
+    estimatedCost: 500,
+    images: [],
+    notes: ['Denied - user responsibility'],
+    createdAt: '2024-03-15T14:00:00',
+    createdBy: 'Admin',
+  },
+];
+
+const statusColors: Record<string, string> = {
+  reported: 'bg-amber-100 text-amber-700',
+  in_progress: 'bg-blue-100 text-blue-700',
+  parts_ordered: 'bg-purple-100 text-purple-700',
+  completed: 'bg-green-100 text-green-700',
+  cancelled: 'bg-red-100 text-red-700',
+};
+
+const severityColors: Record<string, string> = {
+  critical: 'bg-red-100 text-red-700',
+  major: 'bg-orange-100 text-orange-700',
+  minor: 'bg-amber-100 text-amber-700',
+  cosmetic: 'bg-slate-100 text-slate-700',
+};
+
+const paymentColors: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  approved: 'bg-blue-100 text-blue-700',
+  paid: 'bg-green-100 text-green-700',
+  rejected: 'bg-red-100 text-red-700',
+};
+
+const typeLabels: Record<string, string> = {
+  damage: 'Damage',
+  repair: 'Repair',
+  service: 'Service',
+  battery_swap: 'Battery Swap',
+  inspection: 'Inspection',
+  other: 'Other',
+};
+
+const typeIcons: Record<string, any> = {
+  damage: AlertTriangle,
+  repair: Wrench,
+  service: Wrench,
+  battery_swap: Battery,
+  inspection: Search,
+  other: FileText,
+};
+
+export default function MaintenancePage() {
+  const [activeTab, setActiveTab] = useState<'all' | MaintenanceType>('all');
+  const [records, setRecords] = useState<MaintenanceRecord[]>(mockMaintenance);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [selectedRecord, setSelectedRecord] = useState<MaintenanceRecord | null>(null);
+  const [showDetailsModal, setShowDetailsModal] = useState(false);
+  const [showNewModal, setShowNewModal] = useState(false);
+  const [showAddExpenseModal, setShowAddExpenseModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showAddNoteModal, setShowAddNoteModal] = useState(false);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [expandedNotes, setExpandedNotes] = useState<string[]>([]);
+  const [newNoteText, setNewNoteText] = useState('');
+  const [editForm, setEditForm] = useState<Partial<MaintenanceRecord>>({});
+
+  const filteredRecords = records.filter(r => {
+    const matchesTab = activeTab === 'all' || r.type === activeTab;
+    const matchesSearch = !searchQuery || 
+      r.bikeId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      r.bikeModel.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      r.bikePlate.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      r.reporterName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      r.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || r.status === statusFilter;
+    return matchesTab && matchesSearch && matchesStatus;
+  });
+
+  const stats = {
+    critical: records.filter(r => r.severity === 'critical' && r.status !== 'completed').length,
+    inProgress: records.filter(r => r.status === 'in_progress' || r.status === 'parts_ordered').length,
+    completed: records.filter(r => r.status === 'completed').length,
+    pendingPayment: records.filter(r => r.paymentStatus === 'pending' && r.status === 'completed').length,
+    totalCost: records.reduce((sum, r) => sum + (r.actualCost || r.estimatedCost), 0),
+  };
+
+  const toggleNotes = (id: string) => {
+    setExpandedNotes(prev => 
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
+  const handleAddNote = () => {
+    if (!selectedRecord || !newNoteText.trim()) return;
+    setRecords(prev => prev.map(r => 
+      r.id === selectedRecord.id 
+        ? { ...r, notes: [...r.notes, newNoteText] }
+        : r
+    ));
+    setNewNoteText('');
+    setShowAddNoteModal(false);
+  };
+
+  const handleCompleteRecord = () => {
+    if (!selectedRecord) return;
+    setRecords(prev => prev.map(r => 
+      r.id === selectedRecord.id 
+        ? { ...r, status: 'completed', resolvedAt: new Date().toISOString().split('T')[0] }
+        : r
+    ));
+    alert(`Record ${selectedRecord.id} marked as completed!`);
+    setShowDetailsModal(false);
+  };
+
+  const handlePayment = (source: 'biker' | 'company') => {
+    if (!selectedRecord) return;
+    const cost = selectedRecord.actualCost || selectedRecord.estimatedCost;
+    
+    setRecords(prev => prev.map(r => 
+      r.id === selectedRecord.id 
+        ? { ...r, paymentStatus: 'paid' }
+        : r
+    ));
+
+    const journalEntry = {
+      id: `MNT-JE-${Date.now()}`,
+      date: new Date().toISOString().split('T')[0],
+      reference: selectedRecord.id,
+      description: `${selectedRecord.type === 'damage' ? 'Damage' : 'Maintenance'} - ${selectedRecord.bikePlate} - ${source === 'biker' ? 'Biker' : 'Company'} paid`,
+      entries: source === 'biker' ? [
+        { accountId: 'ASSET-101', accountCode: '1100', accountName: 'Cash in Hand', debit: cost, credit: 0 },
+        { accountId: 'EXP-504', accountCode: '5400', accountName: 'Maintenance Expense', debit: 0, credit: cost },
+      ] : [
+        { accountId: 'ASSET-102', accountCode: '1200', accountName: 'Bank - City Bank', debit: cost, credit: 0 },
+        { accountId: 'EXP-504', accountCode: '5400', accountName: 'Maintenance Expense', debit: 0, credit: cost },
+      ],
+      isPosted: true,
+      isAuto: true,
+      sourceType: 'maintenance' as TransactionType,
+      createdAt: new Date().toISOString(),
+      createdBy: 'System',
+    };
+
+    alert(`Payment processed!\n\nAmount: ৳${cost}\nSource: ${source === 'biker' ? 'Biker Wallet' : 'Company Account'}\n\nAuto-journal entry created: ${journalEntry.reference}\n\nDebit: ${source === 'biker' ? 'Cash in Hand (1100)' : 'Bank - City Bank (1200)'}\nCredit: Maintenance Expense (5400)`);
+    setShowPaymentModal(false);
+    setShowDetailsModal(false);
+  };
+
+  const handleGenerateInvoice = () => {
+    if (!selectedRecord) return;
+    import('jspdf').then(jsPDF => {
+      const doc = new jsPDF.default();
+      const cost = selectedRecord.actualCost || selectedRecord.estimatedCost;
+      
+      doc.setFontSize(18);
+      doc.setTextColor(6, 95, 70);
+      doc.text('JAIBEN Mobility Ltd', 20, 20);
+      
+      doc.setFontSize(14);
+      doc.setTextColor(0);
+      doc.text('Maintenance Invoice', 20, 32);
+      
+      doc.setFontSize(10);
+      doc.setTextColor(100);
+      doc.text(`Invoice No: INV-${selectedRecord.id}`, 20, 42);
+      doc.text(`Date: ${selectedRecord.date}`, 20, 48);
+      doc.text(`Issue Type: ${selectedRecord.type}`, 20, 54);
+      doc.text(`Severity: ${selectedRecord.severity}`, 20, 60);
+      
+      doc.setFontSize(11);
+      doc.setTextColor(0);
+      doc.text('Bike Details', 20, 72);
+      doc.setFontSize(10);
+      doc.text(`Bike ID: ${selectedRecord.bikeId}`, 20, 78);
+      doc.text(`Model: ${selectedRecord.bikeModel}`, 20, 84);
+      doc.text(`License Plate: ${selectedRecord.bikePlate}`, 20, 90);
+      if (selectedRecord.batteryId) doc.text(`Battery ID: ${selectedRecord.batteryId}`, 20, 96);
+      
+      doc.setFontSize(11);
+      doc.text('Description', 20, 108);
+      doc.setFontSize(10);
+      const descLines = doc.splitTextToSize(selectedRecord.description, 170);
+      doc.text(descLines, 20, 114);
+      
+      doc.setFontSize(11);
+      doc.text('Cost Breakdown', 20, 130);
+      doc.setFontSize(10);
+      doc.text(`Estimated Cost: ৳${selectedRecord.estimatedCost}`, 20, 136);
+      if (selectedRecord.actualCost) doc.text(`Actual Cost: ৳${selectedRecord.actualCost}`, 20, 142);
+      
+      doc.setFontSize(12);
+      doc.setTextColor(6, 95, 70);
+      doc.text(`Total: ৳${cost}`, 20, 152);
+      
+      doc.setFontSize(9);
+      doc.setTextColor(150);
+      doc.text('Generated from JAIBEN Maintenance System', 20, 280);
+      
+      doc.save(`maintenance-invoice-${selectedRecord.id}.pdf`);
+    });
+  };
+
+  return (
+    <div className="p-4 lg:p-6">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
+        <div>
+          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Damage & Maintenance</h1>
+          <p className="text-sm text-slate-500 mt-1">Track bike damage, repairs, and service records</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button 
+            onClick={() => setShowNewModal(true)}
+            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" /> Report Issue
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
+              <AlertTriangle className="w-6 h-6 text-red-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-extrabold text-slate-800">{stats.critical}</p>
+              <p className="text-sm text-slate-500">Critical</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
+              <Wrench className="w-6 h-6 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-extrabold text-slate-800">{stats.inProgress}</p>
+              <p className="text-sm text-slate-500">In Progress</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
+              <CheckCircle className="w-6 h-6 text-green-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-extrabold text-slate-800">{stats.completed}</p>
+              <p className="text-sm text-slate-500">Completed</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
+              <DollarSign className="w-6 h-6 text-amber-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-extrabold text-slate-800">{stats.pendingPayment}</p>
+              <p className="text-sm text-slate-500">Pending Payment</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center">
+              <DollarSign className="w-6 h-6 text-purple-600" />
+            </div>
+            <div>
+              <p className="text-lg font-extrabold text-slate-800">৳{stats.totalCost.toLocaleString()}</p>
+              <p className="text-sm text-slate-500">Total Cost</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-100 mb-6">
+        <div className="p-4 border-b border-slate-100">
+          <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+            <div className="flex items-center gap-2 flex-wrap">
+              <button 
+                onClick={() => setActiveTab('all')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium ${activeTab === 'all' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                All
+              </button>
+              <button 
+                onClick={() => setActiveTab('damage')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'damage' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <AlertTriangle className="w-4 h-4" /> Damage
+              </button>
+              <button 
+                onClick={() => setActiveTab('repair')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'repair' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Wrench className="w-4 h-4" /> Repair
+              </button>
+              <button 
+                onClick={() => setActiveTab('service')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'service' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Wrench className="w-4 h-4" /> Service
+              </button>
+              <button 
+                onClick={() => setActiveTab('battery_swap')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium flex items-center gap-1 ${activeTab === 'battery_swap' ? 'bg-slate-800 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <Battery className="w-4 h-4" /> Battery
+              </button>
+            </div>
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                <input
+                  type="text"
+                  placeholder="Search by bike ID, plate, reporter..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full lg:w-64 pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm"
+                />
+              </div>
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600"
+            >
+              <option value="all">All Status</option>
+              <option value="reported">Reported</option>
+              <option value="in_progress">In Progress</option>
+              <option value="parts_ordered">Parts Ordered</option>
+              <option value="completed">Completed</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="divide-y divide-slate-50">
+          {filteredRecords.map(record => {
+            const TypeIcon = typeIcons[record.type];
+            return (
+              <Link key={record.id} href={`/admin/maintenance/${record.id}`} className="block p-5 hover:bg-slate-50 transition-colors">
+                <div className="flex flex-col lg:flex-row lg:items-start gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center">
+                      <TypeIcon className="w-6 h-6 text-slate-600" />
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <p className="font-semibold text-slate-800">{record.id}</p>
+                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${severityColors[record.severity]}`}>
+                          {record.severity}
+                        </span>
+                      </div>
+                      <p className="text-sm text-slate-500 flex items-center gap-2">
+                        <Bike className="w-3 h-3" /> {record.bikeModel} ({record.bikePlate})
+                        <span className="text-slate-300">|</span>
+                        <User className="w-3 h-3" /> {record.reporterName}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1">
+                    <p className="text-sm text-slate-700">{record.description}</p>
+                    <div className="flex flex-wrap gap-4 text-sm text-slate-500 mt-1">
+                      <p className="flex items-center gap-1">
+                        <Clock className="w-3 h-3" /> {record.date}
+                      </p>
+                      <p className="flex items-center gap-1">
+                        <MapPin className="w-3 h-3" /> {record.location}
+                      </p>
+                      {record.images.length > 0 && (
+                        <p className="flex items-center gap-1 text-blue-600">
+                          <Image className="w-3 h-3" /> {record.images.length} photos
+                        </p>
+                      )}
+                      {record.notes.length > 0 && (
+                        <button 
+                          onClick={() => toggleNotes(record.id)}
+                          className="flex items-center gap-1 text-purple-600"
+                        >
+                          <MessageSquare className="w-3 h-3" /> {record.notes.length} notes
+                          {expandedNotes.includes(record.id) ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+                        </button>
+                      )}
+                    </div>
+                    
+                    {expandedNotes.includes(record.id) && record.notes.length > 0 && (
+                      <div className="mt-2 p-3 bg-purple-50 rounded-lg space-y-1">
+                        {record.notes.map((note, idx) => (
+                          <p key={idx} className="text-xs text-slate-700">• {note}</p>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className="flex items-center gap-3">
+                    <div className="text-right">
+                      <p className="text-sm font-medium text-slate-700">৳{record.actualCost || record.estimatedCost}</p>
+                      <p className="text-xs text-slate-500">{record.paymentStatus === 'paid' ? 'Paid' : record.paymentStatus === 'approved' ? 'Approved' : 'Payment ' + record.paymentStatus}</p>
+                    </div>
+                    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[record.status]}`}>
+                      {record.status === 'reported' && <Clock className="w-3 h-3" />}
+                      {record.status === 'in_progress' && <Wrench className="w-3 h-3" />}
+                      {record.status === 'parts_ordered' && <AlertTriangle className="w-3 h-3" />}
+                      {record.status === 'completed' && <CheckCircle className="w-3 h-3" />}
+                      {record.status === 'cancelled' && <XCircle className="w-3 h-3" />}
+                      {record.status.replace('_', ' ')}
+                    </span>
+                    
+                    <div className="flex gap-1">
+                      <button 
+                        onClick={(e) => { e.preventDefault(); setSelectedRecord(record); setShowDetailsModal(true); }}
+                        className="p-2 hover:bg-slate-100 rounded-lg text-slate-500"
+                        title="View Details"
+                      >
+                        <Eye className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+          
+          {filteredRecords.length === 0 && (
+            <div className="p-12 text-center">
+              <Wrench className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+              <p className="text-slate-500">No records found</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showDetailsModal && selectedRecord && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <div>
+                <h3 className="font-semibold text-slate-800">Maintenance Details - {selectedRecord.id}</h3>
+                <p className="text-xs text-slate-500">{selectedRecord.date}</p>
+              </div>
+              <button onClick={() => setShowDetailsModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto max-h-[70vh]">
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Type / Severity</p>
+                  <p className="font-semibold text-slate-800 capitalize">{selectedRecord.type} / {selectedRecord.severity}</p>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Status</p>
+                  <span className={`inline-flex items-center gap-1 text-sm font-medium px-2 py-1 rounded-full ${statusColors[selectedRecord.status]}`}>
+                    {selectedRecord.status.replace('_', ' ')}
+                  </span>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Bike</p>
+                  <p className="font-semibold text-slate-800">{selectedRecord.bikeModel}</p>
+                  <p className="text-sm text-slate-600">{selectedRecord.bikePlate} (ID: {selectedRecord.bikeId})</p>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-xs text-slate-500">Battery</p>
+                  <p className="font-semibold text-slate-800">{selectedRecord.batteryId || 'N/A'}</p>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <h4 className="font-semibold text-slate-700 mb-3">Reported By</h4>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="font-medium text-slate-800">{selectedRecord.reporterName}</p>
+                  <p className="text-sm text-slate-600">{selectedRecord.reporterPhone}</p>
+                  <p className="text-xs text-slate-500 capitalize">{selectedRecord.reporterRole}</p>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <h4 className="font-semibold text-slate-700 mb-3">Description</h4>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <p className="text-slate-700">{selectedRecord.description}</p>
+                  <p className="text-sm text-slate-500 mt-2 flex items-center gap-1">
+                    <MapPin className="w-3 h-3" /> {selectedRecord.location}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-green-50 p-4 rounded-lg border border-green-200">
+                  <p className="text-xs text-green-700">Estimated Cost</p>
+                  <p className="text-xl font-bold text-green-700">৳{selectedRecord.estimatedCost}</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                  <p className="text-xs text-blue-700">Actual Cost</p>
+                  <p className="text-xl font-bold text-blue-700">৳{selectedRecord.actualCost || 0}</p>
+                </div>
+              </div>
+
+              {selectedRecord.partsUsed && selectedRecord.partsUsed.length > 0 && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3">Parts Used</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedRecord.partsUsed.map((part, idx) => (
+                      <span key={idx} className="px-3 py-1 bg-slate-100 rounded-full text-sm text-slate-600">
+                        {part}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedRecord.images.length > 0 && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3">Images ({selectedRecord.images.length})</h4>
+                  <div className="grid grid-cols-4 gap-2">
+                    {selectedRecord.images.map((img) => (
+                      <div key={img.id} className="aspect-square bg-slate-100 rounded-lg flex flex-col items-center justify-center">
+                        <Image className="w-8 h-8 text-slate-400" />
+                        <span className="text-xs text-slate-500 mt-1">{img.name}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedRecord.notes.length > 0 && (
+                <div className="mb-6">
+                  <h4 className="font-semibold text-slate-700 mb-3">Notes</h4>
+                  <div className="space-y-2">
+                    {selectedRecord.notes.map((note, idx) => (
+                      <div key={idx} className="p-3 bg-purple-50 rounded-lg">
+                        <p className="text-sm text-slate-700">{note}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-between">
+              <div className="flex gap-2">
+                <button 
+                  onClick={() => { setShowDetailsModal(false); setShowEditModal(true); }}
+                  className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2"
+                >
+                  <Edit className="w-4 h-4" /> Edit Record
+                </button>
+                <button 
+                  onClick={() => { setShowDetailsModal(false); setShowAddNoteModal(true); }}
+                  className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2"
+                >
+                  <MessageSquare className="w-4 h-4" /> Add Note
+                </button>
+              </div>
+              <div className="flex gap-2">
+                {selectedRecord.status !== 'completed' && (
+                  <button 
+                    onClick={handleCompleteRecord}
+                    className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
+                  >
+                    <Check className="w-4 h-4" /> Mark Complete
+                  </button>
+                )}
+                {selectedRecord.status === 'completed' && selectedRecord.paymentStatus !== 'paid' && (
+                  <button 
+                    onClick={() => { setShowDetailsModal(false); setShowPaymentModal(true); }}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
+                  >
+                    <DollarSign className="w-4 h-4" /> Process Payment
+                  </button>
+                )}
+                {selectedRecord.paymentStatus === 'paid' && (
+                  <button 
+                    onClick={handleGenerateInvoice}
+                    className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
+                  >
+                    <Printer className="w-4 h-4" /> Generate Invoice
+                  </button>
+                )}
+                <button onClick={() => setShowDetailsModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showNewModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Report New Issue</h3>
+              <button onClick={() => setShowNewModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 overflow-y-auto max-h-[70vh] space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-xs font-medium text-slate-600 mb-1 block">Issue Type *</label>
+                  <select className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="damage">Damage</option>
+                    <option value="repair">Repair</option>
+                    <option value="service">Service</option>
+                    <option value="battery_swap">Battery Swap</option>
+                    <option value="inspection">Inspection</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-slate-600 mb-1 block">Severity *</label>
+                  <select className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="critical">Critical</option>
+                    <option value="major">Major</option>
+                    <option value="minor">Minor</option>
+                    <option value="cosmetic">Cosmetic</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-slate-600 mb-1 block">Bike ID *</label>
+                  <input type="text" placeholder="EV-XXX" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-slate-600 mb-1 block">Battery ID</label>
+                  <input type="text" placeholder="BAT-XXX" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+                </div>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-600 mb-1 block">Description *</label>
+                <textarea rows={3} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Describe the issue..." />
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-600 mb-1 block">Location *</label>
+                <input type="text" placeholder="Where did the issue occur?" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-600 mb-1 block">Estimated Cost</label>
+                <input type="number" placeholder="0" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-600 mb-1 block">Upload Images</label>
+                <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 text-center">
+                  <Image className="w-8 h-8 text-slate-300 mx-auto mb-2" />
+                  <p className="text-sm text-slate-500">Drag and drop or click to upload</p>
+                </div>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowNewModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                Cancel
+              </button>
+              <button onClick={() => { setShowNewModal(false); alert('Issue reported successfully!'); }} className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
+                Submit Report
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showAddNoteModal && selectedRecord && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Add Note - {selectedRecord.id}</h3>
+              <button onClick={() => setShowAddNoteModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-2 block">New Note</label>
+                <textarea
+                  value={newNoteText}
+                  onChange={(e) => setNewNoteText(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                  rows={4}
+                  placeholder="Enter note..."
+                />
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowAddNoteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                Cancel
+              </button>
+              <button 
+                onClick={handleAddNote}
+                disabled={!newNoteText.trim()}
+                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
+              >
+                <Save className="w-4 h-4 inline mr-1" /> Save Note
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showPaymentModal && selectedRecord && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800">Process Payment - {selectedRecord.id}</h3>
+              <button onClick={() => setShowPaymentModal(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="bg-slate-50 p-4 rounded-lg">
+                <p className="text-sm text-slate-600">Amount to Pay</p>
+                <p className="text-2xl font-bold text-slate-800">৳{selectedRecord.actualCost || selectedRecord.estimatedCost}</p>
+              </div>
+              <div className="bg-slate-50 p-4 rounded-lg">
+                <p className="text-sm text-slate-600">Bike</p>
+                <p className="font-medium text-slate-800">{selectedRecord.bikeModel} ({selectedRecord.bikePlate})</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-2 block">Payment Source</label>
+                <div className="space-y-2">
+                  <button 
+                    onClick={() => handlePayment('company')}
+                    className="w-full p-4 border-2 border-slate-200 rounded-lg text-left hover:border-accent hover:bg-accent-light/30 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
+                        <DollarSign className="w-5 h-5 text-blue-600" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-slate-800">Company Account</p>
+                        <p className="text-sm text-slate-500">Pay from company bank/cash</p>
+                      </div>
+                    </div>
+                  </button>
+                  <button 
+                    onClick={() => handlePayment('biker')}
+                    className="w-full p-4 border-2 border-slate-200 rounded-lg text-left hover:border-accent hover:bg-accent-light/30 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
+                        <User className="w-5 h-5 text-green-600" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-slate-800">Biker Wallet</p>
+                        <p className="text-sm text-slate-500">Deduct from rider's wallet</p>
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowPaymentModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/rentals/[id]/page.tsx b/src/app/admin/rentals/[id]/page.tsx
new file mode 100644
index 0000000..db7db39
--- /dev/null
+++ b/src/app/admin/rentals/[id]/page.tsx
@@ -0,0 +1,686 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import {
+  ArrowLeft, Bike, User, Calendar, DollarSign, Wallet, Shield, CheckCircle, XCircle,
+  Clock, Edit, Save, Plus, Trash2, Image, Upload, Lock, Unlock, AlertTriangle, MessageSquare, MapPin,
+  Phone, MessageCircle
+} from 'lucide-react';
+
+type RentalStatus = 'active' | 'pending' | 'completed' | 'disputed' | 'cancelled' | 'locked';
+type RentalType = 'single' | 'shared' | 'rent-to-own';
+
+interface BikeImage {
+  id: string;
+  type: 'front' | 'back' | 'left' | 'right';
+  url?: string;
+}
+
+interface Note {
+  id: string;
+  text: string;
+  createdAt: string;
+}
+
+interface Rental {
+  id: string;
+  bikeId: string;
+  userId: string;
+  type: RentalType;
+  status: RentalStatus;
+  startDate: string;
+  endDate?: string;
+  deposit: number;
+  dailyRate: number;
+  totalPaid: number;
+  dueRental?: number;
+  lockedAt?: string;
+  lockedReason?: string;
+  hubId?: string;
+  hubName?: string;
+}
+
+const mockRentals: Rental[] = [
+  {
+    id: 'RNT-001',
+    bikeId: 'BIKE-001',
+    userId: 'USR-001',
+    type: 'single',
+    status: 'active',
+    startDate: '2024-01-15',
+    deposit: 5000,
+    dailyRate: 300,
+    totalPaid: 81900,
+    dueRental: 0,
+    hubId: 'HUB-001',
+    hubName: 'Gulshan Hub'
+  },
+  {
+    id: 'RNT-002',
+    bikeId: 'BIKE-002',
+    userId: 'USR-002',
+    type: 'shared',
+    status: 'pending',
+    startDate: '2024-02-01',
+    deposit: 3000,
+    dailyRate: 200,
+    totalPaid: 2000,
+    dueRental: 0,
+    hubId: 'HUB-002',
+    hubName: 'Banani Hub'
+  },
+  {
+    id: 'RNT-003',
+    bikeId: 'BIKE-003',
+    userId: 'USR-003',
+    type: 'rent-to-own',
+    status: 'completed',
+    startDate: '2023-06-01',
+    endDate: '2023-12-01',
+    deposit: 10000,
+    dailyRate: 500,
+    totalPaid: 150000,
+    hubId: 'HUB-001',
+    hubName: 'Gulshan Hub'
+  }
+];
+
+const mockBikes: Record<string, {
+  id: string;
+  model: string;
+  plate: string;
+  status: string;
+  odometer: number;
+  batteryHealth: number;
+  images: BikeImage[];
+}> = {
+  'BIKE-001': {
+    id: 'BIKE-001',
+    model: 'AIMA Lightning',
+    plate: 'Dhaka Metro Cha-9012',
+    status: 'active',
+    odometer: 3510,
+    batteryHealth: 85,
+    images: [
+      { id: 'img1', type: 'front', url: '' },
+      { id: 'img2', type: 'back', url: '' },
+      { id: 'img3', type: 'left', url: '' },
+      { id: 'img4', type: 'right', url: '' }
+    ]
+  },
+  'BIKE-002': {
+    id: 'BIKE-002',
+    model: 'Yadea DT3',
+    plate: 'Dhaka Metro Ba-5521',
+    status: 'active',
+    odometer: 2100,
+    batteryHealth: 92,
+    images: []
+  }
+};
+
+const mockUsers: Record<string, {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  walletBalance: number;
+  membership: string;
+  joinedFrom: string;
+  kycStatus: 'verified' | 'pending' | 'rejected';
+  insurance: 'active' | 'expired' | 'none';
+  insuranceExpiry?: string;
+}> = {
+  'USR-001': {
+    id: 'USR-001',
+    name: 'Rahim Ahmed',
+    phone: '+8801712345678',
+    email: 'rahim@example.com',
+    walletBalance: 2100,
+    membership: 'vip',
+    joinedFrom: 'Facebook',
+    kycStatus: 'verified',
+    insurance: 'active',
+    insuranceExpiry: '2024-12-01'
+  },
+  'USR-002': {
+    id: 'USR-002',
+    name: 'Karim Hasan',
+    phone: '+8801812345678',
+    email: 'karim@example.com',
+    walletBalance: 500,
+    membership: 'standard',
+    joinedFrom: 'Referral',
+    kycStatus: 'pending',
+    insurance: 'none'
+  }
+};
+
+const mockHubs = [
+  { id: 'HUB-001', name: 'Gulshan Hub', address: 'Gulshan 1, Dhaka' },
+  { id: 'HUB-002', name: 'Banani Hub', address: 'Banani, Dhaka' },
+  { id: 'HUB-003', name: 'Uttara Hub', address: 'Uttara, Dhaka' }
+];
+
+export default function RentalDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [rental, setRental] = useState<Rental | null>(null);
+  const [user, setUser] = useState<typeof mockUsers['USR-001'] | null>(null);
+  const [bike, setBike] = useState<typeof mockBikes['BIKE-001'] | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [notes, setNotes] = useState<Note[]>([
+    { id: 'n1', text: 'Initial rental started. Bike in good condition.', createdAt: '2024-01-15' },
+    { id: 'n2', text: 'Battery replaced on 2024-01-20.', createdAt: '2024-01-20' }
+  ]);
+  const [newNote, setNewNote] = useState('');
+  const [editForm, setEditForm] = useState<Partial<Rental>>({});
+  const [showLockModal, setShowLockModal] = useState(false);
+  const [lockReason, setLockReason] = useState('');
+  const [dueAmount, setDueAmount] = useState(0);
+  const [showDueModal, setShowDueModal] = useState(false);
+  const [showImageModal, setShowImageModal] = useState(false);
+  const [uploadImageType, setUploadImageType] = useState<string>('');
+
+  useEffect(() => {
+    const found = mockRentals.find(r => r.id === id);
+    if (found) {
+      setRental(found);
+      setEditForm(found);
+      setUser(mockUsers[found.userId as keyof typeof mockUsers] || null);
+      setBike(mockBikes[found.bikeId as keyof typeof mockBikes] || mockBikes['BIKE-001']);
+    }
+  }, [id]);
+
+  if (!rental) {
+    return (
+      <div className="p-6 flex items-center justify-center min-h-[50vh]">
+        <div className="text-center">
+          <Bike className="w-16 h-16 text-slate-300 mx-auto mb-4" />
+          <p className="text-slate-500">Rental not found</p>
+          <button
+            onClick={() => router.push('/admin/rentals')}
+            className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
+          >
+            Back to Rentals
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSaveEdit = () => {
+    setRental(prev => prev ? { ...prev, ...editForm } : null);
+    setEditMode(false);
+  };
+
+  const handleLockRental = () => {
+    if (!lockReason.trim()) return;
+    setRental(prev => prev ? { ...prev, status: 'locked', lockedAt: new Date().toISOString(), lockedReason: lockReason } : null);
+    setShowLockModal(false);
+    setLockReason('');
+  };
+
+  const handleUnlockRental = () => {
+    setRental(prev => prev ? { ...prev, status: 'active', lockedAt: undefined, lockedReason: undefined } : null);
+  };
+
+  const handleCancelRental = () => {
+    if (confirm('Are you sure you want to cancel this rental? This action cannot be undone.')) {
+      setRental(prev => prev ? { ...prev, status: 'cancelled', endDate: new Date().toISOString() } : null);
+    }
+  };
+
+  const handleAddDue = () => {
+    setRental(prev => prev ? { ...prev, dueRental: (prev.dueRental || 0) + dueAmount } : null);
+    setShowDueModal(false);
+    setDueAmount(0);
+  };
+
+  const handleAddNote = () => {
+    if (!newNote.trim()) return;
+    setNotes(prev => [...prev, { id: `n${Date.now()}`, text: newNote, createdAt: new Date().toISOString().split('T')[0] }]);
+    setNewNote('');
+  };
+
+  const handleUpdateOdometer = (value: number) => {
+    if (bike) setBike(prev => prev ? { ...prev, odometer: value } : null);
+  };
+
+  const handleUpdateBattery = (value: number) => {
+    if (bike) setBike(prev => prev ? { ...prev, batteryHealth: value } : null);
+  };
+
+  const handleUploadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !bike) return;
+    const url = URL.createObjectURL(file);
+    setBike(prev => prev ? {
+      ...prev,
+      images: prev.images.map(img => img.type === uploadImageType ? { ...img, url } : img)
+    } : null);
+    setShowImageModal(false);
+  };
+
+  const statusColors = {
+    active: 'bg-green-100 text-green-700',
+    pending: 'bg-amber-100 text-amber-700',
+    completed: 'bg-blue-100 text-blue-700',
+    disputed: 'bg-red-100 text-red-700',
+    cancelled: 'bg-slate-100 text-slate-700',
+    locked: 'bg-red-100 text-red-700'
+  };
+
+  return (
+    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
+      <button
+        onClick={() => router.push('/admin/rentals')}
+        className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
+      >
+        <ArrowLeft className="w-4 h-4" /> Back to Rentals
+      </button>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+        <div className="p-6 border-b border-slate-100">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-extrabold text-slate-800">{rental.id}</h1>
+                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[rental.status]}`}>
+                  {rental.status}
+                </span>
+                {rental.status === 'locked' && (
+                  <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-red-100 text-red-700">
+                    <Lock className="w-3 h-3" /> Locked
+                  </span>
+                )}
+              </div>
+              <p className="text-slate-500 mt-1">Started {rental.startDate} • From {rental.hubName || 'N/A'}</p>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {editMode ? (
+                <>
+                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
+                    <Save className="w-4 h-4" /> Save
+                  </button>
+                  <button onClick={() => { setEditForm(rental); setEditMode(false); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                    Cancel
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
+                    <Edit className="w-4 h-4" /> Edit
+                  </button>
+                  {rental.status === 'active' && (
+                    <>
+                      <button onClick={() => setShowDueModal(true)} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm hover:bg-amber-700 flex items-center gap-2">
+                        <DollarSign className="w-4 h-4" /> Add Due
+                      </button>
+                      {rental.status === 'active' ? (
+                        <button onClick={() => setShowLockModal(true)} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 flex items-center gap-2">
+                          <Lock className="w-4 h-4" /> Lock Rental
+                        </button>
+                      ) : rental.status === 'locked' ? (
+                        <button onClick={handleUnlockRental} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
+                          <Unlock className="w-4 h-4" /> Unlock Rental
+                        </button>
+                      ) : null}
+                    </>
+                  )}
+                  {rental.status !== 'cancelled' && rental.status !== 'completed' && (
+                    <button onClick={handleCancelRental} className="px-4 py-2 bg-slate-600 text-white rounded-lg text-sm hover:bg-slate-700 flex items-center gap-2">
+                      <XCircle className="w-4 h-4" /> Cancel Rental
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+                <p className="text-sm text-blue-600">Total Spent</p>
+                <p className="text-xl font-bold text-blue-800">৳{rental.totalPaid.toLocaleString()}</p>
+              </div>
+              <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+                <p className="text-sm text-green-600">Wallet Balance</p>
+                <p className="text-xl font-bold text-green-800">৳{user?.walletBalance.toLocaleString() || 0}</p>
+              </div>
+              <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+                <p className="text-sm text-purple-600">Deposit Paid</p>
+                <p className="text-xl font-bold text-purple-800">৳{rental.deposit.toLocaleString()}</p>
+              </div>
+              <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
+                <p className="text-sm text-amber-600">Due Rental</p>
+                <p className="text-xl font-bold text-amber-800">৳{(rental.dueRental || 0).toLocaleString()}</p>
+              </div>
+            </div>
+
+            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
+                <Bike className="w-5 h-5" /> Rented Bike Details
+              </h3>
+              {bike && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <div className="flex justify-between"><span className="text-sm text-blue-600">Model</span><span className="text-sm font-medium text-blue-800">{bike.model}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-blue-600">Plate</span><span className="text-sm font-medium text-blue-800">{bike.plate}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-blue-600">Type</span><span className="text-sm font-medium text-blue-800 capitalize">{rental.type}</span></div>
+                    <div className="flex justify-between"><span className="text-sm text-blue-600">Daily Rate</span><span className="text-sm font-medium text-blue-800">৳{rental.dailyRate}/day</span></div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
+              <h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
+                <Gauge className="w-5 h-5" /> Mileage Tracking
+              </h3>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm text-amber-600">Current Odometer (km)</label>
+                  <input
+                    type="number"
+                    value={bike?.odometer || 0}
+                    onChange={(e) => handleUpdateOdometer(Number(e.target.value))}
+                    className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm mt-1"
+                    disabled={rental.status !== 'active'}
+                  />
+                </div>
+                <div>
+                  <label className="text-sm text-amber-600">Total Distance</label>
+                  <p className="text-lg font-semibold text-amber-800">{(bike?.odometer || 0).toLocaleString()} km</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
+                <Battery className="w-5 h-5" /> Battery Health
+              </h3>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm text-green-600">Battery Percentage (0-100%)</label>
+                  <input
+                    type="number"
+                    max={100}
+                    min={0}
+                    value={bike?.batteryHealth || 0}
+                    onChange={(e) => handleUpdateBattery(Number(e.target.value))}
+                    className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm mt-1"
+                    disabled={rental.status !== 'active'}
+                  />
+                </div>
+                <div>
+                  <label className="text-sm text-green-600">Health Status</label>
+                  <p className={`text-lg font-semibold ${(bike?.batteryHealth || 0) > 70 ? 'text-green-700' : (bike?.batteryHealth || 0) > 40 ? 'text-amber-700' : 'text-red-700'}`}>
+                    {(bike?.batteryHealth || 0) > 70 ? 'Good' : (bike?.batteryHealth || 0) > 40 ? 'Fair' : 'Poor'}
+                  </p>
+                  <p className="text-xs text-green-600">Estimated Range: {Math.round((bike?.batteryHealth || 0) * 1)} km</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-semibold text-purple-800 flex items-center gap-2">
+                  <Image className="w-5 h-5" /> Bike Images
+                </h3>
+                {rental.status === 'active' && (
+                  <button
+                    onClick={() => setShowImageModal(true)}
+                    className="text-xs px-2 py-1 bg-white rounded border border-purple-200 text-purple-700 hover:bg-purple-100 flex items-center gap-1"
+                  >
+                    <Upload className="w-3 h-3" /> Upload
+                  </button>
+                )}
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {['front', 'back', 'left', 'right'].map(type => {
+                  const img = bike?.images.find(i => i.type === type);
+                  return (
+                    <div key={type} className="aspect-video bg-white rounded-lg border border-purple-200 flex items-center justify-center overflow-hidden">
+                      {img?.url ? (
+                        <img src={img.url} alt={type} className="w-full h-full object-cover" />
+                      ) : (
+                        <div className="text-center p-2">
+                          <Image className="w-8 h-8 text-purple-300 mx-auto" />
+                          <p className="text-xs text-purple-500 capitalize mt-1">{type}</p>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
+                <MessageSquare className="w-5 h-5" /> Notes ({notes.length})
+              </h3>
+              {notes.length > 0 ? (
+                <div className="space-y-2 mb-3">
+                  {notes.map(note => (
+                    <div key={note.id} className="bg-white p-3 rounded-lg">
+                      <p className="text-sm text-slate-700">{note.text}</p>
+                      <p className="text-xs text-slate-400 mt-1">{note.createdAt}</p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-slate-500 mb-3">No notes yet.</p>
+              )}
+              {rental.status === 'active' && (
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newNote}
+                    onChange={(e) => setNewNote(e.target.value)}
+                    placeholder="Add notes about the bike condition, issues, etc..."
+                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                  />
+                  <button onClick={handleAddNote} disabled={!newNote.trim()} className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50">
+                    <Plus className="w-4 h-4" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
+                <User className="w-5 h-5" /> User Info
+              </h3>
+              <div className="space-y-2">
+                <div className="flex justify-between"><span className="text-sm text-blue-600">Name</span><span className="text-sm font-medium text-blue-800">{user?.name}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-blue-600">Phone</span><span className="text-sm font-medium text-blue-800">{user?.phone}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-blue-600">Email</span><span className="text-sm font-medium text-blue-800">{user?.email || '-'}</span></div>
+                {user && (
+                  <div className="flex gap-2 mt-2 pt-2 border-t border-blue-100">
+                    <a href={`tel:${user.phone}`} className="flex-1 py-2 bg-green-500 text-white rounded-lg text-sm text-center hover:bg-green-600 flex items-center justify-center gap-2">
+                      <Phone className="w-4 h-4" /> Call
+                    </a>
+                    <a href={`sms:${user.phone}`} className="flex-1 py-2 bg-blue-500 text-white rounded-lg text-sm text-center hover:bg-blue-600 flex items-center justify-center gap-2">
+                      <MessageCircle className="w-4 h-4" /> Message
+                    </a>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+              <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
+                <Shield className="w-5 h-5" /> Membership & Insurance
+              </h3>
+              <div className="space-y-2">
+                <div className="flex justify-between"><span className="text-sm text-purple-600">Membership</span><span className="text-sm font-medium text-purple-800 uppercase">{user?.membership}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-purple-600">KYC Status</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.kycStatus}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-purple-600">Insurance</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.insurance}</span></div>
+                {user?.insuranceExpiry && <div className="flex justify-between"><span className="text-sm text-purple-600">Insurance Expiry</span><span className="text-sm font-medium text-purple-800">{user.insuranceExpiry}</span></div>}
+              </div>
+            </div>
+
+            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
+                <MapPin className="w-5 h-5" /> Hub Info
+              </h3>
+              <div className="space-y-2">
+                <div className="flex justify-between"><span className="text-sm text-green-600">Hub</span><span className="text-sm font-medium text-green-800">{rental.hubName || '-'}</span></div>
+                {editMode ? (
+                  <select
+                    value={editForm.hubId || ''}
+                    onChange={(e) => {
+                      const hub = mockHubs.find(h => h.id === e.target.value);
+                      setEditForm({ ...editForm, hubId: e.target.value, hubName: hub?.name });
+                    }}
+                    className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm"
+                  >
+                    <option value="">Select Hub</option>
+                    {mockHubs.map(hub => (
+                      <option key={hub.id} value={hub.id}>{hub.name}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <div className="flex justify-between"><span className="text-sm text-green-600">Joined From</span><span className="text-sm font-medium text-green-800">{user?.joinedFrom || '-'}</span></div>
+                )}
+              </div>
+            </div>
+
+            {rental.status === 'locked' && (
+              <div className="bg-red-50 p-4 rounded-xl border border-red-100">
+                <h3 className="font-semibold text-red-800 mb-3 flex items-center gap-2">
+                  <Lock className="w-5 h-5" /> Locked Info
+                </h3>
+                <div className="space-y-2">
+                  <div className="flex justify-between"><span className="text-sm text-red-600">Locked At</span><span className="text-sm font-medium text-red-800">{rental.lockedAt?.split('T')[0]}</span></div>
+                  <div className="flex justify-between"><span className="text-sm text-red-600">Reason</span><span className="text-sm font-medium text-red-800">{rental.lockedReason}</span></div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showLockModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <Lock className="w-5 h-5" /> Lock Rental
+              </h3>
+              <button onClick={() => setShowLockModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <label className="text-sm text-slate-600">Reason for locking</label>
+              <textarea
+                value={lockReason}
+                onChange={(e) => setLockReason(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                rows={3}
+                placeholder="Enter reason..."
+              />
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowLockModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleLockRental} disabled={!lockReason.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Lock Rental</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showDueModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <DollarSign className="w-5 h-5" /> Add Due Rental
+              </h3>
+              <button onClick={() => setShowDueModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <label className="text-sm text-slate-600">Due Amount (৳)</label>
+              <input
+                type="number"
+                value={dueAmount}
+                onChange={(e) => setDueAmount(Number(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                placeholder="Enter amount..."
+              />
+              <p className="text-xs text-slate-500 mt-2">Current Due: ৳{rental.dueRental || 0}</p>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowDueModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleAddDue} disabled={dueAmount <= 0} className="px-4 py-2 bg-amber-600 text-white rounded-lg disabled:opacity-50">Add Due</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showImageModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Upload Bike Image</h3>
+              <button onClick={() => setShowImageModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
+            </div>
+            <div className="p-4">
+              <label className="text-sm text-slate-600">Select Image Type</label>
+              <select
+                value={uploadImageType}
+                onChange={(e) => setUploadImageType(e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+              >
+                <option value="">Select type...</option>
+                <option value="front">Front</option>
+                <option value="back">Back</option>
+                <option value="left">Left Side</option>
+                <option value="right">Right Side</option>
+              </select>
+              {uploadImageType && (
+                <div className="mt-4">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleUploadImage}
+                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm file:mr-4 file:px-4 file:py-2 file:bg-accent file:text-white file:rounded-lg file:border-0 cursor-pointer"
+                  />
+                </div>
+              )}
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowImageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Gauge({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+      <circle cx="12" cy="12" r="4" />
+    </svg>
+  );
+}
+
+function Battery({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="1" y="6" width="18" height="12" rx="2" />
+      <line x1="23" y1="10" x2="23" y2="14" />
+      <line x1="7" y1="10" x2="7" y2="14" />
+      <line x1="11" y1="10" x2="11" y2="14" />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/rentals/page.tsx b/src/app/admin/rentals/page.tsx
index 27224df..075f959 100644
--- a/src/app/admin/rentals/page.tsx
+++ b/src/app/admin/rentals/page.tsx
@@ -1,7 +1,270 @@
-import { FileText, Search, Filter, Bike, User, Calendar, DollarSign, Clock, MoreVertical, Eye } from 'lucide-react';
-import { rentals, bikes, users } from '@/data/mockData';
+'use client';
+
+import { useState, useEffect } from 'react';
+import { FileText, Search, Filter, Bike, User, Calendar, DollarSign, Clock, MoreVertical, Eye, Plus, Phone, MessageCircle, X, CreditCard, Wallet, Building, Download, Printer } from 'lucide-react';
+import Link from 'next/link';
+
+type RentalStatus = 'active' | 'pending' | 'completed' | 'disputed' | 'cancelled' | 'locked';
+type RentalType = 'single' | 'shared' | 'rent-to-own';
+
+interface Rental {
+  id: string;
+  bikeId: string;
+  userId: string;
+  type: RentalType;
+  status: RentalStatus;
+  startDate: string;
+  endDate?: string;
+  contractMonths?: number;
+  deposit: number;
+  dailyRate: number;
+  totalPaid: number;
+  dueRental?: number;
+  lockedAt?: string;
+  lockedReason?: string;
+  hubId?: string;
+  hubName?: string;
+}
+
+const mockBikes = [
+  { id: 'BIKE-001', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012', status: 'available' },
+  { id: 'BIKE-002', model: 'Yadea DT3', plate: 'Dhaka Metro Ba-5521', status: 'available' },
+  { id: 'BIKE-003', model: 'AIMA EM5', plate: 'Dhaka Metro Ko-1234', status: 'available' },
+  { id: 'BIKE-004', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9013', status: 'rented' },
+  { id: 'BIKE-005', model: 'Yadea G5', plate: 'Dhaka Metro Ha-5678', status: 'available' },
+];
+
+const mockUsers = [
+  { id: 'USR-001', name: 'Rahim Ahmed', phone: '+8801712345678', membership: 'vip' },
+  { id: 'USR-002', name: 'Karim Hasan', phone: '+8801812345678', membership: 'standard' },
+  { id: 'USR-003', name: 'Jamal Uddin', phone: '+8801912345678', membership: 'premium' },
+  { id: 'USR-004', name: 'Rafiq Islam', phone: '+8801512345678', membership: 'standard' },
+];
+
+const mockHubs = [
+  { id: 'HUB-001', name: 'Gulshan Hub' },
+  { id: 'HUB-002', name: 'Banani Hub' },
+  { id: 'HUB-003', name: 'Uttara Hub' },
+  { id: 'HUB-004', name: 'Mirpur Hub' },
+];
+
+const mockRentals: Rental[] = [
+  {
+    id: 'RNT-001',
+    bikeId: 'BIKE-001',
+    userId: 'USR-001',
+    type: 'single',
+    status: 'active',
+    startDate: '2024-01-15',
+    deposit: 5000,
+    dailyRate: 300,
+    totalPaid: 81900,
+    dueRental: 0,
+    hubId: 'HUB-001',
+    hubName: 'Gulshan Hub'
+  },
+  {
+    id: 'RNT-002',
+    bikeId: 'BIKE-002',
+    userId: 'USR-002',
+    type: 'single',
+    status: 'pending',
+    startDate: '2024-02-10',
+    deposit: 0,
+    dailyRate: 150,
+    totalPaid: 150,
+    dueRental: 0,
+    hubId: 'HUB-002',
+    hubName: 'Banani Hub'
+  },
+  {
+    id: 'RNT-003',
+    bikeId: 'BIKE-003',
+    userId: 'USR-003',
+    type: 'rent-to-own',
+    status: 'completed',
+    startDate: '2023-06-01',
+    endDate: '2023-12-01',
+    deposit: 10000,
+    dailyRate: 500,
+    totalPaid: 150000,
+    hubId: 'HUB-001',
+    hubName: 'Gulshan Hub'
+  }
+];
 
 export default function RentalsPage() {
+  const [rentals, setRentals] = useState<Rental[]>(mockRentals);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  
+  const [newRental, setNewRental] = useState({
+    bikeId: '',
+    userId: '',
+    type: 'single' as RentalType,
+    startDate: new Date().toISOString().split('T')[0],
+    contractMonths: 0,
+    deposit: 0,
+    dailyRate: 150,
+    hubId: '',
+    paymentMethod: 'cash' as 'cash' | 'bank' | 'biker_wallet',
+  });
+
+  const [showJournalPreview, setShowJournalPreview] = useState(false);
+
+  const filteredRentals = rentals.filter(r => {
+    if (statusFilter !== 'all' && r.status !== statusFilter) return false;
+    return true;
+  });
+
+  const stats = {
+    active: rentals.filter(r => r.status === 'active').length,
+    pending: rentals.filter(r => r.status === 'pending').length,
+    completed: rentals.filter(r => r.status === 'completed').length,
+    disputed: rentals.filter(r => r.status === 'disputed').length,
+  };
+
+  const handleCreateRental = () => {
+    if (!newRental.bikeId || !newRental.userId || !newRental.hubId) return;
+    setShowJournalPreview(true);
+  };
+
+  const confirmCreateRental = () => {
+    const bike = mockBikes.find(b => b.id === newRental.bikeId);
+    const user = mockUsers.find(u => u.id === newRental.userId);
+    const hub = mockHubs.find(h => h.id === newRental.hubId);
+    
+    const rental: Rental = {
+      id: `RNT-${String(rentals.length + 1).padStart(3, '0')}`,
+      bikeId: newRental.bikeId,
+      userId: newRental.userId,
+      type: newRental.type,
+      status: 'pending',
+      startDate: newRental.startDate,
+      endDate: newRental.contractMonths > 0 
+        ? new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + newRental.contractMonths)).toISOString().split('T')[0]
+        : undefined,
+      contractMonths: newRental.contractMonths || undefined,
+      deposit: newRental.deposit,
+      dailyRate: newRental.dailyRate,
+      totalPaid: newRental.deposit,
+      dueRental: 0,
+      hubId: newRental.hubId,
+      hubName: hub?.name,
+    };
+    
+    setRentals([...rentals, rental]);
+    setShowJournalPreview(false);
+    setShowCreateModal(false);
+    setNewRental({
+      bikeId: '',
+      userId: '',
+      type: 'single',
+      startDate: new Date().toISOString().split('T')[0],
+      contractMonths: 0,
+      deposit: 0,
+      dailyRate: 150,
+      hubId: '',
+      paymentMethod: 'cash',
+    });
+  };
+
+const generateInvoice = () => {
+    if (newRental.deposit <= 0) return;
+    
+    const rentalId = `RNT-${String(rentals.length + 1).padStart(3, '0')}`;
+    const bike = mockBikes.find(b => b.id === newRental.bikeId);
+    const user = mockUsers.find(u => u.id === newRental.userId);
+    const hub = mockHubs.find(h => h.id === newRental.hubId);
+    const date = new Date().toISOString().split('T')[0];
+    const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+    const contractMonths = newRental.contractMonths;
+    const endDate = contractMonths > 0 
+      ? new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + contractMonths)).toISOString().split('T')[0]
+      : '';
+    
+    import('jspdf').then((jsPDF) => {
+      const doc = new jsPDF.default();
+      
+      doc.setFillColor(6, 95, 70);
+      doc.rect(0, 0, 220, 40, 'F');
+      doc.setTextColor(255, 255, 255);
+      doc.setFontSize(24);
+      doc.text('JAIBEN Mobility Ltd', 20, 20);
+      doc.setFontSize(12);
+      doc.text('Payment Receipt', 20, 30);
+      
+      doc.setTextColor(6, 95, 70);
+      doc.setFontSize(18);
+      doc.text('OFFICIAL RECEIPT', 120, 25);
+      
+      doc.setTextColor(0, 0, 0);
+      doc.setFontSize(10);
+      doc.text(`Receipt No: ${rentalId}-DEP`, 20, 55);
+      doc.text(`Date: ${date} ${time}`, 20, 62);
+      
+      doc.line(20, 70, 190, 70);
+      
+      doc.setFontSize(11);
+      doc.text('Payment Details', 20, 82);
+      doc.setFontSize(10);
+      doc.text(`Rental ID: ${rentalId}`, 20, 90);
+      doc.text(`Bike: ${bike?.model} (${bike?.plate})`, 20, 97);
+      doc.text(`Customer: ${user?.name}`, 20, 104);
+      doc.text(`Phone: ${user?.phone}`, 20, 111);
+      doc.text(`Hub: ${hub?.name}`, 20, 118);
+      doc.text(`Rental Type: ${newRental.type}`, 20, 125);
+      doc.text(`Start Date: ${newRental.startDate}`, 20, 132);
+      if (contractMonths > 0) {
+        doc.text(`Contract: ${contractMonths} Months`, 20, 139);
+        doc.text(`End Date: ${endDate}`, 20, 146);
+        doc.text(`Daily Rate: ৳${newRental.dailyRate}/day`, 20, 156);
+      } else {
+        doc.text(`Daily Rate: ৳${newRental.dailyRate}/day`, 20, 139);
+      }
+      
+      doc.line(20, 165, 190, 165);
+      
+      doc.setFontSize(12);
+      doc.text('Amount Details', 20, 175);
+      doc.setFillColor(240, 240, 240);
+      doc.rect(20, 180, 170, 20, 'F');
+      doc.setFontSize(10);
+      doc.text('Deposit', 30, 192);
+      doc.setFontSize(14);
+      doc.setTextColor(6, 95, 70);
+      doc.text(`৳${newRental.deposit}`, 150, 192);
+      
+      doc.setTextColor(0, 0, 0);
+      doc.setFontSize(10);
+      doc.text(`Payment: ${newRental.paymentMethod === 'cash' ? 'Cash' : newRental.paymentMethod === 'bank' ? 'Bank' : 'Wallet'}`, 20, 210);
+      
+      const qrData = `JAIBEN|${rentalId}|${date}|${user?.name}|${bike?.model}|${newRental.deposit}|${newRental.startDate}|${contractMonths}`;
+      const publicUrl = `https://jaiben.app/rental/${rentalId}`;
+      
+      doc.setFontSize(8);
+      doc.setTextColor(100);
+      doc.text('Generated from JAIBEN Rental System', 20, 250);
+      doc.text(`QR: ${qrData.substring(0, 35)}...`, 20, 258);
+      doc.setTextColor(6, 95, 70);
+      doc.text(`URL: ${publicUrl}`, 20, 266);
+      
+      doc.save(`deposit-receipt-${rentalId}.pdf`);
+    });
+  };
+
+  const getStatusBadge = (status: RentalStatus) => {
+    const styles = {
+      active: 'bg-green-100 text-green-700',
+      pending: 'bg-amber-100 text-amber-700',
+      completed: 'bg-blue-100 text-blue-700',
+      disputed: 'bg-red-100 text-red-700',
+      cancelled: 'bg-slate-100 text-slate-700',
+      locked: 'bg-red-100 text-red-700',
+    };
+    return styles[status];
+  };
+
   return (
     <div className="p-4 lg:p-6">
       <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
@@ -10,25 +273,48 @@ export default function RentalsPage() {
           <p className="text-sm text-slate-500 mt-1">View and manage all rental transactions</p>
         </div>
         <div className="flex items-center gap-2">
-          <button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
-            <Filter className="w-4 h-4" /> Filter
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50"
+          >
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="pending">Pending</option>
+            <option value="completed">Completed</option>
+            <option value="disputed">Disputed</option>
+            <option value="locked">Locked</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+          <button 
+            onClick={() => setShowCreateModal(true)}
+            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" /> New Rental
           </button>
-          <button className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark">
+          <button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
             Export
           </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-4 gap-4 mb-6">
-        {['Active', 'Pending', 'Completed', 'Disputed'].map(status => {
-          const count = rentals.filter(r => r.status === status.toLowerCase()).length;
-          return (
-            <div key={status} className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
-              <p className="text-2xl font-extrabold text-slate-800">{count}</p>
-              <p className="text-sm text-slate-500">{status} Rentals</p>
-            </div>
-          );
-        })}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-green-600">{stats.active}</p>
+          <p className="text-sm text-slate-500">Active Rentals</p>
+        </div>
+        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-amber-600">{stats.pending}</p>
+          <p className="text-sm text-slate-500">Pending</p>
+        </div>
+        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-blue-600">{stats.completed}</p>
+          <p className="text-sm text-slate-500">Completed</p>
+        </div>
+        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-red-600">{stats.disputed}</p>
+          <p className="text-sm text-slate-500">Disputed</p>
+        </div>
       </div>
 
       <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
@@ -41,15 +327,18 @@ export default function RentalsPage() {
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Start Date</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Hub</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Deposit</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Daily</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Paid</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-50">
-              {rentals.map(rental => {
-                const bike = bikes.find(b => b.id === rental.bikeId);
+              {filteredRentals.map(rental => {
+                const bike = mockBikes.find(b => b.id === rental.bikeId);
+                const user = mockUsers.find(u => u.id === rental.userId);
                 return (
                   <tr key={rental.id} className="hover:bg-slate-50 transition-colors">
                     <td className="px-4 py-3">
@@ -58,13 +347,19 @@ export default function RentalsPage() {
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-2">
                         <Bike className="w-4 h-4 text-slate-400" />
-                        <span className="text-sm text-slate-600">{bike?.model}</span>
+                        <div>
+                          <span className="text-sm text-slate-600">{bike?.model || rental.bikeId}</span>
+                          <p className="text-xs text-slate-400">{bike?.plate}</p>
+                        </div>
                       </div>
                     </td>
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-2">
                         <User className="w-4 h-4 text-slate-400" />
-                        <span className="text-sm text-slate-600">{rental.userId}</span>
+                        <div>
+                          <span className="text-sm text-slate-600">{user?.name || rental.userId}</span>
+                          <p className="text-xs text-slate-400">{user?.phone}</p>
+                        </div>
                       </div>
                     </td>
                     <td className="px-4 py-3">
@@ -75,26 +370,39 @@ export default function RentalsPage() {
                         <Calendar className="w-3 h-3" /> {rental.startDate}
                       </div>
                     </td>
+                    <td className="px-4 py-3">
+                      <span className="text-sm text-slate-600">{rental.hubName || '-'}</span>
+                    </td>
                     <td className="px-4 py-3">
                       <span className="text-sm font-medium text-slate-700">৳{rental.deposit}</span>
                     </td>
                     <td className="px-4 py-3">
-                      <span className="text-sm font-semibold text-green-600">৳{rental.totalPaid}</span>
+                      <span className="text-sm text-slate-600">৳{rental.dailyRate}/d</span>
                     </td>
                     <td className="px-4 py-3">
-                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${
-                        rental.status === 'active' ? 'bg-green-100 text-green-700' :
-                        rental.status === 'pending' ? 'bg-amber-100 text-amber-700' :
-                        rental.status === 'completed' ? 'bg-blue-100 text-blue-700' :
-                        'bg-red-100 text-red-700'
-                      }`}>
+                      <span className="text-sm font-semibold text-green-600">৳{rental.totalPaid.toLocaleString()}</span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${getStatusBadge(rental.status)}`}>
                         {rental.status}
                       </span>
                     </td>
                     <td className="px-4 py-3">
-                      <button className="p-2 hover:bg-slate-100 rounded-lg">
-                        <Eye className="w-4 h-4 text-slate-400" />
-                      </button>
+                      <div className="flex items-center gap-1">
+                        <Link href={`/admin/rentals/${rental.id}`} className="p-1.5 hover:bg-slate-100 rounded-lg" title="View">
+                          <Eye className="w-4 h-4 text-slate-500" />
+                        </Link>
+                        {user && (
+                          <>
+                            <a href={`tel:${user.phone}`} className="p-1.5 hover:bg-green-100 rounded-lg" title="Call">
+                              <Phone className="w-4 h-4 text-green-500" />
+                            </a>
+                            <a href={`sms:${user.phone}`} className="p-1.5 hover:bg-blue-100 rounded-lg" title="Message">
+                              <MessageCircle className="w-4 h-4 text-blue-500" />
+                            </a>
+                          </>
+                        )}
+                      </div>
                     </td>
                   </tr>
                 );
@@ -103,6 +411,281 @@ export default function RentalsPage() {
           </table>
         </div>
       </div>
+
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">Create New Rental</h3>
+              <button onClick={() => setShowCreateModal(false)} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="text-sm text-slate-600">Select User</label>
+                <select
+                  value={newRental.userId}
+                  onChange={(e) => setNewRental({ ...newRental, userId: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                >
+                  <option value="">Select User...</option>
+                  {mockUsers.map(user => (
+                    <option key={user.id} value={user.id}>{user.name} ({user.phone})</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Select Bike</label>
+                <select
+                  value={newRental.bikeId}
+                  onChange={(e) => setNewRental({ ...newRental, bikeId: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                >
+                  <option value="">Select Bike...</option>
+                  {mockBikes.filter(b => b.status === 'available').map(bike => (
+                    <option key={bike.id} value={bike.id}>{bike.model} - {bike.plate}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Rental Type</label>
+                <select
+                  value={newRental.type}
+                  onChange={(e) => setNewRental({ ...newRental, type: e.target.value as RentalType })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                >
+                  <option value="single">Single</option>
+                  <option value="shared">Shared</option>
+                  <option value="rent-to-own">Rent to Own</option>
+                </select>
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Start Date</label>
+                <input
+                  type="date"
+                  value={newRental.startDate}
+                  onChange={(e) => setNewRental({ ...newRental, startDate: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Contract Months</label>
+                <select
+                  value={newRental.contractMonths}
+                  onChange={(e) => setNewRental({ ...newRental, contractMonths: Number(e.target.value) })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                >
+                  <option value={0}>Daily Basis</option>
+                  <option value={3}>3 Months</option>
+                  <option value={6}>6 Months</option>
+                  <option value={12}>12 Months</option>
+                  <option value={18}>18 Months</option>
+                  <option value={24}>24 Months</option>
+                </select>
+                {newRental.contractMonths > 0 && (
+                  <p className="text-xs text-green-600 mt-1">
+                    End Date: {new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + newRental.contractMonths)).toISOString().split('T')[0]}
+                  </p>
+                )}
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Daily Rate (৳)</label>
+                <input
+                  type="number"
+                  value={newRental.dailyRate}
+                  onChange={(e) => setNewRental({ ...newRental, dailyRate: Number(e.target.value) })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Deposit (৳)</label>
+                <input
+                  type="number"
+                  value={newRental.deposit}
+                  onChange={(e) => setNewRental({ ...newRental, deposit: Number(e.target.value) })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Hub</label>
+                <select
+                  value={newRental.hubId}
+                  onChange={(e) => setNewRental({ ...newRental, hubId: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                >
+                  <option value="">Select Hub...</option>
+                  {mockHubs.map(hub => (
+                    <option key={hub.id} value={hub.id}>{hub.name}</option>
+                  ))}
+                </select>
+              </div>
+              {newRental.deposit > 0 && (
+                <div>
+                  <label className="text-sm text-slate-600">Deposit Payment Method</label>
+                  <div className="flex gap-2 mt-1">
+                    <button
+                      type="button"
+                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'cash' })}
+                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
+                        newRental.paymentMethod === 'cash' 
+                          ? 'bg-green-100 border-green-300 text-green-700' 
+                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                      }`}
+                    >
+                      <Wallet className="w-4 h-4" /> Cash
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'bank' })}
+                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
+                        newRental.paymentMethod === 'bank' 
+                          ? 'bg-blue-100 border-blue-300 text-blue-700' 
+                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                      }`}
+                    >
+                      <Building className="w-4 h-4" /> Bank
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'biker_wallet' })}
+                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
+                        newRental.paymentMethod === 'biker_wallet' 
+                          ? 'bg-purple-100 border-purple-300 text-purple-700' 
+                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                      }`}
+                    >
+                      <CreditCard className="w-4 h-4" /> Wallet
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button 
+                onClick={() => setShowCreateModal(false)} 
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleCreateRental}
+                disabled={!newRental.bikeId || !newRental.userId || !newRental.hubId}
+                className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50"
+              >
+                Review & Create
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showJournalPreview && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div className="p-4 border-b border-slate-100">
+              <h3 className="font-semibold text-slate-800">Journal Entry Preview</h3>
+              <p className="text-sm text-slate-500">Auto-generated journal for rental deposit</p>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="bg-slate-50 p-3 rounded-lg">
+                <p className="text-sm font-medium text-slate-700 mb-2">Rental: {newRental.type.toUpperCase()}</p>
+                <p className="text-xs text-slate-500">Date: {new Date().toISOString().split('T')[0]}</p>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium text-slate-700 mb-2">Journal Entries</p>
+                <table className="w-full text-sm">
+                  <thead className="bg-slate-100">
+                    <tr>
+                      <th className="px-2 py-1 text-left">Account</th>
+                      <th className="px-2 py-1 text-right">Debit (৳)</th>
+                      <th className="px-2 py-1 text-right">Credit (৳)</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {newRental.deposit > 0 && (
+                      <>
+                        <tr>
+                          <td className="px-2 py-2">
+                            {newRental.paymentMethod === 'cash' && '1000 - Cash'}
+                            {newRental.paymentMethod === 'bank' && '1100 - Bank'}
+                            {newRental.paymentMethod === 'biker_wallet' && '1200 - Biker Wallet'}
+                          </td>
+                          <td className="px-2 py-2 text-right font-medium">{newRental.deposit}</td>
+                          <td className="px-2 py-2 text-right">-</td>
+                        </tr>
+                        <tr>
+                          <td className="px-2 py-2">2100 - Deposit Received</td>
+                          <td className="px-2 py-2 text-right">-</td>
+                          <td className="px-2 py-2 text-right font-medium">{newRental.deposit}</td>
+                        </tr>
+                      </>
+                    )}
+                    {newRental.deposit === 0 && (
+                      <tr>
+                        <td className="px-2 py-2 text-center text-slate-500" colSpan={3}>
+                          No deposit amount - Journal not required
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                  {newRental.deposit > 0 && (
+                    <tfoot className="bg-slate-100">
+                      <tr>
+                        <td className="px-2 py-1 font-medium">Total</td>
+                        <td className="px-2 py-1 text-right font-medium">{newRental.deposit}</td>
+                        <td className="px-2 py-1 text-right font-medium">{newRental.deposit}</td>
+                      </tr>
+                    </tfoot>
+                  )}
+                </table>
+              </div>
+
+              <div className="bg-blue-50 p-3 rounded-lg">
+                <p className="text-sm text-blue-700">
+                  <strong>Bike:</strong> {mockBikes.find(b => b.id === newRental.bikeId)?.model} {mockBikes.find(b => b.id === newRental.bikeId)?.plate}
+                </p>
+                <p className="text-sm text-blue-700">
+                  <strong>User:</strong> {mockUsers.find(u => u.id === newRental.userId)?.name} ({mockUsers.find(u => u.id === newRental.userId)?.phone})
+                </p>
+                <p className="text-sm text-blue-700">
+                  <strong>Hub:</strong> {mockHubs.find(h => h.id === newRental.hubId)?.name}
+                </p>
+                <p className="text-sm text-blue-700">
+                  <strong>Type:</strong> {newRental.type} | <strong>Contract:</strong> {newRental.contractMonths ? `${newRental.contractMonths} Months` : 'Daily Basis'}
+                </p>
+                <p className="text-sm text-blue-700">
+                  <strong>Daily Rate:</strong> ৳{newRental.dailyRate}
+                </p>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-between">
+              <button 
+                onClick={generateInvoice}
+                disabled={newRental.deposit <= 0}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
+              >
+                <Printer className="w-4 h-4" /> Print Invoice
+              </button>
+              <div className="flex gap-2">
+                <button 
+                  onClick={() => setShowJournalPreview(false)} 
+                  className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
+                >
+                  Back
+                </button>
+                <button 
+                  onClick={confirmCreateRental}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700"
+                >
+                  Confirm & Create
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/rental/[id]/page.tsx b/src/app/rental/[id]/page.tsx
new file mode 100644
index 0000000..e36936c
--- /dev/null
+++ b/src/app/rental/[id]/page.tsx
@@ -0,0 +1,250 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { Bike, User, Calendar, DollarSign, MapPin, Shield, Clock, CheckCircle } from 'lucide-react';
+
+type RentalStatus = 'active' | 'pending' | 'completed' | 'disputed' | 'cancelled' | 'locked';
+type RentalType = 'single' | 'shared' | 'rent-to-own';
+
+interface Rental {
+  id: string;
+  bikeId: string;
+  userId: string;
+  type: RentalType;
+  status: RentalStatus;
+  startDate: string;
+  endDate?: string;
+  contractMonths?: number;
+  deposit: number;
+  dailyRate: number;
+  totalPaid: number;
+  dueRental?: number;
+  hubId?: string;
+  hubName?: string;
+}
+
+interface BikeInfo {
+  id: string;
+  model: string;
+  plate: string;
+}
+
+interface UserInfo {
+  id: string;
+  name: string;
+  phone: string;
+  membership: string;
+}
+
+const mockRentals: Rental[] = [
+  {
+    id: 'RNT-001',
+    bikeId: 'BIKE-001',
+    userId: 'USR-001',
+    type: 'single',
+    status: 'active',
+    startDate: '2024-01-15',
+    contractMonths: 6,
+    endDate: '2024-07-15',
+    deposit: 5000,
+    dailyRate: 300,
+    totalPaid: 81900,
+    dueRental: 0,
+    hubId: 'HUB-001',
+    hubName: 'Gulshan Hub'
+  },
+  {
+    id: 'RNT-002',
+    bikeId: 'BIKE-002',
+    userId: 'USR-002',
+    type: 'single',
+    status: 'pending',
+    startDate: '2024-02-10',
+    contractMonths: 12,
+    endDate: '2025-02-10',
+    deposit: 3000,
+    dailyRate: 150,
+    totalPaid: 3000,
+    hubId: 'HUB-002',
+    hubName: 'Banani Hub'
+  }
+];
+
+const mockBikes: Record<string, BikeInfo> = {
+  'BIKE-001': { id: 'BIKE-001', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012' },
+  'BIKE-002': { id: 'BIKE-002', model: 'Yadea DT3', plate: 'Dhaka Metro Ba-5521' },
+  'BIKE-003': { id: 'BIKE-003', model: 'AIMA EM5', plate: 'Dhaka Metro Ko-1234' },
+};
+
+const mockUsers: Record<string, UserInfo> = {
+  'USR-001': { id: 'USR-001', name: 'Rahim Ahmed', phone: '+8801712345678', membership: 'vip' },
+  'USR-002': { id: 'USR-002', name: 'Karim Hasan', phone: '+8801812345678', membership: 'standard' },
+  'USR-003': { id: 'USR-003', name: 'Jamal Uddin', phone: '+8801912345678', membership: 'premium' },
+};
+
+export default function PublicRentalPage() {
+  const params = useParams();
+  const id = params.id as string;
+
+  const [rental, setRental] = useState<Rental | null>(null);
+  const [bike, setBike] = useState<BikeInfo | null>(null);
+  const [user, setUser] = useState<UserInfo | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      const found = mockRentals.find(r => r.id === id);
+      if (found) {
+        setRental(found);
+        setBike(mockBikes[found.bikeId] || null);
+        setUser(mockUsers[found.userId] || null);
+      }
+    }
+  }, [id]);
+
+  if (!rental) {
+    return (
+      <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4">
+        <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Clock className="w-8 h-8 text-red-500" />
+          </div>
+          <h1 className="text-xl font-bold text-slate-800 mb-2">Rental Not Found</h1>
+          <p className="text-slate-500">This rental ID is not valid or has been removed.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const statusColors = {
+    active: 'bg-green-500',
+    pending: 'bg-amber-500',
+    completed: 'bg-blue-500',
+    disputed: 'bg-red-500',
+    cancelled: 'bg-slate-400',
+    locked: 'bg-red-600',
+  };
+
+  const isExpired = rental.endDate && new Date(rental.endDate) < new Date();
+  const isActive = rental.status === 'active' && !isExpired;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 p-4">
+      <div className="max-w-lg mx-auto">
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
+          <div className={`${statusColors[rental.status]} text-white p-6 text-center`}>
+            <div className="flex items-center justify-center gap-2 mb-2">
+              <CheckCircle className="w-6 h-6" />
+              <span className="text-lg font-semibold uppercase">{rental.status}</span>
+            </div>
+            <p className="text-3xl font-bold">RENTAL ID: {rental.id}</p>
+            {isExpired && <p className="text-sm mt-2 opacity-80">EXPIRED</p>}
+          </div>
+
+          <div className="p-6 space-y-4">
+            <div className="bg-blue-50 rounded-xl p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                  <Bike className="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-blue-600">Bike</p>
+                  <p className="font-semibold text-blue-800">{bike?.model}</p>
+                </div>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-blue-600">Plate</span>
+                <span className="font-medium text-blue-800">{bike?.plate}</span>
+              </div>
+            </div>
+
+            <div className="bg-purple-50 rounded-xl p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
+                  <User className="w-5 h-5 text-purple-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-purple-600">Renter</p>
+                  <p className="font-semibold text-purple-800">{user?.name}</p>
+                </div>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-purple-600">Phone</span>
+                <span className="font-medium text-purple-800">{user?.phone}</span>
+              </div>
+              <div className="flex justify-between text-sm mt-1">
+                <span className="text-purple-600">Membership</span>
+                <span className="font-medium text-purple-800 uppercase">{user?.membership}</span>
+              </div>
+            </div>
+
+            <div className="bg-green-50 rounded-xl p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                  <Calendar className="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-green-600">Contract Period</p>
+                  <p className="font-semibold text-green-800">
+                    {rental.contractMonths ? `${rental.contractMonths} Months` : 'Daily Basis'}
+                  </p>
+                </div>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-green-600">Start Date</span>
+                <span className="font-medium text-green-800">{rental.startDate}</span>
+              </div>
+              {rental.endDate && (
+                <div className="flex justify-between text-sm">
+                  <span className="text-green-600">End Date</span>
+                  <span className="font-medium text-green-800">{rental.endDate}</span>
+                </div>
+              )}
+              <div className="flex justify-between text-sm mt-2 pt-2 border-t border-green-200">
+                <span className="text-green-600 font-medium">Daily Rate</span>
+                <span className="font-bold text-green-700">৳{rental.dailyRate}/day</span>
+              </div>
+            </div>
+
+            <div className="bg-amber-50 rounded-xl p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
+                  <DollarSign className="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-amber-600">Payment</p>
+                  <p className="font-semibold text-amber-800">Total Paid: ৳{rental.totalPaid.toLocaleString()}</p>
+                </div>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-600">Deposit Paid</span>
+                <span className="font-medium text-amber-800">৳{rental.deposit.toLocaleString()}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-600">Due</span>
+                <span className="font-medium text-amber-800">৳{(rental.dueRental || 0).toLocaleString()}</span>
+              </div>
+            </div>
+
+            <div className="bg-slate-50 rounded-xl p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-slate-200 rounded-lg flex items-center justify-center">
+                  <MapPin className="w-5 h-5 text-slate-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-slate-600">Hub</p>
+                  <p className="font-semibold text-slate-800">{rental.hubName || 'N/A'}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t pt-4 text-center">
+              <p className="text-xs text-slate-400">Verified by JAIBEN Mobility Ltd</p>
+              <p className="text-xs text-slate-400">Generated from JAIBEN Rental System</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 5df4a8b..73dd7ca 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -3,12 +3,12 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { 
-  Bike, 
-  Settings, 
-  Wallet, 
-  Store, 
-  Zap, 
+import {
+  Bike,
+  Settings,
+  Wallet,
+  Store,
+  Zap,
   Battery,
   Menu,
   X,
@@ -20,16 +20,20 @@ import {
   Shield,
   Truck,
   ChevronDown,
-  LogOut
+  LogOut,
+  Calculator,
+  Wrench
 } from 'lucide-react';
 
 const adminNavItems = [
   { label: 'Dashboard', href: '/admin', icon: BarChart3 },
+  { label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
+  { label: 'Rentals', href: '/admin/rentals', icon: FileText },
   { label: 'Bikers', href: '/admin/bikers', icon: Users },
   { label: 'Investors', href: '/admin/investors', icon: Wallet },
   { label: 'Fleet Management', href: '/admin/fleet', icon: Bike },
-  { label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
-  { label: 'Rentals', href: '/admin/rentals', icon: FileText },
+  { label: 'Damage & Maintenance', href: '/admin/maintenance', icon: Wrench },
+  { label: 'Accounting', href: '/admin/accounting', icon: Calculator },
   { label: 'Revenue', href: '/admin/revenue', icon: CreditCard },
   { label: 'Reports', href: '/admin/reports', icon: BarChart3 },
   { label: 'Geofences', href: '/admin/geofence', icon: MapPin },
@@ -61,10 +65,10 @@ export default function Sidebar() {
   const isAdmin = pathname.startsWith('/admin');
   const isInvestor = pathname.startsWith('/investor');
   const isShop = pathname.startsWith('/shop');
-  
-  const navItems = isAdmin ? adminNavItems : 
-                 isInvestor ? investorNavItems : 
-                 isShop ? shopNavItems : bikerNavItems;
+
+  const navItems = isAdmin ? adminNavItems :
+    isInvestor ? investorNavItems :
+      isShop ? shopNavItems : bikerNavItems;
 
   const toggleMenu = (label: string) => {
     setExpandedMenu(expandedMenu === label ? null : label);
@@ -107,8 +111,8 @@ export default function Sidebar() {
                 onClick={() => setMobileOpen(false)}
                 className={`
                   flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200
-                  ${isActive 
-                    ? 'bg-accent text-white shadow-sm' 
+                  ${isActive
+                    ? 'bg-accent text-white shadow-sm'
                     : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
                   }
                 `}
@@ -141,7 +145,7 @@ export default function Sidebar() {
       </aside>
 
       {mobileOpen && (
-        <div 
+        <div
           className="lg:hidden fixed inset-0 bg-black/30 z-30"
           onClick={() => setMobileOpen(false)}
         />
diff --git a/src/data/mockData.ts b/src/data/mockData.ts
index 43f9b8d..83b16bd 100644
--- a/src/data/mockData.ts
+++ b/src/data/mockData.ts
@@ -24,6 +24,21 @@ export interface Bike {
   purchaseDate?: string;
   currentRent?: number;
   totalEarnings?: number;
+  assignmentHistory?: BikeAssignment[];
+}
+
+export interface BikeAssignment {
+  id: string;
+  bikeId: string;
+  bikerId: string;
+  bikerName: string;
+  assignedAt: string;
+  assignedBy: string;
+  unassignedAt?: string;
+  unassignedBy?: string;
+  reason?: string;
+  status: 'active' | 'completed';
+  notes?: string;
 }
 
 export interface Rental {
@@ -154,16 +169,62 @@ export const users: User[] = [
 ];
 
 export const bikes: Bike[] = [
-  { id: 'b1', model: 'Etron ET50', brand: 'Etron', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: ' Dhaka Metro Cha-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'u1', investorId: 'inv1', purchasePrice: 85000, purchaseDate: '2024-01-15', currentRent: 350, totalEarnings: 14250 },
-  { id: 'b2', model: 'Yadea DT3', brand: 'Yadea', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-5678', status: 'available', batteryLevel: 95, location: 'Banani', investorId: 'inv1', purchasePrice: 65000, purchaseDate: '2024-01-20', currentRent: 0, totalEarnings: 12750 },
-  { id: 'b3', model: 'AIMA Lightning', brand: 'AIMA', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-9012', status: 'rented', batteryLevel: 62, location: 'Uttara', assignedTo: 'u2', investorId: 'inv2', purchasePrice: 95000, purchaseDate: '2023-11-05', currentRent: 450, totalEarnings: 22500 },
-  { id: 'b4', model: 'TVS iQube', brand: 'TVS', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-3456', status: 'maintenance', batteryLevel: 45, location: 'Workshop', investorId: 'inv2', purchasePrice: 72000, purchaseDate: '2023-12-01', currentRent: 0, totalEarnings: 8500 },
-  { id: 'b5', model: 'Bajaj Chetak', brand: 'Bajaj', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-7890', status: 'available', batteryLevel: 100, location: 'Dhanmondi', investorId: 'inv2', purchasePrice: 68000, purchaseDate: '2023-11-10', currentRent: 0, totalEarnings: 20000 },
-  { id: 'b6', model: 'Hero Photon', brand: 'Hero', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-1111', status: 'rented', batteryLevel: 88, location: 'Mirpur', investorId: 'inv2', purchasePrice: 55000, purchaseDate: '2024-02-01', currentRent: 300, totalEarnings: 4500 },
-  { id: 'b7', model: 'Okinawa Praise', brand: 'Okinawa', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-2222', status: 'available', batteryLevel: 92, location: 'Gulshan 2', investorId: 'inv3', purchasePrice: 75000, purchaseDate: '2024-02-10', currentRent: 0, totalEarnings: 9500 },
-  { id: 'b8', model: 'Bajaj Chetak', brand: 'Bajaj', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-3333', status: 'available', batteryLevel: 100, location: 'Dhanmondi', purchasePrice: 70000, purchaseDate: '2024-03-01', currentRent: 0, totalEarnings: 0 },
-  { id: 'b9', model: 'TVS iQube', brand: 'TVS', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-4444', status: 'rented', batteryLevel: 75, location: 'Banani', purchasePrice: 75000, purchaseDate: '2024-03-05', currentRent: 380, totalEarnings: 1140 },
-  { id: 'b10', model: 'Yadea DT3', brand: 'Yadea', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-5555', status: 'available', batteryLevel: 90, location: 'Uttara', purchasePrice: 68000, purchaseDate: '2024-03-10', currentRent: 0, totalEarnings: 0 },
+  { 
+    id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'u1', investorId: 'inv1', purchasePrice: 85000, purchaseDate: '2024-01-15', currentRent: 350, totalEarnings: 14250,
+    assignmentHistory: [
+      { id: 'ash1', bikeId: 'EV001', bikerId: 'u3', bikerName: 'Rahim Khan', assignedAt: '2024-01-20 10:30:00', assignedBy: 'admin1', unassignedAt: '2024-02-15 14:20:00', unassignedBy: 'admin1', reason: 'Bike transfer to another biker', status: 'completed', notes: 'Initial assignment' },
+      { id: 'ash2', bikeId: 'EV001', bikerId: 'u1', bikerName: 'Karim Ahmed', assignedAt: '2024-02-15 15:00:00', assignedBy: 'admin1', status: 'active', notes: 'Reassigned after maintenance' }
+    ]
+  },
+  { 
+    id: 'EV002', model: 'Yadea DT3', brand: 'Yadea', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-5678', status: 'available', batteryLevel: 95, location: 'Banani', investorId: 'inv1', purchasePrice: 65000, purchaseDate: '2024-01-20', currentRent: 0, totalEarnings: 12750,
+    assignmentHistory: [
+      { id: 'ash3', bikeId: 'EV002', bikerId: 'u1', bikerName: 'Karim Ahmed', assignedAt: '2024-01-25 09:00:00', assignedBy: 'admin1', unassignedAt: '2024-03-01 11:30:00', unassignedBy: 'admin1', reason: 'Rental completed', status: 'completed', notes: 'First rental period' }
+    ]
+  },
+  { 
+    id: 'EV003', model: 'AIMA Lightning', brand: 'AIMA', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-9012', status: 'rented', batteryLevel: 62, location: 'Uttara', assignedTo: 'u2', investorId: 'inv2', purchasePrice: 95000, purchaseDate: '2023-11-05', currentRent: 450, totalEarnings: 22500,
+    assignmentHistory: [
+      { id: 'ash4', bikeId: 'EV003', bikerId: 'u4', bikerName: 'Jamal Hossain', assignedAt: '2023-11-10 08:00:00', assignedBy: 'admin1', unassignedAt: '2024-01-05 16:00:00', unassignedBy: 'admin1', reason: 'Bike returned for maintenance', status: 'completed' },
+      { id: 'ash5', bikeId: 'EV003', bikerId: 'u2', bikerName: 'Sofiq Rahman', assignedAt: '2024-01-10 10:00:00', assignedBy: 'admin1', status: 'active', notes: 'Rent-to-own agreement' }
+    ]
+  },
+  { 
+    id: 'EV004', model: 'TVS iQube', brand: 'TVS', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-3456', status: 'maintenance', batteryLevel: 45, location: 'Workshop', investorId: 'inv2', purchasePrice: 72000, purchaseDate: '2023-12-01', currentRent: 0, totalEarnings: 8500,
+    assignmentHistory: [
+      { id: 'ash6', bikeId: 'EV004', bikerId: 'u5', bikerName: 'Ripon Mia', assignedAt: '2023-12-05 12:00:00', assignedBy: 'admin1', unassignedAt: '2024-03-10 09:00:00', unassignedBy: 'admin1', reason: 'Battery replacement - under maintenance', status: 'completed', notes: 'Battery damaged, sent to workshop' }
+    ]
+  },
+  { 
+    id: 'EV005', model: 'Bajaj Chetak', brand: 'Bajaj', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-7890', status: 'available', batteryLevel: 100, location: 'Dhanmondi', investorId: 'inv2', purchasePrice: 68000, purchaseDate: '2023-11-10', currentRent: 0, totalEarnings: 20000,
+    assignmentHistory: [
+      { id: 'ash7', bikeId: 'EV005', bikerId: 'u6', bikerName: 'Mizanur Rahman', assignedAt: '2023-11-15 14:00:00', assignedBy: 'admin1', unassignedAt: '2024-02-20 10:30:00', unassignedBy: 'admin1', reason: 'Biker requested return', status: 'completed', notes: 'Returned in good condition' }
+    ]
+  },
+  { 
+    id: 'EV006', model: 'Hero Photon', brand: 'Hero', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-1111', status: 'rented', batteryLevel: 88, location: 'Mirpur', investorId: 'inv2', purchasePrice: 55000, purchaseDate: '2024-02-01', currentRent: 300, totalEarnings: 4500,
+    assignmentHistory: [
+      { id: 'ash8', bikeId: 'EV006', bikerId: 'u7', bikerName: 'Alamin Hossain', assignedAt: '2024-02-05 11:00:00', assignedBy: 'admin1', status: 'active' }
+    ]
+  },
+  { 
+    id: 'EV007', model: 'Okinawa Praise', brand: 'Okinawa', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-2222', status: 'available', batteryLevel: 92, location: 'Gulshan 2', investorId: 'inv3', purchasePrice: 75000, purchaseDate: '2024-02-10', currentRent: 0, totalEarnings: 9500,
+    assignmentHistory: []
+  },
+  { 
+    id: 'EV008', model: 'Bajaj Chetak', brand: 'Bajaj', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-3333', status: 'available', batteryLevel: 100, location: 'Dhanmondi', purchasePrice: 70000, purchaseDate: '2024-03-01', currentRent: 0, totalEarnings: 0,
+    assignmentHistory: []
+  },
+  { 
+    id: 'EV009', model: 'TVS iQube', brand: 'TVS', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-4444', status: 'rented', batteryLevel: 75, location: 'Banani', purchasePrice: 75000, purchaseDate: '2024-03-05', currentRent: 380, totalEarnings: 1140,
+    assignmentHistory: [
+      { id: 'ash9', bikeId: 'EV009', bikerId: 'u8', bikerName: 'Babul Akter', assignedAt: '2024-03-08 09:30:00', assignedBy: 'admin1', status: 'active' }
+    ]
+  },
+  { 
+    id: 'EV010', model: 'Yadea DT3', brand: 'Yadea', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-5555', status: 'available', batteryLevel: 90, location: 'Uttara', purchasePrice: 68000, purchaseDate: '2024-03-10', currentRent: 0, totalEarnings: 0,
+    assignmentHistory: []
+  },
 ];
 
 export const rentals: Rental[] = [