[V0_FILE]javascriptreact:file="app/layout.jsx" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/Navbar" import { AuthProvider } from "@/contexts/AuthContext" import { CartProvider } from "@/contexts/CartContext" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Shodix - Online Marketplace", description: "Buy and sell products from local stores", } export default function RootLayout({ children }) { return (

{children}

) } [V0_FILE]javascriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascriptreact:file="app/page.jsx" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import Link from "next/link" import FeaturedProducts from "@/components/FeaturedProducts" import StoreHighlights from "@/components/StoreHighlights" import { ShoppingBag, Store, MessageSquare, ShieldCheck } from "lucide-react" export default function Home() { return (

{/* Hero Section */}

Discover Local Stores and Products

Shop from local stores, find unique products, and connect directly with sellers.

{/* Features */}

Why Choose Shodix?

Easy Shopping

Browse and purchase products with a seamless checkout experience.

Local Stores

Support local businesses and discover unique products in your area.

Direct Communication

Chat directly with store owners for questions or custom orders.

Secure Transactions

Shop with confidence with our secure ordering system.

{/* Featured Products */} {/* Store Highlights */} {/* CTA Section */}

Ready to start selling?

Create your store today and reach customers in your area. It's free to get started!

) } [V0_FILE]javascriptreact:file="contexts/AuthContext.jsx" "use client" import { createContext, useState, useContext, useEffect } from "react" import { useToast } from "@/components/ui/use-toast" const AuthContext = createContext({}) export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null) const [store, setStore] = useState(null) const [loading, setLoading] = useState(true) const { toast } = useToast() useEffect(() => { // Check for existing tokens in localStorage const userToken = localStorage.getItem("userToken") const storeToken = localStorage.getItem("storeToken") if (userToken) { // Decode JWT to get user info try { const payload = JSON.parse(atob(userToken.split(".")[1])) setUser({ user_id: payload.user_id, username: payload.username, full_location: payload.full_location, token: userToken, }) } catch (error) { console.error("Invalid user token", error) localStorage.removeItem("userToken") } } if (storeToken) { // Decode JWT to get store info try { const payload = JSON.parse(atob(storeToken.split(".")[1])) setStore({ store_id: payload.store_id, store_name: payload.store_name, full_location: payload.full_location, token: storeToken, }) } catch (error) { console.error("Invalid store token", error) localStorage.removeItem("storeToken") } } setLoading(false) }, []) const loginUser = async (username, password) => { try { const response = await fetch("http://localhost:3001/api/user/log", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ username, password }), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to login") } // Save token to localStorage localStorage.setItem("userToken", data.token) // Decode JWT to get user info const payload = JSON.parse(atob(data.token.split(".")[1])) setUser({ user_id: payload.user_id, username: payload.username, full_location: payload.full_location, token: data.token, }) toast({ title: "Login successful", description: `Welcome back, ${payload.username}!`, }) return true } catch (error) { toast({ variant: "destructive", title: "Login failed", description: error.message, }) return false } } const loginStore = async (store_name, password) => { try { const response = await fetch("http://localhost:3001/api/store/log", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ store_name, password }), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to login") } // Save token to localStorage localStorage.setItem("storeToken", data.token) // Decode JWT to get store info const payload = JSON.parse(atob(data.token.split(".")[1])) setStore({ store_id: payload.store_id, store_name: payload.store_name, full_location: payload.full_location, token: data.token, }) toast({ title: "Login successful", description: `Welcome back, ${payload.store_name}!`, }) return true } catch (error) { toast({ variant: "destructive", title: "Login failed", description: error.message, }) return false } } const logout = () => { localStorage.removeItem("userToken") localStorage.removeItem("storeToken") setUser(null) setStore(null) toast({ title: "Logged out", description: "You have been successfully logged out.", }) } const registerUser = async (userData) => { try { const response = await fetch("http://localhost:3001/api/user/reg", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(userData), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to register") } toast({ title: "Registration successful", description: "Your account has been created. Please log in.", }) return true } catch (error) { toast({ variant: "destructive", title: "Registration failed", description: error.message, }) return false } } const registerStore = async (formData) => { try { const response = await fetch("http://localhost:3001/api/store/reg", { method: "POST", body: formData, // FormData for file upload }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to register store") } toast({ title: "Store registration successful", description: "Your store has been created. Please log in.", }) return true } catch (error) { toast({ variant: "destructive", title: "Store registration failed", description: error.message, }) return false } } return ( {children} ) } export const useAuth = () => useContext(AuthContext) [V0_FILE]javascriptreact:file="contexts/CartContext.jsx" "use client" import { createContext, useState, useContext, useEffect } from "react" import { useAuth } from "./AuthContext" import { useToast } from "@/components/ui/use-toast" const CartContext = createContext({}) export const CartProvider = ({ children }) => { const [cartItems, setCartItems] = useState([]) const [loading, setLoading] = useState(false) const { user } = useAuth() const { toast } = useToast() // Fetch cart items when user logs in useEffect(() => { if (user) { fetchCartItems() } else { setCartItems([]) } }, [user]) const fetchCartItems = async () => { if (!user) return setLoading(true) try { const response = await fetch("http://localhost:3001/api/cart", { method: "GET", headers: { Authorization: `Bearer ${user.token}`, }, }) if (response.status === 404) { // No items in cart setCartItems([]) setLoading(false) return } if (!response.ok) { throw new Error("Failed to fetch cart items") } const data = await response.json() setCartItems(data) } catch (error) { console.error("Error fetching cart:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load your cart items.", }) } finally { setLoading(false) } } const addToCart = async (product, quantity = 1) => { if (!user) { toast({ variant: "destructive", title: "Authentication required", description: "Please log in to add items to your cart.", }) return false } setLoading(true) try { const cartData = { store_id: product.store_id, store_name: product.store_name, product_id: product.product_id, quantity, country: product.country, full_location: user.full_location, name: product.name, price: product.price, img: product.img, } const response = await fetch("http://localhost:3001/api/cart/add", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${user.token}`, }, body: JSON.stringify(cartData), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to add item to cart") } toast({ title: "Added to cart", description: data.msg || "Item added to your cart successfully.", }) // Refresh cart items await fetchCartItems() return true } catch (error) { toast({ variant: "destructive", title: "Error", description: error.message || "Failed to add item to cart.", }) return false } finally { setLoading(false) } } const updateCartItem = async (cartId, quantity) => { if (!user) return false setLoading(true) try { const response = await fetch("http://localhost:3001/api/cart/update", { method: "PATCH", headers: { "Content-Type": "application/json", Authorization: `Bearer ${user.token}`, }, body: JSON.stringify({ cart_id: cartId, quantity, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to update cart") } // Refresh cart items await fetchCartItems() return true } catch (error) { toast({ variant: "destructive", title: "Error", description: error.message || "Failed to update cart item.", }) return false } finally { setLoading(false) } } const removeCartItem = async (cartId) => { if (!user) return false setLoading(true) try { const response = await fetch("http://localhost:3001/api/cart/delete", { method: "DELETE", headers: { "Content-Type": "application/json", Authorization: `Bearer ${user.token}`, }, body: JSON.stringify({ cart_id: cartId, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to remove item from cart") } toast({ title: "Item removed", description: "Item removed from your cart.", }) // Refresh cart items await fetchCartItems() return true } catch (error) { toast({ variant: "destructive", title: "Error", description: error.message || "Failed to remove item from cart.", }) return false } finally { setLoading(false) } } const placeOrder = async (cartItem) => { if (!user) return false setLoading(true) try { const orderData = { quantity: cartItem.quantity, country: cartItem.country, full_location: cartItem.full_location, store_name: cartItem.store_name, product_id: cartItem.product_id, store_id: cartItem.store_id, cart_id: cartItem.cart_id, } const response = await fetch("http://localhost:3001/api/order/add", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${user.token}`, }, body: JSON.stringify(orderData), }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to place order") } toast({ title: "Order placed", description: "Your order has been placed successfully!", }) // Refresh cart items await fetchCartItems() return true } catch (error) { toast({ variant: "destructive", title: "Error", description: error.message || "Failed to place order.", }) return false } finally { setLoading(false) } } return ( total + item.price * item.quantity, 0), }} > {children} ) } export const useCart = () => useContext(CartContext) [V0_FILE]javascriptreact:file="components/Navbar.jsx" "use client" import { useState } from "react" import Link from "next/link" import { useAuth } from "@/contexts/AuthContext" import { useCart } from "@/contexts/CartContext" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { ShoppingCart, User, Store, Menu, LogOut, MessageSquare, Package, Heart } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export default function Navbar() { const { user, store, logout, isAuthenticated } = useAuth() const { cartCount } = useCart() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

setMobileMenuOpen(false)} > Home setMobileMenuOpen(false)} > Products setMobileMenuOpen(false)} > Stores {user && ( <> setMobileMenuOpen(false)} > My Account setMobileMenuOpen(false)} > Cart setMobileMenuOpen(false)} > Messages )} {store && ( <> setMobileMenuOpen(false)} > Store Dashboard setMobileMenuOpen(false)} > My Products setMobileMenuOpen(false)} > Orders setMobileMenuOpen(false)} > Messages )} {!isAuthenticated && ( <> setMobileMenuOpen(false)} > Login setMobileMenuOpen(false)} > Register )} {isAuthenticated && ( )}

