[V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { CartProvider } from "@/components/cart-provider" import { WishlistProvider } from "@/components/wishlist-provider" import { CurrencyProvider } from "@/components/currency-selector" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FINVIA Shopping Store", description: "Your one-stop shop for all your needs", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="components/site-header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRouter, usePathname } from "next/navigation" import { ShoppingCart, Heart, Menu, Star, UserCircle2, PenIcon as Pants, BabyIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTrigger } from "@/components/ui/sheet" import { useCart } from "./cart-provider" import { useState, useEffect } from "react" import { SearchDialog } from "./search-dialog" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { PackageIcon } from "lucide-react" import { useToast } from "./ui/use-toast" import { CurrencySelector } from "./currency-selector" const categories = [ { name: "Men's Clothing", href: "/category/mens-clothing", icon: UserCircle2 }, { name: "Women's Clothing", href: "/category/womens-clothing", icon: () => ( ), }, { name: "Kids Wear", href: "/category/kids-wear", icon: BabyIcon }, { name: "Combo Offers", href: "/category/combo", icon: PackageIcon }, { name: "Hoodies", href: "/category/hoodies", icon: () => ( ), }, { name: "Track Pants", href: "/category/track-pants", icon: Pants }, ] // Mock getCurrentSession function for demonstration purposes const getCurrentSession = () => { // Replace this with your actual session retrieval logic return null // Or return a mock session object } export function SiteHeader() { const { cartItems } = useCart() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [isSearchExpanded, setIsSearchExpanded] = useState(false) const [isLoggedIn, setIsLoggedIn] = useState(false) const router = useRouter() const pathname = usePathname() const { toast } = useToast() // Check authentication status on mount useEffect(() => { const session = getCurrentSession() setIsLoggedIn(!!session?.user) }, []) // Handle navigation with error boundary const handleNavigation = (href: string) => { try { router.push(href) } catch (error) { console.error("Navigation error:", error) toast({ variant: "destructive", title: "Error", description: "Failed to navigate. Please try again.", }) } } // Check if link is active const isLinkActive = (href: string) => { return pathname === href || pathname?.startsWith(href + "/") } return (

Menu Browse categories and more

Welcome to FINVIA Store

Discover our latest collection of premium products at amazing prices.

Shop by Category

{categories.map((category) => { const Icon = category.icon return (

{category.name} {category.description} ) })}

Top Sellers

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

Sale Items

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

) } [V0_FILE]typescript:file="components/product-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import Image from "next/image" import { Heart } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useCart } from "./cart-provider" import { useWishlist } from "./wishlist-provider" import { Badge } from "./ui/badge" import type { Product } from "@/lib/products" import { useRouter } from "next/navigation" import { useCurrency } from "./currency-selector" import { convertPrice, formatPrice } from "@/lib/currency" interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { const { currency } = useCurrency() const { addToCart } = useCart() const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist() const router = useRouter() const displayPrice = convertPrice(product.price, "USD", currency) const displayOriginalPrice = product.originalPrice ? convertPrice(product.originalPrice, "USD", currency) : null const toggleWishlist = (e: React.MouseEvent) => { e.stopPropagation() // Prevent card click when clicking wishlist button if (isInWishlist(product.id)) { removeFromWishlist(product.id) } else { addToWishlist(product) } } const handleAddToCart = (e: React.MouseEvent) => { e.stopPropagation() // Prevent card click when clicking add to cart button addToCart(product) } return ( router.push(`/product/${product.id}`)} >

{product.isSale && ( Sale )} {product.isTopSeller && ( Top Seller )}

{product.name} {product.description}

{formatPrice(displayPrice, currency)}

