[V0_FILE]typescriptreact:file="package.json" { "name": "cycle-store", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@types/node": "20.11.19", "@types/react": "18.2.57", "@types/react-dom": "18.2.19", "autoprefixer": "10.4.17", "bcryptjs": "^2.4.3", "jsonwebtoken": "^9.0.2", "mongodb": "^6.3.0", "mongoose": "^8.1.3", "next": "15.0.0", "next-auth": "^4.24.6", "postcss": "8.4.35", "react": "18.2.0", "react-dom": "18.2.0", "tailwindcss": "3.4.1", "typescript": "5.3.3" }, "devDependencies": { "@types/bcryptjs": "^2.4.6", "@types/jsonwebtoken": "^9.0.5" } } [V0_FILE]typescriptreact:file="next.config.js" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, } module.exports = nextConfig [V0_FILE]typescriptreact:file="tsconfig.json" { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="postcss.config.js" module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file=".env.local" MONGODB_URI=mongodb+srv://cyclestore:VvFdKkOKCHnta6Hh@cluster0.8vksczm.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 JWT_SECRET=b77068ad40429f626df5ba9512d26052834d44dbd737dff1a4c2b4519024565e NEXT_PUBLIC_API_URL=http://localhost:3000 STRIPE_SECRET_KEY=sk_test_51PunuCRvPUfelL0IlJxbbzSbbRzMPJVYKkCMIQuixq5UBTiGMEwEQOPG0ZcFBMLsPPcHanUrDI8KiOaU7GcCG8pr00O1EUCdiI NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51PunuCRvPUfelL0IkAFFQMTfUcwLYA82TQcyIQnQLF5lJmneOnORgbw1GCbHpu9C6rZYenLipTl1nFf3m7ekZN8S00K8fC7E9N NEXTAUTH_SECRET=your_nextauth_secret_here NEXTAUTH_URL=http://localhost:3000 [V0_FILE]typescriptreact:file="src/lib/db.ts" import mongoose from "mongoose" let cached = global.mongoose if (!cached) { cached = global.mongoose = { conn: null, promise: null } } export async function connectToDatabase() { if (cached.conn) { return cached.conn } if (!cached.promise) { const opts = { bufferCommands: false, } cached.promise = mongoose.connect(process.env.MONGODB_URI!, opts).then((mongoose) => { return mongoose }) } cached.conn = await cached.promise return cached.conn } [V0_FILE]typescriptreact:file="src/app/api/auth/register/route.ts" import { NextResponse } from "next/server" import { hash } from "bcryptjs" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" export async function POST(req: Request) { try { const { name, email, password } = await req.json() if (!name || !email || !password) { return NextResponse.json({ message: "Missing fields" }, { status: 400 }) } await connectToDatabase() const existingUser = await User.findOne({ email }) if (existingUser) { return NextResponse.json({ message: "User already exists" }, { status: 409 }) } const hashedPassword = await hash(password, 12) const user = await User.create({ name, email, password: hashedPassword, }) return NextResponse.json( { message: "User created successfully", user: { id: user._id, name: user.name, email: user.email } }, { status: 201 }, ) } catch (error) { console.error("Registration error:", error) return NextResponse.json({ message: "An error occurred during registration" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="src/app/login/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { signIn } from "next-auth/react" import { useRouter } from "next/navigation" import type React from "react" // Added import for React export default function Login() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const result = await signIn("credentials", { redirect: false, email, password, }) if (result?.error) { console.error(result.error) } else { router.push("/dashboard") } } return (

Sign in to your account

) } [V0_FILE]typescriptreact:file="src/app/register/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" export default function Register() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const response = await fetch("/api/auth/register", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, email, password }), }) if (response.ok) { router.push("/login") } else { const data = await response.json() console.error(data.message) } } return (

Create your account

) } [V0_FILE]typescriptreact:file="src/app/dashboard/page.tsx" isFixed="true" isQuickEdit="true" import { getServerSession } from "next-auth/next" import { redirect } from "next/navigation" import Link from "next/link" import { authOptions } from "../api/auth/[...nextauth]/route" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, Line } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, Title, Tooltip, Legend, PointElement, } from "chart.js" ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, Title, Tooltip, Legend, PointElement) const barChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Sales", data: [12, 19, 3, 5, 2, 3], backgroundColor: "rgba(75, 192, 192, 0.6)", }, ], } const lineChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Orders", data: [65, 59, 80, 81, 56, 55], fill: false, borderColor: "rgb(75, 192, 192)", tension: 0.1, }, ], } export default async function DashboardPage() { const session = await getServerSession(authOptions) if (!session) { redirect("/login") } return (

Dashboard Overview

Total Revenue

$45,231.89

+20.1% from last month

New Customers

+2350

+180.1% from last month

Total Orders

+12,234

+19% from last month

Active Users

+573

+201 since last hour

Monthly Sales Order Trends

Recent Orders {/* Add more rows as needed */}

Order ID	Customer	Product	Amount	Status
#12345	John Doe	Mountain Bike Pro	$999.99	Completed
#12346	Jane Smith	City Cruiser	$599.99	Processing

View Orders Manage Profile

) } [V0_FILE]typescriptreact:file="src/app/layout.tsx" isFixed="true" isQuickEdit="true" import "./globals.css" import { Inter } from "next/font/google" import { Navbar } from "@/components/Navbar" import { Footer } from "@/components/Footer" import { ToastContainer } from "@/components/ToastContainer" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Cycle Store", description: "Your one-stop shop for all things cycling", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="src/models/Product.ts" import mongoose from "mongoose" const productSchema = new mongoose.Schema( { name: { type: String, required: true }, brand: { type: String, required: true }, model: { type: String, required: true }, category: { type: String, required: true }, price: { type: Number, required: true }, stock: { type: Number, required: true }, description: { type: String, required: true }, imageUrl: { type: String, required: true }, }, { timestamps: true }, ) export const Product = mongoose.models.Product || mongoose.model("Product", productSchema) [V0_FILE]typescript:file="src/models/Order.ts" import mongoose from "mongoose" const orderSchema = new mongoose.Schema( { user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true }, items: [ { bicycle: { type: mongoose.Schema.Types.ObjectId, ref: "Bicycle", required: true }, quantity: { type: Number, required: true }, price: { type: Number, required: true }, }, ], totalPrice: { type: Number, required: true }, status: { type: String, enum: ["pending", "processing", "shipped", "delivered"], default: "pending" }, paymentStatus: { type: String, enum: ["pending", "paid"], default: "pending" }, shippingAddress: { type: String, required: true }, }, { timestamps: true }, ) export const Order = mongoose.models.Order || mongoose.model("Order", orderSchema) [V0_FILE]typescriptreact:file="src/app/checkout/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { useSession } from "next-auth/react" import { loadStripe } from "@stripe/stripe-js" import { Elements } from "@stripe/react-stripe-js" import CheckoutForm from "@/components/CheckoutForm" const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!) interface Bicycle { id: string name: string price: number } export default function CheckoutPage() { const [bicycle, setBicycle] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() const searchParams = useSearchParams() const { data: session } = useSession() useEffect(() => { if (!session) { router.push("/login?redirect=/checkout") return } const bicycleId = searchParams.get("bicycleId") if (!bicycleId) { router.push("/bicycles") return } const fetchBicycle = async () => { try { const response = await fetch(`/api/bicycles/${bicycleId}`) if (!response.ok) { throw new Error("Failed to fetch bicycle details") } const data = await response.json() setBicycle(data) } catch (error) { console.error("Error fetching bicycle details:", error) } finally { setLoading(false) } } fetchBicycle() }, [session, router, searchParams]) if (loading) { return

} if (!bicycle) { return

Bicycle not found

} return (

Checkout

Order Summary

Bicycle: {bicycle.name}

Price: ${bicycle.price.toFixed(2)}

Payment

) } [V0_FILE]typescriptreact:file="src/app/api/create-checkout-session/route.ts" import { NextResponse } from "next/server" import Stripe from "stripe" const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2022-11-15", }) export async function POST(req: Request) { if (req.method === "POST") { try { const { items, email } = await req.json() const transformedItems = items.map((item: any) => ({ price_data: { currency: "usd", product_data: { name: item.name, images: [item.image], }, unit_amount: item.price * 100, }, quantity: item.quantity, })) const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: transformedItems, mode: "payment", success_url: `${process.env.NEXT_PUBLIC_API_URL}/success`, cancel_url: `${process.env.NEXT_PUBLIC_API_URL}/checkout`, metadata: { email, }, }) return NextResponse.json({ id: session.id }) } catch (err: any) { return NextResponse.json({ error: err.message }, { status: 500 }) } } else { return NextResponse.json({ error: "Method not allowed" }, { status: 405 }) } } [V0_FILE]typescriptreact:file="src/app/admin/dashboard/page.tsx" import { getServerSession } from "next-auth/next" import { redirect } from "next/navigation" import Link from "next/link" import { authOptions } from "../../api/auth/[...nextauth]/route" export default async function AdminDashboard() { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { redirect("/login") } return (