Shodix

{user && ( )} {isAuthenticated ? ( {user ? `Hi, ${user.username}` : `Hi, ${store.store_name}`} {user && ( <> My Account My Orders

Messages

Favorites

)} {store && ( <> Store Dashboard My Products

Orders

Messages

)}

Logout

) : (

)}

) } [V0_FILE]javascriptreact:file="components/FeaturedProducts.jsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useCart } from "@/contexts/CartContext" import { useToast } from "@/components/ui/use-toast" import { ShoppingCart } from "lucide-react" export default function FeaturedProducts() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const { addToCart } = useCart() const { toast } = useToast() useEffect(() => { const fetchProducts = async () => { try { const response = await fetch("http://localhost:3001/api/product/all") if (!response.ok) { throw new Error("Failed to fetch products") } const data = await response.json() // Get 4 random products for featured section const randomProducts = data.sort(() => 0.5 - Math.random()).slice(0, 4) setProducts(randomProducts) } catch (error) { console.error("Error fetching products:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load products. Please try again later.", }) } finally { setLoading(false) } } fetchProducts() }, [toast]) const handleAddToCart = async (product) => { await addToCart(product) } if (loading) { return (

Featured Products

{[...Array(4)].map((_, i) => (

))}

) } return (

Featured Products

{products.map((product) => (

{product.name}

{product.desc.length > 60 ? `${product.desc.substring(0, 60)}...` : product.desc}

{product.store_name}

${product.price.toFixed(2)}

))}

) } [V0_FILE]javascriptreact:file="components/StoreHighlights.jsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { Store } from "lucide-react" export default function StoreHighlights() { const [stores, setStores] = useState([]) const [loading, setLoading] = useState(true) const { toast } = useToast() useEffect(() => { // This is a mock function since the API doesn't have a direct endpoint to get all stores // In a real implementation, you would fetch from an actual endpoint const fetchStores = async () => { try { // Simulate API call with timeout await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock data for stores const mockStores = [ { store_id: 1, store_name: "ElectroHub", bio: "Your one-stop shop for all electronics and gadgets.", img: "/placeholder.svg?height=200&width=200", full_location: "New York, USA", }, { store_id: 2, store_name: "FashionFusion", bio: "Trendy clothing and accessories for all seasons.", img: "/placeholder.svg?height=200&width=200", full_location: "Los Angeles, USA", }, { store_id: 3, store_name: "HomeEssentials", bio: "Everything you need to make your house a home.", img: "/placeholder.svg?height=200&width=200", full_location: "Chicago, USA", }, ] setStores(mockStores) } catch (error) { console.error("Error fetching stores:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load stores. Please try again later.", }) } finally { setLoading(false) } } fetchStores() }, [toast]) if (loading) { return (

