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

src/app/rent/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { availableBikes } from '@/data/mockData';
+import { Check, Battery, MapPin, ArrowRight, Zap } from 'lucide-react';
+
+export default function RentPage() {
+  const [selectedBike, setSelectedBike] = useState<string | null>(null);
+  const [rentalType, setRentalType] = useState<'single' | 'shared' | 'rent-to-own'>('single');
+
+  const plans = [
+    { id: 'single', name: 'Standard Rental', price: 350, badge: 'demo=50tk', features: ['Single rider', 'Daily/Weekly/Monthly', 'Full insurance'] },
+    { id: 'shared', name: 'Shared (2 Person)', price: 600, badge: 'demo=60tk', features: ['2 riders', 'Split payments', 'Shared deposit'] },
+    { id: 'rent-to-own', name: 'Rent-to-Own', price: 450, badge: 'demo=45tk', features: ['Ownership potential', 'Flexible terms', 'Transfer ready'] },
+  ];
+
+  return (
+    <div className="p-4 lg:p-6">
+      <div className="mb-6">
+        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Rent a Bike</h1>
+        <p className="text-sm text-slate-500">Choose your plan and bike</p>
+      </div>
+
+      <div className="mb-6">
+        <h2 className="text-lg font-bold text-slate-800 mb-3">Select Plan</h2>
+        <div className="grid grid-cols-3 gap-3">
+          {plans.map(plan => (
+            <button
+              key={plan.id}
+              onClick={() => setRentalType(plan.id as 'single' | 'shared' | 'rent-to-own')}
+              className={`p-4 rounded-xl border-2 text-left transition-all ${
+                rentalType === plan.id 
+                  ? 'border-accent bg-accent-light shadow-md' 
+                  : 'border-slate-200 bg-white hover:border-accent/50'
+              }`}
+            >
+              <div className="flex items-center gap-2 mb-2">
+                <span className="text-sm font-bold text-slate-800">{plan.name}</span>
+                <span className="text-[10px] font-semibold px-1.5 py-0.5 bg-accent text-white rounded">{plan.badge}</span>
+              </div>
+              <p className="text-xl font-extrabold text-accent">৳{plan.price}<span className="text-xs font-normal text-slate-500">/day</span></p>
+              <div className="mt-3 space-y-1">
+                {plan.features.map((f, i) => (
+                  <p key={i} className="text-xs text-slate-500 flex items-center gap-1">
+                    <Check className="w-3 h-3 text-green-500" /> {f}
+                  </p>
+                ))}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <h2 className="text-lg font-bold text-slate-800 mb-3">Available Bikes</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {availableBikes.map(bike => (
+            <div
+              key={bike.id}
+              onClick={() => setSelectedBike(bike.id)}
+              className={`bg-white rounded-xl overflow-hidden shadow-sm border-2 cursor-pointer transition-all hover:shadow-md ${
+                selectedBike === bike.id ? 'border-accent shadow-md' : 'border-slate-100'
+              }`}
+            >
+              <div className="h-32 bg-slate-100 relative">
+                <Image src={bike.image} alt={bike.model} fill className="object-cover" />
+                {selectedBike === bike.id && (
+                  <div className="absolute top-2 right-2 w-6 h-6 bg-accent rounded-full flex items-center justify-center">
+                    <Check className="w-4 h-4 text-white" />
+                  </div>
+                )}
+                <div className="absolute bottom-2 left-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-md flex items-center gap-1">
+                  <Battery className="w-3 h-3 text-green-600" />
+                  <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>
+                <p className="text-xs text-slate-400 mt-1 flex items-center gap-1"><MapPin className="w-3 h-3" /> {bike.location}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-slate-200 lg:relative">
+        <div className="flex items-center justify-between max-w-4xl mx-auto">
+          <div>
+            <p className="text-sm text-slate-500">Selected Bike</p>
+            <p className="font-bold text-slate-800">
+              {selectedBike ? availableBikes.find(b => b.id === selectedBike)?.model : 'None'}
+            </p>
+          </div>
+          <button
+            disabled={!selectedBike}
+            className={`px-6 py-3 rounded-lg font-bold text-white transition-colors flex items-center gap-2 ${
+              selectedBike 
+                ? 'bg-accent hover:bg-accent-dark' 
+                : 'bg-slate-300 cursor-not-allowed'
+            }`}
+          >
+            Continue <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}