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

refactor: update rental payment display to show detailed due amount and penalty breakdown

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-12 20:27:46 +06:00
parent 9e907ec6ce
commit dfd1918cfb
1 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/admin/rentals/page.tsx
View File

@@ -584,9 +584,9 @@ export default function RentalsPage() {
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Bike</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Subscription</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Hub</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Deposit</th>
{/* <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Subscription</th> */}
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Payment</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
@@ -627,9 +627,6 @@ export default function RentalsPage() {
{typeBadge.label}
</span>
</td>
<td className="px-4 py-3">
<span className="text-sm text-slate-600 capitalize">{rental.subscriptionType}</span>
</td>
<td className="px-4 py-3">
<span className="text-sm text-slate-600">{rental.hubName}</span>
</td>
@@ -641,25 +638,32 @@ export default function RentalsPage() {
</span>
</div>
</td>
<td className="px-4 py-3">
{(paymentBadge.pendingRent && paymentBadge.pendingRent > 0) ? (
<div>
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> Pending
</span>
<p className="text-xs text-amber-600 mt-1">৳{paymentBadge.pendingRent} ({paymentBadge.pendingRentDays}d)</p>
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
</span>
)}
</td>
{/* <td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${penaltyBadge.style}`}>
{penaltyBadge.label}
</span>
<span className="text-sm text-slate-600 capitalize">{rental.subscriptionType}</span>
</td> */}
<td className="px-4 py-3">
{(() => {
const rent = rental[rental.subscriptionType === 'daily' ? 'dailyRate' : rental.subscriptionType === 'weekly' ? 'weeklyRate' : 'monthlyRate'];
const due = rental.pendingRent || 0;
const penalty = rental.penaltyAmount || 0;
const totalDue = due + penalty;
if (totalDue > 0) {
return (
<div>
<span className="text-sm font-medium text-amber-600">৳{totalDue.toLocaleString()}</span>
<p className="text-xs text-slate-400">{rental.subscriptionType} ৳{rent}/{(rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'wk' : 'mo')}</p>
{penalty > 0 && <span className="text-xs text-red-500">+৳{penalty} penalty</span>}
</div>
);
}
return (
<div>
<span className="text-sm font-medium text-slate-700">৳{rent.toLocaleString()}</span>
<p className="text-xs text-slate-400 capitalize">{rental.subscriptionType}</p>
</div>
);
})()}
</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusBadge.style}`}>
{statusBadge.label}
@@ -698,8 +702,11 @@ export default function RentalsPage() {
<div className="md:hidden p-3 space-y-3">
{filteredRentals.map(rental => {
const statusBadge = getStatusBadge(rental.status);
const paymentBadge = getPaymentStatusBadge(rental.paymentStatus, rental.pendingRent, rental.pendingRentDays);
const typeBadge = getTypeBadge(rental.type);
const rent = rental[rental.subscriptionType === 'daily' ? 'dailyRate' : rental.subscriptionType === 'weekly' ? 'weeklyRate' : 'monthlyRate'];
const due = rental.pendingRent || 0;
const penalty = rental.penaltyAmount || 0;
const totalDue = due + penalty;
return (
<div key={rental.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
<div className="flex items-center justify-between">
@@ -744,14 +751,17 @@ export default function RentalsPage() {
{rental.depositPaid ? 'Paid' : 'Unpaid'}
</span>
</div>
{(paymentBadge.pendingRent && paymentBadge.pendingRent > 0) ? (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> ৳{paymentBadge.pendingRent}
</span>
{totalDue > 0 ? (
<div className="text-right">
<span className="text-sm font-medium text-amber-600">৳{totalDue.toLocaleString()}</span>
<p className="text-xs text-slate-400">{rental.subscriptionType} ৳{rent}/{(rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'wk' : 'mo')}</p>
{penalty > 0 && <span className="text-xs text-red-500">+৳{penalty}</span>}
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
</span>
<div className="text-right">
<span className="text-sm font-medium text-slate-700">৳{rent.toLocaleString()}</span>
<p className="text-xs text-slate-400 capitalize">{rental.subscriptionType}</p>
</div>
)}
</div>