Popular Stores

{[...Array(3)].map((_, i) => (

))}

) } return (

Popular Stores

{stores.map((store) => (

${store.store_name}$

{store.store_name}

{store.bio}

{store.full_location}

))}

) } [V0_FILE]javascriptreact:file="app/login/page.jsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { useAuth } from "@/contexts/AuthContext" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, 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 { User, Store } from "lucide-react" export default function LoginPage() { const router = useRouter() const { loginUser, loginStore } = useAuth() const [userForm, setUserForm] = useState({ username: "", password: "" }) const [storeForm, setStoreForm] = useState({ store_name: "", password: "" }) const [loading, setLoading] = useState(false) const handleUserLogin = async (e) => { e.preventDefault() setLoading(true) const success = await loginUser(userForm.username, userForm.password) setLoading(false) if (success) { router.push("/") } } const handleStoreLogin = async (e) => { e.preventDefault() setLoading(true) const success = await loginStore(storeForm.store_name, storeForm.password) setLoading(false) if (success) { router.push("/store/dashboard") } } return (

Username setUserForm({ ...userForm, username: e.target.value })} required />

Password Forgot password?

setUserForm({ ...userForm, password: e.target.value })} required />

Don't have an account?{" "} Register here

Store Name setStoreForm({ ...storeForm, store_name: e.target.value })} required />