{displayOriginalPrice && (

{formatPrice(displayOriginalPrice, currency)}

)}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="lib/products.ts" isEdit="true" isMerged="true" export interface Product { id: string name: string description: string price: number originalPrice?: number image: string category: string isSale?: boolean isTopSeller?: boolean } // Sample product data export const products: Product[] = [ { id: "1", name: "Classic White T-Shirt", description: "Essential cotton t-shirt in classic white", price: 19.99, image: "/placeholder.svg?height=400&width=400", category: "mens-clothing", isTopSeller: true, }, { id: "2", name: "Floral Summer Dress", description: "Light and breezy floral print dress", price: 49.99, originalPrice: 79.99, image: "/placeholder.svg?height=400&width=400", category: "womens-clothing", isSale: true, }, { id: "3", name: "Kids Dinosaur Hoodie", description: "Fun dinosaur print hoodie for kids", price: 29.99, image: "/placeholder.svg?height=400&width=400", category: "kids-wear", isTopSeller: true, }, { id: "4", name: "Family Pack - Basic Tees", description: "Set of 4 basic t-shirts for the whole family", price: 59.99, originalPrice: 89.99, image: "/placeholder.svg?height=400&width=400", category: "combo", isSale: true, }, { id: "5", name: "Premium Zip Hoodie", description: "Comfortable zip-up hoodie in premium cotton", price: 44.99, image: "/placeholder.svg?height=400&width=400", category: "hoodies", isTopSeller: true, }, ] // Helper functions to get filtered products export function getTopSellers() { return products.filter((product) => product.isTopSeller) } export function getSaleProducts() { return products.filter((product) => product.isSale) } export function getProductsByCategory(category: string) { return products.filter((product) => product.category === category) } [V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { SiteHeader } from "@/components/site-header" import { ProductCard } from "@/components/product-card" import { getProductsByCategory } from "@/lib/products" import { notFound } from "next/navigation" const categoryNames = { "mens-clothing": "Men's Clothing", "womens-clothing": "Women's Clothing", "kids-wear": "Kids Wear", combo: "Combo Offers", hoodies: "Hoodies", "track-pants": "Track Pants", "top-sellers": "Top Sellers", } export default function CategoryPage({ params, }: { params: { slug: string } }) { const products = getProductsByCategory(params.slug) const categoryName = categoryNames[params.slug as keyof typeof categoryNames] if (!categoryName) { notFound() } return (

{categoryName}

{products.length === 0 ? (

No products found in this category.

) : (

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

)}

) } [V0_FILE]typescriptreact:file="components/search-dialog.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Search } from "lucide-react" import { Button } from "@/components/ui/button" import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { products } from "@/lib/products" import Image from "next/image" import { useRouter } from "next/navigation" import { cn } from "@/lib/utils" interface SearchDialogProps extends React.HTMLAttributes {} export function SearchDialog({ className, ...props }: SearchDialogProps) { const [open, setOpen] = useState(false) const router = useRouter() useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault() setOpen((open) => !open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, []) return (

