refactor: rename messageHistory to smsHistory and update schema with unique IDs and timestamps

src/app/admin/kyc/page.tsx

@@ -98,7 +98,7 @@ interface Request {
   appointmentDate?: string;
 
   notes: string[];
-  messageHistory: { date: string; message: string; from: 'admin' | 'user' }[];
+  smsHistory: { id: string; message: string; sentAt: string; sentBy: string }[];
 }
 
 const mockRequests: Request[] = [
@@ -123,7 +123,7 @@ const mockRequests: Request[] = [
     riderPlan: 'daily_rent',
     employmentInfo: { company: 'Foodpanda', monthlyEarning: 2500, whyEV: 'Low maintenance, good for delivery', experience: '3 years bike riding' },
     notes: ['Downloaded app and applied through mobile'],
-    messageHistory: [],
+    smsHistory: [],
   },
   {
     id: 'REQ002',
@@ -143,9 +143,9 @@ const mockRequests: Request[] = [
       { id: 'd6', name: 'TIN Certificate', status: 'pending' },
       { id: 'd7', name: 'Bank Statement', status: 'pending' },
     ],
-    messageHistory: [
-      { date: '2024-03-19', message: 'Please upload your TIN certificate and latest bank statement', from: 'admin' },
-      { date: '2024-03-19', message: 'I will upload them today', from: 'user' },
+    smsHistory: [
+      { id: 'sms1', message: 'Please upload your TIN certificate and latest bank statement', sentAt: '2024-03-19', sentBy: 'admin' },
+      { id: 'sms2', message: 'I will upload them today', sentAt: '2024-03-19', sentBy: 'user' },
     ],
     notes: ['Walked in at Gulshan office - referred by current biker'],
   },
@@ -167,7 +167,7 @@ const mockRequests: Request[] = [
       { id: 'd10', name: 'Shop Photos', status: 'uploaded', uploadedAt: '2024-03-18' },
     ],
     notes: ['Applied through website'],
-    messageHistory: [],
+    smsHistory: [],
   },
   {
     id: 'REQ004',
@@ -199,7 +199,7 @@ const mockRequests: Request[] = [
     scheduleDate: '2024-03-15',
     appointmentDate: '2024-03-15',
     notes: ['Approved and active - EV allocated'],
-    messageHistory: [],
+    smsHistory: [],
   },
   {
     id: 'REQ005',
@@ -219,8 +219,8 @@ const mockRequests: Request[] = [
       { id: 'd15', name: 'TIN Certificate', status: 'uploaded', uploadedAt: '2024-03-10' },
       { id: 'd16', name: 'Bank Statement', status: 'uploaded', uploadedAt: '2024-03-10' },
     ],
-    messageHistory: [
-      { date: '2024-03-10', message: 'Your NID document is not clear. Please re-upload.', from: 'admin' },
+    smsHistory: [
+      { id: 'sms3', message: 'Your NID document is not clear. Please re-upload.', sentAt: '2024-03-10', sentBy: 'admin' },
     ],
     notes: ['NID was unclear/blurry'],
   },
@@ -245,7 +245,7 @@ const mockRequests: Request[] = [
     nomineeDetails: { name: 'Rashid', phone: '01798765432', relationship: 'Brother', nid: '9876543210987' },
     employmentInfo: { company: ' ssl', monthlyEarning: 2000, whyEV: 'Better income than fuel bike', experience: '2 years' },
     notes: [],
-    messageHistory: [],
+    smsHistory: [],
   },
 ];
 
@@ -398,9 +398,9 @@ export default function RequestsPage() {
           return {
             ...req,
             status: 'documents_needed' as const,
-            messageHistory: [
-              ...req.messageHistory,
-              { date: new Date().toISOString().split('T')[0], message: messageText, from: 'admin' as const }
+            smsHistory: [
+              ...req.smsHistory,
+              { id: `sms-${Date.now()}`, message: messageText, sentAt: new Date().toISOString(), sentBy: 'admin' }
             ],
             notes: [...req.notes, messageText]
           };
@@ -630,9 +630,9 @@ export default function RequestsPage() {
                           <Check className="w-3 h-3" /> {stageLabels[request.verificationStage]}
                         </span>
                       )}
-                      {request.messageHistory.length > 0 && (
+                      {request.smsHistory.length > 0 && (
                         <p className="flex items-center gap-1 text-blue-600">
-                          <MessageSquare className="w-3 h-3" /> {request.messageHistory.length} msg
+                          <MessageSquare className="w-3 h-3" /> {request.smsHistory.length} msg
                         </p>
                       )}
                     </div>
@@ -701,7 +701,7 @@ export default function RequestsPage() {
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
             <div className="p-4 border-b border-slate-100 flex items-center justify-between">
-              <h3 className="font-semibold text-slate-800">Send Message to {selectedRequest.name}</h3>
+              <h3 className="font-semibold text-slate-800">SMS to {selectedRequest.phone}</h3>
               <button onClick={() => setShowMessageModal(false)} className="p-1 hover:bg-slate-100 rounded">
                 <X className="w-5 h-5 text-slate-400" />
               </button>
@@ -940,17 +940,17 @@ export default function RequestsPage() {
                 </div>
               )}
 
-              {selectedRequest.messageHistory.length > 0 && (
+              {selectedRequest.smsHistory.length > 0 && (
                 <div className="mb-6">
-                  <h4 className="font-semibold text-slate-700 mb-3">Message History</h4>
+                  <h4 className="font-semibold text-slate-700 mb-3">SMS History</h4>
                   <div className="space-y-2">
-                    {selectedRequest.messageHistory.map((msg, idx) => (
-                      <div key={idx} className={`p-3 rounded-lg ${msg.from === 'admin' ? 'bg-blue-50' : 'bg-slate-50'}`}>
+                    {selectedRequest.smsHistory.slice().reverse().map((msg) => (
+                      <div key={msg.id} className={`p-3 rounded-lg ${msg.sentBy === 'admin' ? 'bg-blue-50' : 'bg-slate-50'}`}>
                         <div className="flex items-center justify-between mb-1">
-                          <span className={`text-xs font-medium ${msg.from === 'admin' ? 'text-blue-600' : 'text-slate-600'}`}>
-                            {msg.from === 'admin' ? 'Admin' : 'User'}
+                          <span className={`text-xs font-medium ${msg.sentBy === 'admin' ? 'text-blue-600' : 'text-slate-600'}`}>
+                            {msg.sentBy === 'admin' ? 'Admin' : 'User'}
                           </span>
-                          <span className="text-xs text-slate-400">{msg.date}</span>
+                          <span className="text-xs text-slate-400">{msg.sentAt}</span>
                         </div>
                         <p className="text-sm text-slate-700">{msg.message}</p>
                       </div>
@@ -1095,7 +1095,7 @@ export default function RequestsPage() {
             bikeRequested: data.bikeRequested,
             scheduleDate: data.scheduleDate,
             notes: [],
-            messageHistory: [],
+            smsHistory: [],
           };
           setRequests([newRequest, ...requests]);
           setShowNewApplicationModal(false);
@@ -1259,7 +1259,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
       employmentInfo: formData.employmentInfo,
       nomineeDetails: formData.nomineeDetails,
       notes: [],
-      messageHistory: [],
+      smsHistory: [],
     };
     onSave(newRequest);
   };