[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import { Toaster } from "@/components/ui/toaster" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "E-commerce Admin", description: "Advanced e-commerce platform with admin panel", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import ProductCard from "@/components/ProductCard" import clientPromise from "@/lib/mongodb" async function getLatestProducts() { const client = await clientPromise const db = client.db("ecommerce") const products = await db.collection("products").find().sort({ _id: -1 }).limit(6).toArray() return JSON.parse(JSON.stringify(products)) } export default async function Home() { const latestProducts = await getLatestProducts() return (

Welcome to our E-commerce Store

Shop the latest products with ease

Latest Products

{latestProducts.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import ProductCard from "@/components/ProductCard" // This would typically come from a database const products = [ { id: 1, name: "Product 1", price: 19.99, image: "/placeholder.svg" }, { id: 2, name: "Product 2", price: 29.99, image: "/placeholder.svg" }, { id: 3, name: "Product 3", price: 39.99, image: "/placeholder.svg" }, ] export default function ProductsPage() { return (

Our Products

{products.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ProductCard.tsx" isEdit="true" isMerged="true" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" interface Product { _id: string name: string price: number images: string[] video?: string } export default function ProductCard({ product }: { product: Product }) { return ( {product.name} {product.images.map((image, index) => ( {`${product.name}

))} {product.video && (

)}

${product.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import AdminSidebar from "@/components/AdminSidebar" import AdminHeader from "@/components/AdminHeader" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/AdminSidebar.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Home, Package, ShoppingCart, BarChart, Users, Settings, Tag, MessageSquare, Clipboard, Gift, } from "lucide-react" const AdminSidebar = () => { return (

) } export default AdminSidebar [V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line, } from "recharts" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface DashboardData { totalRevenue: number orders: number customers: number conversionRate: number salesData: { name: string; sales: number }[] visitorData: { name: string; visitors: number }[] } export default function AdminDashboard() { const [dashboardData, setDashboardData] = useState(null) useEffect(() => { const fetchDashboardData = async () => { const response = await fetch("/api/dashboard") const data = await response.json() setDashboardData(data) } fetchDashboardData() }, []) if (!dashboardData) { return

} return (

Dashboard

Total Revenue

${dashboardData.totalRevenue.toLocaleString()}

+12.5% from last month

Orders

{dashboardData.orders}

+5.2% from last month

Customers

{dashboardData.customers.toLocaleString()}

+3.1% from last month

Conversion Rate

{dashboardData.conversionRate}%

+0.5% from last month

Sales Overview Visitor Analytics Monthly Sales Weekly Visitors

) } [V0_FILE]typescriptreact:file="app/admin/products/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" 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" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Checkbox } from "@/components/ui/checkbox" import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" import type { Product } from "@/models/Product" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" export default function AdminProducts() { const [products, setProducts] = useState([]) const [totalPages, setTotalPages] = useState(1) const [currentPage, setCurrentPage] = useState(1) const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("") const [selectedProducts, setSelectedProducts] = useState([]) const [isAddProductOpen, setIsAddProductOpen] = useState(false) const [newProduct, setNewProduct] = useState>({ name: "", price: 0, stock: 0, category: "", images: [], description: "", }) useEffect(() => { fetchProducts() }, [currentPage, searchTerm, selectedCategory]) //This line was already correct. The error message was misleading. const fetchProducts = async () => { const response = await fetch(`/api/products?page=${currentPage}&search=${searchTerm}&category=${selectedCategory}`) const data = await response.json() setProducts(data.products) setTotalPages(data.totalPages) setCurrentPage(data.currentPage) } const handleSelectProduct = (productId: string) => { setSelectedProducts((prev) => prev.includes(productId) ? prev.filter((id) => id !== productId) : [...prev, productId], ) } const handleSelectAll = () => { setSelectedProducts( selectedProducts.length === products.length ? [] : products.map((product) => product._id!.toString()), ) } const handleBulkDelete = async () => { for (const id of selectedProducts) { await fetch(`/api/products?id=${id}`, { method: "DELETE" }) } setSelectedProducts([]) fetchProducts() } const handleAddProduct = async () => { await fetch("/api/products", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newProduct), }) setIsAddProductOpen(false) setNewProduct({ name: "", price: 0, stock: 0, category: "", images: [], description: "" }) fetchProducts() } const handleImageUpload = (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []) const imageUrls = files.map((file) => URL.createObjectURL(file)) setNewProduct((prev) => ({ ...prev, images: [...prev.images, ...imageUrls] })) } return (

Welcome to our E-commerce Store

Latest Products

Our Products

Dashboard

Product Management

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This