Password Forgot password?

setStoreForm({ ...storeForm, password: e.target.value })} required />

Don't have a store?{" "} Register your store

) } [V0_FILE]javascriptreact:file="app/products/page.jsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useCart } from "@/contexts/CartContext" import { useToast } from "@/components/ui/use-toast" import { ShoppingCart, Search } from "lucide-react" export default function ProductsPage() { const [products, setProducts] = useState([]) const [filteredProducts, setFilteredProducts] = useState([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [sortBy, setSortBy] = useState("newest") const { addToCart } = useCart() const { toast } = useToast() useEffect(() => { const fetchProducts = async () => { try { const response = await fetch("http://localhost:3001/api/product/all") if (!response.ok) { throw new Error("Failed to fetch products") } const data = await response.json() setProducts(data) setFilteredProducts(data) } catch (error) { console.error("Error fetching products:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load products. Please try again later.", }) } finally { setLoading(false) } } fetchProducts() }, [toast]) useEffect(() => { // Filter products based on search term let filtered = products if (searchTerm) { filtered = products.filter( (product) => product.name.toLowerCase().includes(searchTerm.toLowerCase()) || product.desc.toLowerCase().includes(searchTerm.toLowerCase()) || product.store_name.toLowerCase().includes(searchTerm.toLowerCase()), ) } // Sort products switch (sortBy) { case "price-low": filtered = [...filtered].sort((a, b) => a.price - b.price) break case "price-high": filtered = [...filtered].sort((a, b) => b.price - a.price) break case "name": filtered = [...filtered].sort((a, b) => a.name.localeCompare(b.name)) break default: // Default sort by newest (assuming product_id is incremental) filtered = [...filtered].sort((a, b) => b.product_id - a.product_id) } setFilteredProducts(filtered) }, [products, searchTerm, sortBy]) const handleAddToCart = async (product) => { await addToCart(product) } if (loading) { return (

Products

{[...Array(8)].map((_, i) => (

))}

) } return (

Products

setSearchTerm(e.target.value)} className="pl-10" />

