shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add document upload modal and handling logic to rental details page

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-10 03:33:38 +06:00
parent bf3e1c8931
commit 100b567e3a
1 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/admin/rentals/[id]/page.tsx
View File

@@ -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>
);
}