[V0_FILE]typescriptreact:file="app/san-pham/[slug]/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { notFound } from "next/navigation" import ProductPageClient from "./ProductPageClient" interface ProductPageProps { params: { slug: string } } interface Product { id: string name: string description: string longDescription: string price: string originalPrice?: string images: string[] features: string[] } // This data would normally come from a database or API const products: { [key: string]: Product } = { "combo-6-anh": { id: "combo-6-anh", name: "Combo 6 ảnh", description: "Bộ 6 ảnh nam châm kích thước 5x7cm", longDescription: "Combo 6 ảnh nam châm với kích thước 5x7cm, in màu sắc nét, bền đẹp. Bạn có thể gửi 6 hình ảnh khác nhau hoặc 6 bản sao của cùng một hình ảnh. Đây là lựa chọn hoàn hảo để trang trí tủ lạnh hoặc làm quà tặng cho người thân và bạn bè.", price: "99.000đ", originalPrice: "120.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Kích thước: 5x7cm", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 1-2 ngày", "Giao hàng toàn quốc", ], }, "combo-12-anh": { id: "combo-12-anh", name: "Combo 12 ảnh", description: "Bộ 12 ảnh nam châm kích thước 5x7cm", longDescription: "Combo 12 ảnh nam châm với kích thước 5x7cm, in màu sắc nét, bền đẹp. Bạn có thể gửi 12 hình ảnh khác nhau hoặc nhiều bản sao của cùng một hình ảnh. Đây là lựa chọn hoàn hảo để trang trí tủ lạnh hoặc làm quà tặng cho người thân và bạn bè.", price: "179.000đ", originalPrice: "220.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Kích thước: 5x7cm", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 1-2 ngày", "Giao hàng toàn quốc", ], }, "anh-le": { id: "anh-le", name: "Ảnh nam châm lẻ", description: "Ảnh nam châm đơn kích thước 5x7cm", longDescription: "Ảnh nam châm lẻ với kích thước 5x7cm, in màu sắc nét, bền đẹp. Bạn có thể đặt từng chiếc một theo nhu cầu. Đây là lựa chọn hoàn hảo để trang trí tủ lạnh hoặc làm quà tặng nhỏ xinh cho người thân và bạn bè.", price: "19.000đ", originalPrice: "25.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Kích thước: 5x7cm", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 1-2 ngày", "Giao hàng toàn quốc", ], }, "combo-anh-lon": { id: "combo-anh-lon", name: "Combo ảnh lớn", description: "Bộ 4 ảnh nam châm kích thước 7x10cm", longDescription: "Combo 4 ảnh nam châm kích thước lớn 7x10cm, in màu sắc nét, bền đẹp. Phù hợp để trang trí không gian lớn hơn hoặc làm quà tặng đặc biệt.", price: "129.000đ", originalPrice: "150.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Kích thước: 7x10cm", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 1-2 ngày", "Giao hàng toàn quốc", ], }, "anh-trai-tim": { id: "anh-trai-tim", name: "Ảnh nam châm hình trái tim", description: "Ảnh nam châm hình trái tim kích thước 7x7cm", longDescription: "Ảnh nam châm hình trái tim độc đáo, kích thước 7x7cm. Món quà ý nghĩa dành tặng người thân yêu trong các dịp đặc biệt.", price: "29.000đ", originalPrice: "35.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Kích thước: 7x7cm", "Hình dạng: Trái tim", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 1-2 ngày", "Giao hàng toàn quốc", ], }, "combo-qua-tang": { id: "combo-qua-tang", name: "Combo quà tặng", description: "Hộp quà tặng kèm 8 ảnh nam châm", longDescription: "Bộ quà tặng đặc biệt bao gồm hộp đựng sang trọng và 8 ảnh nam châm kích thước 5x7cm. Món quà hoàn hảo cho các dịp sinh nhật, kỷ niệm hoặc lễ tết.", price: "199.000đ", originalPrice: "250.000đ", images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], features: [ "Bao gồm: Hộp quà + 8 ảnh nam châm", "Kích thước ảnh: 5x7cm", "Chất liệu: Nam châm cao cấp", "In màu sắc nét, không phai", "Bám dính tốt", "Thời gian sản xuất: 2-3 ngày", "Giao hàng toàn quốc", ], }, } // Generate static params for all known product slugs export function generateStaticParams() { return Object.keys(products).map((slug) => ({ slug: slug, })) } export default function ProductPage({ params }: ProductPageProps) { const product = products[params.slug] // If product doesn't exist, show 404 page if (!product) { notFound() } return } [V0_FILE]typescriptreact:file="app/danh-gia/page.tsx" isMerged="true" import Image from "next/image" import { Button } from "@/components/ui/button" export default function ReviewsPage() { const reviews = [ { id: 1, name: "Nguyễn Văn A", avatar: "/placeholder.svg?height=100&width=100", rating: 5, date: "15/03/2023", content: "Ảnh in rất đẹp, màu sắc tươi sáng và nam châm bám dính tốt. Đóng gói cẩn thận, giao hàng nhanh. Rất hài lòng với sản phẩm và dịch vụ!", images: ["/placeholder.svg?height=200&width=200", "/placeholder.svg?height=200&width=200"], }, { id: 2, name: "Trần Thị B", avatar: "/placeholder.svg?height=100&width=100", rating: 5, date: "02/04/2023", content: "Mình đặt combo 12 ảnh để trang trí tủ lạnh, hình ảnh rõ nét, màu sắc đẹp. Shop tư vấn nhiệt tình, giao hàng đúng hẹn. Sẽ ủng hộ shop dài dài!", images: [ "/placeholder.svg?height=200&width=200", "/placeholder.svg?height=200&width=200", "/placeholder.svg?height=200&width=200", ], }, { id: 3, name: "Lê Văn C", avatar: "/placeholder.svg?height=100&width=100", rating: 4, date: "18/05/2023", content: "Sản phẩm chất lượng tốt, đóng gói cẩn thận. Chỉ tiếc là giao hàng hơi chậm một chút. Nhưng nhìn chung vẫn rất hài lòng với sản phẩm.", images: [], }, { id: 4, name: "Phạm Thị D", avatar: "/placeholder.svg?height=100&width=100", rating: 5, date: "07/06/2023", content: "Mình đặt làm quà tặng sinh nhật cho bạn, bạn rất thích. Ảnh in đẹp, sắc nét, nam châm bám dính tốt. Shop tư vấn nhiệt tình, sẽ ủng hộ lần sau!", images: ["/placeholder.svg?height=200&width=200"], }, { id: 5, name: "Hoàng Văn E", avatar: "/placeholder.svg?height=100&width=100", rating: 5, date: "22/07/2023", content: "Đặt combo 6 ảnh cho gia đình, ai cũng thích. Chất lượng in ấn tốt, màu sắc tươi sáng. Sẽ giới thiệu cho bạn bè!", images: ["/placeholder.svg?height=200&width=200", "/placeholder.svg?height=200&width=200"], }, ] return (

Đánh giá từ khách hàng

4.8/5

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

Dựa trên 128 đánh giá

{[5, 4, 3, 2, 1].map((rating) => (

{rating} sao

{rating === 5 ? "75%" : rating === 4 ? "20%" : rating === 3 ? "5%" : "0%"}

))}

{reviews.map((review) => (

{review.name}

{review.date}

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

{review.content}

{review.images.length > 0 && (

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

))}

)}

))}

) } [V0_FILE]typescriptreact:file="app/thanh-toan/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Textarea } from "@/components/ui/textarea" import { Check } from "lucide-react" export default function CheckoutPage() { const [paymentMethod, setPaymentMethod] = useState("cod") const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const cartItems = [ { id: 1, name: "Combo 6 ảnh", price: 99000, quantity: 1, image: "/placeholder.svg?height=100&width=100", }, { id: 2, name: "Ảnh nam châm lẻ", price: 19000, quantity: 2, image: "/placeholder.svg?height=100&width=100", }, ] const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0) const shipping = 30000 const total = subtotal + shipping const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setIsSubmitted(true) }, 2000) } if (isSubmitted) { return (

Đặt hàng thành công!

Cảm ơn bạn đã đặt hàng. Chúng tôi đã gửi email xác nhận đơn hàng đến địa chỉ email của bạn.

Mã đơn hàng: #ANACHA12345

) } return (

Thanh toán

Thông tin giao hàng

Họ

Tên

Số điện thoại

Địa chỉ

Thành phố

Quận/Huyện

Phương thức thanh toán

Thanh toán khi nhận hàng (COD)

Chuyển khoản ngân hàng

Ví MoMo

{paymentMethod === "bank" && (

Thông tin chuyển khoản

Ngân hàng: Vietcombank
Số tài khoản: 1234567890
Chủ tài khoản: CÔNG TY ANACHA
Nội dung: [Họ tên] - [Số điện thoại]

)}

Ghi chú đơn hàng

</div>
            </div>

<div className="mt-6 lg:hidden">
              <Button
                type="submit"
                className="w-full bg-purple-600 hover:bg-purple-700 h-12 text-lg"
                disabled={isSubmitting}
              >
                {isSubmitting ? "Đang xử lý..." : "Hoàn tất đặt hàng"}
              </Button>
            </div>
          </form>
        </div>

<div className="divide-y">
                {cartItems.map((item) => (
                  <div key={item.id} className="py-3 flex items-center">
                    <div className="relative w-16 h-16 rounded-md overflow-hidden">
                      <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                    </div>
                    <div className="ml-3 flex-1">
                      <h3 className="font-medium text-sm">{item.name}</h3>
                      <p className="text-gray-500 text-xs">SL: {item.quantity}</p>
                    </div>
                    <div className="text-right font-medium text-sm">
                      {(item.price * item.quantity).toLocaleString()}đ
                    </div>
                  </div>
                ))}
              </div>

<div className="mt-4 space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Tạm tính</span>
                  <span>{subtotal.toLocaleString()}đ</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Phí vận chuyển</span>
                  <span>{shipping.toLocaleString()}đ</span>
                </div>
                <div className="border-t pt-2 mt-2">
                  <div className="flex justify-between font-semibold">
                    <span>Tổng cộng</span>
                    <span className="text-purple-600">{total.toLocaleString()}đ</span>
                  </div>
                </div>
              </div>

<div className="hidden lg:block mt-6">
                <Button
                  type="submit"
                  form="checkout-form"
                  className="w-full bg-purple-600 hover:bg-purple-700 h-12 text-lg"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? "Đang xử lý..." : "Hoàn tất đặt hàng"}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  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")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="app/not-found.tsx" isQuickEdit="true" isMerged="true"
// Add a not-found page to handle 404 errors
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    <div className="container mx-auto px-4 md:px-6 py-24 flex flex-col items-center justify-center text-center">
      <h1 className="text-6xl font-bold mb-4">404</h1>
      <h2 className="text-2xl font-semibold mb-6">Không tìm thấy trang</h2>
      <p className="text-gray-600 mb-8 max-w-md">Trang bạn đang tìm kiếm không tồn tại hoặc đã bị di chuyển.</p>
      <div className="flex gap-4">
        <Link href="/">
          <Button className="bg-purple-600 hover:bg-purple-700">Quay lại trang chủ</Button>
        </Link>
        <Link href="/san-pham">
          <Button variant="outline">Xem sản phẩm</Button>
        </Link>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