{filteredProducts.length === 0 ? (

No products found

Try adjusting your search or filters

) : (

{filteredProducts.map((product) => (

{product.name}

{product.desc.length > 60 ? `${product.desc.substring(0, 60)}...` : product.desc}

{product.store_name}

${product.price.toFixed(2)}

))}

)}

) } [V0_FILE]javascriptreact:file="app/products/[id]/page.jsx" "use client" import { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { useToast } from "@/components/ui/use-toast" import { useCart } from "@/contexts/CartContext" import { useAuth } from "@/contexts/AuthContext" import { ShoppingCart, Store, MessageSquare, Heart, Minus, Plus, ArrowLeft } from "lucide-react" export default function ProductDetailPage() { const params = useParams() const router = useRouter() const { toast } = useToast() const { addToCart } = useCart() const { user, isAuthenticated } = useAuth() const [product, setProduct] = useState(null) const [loading, setLoading] = useState(true) const [quantity, setQuantity] = useState(1) const [store, setStore] = useState(null) const [storeLoading, setStoreLoading] = useState(true) useEffect(() => { const fetchProduct = async () => { try { const response = await fetch(`http://localhost:3001/api/product/${params.id}`) if (!response.ok) { if (response.status === 404) { toast({ variant: "destructive", title: "Product not found", description: "The product you're looking for doesn't exist.", }) router.push("/products") return } throw new Error("Failed to fetch product") } const data = await response.json() setProduct(data) // Fetch store details fetchStore(data.store_name) } catch (error) { console.error("Error fetching product:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load product details. Please try again later.", }) } finally { setLoading(false) } } const fetchStore = async (storeName) => { try { const response = await fetch(`http://localhost:3001/api/store/${storeName}`) if (!response.ok) { throw new Error("Failed to fetch store details") } const data = await response.json() setStore(data) } catch (error) { console.error("Error fetching store:", error) } finally { setStoreLoading(false) } } if (params.id) { fetchProduct() } }, [params.id, router, toast]) const handleQuantityChange = (value) => { const newQuantity = Math.max(1, Math.min(product.stock, value)) setQuantity(newQuantity) } const handleAddToCart = async () => { if (product) { await addToCart(product, quantity) } } const handleMessageStore = () => { if (!isAuthenticated) { toast({ variant: "destructive", title: "Authentication required", description: "Please log in to message the store.", }) router.push("/login") return } router.push(`/messages/${product.store_name}`) } if (loading) { return (

) } if (!product) { return (

Product not found

The product you're looking for doesn't exist or has been removed.

) } return (

{product.name}

{product.store_name}

${product.price.toFixed(2)}

Description

{product.desc}

Availability

0 ? "text-green-600" : "text-red-600"}> {product.stock > 0 ? `In Stock (${product.stock} available)` : "Out of Stock"}

{product.stock > 0 && (

handleQuantityChange(Number.parseInt(e.target.value) || 1)} className="w-16 text-center mx-2" />

)}

{user && ( )}

Country: {product.country}

{store && !storeLoading && (

About the Store

${store.store_name}$

{store.store_name}

{store.full_location}

{store.bio}

)}

) } [V0_FILE]javascriptreact:file="app/cart/page.jsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { useToast } from "@/components/ui/use-toast" import { useCart } from "@/contexts/CartContext" import { useAuth } from "@/contexts/AuthContext" import { ShoppingCart, Trash2, Minus, Plus, ArrowRight, ShoppingBag } from "lucide-react" export default function CartPage() { const router = useRouter() const { toast } = useToast() const { cartItems, loading, updateCartItem, removeCartItem, placeOrder, cartTotal } = useCart() const { user } = useAuth() const [processingItems, setProcessingItems] = useState({}) if (!user) { router.push("/login") return null } const handleQuantityChange = async (cartId, currentQuantity, newQuantity) => { if (newQuantity < 1) return if (newQuantity === currentQuantity) return setProcessingItems((prev) => ({ ...prev, [cartId]: true })) await updateCartItem(cartId, newQuantity) setProcessingItems((prev) => ({ ...prev, [cartId]: false })) } const handleRemoveItem = async (cartId) => { setProcessingItems((prev) => ({ ...prev, [cartId]: true })) await removeCartItem(cartId) setProcessingItems((prev) => ({ ...prev, [cartId]: false })) } const handleCheckout = async (item) => { setProcessingItems((prev) => ({ ...prev, [item.cart_id]: true })) const success = await placeOrder(item) if (success) { toast({ title: "Order placed", description: `Your order for ${item.name} has been placed successfully!`, }) } setProcessingItems((prev) => ({ ...prev, [item.cart_id]: false })) } if (loading) { return (

Your Cart

{[...Array(3)].map((_, i) => (

))}

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

Your cart is empty

Looks like you haven't added any products to your cart yet.

) } return (

Your Cart

{cartItems.map((item) => (

{item.name}

Sold by: {item.store_name}

${(item.price * item.quantity).toFixed(2)}

handleQuantityChange(item.cart_id, item.quantity, Number.parseInt(e.target.value) || 1) } className="w-16 text-center mx-2" disabled={processingItems[item.cart_id]} />

))}

Order Summary

{cartItems.map((item) => (

{item.name} (x{item.quantity}) ${(item.price * item.quantity).toFixed(2)}

))}

