From 100b567e3a92b69aa4d179044b8257a3843e6132 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Sun, 10 May 2026 03:33:38 +0600
Subject: [PATCH] feat: add document upload modal and handling logic to rental
 details page

---
 src/app/admin/rentals/[id]/page.tsx | 49 ++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/rentals/[id]/page.tsx b/src/app/admin/rentals/[id]/page.tsx
index bf66288..2d46615 100644
--- a/src/app/admin/rentals/[id]/page.tsx
+++ b/src/app/admin/rentals/[id]/page.tsx
@@ -296,6 +296,8 @@ export default function RentalDetailPage() {
   const [smsText, setSmsText] = useState('');
   const [damages, setDamages] = useState(mockDamageHistory);
   const [documents, setDocuments] = useState(mockDocuments);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [uploadDocName, setUploadDocName] = useState('');
 
   const [acceptPermission, setAcceptPermission] = useState(false);
   const [rejectPermission, setRejectPermission] = useState(false);
@@ -462,6 +464,13 @@ export default function RentalDetailPage() {
     setShowDamageModal(false);
   };
 
+  const handleUploadDocument = () => {
+    if (!uploadDocName.trim()) return;
+    setDocuments(prev => [...prev, { id: `DOC-${Date.now()}`, name: uploadDocName, type: 'other', uploadedAt: new Date().toISOString().split('T')[0], downloaded: false }]);
+    setUploadDocName('');
+    setShowUploadModal(false);
+  };
+
   const handleSendSms = () => {
     if (!smsText.trim()) return;
     alert(`SMS sent to ${rental.userPhone}: ${smsText}`);
@@ -841,7 +850,7 @@ export default function RentalDetailPage() {
                 <h3 className="font-semibold text-slate-700 flex items-center gap-2">
                   <FileText className="w-5 h-5 text-blue-500" /> Rental Documents
                 </h3>
-                <button className="px-3 py-1.5 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 flex items-center gap-2">
+                <button onClick={() => setShowUploadModal(true)} className="px-3 py-1.5 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 flex items-center gap-2">
                   <Upload className="w-4 h-4" /> Upload Document
                 </button>
               </div>
@@ -1104,6 +1113,44 @@ export default function RentalDetailPage() {
           </div>
         </div>
       )}
+
+      {showUploadModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <Upload className="w-5 h-5 text-blue-500" /> Upload Document
+              </h3>
+              <button onClick={() => setShowUploadModal(false)} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="text-sm text-slate-600 block mb-1">Document Name</label>
+                <input
+                  type="text"
+                  value={uploadDocName}
+                  onChange={(e) => setUploadDocName(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                  placeholder="Enter document name..."
+                />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600 block mb-1">Choose File</label>
+                <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-blue-400 cursor-pointer">
+                  <Upload className="w-8 h-8 text-slate-300 mx-auto mb-2" />
+                  <p className="text-sm text-slate-500">Click to upload or drag and drop</p>
+                  <p className="text-xs text-slate-400 mt-1">PDF, PNG, JPG (max 10MB)</p>
+                  <input type="file" className="hidden" accept=".pdf,.png,.jpg,.jpeg" />
+                </div>
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setShowUploadModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
+              <button onClick={handleUploadDocument} disabled={!uploadDocName.trim()} className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">Upload</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file