if (!process.env.NEXT_PUBLIC_SUPABASE_URL) {
  throw new Error("Missing env.NEXT_PUBLIC_SUPABASE_URL")
}
if (!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
  throw new Error("Missing env.NEXT_PUBLIC_SUPABASE_ANON_KEY")
}

export const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)

[V0_FILE]typescriptreact:file="contexts/cart-context.tsx" isMerged="true"
"use client"

import type React from "react"

import { createContext, useContext, useReducer, type ReactNode } from "react"

interface CartItem {
  id: number
  name: string
  price: number
  quantity: number
  image: string
}

interface CartState {
  items: CartItem[]
  total: number
}

type CartAction =
  | { type: "ADD_ITEM"; payload: CartItem }
  | { type: "REMOVE_ITEM"; payload: number }
  | { type: "UPDATE_QUANTITY"; payload: { id: number; quantity: number } }
  | { type: "CLEAR_CART" }

const CartContext = createContext<
  | {
      state: CartState
      dispatch: React.Dispatch<CartAction>
    }
  | undefined
>(undefined)

const cartReducer = (state: CartState, action: CartAction): CartState => {
  switch (action.type) {
    case "ADD_ITEM": {
      const existingItem = state.items.find((item) => item.id === action.payload.id)
      if (existingItem) {
        return {
          ...state,
          items: state.items.map((item) =>
            item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item,
          ),
          total: state.total + action.payload.price,
        }
      }
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      }
    }
    case "REMOVE_ITEM":
      const itemToRemove = state.items.find((item) => item.id === action.payload)
      return {
        ...state,
        items: state.items.filter((item) => item.id !== action.payload),
        total: state.total - (itemToRemove ? itemToRemove.price * itemToRemove.quantity : 0),
      }
    case "UPDATE_QUANTITY": {
      const item = state.items.find((item) => item.id === action.payload.id)
      if (!item) return state
      const quantityDiff = action.payload.quantity - item.quantity
      return {
        ...state,
        items: state.items.map((item) =>
          item.id === action.payload.id ? { ...item, quantity: action.payload.quantity } : item,
        ),
        total: state.total + item.price * quantityDiff,
      }
    }
    case "CLEAR_CART":
      return {
        items: [],
        total: 0,
      }
    default:
      return state
  }
}

export function CartProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, {
    items: [],
    total: 0,
  })

return <CartContext.Provider value={{ state, dispatch }}>{children}</CartContext.Provider>
}

export function useCart() {
  const context = useContext(CartContext)
  if (context === undefined) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="app/admin/products/page.tsx" isMerged="true"
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Edit, Plus, Trash } from "lucide-react"