Admin Dashboard

Manage Users Manage Products Manage Orders

) } [V0_FILE]typescriptreact:file="src/app/api/user/update-profile/route.ts" import { NextResponse } from "next/server" import { getServerSession } from "next-auth/next" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" import { authOptions } from "../../auth/[...nextauth]/route" export async function PUT(req: Request) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { name, email } = await req.json() await connectToDatabase() const user = await User.findById(session.user.id) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } user.name = name user.email = email await user.save() return NextResponse.json({ message: "Profile updated successfully" }) } catch (error) { console.error("Profile update error:", error) return NextResponse.json({ error: "An error occurred while updating the profile" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="src/app/api/user/change-password/route.ts" import { NextResponse } from "next/server" import { getServerSession } from "next-auth/next" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" import { authOptions } from "../../auth/[...nextauth]/route" import bcrypt from "bcryptjs" export async function PUT(req: Request) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { currentPassword, newPassword } = await req.json() await connectToDatabase() const user = await User.findById(session.user.id) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const isMatch = await user.comparePassword(currentPassword) if (!isMatch) { return NextResponse.json({ error: "Current password is incorrect" }, { status: 400 }) } user.password = await bcrypt.hash(newPassword, 12) await user.save() return NextResponse.json({ message: "Password changed successfully" }) } catch (error) { console.error("Password change error:", error) return NextResponse.json({ error: "An error occurred while changing the password" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="src/components/Navbar.tsx" "use client" import { useState } from "react" import Link from "next/link" import { useSession, signOut } from "next-auth/react" import { ShoppingCart, Menu } from "lucide-react" import { Button } from "@/components/ui/button" export function Navbar() { const { data: session } = useSession() const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Cycle Store

Bicycles About {session ? ( <> Dashboard ) : ( Login )}

{isMenuOpen && (

Bicycles About {session ? ( <> Dashboard ) : ( Login )} Cart

)}

) } [V0_FILE]typescriptreact:file="src/components/Footer.tsx" import Link from "next/link" import { Facebook, Twitter, Instagram } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="src/components/Carousel.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" const images = [ { src: "/banner1.jpg", alt: "Special Offer on Mountain Bikes" }, { src: "/banner2.jpg", alt: "New Road Bikes Collection" }, { src: "/banner3.jpg", alt: "Kids Bikes Sale" }, ] export function Carousel() { const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length) }, 5000) return () => clearInterval(interval) }, []) return (

{images.map((image, index) => (

{image.alt}

))}

) } [V0_FILE]typescriptreact:file="src/components/ProductCard.tsx" isFixed="true" isQuickEdit="true" import Image from "next/image" import Link from "next/link" import type React from "react" // Added import for React interface ProductCardProps { id: string name: string price: number image: string rating: number } const ProductCard: React.FC = ({ id, name, price, image, rating }) => { return (

{name}

${price.toFixed(2)}

