Add full FOCO investor management system with CRUD, investments, and transactions
This commit is contained in:
75
src/app/admin/reports/page.tsx
Normal file
75
src/app/admin/reports/page.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { FileText, Download, Calendar, BarChart3, PieChart, TrendingUp, Bike, Users } from 'lucide-react';
|
||||
|
||||
export default function ReportsPage() {
|
||||
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">Reports</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Analytics and insights</p>
|
||||
</div>
|
||||
<button className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark flex items-center gap-2">
|
||||
<Download className="w-4 h-4" /> Export All Reports
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<Bike className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Fleet Utilization</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-extrabold text-slate-800 mb-2">78%</p>
|
||||
<p className="text-sm text-green-600">+5% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
|
||||
<Users className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Active Bikers</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-extrabold text-slate-800 mb-2">89</p>
|
||||
<p className="text-sm text-green-600">+12 new this month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
|
||||
<TrendingUp className="w-5 h-5 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Avg. Daily Revenue</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-extrabold text-slate-800 mb-2">৳45.6k</p>
|
||||
<p className="text-sm text-green-600">+23% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5 mb-6">
|
||||
<h2 className="font-bold text-slate-800 mb-4">Available Reports</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ title: 'Revenue Report', desc: 'Daily, weekly, monthly revenue', icon: BarChart3 },
|
||||
{ title: 'Fleet Utilization', desc: 'Bike usage and availability', icon: PieChart },
|
||||
{ title: 'Biker Activity', desc: 'Rides, hours, distance', icon: TrendingUp },
|
||||
{ title: 'Damage Report', desc: 'Incidents and claims', icon: FileText },
|
||||
{ title: 'KYC Summary', desc: 'Verification stats', icon: Users },
|
||||
{ title: 'Investment ROI', desc: 'Investor returns', icon: TrendingUp },
|
||||
].map((report, index) => {
|
||||
const Icon = report.icon;
|
||||
return (
|
||||
<div key={index} className="p-4 border border-slate-200 rounded-xl hover:border-accent hover:shadow-md transition-all cursor-pointer">
|
||||
<Icon className="w-6 h-6 text-accent mb-2" />
|
||||
<h3 className="font-semibold text-slate-800">{report.title}</h3>
|
||||
<p className="text-sm text-slate-500">{report.desc}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user