Total ${cartTotal.toFixed(2)}

) } [V0_FILE]javascriptreact:file="app/store/dashboard/page.jsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/contexts/AuthContext" import { Package, ShoppingBag, MessageSquare, Users, PlusCircle, StoreIcon, Settings } from "lucide-react" export default function StoreDashboard() { const router = useRouter() const { toast } = useToast() const { store, loading: authLoading } = useAuth() const [orders, setOrders] = useState([]) const [ordersLoading, setOrdersLoading] = useState(true) const [followers, setFollowers] = useState(0) const [followersLoading, setFollowersLoading] = useState(true) const [products, setProducts] = useState([]) const [productsLoading, setProductsLoading] = useState(true) useEffect(() => { if (!authLoading && !store) { toast({ variant: "destructive", title: "Access denied", description: "You need to be logged in as a store to view this page.", }) router.push("/login") } }, [authLoading, store, router, toast]) useEffect(() => { if (store) { // Fetch orders const fetchOrders = async () => { try { const response = await fetch("http://localhost:3001/api/order/see", { method: "POST", headers: { Authorization: `Bearer ${store.token}`, "Content-Type": "application/json", }, }) if (response.status === 404) { setOrders([]) setOrdersLoading(false) return } if (!response.ok) { throw new Error("Failed to fetch orders") } const data = await response.json() setOrders(data) } catch (error) { console.error("Error fetching orders:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load orders. Please try again later.", }) } finally { setOrdersLoading(false) } } // Fetch followers count const fetchFollowers = async () => { try { const response = await fetch(`http://localhost:3001/api/follow?store_id=${store.store_id}`) if (!response.ok) { throw new Error("Failed to fetch followers") } const data = await response.json() setFollowers(data.followers_count) } catch (error) { console.error("Error fetching followers:", error) } finally { setFollowersLoading(false) } } // Fetch products const fetchProducts = async () => { try { const response = await fetch(`http://localhost:3001/api/product/store/${store.store_id}`) if (!response.ok) { throw new Error("Failed to fetch products") } const data = await response.json() setProducts(data) } catch (error) { console.error("Error fetching products:", error) toast({ variant: "destructive", title: "Error", description: "Failed to load products. Please try again later.", }) } finally { setProductsLoading(false) } } fetchOrders() fetchFollowers() fetchProducts() } }, [store, toast]) if (authLoading || !store) { return (

{[...Array(4)].map((_, i) => (

))}

) } return (

Store Dashboard

Total Orders

{ordersLoading ? ... : orders.length}

Products

{productsLoading ? ... : products.length}

Followers

{followersLoading ? ... : followers}

Messages

View Inbox

Recent Orders Manage your recent customer orders {ordersLoading ? (

{[...Array(3)].map((_, i) => (

))}

) : orders.length === 0 ? (

No orders yet

When customers place orders, they will appear here.

) : (

{orders.slice(0, 5).map((order) => (

Order #{order.order_id}

From: {order.username} • Qty: {order.quantity}

))} {orders.length > 5 && (

)}

)} Recent Products Manage your product listings {productsLoading ? (

{[...Array(3)].map((_, i) => (

))}

) : products.length === 0 ? (

No products yet

Start adding products to your store.

) : (

{products.slice(0, 5).map((product) => (

{product.name}

${product.price.toFixed(2)} • Stock: {product.stock}

))} {products.length > 5 && (

)}

) } [V0_FILE]javascriptreact:file="components/ProductForm.jsx" "use client" import { useState, useRef } from "react" import { useRouter } from "next/navigation" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/contexts/AuthContext" import { ImagePlus, Loader2 } from "lucide-react" export default function ProductForm({ product = null, isEdit = false }) { const router = useRouter() const { toast } = useToast() const { store } = useAuth() const fileInputRef = useRef(null) const [formData, setFormData] = useState({ name: product?.name || "", desc: product?.desc || "", price: product?.price || "", stock: product?.stock || "", country: product?.country || "", }) const [imagePreview, setImagePreview] = useState(product?.img ? `http://localhost:3001${product.img}` : null) const [selectedFile, setSelectedFile] = useState(null) const [loading, setLoading] = useState(false) const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: name === "price" || name === "stock" ? value.replace(/[^0-9.]/g, "") : value, })) } const handleFileChange = (e) => { const file = e.target.files[0] if (file) { setSelectedFile(file) const reader = new FileReader() reader.onload = () => { setImagePreview(reader.result) } reader.readAsDataURL(file) } } const handleSubmit = async (e) => { e.preventDefault() if (!store) { toast({ variant: "destructive", title: "Authentication required", description: "You need to be logged in as a store to perform this action.", }) return } if (!formData.name || !formData.desc || !formData.price || !formData.stock || !formData.country) { toast({ variant: "destructive", title: "Missing fields", description: "Please fill in all required fields.", }) return } if (!isEdit && !selectedFile) { toast({ variant: "destructive", title: "Image required", description: "Please select a product image.", }) return } setLoading(true) try { // Create FormData object for file upload const submitData = new FormData() // Add form fields submitData.append("name", formData.name) submitData.append("desc", formData.desc) submitData.append("price", formData.price) submitData.append("stock", formData.stock) submitData.append("country", formData.country) // Add file if selected if (selectedFile) { submitData.append("productImg", selectedFile) } // Add product_id if editing if (isEdit && product) { submitData.append("product_id", product.product_id) } // Determine endpoint and method const endpoint = isEdit ? "http://localhost:3001/api/product/update" : "http://localhost:3001/api/product/add" const method = isEdit ? "PATCH" : "POST" // Send request const response = await fetch(endpoint, { method, headers: { Authorization: `Bearer ${store.token}`, }, body: submitData, }) const data = await response.json() if (!response.ok) { throw new Error(data.msg || "Failed to save product") } toast({ title: isEdit ? "Product updated" : "Product added", description: data.msg || `Product ${isEdit ? "updated" : "added"} successfully!`, }) // Redirect to products page router.push("/store/products") } catch (error) { console.error("Error saving product:", error) toast({ variant: "destructive", title: "Error", description: error.message || `Failed to ${isEdit ? "update" : "add"} product.`, }) } finally { setLoading(false) } } return (

Product Name

Description

</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-2">
              <Label htmlFor="price">Price ($)</Label>
              <Input
                id="price"
                name="price"
                type="text"
                value={formData.price}
                onChange={handleChange}
                placeholder="0.00"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="stock">Stock</Label>
              <Input
                id="stock"
                name="stock"
                type="text"
                value={formData.stock}
                onChange={handleChange}
                placeholder="0"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="country">Country</Label>
              <Input
                id="country"
                name="country"
                value={formData.country}
                onChange={handleChange}
                placeholder="Enter country of origin"
                required
              />
            </div>
          </div>

<div className="space-y-2">
            <Label>Product Image</Label>
            <div className="flex flex-col items-center gap-4 sm:flex-row">
              <div
                className="relative h-32 w-32 rounded-lg border-2 border-dashed flex items-center justify-center cursor-pointer overflow-hidden"
                onClick={() => fileInputRef.current?.click()}
              >
                {imagePreview ? (
                  <Image src={imagePreview || "/placeholder.svg"} alt="Product preview" fill className="object-cover" />
                ) : (
                  <div className="flex flex-col items-center justify-center text-muted-foreground">
                    <ImagePlus className="h-8 w-8 mb-2" />
                    <span className="text-xs">Upload Image</span>
                  </div>
                )}
              </div>

<div className="flex-1">
                <Input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
                <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
                  {imagePreview ? "Change Image" : "Select Image"}
                </Button>
                <p className="text-xs text-muted-foreground mt-2">Recommended size: 800x800px. Max size: 5MB.</p>
              </div>
            </div>
          </div>

<div className="flex justify-end gap-4">
            <Button type="button" variant="outline" onClick={() => router.back()} disabled={loading}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading}>
              {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              {isEdit ? "Update Product" : "Add Product"}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}

[V0_FILE]javascriptreact:file="app/store/products/add/page.jsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import { useToast } from "@/components/ui/use-toast"
import ProductForm from "@/components/ProductForm"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function AddProductPage() {
  const router = useRouter()
  const { store, loading: authLoading } = useAuth()
  const { toast } = useToast()

useEffect(() => {
    if (!authLoading && !store) {
      toast({
        variant: "destructive",
        title: "Access denied",
        description: "You need to be logged in as a store to view this page.",
      })
      router.push("/login")
    }
  }, [authLoading, store, router, toast])

if (authLoading || !store) {
    return (
      <div className="container px-4 py-8 mx-auto animate-pulse">
        <div className="h-8 bg-muted rounded w-1/4 mb-6" />
        <div className="h-96 bg-muted rounded-lg" />
      </div>
    )
  }

return (
    <div className="container px-4 py-8 mx-auto">
      <div className="mb-6">
        <Button variant="ghost" className="mb-2" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <h1 className="text-3xl font-bold">Add New Product</h1>
        <p className="text-muted-foreground">Create a new product listing for your store</p>
      </div>

<ProductForm />
    </div>
  )
}

[V0_FILE]javascriptreact:file="components/MessageChat.jsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/AuthContext"
import { Send, Loader2 } from "lucide-react"
import { io } from "socket.io-client"

export default function MessageChat({ storeName, userName }) {
  const router = useRouter()
  const { user, store, isAuthenticated } = useAuth()
  const { toast } = useToast()
  const [messages, setMessages] = useState([])
  const [loading, setLoading] = useState(true)
  const [message, setMessage] = useState("")
  const [sending, setSending] = useState(false)
  const messagesEndRef = useRef(null)
  const socketRef = useRef(null)
  const chatIdRef = useRef(null)

// Determine if the current user is the store or the customer
  const isStoreView = !!store && store.store_name === storeName
  const isUserView = !!user && user.username === userName

// Get the token based on who is viewing
  const token = isStoreView ? store?.token : user?.token

useEffect(() => {
    if (!isAuthenticated) {
      toast({
        variant: "destructive",
        title: "Authentication required",
        description: "Please log in to view messages.",
      })
      router.push("/login")
      return
    }

if (!isStoreView && !isUserView) {
      toast({
        variant: "destructive",
        title: "Access denied",
        description: "You don't have permission to view these messages.",
      })
      router.push("/")
      return
    }

// Initialize socket connection
    socketRef.current = io("http://localhost:3001", {
      withCredentials: true,
    })

// Fetch messages
    const fetchMessages = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/msg/get/${storeName}_and_${userName}`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        })

if (!response.ok) {
          throw new Error("Failed to fetch messages")
        }

const data = await response.json()
        setMessages(data)

// Get chat ID from the first message if available
        if (data.length > 0) {
          chatIdRef.current = data[0].chat_id

// Join the chat room
          socketRef.current.emit("join_chat", chatIdRef.current)
        }
      } catch (error) {
        console.error("Error fetching messages:", error)
        toast({
          variant: "destructive",
          title: "Error",
          description: "Failed to load messages. Please try again later.",
        })
      } finally {
        setLoading(false)
      }
    }

fetchMessages()

// Set up socket event listeners
    socketRef.current.on("receive_message", (newMessage) => {
      setMessages((prev) => [...prev, newMessage])
    })

return () => {
      // Clean up socket connection
      if (socketRef.current) {
        socketRef.current.disconnect()
      }
    }
  }, [isAuthenticated, isStoreView, isUserView, router, storeName, token, toast, userName])

// Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const sendMessage = async (e) => {
    e.preventDefault()

if (!message.trim()) return

setSending(true)

try {
      const response = await fetch(`http://localhost:3001/api/msg/add/${storeName}_and_${userName}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ msg: message }),
      })

if (!response.ok) {
        throw new Error("Failed to send message")
      }

// If we have a chat ID, emit the message via socket
      if (chatIdRef.current) {
        socketRef.current.emit("send_message", {
          chatId: chatIdRef.current,
          message,
          token,
        })
      }

setMessage("")
    } catch (error) {
      console.error("Error sending message:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to send message. Please try again.",
      })
    } finally {
      setSending(false)
    }
  }