★ {rating.toFixed(1)}

) } export default ProductCard [V0_FILE]typescriptreact:file="src/app/products/[id]/page.tsx" import Image from "next/image" import Link from "next/link" // This is a mock function to simulate fetching product data async function getProduct(id: string) { // In a real application, you would fetch this data from an API or database return { id, name: "Mountain Bike Pro", price: 999.99, description: "A high-performance mountain bike for all your off-road adventures.", images: ["/bike1.jpg", "/bike1-2.jpg", "/bike1-3.jpg"], color: "Red", size: "Medium", stock: 10, specs: [ { name: "Frame", value: "Aluminum" }, { name: "Fork", value: "RockShox XC32" }, { name: "Gears", value: "21-speed Shimano" }, { name: "Brakes", value: "Hydraulic disc" }, { name: "Tires", value: "29-inch all-terrain" }, ], } } export default async function ProductPage({ params }: { params: { id: string } }) { const product = await getProduct(params.id) return (

{product.images.slice(1).map((image, index) => (

))}

{product.name}

${product.price.toFixed(2)}

{product.description}

Color: {product.color}

Size: {product.size}

In Stock: {product.stock}

Quantity:

Buy Now

Specifications

{product.specs.map((spec, index) => ( ))}

{spec.name}

{spec.value}

Customer Reviews

{/* Add review component here */}

Related Products

{/* Add related products component here */}

) } [V0_FILE]typescriptreact:file="src/app/cart/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" // Mock cart data const initialCart = [ { id: "1", name: "Mountain Bike Pro", price: 999.99, image: "/bike1.jpg", quantity: 1 }, { id: "2", name: "City Cruiser", price: 599.99, image: "/bike2.jpg", quantity: 2 }, ] export default function CartPage() { const [cart, setCart] = useState(initialCart) const updateQuantity = (id: string, newQuantity: number) => { setCart(cart.map((item) => (item.id === id ? { ...item, quantity: Math.max(1, newQuantity) } : item))) } const removeItem = (id: string) => { setCart(cart.filter((item) => item.id !== id)) } const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) return (

Your Cart

{cart.length === 0 ? (

Your cart is empty.{" "} Continue shopping

) : ( <>

{cart.map((item) => ( ))}

Product	Price	Quantity	Total	Actions
{item.name}	${item.price.toFixed(2)}	{item.quantity}	${(item.price * item.quantity).toFixed(2)}

Total: ${total.toFixed(2)}

Proceed to Checkout

)}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/layout.tsx" import type React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { useSession } from "next-auth/react" import { Home, Users, ShoppingBag, FileText, User, LogOut, BarChart2, Settings } from "lucide-react" const menuItems = [ { icon: Home, label: "Overview", href: "/dashboard" }, { icon: Users, label: "Manage Users", href: "/dashboard/users", adminOnly: true }, { icon: ShoppingBag, label: "Manage Products", href: "/dashboard/products", adminOnly: true }, { icon: FileText, label: "Manage Orders", href: "/dashboard/orders", adminOnly: true }, { icon: BarChart2, label: "My Orders", href: "/dashboard/my-orders", userOnly: true }, { icon: User, label: "My Profile", href: "/dashboard/profile" }, { icon: Settings, label: "Settings", href: "/dashboard/settings" }, ] export default function DashboardLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname() const { data: session } = useSession() const isAdmin = session?.user?.role === "admin" return (

{children}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/users/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" // Mock data for users const mockUsers = [ { id: 1, name: "John Doe", email: "john@example.com", role: "customer", status: "active" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "customer", status: "active" }, { id: 3, name: "Admin User", email: "admin@example.com", role: "admin", status: "active" }, // Add more mock users as needed ] export default function UsersPage() { const [users, setUsers] = useState(mockUsers) const [searchTerm, setSearchTerm] = useState("") const handleSearch = (event: React.ChangeEvent) => { setSearchTerm(event.target.value) } const filteredUsers = users.filter( (user) => user.name.toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleStatusToggle = (userId: number) => { setUsers( users.map((user) => user.id === userId ? { ...user, status: user.status === "active" ? "inactive" : "active" } : user, ), ) } return (

Manage Users

Users

Name Email Role Status Actions {filteredUsers.map((user) => ( {user.name} {user.email} {user.role} {user.status} ))}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/products/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" // Mock data for products const mockProducts = [ { id: 1, name: "Mountain Bike Pro", price: 999.99, stock: 50, category: "Mountain Bikes" }, { id: 2, name: "City Cruiser", price: 599.99, stock: 30, category: "City Bikes" }, { id: 3, name: "Road Racer Elite", price: 1299.99, stock: 20, category: "Road Bikes" }, // Add more mock products as needed ] export default function ProductsPage() { const [products, setProducts] = useState(mockProducts) const [searchTerm, setSearchTerm] = useState("") const [newProduct, setNewProduct] = useState({ name: "", price: "", stock: "", category: "" }) const [isDialogOpen, setIsDialogOpen] = useState(false) const handleSearch = (event: React.ChangeEvent) => { setSearchTerm(event.target.value) } const filteredProducts = products.filter( (product) => product.name.toLowerCase().includes(searchTerm.toLowerCase()) || product.category.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleInputChange = (event: React.ChangeEvent) => { const { name, value } = event.target setNewProduct((prev) => ({ ...prev, [name]: value })) } const handleAddProduct = () => { const productToAdd = { id: products.length + 1, name: newProduct.name, price: Number.parseFloat(newProduct.price), stock: Number.parseInt(newProduct.stock), category: newProduct.category, } setProducts([...products, productToAdd]) setNewProduct({ name: "", price: "", stock: "", category: "" }) setIsDialogOpen(false) } return (

Manage Products

Products

