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

src/components/BikeCard.tsx

@@ -0,0 +1,65 @@
+import Image from 'next/image';
+import { Bike } from '@/data/mockData';
+
+interface BikeCardProps {
+  bike: Bike;
+  onRent?: (bikeId: string) => void;
+  compact?: boolean;
+}
+
+export default function BikeCard({ bike, onRent, compact }: BikeCardProps) {
+  const statusColors = {
+    available: 'bg-green-100 text-green-700',
+    rented: 'bg-blue-100 text-blue-700',
+    maintenance: 'bg-amber-100 text-amber-700',
+    retired: 'bg-slate-100 text-slate-500',
+  };
+
+  if (compact) {
+    return (
+      <div className="flex items-center gap-3 p-3 bg-white rounded-lg border border-slate-100 hover:border-accent/30 transition-colors">
+        <div className="w-12 h-12 rounded-lg bg-slate-100 overflow-hidden relative">
+          <Image src={bike.image} alt={bike.model} fill className="object-cover" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="font-semibold text-sm text-slate-800 truncate">{bike.model}</p>
+          <p className="text-xs text-slate-500">{bike.plateNumber}</p>
+        </div>
+        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${statusColors[bike.status]}`}>
+          {bike.status}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+      <div className="h-36 bg-slate-100 relative">
+        <Image src={bike.image} alt={bike.model} fill className="object-cover" />
+        <div className="absolute top-2 right-2">
+          <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${statusColors[bike.status]}`}>
+            {bike.status}
+          </span>
+        </div>
+        <div className="absolute bottom-2 left-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-md">
+          <p className="text-xs font-semibold text-slate-700">🔋 {bike.batteryLevel}%</p>
+        </div>
+      </div>
+      <div className="p-4">
+        <h3 className="font-bold text-slate-800">{bike.model}</h3>
+        <p className="text-sm text-slate-500">{bike.brand} • {bike.plateNumber}</p>
+        <div className="flex items-center gap-2 mt-2 text-xs text-slate-400">
+          <span>📍 {bike.location}</span>
+        </div>
+        {onRent && bike.status === 'available' && (
+          <button
+            onClick={() => onRent(bike.id)}
+            className="w-full mt-4 py-2.5 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors"
+          >
+            Rent This Bike
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/Sidebar.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { 
+  Bike, 
+  Settings, 
+  Wallet, 
+  Store, 
+  Zap, 
+  Battery,
+  Menu,
+  X,
+  Users,
+  FileText,
+  BarChart3,
+  CreditCard,
+  MapPin,
+  Shield,
+  Truck,
+  ChevronDown,
+  LogOut
+} from 'lucide-react';
+
+const adminNavItems = [
+  { label: 'Dashboard', href: '/admin', icon: BarChart3 },
+  { label: 'Bikers', href: '/admin/bikers', icon: Users },
+  { label: 'Investors', href: '/admin/investors', icon: Wallet },
+  { label: 'Fleet Management', href: '/admin/fleet', icon: Bike },
+  { label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
+  { label: 'Rentals', href: '/admin/rentals', icon: FileText },
+  { label: 'Revenue', href: '/admin/revenue', icon: CreditCard },
+  { label: 'Reports', href: '/admin/reports', icon: BarChart3 },
+  { label: 'Geofences', href: '/admin/geofence', icon: MapPin },
+];
+
+const bikerNavItems = [
+  { label: 'Biker Dashboard', href: '/', icon: Bike },
+  { label: 'Rent Bike', href: '/rent', icon: Zap },
+  { label: 'Browse EVs', href: '/bikes', icon: Battery },
+];
+
+const investorNavItems = [
+  { label: 'Dashboard', href: '/investor', icon: Wallet },
+  { label: 'Portfolio', href: '/investor/portfolio', icon: BarChart3 },
+  { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
+];
+
+const shopNavItems = [
+  { label: 'Dashboard', href: '/shop', icon: Store },
+  { label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
+  { label: 'Fleet', href: '/shop/fleet', icon: Bike },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [expandedMenu, setExpandedMenu] = useState<string | null>(null);
+
+  const isAdmin = pathname.startsWith('/admin');
+  const isInvestor = pathname.startsWith('/investor');
+  const isShop = pathname.startsWith('/shop');
+  
+  const navItems = isAdmin ? adminNavItems : 
+                 isInvestor ? investorNavItems : 
+                 isShop ? shopNavItems : bikerNavItems;
+
+  const toggleMenu = (label: string) => {
+    setExpandedMenu(expandedMenu === label ? null : label);
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setMobileOpen(!mobileOpen)}
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-md"
+      >
+        {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+      </button>
+
+      <aside className={`
+        fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-40
+        transform transition-transform duration-300 ease-in-out
+        ${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+      `}>
+        <div className="p-4 border-b border-slate-100">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-xl font-extrabold text-accent">JAIBEN</h1>
+              <p className="text-xs text-slate-500">Mobility Ltd</p>
+            </div>
+            <div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
+              {isAdmin ? 'Admin' : isInvestor ? 'Investor' : isShop ? 'Shop' : 'Biker'}
+            </div>
+          </div>
+        </div>
+
+        <nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)]">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={`
+                  flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200
+                  ${isActive 
+                    ? 'bg-accent text-white shadow-sm' 
+                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
+                  }
+                `}
+              >
+                <Icon className={`w-5 h-5 ${isActive ? 'text-white' : ''}`} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-100 bg-white">
+          <div className="flex items-center gap-3 px-3 py-2">
+            <div className="w-8 h-8 rounded-full bg-accent-light flex items-center justify-center">
+              <span className="text-sm font-bold text-accent">A</span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-slate-700 truncate">Admin User</p>
+              <p className="text-xs text-slate-400">admin@jaiben.com</p>
+            </div>
+            <button className="p-1.5 hover:bg-slate-100 rounded-lg">
+              <LogOut className="w-4 h-4 text-slate-400" />
+            </button>
+          </div>
+          <div className="mt-2 text-xs text-slate-400 text-center">
+            <p>Phase 1 - Core EV Rental</p>
+            <p className="mt-1">v1.0.0</p>
+          </div>
+        </div>
+      </aside>
+
+      {mobileOpen && (
+        <div 
+          className="lg:hidden fixed inset-0 bg-black/30 z-30"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+    </>
+  );
+}

src/components/StatCard.tsx

@@ -0,0 +1,33 @@
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  icon: LucideIcon;
+  color?: string;
+  trend?: string;
+  trendUp?: boolean;
+}
+
+export default function StatCard({ label, value, icon: Icon, color = 'text-accent', trend, trendUp }: StatCardProps) {
+  const bgColor = color.replace('text-', 'bg-');
+  
+  return (
+    <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between">
+        <div className={`w-12 h-12 rounded-xl ${bgColor}/10 flex items-center justify-center`}>
+          <Icon className={`w-6 h-6 ${color}`} />
+        </div>
+        {trend && (
+          <span className={`text-xs font-semibold px-2 py-1 rounded-full ${trendUp ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
+            {trend}
+          </span>
+        )}
+      </div>
+      <div className="mt-4">
+        <p className="text-2xl font-extrabold text-slate-800">{value}</p>
+        <p className="text-sm text-slate-500 mt-1">{label}</p>
+      </div>
+    </div>
+  );
+}

src/components/TransactionList.tsx

@@ -0,0 +1,88 @@
+import { Transaction } from '@/data/mockData';
+import { Bike, Banknote, Send, CreditCard, TrendingUp, ArrowUpDown } from 'lucide-react';
+import { LucideIcon } from 'lucide-react';
+
+interface TransactionListProps {
+  transactions: Transaction[];
+  compact?: boolean;
+}
+
+const typeIcons: Record<string, LucideIcon> = {
+  rental_payment: Bike,
+  deposit: Banknote,
+  withdrawal: Send,
+  topup: CreditCard,
+  earning: TrendingUp,
+  refund: ArrowUpDown,
+};
+
+const typeColors: Record<string, string> = {
+  rental_payment: 'text-blue-600',
+  deposit: 'text-green-600',
+  withdrawal: 'text-amber-600',
+  topup: 'text-blue-600',
+  earning: 'text-green-600',
+  refund: 'text-purple-600',
+};
+
+export default function TransactionList({ transactions, compact }: TransactionListProps) {
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        {transactions.slice(0, 5).map((tx) => {
+          const Icon = typeIcons[tx.type] || Bike;
+          return (
+            <div key={tx.id} className="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
+              <div className="flex items-center gap-3">
+                <Icon className={`w-5 h-5 ${typeColors[tx.type]}`} />
+                <div>
+                  <p className="text-sm font-medium text-slate-700">{tx.description}</p>
+                  <p className="text-xs text-slate-400">{tx.createdAt}</p>
+                </div>
+              </div>
+              <span className={`font-semibold ${typeColors[tx.type]}`}>
+                {tx.type === 'withdrawal' ? '-' : '+'}৳{tx.amount.toLocaleString()}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-slate-100">
+      <div className="px-5 py-3 border-b border-slate-100">
+        <h3 className="font-semibold text-slate-800">Recent Transactions</h3>
+      </div>
+      <div className="divide-y divide-slate-50">
+        {transactions.map((tx) => {
+          const Icon = typeIcons[tx.type] || Bike;
+          return (
+            <div key={tx.id} className="flex items-center justify-between px-5 py-3 hover:bg-slate-50 transition-colors">
+              <div className="flex items-center gap-3">
+                <Icon className={`w-5 h-5 ${typeColors[tx.type]}`} />
+                <div>
+                  <p className="font-medium text-slate-700">{tx.description}</p>
+                  <p className="text-xs text-slate-400">{tx.createdAt}</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className={`font-bold ${typeColors[tx.type]}`}>
+                  {tx.type === 'withdrawal' ? '-' : '+'}৳{tx.amount.toLocaleString()}
+                </p>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${
+                  tx.status === 'completed' ? 'bg-green-100 text-green-700' :
+                  tx.status === 'pending' ? 'bg-amber-100 text-amber-700' :
+                  'bg-red-100 text-red-700'
+                }`}>
+                  {tx.status}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}