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

Add full FOCO investor management system with CRUD, investments, and transactions

Browse Source
This commit is contained in:
sazzadulalambd
2026-04-22 01:02:45 +06:00
parent 5338038ea2
commit dab0c11b15
32 changed files with 7673 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/app/admin/rentals/page.tsx Normal file
View File

@@ -0,0 +1,108 @@
import { FileText, Search, Filter, Bike, User, Calendar, DollarSign, Clock, MoreVertical, Eye } from 'lucide-react';
import { rentals, bikes, users } from '@/data/mockData';
export default function RentalsPage() {
return (
<div className="p-4 lg:p-6">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
<div>
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Rentals</h1>
<p className="text-sm text-slate-500 mt-1">View and manage all rental transactions</p>
</div>
<div className="flex items-center gap-2">
<button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
<Filter className="w-4 h-4" /> Filter
</button>
<button className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark">
Export
</button>
</div>
</div>
<div className="grid grid-cols-4 gap-4 mb-6">
{['Active', 'Pending', 'Completed', 'Disputed'].map(status => {
const count = rentals.filter(r => r.status === status.toLowerCase()).length;
return (
<div key={status} className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
<p className="text-2xl font-extrabold text-slate-800">{count}</p>
<p className="text-sm text-slate-500">{status} Rentals</p>
</div>
);
})}
</div>
<div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-slate-50">
<tr>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rental ID</th>
<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">Start Date</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">Total Paid</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>
</tr>
</thead>
<tbody className="divide-y divide-slate-50">
{rentals.map(rental => {
const bike = bikes.find(b => b.id === rental.bikeId);
return (
<tr key={rental.id} className="hover:bg-slate-50 transition-colors">
<td className="px-4 py-3">
<span className="text-sm font-medium text-slate-700">{rental.id}</span>
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<Bike className="w-4 h-4 text-slate-400" />
<span className="text-sm text-slate-600">{bike?.model}</span>
</div>
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<User className="w-4 h-4 text-slate-400" />
<span className="text-sm text-slate-600">{rental.userId}</span>
</div>
</td>
<td className="px-4 py-3">
<span className="text-sm text-slate-600 capitalize">{rental.type}</span>
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1 text-sm text-slate-600">
<Calendar className="w-3 h-3" /> {rental.startDate}
</div>
</td>
<td className="px-4 py-3">
<span className="text-sm font-medium text-slate-700">৳{rental.deposit}</span>
</td>
<td className="px-4 py-3">
<span className="text-sm font-semibold text-green-600">৳{rental.totalPaid}</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 ${
rental.status === 'active' ? 'bg-green-100 text-green-700' :
rental.status === 'pending' ? 'bg-amber-100 text-amber-700' :
rental.status === 'completed' ? 'bg-blue-100 text-blue-700' :
'bg-red-100 text-red-700'
}`}>
{rental.status}
</span>
</td>
<td className="px-4 py-3">
<button className="p-2 hover:bg-slate-100 rounded-lg">
<Eye className="w-4 h-4 text-slate-400" />
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
);
}