Name Price Stock Category Actions {filteredProducts.map((product) => ( {product.name} ${product.price.toFixed(2)} {product.stock} {product.category} ))}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/orders/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Mock data for orders const mockOrders = [ { id: 1, customer: "John Doe", product: "Mountain Bike Pro", amount: 999.99, status: "Processing" }, { id: 2, customer: "Jane Smith", product: "City Cruiser", amount: 599.99, status: "Shipped" }, { id: 3, customer: "Bob Johnson", product: "Road Racer Elite", amount: 1299.99, status: "Delivered" }, // Add more mock orders as needed ] export default function OrdersPage() { const [orders, setOrders] = useState(mockOrders) const [searchTerm, setSearchTerm] = useState("") const handleSearch = (event: React.ChangeEvent) => { setSearchTerm(event.target.value) } const filteredOrders = orders.filter( (order) => order.customer.toLowerCase().includes(searchTerm.toLowerCase()) || order.product.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleStatusChange = (orderId: number, newStatus: string) => { setOrders(orders.map((order) => (order.id === orderId ? { ...order, status: newStatus } : order))) } return (

Manage Orders

Orders

Order ID Customer Product Amount Status Actions {filteredOrders.map((order) => ( #{order.id} {order.customer} {order.product} ${order.amount.toFixed(2)} {order.status} ))}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/my-orders/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" // Mock data for user orders const mockOrders = [ { id: 1, product: "Mountain Bike Pro", amount: 999.99, date: "2023-05-15", status: "Delivered" }, { id: 2, product: "City Cruiser", amount: 599.99, date: "2023-06-01", status: "Shipped" }, { id: 3, product: "Bike Helmet", amount: 79.99, date: "2023-06-10", status: "Processing" }, // Add more mock orders as needed ] export default function MyOrdersPage() { const [orders, setOrders] = useState(mockOrders) const [searchTerm, setSearchTerm] = useState("") const handleSearch = (event: React.ChangeEvent) => { setSearchTerm(event.target.value) } const filteredOrders = orders.filter( (order) => order.product.toLowerCase().includes(searchTerm.toLowerCase()) || order.status.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

My Orders

Order History

Order ID Product Amount Date Status {filteredOrders.map((order) => ( #{order.id} {order.product} ${order.amount.toFixed(2)} {order.date} {order.status} ))}

) } [V0_FILE]typescript:file="src/models/Bicycle.ts" import mongoose from "mongoose" const bicycleSchema = new mongoose.Schema( { name: { type: String, required: true }, brand: { type: String, required: true }, price: { type: Number, required: true }, model: { type: String, required: true }, stock: { type: Number, required: true }, description: { type: String, required: true }, imageUrl: { type: String, required: true }, specifications: { type: Map, of: String }, }, { timestamps: true }, ) export const Bicycle = mongoose.models.Bicycle || mongoose.model("Bicycle", bicycleSchema) [V0_FILE]typescript:file="src/app/api/bicycles/route.ts" isFixed="true" isQuickEdit="true" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { Bicycle } from "@/models/Bicycle" import { adminMiddleware } from "@/middleware/auth" import { validateBody } from "@/middleware/validation" import { rateLimitMiddleware } from "@/middleware/rateLimit" import logger from "@/lib/logger" import { z } from "zod" const bicycleSchema = z.object({ name: z.string().min(1), brand: z.string().min(1), price: z.number().positive(), model: z.string().min(1), stock: z.number().int().nonnegative(), description: z.string().min(1), imageUrl: z.string().url(), specifications: z.record(z.string()), }) export async function GET(req: Request) { try { await rateLimitMiddleware(req) await connectToDatabase() const { searchParams } = new URL(req.url) const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const skip = (page - 1) * limit const bicycles = await Bicycle.find().skip(skip).limit(limit) const total = await Bicycle.countDocuments() return NextResponse.json({ bicycles, currentPage: page, totalPages: Math.ceil(total / limit), totalBicycles: total, }) } catch (error) { logger.error("Error fetching bicycles:", { error }) return NextResponse.json({ error: "An error occurred while fetching bicycles" }, { status: 500 }) } } export async function POST(req: Request) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await validateBody(bicycleSchema)(req, NextResponse.next as any) await connectToDatabase() const bicycleData = await req.json() const newBicycle = new Bicycle(bicycleData) await newBicycle.save() logger.info("New bicycle created", { bicycleId: newBicycle._id }) return NextResponse.json(newBicycle, { status: 201 }) } catch (error) { logger.error("Error creating bicycle:", { error }) return NextResponse.json({ error: "An error occurred while creating the bicycle" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/bicycles/[id]/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { Bicycle } from "@/models/Bicycle" import { adminMiddleware } from "@/middleware/auth" export async function GET(req: Request, { params }: { params: { id: string } }) { try { await connectToDatabase() const bicycle = await Bicycle.findById(params.id) if (!bicycle) { return NextResponse.json({ error: "Bicycle not found" }, { status: 404 }) } return NextResponse.json(bicycle) } catch (error) { console.error("Error fetching bicycle:", error) return NextResponse.json({ error: "An error occurred while fetching the bicycle" }, { status: 500 }) } } export async function PUT(req: Request, { params }: { params: { id: string } }) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const bicycleData = await req.json() const updatedBicycle = await Bicycle.findByIdAndUpdate(params.id, bicycleData, { new: true }) if (!updatedBicycle) { return NextResponse.json({ error: "Bicycle not found" }, { status: 404 }) } return NextResponse.json(updatedBicycle) } catch (error) { console.error("Error updating bicycle:", error) return NextResponse.json({ error: "An error occurred while updating the bicycle" }, { status: 500 }) } } export async function DELETE(req: Request, { params }: { params: { id: string } }) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const deletedBicycle = await Bicycle.findByIdAndDelete(params.id) if (!deletedBicycle) { return NextResponse.json({ error: "Bicycle not found" }, { status: 404 }) } return NextResponse.json({ message: "Bicycle deleted successfully" }) } catch (error) { console.error("Error deleting bicycle:", error) return NextResponse.json({ error: "An error occurred while deleting the bicycle" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/orders/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { Order } from "@/models/Order" import { Bicycle } from "@/models/Bicycle" import { authMiddleware } from "@/middleware/auth" export async function GET(req: Request) { try { await authMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const { searchParams } = new URL(req.url) const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const skip = (page - 1) * limit const orders = await Order.find({ user: req.user.id }).skip(skip).limit(limit).populate("items.bicycle") const total = await Order.countDocuments({ user: req.user.id }) return NextResponse.json({ orders, currentPage: page, totalPages: Math.ceil(total / limit), totalOrders: total, }) } catch (error) { console.error("Error fetching orders:", error) return NextResponse.json({ error: "An error occurred while fetching orders" }, { status: 500 }) } } export async function POST(req: Request) { try { await authMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const orderData = await req.json() // Check stock levels and update for (const item of orderData.items) { const bicycle = await Bicycle.findById(item.bicycle) if (!bicycle || bicycle.stock < item.quantity) { return NextResponse.json({ error: `Insufficient stock for bicycle: ${bicycle?.name}` }, { status: 400 }) } bicycle.stock -= item.quantity await bicycle.save() } const newOrder = new Order({ ...orderData, user: req.user.id, }) await newOrder.save() return NextResponse.json(newOrder, { status: 201 }) } catch (error) { console.error("Error creating order:", error) return NextResponse.json({ error: "An error occurred while creating the order" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/orders/[id]/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { Order } from "@/models/Order" import { authMiddleware, adminMiddleware } from "@/middleware/auth" export async function GET(req: Request, { params }: { params: { id: string } }) { try { await authMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const order = await Order.findOne({ _id: params.id, user: req.user.id }).populate("items.bicycle") if (!order) { return NextResponse.json({ error: "Order not found" }, { status: 404 }) } return NextResponse.json(order) } catch (error) { console.error("Error fetching order:", error) return NextResponse.json({ error: "An error occurred while fetching the order" }, { status: 500 }) } } export async function PUT(req: Request, { params }: { params: { id: string } }) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const orderData = await req.json() const updatedOrder = await Order.findByIdAndUpdate(params.id, orderData, { new: true }) if (!updatedOrder) { return NextResponse.json({ error: "Order not found" }, { status: 404 }) } return NextResponse.json(updatedOrder) } catch (error) { console.error("Error updating order:", error) return NextResponse.json({ error: "An error occurred while updating the order" }, { status: 500 }) } } export async function DELETE(req: Request, { params }: { params: { id: string } }) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const deletedOrder = await Order.findByIdAndDelete(params.id) if (!deletedOrder) { return NextResponse.json({ error: "Order not found" }, { status: 404 }) } return NextResponse.json({ message: "Order deleted successfully" }) } catch (error) { console.error("Error deleting order:", error) return NextResponse.json({ error: "An error occurred while deleting the order" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/create-payment-intent/route.ts" import { NextResponse } from "next/server" import Stripe from "stripe" import { authMiddleware } from "@/middleware/auth" const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2022-11-15", }) export async function POST(req: Request) { try { await authMiddleware(req, NextResponse.next as any, () => {}) const { amount } = await req.json() const paymentIntent = await stripe.paymentIntents.create({ amount: amount * 100, // Stripe expects the amount in cents currency: "usd", metadata: { userId: req.user.id }, }) return NextResponse.json({ clientSecret: paymentIntent.client_secret }) } catch (error) { console.error("Error creating payment intent:", error) return NextResponse.json({ error: "An error occurred while creating the payment intent" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/compare-bicycles/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { Bicycle } from "@/models/Bicycle" export async function GET(req: Request) { try { await connectToDatabase() const { searchParams } = new URL(req.url) const bicycleIds = searchParams.getAll("id") if (bicycleIds.length > 3) { return NextResponse.json({ error: "You can compare up to 3 bicycles at a time" }, { status: 400 }) } const bicycles = await Bicycle.find({ _id: { $in: bicycleIds } }) if (bicycles.length !== bicycleIds.length) { return NextResponse.json({ error: "One or more bicycles not found" }, { status: 404 }) } return NextResponse.json(bicycles) } catch (error) { console.error("Error comparing bicycles:", error) return NextResponse.json({ error: "An error occurred while comparing bicycles" }, { status: 500 }) } } [V0_FILE]typescript:file="src/app/api/admin/sales-dashboard/route.ts" import { NextResponse } from 'next/server"import { NextResponse } from "next/server' import { connectToDatabase } from "@/lib/db" import { Order } from "@/models/Order" import { adminMiddleware } from "@/middleware/auth" export async function GET(req: Request) { try { await adminMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const { searchParams } = new URL(req.url) const startDate = new Date(searchParams.get("startDate") || new Date().setDate(new Date().getDate() - 30)) const endDate = new Date(searchParams.get("endDate") || new Date()) // Total Sales Revenue const totalSales = await Order.aggregate([ { $match: { createdAt: { $gte: startDate, $lte: endDate }, paymentStatus: "paid" } }, { $group: { _id: null, total: { $sum: "$totalPrice" } } }, ]) // Units Sold const unitsSold = await Order.aggregate([ { $match: { createdAt: { $gte: startDate, $lte: endDate }, paymentStatus: "paid" } }, { $unwind: "$items" }, { $group: { _id: null, total: { $sum: "$items.quantity" } } }, ]) // Top-Selling Bicycles const topSellingBicycles = await Order.aggregate([ { $match: { createdAt: { $gte: startDate, $lte: endDate }, paymentStatus: "paid" } }, { $unwind: "$items" }, { $group: { _id: "$items.bicycle", totalSold: { $sum: "$items.quantity" } } }, { $sort: { totalSold: -1 } }, { $limit: 5 }, { $lookup: { from: "bicycles", localField: "_id", foreignField: "_id", as: "bicycleDetails" } }, { $unwind: "$bicycleDetails" }, { $project: { _id: 1, name: "$bicycleDetails.name", totalSold: 1 } }, ]) // Sales Over Time const salesOverTime = await Order.aggregate([ { $match: { createdAt: { $gte: startDate, $lte: endDate }, paymentStatus: "paid" } }, { $group: { _id: { $dateToString: { format: "%Y-%m-%d", date: "$createdAt" } }, totalSales: { $sum: "$totalPrice" }, }, }, { $sort: { _id: 1 } }, ]) return NextResponse.json({ totalRevenue: totalSales[0]?.total || 0, unitsSold: unitsSold[0]?.total || 0, topSellingBicycles, salesOverTime, }) } catch (error) { console.error("Error fetching sales dashboard data:", error) return NextResponse.json({ error: "An error occurred while fetching sales dashboard data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="src/app/compare/page.tsx" "use client" import { useState, useEffect } from "react" import { useSearchParams } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface Bicycle { _id: string name: string brand: string price: number model: string specifications: { [key: string]: string } } export default function ComparePage() { const [bicycles, setBicycles] = useState([]) const [error, setError] = useState(null) const searchParams = useSearchParams() useEffect(() => { const fetchBicycles = async () => { const ids = searchParams.getAll("id") if (ids.length === 0) { setError("No bicycles selected for comparison") return } try { const response = await fetch(`/api/compare-bicycles?${ids.map((id) => `id=${id}`).join("&")}`) if (!response.ok) { throw new Error("Failed to fetch bicycles") } const data = await response.json() setBicycles(data) } catch (error) { setError("An error occurred while fetching bicycle data") } } fetchBicycles() }, [searchParams]) if (error) { return

{error}

} if (bicycles.length === 0) { return

} const allSpecs = Array.from(new Set(bicycles.flatMap((b) => Object.keys(b.specifications)))) return (

Bicycle Comparison

Comparison Table Specification {bicycles.map((bicycle) => ( {bicycle.name} ))} Brand {bicycles.map((bicycle) => ( {bicycle.brand} ))} Model {bicycles.map((bicycle) => ( {bicycle.model} ))} Price {bicycles.map((bicycle) => ( ${bicycle.price.toFixed(2)} ))} {allSpecs.map((spec) => ( {spec} {bicycles.map((bicycle) => ( {bicycle.specifications[spec] || "N/A"} ))} ))}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/admin/sales/page.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, Line } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, Title, Tooltip, Legend, PointElement, } from "chart.js" ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, Title, Tooltip, Legend, PointElement) interface SalesDashboardData { totalRevenue: number unitsSold: number topSellingBicycles: { _id: string; name: string; totalSold: number }[] salesOverTime: { _id: string; totalSales: number }[] } export default function SalesDashboardPage() { const [dashboardData, setDashboardData] = useState(null) const [error, setError] = useState(null) useEffect(() => { const fetchDashboardData = async () => { try { const response = await fetch("/api/admin/sales-dashboard") if (!response.ok) { throw new Error("Failed to fetch dashboard data") } const data = await response.json() setDashboardData(data) } catch (error) { setError("An error occurred while fetching dashboard data") } } fetchDashboardData() }, []) if (error) { return

{error}

} if (!dashboardData) { return

} const topSellingBicyclesData = { labels: dashboardData.topSellingBicycles.map((b) => b.name), datasets: [ { label: "Units Sold", data: dashboardData.topSellingBicycles.map((b) => b.totalSold), backgroundColor: "rgba(75, 192, 192, 0.6)", }, ], } const salesOverTimeData = { labels: dashboardData.salesOverTime.map((s) => s._id), datasets: [ { label: "Sales", data: dashboardData.salesOverTime.map((s) => s.totalSales), fill: false, borderColor: "rgb(75, 192, 192)", tension: 0.1, }, ], } return (

Sales Dashboard

Total Revenue

${dashboardData.totalRevenue.toFixed(2)}

Units Sold

{dashboardData.unitsSold}

Top-Selling Bicycles Sales Over Time

) } [V0_FILE]typescript:file="src/app/api/user/profile/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" import { authMiddleware } from "@/middleware/auth" export async function GET(req: Request) { try { await authMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const user = await User.findById(req.user.id).select("-password") if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } return NextResponse.json(user) } catch (error) { console.error("Error fetching user profile:", error) return NextResponse.json({ error: "An error occurred while fetching the user profile" }, { status: 500 }) } } export async function PUT(req: Request) { try { await authMiddleware(req, NextResponse.next as any, () => {}) await connectToDatabase() const { name, email, address, phone } = await req.json() const user = await User.findById(req.user.id) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } user.name = name || user.name user.email = email || user.email user.address = address || user.address user.phone = phone || user.phone await user.save() return NextResponse.json(user) } catch (error) { console.error("Error updating user profile:", error) return NextResponse.json({ error: "An error occurred while updating the user profile" }, { status: 500 }) } } [V0_FILE]typescript:file="src/middleware/validation.ts" import { NextResponse } from "next/server" import { z } from "zod" export function validateBody(schema: z.ZodSchema) { return async (req: Request, res: NextResponse) => { try { const body = await req.json() await schema.parseAsync(body) } catch (error) { if (error instanceof z.ZodError) { return NextResponse.json({ error: error.errors }, { status: 400 }) } return NextResponse.json({ error: "Invalid request body" }, { status: 400 }) } } } [V0_FILE]typescript:file="src/middleware/rateLimit.ts" import { NextResponse } from "next/server" import rateLimit from "express-rate-limit" import { promisify } from "util" const limiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minutes max: 100, // Limit each IP to 100 requests per windowMs }) const asyncMiddleware = promisify(limiter) export async function rateLimitMiddleware(req: Request) { try { await asyncMiddleware(req, NextResponse.next as any) } catch (error) { return NextResponse.json({ error: "Too many requests, please try again later." }, { status: 429 }) } } [V0_FILE]typescript:file="src/lib/logger.ts" import winston from "winston" const logger = winston.createLogger({ level: "info", format: winston.format.combine(winston.format.timestamp(), winston.format.json()), defaultMeta: { service: "cycle-store-api" }, transports: [ new winston.transports.File({ filename: "error.log", level: "error" }), new winston.transports.File({ filename: "combined.log" }), ], }) if (process.env.NODE_ENV !== "production") { logger.add( new winston.transports.Console({ format: winston.format.simple(), }), ) } export default logger [V0_FILE]typescriptreact:file="src/components/FeaturedBicycles.tsx" "use client" import { useState, useEffect } from "react" import { BicycleCard } from "@/components/BicycleCard" interface Bicycle { id: string name: string brand: string price: number imageUrl: string } export function FeaturedBicycles() { const [bicycles, setBicycles] = useState([]) useEffect(() => { const fetchFeaturedBicycles = async () => { try { const response = await fetch("/api/bicycles?featured=true&limit=6") if (!response.ok) { throw new Error("Failed to fetch featured bicycles") } const data = await response.json() setBicycles(data.bicycles) } catch (error) { console.error("Error fetching featured bicycles:", error) } } fetchFeaturedBicycles() }, []) return (

{bicycles.map((bicycle) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/BicycleCard.tsx" import Image from "next/image" import Link from "next/link" interface BicycleCardProps { bicycle: { id: string name: string brand: string price: number imageUrl: string } } export function BicycleCard({ bicycle }: BicycleCardProps) { return (

{bicycle.name}

{bicycle.brand}

${bicycle.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="src/components/Testimonials.tsx" const testimonials = [ { id: 1, name: "John Doe", text: "I bought my first mountain bike here and the service was exceptional. The staff was knowledgeable and helped me find the perfect bike for my needs.", }, { id: 2, name: "Jane Smith", text: "The quality of the bicycles here is outstanding. I've been a customer for years and I always come back for upgrades and accessories.", }, { id: 3, name: "Mike Johnson", text: "The after-sales service is top-notch. When I had an issue with my bike, they fixed it quickly and efficiently. Highly recommended!", }, ] export function Testimonials() { return (

{testimonials.map((testimonial) => (

"{testimonial.text}"

{testimonial.name}

))}

) } [V0_FILE]typescriptreact:file="src/app/bicycles/page.tsx" "use client" import { useState, useEffect } from "react" import { BicycleCard } from "@/components/BicycleCard" import { SearchFilters } from "@/components/SearchFilters" interface Bicycle { id: string name: string brand: string price: number imageUrl: string category: string } export default function AllBicyclesPage() { const [bicycles, setBicycles] = useState([]) const [filteredBicycles, setFilteredBicycles] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchBicycles = async () => { try { const response = await fetch("/api/bicycles") if (!response.ok) { throw new Error("Failed to fetch bicycles") } const data = await response.json() setBicycles(data.bicycles) setFilteredBicycles(data.bicycles) } catch (error) { console.error("Error fetching bicycles:", error) } finally { setLoading(false) } } fetchBicycles() }, []) const handleSearch = (searchTerm: string, filters: any) => { let filtered = bicycles if (searchTerm) { filtered = filtered.filter( (bicycle) => bicycle.name.toLowerCase().includes(searchTerm.toLowerCase()) || bicycle.brand.toLowerCase().includes(searchTerm.toLowerCase()) || bicycle.category.toLowerCase().includes(searchTerm.toLowerCase()), ) } if (filters.priceRange) { filtered = filtered.filter( (bicycle) => bicycle.price >= filters.priceRange[0] && bicycle.price <= filters.priceRange[1], ) } if (filters.brand) { filtered = filtered.filter((bicycle) => bicycle.brand === filters.brand) } if (filters.category) { filtered = filtered.filter((bicycle) => bicycle.category === filters.category) } setFilteredBicycles(filtered) } if (loading) { return

} return (

All Bicycles

{filteredBicycles.map((bicycle) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/SearchFilters.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" interface SearchFiltersProps { onSearch: (searchTerm: string, filters: any) => void bicycles: any[] } export function SearchFilters({ onSearch, bicycles }: SearchFiltersProps) { const [searchTerm, setSearchTerm] = useState("") const [filters, setFilters] = useState({ priceRange: [0, 10000], brand: "", category: "", }) const handleInputChange = (e: React.ChangeEvent) => { setSearchTerm(e.target.value) onSearch(e.target.value, filters) } const handleFilterChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFilters((prev) => ({ ...prev, [name]: value })) onSearch(searchTerm, { ...filters, [name]: value }) } const brands = Array.from(new Set(bicycles.map((b) => b.brand))) const categories = Array.from(new Set(bicycles.map((b) => b.category))) return (

Price Range: setFilters((prev) => ({ ...prev, priceRange: [Number(e.target.value), prev.priceRange[1]] })) } className="w-24 p-2 border rounded" /> - setFilters((prev) => ({ ...prev, priceRange: [prev.priceRange[0], Number(e.target.value)] })) } className="w-24 p-2 border rounded" />

) } [V0_FILE]typescriptreact:file="src/app/bicycles/[id]/page.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { useParams } from "next/navigation" interface Bicycle { id: string name: string brand: string price: number imageUrl: string description: string specifications: { [key: string]: string } stock: number } export default function BicycleDetailsPage() { const [bicycle, setBicycle] = useState(null) const [loading, setLoading] = useState(true) const { id } = useParams() useEffect(() => { const fetchBicycle = async () => { try { const response = await fetch(`/api/bicycles/${id}`) if (!response.ok) { throw new Error("Failed to fetch bicycle details") } const data = await response.json() setBicycle(data) } catch (error) { console.error("Error fetching bicycle details:", error) } finally { setLoading(false) } } fetchBicycle() }, [id]) if (loading) { return

} if (!bicycle) { return

Bicycle not found

} return (

{bicycle.name}

{bicycle.brand}

${bicycle.price.toFixed(2)}

{bicycle.description}

In Stock: {bicycle.stock}

Buy Now

Specifications

{Object.entries(bicycle.specifications).map(([key, value]) => ( ))}

{key}

{value}

) } [V0_FILE]typescriptreact:file="src/components/CheckoutForm.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { toast } from "react-hot-toast" interface CheckoutFormProps { bicycleId: string amount: number } export default function CheckoutForm({ bicycleId, amount }: CheckoutFormProps) { const [loading, setLoading] = useState(false) const stripe = useStripe() const elements = useElements() const router = useRouter() const handleSubmit = async (event: React.FormEvent) => { event.preventDefault() setLoading(true) if (!stripe || !elements) { return } try { const { error: backendError, clientSecret } = await fetch("/api/create-payment-intent", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ amount: amount * 100, // Convert to cents }), }).then((res) => res.json()) if (backendError) { console.error(backendError) toast.error("Payment failed. Please try again.") return } const { error: stripeError, paymentIntent } = await stripe.confirmCardPayment(clientSecret, { payment_method: { card: elements.getElement(CardElement)!, }, }) if (stripeError) { console.error(stripeError) toast.error("Payment failed. Please try again.") } else if (paymentIntent.status === "succeeded") { // Create order in the database const orderResponse = await fetch("/api/orders", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ bicycleId, amount: paymentIntent.amount / 100, // Convert back to dollars }), }) if (orderResponse.ok) { toast.success("Payment successful!") router.push("/dashboard/orders") } else { toast.error("Error creating order. Please contact support.") } } } catch (error) { console.error("Error:", error) toast.error("An unexpected error occurred. Please try again.") } finally { setLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="src/components/ToastContainer.tsx" "use client" import { Toaster } from "react-hot-toast" export function ToastContainer() { return } [V0_FILE]typescriptreact:file="src/components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="src/components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="src/components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="src/components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescript:file="src/lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="src/models/User.ts" import mongoose from "mongoose" import bcrypt from "bcryptjs" const userSchema = new mongoose.Schema( { name: { type: String, required: true }, email: { type: String, required: true, unique: true }, password: { type: String, required: true }, role: { type: String, enum: ["user", "admin"], default: "user" }, address: { type: String }, phone: { type: String }, }, { timestamps: true }, ) userSchema.pre("save", async function (next) { if (this.isModified("password")) { this.password = await bcrypt.hash(this.password, 12) } next() }) userSchema.methods.comparePassword = async function (candidatePassword: string) { return bcrypt.compare(candidatePassword, this.password) } export const User = mongoose.models.User || mongoose.model("User", userSchema) [V0_FILE]typescript:file="src/app/api/auth/[...nextauth]/route.ts" import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" import { compare } from "bcryptjs" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" const handler = NextAuth({ providers: [ CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { if (!credentials?.email || !credentials?.password) { throw new Error("Invalid credentials") } await connectToDatabase() const user = await User.findOne({ email: credentials.email }) if (!user || !(await compare(credentials.password, user.password))) { throw new Error("Invalid credentials") } return { id: user._id.toString(), email: user.email, name: user.name, role: user.role, } }, }), ], callbacks: { async jwt({ token, user }) { if (user) { token.role = user.role } return token }, async session({ session, token }) { if (session?.user) { session.user.role = token.role } return session }, }, pages: { signIn: "/login", }, session: { strategy: "jwt", }, secret: process.env.NEXTAUTH_SECRET, }) export { handler as GET, handler as POST } [V0_FILE]typescript:file="src/middleware/auth.ts" import { NextResponse } from "next/server" import { getToken } from "next-auth/jwt" export async function authMiddleware(req: Request) { const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET }) if (!token) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } return NextResponse.next() } export async function adminMiddleware(req: Request) { const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET }) if (!token || token.role !== "admin") { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } return NextResponse.next() } [V0_FILE]typescript:file="src/app/api/admin/users/route.ts" import { NextResponse } from "next/server" import { connectToDatabase } from "@/lib/db" import { User } from "@/models/User" import { adminMiddleware } from "@/middleware/auth" export async function GET(req: Request) { try { await adminMiddleware(req) await connectToDatabase() const users = await User.find().select("-password") return NextResponse.json(users) } catch (error) { console.error("Error fetching users:", error) return NextResponse.json({ error: "An error occurred while fetching users" }, { status: 500 }) } } export async function PUT(req: Request) { try { await adminMiddleware(req) await connectToDatabase() const { id, role } = await req.json() const user = await User.findByIdAndUpdate(id, { role }, { new: true }).select("-password") if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } return NextResponse.json(user) } catch (error) { console.error("Error updating user:", error) return NextResponse.json({ error: "An error occurred while updating the user" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="src/app/dashboard/admin/users/page.tsx" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "react-hot-toast" interface User { _id: string name: string email: string role: string } export default function AdminUsersPage() { const [users, setUsers] = useState([]) const { data: session } = useSession() useEffect(() => { const fetchUsers = async () => { try { const response = await fetch("/api/admin/users") if (!response.ok) { throw new Error("Failed to fetch users") } const data = await response.json() setUsers(data) } catch (error) { console.error("Error fetching users:", error) toast.error("Failed to fetch users") } } if (session?.user?.role === "admin") { fetchUsers() } }, [session]) const handleRoleChange = async (userId: string, newRole: string) => { try { const response = await fetch("/api/admin/users", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: userId, role: newRole }), }) if (!response.ok) { throw new Error("Failed to update user role") } const updatedUser = await response.json() setUsers(users.map((user) => (user._id === updatedUser._id ? updatedUser : user))) toast.success("User role updated successfully") } catch (error) { console.error("Error updating user role:", error) toast.error("Failed to update user role") } } if (session?.user?.role !== "admin") { return
Access denied. Admin only.
} return (

Manage Users
Users Name Email Role Actions {users.map((user) => ( {user.name} {user.email} {user.role} ))}

) } [V0_FILE]typescriptreact:file="src/app/dashboard/profile/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { toast } from "react-hot-toast" interface UserProfile { name: string email: string address: string phone: string } export default function ProfilePage() { const { data: session } = useSession() const [profile, setProfile] = useState({ name: "", email: "", address: "", phone: "", }) const [isEditing, setIsEditing] = useState(false) useEffect(() => { const fetchProfile = async () => { try { const response = await fetch("/api/user/profile") if (!response.ok) { throw new Error("Failed to fetch profile") } const data = await response.json() setProfile(data) } catch (error) { console.error("Error fetching profile:", error) toast.error("Failed to fetch profile") } } if (session) { fetchProfile() } }, [session]) const handleInputChange = (event: React.ChangeEvent) => { const { name, value } = event.target setProfile((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (event: React.FormEvent) => { event.preventDefault() try { const response = await fetch("/api/user/profile", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(profile), }) if (!response.ok) { throw new Error("Failed to update profile") } toast.success("Profile updated successfully") setIsEditing(false) } catch (error) { console.error("Error updating profile:", error) toast.error("Failed to update profile") } } return (

My Profile
User Information

Name

Email

Address

Phone

{isEditing ? (

) : (

)}

) } [V0_FILE]typescriptreact:file="src/components/PromotionalBanner.tsx" import Link from "next/link" interface PromotionalBannerProps { title: string description: string linkText: string linkHref: string bgColor: string textColor: string } export function PromotionalBanner({ title, description, linkText, linkHref, bgColor, textColor, }: PromotionalBannerProps) { return (

{title}

{description}
{linkText}
) } [V0_FILE]typescriptreact:file="src/app/page.tsx" import Link from "next/link" import { Carousel } from "@/components/Carousel" import { FeaturedBicycles } from "@/components/FeaturedBicycles" import { Testimonials } from "@/components/Testimonials" import { PromotionalBanner } from "@/components/PromotionalBanner" export default function Home() { return (

Featured Bicycles

View All Bicycles

What Our Customers Say

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This