export default async function ProductsPage() {
  const supabase = createServerComponentClient({ cookies })

// Fetch products from Supabase
  const { data: products } = await supabase.from("products").select("*").order("created_at", { ascending: false })

return (
    <div className="container mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Quản lý sản phẩm</h1>
        <Link href="/admin/products/new">
          <Button className="bg-purple-600 hover:bg-purple-700">
            <Plus className="h-4 w-4 mr-2" /> Thêm sản phẩm
          </Button>
        </Link>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Danh sách sản phẩm</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {products?.map((product) => (
              <div key={product.id} className="border rounded-lg overflow-hidden bg-white">
                <div className="relative h-48 w-full">
                  <Image
                    src={product.image_url || "/placeholder.svg?height=400&width=600"}
                    alt={product.name}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-lg">{product.name}</h3>
                  <p className="text-gray-500 text-sm mb-2">{product.description}</p>
                  <p className="font-bold text-purple-600 mb-4">{product.price.toLocaleString()}đ</p>
                  <div className="flex justify-between">
                    <Link href={`/admin/products/${product.id}`}>
                      <Button variant="outline" size="sm">
                        <Edit className="h-4 w-4 mr-1" /> Sửa
                      </Button>
                    </Link>
                    <Button variant="destructive" size="sm">
                      <Trash className="h-4 w-4 mr-1" /> Xóa
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>

{(!products || products.length === 0) && (
            <div className="text-center py-12">
              <p className="text-gray-500 mb-4">Chưa có sản phẩm nào</p>
              <Link href="/admin/products/new">
                <Button className="bg-purple-600 hover:bg-purple-700">
                  <Plus className="h-4 w-4 mr-2" /> Thêm sản phẩm đầu tiên
                </Button>
              </Link>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/products/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Upload, X } from "lucide-react"

export default function NewProductPage() {
  const router = useRouter()
  const supabase = createClientComponentClient()

const [formData, setFormData] = useState({
    name: "",
    slug: "",
    description: "",
    long_description: "",
    price: "",
    original_price: "",
    features: "",
  })

const [imageFile, setImageFile] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))

// Auto-generate slug from name
    if (name === "name") {
      const slug = value
        .toLowerCase()
        .replace(/[^\w\s-]/g, "")
        .replace(/\s+/g, "-")

setFormData((prev) => ({
        ...prev,
        slug,
      }))
    }
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0]
      setImageFile(file)

// Create preview
      const reader = new FileReader()
      reader.onloadend = () => {
        setImagePreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const removeImage = () => {
    setImageFile(null)
    setImagePreview(null)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setError(null)

try {
      // Upload image to Supabase Storage if provided
      let imageUrl = null
      if (imageFile) {
        const fileExt = imageFile.name.split(".").pop()
        const fileName = `${Math.random().toString(36).substring(2, 15)}.${fileExt}`

const { data: uploadData, error: uploadError } = await supabase.storage
          .from("product-images")
          .upload(fileName, imageFile)

if (uploadError) {
          throw new Error("Lỗi khi tải ảnh lên: " + uploadError.message)
        }

// Get public URL
        const { data: urlData } = await supabase.storage.from("product-images").getPublicUrl(fileName)

imageUrl = urlData.publicUrl
      }

// Parse features from text to array
      const featuresArray = formData.features
        .split("\n")
        .map((feature) => feature.trim())
        .filter((feature) => feature.length > 0)

// Insert product into database
      const { error: insertError } = await supabase.from("products").insert({
        name: formData.name,
        slug: formData.slug,
        description: formData.description,
        long_description: formData.long_description,
        price: Number.parseFloat(formData.price),
        original_price: formData.original_price ? Number.parseFloat(formData.original_price) : null,
        features: featuresArray,
        image_url: imageUrl,
      })

if (insertError) {
        throw new Error("Lỗi khi thêm sản phẩm: " + insertError.message)
      }

// Redirect to products page
      router.push("/admin/products")
      router.refresh()
    } catch (error) {
      if (error instanceof Error) {
        setError(error.message)
      } else {
        setError("Đã xảy ra lỗi khi thêm sản phẩm")
      }
      setIsSubmitting(false)
    }
  }

return (
    <div className="container mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Thêm sản phẩm mới</h1>
        <Button variant="outline" onClick={() => router.back()}>
          Quay lại
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Thông tin sản phẩm</CardTitle>
        </CardHeader>
        <CardContent>
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">{error}</div>
          )}

<div>
                  <Label htmlFor="slug">Slug (URL)</Label>
                  <Input id="slug" name="slug" value={formData.slug} onChange={handleInputChange} required />
                  <p className="text-xs text-gray-500 mt-1">URL sẽ là: /san-pham/{formData.slug}</p>
                </div>

<div>
                  <Label htmlFor="image">Hình ảnh sản phẩm</Label>
                  {!imagePreview ? (
                    <div
                      className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50 transition-colors"
                      onClick={() => document.getElementById("image")?.click()}
                    >
                      <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                      <p className="text-sm text-gray-500">Nhấp để tải ảnh lên</p>
                      <Input
                        id="image"
                        name="image"
                        type="file"
                        accept="image/*"
                        onChange={handleImageChange}
                        className="hidden"
                      />
                    </div>
                  ) : (
                    <div className="relative">
                      <img
                        src={imagePreview || "/placeholder.svg"}
                        alt="Preview"
                        className="w-full h-40 object-cover rounded-lg"
                      />
                      <button
                        type="button"
                        className="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 shadow-md"
                        onClick={removeImage}
                      >
                        <X className="h-4 w-4" />
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </div>

<div className="flex justify-end">
              <Button type="submit" className="bg-purple-600 hover:bg-purple-700" disabled={isSubmitting}>
                {isSubmitting ? "Đang lưu..." : "Lưu sản phẩm"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/orders/page.tsx" isMerged="true"
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Eye } from "lucide-react"

export default async function OrdersPage() {
  const supabase = createServerComponentClient({ cookies })

// Fetch orders from Supabase
  const { data: orders } = await supabase.from("orders").select("*").order("created_at", { ascending: false })

return (
    <div className="container mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Quản lý đơn hàng</h1>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Danh sách đơn hàng</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4">Mã đơn</th>
                  <th className="text-left py-3 px-4">Khách hàng</th>
                  <th className="text-left py-3 px-4">Ngày đặt</th>
                  <th className="text-left py-3 px-4">Tổng tiền</th>
                  <th className="text-left py-3 px-4">Trạng thái</th>
                  <th className="text-right py-3 px-4">Thao tác</th>
                </tr>
              </thead>
              <tbody>
                {orders?.map((order) => (
                  <tr key={order.id} className="border-b hover:bg-gray-50">
                    <td className="py-3 px-4">#{order.id}</td>
                    <td className="py-3 px-4">
                      <div>{order.customer_name}</div>
                      <div className="text-sm text-gray-500">{order.customer_phone}</div>
                    </td>
                    <td className="py-3 px-4">{new Date(order.created_at).toLocaleDateString("vi-VN")}</td>
                    <td className="py-3 px-4">{order.total_amount?.toLocaleString()}đ</td>
                    <td className="py-3 px-4">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          order.status === "completed"
                            ? "bg-green-100 text-green-800"
                            : order.status === "processing"
                              ? "bg-blue-100 text-blue-800"
                              : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {order.status === "completed"
                          ? "Hoàn thành"
                          : order.status === "processing"
                            ? "Đang xử lý"
                            : "Mới"}
                      </span>
                    </td>
                    <td className="py-3 px-4 text-right">
                      <Link href={`/admin/orders/${order.id}`}>
                        <Button variant="outline" size="sm">
                          <Eye className="h-4 w-4 mr-1" /> Chi tiết
                        </Button>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

{(!orders || orders.length === 0) && (
              <div className="text-center py-12">
                <p className="text-gray-500">Chưa có đơn hàng nào</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/orders/[id]/page.tsx" isMerged="true"
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import Link from "next/link"
import Image from "next/image"
import { notFound } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Printer } from "lucide-react"

interface OrderPageProps {
  params: {
    id: string
  }
}

export default async function OrderPage({ params }: OrderPageProps) {
  const supabase = createServerComponentClient({ cookies })

// Fetch order details
  const { data: order } = await supabase.from("orders").select("*").eq("id", params.id).single()

if (!order) {
    notFound()
  }

// Fetch order items
  const { data: orderItems } = await supabase
    .from("order_items")
    .select("*, product:products(*)")
    .eq("order_id", order.id)

// Fetch order uploads
  const { data: uploads } = await supabase.from("uploads").select("*").eq("order_id", order.id)

return (
    <div className="container mx-auto">
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center gap-2">
          <Link href="/admin/orders">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4 mr-1" /> Quay lại
            </Button>
          </Link>
          <h1 className="text-2xl font-bold">Chi tiết đơn hàng #{order.id}</h1>
        </div>
        <Button variant="outline" size="sm">
          <Printer className="h-4 w-4 mr-1" /> In đơn hàng
        </Button>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Thông tin đơn hàng</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h3 className="font-medium text-gray-500">Mã đơn hàng</h3>
                  <p>#{order.id}</p>
                </div>
                <div>
                  <h3 className="font-medium text-gray-500">Ngày đặt hàng</h3>
                  <p>{new Date(order.created_at).toLocaleDateString("vi-VN")}</p>
                </div>
                <div>
                  <h3 className="font-medium text-gray-500">Trạng thái</h3>
                  <span
                    className={`px-2 py-1 rounded-full text-xs ${
                      order.status === "completed"
                        ? "bg-green-100 text-green-800"
                        : order.status === "processing"
                          ? "bg-blue-100 text-blue-800"
                          : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {order.status === "completed" ? "Hoàn thành" : order.status === "processing" ? "Đang xử lý" : "Mới"}
                  </span>
                </div>
                <div>
                  <h3 className="font-medium text-gray-500">Phương thức thanh toán</h3>
                  <p>{order.payment_method === "cod" ? "Thanh toán khi nhận hàng" : order.payment_method}</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Sản phẩm</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {orderItems?.map((item) => (
                  <div key={item.id} className="flex items-center border-b pb-4">
                    <div className="relative w-16 h-16 rounded-md overflow-hidden">
                      <Image
                        src={item.product?.image_url || "/placeholder.svg?height=100&width=100"}
                        alt={item.product?.name || "Product"}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div className="ml-4 flex-1">
                      <h3 className="font-medium">{item.product?.name}</h3>
                      <p className="text-sm text-gray-500">
                        {item.quantity} x {item.price?.toLocaleString()}đ
                      </p>
                    </div>
                    <div className="text-right font-medium">
                      {(item.quantity * (item.price || 0)).toLocaleString()}đ
                    </div>
                  </div>
                ))}
              </div>

<div className="mt-4 space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Tạm tính</span>
                  <span>{order.subtotal?.toLocaleString()}đ</span>
                </div>
                {order.discount > 0 && (
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Giảm giá</span>
                    <span>-{order.discount?.toLocaleString()}đ</span>
                  </div>
                )}
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Phí vận chuyển</span>
                  <span>{order.shipping_fee?.toLocaleString()}đ</span>
                </div>
                <div className="border-t pt-2 mt-2">
                  <div className="flex justify-between font-semibold">
                    <span>Tổng cộng</span>
                    <span className="text-purple-600">{order.total_amount?.toLocaleString()}đ</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{uploads && uploads.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Ảnh đã tải lên</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                  {uploads.map((upload) => (
                    <div key={upload.id} className="relative group">
                      <div className="relative h-24 rounded-md overflow-hidden">
                        <Image
                          src={upload.file_url || "/placeholder.svg?height=100&width=100"}
                          alt={`Upload ${upload.id}`}
                          fill
                          className="object-cover"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Thông tin khách hàng</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-medium text-gray-500">Tên khách hàng</h3>
                  <p>{order.customer_name}</p>
                </div>
                <div>
                  <h3 className="font-medium text-gray-500">Số điện thoại</h3>
                  <p>{order.customer_phone}</p>
                </div>
                <div>
                  <h3 className="font-medium text-gray-500">Email</h3>
                  <p>{order.customer_email || "Không có"}</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Địa chỉ giao hàng</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{order.shipping_address}</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Ghi chú</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{order.notes || "Không có ghi chú"}</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Cập nhật trạng thái</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <Button className="w-full bg-blue-500 hover:bg-blue-600">Đánh dấu đang xử lý</Button>
                <Button className="w-full bg-green-500 hover:bg-green-600">Đánh dấu hoàn thành</Button>
                <Button className="w-full" variant="destructive">
                  Hủy đơn hàng
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/orders/route.ts" isMerged="true"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const { customerName, customerPhone, customerEmail, shippingAddress, notes, productType, totalAmount } =
      await request.json()

const supabase = createRouteHandlerClient({ cookies })

// Create order
    const { data, error } = await supabase
      .from("orders")
      .insert({
        customer_name: customerName,
        customer_phone: customerPhone,
        customer_email: customerEmail || null,
        shipping_address: shippingAddress,
        notes: notes || null,
        status: "pending",
        payment_method: "cod",
        total_amount: totalAmount,
        product_type: productType,
      })
      .select()

if (error) {
      console.error("Error creating order:", error)
      return NextResponse.json({ error: "Failed to create order" }, { status: 500 })
    }

return NextResponse.json({
      message: "Order created successfully",
      orderId: data[0].id,
    })
  } catch (error) {
    console.error("Order creation error:", error)
    return NextResponse.json({ error: "Failed to create order" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { LayoutDashboard, Package, ShoppingCart, Upload, Settings, LogOut } from "lucide-react"

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader>
            <div className="p-2">
              <Link href="/admin/dashboard" className="flex items-center gap-2">
                <span className="text-xl font-bold">ANACHA Admin</span>
              </Link>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/admin/dashboard">
                    <LayoutDashboard className="h-4 w-4" />
                    <span>Bảng điều khiển</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/admin/products">
                    <Package className="h-4 w-4" />
                    <span>Sản phẩm</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/admin/orders">
                    <ShoppingCart className="h-4 w-4" />
                    <span>Đơn hàng</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/admin/uploads">
                    <Upload className="h-4 w-4" />
                    <span>Ảnh tải lên</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/admin/settings">
                    <Settings className="h-4 w-4" />
                    <span>Cài đặt</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <button
                    onClick={async () => {
                      await fetch("/api/admin/logout", { method: "POST" })
                      window.location.href = "/admin/login"
                    }}
                  >
                    <LogOut className="h-4 w-4" />
                    <span>Đăng xuất</span>
                  </button>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
        </Sidebar>
        <div className="flex-1 bg-gray-50">
          <div className="p-4 flex items-center justify-between border-b bg-white">
            <SidebarTrigger />
            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-500">Admin</span>
            </div>
          </div>
          <main className="p-4">{children}</main>
        </div>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart, Package, ShoppingCart, Users } from "lucide-react"

// Check if Supabase environment variables are available
const hasSupabaseCredentials = process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

// Only import and use Supabase if credentials are available
let createServerComponentClient: any
let cookies: any
let redirect: any

if (hasSupabaseCredentials) {
  // Dynamic import to avoid errors when env vars are missing
  const supabaseImports = require("@supabase/auth-helpers-nextjs")
  const nextImports = require("next/headers")
  const navigationImports = require("next/navigation")
  createServerComponentClient = supabaseImports.createServerComponentClient
  cookies = nextImports.cookies
  redirect = navigationImports.redirect
}

export default async function AdminDashboard() {
  // If Supabase credentials are missing, show a configuration message
  if (!hasSupabaseCredentials) {
    return (
      <div className="container mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <CardTitle>Cấu hình chưa hoàn tất</CardTitle>
            <CardDescription>Biến môi trường Supabase chưa được cấu hình</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4">Vui lòng thêm các biến môi trường sau vào dự án của bạn:</p>
            <div className="bg-gray-100 p-4 rounded-md mb-4">
              <code className="text-sm">
                NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
                <br />
                NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
              </code>
            </div>
            <p className="text-sm text-gray-500">
              Sau khi cấu hình, hãy khởi động lại ứng dụng để áp dụng các thay đổi.
            </p>
          </CardContent>
        </Card>
      </div>
    )
  }

try {
    const supabase = createServerComponentClient({ cookies })

const {
      data: { session },
    } = await supabase.auth.getSession()

if (!session) {
      redirect("/admin/login")
    }

// Fetch summary data
    const { data: products } = await supabase.from("products").select("*").order("created_at", { ascending: false })

const { data: orders } = await supabase
      .from("orders")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(5)

const { data: recentUploads } = await supabase
      .from("uploads")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(5)

// Calculate statistics
    const totalProducts = products?.length || 0
    const totalOrders = orders?.length || 0
    const pendingOrders = orders?.filter((order) => order.status === "pending").length || 0
    const totalRevenue = orders?.reduce((sum, order) => sum + (order.total_amount || 0), 0) || 0

return (
      <div className="container mx-auto px-4 py-8">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-2xl font-bold">Bảng điều khiển</h1>
          <div className="flex gap-2">
            <Link href="/admin/products/new">
              <Button className="bg-purple-600 hover:bg-purple-700">Thêm sản phẩm mới</Button>
            </Link>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Tổng doanh thu</CardTitle>
              <BarChart className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalRevenue.toLocaleString()}đ</div>
              <p className="text-xs text-muted-foreground">+20.1% so với tháng trước</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Đơn hàng</CardTitle>
              <ShoppingCart className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalOrders}</div>
              <p className="text-xs text-muted-foreground">{pendingOrders} đơn hàng đang chờ xử lý</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Sản phẩm</CardTitle>
              <Package className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalProducts}</div>
              <p className="text-xs text-muted-foreground">+2 sản phẩm mới trong tháng này</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Khách hàng</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">+573</div>
              <p className="text-xs text-muted-foreground">+201 khách hàng mới trong tháng này</p>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Recent Orders */}
          <Card>
            <CardHeader>
              <CardTitle>Đơn hàng gần đây</CardTitle>
              <CardDescription>{pendingOrders} đơn hàng đang chờ xử lý</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {orders?.map((order) => (
                  <div key={order.id} className="flex items-center justify-between border-b pb-4">
                    <div>
                      <h3 className="font-medium">Đơn hàng #{order.id}</h3>
                      <p className="text-sm text-gray-500">{new Date(order.created_at).toLocaleDateString("vi-VN")}</p>
                      <p className="text-sm text-gray-500">
                        {order.customer_name} - {order.customer_phone}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="font-medium">{order.total_amount?.toLocaleString()}đ</p>
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          order.status === "completed"
                            ? "bg-green-100 text-green-800"
                            : order.status === "processing"
                              ? "bg-blue-100 text-blue-800"
                              : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {order.status === "completed"
                          ? "Hoàn thành"
                          : order.status === "processing"
                            ? "Đang xử lý"
                            : "Mới"}
                      </span>
                    </div>
                  </div>
                ))}
                {(!orders || orders.length === 0) && (
                  <p className="text-center py-4 text-gray-500">Không có đơn hàng nào</p>
                )}
              </div>
              <div className="mt-4 text-right">
                <Link href="/admin/orders">
                  <Button variant="outline" size="sm">
                    Xem tất cả đơn hàng
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>

{/* Recent Uploads */}
          <Card>
            <CardHeader>
              <CardTitle>Ảnh tải lên gần đây</CardTitle>
              <CardDescription>Ảnh khách hàng đã tải lên để in</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentUploads?.map((upload) => (
                  <div key={upload.id} className="flex items-center justify-between border-b pb-4">
                    <div>
                      <h3 className="font-medium">Đơn hàng #{upload.order_id}</h3>
                      <p className="text-sm text-gray-500">{new Date(upload.created_at).toLocaleDateString("vi-VN")}</p>
                      <p className="text-sm text-gray-500">{upload.file_count} ảnh</p>
                    </div>
                    <div>
                      <Link href={`/admin/uploads/${upload.id}`}>
                        <Button variant="outline" size="sm">
                          Xem ảnh
                        </Button>
                      </Link>
                    </div>
                  </div>
                ))}
                {(!recentUploads || recentUploads.length === 0) && (
                  <p className="text-center py-4 text-gray-500">Không có ảnh tải lên nào</p>
                )}
              </div>
              <div className="mt-4 text-right">
                <Link href="/admin/uploads">
                  <Button variant="outline" size="sm">
                    Xem tất cả ảnh
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  } catch (error) {
    console.error("Error in admin dashboard:", error)
    return (
      <div className="container mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <CardTitle>Lỗi khi tải dữ liệu</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">Đã xảy ra lỗi khi tải dữ liệu từ Supabase. Vui lòng kiểm tra cấu hình và thử lại.</p>
            <Link href="/admin/login">
              <Button className="bg-blue-600 hover:bg-blue-700">Đăng nhập lại</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }
}

[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

// Check if Supabase environment variables are available
const hasSupabaseCredentials = process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export default function AdminPage() {
  // If Supabase credentials are missing, show a configuration message
  if (!hasSupabaseCredentials) {
    return (
      <div className="container mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <CardTitle>Cấu hình chưa hoàn tất</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              Biến môi trường Supabase chưa được cấu hình. Vui lòng thêm các biến môi trường sau vào dự án của bạn:
            </p>
            <div className="bg-gray-100 p-4 rounded-md mb-4">
              <code className="text-sm">
                NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
                <br />
                NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
              </code>
            </div>
            <p className="text-sm text-gray-500 mb-6">
              Sau khi cấu hình, hãy khởi động lại ứng dụng để áp dụng các thay đổi.
            </p>
            <Link href="/">
              <Button className="bg-blue-600 hover:bg-blue-700">Quay lại trang chủ</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

// If credentials exist, redirect to dashboard
  redirect("/admin/dashboard")
}

[V0_FILE]typescriptreact:file="middleware.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  // Kiểm tra nếu đường dẫn bắt đầu bằng /admin (trừ trang login)
  if (request.nextUrl.pathname.startsWith("/admin") && !request.nextUrl.pathname.includes("/admin/login")) {
    // Kiểm tra cookie xác thực
    const isAuthenticated = request.cookies.has("admin_authenticated")

// Nếu chưa xác thực, chuyển hướng đến trang đăng nhập
    if (!isAuthenticated) {
      const loginUrl = new URL("/admin/login", request.url)
      loginUrl.searchParams.set("redirect", request.nextUrl.pathname)
      return NextResponse.redirect(loginUrl)
    }
  }

return NextResponse.next()
}

// Chỉ áp dụng middleware cho các đường dẫn admin
export const config = {
  matcher: "/admin/:path*",
}

[V0_FILE]typescriptreact:file="app/admin/login/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="app/api/admin/logout/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function POST() {
  // Xóa cookie xác thực
  cookies().delete("admin_authenticated")

return NextResponse.json({ success: true })
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Inter } from "next/font/google"
import "./globals.css"
import SiteHeader from "@/components/site-header"
import SiteFooter from "@/components/site-footer"
import { ThemeProvider } from "@/components/theme-provider"
import { CartProvider } from "@/contexts/cart-context"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "Mơ Print - In ảnh nam châm chất lượng cao",
  description: "Biến những khoảnh khắc tốn tại mãi theo thời gian với ảnh nam châm chất lượng cao.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="vi">
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <CartProvider>
            <div className="relative flex min-h-screen flex-col">
              <SiteHeader />
              <div className="flex-1">{children}</div>
              <SiteFooter />
            </div>
          </CartProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"
import { Menu, X, ShoppingCart, Camera, Home, Image, Phone } from "lucide-react"
import { useCart } from "@/contexts/cart-context"
import { Button } from "@/components/ui/button"

export default function SiteHeader() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { state } = useCart()

const cartItemsCount = state.items.reduce((total, item) => total + item.quantity, 0)

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-white shadow-sm">
      <div className="container mx-auto px-4 md:px-6">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Link href="/" className="text-2xl font-bold text-primary">
              Mơ Print
            </Link>
          </div>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-1">
            <Link
              href="/"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
            >
              <span className="flex items-center gap-1">
                <Home className="h-4 w-4" />
                Trang chủ
              </span>
            </Link>
            <Link
              href="/san-pham"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
            >
              <span className="flex items-center gap-1">
                <Image className="h-4 w-4" />
                Sản Phẩm
              </span>
            </Link>
            <Link
              href="/upload"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
            >
              <span className="flex items-center gap-1">
                <Camera className="h-4 w-4" />
                Tải lên ảnh
              </span>
            </Link>
            <Link
              href="/lien-he"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
            >
              <span className="flex items-center gap-1">
                <Phone className="h-4 w-4" />
                Liên hệ
              </span>
            </Link>
            <Link href="/gio-hang" className="ml-2">
              <Button variant="outline" size="sm" className="relative">
                <ShoppingCart className="h-4 w-4 mr-1" />
                Giỏ hàng
                {cartItemsCount > 0 && (
                  <span className="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {cartItemsCount}
                  </span>
                )}
              </Button>
            </Link>
          </nav>

{/* Mobile Menu Button and Cart */}
          <div className="flex items-center md:hidden">
            <Link href="/gio-hang" className="mr-2 relative">
              <Button variant="outline" size="sm" className="w-9 h-9 p-0">
                <ShoppingCart className="h-5 w-5" />
                {cartItemsCount > 0 && (
                  <span className="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {cartItemsCount}
                  </span>
                )}
              </Button>
            </Link>
            <button
              className="focus:outline-none"
              onClick={toggleMenu}
              aria-label={isMenuOpen ? "Close menu" : "Open menu"}
            >
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden">
          <div className="flex flex-col space-y-2 px-4 py-4 bg-white">
            <Link
              href="/"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
              onClick={() => setIsMenuOpen(false)}
            >
              <span className="flex items-center gap-2">
                <Home className="h-4 w-4" />
                Trang chủ
              </span>
            </Link>
            <Link
              href="/san-pham"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
              onClick={() => setIsMenuOpen(false)}
            >
              <span className="flex items-center gap-2">
                <Image className="h-4 w-4" />
                Sản Phẩm
              </span>
            </Link>
            <Link
              href="/upload"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
              onClick={() => setIsMenuOpen(false)}
            >
              <span className="flex items-center gap-2">
                <Camera className="h-4 w-4" />
                Tải lên ảnh
              </span>
            </Link>
            <Link
              href="/lien-he"
              className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary rounded-md hover:bg-accent"
              onClick={() => setIsMenuOpen(false)}
            >
              <span className="flex items-center gap-2">
                <Phone className="h-4 w-4" />
                Liên hệ
              </span>
            </Link>
          </div>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Facebook, Instagram, Mail, Phone, MapPin } from "lucide-react"

export default function SiteFooter() {
  return (
    <footer className="bg-gray-900 text-white">
      <div className="container mx-auto px-4 md:px-6 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 className="text-xl font-semibold mb-4 text-primary">Mơ Print</h3>
            <p className="text-gray-400 mb-4">
              Biến những khoảnh khắc tốn tại mãi theo thời gian với ảnh nam châm chất lượng cao.
            </p>
            <div className="flex space-x-4">
              <Link href="#" className="text-gray-400 hover:text-primary transition-colors">
                <Facebook className="h-5 w-5" />
                <span className="sr-only">Facebook</span>
              </Link>
              <Link href="#" className="text-gray-400 hover:text-primary transition-colors">
                <Instagram className="h-5 w-5" />
                <span className="sr-only">Instagram</span>
              </Link>
            </div>
          </div>

<div>
            <h3 className="text-lg font-semibold mb-4">Sản phẩm</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/san-pham/combo-6-anh" className="text-gray-400 hover:text-primary transition-colors">
                  Combo 6 ảnh
                </Link>
              </li>
              <li>
                <Link href="/san-pham/combo-12-anh" className="text-gray-400 hover:text-primary transition-colors">
                  Combo 12 ảnh
                </Link>
              </li>
              <li>
                <Link href="/san-pham/anh-le" className="text-gray-400 hover:text-primary transition-colors">
                  Ảnh nam châm lẻ
                </Link>
              </li>
              <li>
                <Link href="/san-pham/qua-tang" className="text-gray-400 hover:text-primary transition-colors">
                  Quà tặng đặc biệt
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="text-lg font-semibold mb-4">Thông tin</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/ve-chung-toi" className="text-gray-400 hover:text-primary transition-colors">
                  Về chúng tôi
                </Link>
              </li>
              <li>
                <Link href="/chinh-sach-bao-mat" className="text-gray-400 hover:text-primary transition-colors">
                  Chính sách bảo mật
                </Link>
              </li>
              <li>
                <Link href="/dieu-khoan-dich-vu" className="text-gray-400 hover:text-primary transition-colors">
                  Điều khoản dịch vụ
                </Link>
              </li>
              <li>
                <Link href="/cau-hoi-thuong-gap" className="text-gray-400 hover:text-primary transition-colors">
                  Câu hỏi thường gặp
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="text-lg font-semibold mb-4">Liên hệ</h3>
            <ul className="space-y-2">
              <li className="flex items-center text-gray-400">
                <Phone className="h-5 w-5 mr-2 text-primary" />
                <span>0123 456 789</span>
              </li>
              <li className="flex items-center text-gray-400">
                <Mail className="h-5 w-5 mr-2 text-primary" />
                <span>info@moprint.com</span>
              </li>
              <li className="flex items-start text-gray-400">
                <MapPin className="h-5 w-5 mr-2 mt-1 text-primary" />
                <span>123 Đường ABC, Quận XYZ, TP. Hồ Chí Minh</span>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
          <p>© {new Date().getFullYear()} Mơ Print. Tất cả các quyền được bảo lưu.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Check, Camera, Truck, CreditCard } from "lucide-react"

export default function Home() {
  return (
    <main className="min-h-screen">
      {/* Hero Section */}
      <section className="hero-gradient py-16 text-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 items-center">
            <div>
              <h1 className="text-3xl md:text-4xl font-bold mb-4">In ảnh nam châm - Mơ Print</h1>
              <p className="text-lg italic mb-6">Biến những khoảnh khắc tốn tại mãi theo thời gian</p>
              <p className="mb-8">
                Gian bếp là nơi giữ lửa gia đình, còn gì tuyệt vời hơn khi cùng Mơ Print biến chiếc tủ lạnh trở nên sinh
                động và hấp dẫn hơn cùng ảnh nam châm in theo yêu cầu. Hãy gửi cho chúng mình những tấm ảnh mà bạn yêu
                thích, chúng mình sẽ biến chúng thành những chiếc ảnh nam châm đầy màu sắc.
              </p>
              <div className="flex flex-wrap gap-4">
                <Link href="/san-pham">
                  <Button size="lg" className="bg-white text-primary hover:bg-gray-100">
                    MUA NGAY
                  </Button>
                </Link>
                <Link href="/upload">
                  <Button
                    size="lg"
                    variant="outline"
                    className="bg-transparent text-white border-white hover:bg-white/10"
                  >
                    TẢI LÊN ẢNH
                  </Button>
                </Link>
              </div>
            </div>
            <div className="flex justify-center gap-4">
              <div className="relative">
                <Image
                  src="/placeholder.svg?height=400&width=300"
                  alt="Magnetic photos on refrigerator"
                  width={300}
                  height={400}
                  className="rounded-lg shadow-lg"
                />
                <div className="absolute -bottom-4 -left-4 bg-white p-2 rounded-lg shadow-lg">
                  <span className="text-primary font-bold">Chất lượng cao</span>
                </div>
              </div>
              <div className="relative mt-8">
                <Image
                  src="/placeholder.svg?height=400&width=300"
                  alt="Person holding magnetic photos"
                  width={300}
                  height={400}
                  className="rounded-lg shadow-lg"
                />
                <div className="absolute -top-4 -right-4 bg-white p-2 rounded-lg shadow-lg">
                  <span className="text-primary font-bold">Giao hàng nhanh</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* How It Works Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-2xl md:text-3xl font-bold text-center mb-12">Đặt hàng chỉ với 3 bước đơn giản</h2>

<div className="flex flex-col md:flex-row justify-center items-center md:items-start gap-8 md:gap-16">
            <div className="step-item complete max-w-xs text-center">
              <div className="step complete">
                <Camera className="h-5 w-5" />
              </div>
              <h3 className="text-lg font-semibold mt-4 mb-2">1. Tải ảnh lên</h3>
              <p className="text-gray-600">Chọn và tải lên những tấm ảnh yêu thích của bạn</p>
            </div>

<div className="step-item complete max-w-xs text-center">
              <div className="step complete">
                <CreditCard className="h-5 w-5" />
              </div>
              <h3 className="text-lg font-semibold mt-4 mb-2">2. Thanh toán</h3>
              <p className="text-gray-600">Chọn phương thức thanh toán phù hợp với bạn</p>
            </div>

<div className="step-item complete max-w-xs text-center">
              <div className="step complete">
                <Truck className="h-5 w-5" />
              </div>
              <h3 className="text-lg font-semibold mt-4 mb-2">3. Nhận hàng</h3>
              <p className="text-gray-600">Chúng tôi sẽ giao hàng tận nơi cho bạn</p>
            </div>
          </div>

{/* Products Section */}
      <section className="py-16">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-2xl md:text-3xl font-bold text-center mb-12">Sản phẩm nổi bật</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Product 1 */}
            <Card className="product-card overflow-hidden">
              <div className="relative h-64 w-full">
                <Image
                  src="/placeholder.svg?height=400&width=600"
                  alt="Combo 6 magnetic photos"
                  fill
                  className="object-cover"
                />
                <div className="absolute top-2 right-2 bg-primary text-white px-2 py-1 rounded-full text-sm font-medium">
                  Bán chạy
                </div>
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-2">Combo 6 ảnh</h3>
                <p className="text-gray-600 mb-4">Đặt in ảnh nam châm theo combo để được ưu đãi</p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-primary">99.000đ</span>
                  <Link href="/san-pham/combo-6-anh">
                    <Button>XEM CHI TIẾT</Button>
                  </Link>
                </div>
              </CardContent>
            </Card>

{/* Product 2 */}
            <Card className="product-card overflow-hidden">
              <div className="relative h-64 w-full">
                <Image
                  src="/placeholder.svg?height=400&width=600"
                  alt="Combo 12 magnetic photos"
                  fill
                  className="object-cover"
                />
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-2">Combo 12 ảnh</h3>
                <p className="text-gray-600 mb-4">Tiết kiệm hơn với combo 12 ảnh nam châm</p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-primary">179.000đ</span>
                  <Link href="/san-pham/combo-12-anh">
                    <Button>XEM CHI TIẾT</Button>
                  </Link>
                </div>
              </CardContent>
            </Card>

{/* Product 3 */}
            <Card className="product-card overflow-hidden">
              <div className="relative h-64 w-full">
                <Image
                  src="/placeholder.svg?height=400&width=600"
                  alt="Single magnetic photo"
                  fill
                  className="object-cover"
                />
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-2">In ảnh nam châm lẻ</h3>
                <p className="text-gray-600 mb-4">Nếu bạn chỉ muốn in 1 vài hình nhỏ để làm kỉ niệm</p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-primary">19.000đ</span>
                  <Link href="/san-pham/anh-le">
                    <Button>XEM CHI TIẾT</Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Features Section */}
      <section className="bg-gray-50 py-16">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-2xl md:text-3xl font-bold text-center mb-12">Tại sao chọn Mơ Print?</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-none shadow-md">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                  <Check className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-lg font-semibold mb-2">Chất lượng cao</h3>
                <p className="text-gray-600">In ấn sắc nét, màu sắc tươi sáng, bền đẹp theo thời gian</p>
              </CardContent>
            </Card>

<Card className="border-none shadow-md">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                  <Truck className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-lg font-semibold mb-2">Giao hàng nhanh</h3>
                <p className="text-gray-600">Thời gian xử lý đơn hàng nhanh chóng, giao hàng đúng hẹn</p>
              </CardContent>
            </Card>

<Card className="border-none shadow-md">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                  <CreditCard className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-lg font-semibold mb-2">Giá cả hợp lý</h3>
                <p className="text-gray-600">Nhiều mức giá phù hợp với nhu cầu, có combo tiết kiệm</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="hero-gradient text-white py-16">
        <div className="container mx-auto px-4 md:px-6 text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">
            Biến kỷ niệm của bạn thành những chiếc nam châm đáng yêu
          </h2>
          <p className="text-lg mb-8 max-w-2xl mx-auto">
            Đặt hàng ngay hôm nay để nhận ưu đãi đặc biệt cho đơn hàng đầu tiên của bạn
          </p>
          <div className="flex justify-center gap-4">
            <Link href="/san-pham">
              <Button size="lg" className="bg-white text-primary hover:bg-gray-100">
                MUA NGAY
              </Button>
            </Link>
            <Link href="/upload">
              <Button size="lg" variant="outline" className="border-white hover:bg-white/10">
                TẢI LÊN ẢNH
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/san-pham/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

export default function ProductsPage() {
  const products = [
    {
      id: 1,
      name: "Combo 6 ảnh",
      description: "Bộ 6 ảnh nam châm kích thước 5x7cm",
      price: "99.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "combo-6-anh",
      badge: "Bán chạy",
    },
    {
      id: 2,
      name: "Combo 12 ảnh",
      description: "Bộ 12 ảnh nam châm kích thước 5x7cm",
      price: "179.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "combo-12-anh",
      badge: "Tiết kiệm",
    },
    {
      id: 3,
      name: "Ảnh nam châm lẻ",
      description: "Ảnh nam châm đơn kích thước 5x7cm",
      price: "19.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "anh-le",
    },
    {
      id: 4,
      name: "Combo ảnh lớn",
      description: "Bộ 4 ảnh nam châm kích thước 7x10cm",
      price: "129.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "combo-anh-lon",
    },
    {
      id: 5,
      name: "Ảnh nam châm hình trái tim",
      description: "Ảnh nam châm hình trái tim kích thước 7x7cm",
      price: "29.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "anh-trai-tim",
      badge: "Mới",
    },
    {
      id: 6,
      name: "Combo quà tặng",
      description: "Hộp quà tặng kèm 8 ảnh nam châm",
      price: "199.000đ",
      image: "/placeholder.svg?height=300&width=400",
      slug: "combo-qua-tang",
    },
  ]

return (
    <div className="container mx-auto px-4 md:px-6 py-12">
      <div className="text-center mb-12">
        <h1 className="text-3xl font-bold mb-4">Sản Phẩm</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">
          Chọn lựa sản phẩm phù hợp với nhu cầu của bạn. Tất cả các sản phẩm đều được in ấn với chất lượng cao và giao
          hàng nhanh chóng.
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {products.map((product) => (
          <Card key={product.id} className="product-card overflow-hidden">
            <div className="relative h-64 w-full">
              <Image src={product.image || "/placeholder.svg"} alt={product.name} fill className="object-cover" />
              {product.badge && (
                <div className="absolute top-2 right-2 bg-primary text-white px-2 py-1 rounded-full text-sm font-medium">
                  {product.badge}
                </div>
              )}
            </div>
            <CardContent className="p-6">
              <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
              <p className="text-gray-600 mb-4">{product.description}</p>
              <div className="flex justify-between items-center">
                <span className="text-lg font-bold text-primary">{product.price}</span>
                <Link href={`/san-pham/${product.slug}`}>
                  <Button>Xem chi tiết</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<div className="mt-12 text-center">
        <div className="bg-gray-50 p-6 rounded-lg max-w-3xl mx-auto">
          <h2 className="text-xl font-semibold mb-4">Bạn cần in ảnh theo yêu cầu riêng?</h2>
          <p className="text-gray-600 mb-6">
            Chúng tôi cung cấp dịch vụ in ảnh nam châm theo yêu cầu riêng của bạn. Hãy tải lên ảnh và chúng tôi sẽ liên
            hệ với bạn để tư vấn.
          </p>
          <Link href="/upload">
            <Button size="lg" className="bg-primary hover:bg-primary/90">
              Tải lên ảnh ngay
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/san-pham/[slug]/ProductPageClient.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { useCart } from "@/contexts/cart-context"
import { Card, CardContent } from "@/components/ui/card"
import { Check, Minus, Plus, ShoppingCart, Truck, Clock } from "lucide-react"

interface Product {
  id: string
  name: string
  description: string
  longDescription: string
  price: string
  originalPrice?: string
  images: string[]
  features: string[]
}

interface ProductPageClientProps {
  product: Product
}

export default function ProductPageClient({ product }: ProductPageClientProps) {
  const [quantity, setQuantity] = useState(1)
  const [activeImage, setActiveImage] = useState(0)
  const { dispatch } = useCart()

const handleAddToCart = () => {
    dispatch({
      type: "ADD_ITEM",
      payload: {
        id: product.id,
        name: product.name,
        price: Number.parseFloat(product.price.replace(/[^0-9]/g, "")),
        quantity: quantity,
        image: product.images[0],
      },
    })
  }

const handleBuyNow = () => {
    handleAddToCart()
    // Redirect to checkout
    window.location.href = "/thanh-toan"
  }

const increaseQuantity = () => {
    setQuantity((prev) => prev + 1)
  }

const decreaseQuantity = () => {
    if (quantity > 1) {
      setQuantity((prev) => prev - 1)
    }
  }

return (
    <div className="container mx-auto px-4 md:px-6 py-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
        {/* Product Images */}
        <div className="space-y-4">
          <div className="relative h-96 rounded-lg overflow-hidden border">
            <Image
              src={product.images[activeImage] || "/placeholder.svg"}
              alt={product.name}
              fill
              className="object-cover"
            />
          </div>
          <div className="grid grid-cols-4 gap-4">
            {product.images.map((image, index) => (
              <div
                key={index}
                className={`relative h-24 rounded-lg overflow-hidden border cursor-pointer ${activeImage === index ? "ring-2 ring-primary" : ""}`}
                onClick={() => setActiveImage(index)}
              >
                <Image
                  src={image || "/placeholder.svg"}
                  alt={`${product.name} - Hình ${index + 1}`}
                  fill
                  className="object-cover"
                />
              </div>
            ))}
          </div>
        </div>

{/* Product Info */}
        <div>
          <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
          <p className="text-gray-600 mb-4">{product.description}</p>

<div className="flex items-center mb-6">
            <span className="text-2xl font-bold text-primary mr-3">{product.price}</span>
            {product.originalPrice && <span className="text-gray-500 line-through">{product.originalPrice}</span>}
          </div>

<div className="mb-6">
            <div className="flex items-center space-x-4 mb-6">
              <div className="flex items-center border rounded-md">
                <button className="px-3 py-2 text-gray-600 hover:bg-gray-100" onClick={decreaseQuantity}>
                  <Minus className="h-4 w-4" />
                </button>
                <span className="px-4 py-2">{quantity}</span>
                <button className="px-3 py-2 text-gray-600 hover:bg-gray-100" onClick={increaseQuantity}>
                  <Plus className="h-4 w-4" />
                </button>
              </div>
              <span className="text-sm text-gray-500">Còn hàng</span>
            </div>

<div className="space-y-4 mb-8">
            <Card>
              <CardContent className="p-4 flex items-center gap-3">
                <Truck className="h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">Giao hàng nhanh</p>
                  <p className="text-sm text-gray-500">Giao hàng trong 2-3 ngày</p>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 flex items-center gap-3">
                <Clock className="h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">Thời gian sản xuất</p>
                  <p className="text-sm text-gray-500">1-2 ngày làm việc</p>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="mb-8">
            <h3 className="text-lg font-semibold mb-3">Mô tả sản phẩm</h3>
            <p className="text-gray-700">{product.longDescription}</p>
          </div>

<div>
            <h3 className="text-lg font-semibold mb-3">Đặc điểm sản phẩm</h3>
            <ul className="space-y-2">
              {product.features.map((feature, index) => (
                <li key={index} className="flex items-start">
                  <Check className="h-5 w-5 text-primary mr-2 mt-0.5" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/gio-hang/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Minus, Plus, Trash2, ShoppingBag } from "lucide-react"
import { useCart } from "@/contexts/cart-context"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function CartPage() {
  const { state, dispatch } = useCart()
  const [couponCode, setCouponCode] = useState("")
  const [couponApplied, setCouponApplied] = useState(false)

const updateQuantity = (id: number, newQuantity: number) => {
    if (newQuantity < 1) return

dispatch({
      type: "UPDATE_QUANTITY",
      payload: { id, quantity: newQuantity },
    })
  }

const removeItem = (id: number) => {
    dispatch({
      type: "REMOVE_ITEM",
      payload: id,
    })
  }

const applyCoupon = () => {
    if (couponCode.trim() === "GIAMGIA10") {
      setCouponApplied(true)
    } else {
      alert("Mã giảm giá không hợp lệ!")
    }
  }

const subtotal = state.total
  const discount = couponApplied ? subtotal * 0.1 : 0
  const shipping = state.items.length > 0 ? 30000 : 0
  const total = subtotal - discount + shipping

return (
    <div className="container mx-auto px-4 md:px-6 py-12">
      <h1 className="text-3xl font-bold mb-8 text-center">Giỏ hàng</h1>

{state.items.length === 0 ? (
        <Card className="max-w-md mx-auto">
          <CardContent className="pt-6 text-center">
            <div className="w-16 h-16 mx-auto mb-6 text-gray-300">
              <ShoppingBag className="h-16 w-16 text-gray-300 mx-auto" />
            </div>
            <h2 className="text-xl font-semibold mb-2">Giỏ hàng của bạn đang trống</h2>
            <p className="text-gray-500 mb-6">Hãy thêm sản phẩm vào giỏ hàng để tiếp tục mua sắm</p>
            <Link href="/san-pham">
              <Button>Tiếp tục mua sắm</Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Sản phẩm trong giỏ hàng</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="divide-y">
                  {state.items.map((item) => (
                    <div key={item.id} className="py-4 flex items-center">
                      <div className="relative w-20 h-20 rounded-md overflow-hidden">
                        <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                      </div>

<div className="ml-4 flex-1">
                        <h3 className="font-medium">{item.name}</h3>
                        <p className="text-gray-500 text-sm">Đơn giá: {item.price.toLocaleString()}đ</p>
                      </div>

<div className="flex items-center border rounded-md mr-4">
                        <button
                          className="px-2 py-1 text-gray-600 hover:bg-gray-100"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        >
                          <Minus className="h-4 w-4" />
                        </button>
                        <span className="px-4 py-1">{item.quantity}</span>
                        <button
                          className="px-2 py-1 text-gray-600 hover:bg-gray-100"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        >
                          <Plus className="h-4 w-4" />
                        </button>
                      </div>

<div className="text-right w-24 font-medium">
                        {(item.price * item.quantity).toLocaleString()}đ
                      </div>

<button
                        className="ml-4 text-red-500 hover:text-red-700"
                        onClick={() => removeItem(item.id)}
                        aria-label="Xóa sản phẩm"
                      >
                        <Trash2 className="h-5 w-5" />
                      </button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

<Card className="mt-6">
              <CardHeader>
                <CardTitle>Mã giảm giá</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex">
                  <Input
                    value={couponCode}
                    onChange={(e) => setCouponCode(e.target.value)}
                    placeholder="Nhập mã giảm giá"
                    className="rounded-r-none"
                    disabled={couponApplied}
                  />
                  <Button
                    onClick={applyCoupon}
                    className={`rounded-l-none ${couponApplied ? "bg-green-600 hover:bg-green-700" : ""}`}
                    disabled={couponApplied}
                  >
                    {couponApplied ? "Đã áp dụng" : "Áp dụng"}
                  </Button>
                </div>
                {couponApplied && (
                  <p className="mt-2 text-sm text-green-600">Mã giảm giá đã được áp dụng thành công!</p>
                )}
              </CardContent>
            </Card>
          </div>

<Card className="h-fit">
            <CardHeader>
              <CardTitle>Tóm tắt đơn hàng</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-gray-600">Tạm tính</span>
                  <span>{subtotal.toLocaleString()}đ</span>
                </div>

{couponApplied && (
                  <div className="flex justify-between text-green-600">
                    <span>Giảm giá (10%)</span>
                    <span>-{discount.toLocaleString()}đ</span>
                  </div>
                )}

<div className="flex justify-between">
                  <span className="text-gray-600">Phí vận chuyển</span>
                  <span>{shipping.toLocaleString()}đ</span>
                </div>

<div className="border-t pt-3 mt-3">
                  <div className="flex justify-between font-semibold text-lg">
                    <span>Tổng cộng</span>
                    <span className="text-primary">{total.toLocaleString()}đ</span>
                  </div>
                </div>
              </div>

<Link href="/thanh-toan">
                <Button className="w-full mt-6 h-12 text-lg">Tiến hành thanh toán</Button>
              </Link>

<div className="mt-6 text-center">
                <Link href="/san-pham" className="text-primary hover:underline">
                  Tiếp tục mua sắm
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/lien-he/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Mail, Phone, MapPin, Check } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    message: "",
  })

const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate form submission
    setTimeout(() => {
      setIsSubmitting(false)
      setIsSubmitted(true)
      setFormData({
        name: "",
        email: "",
        phone: "",
        message: "",
      })

// Reset success message after 5 seconds
      setTimeout(() => {
        setIsSubmitted(false)
      }, 5000)
    }, 1500)
  }

return (
    <div className="container mx-auto px-4 md:px-6 py-12">
      <div className="text-center mb-12">
        <h1 className="text-3xl font-bold mb-4">Liên hệ với chúng tôi</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">
          Bạn có câu hỏi hoặc cần hỗ trợ? Hãy liên hệ với chúng tôi, đội ngũ Mơ Print luôn sẵn sàng hỗ trợ bạn.
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
        <div>
          <Card>
            <CardHeader>
              <CardTitle>Gửi tin nhắn cho chúng tôi</CardTitle>
            </CardHeader>
            <CardContent>
              {isSubmitted ? (
                <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 flex items-center">
                  <Check className="h-5 w-5 mr-2" />
                  Cảm ơn bạn đã liên hệ! Chúng tôi sẽ phản hồi trong thời gian sớm nhất.
                </div>
              ) : null}

<div>
                  <Label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                    Email
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    placeholder="Nhập địa chỉ email của bạn"
                  />
                </div>

<div>
                  <Label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
                    Số điện thoại
                  </Label>
                  <Input
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    required
                    placeholder="Nhập số điện thoại của bạn"
                  />
                </div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? "Đang gửi..." : "Gửi tin nhắn"}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>

<div>
          <Card className="mb-6">
            <CardHeader>
              <CardTitle>Thông tin liên hệ</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="flex items-start">
                  <Phone className="h-5 w-5 text-primary mt-1 mr-3" />
                  <div>
                    <h3 className="font-medium">Điện thoại</h3>
                    <p className="text-gray-600">0123 456 789</p>
                  </div>
                </div>

<div className="flex items-start">
                  <Mail className="h-5 w-5 text-primary mt-1 mr-3" />
                  <div>
                    <h3 className="font-medium">Email</h3>
                    <p className="text-gray-600">info@moprint.com</p>
                  </div>
                </div>

<div className="flex items-start">
                  <MapPin className="h-5 w-5 text-primary mt-1 mr-3" />
                  <div>
                    <h3 className="font-medium">Địa chỉ</h3>
                    <p className="text-gray-600">123 Đường ABC, Quận XYZ, TP. Hồ Chí Minh</p>
                  </div>
                </div>
              </div>

<Card>
            <CardContent className="p-0">
              <div className="h-64 bg-gray-200 rounded-lg">
                {/* This would be a Google Map in a real implementation */}
                <div className="w-full h-full flex items-center justify-center text-gray-500">
                  Bản đồ Google Maps sẽ hiển thị ở đây
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/auth.ts" isEdit="true" isMerged="true"
// Thông tin đăng nhập đơn giản cho admin
// Trong môi trường thực tế, bạn nên sử dụng hệ thống xác thực an toàn hơn
export const ADMIN_CREDENTIALS = {
  username: "admin",
  password: "moprint123", // Bạn nên thay đổi mật khẩu này
}

// Hàm kiểm tra đăng nhập
export function validateCredentials(username: string, password: string): boolean {
  return username === ADMIN_CREDENTIALS.username && password === ADMIN_CREDENTIALS.password
}

[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import Link from "next/link"
import { validateCredentials } from "@/lib/auth"
import { Lock } from "lucide-react"

export default function AdminLogin() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const searchParams = useSearchParams()
  const redirectPath = searchParams.get("redirect") || "/admin/dashboard"

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)

try {
      // Kiểm tra thông tin đăng nhập
      if (validateCredentials(username, password)) {
        // Đặt cookie để đánh dấu đã đăng nhập
        document.cookie = "admin_authenticated=true; path=/; max-age=86400" // Hết hạn sau 24 giờ

// Chuyển hướng đến trang admin
        router.push(redirectPath)
      } else {
        setError("Tên đăng nhập hoặc mật khẩu không đúng")
      }
    } catch (error: any) {
      setError("Đăng nhập thất bại. Vui lòng thử lại.")
      console.error("Login error:", error.message)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <Card className="max-w-md w-full">
        <CardHeader className="text-center">
          <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
            <Lock className="h-6 w-6 text-primary" />
          </div>
          <CardTitle className="text-2xl">Mơ Print Admin</CardTitle>
          <CardDescription>Đăng nhập để quản lý cửa hàng của bạn</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-6" onSubmit={handleLogin}>
            {error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">{error}</div>}
            <div className="space-y-4">
              <div>
                <Label htmlFor="username">Tên đăng nhập</Label>
                <Input
                  id="username"
                  name="username"
                  type="text"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
              <div>
                <Label htmlFor="password">Mật khẩu</Label>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
            </div>

<Button type="submit" className="w-full" disabled={loading}>
              {loading ? "Đang đăng nhập..." : "Đăng nhập"}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="text-center">
          <Link href="/" className="text-sm text-gray-600 hover:text-gray-900 w-full">
            Quay lại trang chủ
          </Link>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/upload/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export async function POST(request: Request) {
  try {
    const formData = await request.formData()
    const file = formData.get("file") as File
    const customerName = formData.get("customerName") as string
    const customerPhone = formData.get("customerPhone") as string
    const customerEmail = formData.get("customerEmail") as string
    const notes = formData.get("notes") as string

if (!file) {
      return NextResponse.json({ error: "No file provided" }, { status: 400 })
    }

// Tạo client Supabase
    const supabase = createRouteHandlerClient({ cookies })

// Đọc file thành buffer
    const buffer = await file.arrayBuffer()

// Tạo tên file với thông tin khách hàng
    const timestamp = new Date().toISOString().replace(/[:.]/g, "-")
    const fileName = `${timestamp}_${customerName}_${file.name}`

// Tải lên Supabase Storage
    const { data: uploadData, error: uploadError } = await supabase.storage
      .from("customer-uploads")
      .upload(fileName, buffer)

if (uploadError) {
      console.error("Upload error:", uploadError)
      return NextResponse.json({ error: "Upload failed" }, { status: 500 })
    }

// Lấy URL công khai
    const { data: urlData } = await supabase.storage.from("customer-uploads").getPublicUrl(fileName)

const fileUrl = urlData.publicUrl

// Lưu thông tin đơn hàng vào cơ sở dữ liệu
    const { data: uploadRecord, error: dbError } = await supabase
      .from("uploads")
      .insert({
        file_name: fileName,
        file_url: fileUrl,
        customer_name: customerName,
        customer_phone: customerPhone,
        customer_email: customerEmail || null,
        notes: notes || null,
      })
      .select()

if (dbError) {
      console.error("Database error:", dbError)
      return NextResponse.json({ error: "Failed to save upload information" }, { status: 500 })
    }

return NextResponse.json({
      message: "Upload successful",
      fileUrl: fileUrl,
      customerInfo: {
        name: customerName,
        phone: customerPhone,
        email: customerEmail,
        notes: notes,
      },
    })
  } catch (error) {
    console.error("Upload error:", error)
    return NextResponse.json({ error: "Upload failed" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/api/admin/files/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export async function GET(request: Request) {
  try {
    const url = new URL(request.url)
    const page = Number.parseInt(url.searchParams.get("page") || "1")
    const pageSize = Number.parseInt(url.searchParams.get("pageSize") || "20")

const supabase = createRouteHandlerClient({ cookies })

// Tính toán offset dựa trên page và pageSize
    const from = (page - 1) * pageSize
    const to = from + pageSize - 1

// Lấy danh sách uploads từ Supabase
    const { data, error, count } = await supabase
      .from("uploads")
      .select("*", { count: "exact" })
      .order("created_at", { ascending: false })
      .range(from, to)

if (error) {
      console.error("Error fetching uploads:", error)
      return NextResponse.json({ error: "Failed to fetch uploads" }, { status: 500 })
    }

// Kiểm tra xem có trang tiếp theo không
    const hasNextPage = count ? from + pageSize < count : false

return NextResponse.json({
      files: data,
      totalCount: count,
      hasNextPage,
      nextPage: hasNextPage ? page + 1 : null,
    })
  } catch (error) {
    console.error("Error fetching files:", error)
    return NextResponse.json({ error: "Failed to fetch files" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/admin/uploads/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Eye, Download } from "lucide-react"

interface UploadFile {
  id: number
  file_name: string
  file_url: string
  customer_name: string
  customer_phone: string
  customer_email?: string
  notes?: string
  created_at: string
}

export default function UploadsPage() {
  const [files, setFiles] = useState<UploadFile[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
  const [hasNextPage, setHasNextPage] = useState(false)

useEffect(() => {
    fetchFiles(1)
  }, [])

const fetchFiles = async (pageNum: number) => {
    try {
      setLoading(true)
      const response = await fetch(`/api/admin/files?page=${pageNum}`)
      const data = await response.json()

if (data.error) {
        throw new Error(data.error)
      }

if (pageNum === 1) {
        setFiles(data.files)
      } else {
        setFiles((prev) => [...prev, ...data.files])
      }

setHasNextPage(data.hasNextPage)
      setPage(pageNum)
    } catch (error: any) {
      setError(error.message || "Failed to load files")
      console.error("Error fetching files:", error)
    } finally {
      setLoading(false)
    }
  }

const loadMoreFiles = () => {
    if (hasNextPage) {
      fetchFiles(page + 1)
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("vi-VN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

return (
    <div className="container mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Quản lý ảnh tải lên</h1>
        <Button onClick={() => fetchFiles(1)} disabled={loading}>
          {loading ? "Đang tải..." : "Làm mới"}
        </Button>
      </div>

{error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">{error}</div>}

<Card>
        <CardHeader>
          <CardTitle>Danh sách ảnh tải lên</CardTitle>
        </CardHeader>
        <CardContent>
          {loading && files.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-gray-500">Đang tải dữ liệu...</p>
            </div>
          ) : files.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-gray-500">Chưa có ảnh tải lên nào</p>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {files.map((file) => (
                  <div key={file.id} className="border rounded-lg overflow-hidden bg-white">
                    <div className="relative h-48 w-full">
                      <Image
                        src={file.file_url || "/placeholder.svg?height=400&width=600"}
                        alt={file.file_name}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div className="p-4">
                      <h3 className="font-semibold truncate">{file.file_name}</h3>
                      <p className="text-sm text-gray-500 mb-2">{formatDate(file.created_at)}</p>
                      <p className="text-sm text-gray-500 mb-4">Khách hàng: {file.customer_name}</p>
                      <div className="flex justify-between">
                        <a href={file.file_url} target="_blank" rel="noopener noreferrer">
                          <Button variant="outline" size="sm">
                            <Eye className="h-4 w-4 mr-1" /> Xem
                          </Button>
                        </a>
                        <a href={file.file_url} download>
                          <Button variant="outline" size="sm">
                            <Download className="h-4 w-4 mr-1" /> Tải xuống
                          </Button>
                        </a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

{hasNextPage && (
                <div className="mt-6 text-center">
                  <Button onClick={loadMoreFiles} disabled={loading}>
                    {loading ? "Đang tải..." : "Tải thêm"}
                  </Button>
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/upload/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Upload, X, Check, ArrowRight, ArrowLeft, Camera, FileText, CreditCard } from "lucide-react"
import Link from "next/link"

export default function UploadPage() {
  const [step, setStep] = useState(1)
  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
  const [previews, setPreviews] = useState<string[]>([])
  const [productType, setProductType] = useState("combo-6")
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    address: "",
    notes: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [orderId, setOrderId] = useState<string | null>(null)
  const [uploadProgress, setUploadProgress] = useState(0)

const fileInputRef = useRef<HTMLInputElement>(null)

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files)
      setSelectedFiles((prev) => [...prev, ...filesArray])

// Create previews
      filesArray.forEach((file) => {
        const reader = new FileReader()
        reader.onloadend = () => {
          setPreviews((prev) => [...prev, reader.result as string])
        }
        reader.readAsDataURL(file)
      })
    }
  }

const removeFile = (index: number) => {
    setSelectedFiles((prev) => prev.filter((_, i) => i !== index))
    setPreviews((prev) => prev.filter((_, i) => i !== index))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      // Upload each file
      let completed = 0
      for (const file of selectedFiles) {
        const uploadFormData = new FormData()
        uploadFormData.append("file", file)
        uploadFormData.append("customerName", formData.name)
        uploadFormData.append("customerPhone", formData.phone)
        uploadFormData.append("customerEmail", formData.email)
        uploadFormData.append("notes", formData.notes)

await fetch("/api/upload", {
          method: "POST",
          body: uploadFormData,
        })

completed++
        setUploadProgress(Math.round((completed / selectedFiles.length) * 100))
      }

setIsSubmitted(true)
      setOrderId("MO" + Date.now().toString().slice(-6))
    } catch (error) {
      console.error("Error submitting order:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

const nextStep = () => {
    if (step < 3) {
      setStep(step + 1)
    }
  }

const prevStep = () => {
    if (step > 1) {
      setStep(step - 1)
    }
  }

const getProductPrice = () => {
    switch (productType) {
      case "combo-6":
        return 99000
      case "combo-12":
        return 179000
      case "anh-le":
        return previews.length * 19000
      default:
        return 0
    }
  }

return (
    <div className="container mx-auto px-4 md:px-6 py-8">
      {/* Page Title */}
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold">Tải lên ảnh của bạn</h1>
        <p className="text-gray-600 mt-2">Chúng tôi sẽ biến ảnh của bạn thành những chiếc nam châm tuyệt đẹp</p>
      </div>

{/* Progress Steps */}
      <div className="max-w-3xl mx-auto mb-8">
        <div className="flex items-center justify-between">
          <div className={`step-item ${step >= 1 ? "active" : ""} ${step > 1 ? "complete" : ""}`}>
            <div className={`step ${step >= 1 ? "active" : ""} ${step > 1 ? "complete" : ""}`}>
              {step > 1 ? <Check className="h-5 w-5" /> : <Camera className="h-5 w-5" />}
            </div>
            <p className="text-sm font-medium mt-2">Thêm Ảnh</p>
          </div>

<div className={`step-item ${step >= 2 ? "active" : ""} ${step > 2 ? "complete" : ""}`}>
            <div className={`step ${step >= 2 ? "active" : ""} ${step > 2 ? "complete" : ""}`}>
              {step > 2 ? <Check className="h-5 w-5" /> : <FileText className="h-5 w-5" />}
            </div>
            <p className="text-sm font-medium mt-2">Thông Tin</p>
          </div>

<div className={`step-item ${step >= 3 ? "active" : ""}`}>
            <div className={`step ${step >= 3 ? "active" : ""}`}>
              <CreditCard className="h-5 w-5" />
            </div>
            <p className="text-sm font-medium mt-2">Hoàn Tất</p>
          </div>
        </div>
      </div>

{isSubmitted ? (
        <Card className="max-w-2xl mx-auto">
          <CardContent className="pt-6 text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Check className="h-8 w-8 text-green-600" />
            </div>
            <h2 className="text-xl font-semibold mb-2">Đã gửi thành công!</h2>
            <p className="mb-4">Cảm ơn bạn đã gửi hình ảnh. Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất.</p>
            {orderId && <p className="font-medium mb-6">Mã đơn hàng của bạn: #{orderId}</p>}
            <div className="flex justify-center gap-4">
              <Link href="/">
                <Button variant="outline">Quay về trang chủ</Button>
              </Link>
              <Link href="/san-pham">
                <Button>Tiếp tục mua sắm</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      ) : (
        <div className="max-w-3xl mx-auto">
          <form onSubmit={handleSubmit}>
            {step === 1 && (
              <Card>
                <CardHeader>
                  <CardTitle>Tải lên hình ảnh</CardTitle>
                  <CardDescription>Chọn ảnh bạn muốn in thành nam châm</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div>
                    <Label htmlFor="productType" className="mb-2 block">
                      Chọn loại sản phẩm
                    </Label>
                    <RadioGroup value={productType} onValueChange={setProductType} className="flex flex-col space-y-2">
                      <div className="flex items-center space-x-2 border p-3 rounded-md hover:border-primary">
                        <RadioGroupItem value="combo-6" id="combo-6" />
                        <Label htmlFor="combo-6" className="flex-1 cursor-pointer">
                          <div className="font-medium">Combo 6 ảnh (99.000đ)</div>
                          <div className="text-sm text-gray-500">Tiết kiệm hơn khi đặt combo</div>
                        </Label>
                      </div>
                      <div className="flex items-center space-x-2 border p-3 rounded-md hover:border-primary">
                        <RadioGroupItem value="combo-12" id="combo-12" />
                        <Label htmlFor="combo-12" className="flex-1 cursor-pointer">
                          <div className="font-medium">Combo 12 ảnh (179.000đ)</div>
                          <div className="text-sm text-gray-500">Tiết kiệm hơn nữa với combo lớn</div>
                        </Label>
                      </div>
                      <div className="flex items-center space-x-2 border p-3 rounded-md hover:border-primary">
                        <RadioGroupItem value="anh-le" id="anh-le" />
                        <Label htmlFor="anh-le" className="flex-1 cursor-pointer">
                          <div className="font-medium">Ảnh lẻ (19.000đ/ảnh)</div>
                          <div className="text-sm text-gray-500">Linh hoạt theo nhu cầu của bạn</div>
                        </Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="image-upload-area" onClick={() => fileInputRef.current?.click()}>
                    <div className="flex flex-col items-center">
                      <Upload className="h-12 w-12 text-primary mx-auto mb-4" />
                      <h3 className="text-lg font-medium mb-1">Bấm để tải ảnh lên</h3>
                      <p className="text-sm text-gray-500 mb-4">Định dạng PNG, JPG, JPEG</p>
                    </div>
                    <Input
                      type="file"
                      ref={fileInputRef}
                      onChange={handleFileChange}
                      accept="image/*"
                      multiple
                      className="hidden"
                    />
                  </div>

{previews.length > 0 && (
                    <div>
                      <div className="flex items-center justify-between mb-3">
                        <h3 className="font-medium">Đã chọn {previews.length} ảnh</h3>
                        <Button
                          variant="destructive"
                          size="sm"
                          onClick={() => {
                            setSelectedFiles([])
                            setPreviews([])
                          }}
                        >
                          Xoá tất cả
                        </Button>
                      </div>
                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        {previews.map((preview, index) => (
                          <div key={index} className="relative group">
                            <div className="relative h-24 rounded-md overflow-hidden border">
                              <Image
                                src={preview || "/placeholder.svg"}
                                alt={`Preview ${index + 1}`}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <button
                              type="button"
                              className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-md"
                              onClick={() => removeFile(index)}
                            >
                              <X className="h-4 w-4" />
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

<div className="flex items-center justify-between pt-4 border-t">
                    <div>
                      <p className="text-lg font-semibold">
                        Tổng tiền: <span className="text-primary">{getProductPrice().toLocaleString()}đ</span>
                      </p>
                    </div>
                    <Button
                      type="button"
                      onClick={nextStep}
                      disabled={previews.length === 0}
                      className="flex items-center gap-2"
                    >
                      TIẾP TỤC <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

{step === 2 && (
              <Card>
                <CardHeader>
                  <CardTitle>Thông tin giao hàng</CardTitle>
                  <CardDescription>Nhập thông tin để chúng tôi giao hàng cho bạn</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="name">Tên người nhận</Label>
                      <Input
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        required
                        placeholder="Xin ghi rõ họ và tên"
                      />
                    </div>

<div>
                      <Label htmlFor="phone">Số điện thoại</Label>
                      <Input
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        required
                        placeholder="Số điện thoại"
                      />
                    </div>

<div>
                      <Label htmlFor="email">Email (không bắt buộc)</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="Email của bạn"
                      />
                    </div>

<div className="flex justify-between mt-8">
                    <Button type="button" variant="outline" onClick={prevStep} className="flex items-center gap-2">
                      <ArrowLeft className="h-4 w-4" /> QUAY LẠI
                    </Button>
                    <Button type="button" onClick={nextStep} className="flex items-center gap-2">
                      TIẾP TỤC <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

{step === 3 && (
              <Card>
                <CardHeader>
                  <CardTitle>Xác nhận đơn hàng</CardTitle>
                  <CardDescription>Kiểm tra lại thông tin trước khi hoàn tất</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <h3 className="font-medium mb-2">Thông tin ảnh</h3>
                      <div className="bg-gray-50 p-4 rounded-md">
                        <p>Số lượng ảnh: {previews.length}</p>
                        <p>
                          Loại sản phẩm:{" "}
                          {productType === "combo-6"
                            ? "Combo 6 ảnh"
                            : productType === "combo-12"
                              ? "Combo 12 ảnh"
                              : "Ảnh lẻ"}
                        </p>
                        <div className="mt-2 flex flex-wrap gap-2">
                          {previews.slice(0, 4).map((preview, index) => (
                            <div key={index} className="relative w-16 h-16 rounded-md overflow-hidden border">
                              <Image
                                src={preview || "/placeholder.svg"}
                                alt={`Preview ${index + 1}`}
                                fill
                                className="object-cover"
                              />
                            </div>
                          ))}
                          {previews.length > 4 && (
                            <div className="relative w-16 h-16 rounded-md overflow-hidden bg-gray-200 flex items-center justify-center">
                              <span className="text-gray-600 font-medium">+{previews.length - 4}</span>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>

<div>
                      <h3 className="font-medium mb-2">Thông tin giao hàng</h3>
                      <div className="bg-gray-50 p-4 rounded-md">
                        <p>
                          <strong>Tên:</strong> {formData.name}
                        </p>
                        <p>
                          <strong>Số điện thoại:</strong> {formData.phone}
                        </p>
                        {formData.email && (
                          <p>
                            <strong>Email:</strong> {formData.email}
                          </p>
                        )}
                        <p>
                          <strong>Địa chỉ:</strong> {formData.address}
                        </p>
                        {formData.notes && (
                          <p>
                            <strong>Ghi chú:</strong> {formData.notes}
                          </p>
                        )}
                      </div>
                    </div>

<div>
                      <h3 className="font-medium mb-2">Tổng thanh toán</h3>
                      <div className="bg-gray-50 p-4 rounded-md">
                        <div className="flex justify-between font-semibold text-lg">
                          <span>Tổng cộng:</span>
                          <span className="text-primary">{getProductPrice().toLocaleString()}đ</span>
                        </div>
                        <p className="text-sm text-gray-500 mt-2">Thanh toán khi nhận hàng (COD)</p>
                      </div>
                    </div>
                  </div>

<div className="flex justify-between mt-8">
                    <Button type="button" variant="outline" onClick={prevStep} className="flex items-center gap-2">
                      <ArrowLeft className="h-4 w-4" /> QUAY LẠI
                    </Button>
                    <Button type="submit" className="bg-primary hover:bg-primary/90" disabled={isSubmitting}>
                      {isSubmitting ? (
                        <>
                          <span className="mr-2">ĐANG XỬ LÝ... {uploadProgress}%</span>
                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        </>
                      ) : (
                        "HOÀN TẤT ĐẶT HÀNG"
                      )}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}
          </form>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="scripts/create-uploads-table.ts" type="code" isMerged="true"
/*
Đây là script để tạo bảng uploads trong Supabase.
Bạn có thể chạy script này hoặc tạo bảng thủ công trong Supabase Dashboard.

Tạo bảng trong Supabase SQL Editor:

create table public.uploads (
  id bigint generated by default as identity primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  file_name text not null,
  file_url text not null,
  customer_name text not null,
  customer_phone text not null,
  customer_email text,
  notes text,
  order_id bigint references public.orders(id),
  file_count integer default 1
);

-- Đặt RLS (Row Level Security) để bảo vệ dữ liệu
alter table public.uploads enable row level security;

-- Tạo policy cho phép admin truy cập
create policy "Admin can do everything" on public.uploads
  using (auth.role() = 'authenticated')
  with check (auth.role() = 'authenticated');

-- Tạo policy cho phép người dùng tải lên
create policy "Anyone can upload" on public.uploads for insert
  with check (true);
*/

// Đây chỉ là file hướng dẫn, không cần thực thi
console.log("Hãy tạo bảng uploads trong Supabase Dashboard SQL Editor")

[V0_FILE]typescriptreact:file="scripts/create-storage-bucket.ts" type="code" isMerged="true"
/*
Hướng dẫn tạo bucket trong Supabase Storage:

1. Đăng nhập vào Supabase Dashboard
2. Chọn dự án của bạn
3. Chọn "Storage" từ menu bên trái
4. Nhấp vào "Create a new bucket"
5. Đặt tên bucket là "customer-uploads"
6. Chọn "Private" hoặc "Public" tùy theo nhu cầu của bạn
   - Nếu chọn "Private", bạn cần tạo policy để cho phép truy cập
   - Nếu chọn "Public", mọi người đều có thể xem ảnh

Tạo policy cho bucket:

1. Chọn bucket "customer-uploads"
2. Chọn tab "Policies"
3. Nhấp vào "Add Policy"
4. Tạo các policy sau:

- SELECT policy (để xem ảnh):
  - Policy name: "Anyone can view uploads"
  - Policy definition: Chọn "For select using expression" và nhập "true"

- INSERT policy (để tải lên ảnh):
  - Policy name: "Anyone can upload"
  - Policy definition: Chọn "For insert using expression" và nhập "true"

- UPDATE policy (để cập nhật ảnh):
  - Policy name: "Only authenticated users can update"
  - Policy definition: Chọn "For update using expression" và nhập "auth.role() = 'authenticated'"

- DELETE policy (để xóa ảnh):
  - Policy name: "Only authenticated users can delete"
  - Policy definition: Chọn "For delete using expression" và nhập "auth.role() = 'authenticated'"
*/

// Đây chỉ là file hướng dẫn, không cần thực thi
console.log("Hãy tạo bucket trong Supabase Storage Dashboard")

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true"
@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: 25 95% 53%;
    --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: 25 95% 97%;
    --accent-foreground: 25 95% 53%;

--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: 25 95% 53%;

--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: 25 95% 53%;
    --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: 25 95% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.hero-gradient {
  background: linear-gradient(to right, #ff8c38, #ff6a00);
}

.step-item {
  @apply flex flex-col items-center justify-center relative;
}

.step-item:not(:first-child):before {
  content: "";
  position: absolute;
  background-color: #e2e8f0; /* bg-slate-200 */
  width: 100%;
  height: 3px;
  right: 50%;
  top: 33.333333%;
  transform: translateY(-50%);
}

.step-item.active:not(:first-child):before,
.step-item.complete:not(:first-child):before {
  background-color: hsl(var(--primary)); /* bg-primary */
}

.step {
  @apply w-10 h-10 flex items-center justify-center z-10 relative bg-slate-200 rounded-full font-semibold text-slate-500;
}

.step.active {
  @apply bg-primary text-white;
}

.step.complete {
  @apply bg-primary text-white;
}

.product-card {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.image-upload-area {
  @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:bg-accent transition-colors;
}

.image-upload-area:hover {
  @apply border-primary;
}
</article></body></html>