From d4959e702e84e4584c6b21d69fc33f94b5d6506d Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Tue, 5 May 2026 00:29:47 +0600
Subject: [PATCH] feat: update employment earnings metric to monthly and
 document new KYC application requirements

---
 src/app/admin/kyc/page.tsx      | 1137 +++++++++++++++++++++++--------
 src/app/admin/settings/page.tsx |  318 ++++++++-
 2 files changed, 1169 insertions(+), 286 deletions(-)

diff --git a/src/app/admin/kyc/page.tsx b/src/app/admin/kyc/page.tsx
index 5e39f88..28cd0d7 100644
--- a/src/app/admin/kyc/page.tsx
+++ b/src/app/admin/kyc/page.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } 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, 
+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
@@ -24,7 +24,7 @@ interface NomineeDetails {
 
 interface EmploymentInfo {
   company: string;
-  dailyEarning: number;
+  monthlyEarning: number;
   whyEV: string;
   experience: string;
 }
@@ -81,22 +81,22 @@ interface Request {
   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' }[];
 }
@@ -121,7 +121,7 @@ const mockRequests: Request[] = [
       { 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' },
+    employmentInfo: { company: 'Foodpanda', monthlyEarning: 2500, whyEV: 'Low maintenance, good for delivery', experience: '3 years bike riding' },
     notes: ['Downloaded app and applied through mobile'],
     messageHistory: [],
   },
@@ -188,7 +188,7 @@ const mockRequests: Request[] = [
     ],
     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' },
+    employmentInfo: { company: 'Pathao', monthlyEarning: 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'] },
@@ -243,7 +243,7 @@ const mockRequests: Request[] = [
     ],
     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' },
+    employmentInfo: { company: ' ssl', monthlyEarning: 2000, whyEV: 'Better income than fuel bike', experience: '2 years' },
     notes: [],
     messageHistory: [],
   },
@@ -343,7 +343,7 @@ export default function RequestsPage() {
       if (req.id === selectedRequest.id) {
         return {
           ...req,
-          requiredDocuments: req.requiredDocuments.map(doc => 
+          requiredDocuments: req.requiredDocuments.map(doc =>
             doc.id === docId ? { ...doc, status: 'approved' as const } : doc
           )
         };
@@ -363,7 +363,7 @@ export default function RequestsPage() {
       if (req.id === selectedRequest.id) {
         return {
           ...req,
-          requiredDocuments: req.requiredDocuments.map(doc => 
+          requiredDocuments: req.requiredDocuments.map(doc =>
             doc.id === docId ? { ...doc, status: 'rejected' as const, rejectedReason: reason } : doc
           )
         };
@@ -426,7 +426,7 @@ export default function RequestsPage() {
 
     if (actionType === 'approve') {
       newStatus = 'approved';
-      successMessage = selectedRequest.type === 'biker' 
+      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') {
@@ -437,7 +437,7 @@ export default function RequestsPage() {
       successMessage = `Documents requested! SMS sent to ${selectedRequest.phone}: Please upload required documents.`;
     }
 
-    const updatedRequests = requests.map(req => 
+    const updatedRequests = requests.map(req =>
       req.id === selectedRequest.id ? { ...req, status: newStatus } : req
     );
     setRequests(updatedRequests);
@@ -453,7 +453,7 @@ export default function RequestsPage() {
           <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 
+          <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"
           >
@@ -516,31 +516,31 @@ export default function RequestsPage() {
         <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 
+              <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 
+              <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 
+              <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 
+              <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 
+              <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'}`}
               >
@@ -602,7 +602,7 @@ export default function RequestsPage() {
                       </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">
@@ -623,7 +623,7 @@ export default function RequestsPage() {
                       )}
                     </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" />}
@@ -633,11 +633,11 @@ export default function RequestsPage() {
                       {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 
+                          <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"
                           >
@@ -645,7 +645,7 @@ export default function RequestsPage() {
                           </button>
                         )}
                         {request.type === 'investor' && request.status === 'under_review' && (
-                          <button 
+                          <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"
                           >
@@ -653,14 +653,14 @@ export default function RequestsPage() {
                           </button>
                         )}
                         {request.type === 'shop' && request.status === 'under_review' && (
-                          <button 
+                          <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 
+                        <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"
                         >
@@ -673,7 +673,7 @@ export default function RequestsPage() {
               </Link>
             );
           })}
-          
+
           {filteredRequests.length === 0 && (
             <div className="p-12 text-center">
               <Users className="w-12 h-12 text-slate-300 mx-auto mb-4" />
@@ -697,35 +697,35 @@ export default function RequestsPage() {
                 <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 
+                  <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 
+                  <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 
+                  <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 
+                  <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 
+                  <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"
                   >
@@ -747,13 +747,13 @@ export default function RequestsPage() {
               </div>
             </div>
             <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
-              <button 
+              <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 
+              <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"
@@ -803,12 +803,12 @@ export default function RequestsPage() {
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <label className="text-xs text-slate-500 block mb-1">Bike Model</label>
-                        <select 
+                        <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 
+                            const updated = requests.map(r =>
+                              r.id === selectedRequest.id
                                 ? { ...r, bikeRequested: e.target.value }
                                 : r
                             );
@@ -830,14 +830,14 @@ export default function RequestsPage() {
                       </div>
                       <div>
                         <label className="text-xs text-slate-500 block mb-1">Brand</label>
-                        <input 
-                          type="text" 
+                        <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 
+                            const updated = requests.map(r =>
+                              r.id === selectedRequest.id
                                 ? { ...r, evAllocation: { ...r.evAllocation!, bikeModel: e.target.value } }
                                 : r
                             );
@@ -879,7 +879,7 @@ export default function RequestsPage() {
                           </span>
                         )}
                         {(doc.status === 'uploaded' || doc.status === 'approved') && (
-                          <button 
+                          <button
                             onClick={() => handleApproveDocument(doc.id)}
                             className="p-1.5 bg-green-100 text-green-600 rounded-lg hover:bg-green-200"
                             title="Approve"
@@ -888,7 +888,7 @@ export default function RequestsPage() {
                           </button>
                         )}
                         {(doc.status === 'uploaded' || doc.status === 'approved') && (
-                          <button 
+                          <button
                             onClick={() => {
                               const reason = prompt('Enter rejection reason:');
                               if (reason) handleRejectDocument(doc.id, reason);
@@ -974,7 +974,7 @@ export default function RequestsPage() {
               {selectedRequest.status !== 'approved' && selectedRequest.status !== 'rejected' && (
                 <>
                   {selectedRequest.type === 'biker' && (
-                    <button 
+                    <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"
                     >
@@ -982,7 +982,7 @@ export default function RequestsPage() {
                     </button>
                   )}
                   {selectedRequest.type === 'investor' && (
-                    <button 
+                    <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"
                     >
@@ -990,7 +990,7 @@ export default function RequestsPage() {
                     </button>
                   )}
                   {selectedRequest.type === 'shop' && (
-                    <button 
+                    <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"
                     >
@@ -999,7 +999,7 @@ export default function RequestsPage() {
                   )}
                 </>
               )}
-              <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"
               >
@@ -1031,19 +1031,18 @@ export default function RequestsPage() {
               </div>
             </div>
             <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
-              <button 
+              <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 
+              <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' :
+                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'
-                }`}
+                    '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</>}
@@ -1106,92 +1105,218 @@ export default function RequestsPage() {
 }
 
 function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onClose: () => void; onSave: (data: Partial<Request>) => void }) {
-  const [formData, setFormData] = useState<Partial<Request>>({
+  const [formData, setFormData] = useState<{
+    applicationSource: string;
+    sourceDetails: string;
+    type: string;
+    status: string;
+    hubId: string;
+    name: string;
+    phone: string;
+    altPhone: string;
+    email: string;
+    dateOfBirth: string;
+    gender: string;
+    bloodGroup: string;
+    occupation: string;
+    nid: string;
+    passport: string;
+    presentAddress: { line1: string; line2: string; division: string; district: string; zip: string; country: string };
+    permanentAddress: { sameAsPresent: boolean; line1: string; line2: string; division: string; district: string; zip: string; country: string };
+    emergencyContact: { name: string; phone: string; relation: string; email: string; address: string };
+    drivingLicense: { number: string; class: string; issueDate: string; expiryDate: string; status: string };
+    membershipType: string;
+    referralCode: string;
+    referredBy: string;
+    employmentInfo: { company: string; monthlyEarning: number; whyEV: string; experience: string };
+    nomineeDetails: { name: string; phone: string; relationship: string; nid: string; dob: string; email: string; address: string; percentage: number };
+    riderPlan: string;
+    evModel: string;
+    evCondition: string;
+    scheduleDate: string;
+    requiredDocuments: Document[];
+  }>({
     applicationSource: 'walkin',
     sourceDetails: '',
+    type: 'biker',
+    status: 'pending',
+    hubId: '',
     name: '',
     phone: '',
+    altPhone: '',
     email: '',
-    type: 'biker',
-    location: '',
-    address: '',
+    dateOfBirth: '',
+    gender: '',
+    bloodGroup: '',
+    occupation: '',
+    nid: '',
+    passport: '',
+    presentAddress: { line1: '', line2: '', division: '', district: '', zip: '', country: 'Bangladesh' },
+    permanentAddress: { sameAsPresent: false, line1: '', line2: '', division: '', district: '', zip: '', country: 'Bangladesh' },
+    emergencyContact: { name: '', phone: '', relation: '', email: '', address: '' },
+    drivingLicense: { number: '', class: '', issueDate: '', expiryDate: '', status: 'not_applied' },
+    membershipType: 'free',
+    referralCode: '',
+    referredBy: '',
+    employmentInfo: { company: '', monthlyEarning: 0, whyEV: '', experience: '' },
+    nomineeDetails: { name: '', phone: '', relationship: '', nid: '', dob: '', email: '', address: '', percentage: 100 },
     riderPlan: 'daily_rent',
-    nomineeDetails: { name: '', phone: '', relationship: '', nid: '' },
-    employmentInfo: { company: '', dailyEarning: 0, whyEV: '', experience: '' },
-    securityDeposit: 0,
-    advancePayment: 0,
-    paymentMethod: 'cash',
+    evModel: '',
+    evCondition: 'new',
+    scheduleDate: '',
+    requiredDocuments: [],
   });
 
   const [step, setStep] = useState(1);
 
-  const updateField = (field: string, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
+  const updateField = (path: string, value: any) => {
+    setFormData(prev => {
+      const keys = path.split('.');
+      if (keys.length === 1) return { ...prev, [keys[0]]: value };
+      const updated = { ...prev };
+      let obj: any = updated;
+      for (let i = 0; i < keys.length - 1; i++) {
+        if (!obj[keys[i]]) obj[keys[i]] = {};
+        obj = obj[keys[i]];
+      }
+      obj[keys[keys.length - 1]] = value;
+      return updated;
+    });
   };
 
-  const updateNested = (parent: string, field: string, value: any) => {
+  const updateDocStatus = (docId: string, status: 'pending' | 'uploaded' | 'approved' | 'rejected') => {
     setFormData(prev => ({
       ...prev,
-      [parent]: { ...(prev as any)[parent], [field]: value }
+      requiredDocuments: prev.requiredDocuments.map(d =>
+        d.id === docId ? { ...d, status, uploadedAt: status === 'uploaded' ? new Date().toISOString().split('T')[0] : d.uploadedAt } : d
+      ),
     }));
   };
 
+  useEffect(() => {
+    if (isOpen && formData.type) {
+      const docs = getDocumentsForType(formData.type as KYCType);
+      setFormData(prev => ({ ...prev, requiredDocuments: docs }));
+    }
+  }, [isOpen, formData.type]);
+
+  const getDocumentsForType = (kycType: string): Document[] => {
+    const docs: Record<string, Document[]> = {
+      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' },
+        { id: 'doc5', name: 'Bank Account Card', status: 'pending' },
+        { id: 'doc6', name: 'Mobile Wallet Info', status: 'pending' },
+      ],
+      investor: [
+        { id: 'doc1', name: 'NID', status: 'pending' },
+        { id: 'doc2', name: 'TIN Certificate', status: 'pending' },
+        { id: 'doc3', name: 'Bank Statement', status: 'pending' },
+        { id: 'doc4', name: 'Photo', status: 'pending' },
+      ],
+      shop: [
+        { id: 'doc1', name: 'Trade License', status: 'pending' },
+        { id: 'doc2', name: 'Owner NID', status: 'pending' },
+        { id: 'doc3', name: 'Shop Photos', status: 'pending' },
+        { id: 'doc4', name: 'Electricity Bill', status: 'pending' },
+      ],
+      merchant: [
+        { id: 'doc1', name: 'NID', status: 'pending' },
+        { id: 'doc2', name: 'Trade License', status: 'pending' },
+        { id: 'doc3', name: 'Shop/Store Photo', status: 'pending' },
+      ],
+    };
+    return docs[kycType] || docs.biker;
+  };
+
+  const handleSave = () => {
+    const newRequest: Request = {
+      id: `REQ${String(Date.now()).slice(-6)}`,
+      applicationSource: formData.applicationSource as ApplicationSource,
+      sourceDetails: formData.sourceDetails,
+      name: formData.name,
+      phone: formData.phone,
+      email: formData.email,
+      type: formData.type as KYCType,
+      status: formData.status as Request['status'],
+      verificationStage: 'application',
+      submittedAt: new Date().toISOString().split('T')[0],
+      location: `${formData.presentAddress.division}, ${formData.presentAddress.district}`,
+      address: `${formData.presentAddress.line1}, ${formData.presentAddress.line2}, ${formData.presentAddress.district}, ${formData.presentAddress.zip}`,
+      requiredDocuments: formData.requiredDocuments,
+      riderPlan: formData.riderPlan as RiderPlan,
+      employmentInfo: formData.employmentInfo,
+      nomineeDetails: formData.nomineeDetails,
+      notes: [],
+      messageHistory: [],
+    };
+    onSave(newRequest);
+  };
+
   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 className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col">
+        <div className="p-4 border-b border-slate-100 flex items-center justify-between flex-shrink-0">
           <div>
-            <h3 className="font-semibold text-slate-800">New Application</h3>
-            <p className="text-xs text-slate-500">Step {step} of 5</p>
+            <h3 className="font-semibold text-slate-800 text-lg">New KYC Application</h3>
+            <p className="text-xs text-slate-500">Step {step} of 5 - {step === 1 ? 'Basic Info' : step === 2 ? 'Employment' : step === 3 ? 'Nominee' : step === 4 ? 'Plan Selection' : 'Documents'}</p>
           </div>
-          <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded">
+          <button onClick={onClose} className="p-1.5 hover:bg-slate-100 rounded-lg">
             <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">
+        <div className="px-4 py-3 bg-slate-50 border-b border-slate-100 flex-shrink-0">
+          <div className="flex items-center gap-2">
             {[
-              { 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'}`} />
+              { n: 1, l: 'Basic', icon: User },
+              { n: 2, l: 'Employment', icon: Briefcase },
+              { n: 3, l: 'Nominee', icon: Users },
+              { n: 4, l: 'Plan', icon: Calendar },
+              { n: 5, l: 'Docs', icon: FileText },
+            ].map((s, idx) => (
+              <div key={s.n} className={`flex-1 flex items-center gap-2 ${idx > 0 ? 'justify-start pl-2' : ''}`}>
+                <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold ${step >= s.n ? 'bg-accent text-white' : 'bg-slate-200 text-slate-500'
+                  }`}>
+                  {step > s.n ? <Check className="w-4 h-4" /> : <s.icon className="w-3.5 h-3.5" />}
+                </div>
+                <span className={`text-xs hidden sm:inline ${step >= s.n ? 'text-slate-700' : 'text-slate-400'}`}>{s.l}</span>
+                {idx < 4 && <div className={`flex-1 h-0.5 rounded-full ${step > s.n ? 'bg-accent' : 'bg-slate-200'}`} />}
+              </div>
             ))}
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+        <div className="flex-1 overflow-y-auto p-4 sm:p-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
+            <div className="space-y-5">
+              <div className="bg-blue-50/80 p-4 rounded-xl border border-blue-100">
+                <h4 className="font-semibold text-blue-900 mb-3 flex items-center gap-2 text-sm">
+                  <Shield className="w-4 h-4" /> Application Details
                 </h4>
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                   <div>
-                    <label className="text-xs font-medium text-slate-600 mb-1 block">Application Source *</label>
+                    <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"
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                     >
-                      <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>
+                      <option value="walkin">Walk-in</option>
+                      <option value="app">Mobile App</option>
+                      <option value="web">Website</option>
                     </select>
                   </div>
                   <div>
-                    <label className="text-xs font-medium text-slate-600 mb-1 block">KYC Type *</label>
+                    <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"
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                     >
                       <option value="biker">Biker (Rider)</option>
                       <option value="investor">Investor</option>
@@ -1200,6 +1325,65 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
                     </select>
                   </div>
                   <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Status</label>
+                    <select
+                      value={formData.status}
+                      onChange={(e) => updateField('status', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="pending">Pending</option>
+                      <option value="active">Active</option>
+                      <option value="inactive">Inactive</option>
+                      <option value="blocked">Blocked</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Hub</label>
+                    <select
+                      value={formData.hubId}
+                      onChange={(e) => updateField('hubId', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="">Select Hub</option>
+                      <option value="hub1">Gulshan Hub</option>
+                      <option value="hub2">Banani Hub</option>
+                      <option value="hub3">Dhanmondi Hub</option>
+                      <option value="hub4">Mirpur Hub</option>
+                      <option value="hub5">Uttara Hub</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Membership Type</label>
+                    <select
+                      value={formData.membershipType}
+                      onChange={(e) => updateField('membershipType', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="free">Free</option>
+                      <option value="basic">Basic</option>
+                      <option value="premium">Premium</option>
+                      <option value="vip">VIP</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Referral Code</label>
+                    <input
+                      type="text"
+                      value={formData.referralCode}
+                      onChange={(e) => updateField('referralCode', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Optional"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-indigo-50/80 p-4 rounded-xl border border-indigo-100">
+                <h4 className="font-semibold text-indigo-900 mb-3 flex items-center gap-2 text-sm">
+                  <User className="w-4 h-4" /> Personal Information
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  <div className="sm:col-span-2 lg:col-span-1">
                     <label className="text-xs font-medium text-slate-600 mb-1 block">Full Name *</label>
                     <input
                       type="text"
@@ -1219,6 +1403,16 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
                       placeholder="01XXXXXXXXX"
                     />
                   </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Alternate Phone</label>
+                    <input
+                      type="text"
+                      value={formData.altPhone}
+                      onChange={(e) => updateField('altPhone', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Optional"
+                    />
+                  </div>
                   <div>
                     <label className="text-xs font-medium text-slate-600 mb-1 block">Email</label>
                     <input
@@ -1230,127 +1424,365 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
                     />
                   </div>
                   <div>
-                    <label className="text-xs font-medium text-slate-600 mb-1 block">Location *</label>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Date of Birth</label>
                     <input
-                      type="text"
-                      value={formData.location}
-                      onChange={(e) => updateField('location', e.target.value)}
+                      type="date"
+                      value={formData.dateOfBirth}
+                      onChange={(e) => updateField('dateOfBirth', 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>
-            </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>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Gender</label>
+                    <select
+                      value={formData.gender}
+                      onChange={(e) => updateField('gender', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="">Select</option>
+                      <option value="male">Male</option>
+                      <option value="female">Female</option>
+                      <option value="other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Blood Group</label>
+                    <select
+                      value={formData.bloodGroup}
+                      onChange={(e) => updateField('bloodGroup', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="">Select</option>
+                      <option value="A+">A+</option>
+                      <option value="A-">A-</option>
+                      <option value="B+">B+</option>
+                      <option value="B-">B-</option>
+                      <option value="AB+">AB+</option>
+                      <option value="AB-">AB-</option>
+                      <option value="O+">O+</option>
+                      <option value="O-">O-</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">NID *</label>
                     <input
                       type="text"
-                      value={formData.employmentInfo?.company}
-                      onChange={(e) => updateNested('employmentInfo', 'company', e.target.value)}
+                      value={formData.nid}
+                      onChange={(e) => updateField('nid', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="NID number"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Passport</label>
+                    <input
+                      type="text"
+                      value={formData.passport}
+                      onChange={(e) => updateField('passport', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Passport number (optional)"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-emerald-50/80 p-4 rounded-xl border border-emerald-100">
+                <h4 className="font-semibold text-emerald-900 mb-3 flex items-center gap-2 text-sm">
+                  <MapPin className="w-4 h-4" /> Present Address
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  <div className="sm:col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Address Line 1 *</label>
+                    <input
+                      type="text"
+                      value={formData.presentAddress.line1}
+                      onChange={(e) => updateField('presentAddress.line1', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="House No, Road, Area"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Address Line 2</label>
+                    <input
+                      type="text"
+                      value={formData.presentAddress.line2}
+                      onChange={(e) => updateField('presentAddress.line2', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Additional info"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Division *</label>
+                    <select
+                      value={formData.presentAddress.division}
+                      onChange={(e) => updateField('presentAddress.division', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="">Select Division</option>
+                      <option value="Dhaka">Dhaka</option>
+                      <option value="Chattogram">Chattogram</option>
+                      <option value="Khulna">Khulna</option>
+                      <option value="Barishal">Barishal</option>
+                      <option value="Rajshahi">Rajshahi</option>
+                      <option value="Rangpur">Rangpur</option>
+                      <option value="Mymensingh">Mymensingh</option>
+                      <option value="Sylhet">Sylhet</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">District *</label>
+                    <input
+                      type="text"
+                      value={formData.presentAddress.district}
+                      onChange={(e) => updateField('presentAddress.district', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="District"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Zip Code *</label>
+                    <input
+                      type="text"
+                      value={formData.presentAddress.zip}
+                      onChange={(e) => updateField('presentAddress.zip', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Zip"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Country *</label>
+                    <input
+                      type="text"
+                      value={formData.presentAddress.country}
+                      onChange={(e) => updateField('presentAddress.country', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Country"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-red-50/80 p-4 rounded-xl border border-red-100">
+                <h4 className="font-semibold text-red-900 mb-3 flex items-center gap-2 text-sm">
+                  <MapPinned className="w-4 h-4" /> Permanent Address
+                </h4>
+                <div className="flex items-center justify-between mb-3">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={formData.permanentAddress.sameAsPresent}
+                      onChange={(e) => updateField('permanentAddress.sameAsPresent', e.target.checked)}
+                      className="w-4 h-4 text-accent rounded"
+                    />
+                    <span className="text-xs text-slate-600">Same as Present Address</span>
+                  </label>
+                </div>
+                {!formData.permanentAddress.sameAsPresent && (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                    <div className="sm:col-span-2">
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">Address Line 1 *</label>
+                      <input
+                        type="text"
+                        value={formData.permanentAddress.line1}
+                        onChange={(e) => updateField('permanentAddress.line1', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                        placeholder="Permanent address"
+                        disabled={formData.permanentAddress.sameAsPresent}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">Address Line 2</label>
+                      <input
+                        type="text"
+                        value={formData.permanentAddress.line2}
+                        onChange={(e) => updateField('permanentAddress.line2', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                        placeholder="Additional info"
+                        disabled={formData.permanentAddress.sameAsPresent}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">Division *</label>
+                      <select
+                        value={formData.permanentAddress.division}
+                        onChange={(e) => updateField('permanentAddress.division', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white" disabled={formData.permanentAddress.sameAsPresent}>
+                        <option value="">Select Division</option>
+                        <option value="Dhaka">Dhaka</option>
+                        <option value="Chattogram">Chattogram</option>
+                        <option value="Khulna">Khulna</option>
+                        <option value="Barishal">Barishal</option>
+                        <option value="Rajshahi">Rajshahi</option>
+                        <option value="Rangpur">Rangpur</option>
+                        <option value="Mymensingh">Mymensingh</option>
+                        <option value="Sylhet">Sylhet</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">District *</label>
+                      <select
+                        value={formData.permanentAddress.district}
+                        onChange={(e) => updateField('permanentAddress.district', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white" disabled={formData.permanentAddress.sameAsPresent}>
+                        <option value="">Select District</option>
+                        <option value="Dhaka">Dhaka</option>
+                        <option value="Gazipur">Gazipur</option>
+                        <option value="Narayanganj">Narayanganj</option>
+                        <option value="Chattogram">Chattogram</option>
+                        <option value="Cumilla">Cumilla</option>
+                        <option value="Bogura">Bogura</option>
+                        <option value="Rajshahi">Rajshahi</option>
+                        <option value="Khulna">Khulna</option>
+                        <option value="Sylhet">Sylhet</option>
+                        <option value="Barishal">Barishal</option>
+                        <option value="Rangpur">Rangpur</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">Zip Code *</label>
+                      <input
+                        type="text"
+                        value={formData.permanentAddress.zip}
+                        onChange={(e) => updateField('permanentAddress.zip', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                        placeholder="Zip code"
+                        disabled={formData.permanentAddress.sameAsPresent}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-xs font-medium text-slate-600 mb-1 block">Country *</label>
+                      <input
+                        type="text"
+                        value={formData.permanentAddress.country}
+                        onChange={(e) => updateField('permanentAddress.country', e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                        placeholder="Bangladesh"
+                        defaultValue="Bangladesh"
+                        disabled={formData.permanentAddress.sameAsPresent}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="bg-amber-50/80 p-4 rounded-xl border border-amber-100">
+                <h4 className="font-semibold text-amber-900 mb-3 flex items-center gap-2 text-sm">
+                  <Key className="w-4 h-4" /> Driving License
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">License Number *</label>
+                    <input
+                      type="text"
+                      value={formData.drivingLicense.number}
+                      onChange={(e) => updateField('drivingLicense.number', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="License number"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Class *</label>
+                    <select
+                      value={formData.drivingLicense.class}
+                      onChange={(e) => updateField('drivingLicense.class', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="">Select Class</option>
+                      <option value="C">Class C</option>
+                      <option value="D">Class D</option>
+                      <option value="E">Class E</option>
+                      <option value="F">Class F</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Status *</label>
+                    <select
+                      value={formData.drivingLicense.status}
+                      onChange={(e) => updateField('drivingLicense.status', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="not_applied">Not Applied</option>
+                      <option value="applied">Applied</option>
+                      <option value="issued">Issued</option>
+                      <option value="expired">Expired</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Issue Date *</label>
+                    <input
+                      type="date"
+                      value={formData.drivingLicense.issueDate}
+                      onChange={(e) => updateField('drivingLicense.issueDate', e.target.value)}
+                      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">Expiry Date *</label>
+                    <input
+                      type="date"
+                      value={formData.drivingLicense.expiryDate}
+                      onChange={(e) => updateField('drivingLicense.expiryDate', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 2 && formData.type === 'biker' && (
+            <div className="space-y-5">
+              <div className="bg-purple-50/80 p-4 rounded-xl border border-purple-100">
+                <h4 className="font-semibold text-purple-900 mb-3 flex items-center gap-2 text-sm">
+                  <Briefcase className="w-4 h-4" /> Employment Information
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Current Company</label>
+                    <input
+                      type="text"
+                      value={formData.employmentInfo.company}
+                      onChange={(e) => updateField('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>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Earning (Tk)</label>
                     <input
                       type="number"
-                      value={formData.employmentInfo?.dailyEarning}
-                      onChange={(e) => updateNested('employmentInfo', 'dailyEarning', Number(e.target.value))}
+                      value={formData.employmentInfo.monthlyEarning}
+                      onChange={(e) => updateField('employmentInfo.monthlyEarning', 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">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Occupation</label>
+                    <input
+                      type="text"
+                      value={formData.occupation}
+                      onChange={(e) => updateField('occupation', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Your occupation"
+                    />
+                  </div>
+                  <div className="sm: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)}
+                      value={formData.employmentInfo.whyEV}
+                      onChange={(e) => updateField('employmentInfo.whyEV', e.target.value)}
                       className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
-                      rows={2}
+                      rows={3}
                       placeholder="Reason for choosing EV..."
                     />
                   </div>
-                  <div className="col-span-2">
+                  <div className="sm: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)}
+                      value={formData.employmentInfo.experience}
+                      onChange={(e) => updateField('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"
                     />
@@ -1360,41 +1792,202 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
             </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
+          {step === 3 && formData.type === 'biker' && (
+            <div className="space-y-5">
+              <div className="bg-pink-50/80 p-4 rounded-xl border border-pink-100">
+                <h4 className="font-semibold text-pink-900 mb-3 flex items-center gap-2 text-sm">
+                  <Users className="w-4 h-4" /> Nominee Details
                 </h4>
-                <div className="grid grid-cols-2 gap-3 mb-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  <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) => updateField('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) => updateField('nomineeDetails.relationship', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <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="Office">Office</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) => updateField('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) => updateField('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>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee Date of Birth</label>
+                    <input
+                      type="date"
+                      value={formData.nomineeDetails.dob}
+                      onChange={(e) => updateField('nomineeDetails.dob', e.target.value)}
+                      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">Nominee Email</label>
+                    <input
+                      type="email"
+                      value={formData.nomineeDetails.email}
+                      onChange={(e) => updateField('nomineeDetails.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 className="sm:col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee Address *</label>
+                    <input
+                      type="text"
+                      value={formData.nomineeDetails.address}
+                      onChange={(e) => updateField('nomineeDetails.address', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Address"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Nominee Percentage (%)</label>
+                    <input
+                      type="number"
+                      value={formData.nomineeDetails.percentage}
+                      onChange={(e) => updateField('nomineeDetails.percentage', Number(e.target.value))}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="100"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-red-50/80 p-4 rounded-xl border border-red-100 mt-4">
+                <h4 className="font-semibold text-red-900 mb-3 flex items-center gap-2 text-sm">
+                  <Phone className="w-4 h-4" /> Emergency Contact
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Contact Name *</label>
+                    <input
+                      type="text"
+                      value={formData.emergencyContact.name}
+                      onChange={(e) => updateField('emergencyContact.name', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Contact name"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Phone *</label>
+                    <input
+                      type="text"
+                      value={formData.emergencyContact.phone}
+                      onChange={(e) => updateField('emergencyContact.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">Relationship *</label>
+                    <select
+                      value={formData.emergencyContact.relation}
+                      onChange={(e) => updateField('emergencyContact.relation', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <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">Email</label>
+                    <input
+                      type="email"
+                      value={formData.emergencyContact.email}
+                      onChange={(e) => updateField('emergencyContact.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 className="sm:col-span-2 lg:col-span-2">
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">Address *</label>
+                    <input
+                      type="text"
+                      value={formData.emergencyContact.address}
+                      onChange={(e) => updateField('emergencyContact.address', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      placeholder="Address"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 4 && formData.type === 'biker' && (
+            <div className="space-y-5">
+              <div className="bg-amber-50/80 p-4 rounded-xl border border-amber-100">
+                <h4 className="font-semibold text-amber-900 mb-3 flex items-center gap-2 text-sm">
+                  <Calendar className="w-4 h-4" /> Plan Selection
+                </h4>
+                <div className="grid grid-cols-1 sm:grid-cols-3 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' },
+                    { v: 'daily_rent', l: 'Single Rent', d: 'Single person rental plan', icon: Bike },
+                    { v: 'rent_to_own', l: 'Rent to Own', d: 'Own after X months', icon: Key },
+                    { v: 'share_ev', l: 'Share EV', d: 'Shared bike', icon: Users },
                   ].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'
-                      }`}
+                      className={`p-4 rounded-lg border text-left transition-all ${formData.riderPlan === plan.v
+                        ? 'border-accent bg-accent/10 ring-1 ring-accent'
+                        : 'border-slate-200 bg-white hover:border-accent'
+                        }`}
                     >
-                      <p className="text-sm font-medium text-slate-800">{plan.l}</p>
+                      <plan.icon className={`w-5 h-5 mb-2 ${formData.riderPlan === plan.v ? 'text-accent' : 'text-slate-400'}`} />
+                      <p className="text-sm font-semibold 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 className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                   <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"
+                      value={formData.evModel}
+                      onChange={(e) => updateField('evModel', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                     >
                       <option value="">Select Model</option>
                       <option value="AIMA Lightning">AIMA Lightning</option>
@@ -1402,7 +1995,20 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
                       <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>
+                      <option value="Benling Aura">Benling Aura</option>
+                      <option value="Okinawa Ridge">Okinawa Ridge</option>
+                      <option value="Hero Optima">Hero Optima</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium text-slate-600 mb-1 block">EV Condition</label>
+                    <select
+                      value={formData.evCondition}
+                      onChange={(e) => updateField('evCondition', e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                    >
+                      <option value="new">New</option>
+                      <option value="old">Old</option>
                     </select>
                   </div>
                   <div>
@@ -1419,84 +2025,65 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
             </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)
+          {step === 5 && (
+            <div className="space-y-5">
+              <div className="bg-green-50/80 p-4 rounded-xl border border-green-100">
+                <h4 className="font-semibold text-green-900 mb-3 flex items-center gap-2 text-sm">
+                  <FileText className="w-4 h-4" /> Required Documents ({formData.type})
                 </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>
+                <p className="text-xs text-slate-600 mb-4">Documents required for {formData.type} KYC application</p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                  {formData.requiredDocuments.map((doc) => (
+                    <div key={doc.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-green-100">
+                      <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" />
+                        )}
+                        <span className="text-sm text-slate-700">{doc.name}</span>
+                      </div>
+                      <span className="text-xs text-slate-500 flex items-center gap-1">
+                        {doc.status === 'pending' ? (
+                          <span className="text-amber-600">Pending</span>
+                        ) : doc.status === 'uploaded' ? (
+                          <span className="text-blue-600">Uploaded</span>
+                        ) : doc.status === 'approved' ? (
+                          <span className="text-green-600">Approved</span>
+                        ) : (
+                          <span className="text-red-600">Rejected</span>
+                        )}
+                      </span>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
           )}
         </div>
 
-        <div className="p-4 border-t border-slate-100 flex justify-between">
+        <div className="p-4 border-t border-slate-100 flex justify-between flex-shrink-0 bg-slate-50">
           <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' : ''}`}
+            className={`px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-100 flex items-center gap-2 ${step === 1 ? 'invisible' : ''}`}
           >
-            Previous
+            <ChevronDown className="w-4 h-4 rotate-90" /> 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">
+            <button onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-100">
               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 onClick={() => setStep(step + 1)} className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark flex items-center gap-2">
+                Next <ChevronDown className="w-4 h-4 -rotate-90" />
               </button>
             ) : (
               <button
-                onClick={() => onSave(formData)}
+                onClick={handleSave}
                 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
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 1759bba..f9985e8 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -57,7 +57,9 @@ interface CompanySettings {
   };
   masterData: {
     kycDocuments: { name: string; required: boolean }[];
+    riderDocuments: { id: string; name: string; required: boolean; description: string }[];
     subscriptionPlans: { name: string; price: number; duration: number; features: string[] }[];
+    rentalPlans: { id: string; name: string; type: string; description: string; price: number; duration: number }[];
     investorDocuments: { id: string; name: string; required: boolean; description: string }[];
     merchantDocuments: { id: string; name: string; required: boolean; description: string }[];
     swapStationDocuments: { id: string; name: string; required: boolean; description: string }[];
@@ -67,7 +69,7 @@ interface CompanySettings {
       documents: { id: string; name: string; required: boolean; description: string }[];
     }[];
   };
-  parts: { id: string; name: string; price: number; inStock: number }[];
+  parts: { id: string; name: string; price?: number; minPrice?: number; maxPrice?: number; inStock: number }[];
   serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
   rentalPolicy: {
     minAge: number;
@@ -140,12 +142,27 @@ const initialSettings: CompanySettings = {
       { name: 'Address Proof', required: false },
       { name: 'Business Trade License', required: false },
     ],
+    riderDocuments: [
+      { id: 'rider_nid_front', name: 'NID (Front)', required: true, description: 'National ID card front side' },
+      { id: 'rider_nid_back', name: 'NID (Back)', required: true, description: 'National ID card back side' },
+      { id: 'rider_license', name: 'Driving License', required: true, description: 'Valid driving license' },
+      { id: 'rider_photo', name: 'Profile Photo', required: true, description: 'Recent passport size photo' },
+      { id: 'rider_bank_card', name: 'Bank Account Card', required: false, description: 'Bank account card/cheque' },
+      { id: 'rider_wallet', name: 'Mobile Wallet Info', required: false, description: 'bKash/Rocket account details' },
+    ],
     subscriptionPlans: [
       { name: 'Daily', price: 500, duration: 1, features: ['24 hours access', 'Basic support'] },
       { name: 'Weekly', price: 3000, duration: 7, features: ['7 days access', 'Priority support', 'Free swap'] },
       { name: 'Monthly', price: 10000, duration: 30, features: ['30 days access', 'VIP support', 'Unlimited swap', 'Damage coverage'] },
       { name: 'Yearly', price: 80000, duration: 365, features: ['1 year access', 'Dedicated manager', 'Unlimited swap', 'Full coverage', 'Discounted rates'] },
     ],
+    rentalPlans: [
+      { id: 'single_rent', name: 'Single Rent', type: 'single', description: 'Single person rental plan', price: 500, duration: 1 },
+      { id: 'weekly_rent', name: 'Weekly Rent', type: 'weekly', description: '7 days rental plan', price: 3000, duration: 7 },
+      { id: 'monthly_rent', name: 'Monthly Rent', type: 'monthly', description: '30 days rental plan', price: 10000, duration: 30 },
+      { id: 'rent_to_own', name: 'Rent to Own', type: 'rent-to-own', description: 'Own after X months', price: 15000, duration: 365 },
+      { id: 'share_ev', name: 'Share EV', type: 'shared', description: 'Shared bike', price: 2500, duration: 30 },
+    ],
     investorDocuments: [
       { id: 'inv_nid', name: 'NID Card (Front & Back)', required: true, description: 'National ID card copy' },
       { id: 'inv_photo', name: 'Passport Size Photo', required: true, description: 'Recent passport size photograph' },
@@ -219,10 +236,20 @@ const initialSettings: CompanySettings = {
   },
   parts: [
     { id: 'PRT-001', name: 'Battery 60V', price: 15000, inStock: 25 },
-    { id: 'PRT-002', name: 'Front Tire', price: 2500, inStock: 50 },
-    { id: 'PRT-003', name: 'Rear Tire', price: 2500, inStock: 50 },
-    { id: 'PRT-004', name: 'Brake Pad', price: 800, inStock: 100 },
-    { id: 'PRT-005', name: 'Mirror', price: 350, inStock: 80 },
+    { id: 'PRT-002', name: 'Battery 48V', price: 12000, inStock: 30 },
+    { id: 'PRT-003', name: 'Front Tire', price: 2500, inStock: 50 },
+    { id: 'PRT-004', name: 'Rear Tire', price: 2500, inStock: 50 },
+    { id: 'PRT-005', name: 'Brake Pad', price: 800, inStock: 100 },
+    { id: 'PRT-006', name: 'Mirror', price: 350, inStock: 80 },
+    { id: 'PRT-007', name: 'Controller', minPrice: 3500, maxPrice: 5000, inStock: 15 },
+    { id: 'PRT-008', name: 'Motor', minPrice: 8000, maxPrice: 12000, inStock: 10 },
+    { id: 'PRT-009', name: 'Charger', minPrice: 1500, maxPrice: 2500, inStock: 20 },
+    { id: 'PRT-010', name: 'Display Meter', price: 1200, inStock: 25 },
+    { id: 'PRT-011', name: 'Throttle', price: 800, inStock: 40 },
+    { id: 'PRT-012', name: 'Brake Cable', price: 250, inStock: 60 },
+    { id: 'PRT-013', name: 'Chain', price: 600, inStock: 35 },
+    { id: 'PRT-014', name: 'Sprocket', price: 450, inStock: 45 },
+    { id: 'PRT-015', name: 'Foot Peg', price: 300, inStock: 50 },
   ],
   serviceCenters: [
     { id: 'SC-001', name: 'JAIBEN Service Center - Gulshan', address: 'House 45, Road 13, Gulshan 1, Dhaka', phone: '+8801712345670', rating: 4.8 },
@@ -251,16 +278,19 @@ const initialSettings: CompanySettings = {
 
 export default function CompanySettingsPage() {
   const [settings, setSettings] = useState<CompanySettings>(initialSettings);
-  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'rental'>('general');
+  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental'>('general');
   const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
   const [saved, setSaved] = useState(false);
+  const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
+  const [newDocName, setNewDocName] = useState('');
+  const [newDocDesc, setNewDocDesc] = useState('');
 
   const handleSave = () => {
     setSaved(true);
     setTimeout(() => setSaved(false), 2000);
   };
 
-  const tabs = [
+const tabs = [
     { id: 'general', label: 'General', icon: Settings },
     { id: 'branding', label: 'Branding', icon: Palette },
     { id: 'social', label: 'Social Media', icon: Link2 },
@@ -268,6 +298,7 @@ export default function CompanySettingsPage() {
     { id: 'landing', label: 'Landing Page', icon: Monitor },
 
     { id: 'kyc', label: 'KYC Documents', icon: Package },
+    { id: 'parts', label: 'EV Parts', icon: Package },
     { id: 'rental', label: 'Rental Policy', icon: FileCheck },
   ];
 
@@ -901,7 +932,61 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
+                  <button 
+                    onClick={() => setAddDocType('investor')}
+                    className="mt-4 text-sm text-accent hover:underline"
+                  >
+                    + Add Document
+                  </button>
+                  {addDocType === 'investor' && (
+                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                      <input
+                        type="text"
+                        placeholder="Document name"
+                        value={newDocName}
+                        onChange={(e) => setNewDocName(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Description"
+                        value={newDocDesc}
+                        onChange={(e) => setNewDocDesc(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => {
+                            if (newDocName.trim()) {
+                              const updated = [...settings.masterData.investorDocuments, {
+                                id: `inv_${Date.now()}`,
+                                name: newDocName,
+                                required: false,
+                                description: newDocDesc || ''
+                              }];
+                              setSettings({ ...settings, masterData: { ...settings.masterData, investorDocuments: updated } });
+                              setNewDocName('');
+                              setNewDocDesc('');
+                              setAddDocType(null);
+                            }
+                          }}
+                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
+                        >
+                          Add
+                        </button>
+                        <button
+                          onClick={() => {
+                            setAddDocType(null);
+                            setNewDocName('');
+                            setNewDocDesc('');
+                          }}
+                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -931,7 +1016,61 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
+                  <button 
+                    onClick={() => setAddDocType('merchant')}
+                    className="mt-4 text-sm text-accent hover:underline"
+                  >
+                    + Add Document
+                  </button>
+                  {addDocType === 'merchant' && (
+                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                      <input
+                        type="text"
+                        placeholder="Document name"
+                        value={newDocName}
+                        onChange={(e) => setNewDocName(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Description"
+                        value={newDocDesc}
+                        onChange={(e) => setNewDocDesc(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => {
+                            if (newDocName.trim()) {
+                              const updated = [...settings.masterData.merchantDocuments, {
+                                id: `mer_${Date.now()}`,
+                                name: newDocName,
+                                required: false,
+                                description: newDocDesc || ''
+                              }];
+                              setSettings({ ...settings, masterData: { ...settings.masterData, merchantDocuments: updated } });
+                              setNewDocName('');
+                              setNewDocDesc('');
+                              setAddDocType(null);
+                            }
+                          }}
+                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
+                        >
+                          Add
+                        </button>
+                        <button
+                          onClick={() => {
+                            setAddDocType(null);
+                            setNewDocName('');
+                            setNewDocDesc('');
+                          }}
+                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -961,7 +1100,61 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  <button className="mt-4 text-sm text-accent hover:underline">+ Add Document</button>
+                  <button 
+                    onClick={() => setAddDocType('swapstation')}
+                    className="mt-4 text-sm text-accent hover:underline"
+                  >
+                    + Add Document
+                  </button>
+                  {addDocType === 'swapstation' && (
+                    <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                      <input
+                        type="text"
+                        placeholder="Document name"
+                        value={newDocName}
+                        onChange={(e) => setNewDocName(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Description"
+                        value={newDocDesc}
+                        onChange={(e) => setNewDocDesc(e.target.value)}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                      />
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => {
+                            if (newDocName.trim()) {
+                              const updated = [...settings.masterData.swapStationDocuments, {
+                                id: `ss_${Date.now()}`,
+                                name: newDocName,
+                                required: false,
+                                description: newDocDesc || ''
+                              }];
+                              setSettings({ ...settings, masterData: { ...settings.masterData, swapStationDocuments: updated } });
+                              setNewDocName('');
+                              setNewDocDesc('');
+                              setAddDocType(null);
+                            }
+                          }}
+                          className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
+                        >
+                          Add
+                        </button>
+                        <button
+                          onClick={() => {
+                            setAddDocType(null);
+                            setNewDocName('');
+                            setNewDocDesc('');
+                          }}
+                          className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -996,7 +1189,64 @@ export default function CompanySettingsPage() {
                           </div>
                         ))}
                       </div>
-                      <button className="mt-3 text-sm text-accent hover:underline">+ Add Document</button>
+                      <button 
+                        onClick={() => setAddDocType('rental')}
+                        className="mt-3 text-sm text-accent hover:underline"
+                      >
+                        + Add Document
+                      </button>
+                      {addDocType === 'rental' && (
+                        <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                          <input
+                            type="text"
+                            placeholder="Document name"
+                            value={newDocName}
+                            onChange={(e) => setNewDocName(e.target.value)}
+                            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                          />
+                          <input
+                            type="text"
+                            placeholder="Description"
+                            value={newDocDesc}
+                            onChange={(e) => setNewDocDesc(e.target.value)}
+                            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
+                          />
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => {
+                                if (newDocName.trim()) {
+                                  const updated = [...settings.masterData.rentalDocuments];
+                                  updated.forEach((rental) => {
+                                    rental.documents.push({
+                                      id: `rent_${Date.now()}`,
+                                      name: newDocName,
+                                      required: false,
+                                      description: newDocDesc || ''
+                                    });
+                                  });
+                                  setSettings({ ...settings, masterData: { ...settings.masterData, rentalDocuments: updated } });
+                                  setNewDocName('');
+                                  setNewDocDesc('');
+                                  setAddDocType(null);
+                                }
+                              }}
+                              className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
+                            >
+                              Add to All
+                            </button>
+                            <button
+                              onClick={() => {
+                                setAddDocType(null);
+                                setNewDocName('');
+                                setNewDocDesc('');
+                              }}
+                              className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   ))}
                 </div>
@@ -1004,6 +1254,52 @@ export default function CompanySettingsPage() {
             </div>
           )}
 
+          {activeTab === 'parts' && (
+            <div className="p-6 space-y-6">
+              <h3 className="text-lg font-semibold text-slate-800">EV Parts</h3>
+              
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-50">
+                    <tr>
+                      <th className="px-3 py-2 text-left text-xs font-semibold">Part ID</th>
+                      <th className="px-3 py-2 text-left text-xs font-semibold">Name</th>
+                      <th className="px-3 py-2 text-left text-xs font-semibold">Price Range</th>
+                      <th className="px-3 py-2 text-left text-xs font-semibold">In Stock</th>
+                      <th className="px-3 py-2 text-left text-xs font-semibold">Type</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {settings.parts.map(part => (
+                      <tr key={part.id} className="border-t">
+                        <td className="px-3 py-2 text-sm">{part.id}</td>
+                        <td className="px-3 py-2 text-sm font-medium">{part.name}</td>
+                        <td className="px-3 py-2 text-sm">
+                          {part.minPrice && part.maxPrice ? (
+                            <span className="text-amber-600">৳{part.minPrice} - ৳{part.maxPrice}</span>
+                          ) : part.price ? (
+                            <span>৳{part.price}</span>
+                          ) : (
+                            <span className="text-slate-400">-</span>
+                          )}
+                        </td>
+                        <td className="px-3 py-2 text-sm">{part.inStock}</td>
+                        <td className="px-3 py-2 text-sm">
+                          {part.minPrice ? (
+                            <span className="text-xs px-2 py-0.5 bg-amber-100 text-amber-700 rounded">Range</span>
+                          ) : (
+                            <span className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded">Fixed</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <button className="mt-4 text-sm text-accent hover:underline">+ Add Part</button>
+            </div>
+          )}
+
           {activeTab === 'rental' && (
             <div className="p-6 space-y-6">
               <h3 className="text-lg font-semibold text-slate-800">Rental Policy</h3>