[V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@vercel/blob": "2.0.0", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/cloud-storage.ts" isEdit="true" isMerged="true" export const cloudStorage = { async getProducts() { try { console.log("[v0] Fetching products from Blob storage via API...") const response = await fetch("/api/products") if (!response.ok) { throw new Error(`Failed to fetch products: ${response.status}`) } const products = await response.json() console.log("[v0] Successfully fetched products from Blob:", products.length) return products } catch (error) { console.error("Failed to fetch products:", error) return [] } }, async saveProducts(products: any[]) { try { console.log("[v0] Saving products to Blob storage:", products.length) const response = await fetch("/api/products", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(products), }) if (!response.ok) { throw new Error(`Save failed with status: ${response.status}`) } console.log("[v0] Products saved to Blob successfully") return await response.json() } catch (error) { console.error("Failed to save products:", error) throw error } }, async getOrders() { try { console.log("[v0] Fetching orders from Blob storage via API...") const response = await fetch("/api/orders") if (!response.ok) { throw new Error(`Failed to fetch orders: ${response.status}`) } const orders = await response.json() console.log("[v0] Successfully fetched orders from Blob:", orders.length) return orders } catch (error) { console.error("Failed to fetch orders:", error) return [] } }, async saveOrders(orders: any[]) { try { console.log("[v0] Saving orders to Blob storage:", orders.length) const response = await fetch("/api/orders", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(orders), }) if (!response.ok) { throw new Error(`Save failed with status: ${response.status}`) } console.log("[v0] Orders saved to Blob successfully") return await response.json() } catch (error) { console.error("Failed to save orders:", error) throw error } }, async getCustomers() { try { console.log("[v0] Fetching customers from Blob storage via API...") const response = await fetch("/api/customers") if (!response.ok) { throw new Error(`Failed to fetch customers: ${response.status}`) } const customers = await response.json() console.log("[v0] Successfully fetched customers from Blob:", customers.length) return customers || [] } catch (error) { console.error("[v0] Failed to fetch customers:", error) return [] } }, async saveCustomer(customer: any) { try { console.log("[v0] Saving customer to Blob storage:", customer.name) const response = await fetch("/api/customers", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(customer), }) if (!response.ok) { throw new Error(`Save failed with status: ${response.status}`) } console.log("[v0] Customer saved to Blob successfully") return await response.json() } catch (error) { console.error("Failed to save customer:", error) throw error } }, } [V0_FILE]typescriptreact:file="components/order-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cloudStorage } from "@/lib/cloud-storage" interface Order { id: string at: string personName: string email: string note: string adminNote: string items: Array<{ sku: string name: string qty: number price: number }> total: number status: "open" | "completed" } export function OrderManagement() { const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) const [selectedOrder, setSelectedOrder] = useState(null) const [adminNote, setAdminNote] = useState("") const [notesDialogOpen, setNotesDialogOpen] = useState(false) useEffect(() => { loadOrders() }, []) const loadOrders = async () => { try { setLoading(true) const data = await cloudStorage.getOrders() setOrders(data) } catch (err) { console.error("Failed to load orders:", err) } finally { setLoading(false) } } const saveOrders = async (updatedOrders: Order[]) => { try { await cloudStorage.saveOrders(updatedOrders) setOrders(updatedOrders) } catch (err) { console.error("Failed to save orders:", err) } } const toggleOrderStatus = async (orderId: string) => { const updatedOrders = orders.map((order) => order.id === orderId ? { ...order, status: order.status === "completed" ? "open" : "completed" } : order, ) await saveOrders(updatedOrders) } const deleteOrder = async (orderId: string) => { const updatedOrders = orders.filter((order) => order.id !== orderId) await saveOrders(updatedOrders) } const openNotesDialog = (order: Order) => { setSelectedOrder(order) setAdminNote(order.adminNote || "") setNotesDialogOpen(true) } const saveAdminNote = async () => { if (!selectedOrder) return const updatedOrders = orders.map((order) => order.id === selectedOrder.id ? { ...order, adminNote: adminNote } : order, ) await saveOrders(updatedOrders) setNotesDialogOpen(false) setSelectedOrder(null) setAdminNote("") } const openOrders = orders.filter((order) => order.status === "open") const completedOrders = orders.filter((order) => order.status === "completed") const renderOrderTable = (ordersList: Order[]) => (

{ordersList.length === 0 ? ( ) : ( ordersList.map((order) => { const time = new Date(order.at).toLocaleString() const itemsText = order.items.map((item) => `${item.name} (${item.qty}×${item.price})`).join(", ") const notePreview = order.note.length > 40 ? order.note.slice(0, 37) + "..." : order.note || "—" return ( ) }) )}

Time	Customer	Email	Items	Total	Note	Status	Actions
No orders yet.
{time}	{order.personName \|\| "—"}	{order.email}	{itemsText}	{order.total} pts	{notePreview}	{order.status === "completed" ? "Completed" : "Open"}

) if (loading) { return

Loading orders...

} return (

To-Do Orders ({openOrders.length}) Completed Orders ({completedOrders.length})

To-Do Orders

{renderOrderTable(openOrders)}

Completed Orders

{renderOrderTable(completedOrders)}

{/* Order Notes Dialog */}

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This