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

src/app/bikes/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import BikeCard from '@/components/BikeCard';
+import { availableBikes } from '@/data/mockData';
+import { Search, Filter } from 'lucide-react';
+
+export default function BikesPage() {
+  const [filter, setFilter] = useState<string>('all');
+  const [sort, setSort] = useState<string>('location');
+
+  return (
+    <div className="p-4 lg:p-6">
+      <div className="mb-6">
+        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Browse EVs</h1>
+        <p className="text-sm text-slate-500">Find the perfect bike for your needs</p>
+      </div>
+
+      <div className="flex flex-wrap gap-3 mb-6">
+        <select
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium"
+        >
+          <option value="all">All Locations</option>
+          <option value="gulshan">Gulshan</option>
+          <option value="banani">Banani</option>
+          <option value="uttara">Uttara</option>
+          <option value="dhanmondi">Dhanmondi</option>
+          <option value="mirpur">Mirpur</option>
+        </select>
+
+        <select
+          value={sort}
+          onChange={(e) => setSort(e.target.value)}
+          className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium"
+        >
+          <option value="location">Sort by Location</option>
+          <option value="battery">Sort by Battery</option>
+          <option value="model">Sort by Model</option>
+        </select>
+
+        <button className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2">
+          <Search className="w-4 h-4" /> Search
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {availableBikes.map(bike => (
+          <BikeCard key={bike.id} bike={bike} />
+        ))}
+      </div>
+
+      {availableBikes.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-slate-400 text-lg">No bikes available</p>
+          <p className="text-slate-400 text-sm">Check back later for availability</p>
+        </div>
+      )}
+    </div>
+  );
+}