if (loading) {
    return (
      <div className="flex flex-col h-[calc(100vh-12rem)] animate-pulse">
        <div className="h-12 bg-muted rounded-t-lg" />
        <div className="flex-1 p-4 space-y-4">
          {[...Array(5)].map((_, i) => (
            <div key={i} className={`h-12 bg-muted rounded-lg w-2/3 ${i % 2 === 0 ? "ml-auto" : ""}`} />
          ))}
        </div>
        <div className="h-14 bg-muted rounded-b-lg" />
      </div>
    )
  }

return (
    <div className="flex flex-col h-[calc(100vh-12rem)] border rounded-lg">
      <div className="p-4 border-b bg-muted">
        <h2 className="font-bold">{isStoreView ? `Chat with ${userName}` : `Chat with ${storeName}`}</h2>
      </div>

<div className="flex-1 p-4 overflow-y-auto">
        {messages.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <p className="text-muted-foreground">No messages yet. Start the conversation!</p>
          </div>
        ) : (
          <div className="space-y-4">
            {messages.map((msg) => (
              <div key={msg.msg_id} className={`flex ${isStoreView ? "justify-start" : "justify-end"}`}>
                <div
                  className={`max-w-[80%] p-3 rounded-lg ${
                    isStoreView
                      ? "bg-muted text-foreground rounded-tl-none"
                      : "bg-primary text-primary-foreground rounded-tr-none"
                  }`}
                >
                  <p>{msg.message || msg.msg}</p>
                  <p className="text-xs opacity-70 mt-1">{new Date(msg.timestamp).toLocaleTimeString()}</p>
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>
        )}
      </div>

<form onSubmit={sendMessage} className="p-4 border-t flex gap-2">
        <Input
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message..."
          disabled={sending}
        />
        <Button type="submit" disabled={sending || !message.trim()}>
          {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]javascriptreact:file="app/messages/[store]/page.jsx"
"use client"

import { useParams } from "next/navigation"
import MessageChat from "@/components/MessageChat"
import { useAuth } from "@/contexts/AuthContext"

export default function MessagePage() {
  const params = useParams()
  const { user } = useAuth()
  const storeName = params.store

return (
    <div className="container px-4 py-8 mx-auto">
      <h1 className="text-3xl font-bold mb-6">Messages</h1>

{user && storeName && <MessageChat storeName={storeName} userName={user.username} />}
    </div>
  )
}

[V0_FILE]javascriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,jsx}",
    "./components/**/*.{js,jsx}",
    "./app/**/*.{js,jsx}",
    "./src/**/*.{js,jsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    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)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
</article></body></html>