No results found. {products.map((product) => ( { router.push(`/category/${product.category}?product=${product.id}`) setOpen(false) }} >

{product.name}

${product.price}

))}

) } [V0_FILE]typescript:file="components/auth/login-form.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardFooter, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" import { Alert, AlertDescription } from "@/components/ui/alert" import { ReloadIcon } from "@radix-ui/react-icons" import { isAdmin } from "@/lib/auth" interface FormData { email: string password: string } export function LoginForm() { const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [formData, setFormData] = useState({ email: "", password: "", }) const { toast } = useToast() const router = useRouter() const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) // Clear error when user starts typing if (error) setError(null) } async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) setError(null) try { // Log form data for debugging console.log("Login attempt:", { email: formData.email }) const response = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) if (!response.ok) { const data = await response.json() throw new Error(data.message || "Login failed") } const data = await response.json() toast({ title: "Success", description: "You have been logged in successfully.", }) // Redirect based on user role if (isAdmin(data.user)) { router.push("/admin") } else { router.push("/account") } } catch (err) { console.error("Login error:", err) setError(err instanceof Error ? err.message : "An unexpected error occurred") toast({ variant: "destructive", title: "Error", description: "Failed to login. Please try again.", }) } finally { setIsLoading(false) } } return ( Login Enter your email and password to access your account ) } [V0_FILE]typescriptreact:file="components/auth/register-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardFooter, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" export function RegisterForm() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Success", description: "Your account has been created successfully.", }) setIsLoading(false) } return ( Create an Account Enter your details to create a new account ) } [V0_FILE]typescript:file="app/account/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { SiteHeader } from "@/components/site-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/components/ui/use-toast" import { getUserById } from "@/lib/auth" import { AlertCircle, PackageSearch } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" interface UserProfile { id: string name: string email: string phone?: string } interface Order { id: string date: string status: string total: number } interface ReturnRequest { orderId: string reason: string videoUrl: string } export default function AccountPage() { const [profile, setProfile] = useState(null) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [orders, setOrders] = useState([]) const { toast } = useToast() const [returnRequests, setReturnRequests] = useState([]) const [selectedOrder, setSelectedOrder] = useState(null) const [returnReason, setReturnReason] = useState("") const [returnVideo, setReturnVideo] = useState(null) const handleReturnSubmit = async (orderId: string) => { if (!returnReason || !returnVideo) { toast({ variant: "destructive", title: "Error", description: "Please provide both a reason and unboxing video for your return.", }) return } // In a real app, you would upload the video to a storage service // and send the URL to your backend const mockVideoUrl = URL.createObjectURL(returnVideo) setReturnRequests([ ...returnRequests, { orderId, reason: returnReason, videoUrl: mockVideoUrl, }, ]) toast({ title: "Return requested", description: "Your return request has been submitted successfully.", }) setSelectedOrder(null) setReturnReason("") setReturnVideo(null) } // Fetch user profile useEffect(() => { const fetchProfile = async () => { try { // In a real app, get the user ID from session/token const userId = "1" // Example user ID const user = await getUserById(userId) if (user) { setProfile({ id: user.id, name: user.name, email: user.email, phone: "+1 234 567 890", // Example phone number }) // In a real app, fetch orders from API // For now, leaving it empty to show the "no orders" state setOrders([]) } else { setError("User not found") } } catch (err) { setError("Failed to load profile") } finally { setIsLoading(false) } } fetchProfile() }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!profile) return setIsSubmitting(true) try { const response = await fetch("/api/user/update", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ userId: profile.id, updates: { name: profile.name, email: profile.email, phone: profile.phone, }, }), }) if (!response.ok) { throw new Error("Failed to update profile") } toast({ title: "Success! 🎉", description: "Your changes have been saved successfully ✨", }) } catch (error) { toast({ variant: "destructive", title: "Error", description: "Failed to save changes. Please try again.", }) } finally { setIsSubmitting(false) } } if (isLoading) { return (

) } if (error) { return (

Error {error}

) } return (

My Account

Profile Orders Addresses Profile Information Update your personal information {profile && ( )} Order History View your past orders and their status {orders.length === 0 ? (

No Orders Found

You haven't placed any orders yet. Start shopping to see your orders here.

) : (

{orders.map((order) => { const hasReturn = returnRequests.some((req) => req.orderId === order.id) return (

{order.id}

{order.date}

{order.status}

${order.total}

{!hasReturn && ( )} {hasReturn && Return Requested}

) })}

)} Saved Addresses Manage your shipping addresses

Home

123 Main St, Apt 4B
New York, NY 10001

) } [V0_FILE]typescriptreact:file="components/wishlist-provider.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState } from "react" import { toast } from "@/components/ui/use-toast" import type { Product } from "@/lib/products" type WishlistContextType = { wishlistItems: Product[] addToWishlist: (item: Product) => void removeFromWishlist: (id: string) => void isInWishlist: (id: string) => boolean } const WishlistContext = createContext(undefined) export function WishlistProvider({ children }: { children: React.ReactNode }) { const [wishlistItems, setWishlistItems] = useState([]) const addToWishlist = (item: Product) => { setWishlistItems((prev) => { if (prev.find((i) => i.id === item.id)) { return prev } return [...prev, item] }) toast({ title: "Added to wishlist", description: `${item.name} has been added to your wishlist.`, }) } const removeFromWishlist = (id: string) => { setWishlistItems((prev) => prev.filter((item) => item.id !== id)) toast({ title: "Removed from wishlist", description: "Item has been removed from your wishlist.", }) } const isInWishlist = (id: string) => { return wishlistItems.some((item) => item.id === id) } return ( {children} ) } export function useWishlist() { const context = useContext(WishlistContext) if (context === undefined) { throw new Error("useWishlist must be used within a WishlistProvider") } return context } [V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true" "use client" import { SiteHeader } from "@/components/site-header" import { useWishlist } from "@/components/wishlist-provider" import { useCart } from "@/components/cart-provider" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import Image from "next/image" import { ShoppingCart, Trash2 } from "lucide-react" export default function WishlistPage() { const { wishlistItems, removeFromWishlist } = useWishlist() const { addToCart } = useCart() return (

My Wishlist

{wishlistItems.length === 0 ? (

Your wishlist is empty

) : (

{wishlistItems.map((item) => (

{item.name}

${item.price.toFixed(2)}

))}

)}

) } [V0_FILE]typescript:file="app/admin/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { SiteHeader } from "@/components/site-header" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { products } from "@/lib/products" import { Download, Plus, RefreshCw } from "lucide-react" import * as XLSX from "xlsx" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { useToast } from "@/components/ui/use-toast" import type { WordPressConfig } from "@/lib/wordpress" import { syncWithWooCommerce } from "@/lib/wordpress" import { Overview } from "@/components/admin/overview" import { RecentSales } from "@/components/admin/recent-sales" interface ProductFormData { name: string description: string price: number category: string image: File | null isSale: boolean isTopSeller: boolean originalPrice?: number } export default function AdminPage() { const [searchTerm, setSearchTerm] = useState("") const [isAddingProduct, setIsAddingProduct] = useState(false) const [productForm, setProductForm] = useState({ name: "", description: "", price: 0, category: "", image: null, isSale: false, isTopSeller: false, }) const [wpConfig, setWpConfig] = useState({ siteUrl: "", username: "", password: "", }) const [isSyncing, setIsSyncing] = useState(false) const { toast } = useToast() const filteredProducts = products.filter( (product) => product.name.toLowerCase().includes(searchTerm.toLowerCase()) || product.category.toLowerCase().includes(searchTerm.toLowerCase()), ) const exportToExcel = () => { const worksheet = XLSX.utils.json_to_sheet(products) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, "Products") XLSX.writeFile(workbook, "products.xlsx") } const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { setProductForm({ ...productForm, image: file }) } } const handleProductSubmit = async (e: React.FormEvent) => { e.preventDefault() // In a real app, you would upload the image and save the product toast({ title: "Success", description: "Product has been added successfully.", }) setIsAddingProduct(false) setProductForm({ name: "", description: "", price: 0, category: "", image: null, isSale: false, isTopSeller: false, }) } const handleWPSync = async () => { setIsSyncing(true) try { const wpProducts = await syncWithWooCommerce(wpConfig) toast({ title: "Sync Complete", description: `Successfully synced ${wpProducts.length} products from WooCommerce.`, }) } catch (error) { toast({ variant: "destructive", title: "Sync Failed", description: "Failed to sync products from WooCommerce.", }) } finally { setIsSyncing(false) } } return (

Dashboard

Total Revenue

₹45,231.89

+20.1% from last month

Orders

+573

+201 since last hour

Sales

+12,234

+19% from last month

Active Now

+573

+201 since last hour

Overview Recent Sales You made 265 sales this month.

Welcome to FINVIA Store

Shop by Category

Top Sellers

Sale Items

{categoryName}

My Account

No Orders Found

My Wishlist

{item.name}

Dashboard

Admin Dashboard

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This