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

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

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