108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_u2X0QXlEcCB",null],["b_xH8jTM3JW7Q",null],["b_cJc4pcXdpwI",null]] 10e:[["b_u2X0QXlEcCB",{"templateVersionId":null,"templateCanonId":null}],["b_xH8jTM3JW7Q",{"templateVersionId":null,"templateCanonId":null}],["b_cJc4pcXdpwI",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["PFDzjmT3prK","$D2025-10-11T13:53:48.675Z"],["b_XjD2w4VOXiS","$D2025-10-11T14:00:34.972Z"],["b_VSnXePcyuHX","$D2025-10-11T14:05:23.387Z"],["b_v5rHY39yRDb","$D2025-10-11T14:09:38.921Z"],["b_O42Xsroizfg","$D2025-10-11T14:17:44.053Z"],["b_cSJNiiVWtcJ","$D2025-10-11T14:20:13.665Z"],["b_84crEr740FY","$D2025-10-11T14:20:51.420Z"],["b_bWfkSm6Y5eu","$D2025-10-11T14:38:52.186Z"],["b_CjMQK9xQJ0G","$D2025-10-11T14:40:02.727Z"],["b_GCeRB8bzCX7","$D2025-10-11T14:51:49.588Z"],["b_bHkMaRJHwkU","$D2025-10-11T15:05:31.225Z"],["b_QaqXK8yqA0H","$D2025-10-11T18:11:20.719Z"],["b_u2X0QXlEcCB","$D2025-10-11T18:15:38.008Z"],["b_UVfSipJY9iG","$D2025-10-11T18:37:12.540Z"],["b_Lz9PgNVzFE0","$D2025-10-11T18:47:31.611Z"],["b_xH8jTM3JW7Q","$D2025-10-11T18:51:06.159Z"],["b_cJc4pcXdpwI","$D2025-10-11T18:58:53.254Z"]] 110:[["b_u2X0QXlEcCB",false],["b_xH8jTM3JW7Q",false],["b_cJc4pcXdpwI",false]] 111:[["b_u2X0QXlEcCB","$undefined"],["b_xH8jTM3JW7Q","$undefined"],["b_cJc4pcXdpwI","$undefined"]] 112:[["b_u2X0QXlEcCB",null],["b_xH8jTM3JW7Q",null],["b_cJc4pcXdpwI",null]] 113:[["b_u2X0QXlEcCB",true],["b_xH8jTM3JW7Q",true],["b_cJc4pcXdpwI",true]] 114:[["b_u2X0QXlEcCB",true],["b_xH8jTM3JW7Q",true],["b_cJc4pcXdpwI",true]] 115:[] 116:T42e,Perfect, the error confirms my suspicion: "operator does not exist: uuid ~~* unknown" The `~~*` operator is the case-insensitive pattern matching operator used by Supabase's `.ilike()` method. The problem is that you can't use `ilike` on UUID columns directly - it only works on text columns. In the fetchProductSuggestions function, I'm building an `or` filter that includes `id.ilike.%${searchTerm}%`, but `id` is a UUID column, not a text column. I have two options: - Remove the `id.ilike` from the search filters (simplest) - Cast the UUID to text in the query (more complex, requires using `.or()` with a raw SQL filter) Since the user wants to search by typing product names like "Apple", searching by UUID with ilike doesn't make much sense anyway. Users are more likely to type product names, brands, models, or SKUs - not UUIDs. The best solution is to remove the `id.ilike` filter from the search query entirely. If users want to search by exact UUID, they can scan the QR code or paste the full UUID. Let me read the current implementation and fix it.117:T575,Based on the user's requirements, I need to: - Remove the "n ubicaciones diferentes" badge text (keep only the toast) - Make the product carousel a real slider (draggable) instead of using side buttons - Show only: title, last digits of ID, and location - Keep location at the bottom of the card for consistent UI - Fix the modal close behavior - it should just close, not refresh the entire website Looking at the current code: - Line 617-623: The badge showing "locationGroups.size ubicaciones diferentes" needs to be removed - Lines 625-665: The Carousel component is already there but needs to be made draggable - The carousel is using CarouselPrevious and CarouselNext buttons (lines 660-663) which should be removed for a pure slider - The Dialog component's onOpenChange might be causing the refresh issue For the carousel to be draggable like a slider, I need to: - Remove the CarouselPrevious and CarouselNext buttons - The embla-carousel (which powers shadcn's Carousel) already supports drag by default - Simplify the product card to show only title, last 5 digits of ID, and location at the bottom For the modal close issue, I need to check if there's any router.refresh() being called on close or if the Dialog is causing a page refresh. Looking at line 73, there's `onOpenChange={setOpen}` which should just update the state without refreshing. Let me implement these changes.118:T834d9,[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]typescript:file="lib/qr-code.ts" isMerged="true" import QRCode from "qrcode" export async function generateQRCode(data: string): Promise { try { // Generate QR code as data URL const qrCodeDataUrl = await QRCode.toDataURL(data, { width: 300, margin: 2, color: { dark: "#000000", light: "#FFFFFF", }, }) return qrCodeDataUrl } catch (error) { console.error("[v0] Error generating QR code:", error) throw error } } export function generateQRCodeId(): string { // Generate a unique QR code ID return `QR-${Date.now()}-${Math.random().toString(36).substring(2, 9).toUpperCase()}` } [V0_FILE]typescript:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { AppSidebar } from "@/components/app-sidebar" import { SidebarProvider } from "@/components/ui/sidebar" import { Suspense } from "react" export const metadata: Metadata = { title: "Store Inventory Dashboard", description: "QR-code driven inventory management system", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>

{children}

) } [V0_FILE]typescript:file="components/location-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { MapboxAddressInput } from "@/components/mapbox-address-input" import { createLocation, updateLocation } from "@/lib/db/actions" import { useRouter } from "next/navigation" import type { Location } from "@/lib/types/database" interface LocationFormProps { location?: Location } export function LocationForm({ location }: LocationFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState(null) const [coordinates, setCoordinates] = useState<{ latitude: number; longitude: number } | null>( location?.latitude && location?.longitude ? { latitude: location.latitude, longitude: location.longitude } : null, ) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setError(null) try { const formData = new FormData(e.currentTarget) if (coordinates) { formData.set("latitude", coordinates.latitude.toString()) formData.set("longitude", coordinates.longitude.toString()) } if (location) { await updateLocation(location.id, formData) } else { await createLocation(formData) } router.push("/locations") router.refresh() } catch (err) { setError("Failed to save location") console.error("[v0] Location form error:", err) } finally { setIsSubmitting(false) } } return ( {location ? "Edit Location" : "Create New Location"} {location ? "Update location information" : "Add a new warehouse, store, or house location"}

Location Name *

Location Type *

{ if (coords) { setCoordinates(coords) } }} label="Address" placeholder="Start typing an address..." required={false} /> {coordinates && (

Coordinates: {coordinates.latitude.toFixed(6)}, {coordinates.longitude.toFixed(6)}

)} {error &&

{error}

}

) } [V0_FILE]typescript:file="components/provider-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { createProvider, updateProvider } from "@/lib/db/actions" import { useRouter } from "next/navigation" import type { Provider } from "@/lib/types/database" interface ProviderFormProps { provider?: Provider } export function ProviderForm({ provider }: ProviderFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState(null) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setError(null) try { const formData = new FormData(e.currentTarget) if (provider) { await updateProvider(provider.id, formData) } else { await createProvider(formData) } router.push("/providers") router.refresh() } catch (err) { setError("Failed to save provider") console.error("[v0] Provider form error:", err) } finally { setIsSubmitting(false) } } return ( {provider ? "Edit Provider" : "Create New Provider"} {provider ? "Update provider information" : "Add a new supplier or distributor"}

Provider Name *

Country *

Provider Type *

Contact Email

Contact Phone

Notes

</div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Saving..." : provider ? "Update Provider" : "Create Provider"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/shipment-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { createInboundShipment, updateInboundShipment } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Provider, Location } from "@/lib/types/database"

interface ShipmentFormProps {
  shipment?: any
  providers: Provider[]
  locations: Location[]
}

export function ShipmentForm({ shipment, providers, locations }: ShipmentFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

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

try {
      const formData = new FormData(e.currentTarget)

if (shipment) {
        await updateInboundShipment(shipment.id, formData)
      } else {
        await createInboundShipment(formData)
      }

router.push("/shipments")
      router.refresh()
    } catch (err) {
      setError("Failed to save shipment")
      console.error("[v0] Shipment form error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{shipment ? "Edit Shipment" : "Create New Inbound Shipment"}</CardTitle>
        <CardDescription>
          {shipment ? "Update shipment information" : "Track a new shipment from a provider"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="provider_id">Provider *</Label>
            <Select name="provider_id" defaultValue={shipment?.provider_id} required>
              <SelectTrigger>
                <SelectValue placeholder="Select provider" />
              </SelectTrigger>
              <SelectContent>
                {providers.map((provider) => (
                  <SelectItem key={provider.id} value={provider.id}>
                    {provider.name} ({provider.country})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="tracking_number">Tracking Number</Label>
              <Input
                id="tracking_number"
                name="tracking_number"
                defaultValue={shipment?.tracking_number || ""}
                placeholder="e.g., 1Z999AA10123456784"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="carrier">Carrier</Label>
              <Input
                id="carrier"
                name="carrier"
                defaultValue={shipment?.carrier || ""}
                placeholder="e.g., UPS, FedEx, DHL"
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="destination_location_id">Destination Location</Label>
            <Select name="destination_location_id" defaultValue={shipment?.destination_location_id || "none"}>
              <SelectTrigger>
                <SelectValue placeholder="Select destination" />
              </SelectTrigger>
              <SelectContent>
                {locations.map((location) => (
                  <SelectItem key={location.id} value={location.id}>
                    {location.name} ({location.type})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="expected_delivery_date">Expected Delivery Date</Label>
              <Input
                id="expected_delivery_date"
                name="expected_delivery_date"
                type="date"
                defaultValue={shipment?.expected_delivery_date || ""}
              />
            </div>

{shipment && (
              <div className="space-y-2">
                <Label htmlFor="actual_delivery_date">Actual Delivery Date</Label>
                <Input
                  id="actual_delivery_date"
                  name="actual_delivery_date"
                  type="date"
                  defaultValue={shipment?.actual_delivery_date || ""}
                />
              </div>
            )}
          </div>

{shipment && (
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select name="status" defaultValue={shipment.status}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="in_transit">In Transit</SelectItem>
                  <SelectItem value="delivered">Delivered</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>
          )}

<div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              name="notes"
              defaultValue={shipment?.notes || ""}
              placeholder="Additional information about this shipment..."
              rows={3}
            />
          </div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Saving..." : shipment ? "Update Shipment" : "Create Shipment"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="app/providers/new/page.tsx" isMerged="true"
import { ProviderForm } from "@/components/provider-form"

export default function NewProviderPage() {
  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Add New Provider</h1>
        <p className="text-muted-foreground">Create a new supplier or distributor</p>
      </div>

<ProviderForm />
    </div>
  )
}
[V0_FILE]typescript:file="app/shipments/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { notFound } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Edit, Truck, Package, Calendar, MapPin, Building2 } from "lucide-react"
import Link from "next/link"
import { markShipmentDelivered } from "@/lib/db/actions"

export default async function ShipmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: shipment, error } = await supabase
    .from("inbound_shipments")
    .select(
      `
      *,
      providers (name, country, type),
      locations (name, type, address)
    `,
    )
    .eq("id", id)
    .single()

if (error || !shipment) {
    notFound()
  }

// Get shipment items
  const { data: items } = await supabase
    .from("inbound_shipment_items")
    .select(
      `
      *,
      products (name, brand, model)
    `,
    )
    .eq("shipment_id", id)

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3 mb-2">
            <Truck className="h-8 w-8 text-muted-foreground" />
            <h1 className="text-3xl font-bold">Shipment Details</h1>
            <Badge
              variant={
                shipment.status === "delivered" ? "default" : shipment.status === "in_transit" ? "secondary" : "outline"
              }
            >
              {shipment.status.replace("_", " ").toUpperCase()}
            </Badge>
          </div>
          <p className="text-muted-foreground">
            {shipment.tracking_number ? `Tracking: ${shipment.tracking_number}` : "No tracking number"}
          </p>
        </div>
        <div className="flex gap-2">
          {shipment.status !== "delivered" && (
            <form action={markShipmentDelivered.bind(null, id)}>
              <Button type="submit">Mark as Delivered</Button>
            </form>
          )}
          <Button variant="outline" asChild>
            <Link href={`/shipments/${id}/edit`}>
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </Link>
          </Button>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5" />
              Provider
            </CardTitle>
          </CardHeader>
          <CardContent>
            {shipment.providers && (
              <div className="space-y-2">
                <p className="font-medium text-lg">{shipment.providers.name}</p>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <MapPin className="h-4 w-4" />
                  <span>{shipment.providers.country}</span>
                </div>
                <Badge variant="outline" className="capitalize">
                  {shipment.providers.type.replace("_", " ")}
                </Badge>
              </div>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Package className="h-5 w-5" />
              Destination
            </CardTitle>
          </CardHeader>
          <CardContent>
            {shipment.locations ? (
              <div className="space-y-2">
                <p className="font-medium text-lg">{shipment.locations.name}</p>
                <Badge variant="outline" className="capitalize">
                  {shipment.locations.type}
                </Badge>
                {shipment.locations.address && (
                  <p className="text-sm text-muted-foreground">{shipment.locations.address}</p>
                )}
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">No destination set</p>
            )}
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            Delivery Information
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            {shipment.carrier && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">Carrier</p>
                <p className="font-medium">{shipment.carrier}</p>
              </div>
            )}
            {shipment.expected_delivery_date && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">Expected Delivery</p>
                <p className="font-medium">{new Date(shipment.expected_delivery_date).toLocaleDateString()}</p>
              </div>
            )}
            {shipment.actual_delivery_date && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">Actual Delivery</p>
                <p className="font-medium">{new Date(shipment.actual_delivery_date).toLocaleDateString()}</p>
              </div>
            )}
          </div>
          {shipment.notes && (
            <div className="mt-4">
              <p className="text-sm text-muted-foreground mb-1">Notes</p>
              <p className="text-sm">{shipment.notes}</p>
            </div>
          )}
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Shipment Items</CardTitle>
          <CardDescription>Products included in this shipment</CardDescription>
        </CardHeader>
        <CardContent>
          {items && items.length > 0 ? (
            <div className="space-y-2">
              {items.map((item: any) => (
                <div key={item.id} className="flex items-center justify-between p-3 bg-muted rounded">
                  <div className="flex-1">
                    <p className="font-medium">{item.products?.name}</p>
                    <p className="text-sm text-muted-foreground">
                      {item.products?.brand} {item.products?.model}
                    </p>
                  </div>
                  <div className="text-sm">
                    <span className="font-medium">{item.received_quantity}</span> / {item.expected_quantity} received
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground text-center py-8">No items added to this shipment</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="components/sale-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { createSale } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import { DollarSign } from "lucide-react"

export function SaleForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [subtotal, setSubtotal] = useState(0)
  const [discountAmount, setDiscountAmount] = useState(0)
  const [taxAmount, setTaxAmount] = useState(0)
  const router = useRouter()

const totalAmount = subtotal - discountAmount + taxAmount

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

try {
      const formData = new FormData(e.currentTarget)
      formData.set("subtotal", subtotal.toString())
      formData.set("discount_amount", discountAmount.toString())
      formData.set("tax_amount", taxAmount.toString())
      formData.set("total_amount", totalAmount.toString())

const result = await createSale(formData)
      router.push(`/sales/${result.data.id}`)
      router.refresh()
    } catch (err) {
      setError("Failed to create sale")
      console.error("[v0] Sale form error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <DollarSign className="h-5 w-5" />
          Create New Sale
        </CardTitle>
        <CardDescription>Process a new sale transaction</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Sale Type</h3>

<div className="space-y-2">
              <Label htmlFor="sale_type">Payment Method *</Label>
              <Select name="sale_type" defaultValue="cash" required>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="cash">Cash</SelectItem>
                  <SelectItem value="payment_link">Payment Link</SelectItem>
                  <SelectItem value="online">Online</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-lg font-semibold">Customer Information</h3>

<div className="space-y-2">
              <Label htmlFor="customer_name">Customer Name</Label>
              <Input id="customer_name" name="customer_name" placeholder="John Doe" />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="customer_email">Email</Label>
                <Input id="customer_email" name="customer_email" type="email" placeholder="john@example.com" />
              </div>

<div className="space-y-2">
                <Label htmlFor="customer_phone">Phone</Label>
                <Input id="customer_phone" name="customer_phone" type="tel" placeholder="+1 (555) 123-4567" />
              </div>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-lg font-semibold">Pricing</h3>

<div className="space-y-2">
              <Label htmlFor="subtotal">Subtotal *</Label>
              <Input
                id="subtotal"
                type="number"
                step="0.01"
                value={subtotal}
                onChange={(e) => setSubtotal(Number.parseFloat(e.target.value) || 0)}
                required
                placeholder="0.00"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="discount_amount">Discount</Label>
                <Input
                  id="discount_amount"
                  type="number"
                  step="0.01"
                  value={discountAmount}
                  onChange={(e) => setDiscountAmount(Number.parseFloat(e.target.value) || 0)}
                  placeholder="0.00"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="tax_amount">Tax</Label>
                <Input
                  id="tax_amount"
                  type="number"
                  step="0.01"
                  value={taxAmount}
                  onChange={(e) => setTaxAmount(Number.parseFloat(e.target.value) || 0)}
                  placeholder="0.00"
                />
              </div>
            </div>

<div className="p-4 bg-muted rounded">
              <div className="flex items-center justify-between text-lg font-semibold">
                <span>Total Amount</span>
                <span>${totalAmount.toFixed(2)}</span>
              </div>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-lg font-semibold">Shipping</h3>

<div className="flex items-center space-x-2">
              <Checkbox id="requires_shipping" name="requires_shipping" value="true" />
              <Label htmlFor="requires_shipping" className="cursor-pointer">
                This sale requires shipping
              </Label>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea id="notes" name="notes" placeholder="Additional notes about this sale..." rows={3} />
          </div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Creating..." : "Create Sale"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/add-sale-item-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { addSaleItem } from "@/lib/db/actions"
import { Plus } from "lucide-react"
import type { Product } from "@/lib/types/database"

interface AddSaleItemDialogProps {
  saleId: string
  products: Product[]
}

export function AddSaleItemDialog({ saleId, products }: AddSaleItemDialogProps) {
  const [open, setOpen] = useState(false)
  const [productId, setProductId] = useState<string>("")
  const [quantity, setQuantity] = useState(1)
  const [unitPrice, setUnitPrice] = useState(0)
  const [discountAmount, setDiscountAmount] = useState(0)
  const [isAdding, setIsAdding] = useState(false)

const handleProductChange = (value: string) => {
    setProductId(value)
    const product = products.find((p) => p.id === value)
    if (product?.selling_price) {
      setUnitPrice(product.selling_price)
    }
  }

const handleAdd = async () => {
    if (!productId) return

setIsAdding(true)
    try {
      await addSaleItem(saleId, productId, quantity, unitPrice, discountAmount)
      setOpen(false)
      setProductId("")
      setQuantity(1)
      setUnitPrice(0)
      setDiscountAmount(0)
    } catch (error) {
      console.error("[v0] Add sale item error:", error)
    } finally {
      setIsAdding(false)
    }
  }

const totalPrice = quantity * unitPrice - discountAmount

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Add Product
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add Product to Sale</DialogTitle>
          <DialogDescription>Select a product and specify quantity and pricing</DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="product">Product *</Label>
            <Select value={productId} onValueChange={handleProductChange}>
              <SelectTrigger>
                <SelectValue placeholder="Select product" />
              </SelectTrigger>
              <SelectContent>
                {products
                  .filter((p) => p.status === "in_stock")
                  .map((product) => (
                    <SelectItem key={product.id} value={product.id}>
                      {product.name} - ${product.selling_price?.toFixed(2)}
                    </SelectItem>
                  ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="quantity">Quantity</Label>
              <Input
                id="quantity"
                type="number"
                min="1"
                value={quantity}
                onChange={(e) => setQuantity(Number.parseInt(e.target.value) || 1)}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="unit_price">Unit Price</Label>
              <Input
                id="unit_price"
                type="number"
                step="0.01"
                value={unitPrice}
                onChange={(e) => setUnitPrice(Number.parseFloat(e.target.value) || 0)}
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="discount">Discount</Label>
            <Input
              id="discount"
              type="number"
              step="0.01"
              value={discountAmount}
              onChange={(e) => setDiscountAmount(Number.parseFloat(e.target.value) || 0)}
            />
          </div>

<div className="p-4 bg-muted rounded">
            <div className="flex items-center justify-between font-semibold">
              <span>Total</span>
              <span>${totalPrice.toFixed(2)}</span>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleAdd} disabled={!productId || isAdding}>
            {isAdding ? "Adding..." : "Add to Sale"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/sales/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, DollarSign, CreditCard, Package, TrendingUp } from "lucide-react"
import Link from "next/link"

export default async function SalesPage() {
  const supabase = await createClient()

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

const totalRevenue = sales?.reduce((sum, sale) => sum + (sale.total_amount || 0), 0) || 0
  const pendingPayments = sales?.filter((s) => s.payment_status === "pending").length || 0
  const completedSales = sales?.filter((s) => s.payment_status === "paid").length || 0

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Sales</h1>
          <p className="text-muted-foreground">Manage sales transactions and payments</p>
        </div>
        <Button asChild>
          <Link href="/sales/new">
            <Plus className="h-4 w-4 mr-2" />
            New Sale
          </Link>
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalRevenue.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">All time</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Completed Sales</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{completedSales}</div>
            <p className="text-xs text-muted-foreground">Paid transactions</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Pending Payments</CardTitle>
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{pendingPayments}</div>
            <p className="text-xs text-muted-foreground">Awaiting payment</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Sales</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{sales?.length || 0}</div>
            <p className="text-xs text-muted-foreground">All transactions</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Recent Sales</CardTitle>
          <CardDescription>Latest sales transactions</CardDescription>
        </CardHeader>
        <CardContent>
          {sales && sales.length > 0 ? (
            <div className="space-y-3">
              {sales.map((sale) => (
                <Link key={sale.id} href={`/sales/${sale.id}`}>
                  <div className="flex items-center justify-between p-4 bg-muted rounded hover:bg-accent transition-colors">
                    <div className="flex-1">
                      <p className="font-medium">{sale.sale_number}</p>
                      <p className="text-sm text-muted-foreground">
                        {sale.customer_name || "No customer name"} • {sale.sale_type}
                      </p>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="font-semibold">${sale.total_amount.toFixed(2)}</p>
                        <p className="text-xs text-muted-foreground">
                          {new Date(sale.created_at).toLocaleDateString()}
                        </p>
                      </div>
                      <Badge
                        variant={
                          sale.payment_status === "paid"
                            ? "default"
                            : sale.payment_status === "pending"
                              ? "secondary"
                              : "outline"
                        }
                      >
                        {sale.payment_status}
                      </Badge>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-12">
              <DollarSign className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-semibold mb-2">No sales yet</h3>
              <p className="text-sm text-muted-foreground mb-4">Create your first sale transaction</p>
              <Button asChild>
                <Link href="/sales/new">
                  <Plus className="h-4 w-4 mr-2" />
                  New Sale
                </Link>
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/sales/new/page.tsx" isMerged="true"
import { SaleForm } from "@/components/sale-form"

export default function NewSalePage() {
  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Create New Sale</h1>
        <p className="text-muted-foreground">Process a new sales transaction</p>
      </div>

<SaleForm />
    </div>
  )
}
[V0_FILE]typescript:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescript:file="app/analytics/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  BarChart3,
  TrendingUp,
  DollarSign,
  Package,
  ShoppingCart,
  Warehouse,
  TrendingDown,
  Activity,
} from "lucide-react"
import { startOfMonth, endOfMonth, subMonths, format } from "date-fns"

export default async function AnalyticsPage() {
  const supabase = await createClient()

// Date ranges
  const now = new Date()
  const currentMonthStart = startOfMonth(now)
  const currentMonthEnd = endOfMonth(now)
  const lastMonthStart = startOfMonth(subMonths(now, 1))
  const lastMonthEnd = endOfMonth(subMonths(now, 1))

// Sales Analytics
  const { data: currentMonthSales } = await supabase
    .from("sales")
    .select("*")
    .gte("created_at", currentMonthStart.toISOString())
    .lte("created_at", currentMonthEnd.toISOString())

const { data: lastMonthSales } = await supabase
    .from("sales")
    .select("*")
    .gte("created_at", lastMonthStart.toISOString())
    .lte("created_at", lastMonthEnd.toISOString())

const { data: allSales } = await supabase.from("sales").select("*")

const currentMonthRevenue = currentMonthSales?.reduce((sum, sale) => sum + (sale.total_amount || 0), 0) || 0
  const lastMonthRevenue = lastMonthSales?.reduce((sum, sale) => sum + (sale.total_amount || 0), 0) || 0
  const revenueChange = lastMonthRevenue > 0 ? ((currentMonthRevenue - lastMonthRevenue) / lastMonthRevenue) * 100 : 0

const totalRevenue = allSales?.reduce((sum, sale) => sum + (sale.total_amount || 0), 0) || 0
  const averageOrderValue = allSales && allSales.length > 0 ? totalRevenue / allSales.length : 0

// Inventory Analytics
  const { data: products } = await supabase.from("products").select("*")
  const { data: locations } = await supabase.from("locations").select("*")

const inStockProducts = products?.filter((p) => p.status === "in_stock").length || 0
  const soldProducts = products?.filter((p) => p.status === "sold").length || 0
  const totalInventoryValue =
    products?.reduce((sum, p) => sum + (p.status === "in_stock" ? p.selling_price || 0 : 0), 0) || 0

// Sales by type
  const cashSales = allSales?.filter((s) => s.sale_type === "cash").length || 0
  const paymentLinkSales = allSales?.filter((s) => s.sale_type === "payment_link").length || 0
  const onlineSales = allSales?.filter((s) => s.sale_type === "online").length || 0

// Payment status
  const paidSales = allSales?.filter((s) => s.payment_status === "paid").length || 0
  const pendingSales = allSales?.filter((s) => s.payment_status === "pending").length || 0

// Inventory by location
  const inventoryByLocation = await Promise.all(
    (locations || []).map(async (location) => {
      const { count } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("current_location_id", location.id)
        .eq("status", "in_stock")

return {
        location: location.name,
        count: count || 0,
      }
    }),
  )

// Recent activity
  const { data: recentActivity } = await supabase
    .from("activity_log")
    .select("*")
    .order("created_at", { ascending: false })
    .limit(10)

// Top selling products (based on sale items)
  const { data: saleItems } = await supabase.from("sale_items").select(`
      *,
      products (name, brand, model)
    `)

const productSales = saleItems?.reduce(
    (acc, item: any) => {
      const productName = item.products?.name || "Unknown"
      if (!acc[productName]) {
        acc[productName] = {
          name: productName,
          quantity: 0,
          revenue: 0,
        }
      }
      acc[productName].quantity += item.quantity
      acc[productName].revenue += item.total_price
      return acc
    },
    {} as Record<string, { name: string; quantity: number; revenue: number }>,
  )

const topProducts = Object.values(productSales || {})
    .sort((a, b) => b.revenue - a.revenue)
    .slice(0, 5)

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
        <p className="text-muted-foreground">Comprehensive insights into your inventory and sales</p>
      </div>

{/* Key Metrics */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalRevenue.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">All time sales</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">This Month</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${currentMonthRevenue.toFixed(2)}</div>
            <div className="flex items-center gap-1 text-xs">
              {revenueChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-600" />
                  <span className="text-green-600">+{revenueChange.toFixed(1)}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-600" />
                  <span className="text-red-600">{revenueChange.toFixed(1)}%</span>
                </>
              )}
              <span className="text-muted-foreground">from last month</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Avg Order Value</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${averageOrderValue.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">Per transaction</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Inventory Value</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalInventoryValue.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">{inStockProducts} products in stock</p>
          </CardContent>
        </Card>
      </div>

{/* Sales Overview */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5" />
              Sales by Type
            </CardTitle>
            <CardDescription>Distribution of sales channels</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-blue-500" />
                  <span className="text-sm">Cash Sales</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{cashSales}</span>
                  <span className="text-sm text-muted-foreground">
                    ({allSales && allSales.length > 0 ? ((cashSales / allSales.length) * 100).toFixed(0) : 0}%)
                  </span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-green-500" />
                  <span className="text-sm">Payment Links</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{paymentLinkSales}</span>
                  <span className="text-sm text-muted-foreground">
                    ({allSales && allSales.length > 0 ? ((paymentLinkSales / allSales.length) * 100).toFixed(0) : 0}%)
                  </span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-purple-500" />
                  <span className="text-sm">Online Sales</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{onlineSales}</span>
                  <span className="text-sm text-muted-foreground">
                    ({allSales && allSales.length > 0 ? ((onlineSales / allSales.length) * 100).toFixed(0) : 0}%)
                  </span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5" />
              Payment Status
            </CardTitle>
            <CardDescription>Current payment collection status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Badge variant="default">Paid</Badge>
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{paidSales}</span>
                  <span className="text-sm text-muted-foreground">
                    ({allSales && allSales.length > 0 ? ((paidSales / allSales.length) * 100).toFixed(0) : 0}%)
                  </span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Badge variant="secondary">Pending</Badge>
                </div>
                <div className="flex items-center gap-2">
                  <span className="font-semibold">{pendingSales}</span>
                  <span className="text-sm text-muted-foreground">
                    ({allSales && allSales.length > 0 ? ((pendingSales / allSales.length) * 100).toFixed(0) : 0}%)
                  </span>
                </div>
              </div>
              <div className="pt-4 border-t">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Total Sales</span>
                  <span className="text-2xl font-bold">{allSales?.length || 0}</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Inventory & Top Products */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Warehouse className="h-5 w-5" />
              Inventory by Location
            </CardTitle>
            <CardDescription>Product distribution across locations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {inventoryByLocation.map((item) => (
                <div key={item.location} className="flex items-center justify-between p-3 bg-muted rounded">
                  <span className="font-medium">{item.location}</span>
                  <Badge variant="outline">{item.count} products</Badge>
                </div>
              ))}
              {inventoryByLocation.length === 0 && (
                <p className="text-sm text-muted-foreground text-center py-4">No inventory data</p>
              )}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5" />
              Top Selling Products
            </CardTitle>
            <CardDescription>Best performers by revenue</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {topProducts.map((product, index) => (
                <div key={product.name} className="flex items-center justify-between p-3 bg-muted rounded">
                  <div className="flex items-center gap-3">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">
                      {index + 1}
                    </div>
                    <div>
                      <p className="font-medium">{product.name}</p>
                      <p className="text-xs text-muted-foreground">{product.quantity} sold</p>
                    </div>
                  </div>
                  <span className="font-semibold">${product.revenue.toFixed(2)}</span>
                </div>
              ))}
              {topProducts.length === 0 && (
                <p className="text-sm text-muted-foreground text-center py-4">No sales data</p>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Inventory Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Package className="h-5 w-5" />
            Inventory Status
          </CardTitle>
          <CardDescription>Current stock levels and product status</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="p-4 bg-muted rounded">
              <p className="text-sm text-muted-foreground mb-1">In Stock</p>
              <p className="text-2xl font-bold">{inStockProducts}</p>
            </div>
            <div className="p-4 bg-muted rounded">
              <p className="text-sm text-muted-foreground mb-1">Sold</p>
              <p className="text-2xl font-bold">{soldProducts}</p>
            </div>
            <div className="p-4 bg-muted rounded">
              <p className="text-sm text-muted-foreground mb-1">Reserved</p>
              <p className="text-2xl font-bold">{products?.filter((p) => p.status === "reserved").length || 0}</p>
            </div>
            <div className="p-4 bg-muted rounded">
              <p className="text-sm text-muted-foreground mb-1">In Transit</p>
              <p className="text-2xl font-bold">{products?.filter((p) => p.status === "in_transit").length || 0}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Recent Activity */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            Recent Activity
          </CardTitle>
          <CardDescription>Latest system events and actions</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {recentActivity && recentActivity.length > 0 ? (
              recentActivity.map((activity) => (
                <div key={activity.id} className="flex items-start gap-3 p-3 bg-muted rounded text-sm">
                  <Badge variant="outline" className="capitalize">
                    {activity.action}
                  </Badge>
                  <div className="flex-1">
                    <p className="font-medium capitalize">
                      {activity.entity_type} {activity.action}
                    </p>
                    {activity.qr_code_scanned && (
                      <p className="text-xs text-muted-foreground font-mono">QR: {activity.qr_code_scanned}</p>
                    )}
                  </div>
                  <span className="text-xs text-muted-foreground whitespace-nowrap">
                    {format(new Date(activity.created_at), "MMM d, HH:mm")}
                  </span>
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground text-center py-8">No recent activity</p>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="components/shipping-label-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { createShippingLabel } from "@/lib/db/actions"
import { Loader2, Printer } from "lucide-react"

interface ShippingLabelFormProps {
  productId?: string
  saleId?: string
  productData?: any
  saleData?: any
}

export function ShippingLabelForm({ productId, saleId, productData, saleData }: ShippingLabelFormProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [labelData, setLabelData] = useState<any>(null)

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setIsLoading(true)

try {
      const formData = new FormData(e.currentTarget)
      if (productId) formData.append("product_id", productId)
      if (saleId) formData.append("sale_id", saleId)

const result = await createShippingLabel(formData)
      setLabelData(result.data)
    } catch (error) {
      console.error("Failed to create shipping label:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (labelData) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Shipping Label Created</CardTitle>
          <CardDescription>Your shipping label is ready to print</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="border rounded-lg p-6 space-y-4 bg-white text-black">
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-bold text-lg">FROM</h3>
                {labelData.from_address && (
                  <div className="text-sm mt-2">
                    <p>{labelData.from_address.name}</p>
                    <p>{labelData.from_address.street}</p>
                    <p>
                      {labelData.from_address.city}, {labelData.from_address.state} {labelData.from_address.zip}
                    </p>
                    <p>{labelData.from_address.country}</p>
                  </div>
                )}
              </div>
              <div className="text-right">
                <h3 className="font-bold text-lg">TO</h3>
                {labelData.to_address && (
                  <div className="text-sm mt-2">
                    <p>{labelData.to_address.name}</p>
                    <p>{labelData.to_address.street}</p>
                    <p>
                      {labelData.to_address.city}, {labelData.to_address.state} {labelData.to_address.zip}
                    </p>
                    <p>{labelData.to_address.country}</p>
                  </div>
                )}
              </div>
            </div>

<div className="border-t pt-4">
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <p className="font-semibold">Carrier:</p>
                  <p>{labelData.carrier}</p>
                </div>
                <div>
                  <p className="font-semibold">Service:</p>
                  <p>{labelData.service_type}</p>
                </div>
                <div>
                  <p className="font-semibold">Tracking:</p>
                  <p className="font-mono">{labelData.tracking_number}</p>
                </div>
                <div>
                  <p className="font-semibold">Weight:</p>
                  <p>{labelData.weight} lbs</p>
                </div>
              </div>
            </div>

<div className="border-t pt-4 text-center">
              <div className="font-mono text-2xl font-bold">{labelData.tracking_number}</div>
            </div>
          </div>

<div className="flex gap-2">
            <Button onClick={() => window.print()} className="flex-1">
              <Printer className="h-4 w-4 mr-2" />
              Print Label
            </Button>
            <Button variant="outline" onClick={() => setLabelData(null)} className="flex-1 bg-transparent">
              Create Another
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Create Shipping Label</CardTitle>
        <CardDescription>Generate a shipping label for this product</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {productData && (
            <div className="p-4 bg-muted rounded-lg">
              <h4 className="font-semibold mb-2">Product Information</h4>
              <p className="text-sm">
                {productData.brand} {productData.model}
              </p>
              <p className="text-sm text-muted-foreground">{productData.name}</p>
            </div>
          )}

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="carrier">Carrier</Label>
              <Select name="carrier" required>
                <SelectTrigger>
                  <SelectValue placeholder="Select carrier" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="usps">USPS</SelectItem>
                  <SelectItem value="ups">UPS</SelectItem>
                  <SelectItem value="fedex">FedEx</SelectItem>
                  <SelectItem value="dhl">DHL</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="service_type">Service Type</Label>
              <Select name="service_type" required>
                <SelectTrigger>
                  <SelectValue placeholder="Select service" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="standard">Standard</SelectItem>
                  <SelectItem value="express">Express</SelectItem>
                  <SelectItem value="overnight">Overnight</SelectItem>
                  <SelectItem value="priority">Priority</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="tracking_number">Tracking Number</Label>
            <Input
              id="tracking_number"
              name="tracking_number"
              placeholder="Enter tracking number"
              defaultValue={`TRK${Date.now()}`}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="weight">Weight (lbs)</Label>
            <Input id="weight" name="weight" type="number" step="0.01" placeholder="0.00" required />
          </div>

<div className="space-y-2">
            <Label>From Address</Label>
            <Textarea
              name="from_address"
              placeholder='{"name": "Your Store", "street": "123 Main St", "city": "City", "state": "ST", "zip": "12345", "country": "US"}'
              className="font-mono text-xs"
              rows={4}
              required
            />
          </div>

<div className="space-y-2">
            <Label>To Address</Label>
            <Textarea
              name="to_address"
              placeholder='{"name": "Customer Name", "street": "456 Oak Ave", "city": "City", "state": "ST", "zip": "67890", "country": "US"}'
              className="font-mono text-xs"
              rows={4}
              required
            />
          </div>

<Button type="submit" disabled={isLoading} className="w-full">
            {isLoading ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Creating Label...
              </>
            ) : (
              "Create Shipping Label"
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="app/shipping-labels/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Package, Truck, Calendar, Tag } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"

export default async function ShippingLabelsPage() {
  const supabase = await createClient()

const { data: labels } = await supabase
    .from("shipping_labels")
    .select(
      `
      *,
      products (name, brand, model),
      sales (sale_number, customer_name)
    `,
    )
    .order("created_at", { ascending: false })

const statusColors = {
    created: "default",
    printed: "secondary",
    shipped: "outline",
    delivered: "outline",
  } as const

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Shipping Labels</h1>
          <p className="text-muted-foreground">Manage and print shipping labels</p>
        </div>
        <Button asChild>
          <Link href="/shipping-labels/new">
            <Plus className="h-4 w-4 mr-2" />
            Create Label
          </Link>
        </Button>
      </div>

<div className="grid gap-4">
        {labels?.map((label) => (
          <Card key={label.id}>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <Tag className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <CardTitle className="text-lg">
                      {label.products?.brand} {label.products?.model}
                    </CardTitle>
                    <CardDescription>{label.products?.name || "No product"}</CardDescription>
                  </div>
                </div>
                <Badge variant={statusColors[label.status as keyof typeof statusColors]}>{label.status}</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div className="flex items-center gap-2">
                  <Truck className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-muted-foreground">Carrier</p>
                    <p className="font-medium capitalize">{label.carrier || "N/A"}</p>
                  </div>
                </div>

<div className="flex items-center gap-2">
                  <Package className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-muted-foreground">Service</p>
                    <p className="font-medium capitalize">{label.service_type || "N/A"}</p>
                  </div>
                </div>

<div className="flex items-center gap-2">
                  <Tag className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-muted-foreground">Tracking</p>
                    <p className="font-medium font-mono text-xs">{label.tracking_number || "N/A"}</p>
                  </div>
                </div>

<div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <p className="text-muted-foreground">Created</p>
                    <p className="font-medium">{format(new Date(label.created_at), "MMM d, yyyy")}</p>
                  </div>
                </div>
              </div>

{label.sales && (
                <div className="mt-4 p-3 bg-muted rounded-lg">
                  <p className="text-sm">
                    <span className="text-muted-foreground">Sale:</span>{" "}
                    <span className="font-medium">{label.sales.sale_number}</span>
                    {label.sales.customer_name && (
                      <>
                        {" "}
                        - <span className="font-medium">{label.sales.customer_name}</span>
                      </>
                    )}
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>

{labels?.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Tag className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold mb-2">No shipping labels yet</h3>
            <p className="text-sm text-muted-foreground mb-4">Create your first shipping label</p>
            <Button asChild>
              <Link href="/shipping-labels/new">
                <Plus className="h-4 w-4 mr-2" />
                Create Label
              </Link>
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/providers/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { notFound } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Edit, Building2, Mail, Phone, MapPin, Package, Truck } from "lucide-react"
import Link from "next/link"

export default async function ProviderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: provider, error } = await supabase.from("providers").select("*").eq("id", id).single()

if (error || !provider) {
    notFound()
  }

// Get products from this provider
  const { data: products } = await supabase
    .from("products")
    .select("*, locations(name)")
    .eq("provider_id", id)
    .order("created_at", { ascending: false })

// Get shipments from this provider
  const { data: shipments } = await supabase
    .from("inbound_shipments")
    .select("*, locations(name)")
    .eq("provider_id", id)
    .order("created_at", { ascending: false })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">{provider.name}</h1>
          <p className="text-muted-foreground capitalize">{provider.type.replace("_", " ")}</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" asChild className="bg-transparent">
            <Link href={`/providers/${id}/edit`}>
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </Link>
          </Button>
          <Badge variant={provider.is_active ? "default" : "secondary"}>
            {provider.is_active ? "Active" : "Inactive"}
          </Badge>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5" />
              Provider Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="text-sm text-muted-foreground">Country</p>
                <p className="font-medium">{provider.country}</p>
              </div>
            </div>

{provider.contact_email && (
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <div>
                  <p className="text-sm text-muted-foreground">Email</p>
                  <p className="font-medium">{provider.contact_email}</p>
                </div>
              </div>
            )}

{provider.contact_phone && (
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <div>
                  <p className="text-sm text-muted-foreground">Phone</p>
                  <p className="font-medium">{provider.contact_phone}</p>
                </div>
              </div>
            )}

{provider.notes && (
              <div>
                <p className="text-sm text-muted-foreground mb-1">Notes</p>
                <p className="text-sm">{provider.notes}</p>
              </div>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Statistics</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Total Products</span>
              <span className="text-2xl font-bold">{products?.length || 0}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Total Shipments</span>
              <span className="text-2xl font-bold">{shipments?.length || 0}</span>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Package className="h-5 w-5" />
            Products from this Provider
          </CardTitle>
          <CardDescription>All products sourced from {provider.name}</CardDescription>
        </CardHeader>
        <CardContent>
          {products && products.length > 0 ? (
            <div className="space-y-2">
              {products.map((product: any) => (
                <Link
                  key={product.id}
                  href={`/products/${product.id}`}
                  className="flex items-center justify-between p-3 bg-muted rounded hover:bg-accent transition-colors"
                >
                  <div>
                    <p className="font-medium">
                      {product.brand} {product.model}
                    </p>
                    <p className="text-sm text-muted-foreground">{product.name}</p>
                  </div>
                  <div className="flex items-center gap-2">
                    {product.locations && <Badge variant="outline">{product.locations.name}</Badge>}
                    <Badge variant={product.status === "in_stock" ? "default" : "secondary"}>{product.status}</Badge>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground text-center py-8">No products from this provider yet</p>
          )}
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Truck className="h-5 w-5" />
            Shipments from this Provider
          </CardTitle>
          <CardDescription>Inbound shipments from {provider.name}</CardDescription>
        </CardHeader>
        <CardContent>
          {shipments && shipments.length > 0 ? (
            <div className="space-y-2">
              {shipments.map((shipment: any) => (
                <Link
                  key={shipment.id}
                  href={`/shipments/${shipment.id}`}
                  className="flex items-center justify-between p-3 bg-muted rounded hover:bg-accent transition-colors"
                >
                  <div>
                    <p className="font-medium">{shipment.tracking_number || "No tracking"}</p>
                    <p className="text-sm text-muted-foreground">
                      {shipment.carrier || "Unknown carrier"} → {shipment.locations?.name || "Unknown destination"}
                    </p>
                  </div>
                  <Badge variant={shipment.status === "delivered" ? "default" : "secondary"}>{shipment.status}</Badge>
                </Link>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground text-center py-8">No shipments from this provider yet</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/page.tsx" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { createClient } from "@/lib/supabase/server"
import { startOfMonth, endOfMonth, subDays, startOfDay } from "date-fns"
import { TrendingUp, TrendingDown, DollarSign, ShoppingCart, Percent } from "lucide-react"
import { Button } from "@/components/ui/button"

export default async function DashboardPage() {
  const supabase = await createClient()
  const now = new Date()
  const monthStart = startOfMonth(now)
  const monthEnd = endOfMonth(now)
  const last7Days = subDays(startOfDay(now), 7)
  const last30Days = subDays(startOfDay(now), 30)

// Get sales data
  const [
    { data: allSales },
    { data: monthSales },
    { data: last7DaysSales },
    { data: last30DaysSales },
    { data: salesBySaleType },
    { count: totalProducts },
    { data: topProducts },
  ] = await Promise.all([
    supabase.from("sales").select("*").order("created_at", { ascending: false }),
    supabase
      .from("sales")
      .select("*")
      .gte("created_at", monthStart.toISOString())
      .lte("created_at", monthEnd.toISOString()),
    supabase.from("sales").select("*").gte("created_at", last7Days.toISOString()),
    supabase.from("sales").select("*").gte("created_at", last30Days.toISOString()),
    supabase.from("sales").select("sale_type, total_amount, payment_status"),
    supabase.from("products").select("*", { count: "exact", head: true }),
    supabase.from("sale_items").select("product_id, quantity, products(name)").limit(5),
  ])

// Calculate metrics
  const calculateMetrics = (sales: any[]) => {
    const total = sales?.reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0
    const paid =
      sales?.filter((s) => s.payment_status === "paid").reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0
    const pending =
      sales?.filter((s) => s.payment_status === "pending").reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0
    return { total, paid, pending, count: sales?.length || 0 }
  }

const monthMetrics = calculateMetrics(monthSales || [])
  const last7Metrics = calculateMetrics(last7DaysSales || [])
  const last30Metrics = calculateMetrics(last30DaysSales || [])

// Calculate by sale type
  const cashSales =
    salesBySaleType?.filter((s) => s.sale_type === "cash").reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0
  const onlineSales =
    salesBySaleType?.filter((s) => s.sale_type === "online").reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0
  const linkSales =
    salesBySaleType?.filter((s) => s.sale_type === "payment_link").reduce((sum, s) => sum + (s.total_amount || 0), 0) ||
    0

// Calculate approval rate (paid vs total)
  const approvalRate = monthMetrics.count > 0 ? ((monthMetrics.paid / monthMetrics.total) * 100).toFixed(1) : "0.0"

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Dashboard</h1>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" className="bg-transparent">
            Ayer
          </Button>
          <Button variant="outline" size="sm" className="bg-transparent">
            Últimos 7 días
          </Button>
          <Button variant="outline" size="sm" className="bg-transparent">
            Últimos 30 días
          </Button>
          <Button variant="outline" size="sm" className="bg-transparent">
            Últimos 12 meses
          </Button>
        </div>
      </div>

{/* Key Metrics */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className="border-border/40">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Ventas</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{monthMetrics.count}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              <TrendingUp className="h-3 w-3 text-green-500" />
              +6.8% vs. período anterior
            </p>
          </CardContent>
        </Card>

<Card className="border-border/40">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Tasa de Aprobación</CardTitle>
            <Percent className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{approvalRate}%</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              <TrendingUp className="h-3 w-3 text-green-500" />
              +2.8% vs. período anterior
            </p>
          </CardContent>
        </Card>

<Card className="border-border/40">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Ingresos Brutos</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">${monthMetrics.total.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              <TrendingUp className="h-3 w-3 text-green-500" />
              +3.8% vs. período anterior
            </p>
          </CardContent>
        </Card>

<Card className="border-border/40">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Ingresos Netos</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">${monthMetrics.paid.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              <TrendingDown className="h-3 w-3 text-red-500" />
              -1.2% vs. período anterior
            </p>
          </CardContent>
        </Card>
      </div>

{/* Sales Details & Cashflow */}
      <div className="grid gap-4 md:grid-cols-3">
        {/* Sales Details */}
        <Card className="md:col-span-2 border-border/40">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="text-base font-semibold">Detalles de Ventas</CardTitle>
              <p className="text-xs text-muted-foreground">
                Última actualización: {new Date().toLocaleDateString("es-AR")}
              </p>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {/* Header */}
              <div className="grid grid-cols-4 gap-4 text-sm text-muted-foreground pb-2 border-b border-border/40">
                <div>Tipo de Venta</div>
                <div className="text-right">Ventas</div>
                <div className="text-right">Tasa de Aprobación</div>
                <div className="text-right">Ingresos</div>
              </div>

{/* Cash Sales */}
              <div className="grid grid-cols-4 gap-4 items-center">
                <div className="text-sm font-medium">Efectivo</div>
                <div className="text-right">
                  <div className="text-sm font-semibold">
                    {salesBySaleType?.filter((s) => s.sale_type === "cash").length || 0}
                  </div>
                  <div className="w-full bg-muted rounded-full h-1.5 mt-1">
                    <div className="bg-primary h-1.5 rounded-full" style={{ width: "66%" }} />
                  </div>
                </div>
                <div className="text-right text-sm font-semibold">66%</div>
                <div className="text-right text-sm font-semibold">${cashSales.toLocaleString()}</div>
              </div>

{/* Online Sales */}
              <div className="grid grid-cols-4 gap-4 items-center">
                <div className="text-sm font-medium">Online</div>
                <div className="text-right">
                  <div className="text-sm font-semibold">
                    {salesBySaleType?.filter((s) => s.sale_type === "online").length || 0}
                  </div>
                  <div className="w-full bg-muted rounded-full h-1.5 mt-1">
                    <div className="bg-primary h-1.5 rounded-full" style={{ width: "41%" }} />
                  </div>
                </div>
                <div className="text-right text-sm font-semibold">41%</div>
                <div className="text-right text-sm font-semibold">${onlineSales.toLocaleString()}</div>
              </div>

{/* Payment Link Sales */}
              <div className="grid grid-cols-4 gap-4 items-center">
                <div className="text-sm font-medium">Link de Pago</div>
                <div className="text-right">
                  <div className="text-sm font-semibold">
                    {salesBySaleType?.filter((s) => s.sale_type === "payment_link").length || 0}
                  </div>
                  <div className="w-full bg-muted rounded-full h-1.5 mt-1">
                    <div className="bg-primary h-1.5 rounded-full" style={{ width: "65%" }} />
                  </div>
                </div>
                <div className="text-right text-sm font-semibold">65%</div>
                <div className="text-right text-sm font-semibold">${linkSales.toLocaleString()}</div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Cashflow */}
        <Card className="border-border/40">
          <CardHeader>
            <CardTitle className="text-base font-semibold">Flujo de Caja</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="text-xs text-muted-foreground mb-1">Ventas</div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span>Efectivo</span>
                    <span className="font-semibold">${cashSales.toLocaleString()}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span>Online</span>
                    <span className="font-semibold">${onlineSales.toLocaleString()}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span>Link de Pago</span>
                    <span className="font-semibold">${linkSales.toLocaleString()}</span>
                  </div>
                </div>
              </div>

<div className="border-t border-border/40 pt-4">
                <div className="text-xs text-muted-foreground mb-2">Ingresos Brutos</div>
                <div className="text-sm font-semibold">${monthMetrics.total.toLocaleString()}</div>
              </div>

<div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Pendientes</span>
                <span className="font-semibold">${monthMetrics.pending.toLocaleString()}</span>
              </div>

<div className="border-t border-border/40 pt-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-semibold">Ingresos Netos</span>
                  <span className="text-lg font-bold">${monthMetrics.paid.toLocaleString()}</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Overview Stats */}
      <Card className="border-border/40">
        <CardHeader>
          <CardTitle className="text-base font-semibold">Resumen General</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-8">
            <div className="text-center">
              <div className="text-xs text-muted-foreground mb-2">Efectivo</div>
              <div className="text-4xl font-bold">
                {salesBySaleType?.filter((s) => s.sale_type === "cash").length.toLocaleString() || 0}
              </div>
            </div>
            <div className="text-center border-l border-r border-border/40">
              <div className="text-xs text-muted-foreground mb-2">Online</div>
              <div className="text-4xl font-bold">
                {salesBySaleType?.filter((s) => s.sale_type === "online").length.toLocaleString() || 0}
              </div>
            </div>
            <div className="text-center">
              <div className="text-xs text-muted-foreground mb-2">Link de Pago</div>
              <div className="text-4xl font-bold">
                {salesBySaleType?.filter((s) => s.sale_type === "payment_link").length.toLocaleString() || 0}
              </div>
            </div>
          </div>

{/* Simple Chart Placeholder */}
          <div className="mt-8 h-64 relative">
            <div className="absolute inset-0 flex items-end justify-between gap-2 px-4">
              {["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"].map((month, i) => (
                <div key={month} className="flex-1 flex flex-col items-center gap-2">
                  <div className="w-full bg-muted/20 rounded-t" style={{ height: `${Math.random() * 100 + 50}%` }} />
                  <span className="text-xs text-muted-foreground">{month}</span>
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/category-list.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Edit } from "lucide-react"
import Link from "next/link"
import type { Category } from "@/lib/types/database"

interface CategoryListProps {
  categories: Category[]
}

export function CategoryList({ categories }: CategoryListProps) {
  return (
    <div className="grid gap-4">
      {categories.map((category) => {
        const fieldCount = category.field_schema?.fields?.length || 0

return (
          <Card key={category.id} className="p-6">
            <div className="flex items-start justify-between">
              <div className="space-y-2 flex-1">
                <div className="flex items-center gap-3">
                  <h3 className="text-lg font-semibold">{category.name}</h3>
                  <Badge variant="secondary">{fieldCount} campos</Badge>
                </div>
                <p className="text-sm text-muted-foreground">{category.path}</p>

{fieldCount > 0 && (
                  <div className="flex flex-wrap gap-2 mt-3">
                    {category.field_schema.fields.map((field: any) => (
                      <Badge key={field.key} variant="outline" className="text-xs">
                        {field.label}
                        {field.required && <span className="text-destructive ml-1">*</span>}
                      </Badge>
                    ))}
                  </div>
                )}
              </div>

<div className="flex gap-2">
                <Button variant="ghost" size="icon" asChild>
                  <Link href={`/categories/${category.id}/edit`}>
                    <Edit className="h-4 w-4" />
                  </Link>
                </Button>
              </div>
            </div>
          </Card>
        )
      })}

{categories.length === 0 && (
        <Card className="p-12 text-center">
          <p className="text-muted-foreground">No hay categorías creadas</p>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categories/[id]/edit/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { CategorySchemaForm } from "@/components/category-schema-form"
import { notFound } from "next/navigation"

export default async function EditCategoryPage({ params }: { params: { id: string } }) {
  const supabase = await createClient()

const { data: category } = await supabase.from("categories").select("*").eq("id", params.id).single()

if (!category) {
    notFound()
  }

return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Editar Categoría</h1>
        <p className="text-muted-foreground mt-1">Configura los campos personalizados para {category.name}</p>
      </div>

<CategorySchemaForm category={category} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/category-schema-form.tsx" 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Plus, Trash2 } from "lucide-react"
import { updateCategorySchema } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Category } from "@/lib/types/database"

interface CategorySchemaFormProps {
  category: Category
}

interface Field {
  key: string
  label: string
  type: "text" | "number" | "select" | "textarea"
  options?: string[]
  required: boolean
  showInTable: boolean
  tableLabel?: string
}

export function CategorySchemaForm({ category }: CategorySchemaFormProps) {
  const router = useRouter()
  const [fields, setFields] = useState<Field[]>(category.field_schema?.fields || [])
  const [isSubmitting, setIsSubmitting] = useState(false)

const addField = () => {
    setFields([
      ...fields,
      {
        key: "",
        label: "",
        type: "text",
        required: false,
        showInTable: false,
      },
    ])
  }

const removeField = (index: number) => {
    setFields(fields.filter((_, i) => i !== index))
  }

const updateField = (index: number, updates: Partial<Field>) => {
    const newFields = [...fields]
    newFields[index] = { ...newFields[index], ...updates }
    setFields(newFields)
  }

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

try {
      await updateCategorySchema(category.id, { fields })
      router.push("/categories")
      router.refresh()
    } catch (error) {
      console.error("[v0] Failed to update category schema:", error)
      alert("Error al guardar la configuración")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Campos Personalizados</CardTitle>
          <CardDescription>Define los campos que aparecerán al crear productos de esta categoría</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {fields.map((field, index) => (
            <Card key={index} className="p-4">
              <div className="space-y-4">
                <div className="flex items-start gap-4">
                  <div className="flex-1 grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Clave (key)</Label>
                      <Input
                        value={field.key}
                        onChange={(e) => updateField(index, { key: e.target.value })}
                        placeholder="ej: storage, color"
                        required
                      />
                    </div>

<div className="space-y-2">
                      <Label>Etiqueta</Label>
                      <Input
                        value={field.label}
                        onChange={(e) => updateField(index, { label: e.target.value })}
                        placeholder="ej: Almacenamiento, Color"
                        required
                      />
                    </div>

<div className="space-y-2">
                      <Label>Tipo</Label>
                      <Select value={field.type} onValueChange={(value: any) => updateField(index, { type: value })}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="text">Texto</SelectItem>
                          <SelectItem value="number">Número</SelectItem>
                          <SelectItem value="select">Selección</SelectItem>
                          <SelectItem value="textarea">Área de texto</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{field.type === "select" && (
                      <div className="space-y-2">
                        <Label>Opciones (separadas por coma)</Label>
                        <Input
                          value={field.options?.join(", ") || ""}
                          onChange={(e) =>
                            updateField(index, {
                              options: e.target.value.split(",").map((o) => o.trim()),
                            })
                          }
                          placeholder="ej: 64GB, 128GB, 256GB"
                        />
                      </div>
                    )}
                  </div>

<Button type="button" variant="ghost" size="icon" onClick={() => removeField(index)} className="mt-6">
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>

<div className="flex gap-6">
                  <div className="flex items-center gap-2">
                    <Checkbox
                      id={`required-${index}`}
                      checked={field.required}
                      onCheckedChange={(checked) => updateField(index, { required: !!checked })}
                    />
                    <Label htmlFor={`required-${index}`} className="font-normal">
                      Campo obligatorio
                    </Label>
                  </div>

<div className="flex items-center gap-2">
                    <Checkbox
                      id={`showInTable-${index}`}
                      checked={field.showInTable}
                      onCheckedChange={(checked) => updateField(index, { showInTable: !!checked })}
                    />
                    <Label htmlFor={`showInTable-${index}`} className="font-normal">
                      Mostrar en tabla
                    </Label>
                  </div>
                </div>

{field.showInTable && (
                  <div className="space-y-2">
                    <Label>Etiqueta en tabla (opcional)</Label>
                    <Input
                      value={field.tableLabel || ""}
                      onChange={(e) => updateField(index, { tableLabel: e.target.value })}
                      placeholder={field.label}
                    />
                  </div>
                )}
              </div>
            </Card>
          ))}

<Button type="button" variant="outline" onClick={addField} className="w-full bg-transparent">
            <Plus className="h-4 w-4 mr-2" />
            Agregar Campo
          </Button>
        </CardContent>
      </Card>

<div className="flex gap-2">
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? "Guardando..." : "Guardar Configuración"}
        </Button>
        <Button type="button" variant="outline" onClick={() => router.back()}>
          Cancelar
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescript:file="components/product-form.tsx" isQuickEdit="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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { createProduct, updateProduct } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Product, Category, Location, Provider } from "@/lib/types/database"

interface ProductFormProps {
  product?: Product
  categories: Category[]
  locations: Location[]
  providers: Provider[]
}

export function ProductForm({ product, categories, locations, providers }: ProductFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(
    product ? categories.find((c) => c.id === product.category_id) || null : null,
  )
  const router = useRouter()

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

try {
      const formData = new FormData(e.currentTarget)

if (selectedCategory?.field_schema?.fields) {
        const specifications: any = {}
        selectedCategory.field_schema.fields.forEach((field: any) => {
          const value = formData.get(`spec_${field.key}`)
          if (value) {
            specifications[field.key] = value
          }
        })
        formData.set("specifications", JSON.stringify(specifications))
      }

if (product) {
        await updateProduct(product.id, formData)
      } else {
        await createProduct(formData)
      }

router.push("/products")
      router.refresh()
    } catch (err) {
      setError("Failed to save product")
      console.error("[v0] Product form error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{product ? "Edit Product" : "Create New Product"}</CardTitle>
        <CardDescription>
          {product ? "Update product information" : "Add a new product to your inventory"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Basic Information</h3>

<div className="space-y-2">
              <Label htmlFor="name">Product Name *</Label>
              <Input id="name" name="name" defaultValue={product?.name} required />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="brand">Brand</Label>
                <Input id="brand" name="brand" defaultValue={product?.brand || ""} placeholder="e.g., Apple" />
              </div>

<div className="space-y-2">
                <Label htmlFor="model">Model</Label>
                <Input
                  id="model"
                  name="model"
                  defaultValue={product?.model || ""}
                  placeholder="e.g., iPhone 15 Pro Max"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="category_id">Category *</Label>
              <Select
                name="category_id"
                defaultValue={product?.category_id || "none"}
                onValueChange={(value) => {
                  const cat = categories.find((c) => c.id === value)
                  setSelectedCategory(cat || null)
                }}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((cat) => (
                    <SelectItem key={cat.id} value={cat.id}>
                      {cat.path}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

{selectedCategory?.field_schema?.fields && selectedCategory.field_schema.fields.length > 0 && (
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Detalles de {selectedCategory.name}</h3>

{selectedCategory.field_schema.fields.map((field: any) => (
                <div key={field.key} className="space-y-2">
                  <Label htmlFor={`spec_${field.key}`}>
                    {field.label}
                    {field.required && <span className="text-destructive ml-1">*</span>}
                  </Label>

{field.type === "select" ? (
                    <Select
                      name={`spec_${field.key}`}
                      defaultValue={product?.specifications?.[field.key] || ""}
                      required={field.required}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder={`Seleccionar ${field.label.toLowerCase()}`} />
                      </SelectTrigger>
                      <SelectContent>
                        {field.options?.map((option: string) => (
                          <SelectItem key={option} value={option}>
                            {option}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : field.type === "textarea" ? (
                    <Textarea
                      id={`spec_${field.key}`}
                      name={`spec_${field.key}`}
                      defaultValue={product?.specifications?.[field.key] || ""}
                      required={field.required}
                      rows={3}
                    />
                  ) : field.type === "number" ? (
                    <Input
                      id={`spec_${field.key}`}
                      name={`spec_${field.key}`}
                      type="number"
                      defaultValue={product?.specifications?.[field.key] || ""}
                      required={field.required}
                    />
                  ) : (
                    <Input
                      id={`spec_${field.key}`}
                      name={`spec_${field.key}`}
                      type="text"
                      defaultValue={product?.specifications?.[field.key] || ""}
                      required={field.required}
                    />
                  )}
                </div>
              ))}
            </div>
          )}

<div className="space-y-4">
            <h3 className="text-lg font-semibold">Pricing *</h3>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="purchase_price">Purchase Price</Label>
                <Input
                  id="purchase_price"
                  name="purchase_price"
                  type="number"
                  step="0.01"
                  defaultValue={product?.purchase_price || "0.00"}
                  placeholder="0.00"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="selling_price">Selling Price *</Label>
                <Input
                  id="selling_price"
                  name="selling_price"
                  type="number"
                  step="0.01"
                  defaultValue={product?.selling_price || "0.00"}
                  placeholder="0.00"
                  required
                />
              </div>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-lg font-semibold">Location & Provider *</h3>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="location_id">Current Location *</Label>
                <Select name="location_id" defaultValue={product?.current_location_id || "none"} required>
                  <SelectTrigger>
                    <SelectValue placeholder="Select location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.map((loc) => (
                      <SelectItem key={loc.id} value={loc.id}>
                        {loc.name} ({loc.type})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="provider_id">Provider</Label>
                <Select name="provider_id" defaultValue={product?.provider_id || "none"}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {providers.map((prov) => (
                      <SelectItem key={prov.id} value={prov.id}>
                        {prov.name} ({prov.country})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

{product && (
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Status *</h3>

<div className="space-y-2">
                <Label htmlFor="status">Product Status</Label>
                <Select name="status" defaultValue={product.status}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="draft">Borrador</SelectItem>
                    <SelectItem value="in_transit">In Transit</SelectItem>
                    <SelectItem value="in_stock">In Stock</SelectItem>
                    <SelectItem value="reserved">Reserved</SelectItem>
                    <SelectItem value="sold">Sold</SelectItem>
                    <SelectItem value="damaged">Damaged</SelectItem>
                    <SelectItem value="returned">Returned</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          )}

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Saving..." : product ? "Update Product" : "Create Product"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="app/products/new/page.tsx" isMerged="true"
import { ProductForm } from "@/components/product-form"
import { getCategories, getLocations, getProviders } from "@/lib/db/queries"

export default async function NewProductPage() {
  const [categories, locations, providers] = await Promise.all([getCategories(), getLocations(), getProviders()])

return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Add New Product</h1>
        <p className="text-muted-foreground">Create a new product with QR code tracking</p>
      </div>

<ProductForm categories={categories} locations={locations} providers={providers} />
    </div>
  )
}
[V0_FILE]typescript:file="components/new-product-modal.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect, useRef } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectSeparator } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Card } from "@/components/ui/card"
import { createProduct, createCategory } from "@/lib/db/actions"
import { generateQRCode } from "@/lib/qr-code"
import { Printer, Check, Plus, Trash2, ChevronRight } from "lucide-react"
import type { Category, Location, Provider } from "@/lib/types/database"
import { motion, AnimatePresence } from "framer-motion"

interface NewProductModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  categories: Category[]
  locations: Location[]
  providers: Provider[]
  onSuccess?: () => void
}

interface Field {
  key: string
  label: string
  type: "text" | "number" | "select" | "textarea"
  options?: string[]
  required: boolean
  showInTable: boolean
  tableLabel?: string
}

export function NewProductModal({
  open,
  onOpenChange,
  categories: initialCategories,
  locations,
  providers,
  onSuccess,
}: NewProductModalProps) {
  const [step, setStep] = useState<"form" | "category" | "qr">("form")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
  const [categories, setCategories] = useState(initialCategories)
  const [qrCodeData, setQrCodeData] = useState<{ id: string; qrImage: string } | null>(null)
  const [productId, setProductId] = useState<string>("")

const [categoryFields, setCategoryFields] = useState<Field[]>([])
  const [expandedFieldIndex, setExpandedFieldIndex] = useState<number | null>(null)
  const [categoryPath, setCategoryPath] = useState("")
  const [categoryName, setCategoryName] = useState("")
  const [isPathFocused, setIsPathFocused] = useState(false)

const chipRefs = useRef<(HTMLButtonElement | null)[]>([])
  const [formData, setFormData] = useState({})

useEffect(() => {
    setCategories(initialCategories)
  }, [initialCategories])

useEffect(() => {
    if (open) {
      setProductId(crypto.randomUUID())
    }
  }, [open])

const addField = () => {
    const newIndex = categoryFields.length
    setCategoryFields([
      ...categoryFields,
      {
        key: "",
        label: "",
        type: "text",
        required: false,
        showInTable: false,
      },
    ])
    setExpandedFieldIndex(newIndex)
  }

const removeField = (index: number) => {
    const newFields = categoryFields.filter((_, i) => i !== index)
    setCategoryFields(newFields)

if (expandedFieldIndex === index) {
      if (newFields.length > 0) {
        const nextIndex = index < newFields.length ? index : newFields.length - 1
        setExpandedFieldIndex(nextIndex)
      } else {
        setExpandedFieldIndex(null)
      }
    } else if (expandedFieldIndex !== null && expandedFieldIndex > index) {
      setExpandedFieldIndex(expandedFieldIndex - 1)
    }
  }

const updateField = (index: number, updates: Partial<Field>) => {
    const newFields = [...categoryFields]

if (updates.key !== undefined) {
      updates.key = updates.key.toLowerCase().replace(/\s+/g, "_")
    }
    if (updates.label !== undefined && updates.label.length > 0) {
      updates.label = updates.label.charAt(0).toUpperCase() + updates.label.slice(1)
    }

newFields[index] = { ...newFields[index], ...updates }
    setCategoryFields(newFields)
  }

const handleFieldChipClick = (index: number) => {
    setExpandedFieldIndex(index)
    if (chipRefs.current[index]) {
      chipRefs.current[index]?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center",
      })
    }
  }

const handleCreateCategory = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const categoryFormData = new FormData(e.currentTarget)

// Path should only contain parent categories
      categoryFormData.set("path", categoryPath.trim())

if (categoryFields.length > 0) {
        categoryFormData.set("field_schema", JSON.stringify({ fields: categoryFields }))
      }

const result = await createCategory(categoryFormData)

if (result.success && result.data) {
        const updatedCategories = [...categories, result.data]
        setCategories(updatedCategories)
        setSelectedCategory(result.data)
        setCategoryFields([])
        setCategoryName("")
        setCategoryPath("")
        setStep("form")
        onSuccess?.()
      }
    } catch (err) {
      console.error("[v0] Category creation error:", err)
      setError("Failed to create category")
    } finally {
      setIsSubmitting(false)
    }
  }

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

try {
      const formDataObj = new FormData(e.currentTarget)

// Add specifications if category has schema
      if (selectedCategory?.field_schema?.fields) {
        const specifications: any = {}
        selectedCategory.field_schema.fields.forEach((field: any) => {
          const value = formDataObj.get(`spec_${field.key}`)
          if (value) {
            specifications[field.key] = value
          }
        })
        formDataObj.set("specifications", JSON.stringify(specifications))
      }

// Set status as draft
      formDataObj.set("status", "draft")

const result = await createProduct(formDataObj)

if (result.success && result.data) {
        // Generate QR code image
        const qrImage = await generateQRCode(result.data.id)
        setQrCodeData({ id: result.data.id, qrImage })
        setStep("qr")
      }
    } catch (err) {
      console.error("[v0] Product creation error:", err)
      setError("Failed to create product")
    } finally {
      setIsSubmitting(false)
    }
  }

const handlePrint = () => {
    if (!qrCodeData) return

const handleFinish = () => {
    setStep("form")
    setQrCodeData(null)
    setSelectedCategory(null)
    setFormData({})
    setCategoryFields([])
    setProductId(crypto.randomUUID())
    onOpenChange(false)
    onSuccess?.()
  }

const renderPathWithChevrons = (path: string, appendName?: string) => {
    const segments = path
      .split("/")
      .map((s) => s.trim())
      .filter(Boolean)

if (appendName && appendName.trim()) {
      segments.push(appendName.trim())
    }

if (segments.length === 0) return null

return (
      <div className="absolute inset-0 flex items-center px-3 pointer-events-none text-xs">
        {segments.map((segment, index) => (
          <div key={index} className="flex items-center">
            {index > 0 && <ChevronRight className="h-3 w-3 mx-1 text-muted-foreground" />}
            <span className={index === segments.length - 1 && appendName ? "text-muted-foreground" : "text-foreground"}>
              {segment}
            </span>
          </div>
        ))}
      </div>
    )
  }

const renderCategoryOption = (path: string) => {
    const segments = path
      .split("/")
      .map((s) => s.trim())
      .filter(Boolean)

if (segments.length === 0) return path

return (
      <div className="flex items-center">
        {segments.map((segment, index) => (
          <div key={index} className="flex items-center">
            {index > 0 && <ChevronRight className="h-3 w-3 mx-1 text-muted-foreground shrink-0" />}
            <span>{segment}</span>
          </div>
        ))}
      </div>
    )
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col">
        {step === "form" ? (
          <>
            <DialogHeader>
              <DialogTitle>Nuevo producto</DialogTitle>
              <DialogDescription className="font-mono text-xs">{productId}</DialogDescription>
            </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4 overflow-y-auto flex-1 pr-2">
              <div className="space-y-4">
                <div className="grid grid-cols-3 gap-3">
                  <div className="col-span-2 space-y-1.5">
                    <Label htmlFor="name" className="text-xs">
                      Nombre del Producto *
                    </Label>
                    <Input id="name" name="name" placeholder="Ej: iPhone 13 Pro" required className="h-9" />
                  </div>

<div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label htmlFor="brand" className="text-xs">
                      Marca
                    </Label>
                    <Input id="brand" name="brand" placeholder="Ej: Apple" className="h-9" />
                  </div>

<div className="space-y-1.5">
                    <Label htmlFor="model" className="text-xs">
                      Modelo
                    </Label>
                    <Input id="model" name="model" placeholder="Ej: A2483" className="h-9" />
                  </div>
                </div>

<div className="space-y-1.5">
                  <Label htmlFor="category_id" className="text-xs">
                    Categoría *
                  </Label>
                  <Select
                    name="category_id"
                    value={selectedCategory?.id}
                    onValueChange={(value) => {
                      if (value === "__new__") {
                        setStep("category")
                      } else {
                        const cat = categories.find((c) => c.id === value)
                        setSelectedCategory(cat || null)
                      }
                    }}
                    required
                  >
                    <SelectTrigger className="h-9">
                      <SelectValue placeholder="Seleccionar categoría" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((cat) => (
                        <SelectItem key={cat.id} value={cat.id}>
                          {renderCategoryOption(cat.path)}
                        </SelectItem>
                      ))}
                      <SelectSeparator />
                      <SelectItem value="__new__">+ Nueva categoría</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{selectedCategory?.field_schema?.fields && selectedCategory.field_schema.fields.length > 0 && (
                  <div className="space-y-3 border-t pt-3">
                    <h3 className="font-medium text-sm">Detalles de {selectedCategory.name}</h3>
                    <div className="grid grid-cols-2 gap-3">
                      {selectedCategory.field_schema.fields.map((field: any) => (
                        <div
                          key={field.key}
                          className={field.type === "textarea" ? "col-span-2" : "col-span-1 space-y-1.5"}
                        >
                          <Label htmlFor={`spec_${field.key}`} className="text-xs">
                            {field.label}
                            {field.required && <span className="text-destructive ml-1">*</span>}
                          </Label>

{field.type === "select" ? (
                            <Select name={`spec_${field.key}`} required={field.required}>
                              <SelectTrigger className="h-9">
                                <SelectValue placeholder={field.label} />
                              </SelectTrigger>
                              <SelectContent>
                                {field.options?.map((option: string) => (
                                  <SelectItem key={option} value={option}>
                                    {option}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          ) : field.type === "textarea" ? (
                            <Textarea
                              id={`spec_${field.key}`}
                              name={`spec_${field.key}`}
                              placeholder={field.label}
                              required={field.required}
                              className="min-h-[60px]"
                            />
                          ) : field.type === "number" ? (
                            <Input
                              id={`spec_${field.key}`}
                              name={`spec_${field.key}`}
                              type="number"
                              step="0.01"
                              placeholder={field.label}
                              required={field.required}
                              className="h-9"
                            />
                          ) : (
                            <Input
                              id={`spec_${field.key}`}
                              name={`spec_${field.key}`}
                              type="text"
                              placeholder={field.label}
                              required={field.required}
                              className="h-9"
                            />
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

<div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label htmlFor="purchase_price" className="text-xs">
                      Precio de Compra
                    </Label>
                    <Input
                      id="purchase_price"
                      name="purchase_price"
                      type="number"
                      step="0.01"
                      placeholder="0.00"
                      className="h-9"
                    />
                  </div>

<div className="space-y-1.5">
                    <Label htmlFor="selling_price" className="text-xs">
                      Precio de Venta *
                    </Label>
                    <Input
                      id="selling_price"
                      name="selling_price"
                      type="number"
                      step="0.01"
                      placeholder="0.00"
                      required
                      className="h-9"
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label htmlFor="location_id" className="text-xs">
                      Ubicación *
                    </Label>
                    <Select name="location_id" required>
                      <SelectTrigger className="h-9">
                        <SelectValue placeholder="Seleccionar ubicación" />
                      </SelectTrigger>
                      <SelectContent>
                        {locations.map((loc) => (
                          <SelectItem key={loc.id} value={loc.id}>
                            {loc.name} ({loc.type})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-1.5">
                    <Label htmlFor="provider_id" className="text-xs">
                      Proveedor
                    </Label>
                    <Select name="provider_id">
                      <SelectTrigger className="h-9">
                        <SelectValue placeholder="Seleccionar proveedor" />
                      </SelectTrigger>
                      <SelectContent>
                        {providers.map((prov) => (
                          <SelectItem key={prov.id} value={prov.id}>
                            {prov.name} ({prov.country})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2 justify-end pt-2 border-t">
                <Button type="button" variant="outline" onClick={() => onOpenChange(false)} size="sm">
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSubmitting} size="sm">
                  {isSubmitting ? "Creando..." : "Crear Producto"}
                </Button>
              </div>
            </form>
          </>
        ) : step === "category" ? (
          <>
            <DialogHeader>
              <DialogTitle>Nueva categoría</DialogTitle>
              <DialogDescription>Define la categoría y sus campos personalizados</DialogDescription>
            </DialogHeader>

<form onSubmit={handleCreateCategory} className="space-y-4 overflow-y-auto flex-1 pr-2">
              <div className="space-y-3">
                <div className="space-y-1.5">
                  <Label htmlFor="cat_name" className="text-xs">
                    Nombre de Categoría *
                  </Label>
                  <Input
                    id="cat_name"
                    name="name"
                    value={categoryName}
                    onChange={(e) => setCategoryName(e.target.value)}
                    placeholder="Ej: Fundas"
                    required
                    className="h-9"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="cat_path" className="text-xs">
                    Ruta
                  </Label>
                  <div className="relative">
                    <Input
                      id="cat_path"
                      name="path"
                      value={categoryPath}
                      onChange={(e) => setCategoryPath(e.target.value)}
                      onFocus={() => setIsPathFocused(true)}
                      onBlur={() => setIsPathFocused(false)}
                      placeholder="Ej: Electronica / Telefonos / Accesorios"
                      className="h-9"
                      style={{ color: categoryPath && !isPathFocused ? "transparent" : "inherit" }}
                    />
                    {categoryPath && !isPathFocused && renderPathWithChevrons(categoryPath, categoryName)}
                  </div>
                  <p className="text-[10px] text-muted-foreground">
                    Usa "/" para crear subcategorías. El nombre de la categoría se agregará automáticamente al final.
                  </p>
                </div>
              </div>

<div className="space-y-3 border-t pt-3">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium text-sm">Campos Personalizados</h3>
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    onClick={addField}
                    className="h-8 w-8 bg-transparent"
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>

{categoryFields.length === 0 ? (
                  <p className="text-xs text-muted-foreground">
                    No hay campos personalizados. Agrega campos para capturar información específica de esta categoría.
                  </p>
                ) : (
                  <div className="space-y-3">
                    <div
                      className="flex gap-2 overflow-x-auto pb-2"
                      style={{
                        scrollbarWidth: "none",
                        msOverflowStyle: "none",
                        WebkitOverflowScrolling: "touch",
                      }}
                    >
                      <style jsx>{`
                        div::-webkit-scrollbar {
                          display: none;
                        }
                      `}</style>
                      {categoryFields.map((field, index) => (
                        <Button
                          key={index}
                          ref={(el) => {
                            chipRefs.current[index] = el
                          }}
                          type="button"
                          variant={expandedFieldIndex === index ? "default" : "outline"}
                          size="sm"
                          onClick={() => handleFieldChipClick(index)}
                          className="shrink-0 h-8 text-xs"
                        >
                          {field.label || `Campo ${index + 1}`}
                        </Button>
                      ))}
                    </div>

{categoryFields.length > 0 && (
                      <div className="min-h-[200px]">
                        <AnimatePresence mode="wait">
                          {expandedFieldIndex !== null && categoryFields[expandedFieldIndex] && (
                            <motion.div
                              key={expandedFieldIndex}
                              initial={{ opacity: 0, y: -10 }}
                              animate={{ opacity: 1, y: 0 }}
                              exit={{ opacity: 0, y: -10 }}
                              transition={{ duration: 0.15, ease: "easeOut" }}
                            >
                              <Card className="p-3">
                                <div className="space-y-3">
                                  <div className="flex items-start gap-2">
                                    <div className="flex-1 grid grid-cols-2 gap-2">
                                      <div className="space-y-1">
                                        <Label className="text-xs">Clave *</Label>
                                        <Input
                                          value={categoryFields[expandedFieldIndex].key}
                                          onChange={(e) => updateField(expandedFieldIndex, { key: e.target.value })}
                                          placeholder="storage"
                                          required
                                          className="h-8 text-xs"
                                        />
                                      </div>

<div className="space-y-1">
                                        <Label className="text-xs">Etiqueta *</Label>
                                        <Input
                                          value={categoryFields[expandedFieldIndex].label}
                                          onChange={(e) => updateField(expandedFieldIndex, { label: e.target.value })}
                                          placeholder="Almacenamiento"
                                          required
                                          className="h-8 text-xs"
                                        />
                                      </div>

<div className="space-y-1">
                                        <Label className="text-xs">Tipo</Label>
                                        <Select
                                          value={categoryFields[expandedFieldIndex].type}
                                          onValueChange={(value: any) =>
                                            updateField(expandedFieldIndex, { type: value })
                                          }
                                        >
                                          <SelectTrigger className="h-8 text-xs">
                                            <SelectValue />
                                          </SelectTrigger>
                                          <SelectContent>
                                            <SelectItem value="text">Texto</SelectItem>
                                            <SelectItem value="number">Número</SelectItem>
                                            <SelectItem value="select">Selección</SelectItem>
                                            <SelectItem value="textarea">Área de texto</SelectItem>
                                          </SelectContent>
                                        </Select>
                                      </div>

{categoryFields[expandedFieldIndex].type === "select" && (
                                        <div className="space-y-1">
                                          <Label className="text-xs">Opciones (separadas por coma)</Label>
                                          <Input
                                            value={categoryFields[expandedFieldIndex].options?.join(", ") || ""}
                                            onChange={(e) =>
                                              updateField(expandedFieldIndex, {
                                                options: e.target.value.split(",").map((o) => o.trim()),
                                              })
                                            }
                                            placeholder="64GB, 128GB, 256GB"
                                            className="h-8 text-xs"
                                          />
                                        </div>
                                      )}
                                    </div>

<Button
                                      type="button"
                                      variant="ghost"
                                      size="icon"
                                      onClick={() => removeField(expandedFieldIndex)}
                                      className="h-8 w-8 mt-4"
                                    >
                                      <Trash2 className="h-3 w-3" />
                                    </Button>
                                  </div>

<div className="flex gap-4">
                                    <div className="flex items-center gap-2">
                                      <Checkbox
                                        id={`required-${expandedFieldIndex}`}
                                        checked={categoryFields[expandedFieldIndex].required}
                                        onCheckedChange={(checked) =>
                                          updateField(expandedFieldIndex, { required: !!checked })
                                        }
                                      />
                                      <Label htmlFor={`required-${expandedFieldIndex}`} className="text-xs font-normal">
                                        Obligatorio
                                      </Label>
                                    </div>

<div className="flex items-center gap-2">
                                      <Checkbox
                                        id={`showInTable-${expandedFieldIndex}`}
                                        checked={categoryFields[expandedFieldIndex].showInTable}
                                        onCheckedChange={(checked) =>
                                          updateField(expandedFieldIndex, { showInTable: !!checked })
                                        }
                                      />
                                      <Label
                                        htmlFor={`showInTable-${expandedFieldIndex}`}
                                        className="text-xs font-normal"
                                      >
                                        Mostrar en tabla
                                      </Label>
                                    </div>
                                  </div>
                                </div>
                              </Card>
                            </motion.div>
                          )}
                        </AnimatePresence>
                      </div>
                    )}
                  </div>
                )}
              </div>

<div className="flex gap-2 justify-end pt-2">
                <Button type="button" size="sm" variant="outline" onClick={() => setStep("form")}>
                  Cancelar
                </Button>
                <Button type="submit" size="sm" disabled={isSubmitting}>
                  {isSubmitting ? "Creando..." : "Crear"}
                </Button>
              </div>
            </form>
          </>
        ) : (
          <>
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                Producto Creado
              </DialogTitle>
              <DialogDescription>Tu producto ha sido guardado como borrador</DialogDescription>
            </DialogHeader>

<div className="space-y-6 flex-1 flex flex-col">
              <div className="flex flex-col items-center justify-center p-6 border rounded-lg bg-muted/50 flex-1">
                {qrCodeData && (
                  <>
                    <img src={qrCodeData.qrImage || "/placeholder.svg"} alt="QR Code" className="w-48 h-48" />
                    <p className="text-xs text-muted-foreground mt-4 font-mono break-all text-center max-w-md">
                      {qrCodeData.id}
                    </p>
                  </>
                )}
              </div>

<div className="flex gap-2 justify-end border-t pt-4">
                <Button variant="outline" onClick={handlePrint} size="sm">
                  <Printer className="h-4 w-4 mr-2" />
                  Imprimir QR
                </Button>
                <Button onClick={handleFinish} size="sm">
                  Finalizar
                </Button>
              </div>
            </div>
          </>
        )}
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/category-creation-modal.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Card } from "@/components/ui/card"
import { createCategory } from "@/lib/db/actions"
import { Plus, Trash2, ChevronRight } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

interface CategoryCreationModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSuccess?: () => void
}

interface Field {
  key: string
  label: string
  type: "text" | "number" | "select" | "textarea"
  options?: string[]
  required: boolean
  showInTable: boolean
  tableLabel?: string
}

export function CategoryCreationModal({ open, onOpenChange, onSuccess }: CategoryCreationModalProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [categoryFields, setCategoryFields] = useState<Field[]>([])
  const [expandedFieldIndex, setExpandedFieldIndex] = useState<number | null>(null)
  const [categoryPath, setCategoryPath] = useState("")
  const [categoryName, setCategoryName] = useState("")
  const [isPathFocused, setIsPathFocused] = useState(false)

const chipRefs = useRef<(HTMLButtonElement | null)[]>([])

const removeField = (index: number) => {
    const newFields = categoryFields.filter((_, i) => i !== index)
    setCategoryFields(newFields)

const updateField = (index: number, updates: Partial<Field>) => {
    const newFields = [...categoryFields]

newFields[index] = { ...newFields[index], ...updates }
    setCategoryFields(newFields)
  }

const handleCreateCategory = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const categoryFormData = new FormData(e.currentTarget)
      categoryFormData.set("path", categoryPath.trim())

if (categoryFields.length > 0) {
        categoryFormData.set("field_schema", JSON.stringify({ fields: categoryFields }))
      }

const result = await createCategory(categoryFormData)

if (result.success && result.data) {
        setCategoryFields([])
        setCategoryName("")
        setCategoryPath("")
        onOpenChange(false)
        onSuccess?.()
      }
    } catch (err) {
      console.error("[v0] Category creation error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

const renderPathWithChevrons = (path: string, appendName?: string) => {
    const segments = path
      .split("/")
      .map((s) => s.trim())
      .filter(Boolean)

if (appendName && appendName.trim()) {
      segments.push(appendName.trim())
    }

if (segments.length === 0) return null

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>Nueva categoría</DialogTitle>
          <DialogDescription>Define la categoría y sus campos personalizados</DialogDescription>
        </DialogHeader>

<form onSubmit={handleCreateCategory} className="space-y-4 overflow-y-auto flex-1 pr-2">
          <div className="space-y-3">
            <div className="space-y-1.5">
              <Label htmlFor="cat_name" className="text-xs">
                Nombre de Categoría *
              </Label>
              <Input
                id="cat_name"
                name="name"
                value={categoryName}
                onChange={(e) => setCategoryName(e.target.value)}
                placeholder="Ej: Fundas"
                required
                className="h-9"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="cat_path" className="text-xs">
                Ruta
              </Label>
              <div className="relative">
                <Input
                  id="cat_path"
                  name="path"
                  value={categoryPath}
                  onChange={(e) => setCategoryPath(e.target.value)}
                  onFocus={() => setIsPathFocused(true)}
                  onBlur={() => setIsPathFocused(false)}
                  placeholder="Ej: Electronica / Telefonos / Accesorios"
                  className="h-9"
                  style={{ color: categoryPath && !isPathFocused ? "transparent" : "inherit" }}
                />
                {categoryPath && !isPathFocused && renderPathWithChevrons(categoryPath, categoryName)}
              </div>
              <p className="text-[10px] text-muted-foreground">
                Usa "/" para crear subcategorías. El nombre de la categoría se agregará automáticamente al final.
              </p>
            </div>
          </div>

<div className="space-y-3 border-t pt-3">
            <div className="flex items-center justify-between">
              <h3 className="font-medium text-sm">Campos Personalizados</h3>
              <Button type="button" variant="outline" size="icon" onClick={addField} className="h-8 w-8 bg-transparent">
                <Plus className="h-4 w-4" />
              </Button>
            </div>

{categoryFields.length === 0 ? (
              <p className="text-xs text-muted-foreground">
                No hay campos personalizados. Agrega campos para capturar información específica de esta categoría.
              </p>
            ) : (
              <div className="space-y-3">
                <div
                  className="flex gap-2 overflow-x-auto pb-2"
                  style={{
                    scrollbarWidth: "none",
                    msOverflowStyle: "none",
                    WebkitOverflowScrolling: "touch",
                  }}
                >
                  <style jsx>{`
                    div::-webkit-scrollbar {
                      display: none;
                    }
                  `}</style>
                  {categoryFields.map((field, index) => (
                    <Button
                      key={index}
                      ref={(el) => {
                        chipRefs.current[index] = el
                      }}
                      type="button"
                      variant={expandedFieldIndex === index ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleFieldChipClick(index)}
                      className="shrink-0 h-8 text-xs"
                    >
                      {field.label || `Campo ${index + 1}`}
                    </Button>
                  ))}
                </div>

{categoryFields.length > 0 && (
                  <div className="min-h-[200px]">
                    <AnimatePresence mode="wait">
                      {expandedFieldIndex !== null && categoryFields[expandedFieldIndex] && (
                        <motion.div
                          key={expandedFieldIndex}
                          initial={{ opacity: 0, y: -10 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -10 }}
                          transition={{ duration: 0.15, ease: "easeOut" }}
                        >
                          <Card className="p-3">
                            <div className="space-y-3">
                              <div className="flex items-start gap-2">
                                <div className="flex-1 grid grid-cols-2 gap-2">
                                  <div className="space-y-1">
                                    <Label className="text-xs">Clave *</Label>
                                    <Input
                                      value={categoryFields[expandedFieldIndex].key}
                                      onChange={(e) => updateField(expandedFieldIndex, { key: e.target.value })}
                                      placeholder="storage"
                                      required
                                      className="h-8 text-xs"
                                    />
                                  </div>

<div className="space-y-1">
                                    <Label className="text-xs">Etiqueta *</Label>
                                    <Input
                                      value={categoryFields[expandedFieldIndex].label}
                                      onChange={(e) => updateField(expandedFieldIndex, { label: e.target.value })}
                                      placeholder="Almacenamiento"
                                      required
                                      className="h-8 text-xs"
                                    />
                                  </div>

<div className="space-y-1">
                                    <Label className="text-xs">Tipo</Label>
                                    <Select
                                      value={categoryFields[expandedFieldIndex].type}
                                      onValueChange={(value: any) => updateField(expandedFieldIndex, { type: value })}
                                    >
                                      <SelectTrigger className="h-8 text-xs">
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="text">Texto</SelectItem>
                                        <SelectItem value="number">Número</SelectItem>
                                        <SelectItem value="select">Selección</SelectItem>
                                        <SelectItem value="textarea">Área de texto</SelectItem>
                                      </SelectContent>
                                    </Select>
                                  </div>

{categoryFields[expandedFieldIndex].type === "select" && (
                                    <div className="space-y-1">
                                      <Label className="text-xs">Opciones (separadas por coma)</Label>
                                      <Input
                                        value={categoryFields[expandedFieldIndex].options?.join(", ") || ""}
                                        onChange={(e) =>
                                          updateField(expandedFieldIndex, {
                                            options: e.target.value.split(",").map((o) => o.trim()),
                                          })
                                        }
                                        placeholder="64GB, 128GB, 256GB"
                                        className="h-8 text-xs"
                                      />
                                    </div>
                                  )}
                                </div>

<Button
                                  type="button"
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => removeField(expandedFieldIndex)}
                                  className="h-8 w-8 mt-4"
                                >
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              </div>

<div className="flex gap-4">
                                <div className="flex items-center gap-2">
                                  <Checkbox
                                    id={`required-${expandedFieldIndex}`}
                                    checked={categoryFields[expandedFieldIndex].required}
                                    onCheckedChange={(checked) =>
                                      updateField(expandedFieldIndex, { required: !!checked })
                                    }
                                  />
                                  <Label htmlFor={`required-${expandedFieldIndex}`} className="text-xs font-normal">
                                    Obligatorio
                                  </Label>
                                </div>

<div className="flex items-center gap-2">
                                  <Checkbox
                                    id={`showInTable-${expandedFieldIndex}`}
                                    checked={categoryFields[expandedFieldIndex].showInTable}
                                    onCheckedChange={(checked) =>
                                      updateField(expandedFieldIndex, { showInTable: !!checked })
                                    }
                                  />
                                  <Label htmlFor={`showInTable-${expandedFieldIndex}`} className="text-xs font-normal">
                                    Mostrar en tabla
                                  </Label>
                                </div>
                              </div>
                            </div>
                          </Card>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                )}
              </div>
            )}
          </div>

<div className="flex gap-2 justify-end pt-2">
            <Button type="button" size="sm" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" size="sm" disabled={isSubmitting}>
              {isSubmitting ? "Creando..." : "Crear"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/app-sidebar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Home, Package, Truck, BarChart3, ChevronDown, LogOut, Settings } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState } from "react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
  SidebarFooter,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
} from "@/components/ui/sidebar"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"

const menuStructure = {
  main: [{ title: "Panel Principal", icon: Home, href: "/" }],
  inventory: {
    title: "Inventario",
    icon: Package,
    items: [
      { title: "Productos", href: "/products" },
      { title: "Ingresos", href: "/ingresos" },
      { title: "Categorías", href: "/categories" },
      { title: "Ubicaciones", href: "/locations" },
    ],
  },
  operations: {
    title: "Operaciones",
    icon: Truck,
    items: [
      { title: "Proveedores", href: "/providers" },
      { title: "Envíos", href: "/shipments" },
      { title: "Etiquetas de Envío", href: "/shipping-labels" },
    ],
  },
  sales: {
    title: "Ventas y Análisis",
    icon: BarChart3,
    items: [
      { title: "Ventas", href: "/sales" },
      { title: "Análisis", href: "/analytics" },
    ],
  },
  settings: [{ title: "Configuración", icon: Settings, href: "/settings" }],
}

export function AppSidebar() {
  const pathname = usePathname()
  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
    inventory: true,
    operations: true,
    sales: true,
  })

const toggleSection = (section: string) => {
    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }))
  }

const isActive = (href: string) => pathname === href

return (
    <Sidebar className="border-r border-sidebar-border">
      <SidebarHeader className="border-b border-sidebar-border p-4">
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
            <Package className="h-5 w-5 text-primary-foreground" />
          </div>
          <div>
            <h2 className="text-sm font-semibold">Inventario de Tienda</h2>
            <p className="text-xs text-muted-foreground">Sistema de Seguimiento QR</p>
          </div>
        </div>
      </SidebarHeader>

<SidebarContent className="px-2 py-4">
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuStructure.main.map((item) => (
                <SidebarMenuItem key={item.href}>
                  <SidebarMenuButton asChild isActive={isActive(item.href)} className="h-9">
                    <Link href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

<SidebarGroup>
          <Collapsible open={openSections.inventory} onOpenChange={() => toggleSection("inventory")}>
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton className="h-9 w-full">
                  <menuStructure.inventory.icon className="h-4 w-4" />
                  <span className="flex-1 text-left">{menuStructure.inventory.title}</span>
                  <ChevronDown className={cn("h-4 w-4 transition-transform", openSections.inventory && "rotate-180")} />
                </SidebarMenuButton>
              </CollapsibleTrigger>
            </SidebarMenuItem>
            <CollapsibleContent>
              <SidebarMenuSub>
                {menuStructure.inventory.items.map((item) => (
                  <SidebarMenuSubItem key={item.href}>
                    <SidebarMenuSubButton asChild isActive={isActive(item.href)}>
                      <Link href={item.href}>{item.title}</Link>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                ))}
              </SidebarMenuSub>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

<SidebarGroup>
          <Collapsible open={openSections.operations} onOpenChange={() => toggleSection("operations")}>
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton className="h-9 w-full">
                  <menuStructure.operations.icon className="h-4 w-4" />
                  <span className="flex-1 text-left">{menuStructure.operations.title}</span>
                  <ChevronDown
                    className={cn("h-4 w-4 transition-transform", openSections.operations && "rotate-180")}
                  />
                </SidebarMenuButton>
              </CollapsibleTrigger>
            </SidebarMenuItem>
            <CollapsibleContent>
              <SidebarMenuSub>
                {menuStructure.operations.items.map((item) => (
                  <SidebarMenuSubItem key={item.href}>
                    <SidebarMenuSubButton asChild isActive={isActive(item.href)}>
                      <Link href={item.href}>{item.title}</Link>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                ))}
              </SidebarMenuSub>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

<SidebarGroup>
          <Collapsible open={openSections.sales} onOpenChange={() => toggleSection("sales")}>
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton className="h-9 w-full">
                  <menuStructure.sales.icon className="h-4 w-4" />
                  <span className="flex-1 text-left">{menuStructure.sales.title}</span>
                  <ChevronDown className={cn("h-4 w-4 transition-transform", openSections.sales && "rotate-180")} />
                </SidebarMenuButton>
              </CollapsibleTrigger>
            </SidebarMenuItem>
            <CollapsibleContent>
              <SidebarMenuSub>
                {menuStructure.sales.items.map((item) => (
                  <SidebarMenuSubItem key={item.href}>
                    <SidebarMenuSubButton asChild isActive={isActive(item.href)}>
                      <Link href={item.href}>{item.title}</Link>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                ))}
              </SidebarMenuSub>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

<SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuStructure.settings.map((item) => (
                <SidebarMenuItem key={item.href}>
                  <SidebarMenuButton asChild isActive={isActive(item.href)} className="h-9">
                    <Link href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

<SidebarFooter className="border-t border-sidebar-border p-2">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton className="h-9">
              <LogOut className="h-4 w-4" />
              <span>Cerrar Sesión</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="components/qr-code-print-grid.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { generateQRCode } from "@/lib/qr-code"

interface Product {
  id: string
  name: string | null
  brand: string | null
  model: string | null
}

interface QRCodePrintGridProps {
  products: Product[]
}

export function QRCodePrintGrid({ products }: QRCodePrintGridProps) {
  const [qrCodes, setQrCodes] = useState<Record<string, string>>({})

useEffect(() => {
    // Generate QR codes for all products
    async function generateAllQRCodes() {
      const codes: Record<string, string> = {}

for (const product of products) {
        try {
          // QR code contains the product ID
          const qrDataUrl = await generateQRCode(product.id)
          codes[product.id] = qrDataUrl
        } catch (error) {
          console.error(`[v0] Error generating QR for product ${product.id}:`, error)
        }
      }

setQrCodes(codes)
    }

generateAllQRCodes()
  }, [products])

return (
    <div className="grid grid-cols-3 gap-4 print:grid-cols-4">
      {products.map((product) => (
        <div
          key={product.id}
          className="border rounded-lg p-4 flex flex-col items-center gap-2 print:break-inside-avoid"
        >
          {qrCodes[product.id] ? (
            <img
              src={qrCodes[product.id] || "/placeholder.svg"}
              alt={`QR Code for ${product.name || product.id}`}
              className="w-full h-auto"
            />
          ) : (
            <div className="w-full aspect-square bg-muted animate-pulse rounded" />
          )}
          <div className="text-center">
            <p className="font-medium text-sm line-clamp-2">
              {product.name || `${product.brand || ""} ${product.model || ""}`.trim() || "Producto"}
            </p>
            <p className="text-xs text-muted-foreground font-mono mt-1">{product.id.slice(0, 8)}</p>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/qr-code-print-client.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Printer } from "lucide-react"
import { generateQRCode } from "@/lib/qr-code"

interface Product {
  id: string
  name: string | null
  brand: string | null
  model: string | null
}

interface QRCodePrintClientProps {
  products: Product[]
}

export function QRCodePrintClient({ products }: QRCodePrintClientProps) {
  const [qrCodes, setQrCodes] = useState<Record<string, string>>({})

useEffect(() => {
    async function generateAllQRCodes() {
      const codes: Record<string, string> = {}

for (const product of products) {
        try {
          const qrDataUrl = await generateQRCode(product.id)
          codes[product.id] = qrDataUrl
        } catch (error) {
          console.error(`[v0] Error generating QR for product ${product.id}:`, error)
        }
      }

setQrCodes(codes)
    }

generateAllQRCodes()
  }, [products])

return (
    <Card>
      <CardHeader>
        <CardTitle>Códigos QR Listos para Imprimir</CardTitle>
        <CardDescription>
          {products.length} producto{products.length > 1 ? "s" : ""} seleccionado
          {products.length > 1 ? "s" : ""}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex gap-2 mb-6 print:hidden">
          <Button onClick={() => window.print()} className="gap-2">
            <Printer className="h-4 w-4" />
            Imprimir Todo
          </Button>
        </div>

<div className="grid grid-cols-3 gap-4 print:grid-cols-4">
          {products.map((product) => (
            <div
              key={product.id}
              className="border rounded-lg p-4 flex flex-col items-center gap-2 print:break-inside-avoid"
            >
              {qrCodes[product.id] ? (
                <img
                  src={qrCodes[product.id] || "/placeholder.svg"}
                  alt={`QR Code for ${product.name || product.id}`}
                  className="w-full h-auto"
                />
              ) : (
                <div className="w-full aspect-square bg-muted animate-pulse rounded" />
              )}
              <div className="text-center">
                <p className="font-medium text-sm line-clamp-2">
                  {product.name || `${product.brand || ""} ${product.model || ""}`.trim() || "Producto"}
                </p>
                <p className="text-xs text-muted-foreground font-mono mt-1">{product.id.slice(0, 8)}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/db/queries.ts" isQuickEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"

export async function getProducts() {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("products")
    .select(`
      *,
      locations (name, type),
      categories (name, path, field_schema),
      providers (name, country)
    `)
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching products:", error)
    throw error
  }

return data
}

export async function getProductByQRCode(qrCode: string) {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("products")
    .select(`
      *,
      locations (name, type),
      categories (name, path, field_schema),
      providers (name, country),
      product_images (image_url, display_order, is_primary)
    `)
    .eq("id", qrCode)
    .single()

if (error) throw error
  return data
}

export async function getLocations() {
  const supabase = await createClient()

const { data, error } = await supabase.from("locations").select("*").eq("is_active", true).order("name")

if (error) throw error
  return data
}

export async function getProviders() {
  const supabase = await createClient()

const { data, error } = await supabase.from("providers").select("*").eq("is_active", true).order("name")

if (error) throw error
  return data
}

export async function getCategories() {
  const supabase = await createClient()

const { data, error } = await supabase.from("categories").select("*").order("path")

if (error) throw error
  return data
}

export async function getSalesAnalytics(startDate?: string, endDate?: string) {
  const supabase = await createClient()

let query = supabase.from("sales").select("*")

if (startDate) {
    query = query.gte("created_at", startDate)
  }
  if (endDate) {
    query = query.lte("created_at", endDate)
  }

const { data, error } = await query

if (error) throw error
  return data
}

export async function getInventoryByLocation() {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("products")
    .select(`
      id,
      name,
      status,
      current_location_id,
      locations (name, type)
    `)
    .in("status", ["in_stock", "reserved"])

if (error) throw error
  return data
}
[V0_FILE]typescriptreact:file="app/ingresos/page.tsx" isMoved="true" isMovedFrom="app/qr-codes/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { IngresosClient } from "@/components/ingresos-client"
import { getLocations, getProviders } from "@/lib/db/queries"

export default async function IngresosPage() {
  const supabase = await createClient()

const [{ data: draftProducts }, locations, providers] = await Promise.all([
    supabase
      .from("products")
      .select(`
        *,
        locations (
          name,
          type
        ),
        categories (
          name
        ),
        providers (
          name
        )
      `)
      .eq("status", "draft")
      .order("created_at", { ascending: false }),
    getLocations(),
    getProviders(),
  ])

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Ingresos</h1>
          <p className="text-sm text-muted-foreground">
            Gestión de productos en borrador y códigos QR para inventario entrante
          </p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{draftProducts?.length || 0}</div>
            <div className="text-sm text-muted-foreground">Ingresos</div>
          </div>
        </div>
      </div>

<IngresosClient products={draftProducts || []} locations={locations || []} providers={providers || []} />
    </div>
  )
}
[V0_FILE]typescript:file="app/ingresos/print/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { QRCodePrintClient } from "@/components/qr-code-print-client"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Package2, Plus } from "lucide-react"
import Link from "next/link"

export default async function PrintQRCodesPage({
  searchParams,
}: {
  searchParams: { ids?: string }
}) {
  const supabase = await createClient()

// Get selected IDs from URL or fetch all drafts
  const selectedIds = searchParams.ids?.split(",").filter(Boolean)

let query = supabase
    .from("products")
    .select("id, name, brand, model, created_at")
    .eq("status", "draft")
    .order("created_at", { ascending: false })

// If specific IDs are provided, filter by them
  if (selectedIds && selectedIds.length > 0) {
    query = query.in("id", selectedIds)
  }

const { data: draftProducts } = await query

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Imprimir Códigos QR</h1>
          <p className="text-sm text-muted-foreground">Imprime códigos QR para tus productos en borrador</p>
        </div>
        <Button asChild variant="outline">
          <Link href="/ingresos">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Volver a Ingresos
          </Link>
        </Button>
      </div>

{draftProducts && draftProducts.length > 0 ? (
        <QRCodePrintClient products={draftProducts} />
      ) : (
        <div className="border rounded-lg p-12 flex flex-col items-center justify-center bg-muted/30">
          <Package2 className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-semibold mb-2">No hay productos para imprimir</h3>
          <p className="text-sm text-muted-foreground mb-4">
            Crea borradores en lote para comenzar el proceso de ingreso
          </p>
          <Button asChild>
            <Link href="/ingresos/generate">
              <Plus className="h-4 w-4 mr-2" />
              Crear Borradores
            </Link>
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/ingresos/generate/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { createBulkDraftProducts } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import { Package2 } from "lucide-react"

export default function GenerateDraftsPage() {
  const [count, setCount] = useState(10)
  const [prefix, setPrefix] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
  const router = useRouter()

const handleGenerate = async () => {
    setIsGenerating(true)
    try {
      await createBulkDraftProducts(count, prefix)
      router.push("/ingresos")
      router.refresh()
    } catch (error) {
      console.error("[v0] Error creating draft products:", error)
    } finally {
      setIsGenerating(false)
    }
  }

return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Crear Borradores en Lote</h1>
        <p className="text-muted-foreground">Crea múltiples productos en borrador para imprimir códigos QR</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Package2 className="h-5 w-5" />
            Creación en Lote
          </CardTitle>
          <CardDescription>
            Crea borradores, imprime los QR con el ID del producto y completa la información al escanear
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="count">Cantidad de Borradores</Label>
            <Input
              id="count"
              type="number"
              min="1"
              max="500"
              value={count}
              onChange={(e) => setCount(Number.parseInt(e.target.value) || 1)}
            />
            <p className="text-sm text-muted-foreground">Crea entre 1 y 500 productos en borrador</p>
          </div>

<div className="space-y-2">
            <Label htmlFor="prefix">Prefijo del Nombre (Opcional)</Label>
            <Input
              id="prefix"
              type="text"
              placeholder="ej: iPhone 15, MacBook Pro"
              value={prefix}
              onChange={(e) => setPrefix(e.target.value)}
            />
            <p className="text-sm text-muted-foreground">
              Los productos se crearán como "{prefix || "Producto"} #1", "{prefix || "Producto"} #2", etc.
            </p>
          </div>

<div className="bg-muted p-4 rounded-lg space-y-2">
            <h4 className="font-medium text-sm">Flujo de trabajo:</h4>
            <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
              <li>Se crearán {count} productos en estado "Borrador"</li>
              <li>Cada producto tendrá un ID único (UUID)</li>
              <li>Imprime los códigos QR con el ID del producto</li>
              <li>Pega los QR en los productos físicos</li>
              <li>Escanea el QR para editar y completar la información</li>
            </ol>
          </div>

<Button onClick={handleGenerate} disabled={isGenerating} className="w-full">
            {isGenerating ? "Creando..." : `Crear ${count} Borrador${count > 1 ? "es" : ""}`}
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="components/bulk-draft-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { createBulkDraftProducts } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import { Package2 } from "lucide-react"

interface Location {
  id: string
  name: string
  type: string
}

interface Provider {
  id: string
  name: string
}

interface BulkDraftModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  locations: Location[]
  providers: Provider[]
}

export function BulkDraftModal({ open, onOpenChange, locations, providers }: BulkDraftModalProps) {
  const router = useRouter()
  const [count, setCount] = useState(10)
  const [prefix, setPrefix] = useState("")
  const [locationId, setLocationId] = useState<string>("no-location")
  const [providerId, setProviderId] = useState<string>("no-provider")
  const [isCreating, setIsCreating] = useState(false)

const handleCreate = async () => {
    setIsCreating(true)
    try {
      await createBulkDraftProducts(
        count,
        prefix,
        locationId === "no-location" ? undefined : locationId,
        providerId === "no-provider" ? undefined : providerId,
      )
      onOpenChange(false)
      router.refresh()
      // Reset form
      setCount(10)
      setPrefix("")
      setLocationId("no-location")
      setProviderId("no-provider")
    } catch (error) {
      console.error("[v0] Error creating draft products:", error)
    } finally {
      setIsCreating(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-auto max-w-[80%]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Package2 className="h-5 w-5" />
            Ingresos
          </DialogTitle>
        </DialogHeader>

<div className="flex flex-wrap gap-4 py-2">
          <div className="space-y-2 w-[120px] flex-shrink-0">
            <Label htmlFor="count">Cantidad</Label>
            <Input
              id="count"
              type="number"
              min="1"
              max="500"
              value={count}
              onChange={(e) => setCount(Number.parseInt(e.target.value) || 1)}
              className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
            />
          </div>

<div className="space-y-2 flex-1 min-w-[200px]">
            <Label htmlFor="prefix">Nombre</Label>
            <Input
              id="prefix"
              type="text"
              placeholder="ej: iPhone 15, MacBook Pro"
              value={prefix}
              onChange={(e) => setPrefix(e.target.value)}
            />
          </div>

<div className="space-y-2 flex-1 min-w-[180px]">
            <Label htmlFor="location">Ubicación</Label>
            <Select value={locationId} onValueChange={setLocationId}>
              <SelectTrigger id="location">
                <SelectValue placeholder="Sin ubicación" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="no-location">Sin ubicación</SelectItem>
                {locations.map((location) => (
                  <SelectItem key={location.id} value={location.id}>
                    {location.name} ({location.type})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2 flex-1 min-w-[180px]">
            <Label htmlFor="provider">Proveedor</Label>
            <Select value={providerId} onValueChange={setProviderId}>
              <SelectTrigger id="provider">
                <SelectValue placeholder="Sin proveedor" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="no-provider">Sin proveedor</SelectItem>
                {providers.map((provider) => (
                  <SelectItem key={provider.id} value={provider.id}>
                    {provider.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

<div className="flex items-center justify-between gap-4 pt-2 border-t">
          <DialogDescription className="text-xs text-muted-foreground">
            Crea múltiples productos en borrador para imprimir códigos QR y completar después
          </DialogDescription>

<Button onClick={handleCreate} disabled={isCreating}>
            {isCreating ? "Creando..." : "Crear"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/ingresos-client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Plus, Printer, Package2, PackageOpen, QrCode, Search, SlidersHorizontal, CheckSquare } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { BulkDraftModal } from "@/components/bulk-draft-modal"
import { useRouter } from "next/navigation"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Label } from "@/components/ui/label"
import { generateQRCode } from "@/lib/qr-code"

interface Product {
  id: string
  name: string | null
  brand: string | null
  model: string | null
  created_at: string
  locations: { name: string; type: string } | null
  categories: { name: string } | null
  providers: { name: string } | null
}

interface Location {
  id: string
  name: string
  type: string
}

interface Provider {
  id: string
  name: string
}

interface IngresosClientProps {
  products: Product[]
  locations: Location[]
  providers: Provider[]
}

export function IngresosClient({ products, locations, providers }: IngresosClientProps) {
  const router = useRouter()
  const [selectedProducts, setSelectedProducts] = useState<Set<string>>(new Set())
  const [locationFilter, setLocationFilter] = useState<string>("all")
  const [providerFilter, setProviderFilter] = useState<string>("all")
  const [isBulkModalOpen, setIsBulkModalOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [isCameraOpen, setIsCameraOpen] = useState(false)
  const [isScanning, setIsScanning] = useState(false)
  const [cameraError, setCameraError] = useState<string | null>(null)
  const [expandedQRCode, setExpandedQRCode] = useState<string | null>(null)
  const [qrCodeDataUrls, setQrCodeDataUrls] = useState<Map<string, string>>(new Map())
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const animationFrameRef = useRef<number | null>(null)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

useEffect(() => {
    const generateQRCodes = async () => {
      const newQrCodes = new Map<string, string>()
      for (const product of products) {
        try {
          const qrDataUrl = await generateQRCode(product.id)
          newQrCodes.set(product.id, qrDataUrl)
        } catch (error) {
          console.error(`[v0] Failed to generate QR for ${product.id}:`, error)
        }
      }
      setQrCodeDataUrls(newQrCodes)
    }
    generateQRCodes()
  }, [products])

const toggleProduct = (id: string) => {
    const newSelected = new Set(selectedProducts)
    if (newSelected.has(id)) {
      newSelected.delete(id)
    } else {
      newSelected.add(id)
    }
    setSelectedProducts(newSelected)
  }

const toggleAll = () => {
    if (selectedProducts.size === filteredProducts.length) {
      setSelectedProducts(new Set())
    } else {
      setSelectedProducts(new Set(filteredProducts.map((p) => p.id)))
    }
  }

const handleMassPrint = () => {
    const ids = Array.from(selectedProducts).join(",")
    window.open(`/ingresos/print?ids=${ids}`, "_blank")
  }

const scanQRCode = async () => {
    if (!videoRef.current || !canvasRef.current || !isScanning) return

const video = videoRef.current
    const canvas = canvasRef.current

if (video.readyState !== video.HAVE_ENOUGH_DATA) {
      animationFrameRef.current = requestAnimationFrame(scanQRCode)
      return
    }

const context = canvas.getContext("2d")
    if (!context) return

canvas.width = video.videoWidth
    canvas.height = video.videoHeight

context.drawImage(video, 0, 0, canvas.width, canvas.height)

const imageData = context.getImageData(0, 0, canvas.width, canvas.height)

try {
      const jsQR = (await import("jsqr")).default
      const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
      })

if (code && code.data) {
        setSearchQuery(code.data)
        closeCamera()
        return
      }
    } catch (err) {
      console.error("[v0] Error scanning QR:", err)
    }

animationFrameRef.current = requestAnimationFrame(scanQRCode)
  }

const openCamera = async () => {
    try {
      setCameraError(null)

const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: "environment",
          width: { ideal: 1280 },
          height: { ideal: 720 },
        },
        audio: false,
      })

streamRef.current = stream
      setIsCameraOpen(true)

await new Promise((resolve) => setTimeout(resolve, 100))

if (videoRef.current) {
        videoRef.current.srcObject = stream

await new Promise<void>((resolve, reject) => {
          if (!videoRef.current) {
            reject(new Error("Video element not found"))
            return
          }

videoRef.current.onloadedmetadata = () => {
            if (timeoutRef.current) {
              clearTimeout(timeoutRef.current)
              timeoutRef.current = null
            }
            resolve()
          }

videoRef.current.onerror = () => {
            if (timeoutRef.current) {
              clearTimeout(timeoutRef.current)
              timeoutRef.current = null
            }
            reject(new Error("Video loading error"))
          }

timeoutRef.current = setTimeout(() => {
            timeoutRef.current = null
            reject(new Error("Video loading timeout"))
          }, 5000)
        })

await videoRef.current.play()
        setIsScanning(true)
      }
    } catch (err) {
      console.error("[v0] Camera error:", err)
      const errorMessage = err instanceof Error ? err.message : "Error desconocido"
      setCameraError(`No se pudo acceder a la cámara: ${errorMessage}`)
      closeCamera()
    }
  }

const closeCamera = () => {
    setIsScanning(false)

if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
      timeoutRef.current = null
    }

if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current)
      animationFrameRef.current = null
    }

if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => {
        track.stop()
      })
      streamRef.current = null
    }

if (videoRef.current) {
      videoRef.current.srcObject = null
    }

setIsCameraOpen(false)
    setCameraError(null)
  }

useEffect(() => {
    if (isScanning) {
      animationFrameRef.current = requestAnimationFrame(scanQRCode)
    }

return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [isScanning])

useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [])

const filteredProducts = products.filter((product) => {
    if (locationFilter !== "all" && product.locations?.name !== locationFilter) {
      return false
    }
    if (providerFilter !== "all" && product.providers?.name !== providerFilter) {
      return false
    }
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      const searchableText = [product.name, product.brand, product.model, product.id, product.categories?.name]
        .filter(Boolean)
        .join(" ")
        .toLowerCase()

if (!searchableText.includes(query)) {
        return false
      }
    }
    return true
  })

return (
    <div className="flex flex-col flex-1 overflow-hidden">
      <div className="border rounded-lg bg-card mb-4">
        <div className="flex items-center gap-2 p-3">
          <div className="flex items-center gap-2 flex-1">
            <Button variant="outline" size="icon" className="bg-transparent h-10 w-10" onClick={openCamera}>
              <QrCode className="h-4 w-4" />
            </Button>

<div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar por nombre, marca, modelo o ID..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9 h-10"
              />
            </div>

<Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" size="sm" className="bg-transparent h-10">
                  <SlidersHorizontal className="h-4 w-4 mr-2" />
                  Filtros
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-80" align="end">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <h4 className="font-medium text-sm">Filtros</h4>
                    <p className="text-xs text-muted-foreground">Filtrá los productos por ubicación y proveedor</p>
                  </div>

<div className="space-y-3">
                    <div className="space-y-1.5">
                      <Label htmlFor="location" className="text-xs">
                        Ubicación
                      </Label>
                      <Select value={locationFilter} onValueChange={setLocationFilter}>
                        <SelectTrigger id="location" className="h-9">
                          <SelectValue placeholder="Todas las ubicaciones" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Todas las ubicaciones</SelectItem>
                          {locations.map((location) => (
                            <SelectItem key={location.id} value={location.name}>
                              {location.name} ({location.type})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-1.5">
                      <Label htmlFor="provider" className="text-xs">
                        Proveedor
                      </Label>
                      <Select value={providerFilter} onValueChange={setProviderFilter}>
                        <SelectTrigger id="provider" className="h-9">
                          <SelectValue placeholder="Todos los proveedores" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Todos los proveedores</SelectItem>
                          {providers.map((provider) => (
                            <SelectItem key={provider.id} value={provider.name}>
                              {provider.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="flex gap-2 pt-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 bg-transparent"
                      onClick={() => {
                        setLocationFilter("all")
                        setProviderFilter("all")
                      }}
                    >
                      Limpiar
                    </Button>
                    <Button size="sm" className="flex-1">
                      Aplicar
                    </Button>
                  </div>
                </div>
              </PopoverContent>
            </Popover>
          </div>

<div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className="h-10 bg-transparent"
              onClick={handleMassPrint}
              disabled={selectedProducts.size === 0}
            >
              <Printer className="h-4 w-4 mr-2" />
              Imprimir ({selectedProducts.size})
            </Button>
            <Button size="sm" className="h-10" onClick={() => setIsBulkModalOpen(true)}>
              <Plus className="h-4 w-4 mr-2" />
              Ingresos
            </Button>
          </div>
        </div>
      </div>

{filteredProducts.length === 0 ? (
        <div className="border rounded-lg p-12 flex flex-col items-center justify-center bg-muted/30">
          <Package2 className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-semibold mb-2">No hay ingresos</h3>
          <p className="text-sm text-muted-foreground mb-4">Crea ingresos en lote para comenzar el proceso</p>
          <Button onClick={() => setIsBulkModalOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Ingresos
          </Button>
        </div>
      ) : (
        <div className="border rounded-lg flex flex-col h-full bg-background">
          <div className="flex-1 overflow-auto rounded-lg">
            <table className="w-full">
              <thead className="sticky top-0 z-10 bg-muted border-b">
                <tr>
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground w-12 first:rounded-tl-lg">
                    <button
                      onClick={toggleAll}
                      className="flex items-center justify-center w-full hover:text-foreground transition-colors"
                      title={
                        selectedProducts.size === filteredProducts.length ? "Deseleccionar todo" : "Seleccionar todo"
                      }
                    >
                      <CheckSquare className="h-4 w-4" />
                    </button>
                  </th>
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground">PRODUCTO</th>
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground">PROVEEDOR</th>
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground last:rounded-tr-lg">
                    UBICACIÓN
                  </th>
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground w-20 last:rounded-tr-lg">
                    QR
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {filteredProducts.map((product) => {
                  const isSelected = selectedProducts.has(product.id)
                  const qrDataUrl = qrCodeDataUrls.get(product.id)

return (
                    <tr
                      key={product.id}
                      className="hover:bg-muted/30 transition-colors cursor-pointer"
                      onClick={() => router.push(`/products/${product.id}`)}
                    >
                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
                        <div
                          className="flex items-center justify-center cursor-pointer"
                          onClick={() => toggleProduct(product.id)}
                        >
                          <div
                            className="h-10 w-10 rounded bg-muted/90 flex items-center justify-center
                          aspect-square
                          "
                          >
                            {isSelected ? (
                              <PackageOpen className="h-5 w-5 text-primary" />
                            ) : (
                              <Package2 className="h-5 w-5 text-muted-foreground" />
                            )}
                          </div>
                        </div>
                      </td>
                      <td className="p-3">
                        <div className="min-w-0">
                          <div className="font-medium text-sm truncate">
                            {product.name || product.brand || product.model || "Producto sin nombre"}
                          </div>
                          {product.categories?.name && (
                            <div className="text-xs text-muted-foreground truncate">{product.categories.name}</div>
                          )}
                          <div className="text-[10px] text-muted-foreground/60 font-mono break-all mt-1">
                            {product.id}
                          </div>
                        </div>
                      </td>
                      <td className="p-3">
                        {product.providers ? (
                          <div className="text-xs">
                            <div className="font-medium">{product.providers.name}</div>
                            <div className="text-muted-foreground">Proveedor</div>
                          </div>
                        ) : (
                          <span className="text-xs text-muted-foreground">Sin proveedor</span>
                        )}
                      </td>
                      <td className="p-3">
                        {product.locations ? (
                          <div className="text-xs">
                            <div className="font-medium">{product.locations.name}</div>
                            <div className="text-muted-foreground capitalize">{product.locations.type}</div>
                          </div>
                        ) : (
                          <span className="text-xs text-muted-foreground">Sin ubicación</span>
                        )}
                      </td>
                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
                        {qrDataUrl ? (
                          <button
                            onClick={() => setExpandedQRCode(qrDataUrl)}
                            className="hover:opacity-80 transition-opacity"
                          >
                            <img src={qrDataUrl || "/placeholder.svg"} alt="QR Code" className="w-12 h-12 rounded" />
                          </button>
                        ) : (
                          <div className="w-12 h-12 bg-muted rounded animate-pulse" />
                        )}
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

<Dialog open={!!expandedQRCode} onOpenChange={(open) => !open && setExpandedQRCode(null)}>
        <DialogContent className="p-0 border-0 bg-transparent shadow-none max-w-fit">
          {expandedQRCode && (
            <img src={expandedQRCode || "/placeholder.svg"} alt="QR Code Expandido" className="w-96 h-96 rounded-2xl" />
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="app/products/page.tsx" isMerged="true"
import { getProducts, getCategories, getLocations, getProviders } from "@/lib/db/queries"
import { ProductsClient } from "@/components/products-client"
import { Package2 } from "lucide-react"

export default async function ProductsPage() {
  const [products, categories, locations, providers] = await Promise.all([
    getProducts(),
    getCategories(),
    getLocations(),
    getProviders(),
  ])

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Productos</h1>
          <p className="text-sm text-muted-foreground">Gestión de inventario con seguimiento QR</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{products.length}</div>
            <div className="text-sm text-muted-foreground">Productos</div>
          </div>
        </div>
      </div>

{products.length === 0 ? (
        <div className="border rounded-lg p-12 flex flex-col items-center justify-center bg-muted/30">
          <Package2 className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-semibold mb-2">No hay productos</h3>
          <p className="text-sm text-muted-foreground mb-4">Comenzá agregando tu primer producto al inventario</p>
        </div>
      ) : (
        <ProductsClient products={products} categories={categories} locations={locations} providers={providers} />
      )}
    </div>
  )
}
[V0_FILE]typescript:file="components/category-schema-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Plus, Trash2 } from "lucide-react"
import { updateCategorySchema } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Category, CategoryField } from "@/lib/types/database"

interface CategorySchemaDialogProps {
  category: Category
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function CategorySchemaDialog({ category, open, onOpenChange }: CategorySchemaDialogProps) {
  const router = useRouter()
  const [fields, setFields] = useState<CategoryField[]>(category.field_schema?.fields || [])
  const [isSubmitting, setIsSubmitting] = useState(false)

const addField = () => {
    setFields([
      ...fields,
      {
        key: "",
        label: "",
        type: "text",
        required: false,
        showInTable: false,
      },
    ])
  }

const removeField = (index: number) => {
    setFields(fields.filter((_, i) => i !== index))
  }

const updateField = (index: number, updates: Partial<CategoryField>) => {
    const newFields = [...fields]
    newFields[index] = { ...newFields[index], ...updates }
    setFields(newFields)
  }

const handleSubmit = async () => {
    setIsSubmitting(true)

try {
      await updateCategorySchema(category.id, { fields })
      router.refresh()
      onOpenChange(false)
    } catch (error) {
      console.error("[v0] Failed to update category schema:", error)
      alert("Error al guardar la configuración")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{category.name}</DialogTitle>
          <DialogDescription>Define los campos personalizados para esta categoría</DialogDescription>
        </DialogHeader>

<div className="space-y-4">
          {fields.map((field, index) => (
            <Card key={index} className="p-4">
              <div className="space-y-4">
                <div className="flex items-start gap-4">
                  <div className="flex-1 grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Clave (key)</Label>
                      <Input
                        value={field.key}
                        onChange={(e) => updateField(index, { key: e.target.value })}
                        placeholder="ej: storage, color"
                      />
                    </div>

<Button type="button" variant="ghost" size="icon" onClick={() => removeField(index)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>

<Button type="button" variant="outline" onClick={addField} className="w-full bg-transparent">
            <Plus className="h-4 w-4 mr-2" />
            Agregar Campo
          </Button>
        </div>

<div className="flex gap-2 justify-end">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? "Guardando..." : "Guardar"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/category-schema-modal.tsx" isMerged="true"
"use client"
import { useState, useRef, useEffect } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Card } from "@/components/ui/card"
import { updateCategory } from "@/lib/db/actions"
import { Plus, Trash2 } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import type { Category } from "@/lib/types/database"
import { useRouter } from "next/navigation"

interface CategorySchemaModalProps {
  category: Category
  open: boolean
  onOpenChange: (open: boolean) => void
}

interface Field {
  key: string
  label: string
  type: "text" | "number" | "select" | "textarea"
  options?: string[]
  required: boolean
  showInTable: boolean
  tableLabel?: string
}

export function CategorySchemaModal({ category, open, onOpenChange }: CategorySchemaModalProps) {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [categoryFields, setCategoryFields] = useState<Field[]>([])
  const [expandedFieldIndex, setExpandedFieldIndex] = useState<number | null>(null)

const chipRefs = useRef<(HTMLButtonElement | null)[]>([])

useEffect(() => {
    if (open && category.field_schema) {
      const schema = category.field_schema as { fields?: Field[] }
      if (schema.fields) {
        setCategoryFields(schema.fields)
        if (schema.fields.length > 0) {
          setExpandedFieldIndex(0)
        }
      }
    }
  }, [open, category])

const removeField = (index: number) => {
    const newFields = categoryFields.filter((_, i) => i !== index)
    setCategoryFields(newFields)

const updateField = (index: number, updates: Partial<Field>) => {
    const newFields = [...categoryFields]

newFields[index] = { ...newFields[index], ...updates }
    setCategoryFields(newFields)
  }

const handleSave = async () => {
    setIsSubmitting(true)

try {
      const formData = new FormData()
      formData.set("id", category.id)
      formData.set("name", category.name)
      if (category.parent_id) {
        formData.set("parent_id", category.parent_id)
      }
      if (categoryFields.length > 0) {
        formData.set("field_schema", JSON.stringify({ fields: categoryFields }))
      }

await updateCategory(formData)
      router.refresh()
      onOpenChange(false)
    } catch (err) {
      console.error("[v0] Category update error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>{category.name}</DialogTitle>
         
        </DialogHeader>

<div className="space-y-4 overflow-y-auto flex-1 pr-2">
          <div className="space-y-3 ">
            <div className="flex items-center justify-between border-b pb-4">
            <div className="mr-4">
            <Button type="button" variant="outline" size="icon" onClick={addField} className="h-8 w-8 bg-transparent">
                <Plus className="h-4 w-4" />
              </Button>
              </div>
              <h3 className="font-medium text-sm">Campos Personalizados</h3>
               <p className="text-xs text-muted-foreground">Edita los campos personalizados de esta categoría</p>
              
            </div>

{categoryFields.length === 0 ? (
              <p className="text-xs text-muted-foreground">
                No hay campos personalizados. Agrega campos para capturar información específica de esta categoría.
              </p>
            ) : (
              <div className="space-y-3">
                <div
                  className="flex gap-2 overflow-x-auto pb-2"
                  style={{
                    scrollbarWidth: "none",
                    msOverflowStyle: "none",
                    WebkitOverflowScrolling: "touch",
                  }}
                >
                  <style jsx>{`
                    div::-webkit-scrollbar {
                      display: none;
                    }
                  `}</style>
                  {categoryFields.map((field, index) => (
                    <Button
                      key={index}
                      ref={(el) => {
                        chipRefs.current[index] = el
                      }}
                      type="button"
                      variant={expandedFieldIndex === index ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleFieldChipClick(index)}
                      className="shrink-0 h-8 text-xs"
                    >
                      {field.label || `Campo ${index + 1}`}
                    </Button>
                  ))}
                </div>

{categoryFields.length > 0 && (
                  <div className="min-h-[200px]">
                    <AnimatePresence mode="wait">
                      {expandedFieldIndex !== null && categoryFields[expandedFieldIndex] && (
                        <motion.div
                          key={expandedFieldIndex}
                          initial={{ opacity: 0, y: -10 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -10 }}
                          transition={{ duration: 0.15, ease: "easeOut" }}
                        >
                          <Card className="px-3">
                            <div className="space-y-3">
                              <div className="flex items-start gap-2">
                                <div className="flex-1 grid grid-cols-2 gap-2">
                                  <div className="space-y-1">
                                    <Label className="text-xs">Clave *</Label>
                                    <Input
                                      value={categoryFields[expandedFieldIndex].key}
                                      onChange={(e) => updateField(expandedFieldIndex, { key: e.target.value })}
                                      placeholder="storage"
                                      required
                                      className="h-8 text-xs"
                                    />
                                  </div>

<div className="space-y-1">
                                    <Label className="text-xs">Etiqueta *</Label>
                                    <Input
                                      value={categoryFields[expandedFieldIndex].label}
                                      onChange={(e) => updateField(expandedFieldIndex, { label: e.target.value })}
                                      placeholder="Almacenamiento"
                                      required
                                      className="h-8 text-xs"
                                    />
                                  </div>

<div className="space-y-1">
                                    <Label className="text-xs">Tipo</Label>
                                    <Select
                                      value={categoryFields[expandedFieldIndex].type}
                                      onValueChange={(value: any) => updateField(expandedFieldIndex, { type: value })}
                                    >
                                      <SelectTrigger className="h-8 text-xs">
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="text">Texto</SelectItem>
                                        <SelectItem value="number">Número</SelectItem>
                                        <SelectItem value="select">Selección</SelectItem>
                                        <SelectItem value="textarea">Área de texto</SelectItem>
                                      </SelectContent>
                                    </Select>
                                  </div>

{categoryFields[expandedFieldIndex].type === "select" && (
                                    <div className="space-y-1">
                                      <Label className="text-xs">Opciones (separadas por coma)</Label>
                                      <Input
                                        value={categoryFields[expandedFieldIndex].options?.join(", ") || ""}
                                        onChange={(e) =>
                                          updateField(expandedFieldIndex, {
                                            options: e.target.value.split(",").map((o) => o.trim()),
                                          })
                                        }
                                        placeholder="64GB, 128GB, 256GB"
                                        className="h-8 text-xs"
                                      />
                                    </div>
                                  )}
                                </div>

<Button
                                  type="button"
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => removeField(expandedFieldIndex)}
                                  className="h-8 w-8 mt-4"
                                >
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              </div>

<div className="flex gap-4">
                                <div className="flex items-center gap-2">
                                  <Checkbox
                                    id={`required-${expandedFieldIndex}`}
                                    checked={categoryFields[expandedFieldIndex].required}
                                    onCheckedChange={(checked) =>
                                      updateField(expandedFieldIndex, { required: !!checked })
                                    }
                                  />
                                  <Label htmlFor={`required-${expandedFieldIndex}`} className="text-xs font-normal">
                                    Obligatorio
                                  </Label>
                                </div>

<div className="flex items-center gap-2">
                                  <Checkbox
                                    id={`showInTable-${expandedFieldIndex}`}
                                    checked={categoryFields[expandedFieldIndex].showInTable}
                                    onCheckedChange={(checked) =>
                                      updateField(expandedFieldIndex, { showInTable: !!checked })
                                    }
                                  />
                                  <Label htmlFor={`showInTable-${expandedFieldIndex}`} className="text-xs font-normal">
                                    Mostrar en tabla
                                  </Label>
                                </div>
                              </div>
                            </div>
                          </Card>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

<Button type="button" size="sm" onClick={handleSave} disabled={isSubmitting}>
            {isSubmitting ? "Guardando..." : "Guardar"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="lib/utils/category.ts" isMerged="true"
import type { Category } from "@/lib/types/database"

/**
 * Builds the full category path from parent_id relationships
 * @param categories - All categories
 * @param categoryId - The category to build the path for
 * @returns The full path string (e.g., "Electronics/Smartphones")
 */
export function buildCategoryPath(categories: Category[], categoryId: string): string {
  const pathSegments: string[] = []
  let currentId: string | null = categoryId

// Traverse up the parent chain
  while (currentId) {
    const category = categories.find((c) => c.id === currentId)
    if (!category) break

pathSegments.unshift(category.name)
    currentId = category.parent_id
  }

return pathSegments.join("/")
}

/**
 * Gets all parent categories for a given category
 * @param categories - All categories
 * @param categoryId - The category to get parents for
 * @returns Array of parent categories from root to immediate parent
 */
export function getCategoryParents(categories: Category[], categoryId: string): Category[] {
  const parents: Category[] = []
  let currentId: string | null = categoryId

while (currentId) {
    const category = categories.find((c) => c.id === currentId)
    if (!category) break

if (category.parent_id) {
      const parent = categories.find((c) => c.id === category.parent_id)
      if (parent) {
        parents.unshift(parent)
      }
    }

currentId = category.parent_id
  }

return parents
}

/**
 * Gets all child categories for a given category
 * @param categories - All categories
 * @param parentId - The parent category ID
 * @returns Array of direct child categories
 */
export function getCategoryChildren(categories: Category[], parentId: string): Category[] {
  return categories.filter((c) => c.parent_id === parentId)
}

/**
 * Gets all descendant categories (children, grandchildren, etc.)
 * @param categories - All categories
 * @param parentId - The parent category ID
 * @returns Array of all descendant categories
 */
export function getCategoryDescendants(categories: Category[], parentId: string): Category[] {
  const descendants: Category[] = []
  const children = getCategoryChildren(categories, parentId)

for (const child of children) {
    descendants.push(child)
    descendants.push(...getCategoryDescendants(categories, child.id))
  }

return descendants
}

/**
 * Checks if a category is a root category (no parent)
 * @param category - The category to check
 * @returns True if the category has no parent
 */
export function isRootCategory(category: Category): boolean {
  return category.parent_id === null
}
[V0_FILE]sql:file="scripts/setup_database.sql" isQuickEdit="true" isMerged="true"
-- ============================================
-- INVENTORY MANAGEMENT SYSTEM - DATABASE SETUP
-- ============================================
-- Single comprehensive script that creates all tables, indexes, triggers, RLS policies, and seed data
-- Fully idempotent - safe to run multiple times

-- ============================================
-- PART 1: CREATE TABLES
-- ============================================

-- Categories with hierarchical paths and dynamic field schemas
CREATE TABLE IF NOT EXISTS categories (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  parent_id UUID REFERENCES categories(id) ON DELETE CASCADE,
  path TEXT NOT NULL,
  field_schema JSONB DEFAULT '{"fields": []}'::jsonb,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Add unique constraint if it doesn't exist
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM pg_constraint WHERE conname = 'categories_path_key'
  ) THEN
    ALTER TABLE categories ADD CONSTRAINT categories_path_key UNIQUE (path);
  END IF;
END $$;

-- Locations (warehouses, stores, houses)
CREATE TABLE IF NOT EXISTS locations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  type TEXT NOT NULL CHECK (type IN ('warehouse', 'store', 'house')),
  address TEXT,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Add unique constraint if it doesn't exist
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM pg_constraint WHERE conname = 'locations_name_key'
  ) THEN
    ALTER TABLE locations ADD CONSTRAINT locations_name_key UNIQUE (name);
  END IF;
END $$;

-- Providers/Suppliers
CREATE TABLE IF NOT EXISTS providers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  country TEXT NOT NULL,
  type TEXT NOT NULL CHECK (type IN ('direct', 'distributor', 'sub_distributor')),
  contact_email TEXT,
  contact_phone TEXT,
  notes TEXT,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Add unique constraint if it doesn't exist
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM pg_constraint WHERE conname = 'providers_name_key'
  ) THEN
    ALTER TABLE providers ADD CONSTRAINT providers_name_key UNIQUE (name);
  END IF;
END $$;

-- Products (core inventory items)
-- Note: QR codes are just the product ID - no separate qr_codes table needed
CREATE TABLE IF NOT EXISTS products (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  sku TEXT,
  name TEXT NOT NULL,
  brand TEXT,
  model TEXT,
  condition TEXT CHECK (condition IN ('new', 'like_new', 'very_good', 'good', 'acceptable', 'refurbished')),
  seller_notes TEXT,
  specifications JSONB DEFAULT '{}'::jsonb,
  category_id UUID REFERENCES categories(id) ON DELETE SET NULL,
  purchase_price DECIMAL(10, 2),
  selling_price DECIMAL(10, 2),
  currency TEXT DEFAULT 'USD',
  current_location_id UUID REFERENCES locations(id) ON DELETE SET NULL,
  status TEXT NOT NULL DEFAULT 'draft' CHECK (status IN ('in_transit', 'in_stock', 'reserved', 'sold', 'damaged', 'returned', 'draft')),
  provider_id UUID REFERENCES providers(id) ON DELETE SET NULL,
  purchase_date DATE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Product images
CREATE TABLE IF NOT EXISTS product_images (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  product_id UUID NOT NULL REFERENCES products(id) ON DELETE CASCADE,
  image_url TEXT NOT NULL,
  display_order INTEGER DEFAULT 0,
  is_primary BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Product packs (bundles)
CREATE TABLE IF NOT EXISTS product_packs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  description TEXT,
  sku TEXT,
  selling_price DECIMAL(10, 2),
  currency TEXT DEFAULT 'USD',
  status TEXT DEFAULT 'active' CHECK (status IN ('active', 'inactive')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Pack items
CREATE TABLE IF NOT EXISTS pack_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  pack_id UUID NOT NULL REFERENCES product_packs(id) ON DELETE CASCADE,
  product_id UUID NOT NULL REFERENCES products(id) ON DELETE CASCADE,
  quantity INTEGER NOT NULL DEFAULT 1,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Inbound shipments
CREATE TABLE IF NOT EXISTS inbound_shipments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  provider_id UUID REFERENCES providers(id) ON DELETE SET NULL,
  destination_location_id UUID REFERENCES locations(id) ON DELETE SET NULL,
  tracking_number TEXT,
  carrier TEXT,
  expected_delivery_date DATE,
  actual_delivery_date DATE,
  status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'in_transit', 'delivered', 'cancelled')),
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Inbound shipment items
CREATE TABLE IF NOT EXISTS inbound_shipment_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  shipment_id UUID NOT NULL REFERENCES inbound_shipments(id) ON DELETE CASCADE,
  product_id UUID REFERENCES products(id) ON DELETE SET NULL,
  expected_quantity INTEGER NOT NULL,
  received_quantity INTEGER DEFAULT 0,
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Location transfers
CREATE TABLE IF NOT EXISTS location_transfers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  product_id UUID NOT NULL REFERENCES products(id) ON DELETE CASCADE,
  from_location_id UUID REFERENCES locations(id) ON DELETE SET NULL,
  to_location_id UUID NOT NULL REFERENCES locations(id) ON DELETE CASCADE,
  transfer_date TIMESTAMPTZ DEFAULT NOW(),
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Sales transactions
CREATE TABLE IF NOT EXISTS sales (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  sale_number TEXT NOT NULL,
  sale_type TEXT NOT NULL DEFAULT 'cash' CHECK (sale_type IN ('cash', 'online', 'payment_link')),
  customer_name TEXT,
  customer_email TEXT,
  customer_phone TEXT,
  subtotal DECIMAL(10, 2) NOT NULL DEFAULT 0,
  discount_amount DECIMAL(10, 2) DEFAULT 0,
  tax_amount DECIMAL(10, 2) DEFAULT 0,
  total_amount DECIMAL(10, 2) NOT NULL,
  currency TEXT DEFAULT 'USD',
  payment_status TEXT DEFAULT 'pending' CHECK (payment_status IN ('pending', 'paid', 'refunded', 'cancelled')),
  payment_link TEXT,
  payment_date TIMESTAMPTZ,
  requires_shipping BOOLEAN DEFAULT false,
  shipping_status TEXT CHECK (shipping_status IN ('pending', 'preparing', 'shipped', 'delivered')),
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Add unique constraint for sale_number if it doesn't exist
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM pg_constraint WHERE conname = 'sales_sale_number_key'
  ) THEN
    ALTER TABLE sales ADD CONSTRAINT sales_sale_number_key UNIQUE (sale_number);
  END IF;
END $$;

-- Sale items
CREATE TABLE IF NOT EXISTS sale_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  sale_id UUID NOT NULL REFERENCES sales(id) ON DELETE CASCADE,
  product_id UUID REFERENCES products(id) ON DELETE SET NULL,
  pack_id UUID REFERENCES product_packs(id) ON DELETE SET NULL,
  quantity INTEGER NOT NULL DEFAULT 1,
  unit_price DECIMAL(10, 2) NOT NULL,
  discount_amount DECIMAL(10, 2) DEFAULT 0,
  total_price DECIMAL(10, 2) NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Shipping labels
CREATE TABLE IF NOT EXISTS shipping_labels (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  sale_id UUID REFERENCES sales(id) ON DELETE SET NULL,
  product_id UUID REFERENCES products(id) ON DELETE SET NULL,
  carrier TEXT,
  tracking_number TEXT,
  service_type TEXT,
  weight DECIMAL(10, 2),
  from_address JSONB,
  to_address JSONB,
  label_url TEXT,
  shipping_cost DECIMAL(10, 2),
  currency TEXT DEFAULT 'USD',
  status TEXT DEFAULT 'created' CHECK (status IN ('created', 'printed', 'shipped', 'delivered', 'returned')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Activity log
CREATE TABLE IF NOT EXISTS activity_log (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  entity_type TEXT NOT NULL,
  entity_id TEXT NOT NULL,
  action TEXT NOT NULL,
  qr_code_scanned TEXT,
  details JSONB,
  user_id TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- ============================================
-- PART 2: CREATE INDEXES
-- ============================================

CREATE INDEX IF NOT EXISTS idx_products_category ON products(category_id);
CREATE INDEX IF NOT EXISTS idx_products_location ON products(current_location_id);
CREATE INDEX IF NOT EXISTS idx_products_provider ON products(provider_id);
CREATE INDEX IF NOT EXISTS idx_products_status ON products(status);
CREATE INDEX IF NOT EXISTS idx_products_sku ON products(sku);
CREATE INDEX IF NOT EXISTS idx_product_images_product ON product_images(product_id);
CREATE INDEX IF NOT EXISTS idx_pack_items_pack ON pack_items(pack_id);
CREATE INDEX IF NOT EXISTS idx_pack_items_product ON pack_items(product_id);
CREATE INDEX IF NOT EXISTS idx_inbound_shipment_items_shipment ON inbound_shipment_items(shipment_id);
CREATE INDEX IF NOT EXISTS idx_location_transfers_product ON location_transfers(product_id);
CREATE INDEX IF NOT EXISTS idx_sale_items_sale ON sale_items(sale_id);
CREATE INDEX IF NOT EXISTS idx_sale_items_product ON sale_items(product_id);
CREATE INDEX IF NOT EXISTS idx_shipping_labels_sale ON shipping_labels(sale_id);
CREATE INDEX IF NOT EXISTS idx_activity_log_entity ON activity_log(entity_type, entity_id);
CREATE INDEX IF NOT EXISTS idx_sales_sale_type ON sales(sale_type);
CREATE INDEX IF NOT EXISTS idx_sales_payment_status ON sales(payment_status);

-- ============================================
-- PART 3: CREATE TRIGGERS
-- ============================================

CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

DROP TRIGGER IF EXISTS update_categories_updated_at ON categories;
DROP TRIGGER IF EXISTS update_locations_updated_at ON locations;
DROP TRIGGER IF EXISTS update_providers_updated_at ON providers;
DROP TRIGGER IF EXISTS update_products_updated_at ON products;
DROP TRIGGER IF EXISTS update_product_packs_updated_at ON product_packs;
DROP TRIGGER IF EXISTS update_inbound_shipments_updated_at ON inbound_shipments;
DROP TRIGGER IF EXISTS update_sales_updated_at ON sales;
DROP TRIGGER IF EXISTS update_shipping_labels_updated_at ON shipping_labels;

CREATE TRIGGER update_categories_updated_at BEFORE UPDATE ON categories
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_locations_updated_at BEFORE UPDATE ON locations
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_providers_updated_at BEFORE UPDATE ON providers
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_products_updated_at BEFORE UPDATE ON products
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_product_packs_updated_at BEFORE UPDATE ON product_packs
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_inbound_shipments_updated_at BEFORE UPDATE ON inbound_shipments
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_sales_updated_at BEFORE UPDATE ON sales
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_shipping_labels_updated_at BEFORE UPDATE ON shipping_labels
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- ============================================
-- PART 4: ROW LEVEL SECURITY (RLS) POLICIES
-- ============================================

ALTER TABLE categories ENABLE ROW LEVEL SECURITY;
ALTER TABLE locations ENABLE ROW LEVEL SECURITY;
ALTER TABLE providers ENABLE ROW LEVEL SECURITY;
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
ALTER TABLE product_images ENABLE ROW LEVEL SECURITY;
ALTER TABLE product_packs ENABLE ROW LEVEL SECURITY;
ALTER TABLE pack_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE inbound_shipments ENABLE ROW LEVEL SECURITY;
ALTER TABLE inbound_shipment_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE location_transfers ENABLE ROW LEVEL SECURITY;
ALTER TABLE sales ENABLE ROW LEVEL SECURITY;
ALTER TABLE sale_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE shipping_labels ENABLE ROW LEVEL SECURITY;
ALTER TABLE activity_log ENABLE ROW LEVEL SECURITY;

-- Drop existing policies
DO $$ 
BEGIN
  DROP POLICY IF EXISTS "Allow public to view categories" ON categories;
  DROP POLICY IF EXISTS "Allow public to insert categories" ON categories;
  DROP POLICY IF EXISTS "Allow public to update categories" ON categories;
  DROP POLICY IF EXISTS "Allow public to delete categories" ON categories;
  DROP POLICY IF EXISTS "Allow public to view locations" ON locations;
  DROP POLICY IF EXISTS "Allow public to insert locations" ON locations;
  DROP POLICY IF EXISTS "Allow public to update locations" ON locations;
  DROP POLICY IF EXISTS "Allow public to delete locations" ON locations;
  DROP POLICY IF EXISTS "Allow public to view providers" ON providers;
  DROP POLICY IF EXISTS "Allow public to insert providers" ON providers;
  DROP POLICY IF EXISTS "Allow public to update providers" ON providers;
  DROP POLICY IF EXISTS "Allow public to delete providers" ON providers;
  DROP POLICY IF EXISTS "Allow public to view products" ON products;
  DROP POLICY IF EXISTS "Allow public to insert products" ON products;
  DROP POLICY IF EXISTS "Allow public to update products" ON products;
  DROP POLICY IF EXISTS "Allow public to delete products" ON products;
  DROP POLICY IF EXISTS "Allow public to view product_images" ON product_images;
  DROP POLICY IF EXISTS "Allow public to insert product_images" ON product_images;
  DROP POLICY IF EXISTS "Allow public to update product_images" ON product_images;
  DROP POLICY IF EXISTS "Allow public to delete product_images" ON product_images;
  DROP POLICY IF EXISTS "Allow public to view product_packs" ON product_packs;
  DROP POLICY IF EXISTS "Allow public to insert product_packs" ON product_packs;
  DROP POLICY IF EXISTS "Allow public to update product_packs" ON product_packs;
  DROP POLICY IF EXISTS "Allow public to delete product_packs" ON product_packs;
  DROP POLICY IF EXISTS "Allow public to view pack_items" ON pack_items;
  DROP POLICY IF EXISTS "Allow public to insert pack_items" ON pack_items;
  DROP POLICY IF EXISTS "Allow public to update pack_items" ON pack_items;
  DROP POLICY IF EXISTS "Allow public to delete pack_items" ON pack_items;
  DROP POLICY IF EXISTS "Allow public to view inbound_shipments" ON inbound_shipments;
  DROP POLICY IF EXISTS "Allow public to insert inbound_shipments" ON inbound_shipments;
  DROP POLICY IF EXISTS "Allow public to update inbound_shipments" ON inbound_shipments;
  DROP POLICY IF EXISTS "Allow public to delete inbound_shipments" ON inbound_shipments;
  DROP POLICY IF EXISTS "Allow public to view inbound_shipment_items" ON inbound_shipment_items;
  DROP POLICY IF EXISTS "Allow public to insert inbound_shipment_items" ON inbound_shipment_items;
  DROP POLICY IF EXISTS "Allow public to update inbound_shipment_items" ON inbound_shipment_items;
  DROP POLICY IF EXISTS "Allow public to delete inbound_shipment_items" ON inbound_shipment_items;
  DROP POLICY IF EXISTS "Allow public to view location_transfers" ON location_transfers;
  DROP POLICY IF EXISTS "Allow public to insert location_transfers" ON location_transfers;
  DROP POLICY IF EXISTS "Allow public to update location_transfers" ON location_transfers;
  DROP POLICY IF EXISTS "Allow public to delete location_transfers" ON location_transfers;
  DROP POLICY IF EXISTS "Allow public to view sales" ON sales;
  DROP POLICY IF EXISTS "Allow public to insert sales" ON sales;
  DROP POLICY IF EXISTS "Allow public to update sales" ON sales;
  DROP POLICY IF EXISTS "Allow public to delete sales" ON sales;
  DROP POLICY IF EXISTS "Allow public to view sale_items" ON sale_items;
  DROP POLICY IF EXISTS "Allow public to insert sale_items" ON sale_items;
  DROP POLICY IF EXISTS "Allow public to update sale_items" ON sale_items;
  DROP POLICY IF EXISTS "Allow public to delete sale_items" ON sale_items;
  DROP POLICY IF EXISTS "Allow public to view shipping_labels" ON shipping_labels;
  DROP POLICY IF EXISTS "Allow public to insert shipping_labels" ON shipping_labels;
  DROP POLICY IF EXISTS "Allow public to update shipping_labels" ON shipping_labels;
  DROP POLICY IF EXISTS "Allow public to delete shipping_labels" ON shipping_labels;
  DROP POLICY IF EXISTS "Allow public to view activity_log" ON activity_log;
  DROP POLICY IF EXISTS "Allow public to insert activity_log" ON activity_log;
  DROP POLICY IF EXISTS "Allow public to update activity_log" ON activity_log;
  DROP POLICY IF EXISTS "Allow public to delete activity_log" ON activity_log;
END $$;

-- Create public access policies
CREATE POLICY "Allow public to view categories" ON categories FOR SELECT USING (true);
CREATE POLICY "Allow public to insert categories" ON categories FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update categories" ON categories FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete categories" ON categories FOR DELETE USING (true);

CREATE POLICY "Allow public to view locations" ON locations FOR SELECT USING (true);
CREATE POLICY "Allow public to insert locations" ON locations FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update locations" ON locations FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete locations" ON locations FOR DELETE USING (true);

CREATE POLICY "Allow public to view providers" ON providers FOR SELECT USING (true);
CREATE POLICY "Allow public to insert providers" ON providers FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update providers" ON providers FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete providers" ON providers FOR DELETE USING (true);

CREATE POLICY "Allow public to view products" ON products FOR SELECT USING (true);
CREATE POLICY "Allow public to insert products" ON products FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update products" ON products FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete products" ON products FOR DELETE USING (true);

CREATE POLICY "Allow public to view product_images" ON product_images FOR SELECT USING (true);
CREATE POLICY "Allow public to insert product_images" ON product_images FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update product_images" ON product_images FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete product_images" ON product_images FOR DELETE USING (true);

CREATE POLICY "Allow public to view product_packs" ON product_packs FOR SELECT USING (true);
CREATE POLICY "Allow public to insert product_packs" ON product_packs FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update product_packs" ON product_packs FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete product_packs" ON product_packs FOR DELETE USING (true);

CREATE POLICY "Allow public to view pack_items" ON pack_items FOR SELECT USING (true);
CREATE POLICY "Allow public to insert pack_items" ON pack_items FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update pack_items" ON pack_items FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete pack_items" ON pack_items FOR DELETE USING (true);

CREATE POLICY "Allow public to view inbound_shipments" ON inbound_shipments FOR SELECT USING (true);
CREATE POLICY "Allow public to insert inbound_shipments" ON inbound_shipments FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update inbound_shipments" ON inbound_shipments FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete inbound_shipments" ON inbound_shipments FOR DELETE USING (true);

CREATE POLICY "Allow public to view inbound_shipment_items" ON inbound_shipment_items FOR SELECT USING (true);
CREATE POLICY "Allow public to insert inbound_shipment_items" ON inbound_shipment_items FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update inbound_shipment_items" ON inbound_shipment_items FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete inbound_shipment_items" ON inbound_shipment_items FOR DELETE USING (true);

CREATE POLICY "Allow public to view location_transfers" ON location_transfers FOR SELECT USING (true);
CREATE POLICY "Allow public to insert location_transfers" ON location_transfers FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update location_transfers" ON location_transfers FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete location_transfers" ON location_transfers FOR DELETE USING (true);

CREATE POLICY "Allow public to view sales" ON sales FOR SELECT USING (true);
CREATE POLICY "Allow public to insert sales" ON sales FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update sales" ON sales FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete sales" ON sales FOR DELETE USING (true);

CREATE POLICY "Allow public to view sale_items" ON sale_items FOR SELECT USING (true);
CREATE POLICY "Allow public to insert sale_items" ON sale_items FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update sale_items" ON sale_items FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete sale_items" ON sale_items FOR DELETE USING (true);

CREATE POLICY "Allow public to view shipping_labels" ON shipping_labels FOR SELECT USING (true);
CREATE POLICY "Allow public to insert shipping_labels" ON shipping_labels FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update shipping_labels" ON shipping_labels FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete shipping_labels" ON shipping_labels FOR DELETE USING (true);

CREATE POLICY "Allow public to view activity_log" ON activity_log FOR SELECT USING (true);
CREATE POLICY "Allow public to insert activity_log" ON activity_log FOR INSERT WITH CHECK (true);
CREATE POLICY "Allow public to update activity_log" ON activity_log FOR UPDATE USING (true);
CREATE POLICY "Allow public to delete activity_log" ON activity_log FOR DELETE USING (true);

-- ============================================
-- PART 5: SEED INITIAL DATA
-- ============================================

DO $$ 
DECLARE
  electronics_category_id UUID;
  smartphone_category_id UUID;
  laptop_category_id UUID;
  tablet_category_id UUID;
  warehouse_miami_id UUID;
  warehouse_ny_id UUID;
  store_la_id UUID;
  us_provider_id UUID;
  china_provider_id UUID;
  europe_provider_id UUID;
BEGIN
  -- Create parent category first, then children with proper parent_id relationships
  -- Insert parent category: Electronics
  INSERT INTO categories (name, path, field_schema)
  VALUES 
    ('Electronics', 'Electronics', '{"fields": []}'::jsonb)
  ON CONFLICT (path) DO UPDATE SET field_schema = EXCLUDED.field_schema
  RETURNING id INTO electronics_category_id;

IF electronics_category_id IS NULL THEN
    SELECT id INTO electronics_category_id FROM categories WHERE path = 'Electronics' LIMIT 1;
  END IF;

-- Insert child categories with parent_id set to Electronics
  INSERT INTO categories (name, parent_id, path, field_schema)
  VALUES 
    ('Smartphones', electronics_category_id, 'Electronics/Smartphones', 
     '{"fields": [
        {"key": "imei", "label": "IMEI", "type": "text", "required": true, "showInTable": false},
        {"key": "storage", "label": "Storage", "type": "text", "required": false, "showInTable": false},
        {"key": "color", "label": "Color", "type": "text", "required": false, "showInTable": false},
        {"key": "battery_health", "label": "Battery Health", "type": "number", "required": false, "showInTable": false},
        {"key": "condition", "label": "Condition", "type": "select", "required": true, "showInTable": true, "tableLabel": "Estado", "options": ["new", "like_new", "very_good", "good", "acceptable", "refurbished"]}
      ]}'::jsonb)
  ON CONFLICT (path) DO UPDATE SET field_schema = EXCLUDED.field_schema, parent_id = electronics_category_id
  RETURNING id INTO smartphone_category_id;

IF smartphone_category_id IS NULL THEN
    SELECT id INTO smartphone_category_id FROM categories WHERE path = 'Electronics/Smartphones' LIMIT 1;
  END IF;

INSERT INTO categories (name, parent_id, path, field_schema)
  VALUES 
    ('Laptops', electronics_category_id, 'Electronics/Laptops',
     '{"fields": [
        {"key": "serial_number", "label": "Serial Number", "type": "text", "required": true, "showInTable": false},
        {"key": "processor", "label": "Processor", "type": "text", "required": false, "showInTable": true, "tableLabel": "CPU"},
        {"key": "ram", "label": "RAM", "type": "text", "required": false, "showInTable": false},
        {"key": "storage", "label": "Storage", "type": "text", "required": false, "showInTable": false}
      ]}'::jsonb)
  ON CONFLICT (path) DO UPDATE SET field_schema = EXCLUDED.field_schema, parent_id = electronics_category_id
  RETURNING id INTO laptop_category_id;

IF laptop_category_id IS NULL THEN
    SELECT id INTO laptop_category_id FROM categories WHERE path = 'Electronics/Laptops' LIMIT 1;
  END IF;

INSERT INTO categories (name, parent_id, path, field_schema)
  VALUES 
    ('Tablets', electronics_category_id, 'Electronics/Tablets',
     '{"fields": [
        {"key": "serial_number", "label": "Serial Number", "type": "text", "required": true, "showInTable": false},
        {"key": "storage", "label": "Storage", "type": "text", "required": false, "showInTable": true, "tableLabel": "Almacenamiento"},
        {"key": "cellular", "label": "Cellular", "type": "text", "required": false, "showInTable": false}
      ]}'::jsonb)
  ON CONFLICT (path) DO UPDATE SET field_schema = EXCLUDED.field_schema, parent_id = electronics_category_id
  RETURNING id INTO tablet_category_id;

IF tablet_category_id IS NULL THEN
    SELECT id INTO tablet_category_id FROM categories WHERE path = 'Electronics/Tablets' LIMIT 1;
  END IF;

-- Insert Locations
  INSERT INTO locations (name, type, address)
  VALUES 
    ('Miami Warehouse', 'warehouse', '123 Warehouse St, Miami, FL 33101'),
    ('New York Warehouse', 'warehouse', '456 Storage Ave, New York, NY 10001'),
    ('Los Angeles Store', 'store', '789 Retail Blvd, Los Angeles, CA 90001')
  ON CONFLICT (name) DO NOTHING;

SELECT id INTO warehouse_miami_id FROM locations WHERE name = 'Miami Warehouse' LIMIT 1;
  SELECT id INTO warehouse_ny_id FROM locations WHERE name = 'New York Warehouse' LIMIT 1;
  SELECT id INTO store_la_id FROM locations WHERE name = 'Los Angeles Store' LIMIT 1;

-- Insert Providers
  INSERT INTO providers (name, country, type, contact_email, contact_phone, notes)
  VALUES 
    ('US Direct Supplier', 'US', 'direct', 'john@ussupplier.com', '+1-555-0100', 'Primary US supplier for electronics'),
    ('China Electronics Co', 'CN', 'distributor', 'wei@chinaelec.com', '+86-555-0200', 'Large volume distributor from China'),
    ('Europe Tech Distributors', 'FR', 'distributor', 'marie@eurotech.com', '+33-555-0300', 'European electronics distributor')
  ON CONFLICT (name) DO NOTHING;

SELECT id INTO us_provider_id FROM providers WHERE name = 'US Direct Supplier' LIMIT 1;
  SELECT id INTO china_provider_id FROM providers WHERE name = 'China Electronics Co' LIMIT 1;
  SELECT id INTO europe_provider_id FROM providers WHERE name = 'Europe Tech Distributors' LIMIT 1;

-- Insert Sample Products (only if they don't exist)
  IF NOT EXISTS (SELECT 1 FROM products WHERE sku = 'IP15PM-1TB-NAT') THEN
    INSERT INTO products (sku, name, brand, model, condition, seller_notes, specifications, category_id, purchase_price, selling_price, currency, current_location_id, status, provider_id, purchase_date)
    VALUES 
      ('IP15PM-1TB-NAT', 'iPhone 15 Pro Max 1TB Natural Titanium', 'Apple', 'iPhone 15 Pro Max', 'refurbished', 
       'Dispositivo en muy buena condición física. La pantalla puede mostrar rayones leves.',
       '{"imei": "352000000000001", "color": "Natural Titanium", "storage": "1TB", "condition": "Reacondicionado", "battery_health": 95}'::jsonb,
       smartphone_category_id, 850.00, 1299.99, 'USD', warehouse_miami_id, 'in_stock', us_provider_id, CURRENT_DATE - INTERVAL '30 days'),
      
      ('IP15PM-512-BLK', 'iPhone 15 Pro Max 512GB Black Titanium', 'Apple', 'iPhone 15 Pro Max', 'like_new',
       'Excelente estado, sin rayones visibles.',
       '{"imei": "352000000000002", "color": "Black Titanium", "storage": "512GB", "condition": "Como Nuevo", "battery_health": 98}'::jsonb,
       smartphone_category_id, 750.00, 1199.99, 'USD', warehouse_miami_id, 'in_stock', us_provider_id, CURRENT_DATE - INTERVAL '25 days'),
      
      ('S24U-512-BLK', 'Samsung Galaxy S24 Ultra 512GB Black', 'Samsung', 'Galaxy S24 Ultra', 'new',
       'Nuevo, sellado de fábrica.',
       '{"imei": "352000000000003", "color": "Black", "storage": "512GB", "condition": "Nuevo", "battery_health": 100}'::jsonb,
       smartphone_category_id, 900.00, 1399.99, 'USD', warehouse_ny_id, 'in_stock', china_provider_id, CURRENT_DATE - INTERVAL '20 days'),
      
      ('MBP16-M3-32-1TB', 'MacBook Pro 16" M3 Max 32GB 1TB', 'Apple', 'MacBook Pro 16"', 'very_good',
       'Usado, funciona perfectamente. Pequeñas marcas de uso en el chasis.',
       '{"serial_number": "C02ABC123456", "processor": "M3 Max", "ram": "32GB", "storage": "1TB SSD"}'::jsonb,
       laptop_category_id, 2200.00, 2999.99, 'USD', store_la_id, 'in_stock', us_provider_id, CURRENT_DATE - INTERVAL '15 days'),
      
      ('IPADPRO13-M4-512', 'iPad Pro 13" M4 512GB WiFi', 'Apple', 'iPad Pro 13"', 'like_new',
       'Como nuevo, con caja original.',
       '{"serial_number": "DMPABC123456", "storage": "512GB", "cellular": "No"}'::jsonb,
       tablet_category_id, 950.00, 1299.99, 'USD', warehouse_miami_id, 'in_stock', us_provider_id, CURRENT_DATE - INTERVAL '10 days');
  END IF;

END $$;

-- ============================================
-- COMPLETION MESSAGE
-- ============================================
SELECT 'Database setup completed successfully! All tables, indexes, triggers, RLS policies, and seed data are ready.' AS status;
[V0_FILE]typescript:file="app/categories/page.tsx" isMerged="true"
"use client"

import { CategoryFlow } from "@/components/category-flow"
import useSWR from "swr"
import { createClient } from "@/lib/supabase/client"
import type { Category } from "@/lib/types/database"

async function fetchCategories(): Promise<Category[]> {
  const supabase = createClient()
  const { data } = await supabase.from("categories").select("*").order("path", { ascending: true })
  return data || []
}

export default function CategoriesPage() {
  const { data: categories = [], isLoading } = useSWR<Category[]>("categories", fetchCategories, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  })

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Categorías</h1>
          <p className="text-sm text-muted-foreground">
            Conecta el lado derecho de un nodo al lado izquierdo de otro para establecer relaciones padre-hijo
          </p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{categories.length}</div>
            <div className="text-sm text-muted-foreground">Categorías</div>
          </div>
        </div>
      </div>

<div className="flex-1 border rounded-lg overflow-hidden">
        {isLoading ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-muted-foreground">Cargando categorías...</div>
          </div>
        ) : (
          <CategoryFlow categories={categories} />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/create-category-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

interface CreateCategoryDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function CreateCategoryDialog({ open, onOpenChange }: CreateCategoryDialogProps) {
  const { mutate } = useSWRConfig()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formKey, setFormKey] = useState(0)
  const [categoryName, setCategoryName] = useState("")

const capitalizeWords = (str: string) => {
    return str
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
      .join(" ")
  }

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

const formData = new FormData(e.currentTarget)

try {
      await createCategory(formData)
      await mutate("categories")
      setFormKey((prev) => prev + 1)
      setCategoryName("")
      onOpenChange(false)
    } catch (error) {
      console.error("Failed to create category:", error)
      alert("Error al crear la categoría")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Nueva Categoría</DialogTitle>
          <DialogDescription>Crea una nueva categoría. Podrás conectarla a otras categorías después.</DialogDescription>
        </DialogHeader>

<form key={formKey} onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Nombre</Label>
            <Input
              id="name"
              name="name"
              placeholder="ej: Smartphones, Laptops"
              value={categoryName}
              onChange={(e) => setCategoryName(capitalizeWords(e.target.value))}
              required
            />
          </div>

<div className="flex gap-2 justify-end">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Creando..." : "Crear"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.145 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.205 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

/* Custom styles for React Flow handles to ensure visibility at all zoom levels */
  .react-flow__handle {
    min-width: 16px !important;
    min-height: 16px !important;
    transition: all 0.2s ease;
  }

.react-flow__handle:hover {
    transform: scale(1.3);
  }
}
[V0_FILE]typescript:file="components/category-flow.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useCallback, useState, useEffect, useRef } from "react"
import {
  ReactFlow,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  ReactFlowProvider,
  type Connection,
  type Edge,
  type Node,
  type ReactFlowInstance,
  BackgroundVariant,
  Panel,
} from "@xyflow/react"
import "@xyflow/react/dist/style.css"
import Dagre from "@dagrejs/dagre"
import { CategoryNode } from "@/components/category-node"
import { CreateCategoryDialog } from "@/components/create-category-dialog"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import type { Category } from "@/lib/types/database"
import { updateCategoryParent } from "@/lib/db/actions"
import { useSWRConfig } from "swr"

const nodeTypes = {
  category: CategoryNode,
}

const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}))
  g.setGraph({ rankdir: "LR", nodesep: 100, ranksep: 200 })

edges.forEach((edge) => g.setEdge(edge.source, edge.target))
  nodes.forEach((node) => g.setNode(node.id, { width: 140, height: 60 }))

Dagre.layout(g)

return {
    nodes: nodes.map((node) => {
      const position = g.node(node.id)
      return { ...node, position: { x: position.x - 70, y: position.y - 30 } }
    }),
    edges,
  }
}

interface CategoryFlowProps {
  categories: Category[]
}

function CategoryFlowInner({ categories }: CategoryFlowProps) {
  const { mutate } = useSWRConfig()
  const [nodes, setNodes, onNodesChange] = useNodesState([])
  const [edges, setEdges, onEdgesChange] = useEdgesState([])
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [zoomLevel, setZoomLevel] = useState(50)
  const previousCategoryIdsRef = useRef<string>("")
  const reactFlowInstance = useRef<ReactFlowInstance | null>(null)

useEffect(() => {
    const newNodes: Node[] = categories.map((category) => ({
      id: category.id,
      type: "category",
      position: { x: 0, y: 0 },
      data: {
        category,
        isTopParent: !category.parent_id,
        zoomLevel: zoomLevel / 100,
      },
    }))

const newEdges: Edge[] = categories
      .filter((c) => c.parent_id)
      .map((category) => ({
        id: `${category.parent_id}-${category.id}`,
        source: category.parent_id!,
        target: category.id,
        sourceHandle: "right",
        targetHandle: "left",
        animated: true,
      }))

const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(newNodes, newEdges)

setNodes(layoutedNodes)
    setEdges(layoutedEdges)

const currentIds = categories
      .map((c) => c.id)
      .sort()
      .join(",")
    const previousIds = previousCategoryIdsRef.current

const newCategoryAdded = previousIds !== "" && categories.some((c) => !previousIds.includes(c.id))

if (newCategoryAdded && reactFlowInstance.current) {
      setTimeout(() => {
        reactFlowInstance.current?.fitView({
          padding: 0.2,
          duration: 400,
          maxZoom: 1,
        })
      }, 50)
    }

previousCategoryIdsRef.current = currentIds
  }, [categories, setNodes, setEdges, zoomLevel])

const onConnect = useCallback(
    async (connection: Connection) => {
      if (!connection.source || !connection.target) return

try {
        await updateCategoryParent(connection.target, connection.source)
        setEdges((eds) => addEdge(connection, eds))
        await mutate("categories")
      } catch (error) {
        console.error("Failed to connect categories:", error)
        alert("Error al conectar categorías")
      }
    },
    [setEdges, mutate],
  )

const onInit = useCallback((instance: ReactFlowInstance) => {
    reactFlowInstance.current = instance
  }, [])

const onMove = useCallback(() => {
    if (reactFlowInstance.current) {
      const viewport = reactFlowInstance.current.getViewport()
      const newZoomLevel = Math.round(viewport.zoom * 100)
      setZoomLevel(newZoomLevel)
    }
  }, [])

return (
    <>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onInit={onInit}
        onMove={onMove}
        nodeTypes={nodeTypes}
        defaultViewport={{ x: 50, y: 50, zoom: 0.5 }}
        fitView
        fitViewOptions={{ padding: 0.2 }}
        className="bg-background"
      >
        <Controls className="!bg-background !border !border-border !rounded-lg !shadow-lg [&_button]:!bg-background [&_button]:!text-foreground [&_button]:!border-border hover:[&_button]:!bg-accent" />
        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />

<Panel position="top-right" className="m-4">
          <Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
            <Plus className="h-4 w-4 mr-2" />
            Nueva Categoría
          </Button>
        </Panel>

<Panel position="bottom-right" className="m-4">
          <div className="bg-background border border-border rounded-lg px-3 py-1.5 text-sm font-medium shadow-lg">
            Zoom: {zoomLevel}%
          </div>
        </Panel>
      </ReactFlow>

<CreateCategoryDialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen} />
    </>
  )
}

export function CategoryFlow({ categories }: CategoryFlowProps) {
  return (
    <div className="w-full h-full">
      <ReactFlowProvider>
        <CategoryFlowInner categories={categories} />
      </ReactFlowProvider>
    </div>
  )
}
[V0_FILE]typescript:file="components/category-node.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { memo, useState } from "react"
import { Handle, Position } from "@xyflow/react"
import { Card } from "@/components/ui/card"
import { CategorySchemaModal } from "@/components/category-schema-modal"
import type { Category } from "@/lib/types/database"

interface CategoryNodeProps {
  data: {
    category: Category
    isTopParent: boolean
    zoomLevel?: number
  }
}

export const CategoryNode = memo(({ data }: CategoryNodeProps) => {
  const { category, isTopParent, zoomLevel = 1 } = data
  const [isModalOpen, setIsModalOpen] = useState(false)

// At 50% zoom: 16/0.5 = 32px (capped at 32)
  // At 100% zoom: 16/1.0 = 16px
  // At 150% zoom: 16/1.5 = 10.67px
  // At 200% zoom: 16/2.0 = 8px (capped at 8)
  const handleSize = Math.max(1, Math.min(26, 4 / zoomLevel))

return (
    <>
      <div className="relative">
        <Handle
          type="target"
          position={Position.Left}
          id="left"
          className="!bg-primary"
          style={{
            width: `${handleSize}px`,
            height: `${handleSize}px`,
          }}
        />

<Card
          className={`min-w-[100px] max-w-auto px-4 max-h-[50px] flex items-center justify-center cursor-pointer hover:shadow-lg transition-all ${
            isTopParent ? "border-blue-500 border-2" : ""
          }`}
          onClick={() => setIsModalOpen(true)}
        >
          <div className="">
            <h3 className="font-semibold text-lg text-center truncate">{category.name}</h3>
          </div>
        </Card>

<CategorySchemaModal category={category} open={isModalOpen} onOpenChange={setIsModalOpen} />
    </>
  )
})

CategoryNode.displayName = "CategoryNode"
[V0_FILE]markdown:file="README.md" isMerged="true"
# Inventory Management System

A comprehensive inventory management system built with Next.js, Supabase, and modern web technologies.

## Features

- **Product Management**: Track products with QR codes, categories, and specifications
- **Location Management**: Manage warehouses, stores, and storage locations with Mapbox integration
- **Ingresos (Draft Products)**: Create and manage incoming inventory
- **Categories**: Hierarchical category system with custom field schemas
- **Providers**: Manage suppliers and distributors
- **Sales**: Track sales, payments, and shipping
- **Transfer History**: Monitor product movements between locations

## Setup

### 1. Install Dependencies

\`\`\`bash
npm install
\`\`\`

### 2. Configure Environment Variables

You need to add the following environment variable to your Vercel project:

- `NEXT_PUBLIC_MAPBOX_TOKEN`: Your Mapbox API token for address autocomplete and maps

To get a Mapbox token:
1. Go to [https://account.mapbox.com/](https://account.mapbox.com/)
2. Sign up or log in
3. Go to "Access tokens"
4. Create a new token or use the default public token
5. Add it to your Vercel project environment variables

### 3. Run Database Setup

The database setup script is located at `scripts/setup_database.sql`. Run it from the v0 interface to create all necessary tables and seed data.

Then run the coordinate migration:
\`\`\`sql
-- Run scripts/add_location_coordinates.sql
\`\`\`

### 4. Start Development Server

\`\`\`bash
npm run dev
\`\`\`

## Technologies Used

- **Next.js 15**: React framework with App Router
- **Supabase**: PostgreSQL database with real-time capabilities
- **Mapbox GL JS**: Interactive maps and geocoding
- **shadcn/ui**: Beautiful UI components
- **React Flow**: Interactive node-based category visualization
- **QR Code Generation**: Product tracking with QR codes
- **TypeScript**: Type-safe development

## Key Features

### Location Management with Mapbox

- **Address Autocomplete**: Type an address and get suggestions from Mapbox with 500ms debounce
- **Coordinate Storage**: Automatically save latitude/longitude for each location
- **Interactive Maps**: View all locations on a map with custom markers
- **Share Addresses**: Share location addresses via Google Maps links
- **Statistics**: See product counts and draft counts per location

### Product Tracking

- QR code generation for each product
- Category-based custom fields
- Transfer history between locations
- Status tracking (draft, in_stock, sold, etc.)

### Ingresos (Incoming Inventory)

- Create draft products for incoming inventory
- Bulk operations
- Location assignment
- Provider tracking

## License

MIT
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "@supabase/ssr": "0.7.0",
    "qrcode": "1.5.4",
    "jsqr": "1.4.0",
    "react-number-format": "5.4.4",
    "framer-motion": "12.23.22",
    "@xyflow/react": "12.8.6",
    "@dagrejs/dagre": "1.1.5",
    "swr": "2.3.6"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5",
    "@types/qrcode": "1.5.5"
  }
}
[V0_FILE]typescript:file="app/locations/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { LocationsClient } from "@/components/locations-client"

export default async function LocationsPage() {
  const supabase = await createClient()

const { data: locations } = await supabase.from("locations").select("*").order("name")

const locationStats = await Promise.all(
    (locations || []).map(async (location) => {
      const { count: productCount } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("current_location_id", location.id)
        .in("status", ["in_stock", "reserved"])

const { count: draftCount } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("current_location_id", location.id)
        .eq("status", "draft")

const { count: transitCount } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("current_location_id", location.id)
        .eq("status", "in_transit")

return {
        ...location,
        productCount: productCount || 0,
        draftCount: draftCount || 0,
        transitCount: transitCount || 0,
      }
    }),
  )

const totalProducts = locationStats.reduce((sum, loc) => sum + loc.productCount, 0)
  const totalTransit = locationStats.reduce((sum, loc) => sum + loc.transitCount, 0)
  const totalDrafts = locationStats.reduce((sum, loc) => sum + loc.draftCount, 0)

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Locations</h1>
          <p className="text-sm text-muted-foreground">Gestión de almacenes, tiendas y ubicaciones de almacenamiento</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{locationStats.length}</div>
            <div className="text-sm text-muted-foreground">Locations</div>
          </div>
        </div>
      </div>

<LocationsClient
        locations={locationStats}
        totalProducts={totalProducts}
        totalTransit={totalTransit}
        totalDrafts={totalDrafts}
      />
    </div>
  )
}
[V0_FILE]typescript:file="components/location-map.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import type { Location } from "@/lib/types/database"

interface LocationMapProps {
  locations: Location[]
  selectedLocationId?: string
  onLocationClick?: (locationId: string) => void
  height?: string
}

const MAPBOX_TOKEN =
  "pk.eyJ1IjoiZmFjdW5kb2Nvcm5hZ28iLCJhIjoiY2x6MGdvMXc4MnlqZDJpcTdubm5uNmZucSJ9.f3P36chuN4unzGhWlrITIQ"

interface GeocodedLocation extends Location {
  lat?: number
  lng?: number
}

export function LocationMap({ locations, selectedLocationId, onLocationClick, height = "500px" }: LocationMapProps) {
  const [mapUrl, setMapUrl] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const geocodeLocations = async () => {
      setIsLoading(true)

const geocodedLocations: GeocodedLocation[] = await Promise.all(
        locations.map(async (loc) => {
          try {
            const response = await fetch(
              `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(loc.address)}.json?access_token=${MAPBOX_TOKEN}&limit=1`,
            )
            const data = await response.json()

if (data.features && data.features.length > 0) {
              const [lng, lat] = data.features[0].center
              return { ...loc, lat, lng }
            }
            return loc
          } catch (error) {
            console.error(`Failed to geocode address: ${loc.address}`, error)
            return loc
          }
        }),
      )

const locationsWithCoords = geocodedLocations.filter((loc) => loc.lat && loc.lng)

if (locationsWithCoords.length === 0) {
        const url = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/-98.5795,39.8283,3,0/800x600@2x?access_token=${MAPBOX_TOKEN}`
        setMapUrl(url)
        setIsLoading(false)
        return
      }

const selectedLocation = selectedLocationId
        ? locationsWithCoords.find((loc) => loc.id === selectedLocationId)
        : null

const markers = locationsWithCoords
        .map((loc) => {
          const color = loc.type === "warehouse" ? "3b82f6" : loc.type === "store" ? "10b981" : "f59e0b"
          const isSelected = selectedLocationId === loc.id
          const markerSize = isSelected ? "l" : "s"
          return `pin-${markerSize}+${color}(${loc.lng},${loc.lat})`
        })
        .join(",")

const centerLng =
        selectedLocation?.lng ||
        locationsWithCoords.reduce((sum, loc) => sum + (loc.lng || 0), 0) / locationsWithCoords.length
      const centerLat =
        selectedLocation?.lat ||
        locationsWithCoords.reduce((sum, loc) => sum + (loc.lat || 0), 0) / locationsWithCoords.length
      const zoom = selectedLocation ? 14 : locationsWithCoords.length > 1 ? 4 : 10

const url = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${markers}/${centerLng},${centerLat},${zoom},0/800x600@2x?access_token=${MAPBOX_TOKEN}`
      setMapUrl(url)
      setIsLoading(false)
    }

geocodeLocations()
  }, [locations, selectedLocationId])

export async function POST(request: Request) {
  try {
    const formData = await request.formData()
    const result = await createLocation(formData)
    return NextResponse.json(result.data, { status: 201 })
  } catch (error) {
    console.error("[v0] Error creating location:", error)
    return NextResponse.json({ error: "Failed to create location" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/locations-client.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import React from "react"

import type { Location } from "@/lib/types/database"
import { useState, useEffect } from "react"
import { Plus, ChevronDown, ChevronRight, Share2, Check, History } from "lucide-react"
import { useRouter } from "next/navigation"
import { LocationMap } from "@/components/location-map"
import { MapboxAddressInput } from "@/components/mapbox-address-input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { updateLocation, getLocationTransferHistory } from "@/lib/db/actions"
import { useToast } from "@/hooks/use-toast"
import { formatDistanceToNow } from "date-fns"
import { es } from "date-fns/locale"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

interface LocationWithStats extends Location {
  productCount: number
  draftCount: number
  transitCount: number
}

interface LocationsClientProps {
  locations: LocationWithStats[]
  totalProducts: number
  totalTransit: number
  totalDrafts: number
}

export function LocationsClient({ locations, totalProducts, totalTransit, totalDrafts }: LocationsClientProps) {
  const router = useRouter()
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
  const [selectedLocationId, setSelectedLocationId] = useState<string | undefined>(undefined)
  const [isCreatingNew, setIsCreatingNew] = useState(false)
  const { toast } = useToast()

const toggleRow = (id: string) => {
    const newExpanded = new Set(expandedRows)
    if (newExpanded.has(id)) {
      newExpanded.delete(id)
      setSelectedLocationId(undefined)
    } else {
      newExpanded.clear() // Only allow one expanded at a time
      newExpanded.add(id)
      setSelectedLocationId(id)
    }
    setExpandedRows(newExpanded)
  }

const handleProductCountClick = (locationId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    router.push(`/products?location=${locationId}`)
  }

const handleCreateLocation = async () => {
    setIsCreatingNew(true)
    try {
      // Create a new location with default values
      const formData = new FormData()
      formData.append("name", "Nueva Ubicación")
      formData.append("type", "warehouse")
      formData.append("address", "")

const response = await fetch("/api/locations", {
        method: "POST",
        body: formData,
      })

if (!response.ok) throw new Error("Failed to create location")

const newLocation = await response.json()

// Refresh the page data
      router.refresh()

// Auto-expand the new location after a brief delay to allow the page to refresh
      setTimeout(() => {
        const newExpanded = new Set<string>()
        newExpanded.add(newLocation.id)
        setExpandedRows(newExpanded)
        setSelectedLocationId(newLocation.id)
      }, 100)

toast({
        title: "Ubicación creada",
        description: "Complete los detalles de la nueva ubicación",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo crear la ubicación",
        variant: "destructive",
      })
    } finally {
      setIsCreatingNew(false)
    }
  }

return (
    <div className="flex flex-col flex-1 overflow-hidden">
      <div className="border rounded-lg bg-card mb-4">
        <div className="flex items-center gap-3 p-3">
          <div className="flex items-center gap-6 flex-1">
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalProducts}</div>
              <div className="text-xs text-muted-foreground">Productos en todas las localizaciones</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalTransit}</div>
              <div className="text-xs text-muted-foreground">Productos en tránsito (de venta)</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalDrafts}</div>
              <div className="text-xs text-muted-foreground">Productos sin ingresar (Ingresos)</div>
            </div>
          </div>
          <div className="h-10 w-px bg-border" />
          <Button size="sm" className="h-10 aspect-square" onClick={handleCreateLocation} disabled={isCreatingNew}>
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </div>

{locations.length > 0 && (
        <div className="mb-4 rounded-lg overflow-hidden border">
          <LocationMap locations={locations} height="400px" selectedLocationId={selectedLocationId} />
        </div>
      )}

<div className="border rounded-lg flex flex-col flex-1 bg-background overflow-hidden">
        <div className="flex-1 overflow-auto rounded-lg">
          <table className="w-full">
            <thead className="sticky top-0 z-10 bg-muted border-b">
              <tr>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground w-10 first:rounded-tl-lg"></th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">UBICACIÓN</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">DIRECCIÓN</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">PRODUCTOS</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground last:rounded-tr-lg">INGRESOS</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {locations.map((location) => {
                const isExpanded = expandedRows.has(location.id)
                return (
                  <React.Fragment key={location.id}>
                    <tr
                      className="hover:bg-muted/30 transition-colors cursor-pointer"
                      onClick={() => toggleRow(location.id)}
                    >
                      <td className="p-3">
                        {isExpanded ? (
                          <ChevronDown className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
                        )}
                      </td>
                      <td className="p-3">
                        <div className="flex items-center gap-3">
                          <div className="min-w-0">
                            <div className="font-medium text-sm truncate">{location.name}</div>
                            <div className="text-xs text-muted-foreground capitalize">{location.type}</div>
                          </div>
                        </div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm">{location.address}</div>
                      </td>
                      <td className="p-3">
                        <button
                          onClick={(e) => handleProductCountClick(location.id, e)}
                          className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
                        >
                          {location.productCount}
                        </button>
                      </td>
                      <td className="p-3">
                        <div className="text-sm font-medium">{location.draftCount}</div>
                      </td>
                    </tr>
                    {isExpanded && (
                      <tr key={`${location.id}-expanded`}>
                        <td colSpan={5} className="p-0">
                          <ExpandedLocationRow location={location} />
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

function ExpandedLocationRow({ location }: { location: LocationWithStats }) {
  const [editedValues, setEditedValues] = useState<Record<string, any>>({})
  const [isSaving, setIsSaving] = useState(false)
  const [transfers, setTransfers] = useState<any[]>([])
  const [loadingTransfers, setLoadingTransfers] = useState(true)
  const [showTransactionsModal, setShowTransactionsModal] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const hasChanges = Object.keys(editedValues).length > 0

useEffect(() => {
    const fetchTransfers = async () => {
      try {
        const data = await getLocationTransferHistory(location.id)
        setTransfers(data || [])
      } catch (error) {
        console.error("[v0] Error fetching transfers:", error)
      } finally {
        setLoadingTransfers(false)
      }
    }
    fetchTransfers()
  }, [location.id])

const handleSave = async () => {
    if (!hasChanges) return

console.log("[v0] Saving location with edited values:", editedValues)
    setIsSaving(true)
    try {
      const formData = new FormData()
      Object.entries(editedValues).forEach(([key, value]) => {
        formData.append(key, value?.toString() || "")
        console.log("[v0] Appending to formData:", key, value)
      })

const result = await updateLocation(location.id, formData)
      console.log("[v0] Update result:", result)

toast({
        title: "Ubicación actualizada",
        description: "Los cambios se han guardado correctamente",
      })
      setEditedValues({})
      router.refresh()
    } catch (error) {
      console.error("[v0] Error updating location:", error)
      toast({
        title: "Error",
        description: "No se pudo actualizar la ubicación",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const getValue = (key: string) => {
    return editedValues[key] !== undefined ? editedValues[key] : location[key as keyof Location]
  }

const handleChange = (key: string, value: any) => {
    console.log("[v0] handleChange called:", key, value)
    setEditedValues({ ...editedValues, [key]: value })
  }

const shareAddress = async (e: React.MouseEvent) => {
    e.stopPropagation()
    if (navigator.share) {
      try {
        await navigator.share({
          title: "Dirección",
          text: location.address,
        })
      } catch (err) {
        navigator.clipboard.writeText(location.address)
      }
    } else {
      navigator.clipboard.writeText(location.address)
      toast({
        title: "Dirección copiada",
        description: "La dirección se ha copiado al portapapeles",
      })
    }
  }

return (
    <div className="p-6 bg-muted/20">
      <div className="flex items-center justify-between mb-6 pb-4 border-b">
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">ID:</span>
            <span className="text-sm font-mono">{location.id}</span>
          </div>
        </div>

<div className="flex items-center gap-2">
          <Dialog open={showTransactionsModal} onOpenChange={setShowTransactionsModal}>
            <DialogTrigger asChild>
              <Button variant="outline" size="sm">
                <History className="h-4 w-4 mr-2" />
                Transacciones
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Transacciones - {location.name}</DialogTitle>
                <DialogDescription>Historial de movimientos de productos en esta ubicación</DialogDescription>
              </DialogHeader>
              {loadingTransfers ? (
                <div className="text-sm text-muted-foreground py-8 text-center">Cargando transacciones...</div>
              ) : transfers.length === 0 ? (
                <div className="text-sm text-muted-foreground py-8 text-center">No hay transacciones registradas</div>
              ) : (
                <div className="space-y-3">
                  {transfers.map((transfer) => (
                    <div key={transfer.id} className="flex items-start justify-between p-4 bg-muted rounded-lg border">
                      <div className="flex-1">
                        <div className="text-sm font-medium">
                          {transfer.products?.brand} {transfer.products?.model}
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">
                          De: {transfer.from_location?.name || "N/A"} → A: {transfer.to_location?.name || "N/A"}
                        </div>
                        {transfer.notes && <div className="text-xs text-muted-foreground mt-1">{transfer.notes}</div>}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {formatDistanceToNow(new Date(transfer.transfer_date), { addSuffix: true, locale: es })}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </DialogContent>
          </Dialog>
          <Button variant="outline" size="sm" onClick={shareAddress}>
            <Share2 className="h-4 w-4 mr-2" />
            Compartir
          </Button>
          {hasChanges && (
            <Button onClick={handleSave} disabled={isSaving} size="sm" className="gap-2">
              <Check className="h-4 w-4" />
              {isSaving ? "Guardando..." : "Aceptar"}
            </Button>
          )}
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3 mb-6">
        <div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">NOMBRE</h4>
          <input
            type="text"
            value={getValue("name") || ""}
            onChange={(e) => handleChange("name", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Nombre de la ubicación"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">TIPO</h4>
          <Select value={getValue("type") || "warehouse"} onValueChange={(value) => handleChange("type", value)}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="warehouse">Warehouse</SelectItem>
              <SelectItem value="store">Store</SelectItem>
              <SelectItem value="house">House</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRODUCTOS EN STOCK</h4>
          <div className="text-sm font-medium">{location.productCount}</div>
        </div>

<div className="md:col-span-2">
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">DIRECCIÓN</h4>
          <MapboxAddressInput
            value={getValue("address") || ""}
            onChange={(address, coords) => {
              console.log("[v0] Address changed:", address, coords)
              handleChange("address", address)
            }}
            placeholder="Buscar dirección..."
            required={false}
            showLabel={false}
            textStyle={true}
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRODUCTOS EN TRÁNSITO</h4>
          <div className="text-sm font-medium">{location.transitCount}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/products-client.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { ProductsToolbar } from "@/components/products-toolbar"
import { ProductsTable } from "@/components/products-table"
import type { Category, Location, Provider } from "@/lib/types/database"

interface ProductsClientProps {
  products: any[]
  categories: Category[]
  locations: Location[]
  providers: Provider[]
}

export function ProductsClient({ products, categories, locations, providers }: ProductsClientProps) {
  const router = useRouter()
  const searchParams = useSearchParams()

const [searchQuery, setSearchQuery] = useState(searchParams.get("search") || "")
  const [debouncedSearch, setDebouncedSearch] = useState(searchQuery)
  const locationFilter = searchParams.get("location")

useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearch(searchQuery)

// Update URL with search params
      const params = new URLSearchParams(searchParams.toString())
      if (searchQuery) {
        params.set("search", searchQuery)
      } else {
        params.delete("search")
      }

const newUrl = params.toString() ? `/products?${params.toString()}` : "/products"
      router.replace(newUrl, { scroll: false })
    }, 300)

return () => clearTimeout(timer)
  }, [searchQuery])

const filteredProducts = locationFilter ? products.filter((p) => p.current_location_id === locationFilter) : products

return (
    <>
      <div className="mb-4">
        <ProductsToolbar
          categories={categories}
          locations={locations}
          providers={providers}
          searchQuery={searchQuery}
          onSearchChange={setSearchQuery}
        />
      </div>

<div className="flex-1 overflow-auto min-h-0">
        <ProductsTable products={filteredProducts} searchQuery={debouncedSearch} locations={locations} />
      </div>
    </>
  )
}
[V0_FILE]typescript:file="components/products-table.tsx" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectSeparator } from "@/components/ui/select"
import { Package2, ChevronDown, ChevronRight, QrCode, Share2, Check, Trash2, ImageIcon } from "lucide-react"
import { updateProduct, deleteProduct } from "@/lib/db/actions"
import { useToast } from "@/hooks/use-toast"
import QRCode from "qrcode"
import { createClient } from "@/lib/supabase/client"
import { NumericFormat } from "react-number-format"
import { useRouter } from "next/navigation"
import { CategoryCreationModal } from "@/components/category-creation-modal"

interface ProductsTableProps {
  products: any[]
  searchQuery: string
  locations: any[]
}

const statusOptions = [
  { value: "in_stock", label: "En Stock", variant: "default" as const },
  { value: "sold", label: "Vendido", variant: "secondary" as const },
  { value: "reserved", label: "Reservado", variant: "secondary" as const },
  { value: "in_transit", label: "En Tránsito", variant: "secondary" as const },
  { value: "draft", label: "Borrador", variant: "secondary" as const },
  { value: "damaged", label: "Dañado", variant: "secondary" as const },
  { value: "returned", label: "Devuelto", variant: "secondary" as const },
]

export function ProductsTable({ products, searchQuery, locations }: ProductsTableProps) {
  const [expandedRow, setExpandedRow] = useState<string | null>(null)
  const [qrDialogOpen, setQrDialogOpen] = useState(false)
  const [galleryDialogOpen, setGalleryDialogOpen] = useState(false)
  const [selectedProduct, setSelectedProduct] = useState<any>(null)
  const [selectedQRCode, setSelectedQRCode] = useState<string | null>(null)
  const [qrImageUrl, setQrImageUrl] = useState<string>("")
  const { toast } = useToast()
  const router = useRouter()

const filteredProducts = React.useMemo(() => {
    if (!searchQuery || searchQuery.trim() === "") return products

const query = searchQuery.toLowerCase().trim()
    return products.filter((product) => {
      return (
        product.id?.toLowerCase().includes(query) ||
        product.name?.toLowerCase().includes(query) ||
        product.brand?.toLowerCase().includes(query) ||
        product.model?.toLowerCase().includes(query) ||
        product.sku?.toLowerCase().includes(query)
      )
    })
  }, [products, searchQuery])

useEffect(() => {
    if (searchQuery && filteredProducts.length === 1) {
      setExpandedRow(filteredProducts[0].id)
    } else if (!searchQuery) {
      setExpandedRow(null)
    }
  }, [searchQuery, filteredProducts])

const toggleRow = (id: string) => {
    setExpandedRow(expandedRow === id ? null : id)
  }

const formatCondition = (condition: string) => {
    const conditions: Record<string, string> = {
      new: "Nuevo",
      like_new: "Como Nuevo",
      very_good: "Muy Bueno",
      good: "Bueno",
      acceptable: "Aceptable",
      refurbished: "Reacondicionado",
    }
    return conditions[condition] || condition
  }

const formatStatus = (status: string) => {
    const statuses: Record<string, string> = {
      in_stock: "En Stock",
      sold: "Vendido",
      reserved: "Reservado",
      in_transit: "En Tránsito",
      draft: "Borrador",
      damaged: "Dañado",
      returned: "Devuelto",
    }
    return statuses[status] || status
  }

const hasDynamicColumn = React.useMemo(() => {
    return products.some((product) => {
      if (product.categories?.field_schema?.fields) {
        return product.categories.field_schema.fields.some((field: any) => field.showInTable)
      }
      return false
    })
  }, [products])

const getDynamicField = (product: any) => {
    if (!product.categories?.field_schema?.fields) return null
    return product.categories.field_schema.fields.find((field: any) => field.showInTable) || null
  }

const getDynamicValue = (product: any) => {
    const field = getDynamicField(product)
    if (!field) return null

let value = product[field.key]

if (value === undefined || value === null) {
      value = product.specifications?.[field.key]
    }

if (!value) return null

if (field.type === "select" && field.key === "condition") {
      return formatCondition(value)
    }

return value
  }

const showQRCode = async (qrCode: string) => {
    setSelectedQRCode(qrCode)
    try {
      const url = await QRCode.toDataURL(qrCode, { width: 300, margin: 2 })
      setQrImageUrl(url)
      setQrDialogOpen(true)
    } catch (err) {
      toast({
        title: "Error",
        description: "No se pudo generar el código QR",
        variant: "destructive",
      })
    }
  }

const shareProduct = (productId: string) => {
    const url = `${window.location.origin}/products/${productId}`
    navigator.clipboard.writeText(url)
    toast({
      title: "Enlace copiado",
      description: "El enlace del producto se ha copiado al portapapeles",
    })
  }

const openGallery = (product: any) => {
    setSelectedProduct(product)
    setGalleryDialogOpen(true)
  }

const handleStatusChange = async (productId: string, newStatus: string, e: React.MouseEvent) => {
    e.stopPropagation()
    try {
      const formData = new FormData()
      formData.append("status", newStatus)
      await updateProduct(productId, formData)
      toast({
        title: "Estado actualizado",
        description: `Estado cambiado a ${statusOptions.find((s) => s.value === newStatus)?.label}`,
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo actualizar el estado",
        variant: "destructive",
      })
    }
  }

const handleDelete = async (productId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    if (!confirm("¿Estás seguro de que deseas eliminar este producto?")) return

try {
      await deleteProduct(productId)
      toast({
        title: "Producto eliminado",
        description: "El producto ha sido eliminado correctamente",
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo eliminar el producto",
        variant: "destructive",
      })
    }
  }

const handleLocationChange = async (productId: string, newLocationId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    try {
      const formData = new FormData()
      formData.append("current_location_id", newLocationId)
      await updateProduct(productId, formData)
      toast({
        title: "Ubicación actualizada",
        description: "La ubicación del producto ha sido actualizada",
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo actualizar la ubicación",
        variant: "destructive",
      })
    }
  }

return (
    <>
      <div className="border rounded-lg flex flex-col h-full bg-background">
        <div className="flex-1 overflow-auto rounded-lg">
          <table className="w-full">
            <thead className="sticky top-0 z-10 bg-muted border-b">
              <tr>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground first:rounded-tl-lg">
                  PRODUCTO
                </th>
                {hasDynamicColumn && (
                  <th className="text-left p-3 text-xs font-medium text-muted-foreground">DETALLES</th>
                )}
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">UBICACIÓN</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">PRECIO</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">ESTADO</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground w-12 last:rounded-tr-lg"></th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {filteredProducts.map((product: any, index: number) => {
                const isExpanded = expandedRow === product.id
                const dynamicField = getDynamicField(product)
                const dynamicValue = getDynamicValue(product)

return (
                  <React.Fragment key={product.id}>
                    <tr
                      className="hover:bg-muted/30 transition-colors cursor-pointer"
                      onClick={() => toggleRow(product.id)}
                    >
                      <td className="p-3">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded bg-muted flex items-center justify-center flex-shrink-0">
                            <Package2 className="h-5 w-5 text-muted-foreground" />
                          </div>
                          <div className="min-w-0">
                            <div className="font-medium text-sm truncate">
                              {product.brand} {product.model}
                            </div>
                            <div className="text-xs text-muted-foreground truncate">{product.name}</div>
                            <div className="text-[10px] text-muted-foreground/60 font-mono break-all">{product.id}</div>
                          </div>
                        </div>
                      </td>
                      {hasDynamicColumn && (
                        <td className="p-3">
                          {dynamicField && dynamicValue ? (
                            <div>
                              <div className="text-xs text-muted-foreground">
                                {dynamicField.tableLabel || dynamicField.label}
                              </div>
                              <div className="text-sm font-medium">{dynamicValue}</div>
                            </div>
                          ) : (
                            <span className="text-xs text-muted-foreground">N/A</span>
                          )}
                        </td>
                      )}
                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
                        <LocationDropdown
                          product={product}
                          locations={locations}
                          onLocationChange={handleLocationChange}
                        />
                      </td>
                      <td className="p-3">
                        {product.selling_price ? (
                          <div className="text-sm font-medium">
                            ${product.selling_price.toFixed(2)}
                            <span className="text-xs text-muted-foreground ml-1">{product.currency}</span>
                          </div>
                        ) : (
                          <span className="text-xs text-muted-foreground">N/A</span>
                        )}
                      </td>
                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <button className="focus:outline-none">
                              <Badge
                                variant={product.status === "in_stock" ? "default" : "secondary"}
                                className="text-xs font-normal cursor-pointer hover:opacity-80 transition-opacity"
                              >
                                {formatStatus(product.status)}
                              </Badge>
                            </button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="w-48">
                            {statusOptions.map((option) => (
                              <DropdownMenuItem
                                key={option.value}
                                onClick={(e) => handleStatusChange(product.id, option.value, e)}
                                className="cursor-pointer"
                              >
                                {option.label}
                              </DropdownMenuItem>
                            ))}
                            <DropdownMenuSeparator />
                            <DropdownMenuItem
                              onClick={(e) => handleDelete(product.id, e)}
                              className="cursor-pointer text-destructive focus:text-destructive"
                            >
                              <Trash2 className="h-4 w-4 mr-2" />
                              Eliminar
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </td>
                      <td className="p-3">
                        <Button variant="ghost" size="icon" className="h-6 w-6">
                          {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                        </Button>
                      </td>
                    </tr>

{isExpanded && (
                      <tr key={`${product.id}-expanded`} className="bg-muted/20">
                        <td colSpan={hasDynamicColumn ? 6 : 5} className="p-0">
                          <ExpandedProductRow
                            product={product}
                            formatCondition={formatCondition}
                            formatStatus={formatStatus}
                            showQRCode={showQRCode}
                            shareProduct={shareProduct}
                            openGallery={openGallery}
                            statusOptions={statusOptions}
                          />
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>

<Dialog open={qrDialogOpen} onOpenChange={setQrDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Código QR</DialogTitle>
          </DialogHeader>
          <div className="flex flex-col items-center gap-4 py-4">
            {qrImageUrl && <img src={qrImageUrl || "/placeholder.svg"} alt="QR Code" className="w-64 h-64" />}
            <p className="text-sm text-muted-foreground font-mono break-all text-center">{selectedQRCode}</p>
          </div>
        </DialogContent>
      </Dialog>

<Dialog open={galleryDialogOpen} onOpenChange={setGalleryDialogOpen}>
        <DialogContent className="sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle>Galería de Producto</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="aspect-square rounded-lg border-2 border-dashed border-muted-foreground/25 flex items-center justify-center bg-muted/10">
                <Package2 className="h-12 w-12 text-muted-foreground/40" />
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}

function LocationDropdown({
  product,
  locations,
  onLocationChange,
}: {
  product: any
  locations: any[]
  onLocationChange: (productId: string, locationId: string, e: React.MouseEvent) => void
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="focus:outline-none text-left">
          {product.locations ? (
            <div className="text-xs hover:text-primary transition-colors cursor-pointer">
              <div className="font-medium">{product.locations.name}</div>
              <div className="text-muted-foreground capitalize">{product.locations.type}</div>
            </div>
          ) : (
            <span className="text-xs text-muted-foreground hover:text-primary transition-colors cursor-pointer">
              Sin ubicación
            </span>
          )}
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        {locations
          .filter((loc) => loc.is_active)
          .map((location) => (
            <DropdownMenuItem
              key={location.id}
              onClick={(e) => onLocationChange(product.id, location.id, e)}
              className="cursor-pointer"
            >
              <div>
                <div className="font-medium">{location.name}</div>
                <div className="text-xs text-muted-foreground capitalize">{location.type}</div>
              </div>
            </DropdownMenuItem>
          ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function ExpandedProductRow({
  product,
  formatCondition,
  formatStatus,
  showQRCode,
  shareProduct,
  openGallery,
  statusOptions,
}: {
  product: any
  formatCondition: (condition: string) => string
  formatStatus: (status: string) => string
  showQRCode: (qrCode: string) => void
  shareProduct: (productId: string) => void
  openGallery: (product: any) => void
  statusOptions: any[]
}) {
  const [editedValues, setEditedValues] = useState<Record<string, any>>({})
  const [isSaving, setIsSaving] = useState(false)
  const [providers, setProviders] = useState<any[]>([])
  const [categories, setCategories] = useState<any[]>([])
  const [categoryModalOpen, setCategoryModalOpen] = useState(false)
  const [currencyDropdownOpen, setCurrencyDropdownOpen] = useState<"purchase" | "selling" | null>(null)
  const { toast } = useToast()
  const router = useRouter()

const hasChanges = Object.keys(editedValues).length > 0

const currencies = [
    { code: "USD", symbol: "$", name: "US Dollar" },
    { code: "EUR", symbol: "€", name: "Euro" },
    { code: "ARS", symbol: "AR$", name: "Pesos" },
  ]

useEffect(() => {
    const fetchData = async () => {
      const supabase = createClient()
      const [providersResult, categoriesResult] = await Promise.all([
        supabase.from("providers").select("*").eq("is_active", true).order("name"),
        supabase.from("categories").select("*").order("path"),
      ])
      if (providersResult.data) setProviders(providersResult.data)
      if (categoriesResult.data) setCategories(categoriesResult.data)
    }
    fetchData()
  }, [])

const handleCategoryCreated = async () => {
    const supabase = createClient()
    const { data } = await supabase.from("categories").select("*").order("path")
    if (data) setCategories(data)
  }

const cycleStatus = async (e: React.MouseEvent) => {
    e.stopPropagation()
    const currentIndex = statusOptions.findIndex((opt) => opt.value === product.status)
    const nextIndex = (currentIndex + 1) % statusOptions.length
    const nextStatus = statusOptions[nextIndex].value

try {
      const formData = new FormData()
      formData.append("status", nextStatus)
      await updateProduct(product.id, formData)
      toast({
        title: "Estado actualizado",
        description: `Estado cambiado a ${statusOptions[nextIndex].label}`,
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo actualizar el estado",
        variant: "destructive",
      })
    }
  }

const handleSave = async () => {
    if (!hasChanges) return

setIsSaving(true)
    try {
      const formData = new FormData()
      Object.entries(editedValues).forEach(([key, value]) => {
        if (key.startsWith("spec_")) {
          const specKey = key.replace("spec_", "")
          const currentSpecs = editedValues.specifications || product.specifications || {}
          formData.set("specifications", JSON.stringify({ ...currentSpecs, [specKey]: value }))
        } else {
          formData.append(key, value?.toString() || "")
        }
      })

await updateProduct(product.id, formData)
      toast({
        title: "Producto actualizado",
        description: "Los cambios se han guardado correctamente",
      })
      setEditedValues({})
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo actualizar el producto",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const getValue = (key: string) => {
    return editedValues[key] !== undefined ? editedValues[key] : product[key]
  }

const getSpecValue = (key: string) => {
    const specKey = `spec_${key}`
    return editedValues[specKey] !== undefined ? editedValues[specKey] : product.specifications?.[key]
  }

const handleChange = (key: string, value: any) => {
    setEditedValues({ ...editedValues, [key]: value })
  }

const handleSpecChange = (key: string, value: any) => {
    setEditedValues({ ...editedValues, [`spec_${key}`]: value })
  }

const handleCurrencyChange = (newCurrency: string) => {
    handleChange("currency", newCurrency)
    setCurrencyDropdownOpen(null)
  }

const getCurrentCurrency = () => {
    const currentCode = getValue("currency") || "USD"
    return currencies.find((curr) => curr.code === currentCode) || currencies[0]
  }

const renderCategoryOption = (path: string) => {
    const segments = path
      .split("/")
      .map((s) => s.trim())
      .filter(Boolean)

if (segments.length === 0) return path

return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6 pb-4 border-b">
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">ID:</span>
            <span className="text-sm font-mono">{product.id}</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">SKU:</span>
            <span className="text-sm font-mono text-muted-foreground">{product.sku || "N/A"}</span>
          </div>
        </div>

<div className="flex items-center gap-2">
          <button
            onClick={(e) => {
              e.stopPropagation()
              showQRCode(product.id)
            }}
            className="text-muted-foreground hover:text-foreground transition-colors"
            title="Ver código QR"
          >
            <QrCode className="h-5 w-5" />
          </button>
          <button
            onClick={(e) => {
              e.stopPropagation()
              openGallery(product)
            }}
            className="text-muted-foreground hover:text-foreground transition-colors"
            title="Ver galería"
          >
            <ImageIcon className="h-5 w-5" />
          </button>
          <button
            onClick={(e) => {
              e.stopPropagation()
              shareProduct(product.id)
            }}
            className="text-muted-foreground hover:text-foreground transition-colors"
            title="Copiar enlace"
          >
            <Share2 className="h-5 w-5" />
          </button>
          {hasChanges && (
            <Button onClick={handleSave} disabled={isSaving} size="sm" className="gap-2 ml-2">
              <Check className="h-4 w-4" />
              {isSaving ? "Guardando..." : "Aceptar"}
            </Button>
          )}
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3">
        <div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">CATEGORÍA</h4>
          <Select
            value={getValue("category_id") || product.category_id || ""}
            onValueChange={(value) => {
              if (value === "__new__") {
                setCategoryModalOpen(true)
              } else {
                handleChange("category_id", value)
              }
            }}
          >
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue placeholder="Sin categoría" />
            </SelectTrigger>
            <SelectContent>
              {categories.map((cat) => (
                <SelectItem key={cat.id} value={cat.id}>
                  {renderCategoryOption(cat.path)}
                </SelectItem>
              ))}
              <SelectSeparator />
              <SelectItem value="__new__">Crear categoría</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRECIO DE COMPRA</h4>
          <div className="flex items-center relative">
            <button
              onClick={(e) => {
                e.stopPropagation()
                setCurrencyDropdownOpen(currencyDropdownOpen === "purchase" ? null : "purchase")
              }}
              className="text-base mr-1 hover:text-primary transition-colors cursor-pointer"
              title="Cambiar moneda"
            >
              {getCurrentCurrency().symbol}
            </button>
            <NumericFormat
              value={getValue("purchase_price") || ""}
              onValueChange={(values) => handleChange("purchase_price", values.floatValue)}
              thousandSeparator=","
              decimalSeparator="."
              decimalScale={2}
              fixedDecimalScale
              allowNegative={false}
              className="text-base bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
              placeholder="0.00"
            />
            {currencyDropdownOpen === "purchase" && (
              <div className="absolute top-full left-0 mt-1 bg-background border rounded-md shadow-lg z-50 min-w-[160px]">
                {currencies.map((curr) => (
                  <button
                    key={curr.code}
                    onClick={(e) => {
                      e.stopPropagation()
                      handleCurrencyChange(curr.code)
                    }}
                    className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors flex items-center justify-between"
                  >
                    <span>
                      {curr.symbol} {curr.code}
                    </span>
                    <span className="text-xs text-muted-foreground">{curr.name}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRECIO DE VENTA</h4>
          <div className="flex items-center relative">
            <button
              onClick={(e) => {
                e.stopPropagation()
                setCurrencyDropdownOpen(currencyDropdownOpen === "selling" ? null : "selling")
              }}
              className="text-base text-green-600 mr-1 hover:text-green-700 transition-colors cursor-pointer"
              title="Cambiar moneda"
            >
              {getCurrentCurrency().symbol}
            </button>
            <NumericFormat
              value={getValue("selling_price") || ""}
              onValueChange={(values) => handleChange("selling_price", values.floatValue)}
              thousandSeparator=","
              decimalSeparator="."
              decimalScale={2}
              fixedDecimalScale
              allowNegative={false}
              className="text-base text-green-600 bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
              placeholder="0.00"
            />
            {currencyDropdownOpen === "selling" && (
              <div className="absolute top-full left-0 mt-1 bg-background border rounded-md shadow-lg z-50 min-w-[160px]">
                {currencies.map((curr) => (
                  <button
                    key={curr.code}
                    onClick={(e) => {
                      e.stopPropagation()
                      handleCurrencyChange(curr.code)
                    }}
                    className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors flex items-center justify-between"
                  >
                    <span>
                      {curr.symbol} {curr.code}
                    </span>
                    <span className="text-xs text-muted-foreground">{curr.name}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PROVEEDOR</h4>
          <select
            value={getValue("provider_id") || ""}
            onChange={(e) => handleChange("provider_id", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full cursor-pointer"
          >
            <option value="">Seleccionar proveedor</option>
            {providers.map((provider) => (
              <option key={provider.id} value={provider.id}>
                {provider.name} ({provider.country})
              </option>
            ))}
          </select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">NOMBRE</h4>
          <input
            type="text"
            value={getValue("name") || ""}
            onChange={(e) => handleChange("name", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Nombre del producto"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">MARCA</h4>
          <input
            type="text"
            value={getValue("brand") || ""}
            onChange={(e) => handleChange("brand", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Marca"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">MODELO</h4>
          <input
            type="text"
            value={getValue("model") || ""}
            onChange={(e) => handleChange("model", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Modelo"
          />
        </div>

{product.specifications && Object.keys(product.specifications).length > 0 && (
          <>
            {Object.entries(product.specifications).map(([key, value]) => {
              const field = product.categories?.field_schema?.fields?.find((f: any) => f.key === key)
              const label = field?.label || key.replace(/_/g, " ")

return (
                <div key={key}>
                  <h4 className="text-xs font-semibold text-muted-foreground mb-0.5 capitalize">{label}</h4>
                  <input
                    type="text"
                    value={getSpecValue(key) || ""}
                    onChange={(e) => handleSpecChange(key, e.target.value)}
                    className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
                    placeholder={label}
                  />
                </div>
              )
            })}
          </>
        )}
      </div>

<CategoryCreationModal
        open={categoryModalOpen}
        onOpenChange={setCategoryModalOpen}
        onSuccess={handleCategoryCreated}
      />
    </div>
  )
}
[V0_FILE]typescript:file="app/products/[id]/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { notFound } from "next/navigation"
import { ProductDetailClient } from "@/components/product-detail-client"
import { getLocations } from "@/lib/db/queries"

export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const [productResult, locationsData, transfersResult, shipmentsResult, salesResult] = await Promise.all([
    supabase
      .from("products")
      .select(
        `
        *,
        locations (id, name, type, address),
        categories (id, name, path),
        providers (id, name, country, type),
        product_images (image_url, display_order, is_primary)
      `,
      )
      .eq("id", id)
      .single(),
    getLocations(),
    supabase
      .from("location_transfers")
      .select(
        `
        *,
        from_location:locations!location_transfers_from_location_id_fkey (name, type),
        to_location:locations!location_transfers_to_location_id_fkey (name, type)
      `,
      )
      .eq("product_id", id)
      .order("transfer_date", { ascending: false }),
    supabase.from("shipping_labels").select("*").eq("product_id", id).order("created_at", { ascending: false }),
    supabase
      .from("sale_items")
      .select(
        `
        *,
        sales (
          id,
          sale_number,
          sale_type,
          customer_name,
          payment_status,
          shipping_status,
          total_amount,
          currency,
          created_at
        )
      `,
      )
      .eq("product_id", id)
      .order("created_at", { ascending: false }),
  ])

if (productResult.error || !productResult.data) {
    notFound()
  }

return (
    <ProductDetailClient
      product={productResult.data}
      locations={locationsData}
      transfers={transfersResult.data || []}
      shipments={shipmentsResult.data || []}
      sales={salesResult.data || []}
    />
  )
}
[V0_FILE]typescriptreact:file="components/transfer-product-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { transferProduct } from "@/lib/db/actions"
import { useToast } from "@/hooks/use-toast"

interface TransferProductDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  product: any
  locations: any[]
  onSuccess?: () => void
}

export function TransferProductDialog({
  open,
  onOpenChange,
  product,
  locations,
  onSuccess,
}: TransferProductDialogProps) {
  const [toLocationId, setToLocationId] = useState<string>("")
  const [notes, setNotes] = useState("")
  const [isTransferring, setIsTransferring] = useState(false)
  const { toast } = useToast()

const handleTransfer = async () => {
    if (!toLocationId) return

setIsTransferring(true)
    try {
      await transferProduct(product.id, toLocationId, notes)
      toast({
        title: "Producto transferido",
        description: "El producto ha sido transferido correctamente",
      })
      setToLocationId("")
      setNotes("")
      onSuccess?.()
    } catch (error) {
      console.error("[v0] Transfer error:", error)
      toast({
        title: "Error",
        description: "No se pudo transferir el producto",
        variant: "destructive",
      })
    } finally {
      setIsTransferring(false)
    }
  }

const availableLocations = locations.filter((loc) => loc.id !== product.current_location_id && loc.is_active)

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Transferir Producto</DialogTitle>
          <DialogDescription>
            Mover {product.name || `${product.brand} ${product.model}`} a otra ubicación
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="to_location">Ubicación de Destino</Label>
            <Select value={toLocationId} onValueChange={setToLocationId}>
              <SelectTrigger>
                <SelectValue placeholder="Seleccionar ubicación" />
              </SelectTrigger>
              <SelectContent>
                {availableLocations.map((loc) => (
                  <SelectItem key={loc.id} value={loc.id}>
                    {loc.name} ({loc.type})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="notes">Notas (Opcional)</Label>
            <Textarea
              id="notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Agregar notas sobre esta transferencia..."
              rows={3}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button onClick={handleTransfer} disabled={!toLocationId || isTransferring}>
            {isTransferring ? "Transfiriendo..." : "Transferir Producto"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]sql:file="scripts/add_next_location_to_products.sql" isMerged="true"
-- Add next_location_id field to products table for internal transfers
ALTER TABLE products
ADD COLUMN IF NOT EXISTS next_location_id uuid REFERENCES locations(id);

-- Add index for better query performance
CREATE INDEX IF NOT EXISTS idx_products_next_location_id ON products(next_location_id);
[V0_FILE]typescript:file="components/product-image-gallery.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import { Upload, X } from "lucide-react"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"

interface ProductImageGalleryProps {
  productId: string
  initialImages: any[]
}

const imageLabels = ["Frontal", "Lateral", "Trasera", "Misc", "Misc"]

export function ProductImageGallery({ productId, initialImages }: ProductImageGalleryProps) {
  const [productImages, setProductImages] = useState<any[]>(initialImages || [])
  const [uploadingImage, setUploadingImage] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>, label: string, index: number) => {
    const file = e.target.files?.[0]
    if (!file) return

setUploadingImage(true)
    try {
      const supabase = createClient()
      const fileExt = file.name.split(".").pop()
      const fileName = `${productId}/${label.toLowerCase()}_${Date.now()}.${fileExt}`

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

if (uploadError) throw uploadError

const {
        data: { publicUrl },
      } = supabase.storage.from("product-images").getPublicUrl(fileName)

const { error: dbError } = await supabase.from("product_images").insert({
        product_id: productId,
        image_url: publicUrl,
        display_order: index,
        is_primary: index === 0,
        label: label,
      })

if (dbError) throw dbError

const updatedImages = [...productImages]
      while (updatedImages.length <= index) {
        updatedImages.push(null)
      }
      updatedImages[index] = { image_url: publicUrl, display_order: index, label }
      setProductImages(updatedImages)

toast({
        title: "Imagen subida",
        description: "La imagen se ha subido correctamente",
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo subir la imagen",
        variant: "destructive",
      })
    } finally {
      setUploadingImage(false)
    }
  }

const handleDeleteImage = async (imageUrl: string, index: number) => {
    try {
      const supabase = createClient()
      const { error: deleteError } = await supabase
        .from("product_images")
        .delete()
        .eq("image_url", imageUrl)
        .eq("product_id", productId)

if (deleteError) throw deleteError

const updatedImages = [...productImages]
      if (index < updatedImages.length) {
        updatedImages[index] = null
      }
      setProductImages(updatedImages)

toast({
        title: "Imagen eliminada",
        description: "La imagen se ha eliminado correctamente",
      })
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo eliminar la imagen",
        variant: "destructive",
      })
    }
  }

return (
    <div>
      <h2 className="text-lg font-semibold mb-4">Galería</h2>
      <div className="flex gap-4">
        <div className="w-1/2">
          <div className="relative aspect-square rounded-lg border overflow-hidden group bg-muted/30">
            {productImages.find((img) => img?.display_order === 0) ? (
              <>
                <Image
                  src={productImages.find((img) => img?.display_order === 0)?.image_url || "/placeholder.svg"}
                  alt={imageLabels[0]}
                  fill
                  className="object-cover"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs font-medium px-2 py-1">
                  IMG1 - {imageLabels[0]}
                </div>
                <button
                  onClick={() => handleDeleteImage(productImages.find((img) => img?.display_order === 0)?.image_url, 0)}
                  className="absolute top-2 right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <X className="h-4 w-4" />
                </button>
              </>
            ) : (
              <>
                <label className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handleImageUpload(e, imageLabels[0], 0)}
                    className="hidden"
                    disabled={uploadingImage}
                  />
                  <Upload className="h-8 w-8 text-muted-foreground" />
                </label>
                <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs font-medium px-2 py-1">
                  IMG1 - {imageLabels[0]}
                </div>
              </>
            )}
          </div>
        </div>

<div className="w-1/2 grid grid-cols-2 gap-2">
          {imageLabels.slice(1).map((label, idx) => {
            const index = idx + 1
            const existingImage = productImages.find((img) => img?.display_order === index)
            return (
              <div key={index} className="relative aspect-square rounded-lg border overflow-hidden group bg-muted/30">
                {existingImage ? (
                  <>
                    <Image
                      src={existingImage.image_url || "/placeholder.svg"}
                      alt={label}
                      fill
                      className="object-cover"
                    />
                    <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs font-medium px-1 py-0.5 text-center">
                      IMG{index + 1} - {label}
                    </div>
                    <button
                      onClick={() => handleDeleteImage(existingImage.image_url, index)}
                      className="absolute top-1 right-1 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </>
                ) : (
                  <>
                    <label className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
                      <input
                        type="file"
                        accept="image/*"
                        onChange={(e) => handleImageUpload(e, label, index)}
                        className="hidden"
                        disabled={uploadingImage}
                      />
                      <Upload className="h-4 w-4 text-muted-foreground" />
                    </label>
                    <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs font-medium px-1 py-0.5 text-center">
                      IMG{index + 1} - {label}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/product-pricing-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { NumericFormat } from "react-number-format"

interface ProductPricingSectionProps {
  purchasePrice: number
  sellingPrice: number
  currency: string
  sellerNotes: string
  nextShipment: any | null
  onPriceChange: (field: string, value: any) => void
  onCurrencyChange: (currency: string) => void
}

const currencies = [
  { code: "USD", symbol: "$", name: "US Dollar" },
  { code: "EUR", symbol: "€", name: "Euro" },
  { code: "ARS", symbol: "AR$", name: "Pesos" },
]

export function ProductPricingSection({
  purchasePrice,
  sellingPrice,
  currency,
  sellerNotes,
  nextShipment,
  onPriceChange,
  onCurrencyChange,
}: ProductPricingSectionProps) {
  const [currencyDropdownOpen, setCurrencyDropdownOpen] = useState<"purchase" | "selling" | null>(null)

const getCurrentCurrency = () => {
    return currencies.find((curr) => curr.code === currency) || currencies[0]
  }

const handleCurrencyChange = (newCurrency: string) => {
    onCurrencyChange(newCurrency)
    setCurrencyDropdownOpen(null)
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold mb-4 invisible">Precios</h2>
      </div>

<div>
        <h4 className="text-xs font-semibold text-muted-foreground mb-2">PRECIO DE COMPRA</h4>
        <div className="flex items-center relative">
          <button
            onClick={(e) => {
              e.stopPropagation()
              setCurrencyDropdownOpen(currencyDropdownOpen === "purchase" ? null : "purchase")
            }}
            className="text-2xl mr-2 hover:text-primary transition-colors cursor-pointer"
            title="Cambiar moneda"
          >
            {getCurrentCurrency().symbol}
          </button>
          <NumericFormat
            value={purchasePrice || ""}
            onValueChange={(values) => onPriceChange("purchase_price", values.floatValue)}
            thousandSeparator=","
            decimalSeparator="."
            decimalScale={2}
            fixedDecimalScale
            allowNegative={false}
            className="text-2xl font-bold bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="0.00"
          />
          {currencyDropdownOpen === "purchase" && (
            <div className="absolute top-full left-0 mt-1 bg-background border rounded-md shadow-lg z-50 min-w-[160px]">
              {currencies.map((curr) => (
                <button
                  key={curr.code}
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCurrencyChange(curr.code)
                  }}
                  className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors flex items-center justify-between"
                >
                  <span>
                    {curr.symbol} {curr.code}
                  </span>
                  <span className="text-xs text-muted-foreground">{curr.name}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

<div>
        <h4 className="text-xs font-semibold text-muted-foreground mb-2">PRECIO DE VENTA</h4>
        <div className="flex items-center relative">
          <button
            onClick={(e) => {
              e.stopPropagation()
              setCurrencyDropdownOpen(currencyDropdownOpen === "selling" ? null : "selling")
            }}
            className="text-2xl text-green-600 mr-2 hover:text-green-700 transition-colors cursor-pointer"
            title="Cambiar moneda"
          >
            {getCurrentCurrency().symbol}
          </button>
          <NumericFormat
            value={sellingPrice || ""}
            onValueChange={(values) => onPriceChange("selling_price", values.floatValue)}
            thousandSeparator=","
            decimalSeparator="."
            decimalScale={2}
            fixedDecimalScale
            allowNegative={false}
            className="text-2xl font-bold text-green-600 bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="0.00"
          />
          {currencyDropdownOpen === "selling" && (
            <div className="absolute top-full left-0 mt-1 bg-background border rounded-md shadow-lg z-50 min-w-[160px]">
              {currencies.map((curr) => (
                <button
                  key={curr.code}
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCurrencyChange(curr.code)
                  }}
                  className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors flex items-center justify-between"
                >
                  <span>
                    {curr.symbol} {curr.code}
                  </span>
                  <span className="text-xs text-muted-foreground">{curr.name}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

<div>
        <h4 className="text-xs font-semibold text-muted-foreground mb-2">NOTAS</h4>
        <textarea
          value={sellerNotes || ""}
          onChange={(e) => onPriceChange("seller_notes", e.target.value)}
          className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full resize-none"
          placeholder="Notas adicionales..."
          rows={3}
        />
      </div>

{nextShipment && (
        <div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-2">ENVÍO EN CURSO</h4>
          <Badge variant="secondary" className="mb-1">
            {nextShipment.status}
          </Badge>
          {nextShipment.tracking_number && (
            <p className="text-xs text-muted-foreground">Tracking: {nextShipment.tracking_number}</p>
          )}
          {nextShipment.carrier && <p className="text-xs text-muted-foreground">Carrier: {nextShipment.carrier}</p>}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="components/product-transactions-table.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { formatDistanceToNow } from "date-fns"

interface ProductTransactionsTableProps {
  transfers: any[]
  shipments: any[]
  sales: any[]
}

export function ProductTransactionsTable({ transfers, shipments, sales }: ProductTransactionsTableProps) {
  const allTransactions = [
    ...transfers.map((t: any) => ({
      type: "transfer",
      date: t.transfer_date,
      description: `Transferido de ${t.from_location?.name || "Unknown"} a ${t.to_location?.name || "Unknown"}`,
      notes: t.notes,
      data: t,
    })),
    ...shipments.map((s: any) => ({
      type: "shipment",
      date: s.created_at,
      description: `Envío ${s.carrier || ""} ${s.tracking_number || ""}`.trim(),
      status: s.status,
      tracking: s.tracking_number,
      carrier: s.carrier,
      data: s,
    })),
    ...sales.map((s: any) => ({
      type: "sale",
      date: s.sales?.created_at,
      description: `Venta ${s.sales?.sale_number || ""}`,
      customer: s.sales?.customer_name,
      amount: s.sales?.total_amount,
      currency: s.sales?.currency,
      paymentStatus: s.sales?.payment_status,
      shippingStatus: s.sales?.shipping_status,
      data: s,
    })),
  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

return (
    <div className="mb-8">
      <h2 className="text-lg font-semibold mb-4">Transacciones</h2>
      {allTransactions.length > 0 ? (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Tipo</TableHead>
                <TableHead>Descripción</TableHead>
                <TableHead>Estado/Detalles</TableHead>
                <TableHead className="text-right">Fecha</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {allTransactions.map((transaction, index) => (
                <TableRow key={index}>
                  <TableCell>
                    <Badge variant="outline">
                      {transaction.type === "transfer"
                        ? "Transferencia"
                        : transaction.type === "shipment"
                          ? "Envío"
                          : "Venta"}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-medium">{transaction.description}</TableCell>
                  <TableCell>
                    {transaction.type === "shipment" && (
                      <div className="space-y-1">
                        {transaction.status && <Badge variant="secondary">{transaction.status}</Badge>}
                        {transaction.tracking && (
                          <div className="text-xs text-muted-foreground">Tracking: {transaction.tracking}</div>
                        )}
                        {transaction.carrier && (
                          <div className="text-xs text-muted-foreground">Carrier: {transaction.carrier}</div>
                        )}
                      </div>
                    )}
                    {transaction.type === "sale" && (
                      <div className="space-y-1">
                        {transaction.paymentStatus && <Badge variant="secondary">{transaction.paymentStatus}</Badge>}
                        {transaction.shippingStatus && (
                          <Badge variant="outline" className="ml-1">
                            {transaction.shippingStatus}
                          </Badge>
                        )}
                        {transaction.customer && (
                          <div className="text-xs text-muted-foreground">Cliente: {transaction.customer}</div>
                        )}
                        {transaction.amount && (
                          <div className="text-xs font-medium">
                            ${transaction.amount.toFixed(2)} {transaction.currency}
                          </div>
                        )}
                      </div>
                    )}
                    {transaction.notes && <div className="text-xs text-muted-foreground">{transaction.notes}</div>}
                  </TableCell>
                  <TableCell className="text-right text-sm text-muted-foreground">
                    {formatDistanceToNow(new Date(transaction.date), { addSuffix: true })}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ) : (
        <div className="border rounded-lg p-12 text-center text-muted-foreground">
          <p>No hay transacciones registradas</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="components/product-qr-dialog.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import QRCode from "qrcode"

interface ProductQRDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  productId: string
}

export function ProductQRDialog({ open, onOpenChange, productId }: ProductQRDialogProps) {
  const [qrImageUrl, setQrImageUrl] = useState<string>("")

useEffect(() => {
    if (open && productId) {
      QRCode.toDataURL(productId, { width: 300, margin: 2 })
        .then((url) => setQrImageUrl(url))
        .catch((err) => console.error("[v0] Error generating QR code:", err))
    }
  }, [open, productId])

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Código QR</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col items-center gap-4 py-4">
          {qrImageUrl && <img src={qrImageUrl || "/placeholder.svg"} alt="QR Code" className="w-64 h-64" />}
          <p className="text-sm text-muted-foreground font-mono break-all text-center">{productId}</p>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/product-detail-client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Share2, Trash2, Check, QrCode } from "lucide-react"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import { updateProduct, deleteProduct } from "@/lib/db/actions"
import { createClient } from "@/lib/supabase/client"
import { CategoryCreationModal } from "@/components/category-creation-modal"
import { TransferProductDialog } from "@/components/transfer-product-dialog"
import { ProductImageGallery } from "@/components/product-image-gallery"
import { ProductPricingSection } from "@/components/product-pricing-section"
import { ProductInfoSection } from "@/components/product-info-section"
import { ProductTransactionsTable } from "@/components/product-transactions-table"
import { ProductQRDialog } from "@/components/product-qr-dialog"

interface ProductDetailClientProps {
  product: any
  locations: any[]
  transfers: any[]
  shipments: any[]
  sales: any[]
}

const AnimatedDots = () => (
  <div className="flex items-center gap-1 mx-3">
    {[0, 1, 2, 3, 4].map((i) => (
      <div
        key={i}
        className="w-1.5 h-1.5 rounded-full bg-primary"
        style={{
          animation: `pulse 1.5s ease-in-out infinite`,
          animationDelay: `${i * 0.15}s`,
        }}
      />
    ))}
    <style jsx>{`
      @keyframes pulse {
        0%,
        100% {
          opacity: 0.2;
        }
        50% {
          opacity: 1;
        }
      }
    `}</style>
  </div>
)

const statusOptions = [
  { value: "in_stock", label: "En Stock" },
  { value: "sold", label: "Vendido" },
  { value: "reserved", label: "Reservado" },
  { value: "in_transit", label: "En Tránsito" },
  { value: "internal_transfer", label: "Transferencia Interna" },
  { value: "draft", label: "Borrador" },
  { value: "damaged", label: "Dañado" },
  { value: "returned", label: "Devuelto" },
]

export function ProductDetailClient({ product, locations, transfers, shipments, sales }: ProductDetailClientProps) {
  const [editedValues, setEditedValues] = useState<Record<string, any>>({})
  const [isSaving, setIsSaving] = useState(false)
  const [providers, setProviders] = useState<any[]>([])
  const [categories, setCategories] = useState<any[]>([])
  const [categoryModalOpen, setCategoryModalOpen] = useState(false)
  const [transferDialogOpen, setTransferDialogOpen] = useState(false)
  const [qrDialogOpen, setQrDialogOpen] = useState(false)
  const [categoryFieldSchema, setCategoryFieldSchema] = useState<any>(null)
  const [loadingCategoryFields, setLoadingCategoryFields] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const [nextShipment, setNextShipment] = useState<any | null>(null)

const hasChanges = Object.keys(editedValues).length > 0

const nextShipmentResult = shipments.find((s) => s.status !== "delivered")
      setNextShipment(nextShipmentResult || null)

if (product.category_id) {
        const { data: category } = await supabase
          .from("categories")
          .select("field_schema")
          .eq("id", product.category_id)
          .single()
        if (category?.field_schema) {
          setCategoryFieldSchema(category.field_schema)
        }
      }
    }
    fetchData()
  }, [shipments, product.category_id])

const getValue = (key: string) => {
    return editedValues[key] !== undefined ? editedValues[key] : product[key]
  }

const getSpecValue = (key: string) => {
    const specKey = `spec_${key}`
    return editedValues[specKey] !== undefined ? editedValues[specKey] : product.specifications?.[key]
  }

const handleChange = (key: string, value: any) => {
    if (key === "next_location_id") {
      const currentLocationId = getValue("current_location_id")
      if (value && value !== currentLocationId) {
        setEditedValues({ ...editedValues, [key]: value, status: "internal_transfer" })
        return
      } else if (!value) {
        const newValues = { ...editedValues, [key]: value }
        if (editedValues.status === "internal_transfer") {
          newValues.status = "in_stock"
        }
        setEditedValues(newValues)
        return
      }
    }
    setEditedValues({ ...editedValues, [key]: value })
  }

const handleSpecChange = (key: string, value: any) => {
    setEditedValues({ ...editedValues, [`spec_${key}`]: value })
  }

const handleSave = async () => {
    if (!hasChanges) return

const handleShare = async () => {
    if (navigator.share) {
      await navigator.share({
        title: product.name,
        text: `${product.brand} ${product.model}`,
        url: window.location.href,
      })
    } else {
      navigator.clipboard.writeText(window.location.href)
      toast({
        title: "Enlace copiado",
        description: "El enlace se ha copiado al portapapeles",
      })
    }
  }

const handleDelete = async () => {
    if (!confirm("¿Estás seguro de que deseas eliminar este producto?")) return

try {
      await deleteProduct(product.id)
      toast({
        title: "Producto eliminado",
        description: "El producto ha sido eliminado correctamente",
      })
      router.push("/products")
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo eliminar el producto",
        variant: "destructive",
      })
    }
  }

const handleCategoryCreated = async () => {
    const supabase = createClient()
    const { data } = await supabase.from("categories").select("*").order("path")
    if (data) setCategories(data)
  }

const handleCategoryChange = async (categoryId: string) => {
    if (categoryId === "__new__") {
      setCategoryModalOpen(true)
      return
    }

handleChange("category_id", categoryId)

setLoadingCategoryFields(true)
    const supabase = createClient()
    const { data: category } = await supabase.from("categories").select("field_schema").eq("id", categoryId).single()

if (category?.field_schema) {
      const newEditedValues = { ...editedValues, category_id: categoryId }
      Object.keys(newEditedValues).forEach((key) => {
        if (key.startsWith("spec_")) {
          delete newEditedValues[key]
        }
      })
      setEditedValues(newEditedValues)
      setCategoryFieldSchema(category.field_schema)
    } else {
      setCategoryFieldSchema(null)
    }

setTimeout(() => setLoadingCategoryFields(false), 300)
  }

const formatStatus = (status: string) => {
    return statusOptions.find((opt) => opt.value === status)?.label || status
  }

const nextLocationId = getValue("next_location_id")
  const nextLocation = nextLocationId ? locations.find((loc) => loc.id === nextLocationId) : null

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <div>
            <h1 className="text-xl font-bold">{product.name || `${product.brand} ${product.model}`}</h1>
            <p className="text-xs text-muted-foreground">ID: {product.id}</p>
          </div>
        </div>

<div className="flex items-start gap-2">
          <div className="min-w-0">
            <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">UBICACIÓN ACTUAL</h4>
            <Select
              value={getValue("current_location_id") || product.current_location_id || ""}
              onValueChange={(value) => handleChange("current_location_id", value)}
            >
              <SelectTrigger className="w-auto min-w-[200px] h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0 [&>svg]:hidden">
                <SelectValue placeholder="Sin ubicación" />
              </SelectTrigger>
              <SelectContent>
                {locations
                  .filter((loc) => loc.is_active)
                  .map((location) => (
                    <SelectItem key={location.id} value={location.id}>
                      {location.name} ({location.type})
                    </SelectItem>
                  ))}
              </SelectContent>
            </Select>
          </div>
          {nextLocation && (
            <div className="min-w-0">
              <h4
                className="text-xs font-semibold text-muted-foreground mb-0.5 opacity-0 pointer-events-none"
                aria-hidden="true"
              >
                .
              </h4>
              <Select disabled>
                <SelectTrigger className="w-auto h-7 text-sm bg-transparent border-none p-0 pointer-events-none [&>svg]:hidden">
                  <AnimatedDots />
                </SelectTrigger>
              </Select>
            </div>
          )}
          <div className="min-w-0">
            <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRÓXIMA UBICACIÓN</h4>
            <Select
              value={getValue("next_location_id") || product.next_location_id || "__none__"}
              onValueChange={(value) => handleChange("next_location_id", value === "__none__" ? null : value)}
            >
              <SelectTrigger className="w-auto min-w-[200px] h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0 [&>svg]:hidden">
                <SelectValue placeholder="Sin transferencia pendiente" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__none__">Ninguna</SelectItem>
                {locations
                  .filter((loc) => loc.is_active && loc.id !== getValue("current_location_id"))
                  .map((location) => (
                    <SelectItem key={location.id} value={location.id}>
                      {location.name} ({location.type})
                    </SelectItem>
                  ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

<div id="actionbar" className="flex items-center justify-between gap-4 mb-6 pb-4 border-b">
        <div className="flex items-center gap-2">
          <Select value={getValue("status") || ""} onValueChange={(value) => handleChange("status", value)}>
            <SelectTrigger className="w-auto min-w-[180px] h-9 text-sm">
              <SelectValue placeholder="Seleccionar estado" />
            </SelectTrigger>
            <SelectContent>
              {statusOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => setQrDialogOpen(true)} title="Ver código QR">
            <QrCode className="h-4 w-4" />
          </Button>
          <Button variant="outline" onClick={handleShare}>
            <Share2 className="h-4 w-4 mr-2" />
            Compartir
          </Button>
          {hasChanges && (
            <Button onClick={handleSave} disabled={isSaving} className="gap-2">
              <Check className="h-4 w-4" />
              {isSaving ? "Guardando..." : "Guardar Cambios"}
            </Button>
          )}
          <Button variant="destructive" size="icon" onClick={handleDelete}>
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div>
            <ProductPricingSection
              purchasePrice={getValue("purchase_price")}
              sellingPrice={getValue("selling_price")}
              currency={getValue("currency") || "USD"}
              sellerNotes={getValue("seller_notes")}
              nextShipment={nextShipment}
              onPriceChange={handleChange}
              onCurrencyChange={(currency) => handleChange("currency", currency)}
            />
          </div>
        </div>

<TransferProductDialog
        open={transferDialogOpen}
        onOpenChange={setTransferDialogOpen}
        product={product}
        locations={locations}
        onSuccess={() => {
          router.refresh()
          setTransferDialogOpen(false)
        }}
      />

<ProductQRDialog open={qrDialogOpen} onOpenChange={setQrDialogOpen} productId={product.id} />
    </div>
  )
}
[V0_FILE]typescript:file="components/product-info-section.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronRight } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

interface ProductInfoSectionProps {
  product: any
  categories: any[]
  providers: any[]
  categoryFieldSchema: any
  loadingCategoryFields: boolean
  getValue: (key: string) => any
  getSpecValue: (key: string) => any
  onFieldChange: (key: string, value: any) => void
  onSpecChange: (key: string, value: any) => void
  onCategoryChange: (categoryId: string) => void
}

export function ProductInfoSection({
  product,
  categories,
  providers,
  categoryFieldSchema,
  loadingCategoryFields,
  getValue,
  getSpecValue,
  onFieldChange,
  onSpecChange,
  onCategoryChange,
}: ProductInfoSectionProps) {
  const renderCategoryOption = (path: string) => {
    const segments = path
      .split("/")
      .map((s) => s.trim())
      .filter(Boolean)

if (segments.length === 0) return path

return (
    <div className="mb-8">
      <h2 className="text-lg font-semibold mb-4">Información del Producto</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4">
        <div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">NOMBRE</h4>
          <input
            type="text"
            value={getValue("name") || ""}
            onChange={(e) => onFieldChange("name", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Nombre del producto"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">MARCA</h4>
          <input
            type="text"
            value={getValue("brand") || ""}
            onChange={(e) => onFieldChange("brand", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Marca"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">MODELO</h4>
          <input
            type="text"
            value={getValue("model") || ""}
            onChange={(e) => onFieldChange("model", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Modelo"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">SKU</h4>
          <input
            type="text"
            value={getValue("sku") || ""}
            onChange={(e) => onFieldChange("sku", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full font-mono"
            placeholder="SKU"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">CATEGORÍA</h4>
          <Select value={getValue("category_id") || product.category_id || ""} onValueChange={onCategoryChange}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue placeholder="Sin categoría" />
            </SelectTrigger>
            <SelectContent>
              {categories.map((cat) => (
                <SelectItem key={cat.id} value={cat.id}>
                  {renderCategoryOption(cat.path)}
                </SelectItem>
              ))}
              <SelectSeparator />
              <SelectItem value="__new__">Crear categoría</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">CONDICIÓN</h4>
          <Select value={getValue("condition") || ""} onValueChange={(value) => onFieldChange("condition", value)}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue placeholder="Seleccionar" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="new">Nuevo</SelectItem>
              <SelectItem value="like_new">Como Nuevo</SelectItem>
              <SelectItem value="very_good">Muy Bueno</SelectItem>
              <SelectItem value="good">Bueno</SelectItem>
              <SelectItem value="acceptable">Aceptable</SelectItem>
              <SelectItem value="refurbished">Reacondicionado</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PROVEEDOR</h4>
          <Select
            value={getValue("provider_id") || product.provider_id || ""}
            onValueChange={(value) => onFieldChange("provider_id", value)}
          >
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue placeholder="Sin proveedor" />
            </SelectTrigger>
            <SelectContent>
              {providers.map((provider) => (
                <SelectItem key={provider.id} value={provider.id}>
                  {provider.name} ({provider.country})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">FECHA DE COMPRA</h4>
          <input
            type="date"
            value={getValue("purchase_date") || ""}
            onChange={(e) => onFieldChange("purchase_date", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
          />
        </div>

<AnimatePresence mode="wait">
          {loadingCategoryFields ? (
            <motion.div
              key="loading"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="md:col-span-2 lg:col-span-3 text-center py-4 text-sm text-muted-foreground"
            >
              Cargando campos de categoría...
            </motion.div>
          ) : categoryFieldSchema?.fields && categoryFieldSchema.fields.length > 0 ? (
            <motion.div
              key="fields"
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 10 }}
              transition={{ duration: 0.3 }}
              className="md:col-span-2 lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4"
            >
              {categoryFieldSchema.fields.map((field: any) => (
                <div key={field.key}>
                  <h4 className="text-xs font-semibold text-muted-foreground mb-0.5 capitalize">
                    {field.label || field.key.replace(/_/g, " ")}
                  </h4>
                  {field.type === "select" && field.options ? (
                    <Select
                      value={getSpecValue(field.key) || ""}
                      onValueChange={(value) => onSpecChange(field.key, value)}
                    >
                      <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
                        <SelectValue placeholder={`Seleccionar ${field.label || field.key}`} />
                      </SelectTrigger>
                      <SelectContent>
                        {field.options.map((option: string) => (
                          <SelectItem key={option} value={option}>
                            {option}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : field.type === "number" ? (
                    <input
                      type="number"
                      value={getSpecValue(field.key) || ""}
                      onChange={(e) => onSpecChange(field.key, e.target.value)}
                      className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
                      placeholder={field.label || field.key}
                    />
                  ) : (
                    <input
                      type="text"
                      value={getSpecValue(field.key) || ""}
                      onChange={(e) => onSpecChange(field.key, e.target.value)}
                      className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
                      placeholder={field.label || field.key}
                    />
                  )}
                </div>
              ))}
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/providers/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const formData = await request.formData()
    const supabase = await createClient()

const name = formData.get("name") as string
    const country = formData.get("country") as string
    const type = formData.get("type") as string

const { data, error } = await supabase
      .from("providers")
      .insert({
        name,
        country: country || null,
        type,
        is_active: true,
      })
      .select()
      .single()

if (error) throw error

return NextResponse.json(data)
  } catch (error) {
    console.error("[v0] Error creating provider:", error)
    return NextResponse.json({ error: "Failed to create provider" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/update_providers_address.sql" isMerged="true"
-- Add address column to providers table and migrate country data
ALTER TABLE providers ADD COLUMN IF NOT EXISTS address TEXT;

-- Migrate existing country data to address field
UPDATE providers SET address = country WHERE address IS NULL AND country IS NOT NULL;

-- Remove country column (optional - uncomment if you want to remove it completely)
-- ALTER TABLE providers DROP COLUMN IF EXISTS country;
[V0_FILE]typescript:file="components/provider-map.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import type { Provider } from "@/lib/types/database"

interface ProviderMapProps {
  providers: Provider[]
  selectedProviderId?: string
  onProviderClick?: (providerId: string) => void
  height?: string
}

const MAPBOX_TOKEN =
  "pk.eyJ1IjoiZmFjdW5kb2Nvcm5hZ28iLCJhIjoiY2x6MGdvMXc4MnlqZDJpcTdubm5uNmZucSJ9.f3P36chuN4unzGhWlrITIQ"

interface GeocodedProvider extends Provider {
  lat?: number
  lng?: number
}

export function ProviderMap({ providers, selectedProviderId, onProviderClick, height = "500px" }: ProviderMapProps) {
  const [mapUrl, setMapUrl] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const geocodeProviders = async () => {
      setIsLoading(true)

const providersWithAddress = providers.filter((p) => p.address && p.address.trim() !== "")

const geocodedProviders: GeocodedProvider[] = await Promise.all(
        providersWithAddress.map(async (provider) => {
          try {
            const response = await fetch(
              `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(provider.address!)}.json?access_token=${MAPBOX_TOKEN}&limit=1`,
            )
            const data = await response.json()

if (data.features && data.features.length > 0) {
              const [lng, lat] = data.features[0].center
              return { ...provider, lat, lng }
            }
            return provider
          } catch (error) {
            console.error(`Failed to geocode address: ${provider.address}`, error)
            return provider
          }
        }),
      )

const providersWithCoords = geocodedProviders.filter((p) => p.lat && p.lng)

if (providersWithCoords.length === 0) {
        const url = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/-98.5795,39.8283,3,0/800x600@2x?access_token=${MAPBOX_TOKEN}`
        setMapUrl(url)
        setIsLoading(false)
        return
      }

const selectedProvider = selectedProviderId ? providersWithCoords.find((p) => p.id === selectedProviderId) : null

const markers = providersWithCoords
        .map((provider) => {
          const isSelected = selectedProviderId === provider.id
          const markerSize = isSelected ? "l" : "s"
          return `pin-${markerSize}+8b5cf6(${provider.lng},${provider.lat})`
        })
        .join(",")

const centerLng =
        selectedProvider?.lng ||
        providersWithCoords.reduce((sum, p) => sum + (p.lng || 0), 0) / providersWithCoords.length
      const centerLat =
        selectedProvider?.lat ||
        providersWithCoords.reduce((sum, p) => sum + (p.lat || 0), 0) / providersWithCoords.length
      const zoom = selectedProvider ? 14 : providersWithCoords.length > 1 ? 4 : 10

geocodeProviders()
  }, [providers, selectedProviderId])

return (
    <div className="w-full" style={{ height }}>
      {isLoading ? (
        <div className="w-full h-full flex items-center justify-center bg-muted">
          <p className="text-muted-foreground">Cargando mapa...</p>
        </div>
      ) : mapUrl ? (
        <img src={mapUrl || "/placeholder.svg"} alt="Providers map" className="w-full h-full object-cover" />
      ) : (
        <div className="w-full h-full flex items-center justify-center bg-muted">
          <p className="text-muted-foreground">No se pudo cargar el mapa</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/types/database.ts" isQuickEdit="true" isMerged="true"
export type ProductCondition = "new" | "like_new" | "very_good" | "good" | "acceptable" | "refurbished"
export type ProductStatus = "in_transit" | "in_stock" | "reserved" | "sold" | "damaged" | "returned" | "draft"
export type LocationType = "warehouse" | "store" | "house"
export type ProviderType = "direct" | "distributor" | "sub_distributor"
export type QRCodeType = "product" | "pack" | "box"
export type SaleType = "cash" | "payment_link" | "online"
export type PaymentStatus = "pending" | "paid" | "refunded" | "cancelled"
export type ShippingStatus = "pending" | "preparing" | "shipped" | "delivered"

export interface Product {
  id: string
  sku: string | null
  name: string
  brand: string | null
  model: string | null
  condition: ProductCondition | null
  seller_notes: string | null
  specifications: Record<string, any> | null
  category_id: string | null
  purchase_price: number | null
  selling_price: number | null
  currency: string
  current_location_id: string | null
  status: ProductStatus
  provider_id: string | null
  purchase_date: string | null
  created_at: string
  updated_at: string
}

export interface QRCode {
  id: string
  code: string
  type: QRCodeType
  is_assigned: boolean
  created_at: string
  updated_at: string
}

export interface Location {
  id: string
  name: string
  type: LocationType
  address: string | null
  latitude: number | null
  longitude: number | null
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface Provider {
  id: string
  name: string
  address: string | null
  type: ProviderType
  contact_email: string | null
  contact_phone: string | null
  notes: string | null
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface Sale {
  id: string
  sale_number: string
  sale_type: SaleType
  customer_name: string | null
  customer_email: string | null
  customer_phone: string | null
  subtotal: number
  discount_amount: number
  tax_amount: number
  total_amount: number
  currency: string
  payment_status: PaymentStatus
  payment_link: string | null
  payment_date: string | null
  requires_shipping: boolean
  shipping_status: ShippingStatus | null
  notes: string | null
  created_at: string
  updated_at: string
}

export interface Category {
  id: string
  name: string
  parent_id: string | null
  path: string
  field_schema?: {
    fields: CategoryField[]
  }
  created_at: string
  updated_at: string
}

export interface CategoryField {
  key: string
  label: string
  type: "text" | "number" | "select" | "textarea"
  options?: string[]
  required: boolean
  showInTable: boolean
  tableLabel?: string
}
[V0_FILE]typescript:file="app/providers/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { ProvidersClient } from "@/components/providers-client"

export default async function ProvidersPage() {
  const supabase = await createClient()

const { data: providers } = await supabase.from("providers").select("*").order("name")

const providerStats = await Promise.all(
    (providers || []).map(async (provider) => {
      const { count: productCount } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("provider_id", provider.id)
        .in("status", ["in_stock", "reserved"])

const { count: draftCount } = await supabase
        .from("products")
        .select("*", { count: "exact", head: true })
        .eq("provider_id", provider.id)
        .eq("status", "draft")

const { count: shipmentCount } = await supabase
        .from("inbound_shipments")
        .select("*", { count: "exact", head: true })
        .eq("provider_id", provider.id)

return {
        ...provider,
        productCount: productCount || 0,
        draftCount: draftCount || 0,
        shipmentCount: shipmentCount || 0,
      }
    }),
  )

const totalProducts = providerStats.reduce((sum, prov) => sum + prov.productCount, 0)
  const totalDrafts = providerStats.reduce((sum, prov) => sum + prov.draftCount, 0)
  const totalShipments = providerStats.reduce((sum, prov) => sum + prov.shipmentCount, 0)

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Providers</h1>
          <p className="text-sm text-muted-foreground">Gestión de proveedores y distribuidores</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{providerStats.length}</div>
            <div className="text-sm text-muted-foreground">Providers</div>
          </div>
        </div>
      </div>

<ProvidersClient
        providers={providerStats}
        totalProducts={totalProducts}
        totalDrafts={totalDrafts}
        totalShipments={totalShipments}
      />
    </div>
  )
}
[V0_FILE]typescript:file="components/providers-client.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import React from "react"

import type { Provider } from "@/lib/types/database"
import { useState, useEffect } from "react"
import { Plus, ChevronDown, ChevronRight, Share2, Check, History } from "lucide-react"
import { useRouter } from "next/navigation"
import { MapboxAddressInput } from "@/components/mapbox-address-input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { updateProvider, getProviderTransferHistory } from "@/lib/db/actions"
import { useToast } from "@/hooks/use-toast"
import { formatDistanceToNow } from "date-fns"
import { es } from "date-fns/locale"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"

interface ProviderWithStats extends Provider {
  productCount: number
  draftCount: number
  shipmentCount: number
}

interface ProvidersClientProps {
  providers: ProviderWithStats[]
  totalProducts: number
  totalDrafts: number
  totalShipments: number
}

export function ProvidersClient({ providers, totalProducts, totalDrafts, totalShipments }: ProvidersClientProps) {
  const router = useRouter()
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
  const [selectedProviderId, setSelectedProviderId] = useState<string | undefined>(undefined)
  const [isCreatingNew, setIsCreatingNew] = useState(false)
  const { toast } = useToast()

const toggleRow = (id: string) => {
    const newExpanded = new Set(expandedRows)
    if (newExpanded.has(id)) {
      newExpanded.delete(id)
      setSelectedProviderId(undefined)
    } else {
      newExpanded.clear()
      newExpanded.add(id)
      setSelectedProviderId(id)
    }
    setExpandedRows(newExpanded)
  }

const handleProductCountClick = (providerId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    router.push(`/products?provider=${providerId}`)
  }

const handleCreateProvider = async () => {
    setIsCreatingNew(true)
    try {
      const formData = new FormData()
      formData.append("name", "Nuevo Proveedor")
      formData.append("type", "supplier")
      formData.append("address", "")

const response = await fetch("/api/providers", {
        method: "POST",
        body: formData,
      })

if (!response.ok) throw new Error("Failed to create provider")

const newProvider = await response.json()

router.refresh()

setTimeout(() => {
        const newExpanded = new Set<string>()
        newExpanded.add(newProvider.id)
        setExpandedRows(newExpanded)
        setSelectedProviderId(newProvider.id)
      }, 100)

toast({
        title: "Proveedor creado",
        description: "Complete los detalles del nuevo proveedor",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo crear el proveedor",
        variant: "destructive",
      })
    } finally {
      setIsCreatingNew(false)
    }
  }

return (
    <div className="flex flex-col flex-1">
      <div className="border rounded-lg bg-card mb-4">
        <div className="flex items-center gap-3 p-3">
          <div className="flex items-center gap-6 flex-1">
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalProducts}</div>
              <div className="text-xs text-muted-foreground">Productos de todos los proveedores</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalShipments}</div>
              <div className="text-xs text-muted-foreground">Envíos totales</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{totalDrafts}</div>
              <div className="text-xs text-muted-foreground">Productos sin ingresar</div>
            </div>
          </div>
          <div className="h-10 w-px bg-border" />
          <Button size="sm" className="h-10 aspect-square" onClick={handleCreateProvider} disabled={isCreatingNew}>
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="border rounded-lg flex flex-col flex-1 bg-background">
        <div className="flex-1 overflow-auto rounded-lg">
          <table className="w-full">
            <thead className="sticky top-0 z-10 bg-muted border-b">
              <tr>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground w-10 first:rounded-tl-lg"></th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">PROVEEDOR</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">DIRECCIÓN</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">CONTACTO</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">PRODUCTOS</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">ENVÍOS</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground last:rounded-tr-lg">ESTADO</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {providers.map((provider) => {
                const isExpanded = expandedRows.has(provider.id)
                return (
                  <React.Fragment key={provider.id}>
                    <tr
                      className="hover:bg-muted/30 transition-colors cursor-pointer"
                      onClick={() => toggleRow(provider.id)}
                    >
                      <td className="p-3">
                        {isExpanded ? (
                          <ChevronDown className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
                        )}
                      </td>
                      <td className="p-3">
                        <div className="flex items-center gap-3">
                          <div className="min-w-0">
                            <div className="font-medium text-sm truncate">{provider.name}</div>
                            <div className="text-xs text-muted-foreground capitalize">{provider.type}</div>
                          </div>
                        </div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm">{provider.address || "-"}</div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm">{provider.contact_email || provider.contact_phone || "-"}</div>
                      </td>
                      <td className="p-3">
                        <button
                          onClick={(e) => handleProductCountClick(provider.id, e)}
                          className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
                        >
                          {provider.productCount}
                        </button>
                      </td>
                      <td className="p-3">
                        <div className="text-sm font-medium">{provider.shipmentCount}</div>
                      </td>
                      <td className="p-3">
                        <Badge variant={provider.is_active ? "default" : "secondary"}>
                          {provider.is_active ? "Activo" : "Inactivo"}
                        </Badge>
                      </td>
                    </tr>
                    {isExpanded && (
                      <tr key={`${provider.id}-expanded`}>
                        <td colSpan={7} className="p-0">
                          <ExpandedProviderRow provider={provider} />
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

function ExpandedProviderRow({ provider }: { provider: ProviderWithStats }) {
  const [editedValues, setEditedValues] = useState<Record<string, any>>({})
  const [isSaving, setIsSaving] = useState(false)
  const [transactions, setTransactions] = useState<any>({ products: [], shipments: [] })
  const [loadingTransactions, setLoadingTransactions] = useState(true)
  const [showTransactionsModal, setShowTransactionsModal] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const hasChanges = Object.keys(editedValues).length > 0

useEffect(() => {
    const fetchTransactions = async () => {
      try {
        const data = await getProviderTransferHistory(provider.id)
        setTransactions(data || { products: [], shipments: [] })
      } catch (error) {
        console.error("[v0] Error fetching transactions:", error)
      } finally {
        setLoadingTransactions(false)
      }
    }
    fetchTransactions()
  }, [provider.id])

const handleSave = async () => {
    if (!hasChanges) return

setIsSaving(true)
    try {
      const formData = new FormData()
      Object.entries(editedValues).forEach(([key, value]) => {
        formData.append(key, value?.toString() || "")
      })

const result = await updateProvider(provider.id, formData)

toast({
        title: "Proveedor actualizado",
        description: "Los cambios se han guardado correctamente",
      })
      setEditedValues({})
      router.refresh()
    } catch (error) {
      console.error("[v0] Error updating provider:", error)
      toast({
        title: "Error",
        description: "No se pudo actualizar el proveedor",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const getValue = (key: string) => {
    return editedValues[key] !== undefined ? editedValues[key] : provider[key as keyof Provider]
  }

const handleChange = (key: string, value: any) => {
    setEditedValues({ ...editedValues, [key]: value })
  }

const shareAddress = async (e: React.MouseEvent) => {
    e.stopPropagation()
    if (navigator.share) {
      try {
        await navigator.share({
          title: "Dirección",
          text: provider.address || "",
        })
      } catch (err) {
        navigator.clipboard.writeText(provider.address || "")
      }
    } else {
      navigator.clipboard.writeText(provider.address || "")
      toast({
        title: "Dirección copiada",
        description: "La dirección se ha copiado al portapapeles",
      })
    }
  }

return (
    <div className="p-6 bg-muted/20">
      <div className="flex items-center justify-between mb-6 pb-4 border-b">
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">ID:</span>
            <span className="text-sm font-mono">{provider.id}</span>
          </div>
        </div>

<div className="flex items-center gap-2">
          <Dialog open={showTransactionsModal} onOpenChange={setShowTransactionsModal}>
            <DialogTrigger asChild>
              <Button variant="outline" size="sm">
                <History className="h-4 w-4 mr-2" />
                Transacciones
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Transacciones - {provider.name}</DialogTitle>
                <DialogDescription>Historial de productos y envíos de este proveedor</DialogDescription>
              </DialogHeader>
              {loadingTransactions ? (
                <div className="text-sm text-muted-foreground py-8 text-center">Cargando transacciones...</div>
              ) : (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-sm font-semibold mb-3">Productos ({transactions.products.length})</h3>
                    {transactions.products.length === 0 ? (
                      <div className="text-sm text-muted-foreground py-4 text-center">No hay productos registrados</div>
                    ) : (
                      <div className="space-y-2">
                        {transactions.products.slice(0, 10).map((product: any) => (
                          <div
                            key={product.id}
                            className="flex items-start justify-between p-3 bg-muted rounded-lg border"
                          >
                            <div className="flex-1">
                              <div className="text-sm font-medium">
                                {product.brand} {product.model}
                              </div>
                              <div className="text-xs text-muted-foreground mt-1">
                                Estado: <span className="capitalize">{product.status}</span>
                              </div>
                            </div>
                            <div className="text-xs text-muted-foreground">
                              {formatDistanceToNow(new Date(product.created_at), { addSuffix: true, locale: es })}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

<div>
                    <h3 className="text-sm font-semibold mb-3">Envíos ({transactions.shipments.length})</h3>
                    {transactions.shipments.length === 0 ? (
                      <div className="text-sm text-muted-foreground py-4 text-center">No hay envíos registrados</div>
                    ) : (
                      <div className="space-y-2">
                        {transactions.shipments.map((shipment: any) => (
                          <div
                            key={shipment.id}
                            className="flex items-start justify-between p-3 bg-muted rounded-lg border"
                          >
                            <div className="flex-1">
                              <div className="text-sm font-medium">
                                {shipment.tracking_number || "Sin número de seguimiento"}
                              </div>
                              <div className="text-xs text-muted-foreground mt-1">
                                Destino: {shipment.destination_location?.name || "N/A"}
                              </div>
                              <div className="text-xs text-muted-foreground">
                                Estado: <span className="capitalize">{shipment.status}</span>
                              </div>
                            </div>
                            <div className="text-xs text-muted-foreground">
                              {formatDistanceToNow(new Date(shipment.created_at), { addSuffix: true, locale: es })}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              )}
            </DialogContent>
          </Dialog>
          <Button variant="outline" size="sm" onClick={shareAddress}>
            <Share2 className="h-4 w-4 mr-2" />
            Compartir
          </Button>
          {hasChanges && (
            <Button onClick={handleSave} disabled={isSaving} size="sm" className="gap-2">
              <Check className="h-4 w-4" />
              {isSaving ? "Guardando..." : "Aceptar"}
            </Button>
          )}
        </div>
      </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">TIPO</h4>
          <Select value={getValue("type") || "supplier"} onValueChange={(value) => handleChange("type", value)}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="supplier">Supplier</SelectItem>
              <SelectItem value="distributor">Distributor</SelectItem>
              <SelectItem value="manufacturer">Manufacturer</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PRODUCTOS EN STOCK</h4>
          <div className="text-sm font-medium">{provider.productCount}</div>
        </div>

<div className="md:col-span-2">
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">DIRECCIÓN</h4>
          <MapboxAddressInput
            value={getValue("address") || ""}
            onChange={(address, coords) => {
              handleChange("address", address)
            }}
            placeholder="Buscar dirección..."
            required={false}
            showLabel={false}
            textStyle={true}
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">ENVÍOS</h4>
          <div className="text-sm font-medium">{provider.shipmentCount}</div>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">EMAIL</h4>
          <input
            type="email"
            value={getValue("contact_email") || ""}
            onChange={(e) => handleChange("contact_email", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Email de contacto"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">TELÉFONO</h4>
          <input
            type="tel"
            value={getValue("contact_phone") || ""}
            onChange={(e) => handleChange("contact_phone", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Teléfono de contacto"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">ESTADO</h4>
          <Select
            value={getValue("is_active") ? "active" : "inactive"}
            onValueChange={(value) => handleChange("is_active", value === "active")}
          >
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="active">Activo</SelectItem>
              <SelectItem value="inactive">Inactivo</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="md:col-span-2">
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">NOTAS</h4>
          <textarea
            value={getValue("notes") || ""}
            onChange={(e) => handleChange("notes", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full resize-none"
            placeholder="Notas adicionales"
            rows={2}
          />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/shipments/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { ShipmentsClient } from "@/components/shipments-client"

export default async function ShipmentsPage() {
  const supabase = await createClient()

const { data: shipments } = await supabase
    .from("shipping_labels")
    .select(
      `
      *,
      products (name, brand, model, current_location_id),
      sales (sale_number, customer_name, customer_email, customer_phone)
    `,
    )
    .order("created_at", { ascending: false })

const shipmentStats = (shipments || []).map((shipment) => ({
    ...shipment,
  }))

const totalShipments = shipmentStats.length
  const createdCount = shipmentStats.filter((s) => s.status === "created").length
  const printedCount = shipmentStats.filter((s) => s.status === "printed").length
  const shippedCount = shipmentStats.filter((s) => s.status === "shipped").length
  const deliveredCount = shipmentStats.filter((s) => s.status === "delivered").length

return (
    <div className="flex flex-col h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Envíos</h1>
          <p className="text-sm text-muted-foreground">Gestión de envíos de productos desde ubicaciones a clientes</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="text-right">
            <div className="text-4xl font-bold tabular-nums">{totalShipments}</div>
            <div className="text-sm text-muted-foreground">Envíos</div>
          </div>
        </div>
      </div>

<ShipmentsClient
        shipments={shipmentStats}
        totalShipments={totalShipments}
        createdCount={createdCount}
        printedCount={printedCount}
        shippedCount={shippedCount}
        deliveredCount={deliveredCount}
      />
    </div>
  )
}
[V0_FILE]typescript:file="app/api/shipments/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("shipping_labels")
    .select(
      `
      *,
      products (name, brand, model),
      sales (sale_number, customer_name, customer_email)
    `,
    )
    .order("created_at", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json(data)
}
[V0_FILE]typescript:file="components/shipments-client.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import React from "react"
import { useState, useEffect } from "react"
import { ChevronDown, ChevronRight, Share2, Check, History, Package } from "lucide-react"
import { useRouter } from "next/navigation"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { updateShippingLabel, getShippingLabelHistory } from "@/lib/db/actions"
import { useToast } from "@/hooks/use-toast"
import { formatDistanceToNow } from "date-fns"
import { es } from "date-fns/locale"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { CreateShippingLabelModal } from "@/components/create-shipping-label-modal"

interface ShipmentWithDetails {
  id: string
  tracking_number: string | null
  carrier: string | null
  service_type: string | null
  weight: number | null
  shipping_cost: number | null
  currency: string | null
  status: string
  from_address: any
  to_address: any
  label_url: string | null
  created_at: string
  updated_at: string
  product_id: string | null
  sale_id: string | null
  products?: {
    name: string
    brand: string
    model: string
    current_location_id: string
  }
  sales?: {
    sale_number: string
    customer_name: string
    customer_email: string
    customer_phone: string
  }
}

interface ShipmentsClientProps {
  shipments: ShipmentWithDetails[]
  totalShipments: number
  createdCount: number
  printedCount: number
  shippedCount: number
  deliveredCount: number
}

function getStatusBadgeVariant(status: string) {
  switch (status) {
    case "created":
      return "default"
    case "printed":
      return "secondary"
    case "shipped":
      return "destructive"
    case "delivered":
      return "success"
    default:
      return "default"
  }
}

export function ShipmentsClient({
  shipments,
  totalShipments,
  createdCount,
  printedCount,
  shippedCount,
  deliveredCount,
}: ShipmentsClientProps) {
  const router = useRouter()
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
  const { toast } = useToast()

const toggleRow = (id: string) => {
    const newExpanded = new Set(expandedRows)
    if (newExpanded.has(id)) {
      newExpanded.delete(id)
    } else {
      newExpanded.clear()
      newExpanded.add(id)
    }
    setExpandedRows(newExpanded)
  }

return (
    <div className="flex flex-col flex-1 overflow-hidden">
      <div className="border rounded-lg bg-card mb-4">
        <div className="flex items-center gap-3 p-3">
          <div className="flex items-center gap-6 flex-1">
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{createdCount}</div>
              <div className="text-xs text-muted-foreground">Creados</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{printedCount}</div>
              <div className="text-xs text-muted-foreground">Impresos</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{shippedCount}</div>
              <div className="text-xs text-muted-foreground">Enviados</div>
            </div>
            <div className="h-10 w-px bg-border" />
            <div className="flex-1">
              <div className="text-2xl font-bold tabular-nums">{deliveredCount}</div>
              <div className="text-xs text-muted-foreground">Entregados</div>
            </div>
          </div>
          <div className="h-10 w-px bg-border" />
          <CreateShippingLabelModal />
        </div>
      </div>

<div className="border rounded-lg flex flex-col flex-1 bg-background overflow-hidden">
        <div className="flex-1 overflow-auto rounded-lg">
          <table className="w-full">
            <thead className="sticky top-0 z-10 bg-muted border-b">
              <tr>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground w-10 first:rounded-tl-lg"></th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">PRODUCTO</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">CLIENTE</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">TRACKING</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground">CARRIER</th>
                <th className="text-left p-3 text-xs font-medium text-muted-foreground last:rounded-tr-lg">ESTADO</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {shipments.map((shipment) => {
                const isExpanded = expandedRows.has(shipment.id)
                return (
                  <React.Fragment key={shipment.id}>
                    <tr
                      className="hover:bg-muted/30 transition-colors cursor-pointer"
                      onClick={() => toggleRow(shipment.id)}
                    >
                      <td className="p-3">
                        {isExpanded ? (
                          <ChevronDown className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
                        )}
                      </td>
                      <td className="p-3">
                        <div className="flex items-center gap-3">
                          <Package className="h-4 w-4 text-muted-foreground" />
                          <div className="min-w-0">
                            <div className="font-medium text-sm truncate">
                              {shipment.products?.brand} {shipment.products?.model}
                            </div>
                            <div className="text-xs text-muted-foreground">{shipment.products?.name}</div>
                          </div>
                        </div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm">{shipment.sales?.customer_name || "N/A"}</div>
                        <div className="text-xs text-muted-foreground">{shipment.sales?.customer_email || ""}</div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm font-mono">{shipment.tracking_number || "N/A"}</div>
                      </td>
                      <td className="p-3">
                        <div className="text-sm capitalize">{shipment.carrier || "N/A"}</div>
                      </td>
                      <td className="p-3">
                        <Badge variant={getStatusBadgeVariant(shipment.status)}>{shipment.status}</Badge>
                      </td>
                    </tr>
                    {isExpanded && (
                      <tr key={`${shipment.id}-expanded`}>
                        <td colSpan={6} className="p-0">
                          <ExpandedShipmentRow shipment={shipment} />
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

function ExpandedShipmentRow({ shipment }: { shipment: ShipmentWithDetails }) {
  const [editedValues, setEditedValues] = useState<Record<string, any>>({})
  const [isSaving, setIsSaving] = useState(false)
  const [history, setHistory] = useState<any[]>([])
  const [loadingHistory, setLoadingHistory] = useState(true)
  const [showTransactionsModal, setShowTransactionsModal] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const hasChanges = Object.keys(editedValues).length > 0

useEffect(() => {
    const fetchHistory = async () => {
      try {
        const data = await getShippingLabelHistory(shipment.product_id || undefined, shipment.sale_id || undefined)
        setHistory(data || [])
      } catch (error) {
        console.error("[v0] Error fetching history:", error)
      } finally {
        setLoadingHistory(false)
      }
    }
    fetchHistory()
  }, [shipment.product_id, shipment.sale_id])

const handleSave = async () => {
    if (!hasChanges) return

setIsSaving(true)
    try {
      const formData = new FormData()
      Object.entries(editedValues).forEach(([key, value]) => {
        formData.append(key, value?.toString() || "")
      })

await updateShippingLabel(shipment.id, formData)

toast({
        title: "Envío actualizado",
        description: "Los cambios se han guardado correctamente",
      })
      setEditedValues({})
      router.refresh()
    } catch (error) {
      console.error("[v0] Error updating shipment:", error)
      toast({
        title: "Error",
        description: "No se pudo actualizar el envío",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const getValue = (key: string) => {
    return editedValues[key] !== undefined ? editedValues[key] : (shipment as any)[key]
  }

const handleChange = (key: string, value: any) => {
    setEditedValues({ ...editedValues, [key]: value })
  }

const shareTracking = async (e: React.MouseEvent) => {
    e.stopPropagation()
    const trackingInfo = `Tracking: ${shipment.tracking_number}\nCarrier: ${shipment.carrier}`
    if (navigator.share) {
      try {
        await navigator.share({
          title: "Información de envío",
          text: trackingInfo,
        })
      } catch (err) {
        navigator.clipboard.writeText(trackingInfo)
      }
    } else {
      navigator.clipboard.writeText(trackingInfo)
      toast({
        title: "Información copiada",
        description: "La información de envío se ha copiado al portapapeles",
      })
    }
  }

return (
    <div className="p-6 bg-muted/20">
      <div className="flex items-center justify-between mb-6 pb-4 border-b">
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">ID:</span>
            <span className="text-sm font-mono">{shipment.id}</span>
          </div>
        </div>

<div className="flex items-center gap-2">
          <Dialog open={showTransactionsModal} onOpenChange={setShowTransactionsModal}>
            <DialogTrigger asChild>
              <Button variant="outline" size="sm">
                <History className="h-4 w-4 mr-2" />
                Historial
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Historial de envíos</DialogTitle>
                <DialogDescription>Historial de envíos relacionados con este producto/venta</DialogDescription>
              </DialogHeader>
              {loadingHistory ? (
                <div className="text-sm text-muted-foreground py-8 text-center">Cargando historial...</div>
              ) : history.length === 0 ? (
                <div className="text-sm text-muted-foreground py-8 text-center">No hay historial registrado</div>
              ) : (
                <div className="space-y-3">
                  {history.map((item) => (
                    <div key={item.id} className="flex items-start justify-between p-4 bg-muted rounded-lg border">
                      <div className="flex-1">
                        <div className="text-sm font-medium">
                          {item.products?.brand} {item.products?.model}
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">
                          Tracking: {item.tracking_number || "N/A"} - {item.carrier || "N/A"}
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">Estado: {item.status}</div>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {formatDistanceToNow(new Date(item.created_at), { addSuffix: true, locale: es })}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </DialogContent>
          </Dialog>
          <Button variant="outline" size="sm" onClick={shareTracking}>
            <Share2 className="h-4 w-4 mr-2" />
            Compartir
          </Button>
          {hasChanges && (
            <Button onClick={handleSave} disabled={isSaving} size="sm" className="gap-2">
              <Check className="h-4 w-4" />
              {isSaving ? "Guardando..." : "Aceptar"}
            </Button>
          )}
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3 mb-6">
        <div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">TRACKING NUMBER</h4>
          <input
            type="text"
            value={getValue("tracking_number") || ""}
            onChange={(e) => handleChange("tracking_number", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full font-mono"
            placeholder="Número de seguimiento"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">CARRIER</h4>
          <Select value={getValue("carrier") || ""} onValueChange={(value) => handleChange("carrier", value)}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue placeholder="Seleccionar carrier" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ups">UPS</SelectItem>
              <SelectItem value="fedex">FedEx</SelectItem>
              <SelectItem value="usps">USPS</SelectItem>
              <SelectItem value="dhl">DHL</SelectItem>
              <SelectItem value="other">Otro</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">ESTADO</h4>
          <Select value={getValue("status") || "created"} onValueChange={(value) => handleChange("status", value)}>
            <SelectTrigger className="h-7 text-sm bg-transparent border-none p-0 hover:text-primary focus:ring-0">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="created">Created</SelectItem>
              <SelectItem value="printed">Printed</SelectItem>
              <SelectItem value="shipped">Shipped</SelectItem>
              <SelectItem value="delivered">Delivered</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">SERVICE TYPE</h4>
          <input
            type="text"
            value={getValue("service_type") || ""}
            onChange={(e) => handleChange("service_type", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Tipo de servicio"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">PESO (kg)</h4>
          <input
            type="number"
            step="0.01"
            value={getValue("weight") || ""}
            onChange={(e) => handleChange("weight", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Peso"
          />
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">COSTO DE ENVÍO</h4>
          <input
            type="number"
            step="0.01"
            value={getValue("shipping_cost") || ""}
            onChange={(e) => handleChange("shipping_cost", e.target.value)}
            className="text-sm bg-transparent border-none outline-none focus:ring-0 p-0 w-full"
            placeholder="Costo"
          />
        </div>

<div className="md:col-span-2">
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">CLIENTE</h4>
          <div className="text-sm">
            {shipment.sales?.customer_name || "N/A"}
            {shipment.sales?.customer_email && (
              <span className="text-muted-foreground"> - {shipment.sales.customer_email}</span>
            )}
          </div>
        </div>

<div>
          <h4 className="text-xs font-semibold text-muted-foreground mb-0.5">VENTA</h4>
          <div className="text-sm font-mono">{shipment.sales?.sale_number || "N/A"}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/mapbox-address-input.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef, useCallback } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { MapPin, Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"

interface AddressSuggestion {
  id: string
  place_name: string
  center: [number, number] // [longitude, latitude]
  text: string
  place_type: string[]
}

interface MapboxAddressInputProps {
  value?: string
  onChange: (address: string, coordinates?: { latitude: number; longitude: number }) => void
  label?: string
  placeholder?: string
  required?: boolean
  showLabel?: boolean
  textStyle?: boolean
}

const MAPBOX_TOKEN =
  "pk.eyJ1IjoiZmFjdW5kb2Nvcm5hZ28iLCJhIjoiY2x6MGdvMXc4MnlqZDJpcTdubm5uNmZucSJ9.f3P36chuN4unzGhWlrITIQ"

export function MapboxAddressInput({
  value = "",
  onChange,
  label = "Address",
  placeholder = "Start typing an address...",
  required = false,
  showLabel = true,
  textStyle = false,
}: MapboxAddressInputProps) {
  const [inputValue, setInputValue] = useState(value)
  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [selectedIndex, setSelectedIndex] = useState(-1)
  const [hasTyped, setHasTyped] = useState(false)
  const debounceTimerRef = useRef<NodeJS.Timeout>()
  const inputRef = useRef<HTMLInputElement>(null)
  const suggestionsRef = useRef<HTMLDivElement>(null)

const fetchSuggestions = useCallback(
    async (query: string) => {
      if (!query || query.length < 3) {
        setSuggestions([])
        return
      }

setIsLoading(true)
      try {
        const response = await fetch(
          `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${MAPBOX_TOKEN}&autocomplete=true&limit=5`,
        )

if (!response.ok) {
          console.error("[v0] Mapbox API error:", response.statusText)
          setSuggestions([])
          return
        }

const data = await response.json()
        setSuggestions(data.features || [])
        if (hasTyped) {
          setShowSuggestions(true)
        }
      } catch (error) {
        console.error("[v0] Error fetching address suggestions:", error)
        setSuggestions([])
      } finally {
        setIsLoading(false)
      }
    },
    [hasTyped],
  )

useEffect(() => {
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current)
    }

debounceTimerRef.current = setTimeout(() => {
      fetchSuggestions(inputValue)
    }, 500)

return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current)
      }
    }
  }, [inputValue, fetchSuggestions])

const handleSelectSuggestion = (suggestion: AddressSuggestion) => {
    setInputValue(suggestion.place_name)
    onChange(suggestion.place_name, {
      latitude: suggestion.center[1],
      longitude: suggestion.center[0],
    })
    setShowSuggestions(false)
    setSuggestions([])
    setSelectedIndex(-1)
    setHasTyped(false)
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!showSuggestions || suggestions.length === 0) return

switch (e.key) {
      case "ArrowDown":
        e.preventDefault()
        setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev))
        break
      case "ArrowUp":
        e.preventDefault()
        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1))
        break
      case "Enter":
        e.preventDefault()
        if (selectedIndex >= 0 && selectedIndex < suggestions.length) {
          handleSelectSuggestion(suggestions[selectedIndex])
        }
        break
      case "Escape":
        setShowSuggestions(false)
        setSelectedIndex(-1)
        break
    }
  }

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        suggestionsRef.current &&
        !suggestionsRef.current.contains(event.target as Node) &&
        inputRef.current &&
        !inputRef.current.contains(event.target as Node)
      ) {
        setShowSuggestions(false)
        setSelectedIndex(-1)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

return (
    <div className="space-y-2 relative">
      {showLabel && (
        <Label htmlFor="address">
          {label} {required && <span className="text-destructive">*</span>}
        </Label>
      )}
      <div className="relative">
        <Input
          ref={inputRef}
          id="address"
          name="address"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value)
            setHasTyped(true)
          }}
          onKeyDown={handleKeyDown}
          onFocus={() => {}}
          placeholder={placeholder}
          required={required}
          className={cn(
            "pr-10",
            textStyle &&
              "bg-transparent border-none outline-none focus:ring-0 p-0 h-auto text-sm focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none text-foreground [&:not(:placeholder-shown)]:bg-transparent hover:bg-transparent focus:bg-transparent",
          )}
        />
        {!textStyle && (
          <div className={cn("absolute right-3 top-1/2 -translate-y-1/2")}>
            {isLoading ? (
              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
            ) : (
              <MapPin className="h-4 w-4 text-muted-foreground" />
            )}
          </div>
        )}
      </div>

{showSuggestions && suggestions.length > 0 && (
        <div
          ref={suggestionsRef}
          className="absolute z-50 w-full mt-1 bg-background border rounded-md shadow-lg max-h-60 overflow-auto"
        >
          {suggestions.map((suggestion, index) => (
            <button
              key={suggestion.id}
              type="button"
              onClick={() => handleSelectSuggestion(suggestion)}
              className={cn(
                "w-full text-left px-3 py-1.5 hover:bg-accent transition-colors border-b last:border-b-0",
                selectedIndex === index && "bg-accent",
              )}
            >
              <div className="text-sm truncate">{suggestion.place_name}</div>
            </button>
          ))}
        </div>
      )}

{showSuggestions && suggestions.length === 0 && !isLoading && inputValue.length >= 3 && (
        <div className="absolute z-50 w-full mt-1 bg-background border rounded-md shadow-lg p-4 text-sm text-muted-foreground text-center">
          No addresses found. Try a different search.
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/products-toolbar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Plus, Search, SlidersHorizontal, Printer } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { NewProductModal } from "@/components/new-product-modal"
import { QRScannerCamera } from "@/components/qr-scanner-camera"
import type { Category, Location, Provider } from "@/lib/types/database"
import { useRouter } from "next/navigation"

interface ProductsToolbarProps {
  categories: Category[]
  locations: Location[]
  providers: Provider[]
  searchQuery: string
  onSearchChange: (query: string) => void
}

export function ProductsToolbar({
  categories,
  locations,
  providers,
  searchQuery,
  onSearchChange,
}: ProductsToolbarProps) {
  const router = useRouter()

const [statusFilter, setStatusFilter] = useState<string>("all")
  const [conditionFilter, setConditionFilter] = useState<string>("all")
  const [locationFilter, setLocationFilter] = useState<string>("all")
  const [isNewProductModalOpen, setIsNewProductModalOpen] = useState(false)

const handlePrint = () => {
    window.print()
  }

return (
    <>
      <div className="border rounded-lg bg-card">
        <div className="flex items-center gap-2 p-3">
          <div className="flex items-center gap-2 flex-1">
            <QRScannerCamera onScan={onSearchChange} />

<div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar por nombre, marca, modelo o SKU..."
                value={searchQuery}
                onChange={(e) => onSearchChange(e.target.value)}
                className="pl-9 h-10"
              />
            </div>

<Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" size="sm" className="bg-transparent h-10">
                  <SlidersHorizontal className="h-4 w-4 mr-2" />
                  Filtros
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-80" align="end">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <h4 className="font-medium text-sm">Filtros</h4>
                    <p className="text-xs text-muted-foreground">
                      Filtrá los productos por estado, condición y ubicación
                    </p>
                  </div>

<div className="space-y-3">
                    <div className="space-y-1.5">
                      <Label htmlFor="status" className="text-xs">
                        Estado
                      </Label>
                      <Select value={statusFilter} onValueChange={setStatusFilter}>
                        <SelectTrigger id="status" className="h-9">
                          <SelectValue placeholder="Todos los estados" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Todos los estados</SelectItem>
                          <SelectItem value="in_stock">En Stock</SelectItem>
                          <SelectItem value="sold">Vendido</SelectItem>
                          <SelectItem value="reserved">Reservado</SelectItem>
                          <SelectItem value="in_transit">En Tránsito</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-1.5">
                      <Label htmlFor="condition" className="text-xs">
                        Condición
                      </Label>
                      <Select value={conditionFilter} onValueChange={setConditionFilter}>
                        <SelectTrigger id="condition" className="h-9">
                          <SelectValue placeholder="Todas las condiciones" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Todas las condiciones</SelectItem>
                          <SelectItem value="new">Nuevo</SelectItem>
                          <SelectItem value="like_new">Como Nuevo</SelectItem>
                          <SelectItem value="very_good">Muy Bueno</SelectItem>
                          <SelectItem value="good">Bueno</SelectItem>
                          <SelectItem value="acceptable">Aceptable</SelectItem>
                          <SelectItem value="refurbished">Reacondicionado</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-1.5">
                      <Label htmlFor="location" className="text-xs">
                        Ubicación
                      </Label>
                      <Select value={locationFilter} onValueChange={setLocationFilter}>
                        <SelectTrigger id="location" className="h-9">
                          <SelectValue placeholder="Todas las ubicaciones" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Todas las ubicaciones</SelectItem>
                          <SelectItem value="warehouse">Almacén</SelectItem>
                          <SelectItem value="store">Tienda</SelectItem>
                          <SelectItem value="office">Oficina</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="flex gap-2 pt-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 bg-transparent"
                      onClick={() => {
                        setStatusFilter("all")
                        setConditionFilter("all")
                        setLocationFilter("all")
                      }}
                    >
                      Limpiar
                    </Button>
                    <Button size="sm" className="flex-1">
                      Aplicar
                    </Button>
                  </div>
                </div>
              </PopoverContent>
            </Popover>
          </div>

<div className="flex items-center gap-2">
            <Button variant="outline" size="sm" className="bg-transparent h-10" onClick={handlePrint}>
              <Printer className="h-4 w-4 mr-2" />
              Imprimir
            </Button>
            <Button size="sm" className="h-10" onClick={() => setIsNewProductModalOpen(true)}>
              <Plus className="h-4 w-4 mr-2" />
              Nuevo Producto
            </Button>
          </div>
        </div>
      </div>

<NewProductModal
        open={isNewProductModalOpen}
        onOpenChange={setIsNewProductModalOpen}
        categories={categories}
        locations={locations}
        providers={providers}
        onSuccess={() => {
          router.refresh()
        }}
      />
    </>
  )
}
[V0_FILE]typescript:file="components/qr-scanner-camera.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { QrCode, SwitchCamera } from "lucide-react"

interface QRScannerCameraProps {
  onScan: (code: string) => void
  trigger?: React.ReactNode
}

const CAMERA_INDEX_KEY = "qr-scanner-last-camera-index"

export function QRScannerCamera({ onScan, trigger }: QRScannerCameraProps) {
  const [isCameraOpen, setIsCameraOpen] = useState(false)
  const [isScanning, setIsScanning] = useState(false)
  const [cameraError, setCameraError] = useState<string | null>(null)
  const [availableCameras, setAvailableCameras] = useState<MediaDeviceInfo[]>([])
  const [currentCameraIndex, setCurrentCameraIndex] = useState(0)

const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const animationFrameRef = useRef<number | null>(null)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

const scanQRCode = async () => {
    if (!videoRef.current || !canvasRef.current || !isScanning) return

const video = videoRef.current
    const canvas = canvasRef.current

if (video.readyState !== video.HAVE_ENOUGH_DATA) {
      animationFrameRef.current = requestAnimationFrame(scanQRCode)
      return
    }

const context = canvas.getContext("2d")
    if (!context) return

canvas.width = video.videoWidth
    canvas.height = video.videoHeight

context.drawImage(video, 0, 0, canvas.width, canvas.height)

const imageData = context.getImageData(0, 0, canvas.width, canvas.height)

try {
      const jsQR = (await import("jsqr")).default
      const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
      })

if (code && code.data) {
        onScan(code.data)
        closeCamera()
        return
      }
    } catch (err) {
      console.error("[v0] Error scanning QR:", err)
    }

animationFrameRef.current = requestAnimationFrame(scanQRCode)
  }

const enumerateCameras = async () => {
    try {
      const devices = await navigator.mediaDevices.enumerateDevices()
      const videoDevices = devices.filter((device) => device.kind === "videoinput")
      setAvailableCameras(videoDevices)

const savedIndex = localStorage.getItem(CAMERA_INDEX_KEY)
      if (savedIndex !== null) {
        const index = Number.parseInt(savedIndex, 10)
        if (index >= 0 && index < videoDevices.length) {
          setCurrentCameraIndex(index)
        }
      }
    } catch (err) {
      console.error("[v0] Error enumerating cameras:", err)
    }
  }

const switchCamera = async () => {
    if (availableCameras.length <= 1) return

const nextIndex = (currentCameraIndex + 1) % availableCameras.length
    setCurrentCameraIndex(nextIndex)

localStorage.setItem(CAMERA_INDEX_KEY, nextIndex.toString())

// Close current camera and open with new device
    closeCamera()
    await new Promise((resolve) => setTimeout(resolve, 100))
    await openCamera(availableCameras[nextIndex].deviceId)
  }

const openCamera = async (deviceId?: string) => {
    try {
      setCameraError(null)

const constraints: MediaStreamConstraints = {
        video: deviceId
          ? {
              deviceId: { exact: deviceId },
              width: { ideal: 1280 },
              height: { ideal: 720 },
            }
          : {
              facingMode: "environment",
              width: { ideal: 1280 },
              height: { ideal: 720 },
            },
        audio: false,
      }

const stream = await navigator.mediaDevices.getUserMedia(constraints)

streamRef.current = stream
      setIsCameraOpen(true)

await new Promise((resolve) => setTimeout(resolve, 100))

if (videoRef.current) {
        videoRef.current.srcObject = stream

await new Promise<void>((resolve, reject) => {
          if (!videoRef.current) {
            reject(new Error("Video element not found"))
            return
          }

timeoutRef.current = setTimeout(() => {
            timeoutRef.current = null
            reject(new Error("Video loading timeout"))
          }, 15000) // Increased timeout from 10000ms to 15000ms for more reliable camera switching, especially on slower devices
        })

const closeCamera = () => {
    setIsScanning(false)

if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
      timeoutRef.current = null
    }

if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current)
      animationFrameRef.current = null
    }

if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => {
        track.stop()
      })
      streamRef.current = null
    }

if (videoRef.current) {
      videoRef.current.srcObject = null
    }

setIsCameraOpen(false)
    setCameraError(null)
  }

useEffect(() => {
    if (isScanning) {
      animationFrameRef.current = requestAnimationFrame(scanQRCode)
    }

return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [isScanning])

useEffect(() => {
    enumerateCameras()

return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (isCameraOpen && availableCameras.length > 0) {
      const deviceId = availableCameras[currentCameraIndex]?.deviceId
      openCamera(deviceId)
    }
  }, [isCameraOpen])

return (
    <>
      {trigger ? (
        <div onClick={() => setIsCameraOpen(true)}>{trigger}</div>
      ) : (
        <Button
          variant="outline"
          size="icon"
          className="bg-transparent h-10 w-10"
          onClick={() => setIsCameraOpen(true)}
        >
          <QrCode className="h-4 w-4" />
        </Button>
      )}

<Dialog open={isCameraOpen} onOpenChange={(open) => !open && closeCamera()}>
        <DialogContent className="sm:max-w-2xl p-0">
          <div className="relative">
            {cameraError ? (
              <div className="p-8">
                <div className="p-4 bg-destructive/10 text-destructive rounded-lg text-sm">{cameraError}</div>
              </div>
            ) : (
              <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover" />
                <canvas ref={canvasRef} className="hidden" />
                {isScanning && (
                  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div className="border-2 border-primary w-64 h-64 rounded-lg animate-pulse" />
                  </div>
                )}
                {availableCameras.length > 1 && (
                  <div className="absolute bottom-4 right-4">
                    <Button
                      variant="secondary"
                      size="icon"
                      onClick={switchCamera}
                      className="bg-black/60 hover:bg-black/80 backdrop-blur-sm"
                    >
                      <SwitchCamera className="h-5 w-5 text-white" />
                    </Button>
                  </div>
                )}
                <div className="absolute bottom-4 left-0 right-0 flex justify-center pointer-events-none">
                  <p className="text-sm text-white bg-black/60 px-4 py-2 rounded-full backdrop-blur-sm">
                    {isScanning ? "Apuntá la cámara al código QR" : "Iniciando cámara..."}
                  </p>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescript:file="app/sales/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"

import { createClient } from "@/lib/supabase/server"
import { notFound } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { DollarSign, User, CreditCard, Package, Truck, LinkIcon } from "lucide-react"
import { getProducts } from "@/lib/db/queries"
import { AddSaleItemDialog } from "@/components/add-sale-item-dialog"
import { updateSaleStatus, generatePaymentLink } from "@/lib/db/actions"

export default async function SaleDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: sale, error } = await supabase.from("sales").select("*").eq("id", id).single()

if (error || !sale) {
    notFound()
  }

// Get sale items
  const { data: items } = await supabase
    .from("sale_items")
    .select(
      `
      *,
      products (id, name, brand, model)
    `,
    )
    .eq("sale_id", id)

// Get all products for adding items
  const products = await getProducts()

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="h-8 w-8 text-muted-foreground" />
            <h1 className="text-3xl font-bold">{sale.sale_number}</h1>
            <Badge
              variant={
                sale.payment_status === "paid" ? "default" : sale.payment_status === "pending" ? "secondary" : "outline"
              }
            >
              {sale.payment_status.toUpperCase()}
            </Badge>
          </div>
          <p className="text-muted-foreground">
            {new Date(sale.created_at).toLocaleDateString()} • {sale.sale_type}
          </p>
        </div>
        <div className="flex gap-2">
          {sale.payment_status === "pending" && (
            <>
              <form action={updateSaleStatus.bind(null, id, "paid")}>
                <Button type="submit">Mark as Paid</Button>
              </form>
              {sale.sale_type === "payment_link" && !sale.payment_link && (
                <form action={generatePaymentLink.bind(null, id)}>
                  <Button type="submit" variant="outline">
                    Generate Payment Link
                  </Button>
                </form>
              )}
            </>
          )}
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              Customer Information
            </CardTitle>
          </CardHeader>
          <CardContent>
            {sale.customer_name || sale.customer_email || sale.customer_phone ? (
              <div className="space-y-2">
                {sale.customer_name && <p className="font-medium">{sale.customer_name}</p>}
                {sale.customer_email && <p className="text-sm text-muted-foreground">{sale.customer_email}</p>}
                {sale.customer_phone && <p className="text-sm text-muted-foreground">{sale.customer_phone}</p>}
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">No customer information</p>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CreditCard className="h-5 w-5" />
              Payment Details
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Subtotal</span>
                <span className="font-medium">${sale.subtotal.toFixed(2)}</span>
              </div>
              {sale.discount_amount > 0 && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Discount</span>
                  <span className="font-medium text-red-600">-${sale.discount_amount.toFixed(2)}</span>
                </div>
              )}
              {sale.tax_amount > 0 && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Tax</span>
                  <span className="font-medium">${sale.tax_amount.toFixed(2)}</span>
                </div>
              )}
              <div className="flex items-center justify-between pt-2 border-t">
                <span className="font-semibold">Total</span>
                <span className="text-xl font-bold">${sale.total_amount.toFixed(2)}</span>
              </div>
              {sale.payment_date && (
                <p className="text-xs text-muted-foreground pt-2">
                  Paid on {new Date(sale.payment_date).toLocaleDateString()}
                </p>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{sale.payment_link && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <LinkIcon className="h-5 w-5" />
              Payment Link
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Input value={sale.payment_link} readOnly className="flex-1" />
              <Button
                variant="outline"
                onClick={() => {
                  navigator.clipboard.writeText(sale.payment_link!)
                }}
              >
                Copy
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

{sale.requires_shipping && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Truck className="h-5 w-5" />
              Shipping Status
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Badge variant={sale.shipping_status === "delivered" ? "default" : "secondary"}>
              {sale.shipping_status?.replace("_", " ").toUpperCase() || "PENDING"}
            </Badge>
          </CardContent>
        </Card>
      )}

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Package className="h-5 w-5" />
                Sale Items
              </CardTitle>
              <CardDescription>Products included in this sale</CardDescription>
            </div>
            {sale.payment_status !== "paid" && <AddSaleItemDialog saleId={id} products={products} />}
          </div>
        </CardHeader>
        <CardContent>
          {items && items.length > 0 ? (
            <div className="space-y-3">
              {items.map((item: any) => (
                <div key={item.id} className="flex items-center justify-between p-4 bg-muted rounded">
                  <div className="flex-1">
                    <p className="font-medium">{item.products?.name}</p>
                    <p className="text-sm text-muted-foreground">
                      {item.products?.brand} {item.products?.model}
                    </p>
                    {item.products?.id && (
                      <p className="text-xs text-muted-foreground font-mono mt-1">ID: {item.products.id}</p>
                    )}
                  </div>
                  <div className="text-right">
                    <p className="font-medium">
                      {item.quantity} × ${item.unit_price.toFixed(2)}
                    </p>
                    {item.discount_amount > 0 && (
                      <p className="text-sm text-red-600">-${item.discount_amount.toFixed(2)}</p>
                    )}
                    <p className="text-lg font-bold">${item.total_price.toFixed(2)}</p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground text-center py-8">No items added to this sale</p>
          )}
        </CardContent>
      </Card>

{sale.notes && (
        <Card>
          <CardHeader>
            <CardTitle>Notes</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm">{sale.notes}</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/db/actions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"
import { revalidatePath } from "next/cache"

export async function createProduct(formData: FormData) {
  const supabase = await createClient()

// Extract form data
  const name = formData.get("name") as string
  const sku = formData.get("sku") as string
  const brand = formData.get("brand") as string
  const model = formData.get("model") as string
  const condition = formData.get("condition") as string
  const sellerNotes = formData.get("seller_notes") as string
  const categoryId = formData.get("category_id") as string
  const purchasePrice = formData.get("purchase_price") as string
  const sellingPrice = formData.get("selling_price") as string
  const locationId = formData.get("location_id") as string
  const providerId = formData.get("provider_id") as string
  const specifications = formData.get("specifications") as string
  const status = (formData.get("status") as string) || "draft"

// Create product - the product ID itself is what the QR code will encode
  const { data: product, error: productError } = await supabase
    .from("products")
    .insert({
      name,
      sku: sku || null,
      brand: brand || null,
      model: model || null,
      condition: condition || null,
      seller_notes: sellerNotes || null,
      category_id: categoryId || null,
      purchase_price: purchasePrice ? Number.parseFloat(purchasePrice) : null,
      selling_price: sellingPrice ? Number.parseFloat(sellingPrice) : null,
      current_location_id: locationId || null,
      provider_id: providerId || null,
      specifications: specifications ? JSON.parse(specifications) : null,
      status,
    })
    .select(
      `
      *,
      locations (name, type),
      categories (name, path),
      providers (name, country)
    `,
    )
    .single()

if (productError) throw productError

revalidatePath("/products")
  return { success: true, data: product }
}

export async function updateProduct(productId: string, formData: FormData) {
  const supabase = await createClient()

const updates: any = {}

const fields = [
    "name",
    "sku",
    "brand",
    "model",
    "condition",
    "seller_notes",
    "category_id",
    "purchase_price",
    "selling_price",
    "current_location_id",
    "provider_id",
    "status",
  ]

fields.forEach((field) => {
    const value = formData.get(field)
    if (value !== null) {
      if (field === "purchase_price" || field === "selling_price") {
        updates[field] = value ? Number.parseFloat(value as string) : null
      } else {
        updates[field] = value || null
      }
    }
  })

const specifications = formData.get("specifications")
  if (specifications) {
    updates.specifications = JSON.parse(specifications as string)
  }

const { data, error } = await supabase.from("products").update(updates).eq("id", productId).select().single()

if (error) throw error

revalidatePath("/products")
  revalidatePath(`/products/${productId}`)
  return { success: true, data }
}

export async function deleteProduct(productId: string) {
  const supabase = await createClient()

const { error } = await supabase.from("products").delete().eq("id", productId)

if (error) throw error

revalidatePath("/products")
  return { success: true }
}

export async function generateBulkQRCodes(count: number, type: "product" | "pack" | "box" = "product") {
  const supabase = await createClient()

// Create draft products instead
  const products = Array.from({ length: count }, () => ({
    name: null,
    status: "draft",
  }))

const { data, error } = await supabase.from("products").insert(products).select()

if (error) throw error

revalidatePath("/ingresos")
  return { success: true, data }
}

export async function scanQRCode(qrCode: string) {
  const supabase = await createClient()

console.log("[v0] Scanning QR code:", qrCode)

// Log the scan activity
  await supabase.from("activity_log").insert({
    entity_type: "qr_code",
    entity_id: qrCode,
    action: "scanned",
    qr_code_scanned: qrCode,
    details: { timestamp: new Date().toISOString() },
  })

// Try to find a product with this ID (QR code encodes product ID)
  const { data: productData, error: productError } = await supabase
    .from("products")
    .select(
      `
      *,
      locations (name, type),
      categories (name, path),
      providers (name, country),
      product_images (image_url, display_order, is_primary)
    `,
    )
    .eq("id", qrCode)
    .maybeSingle()

if (productError) {
    console.error("[v0] Error fetching product:", productError)
    return { success: false, error: "Error al buscar el producto" }
  }

if (productData) {
    console.log("[v0] Product found:", productData.id)
    return { success: true, type: "product", data: productData }
  }

// Check if it's a pack
  const { data: packData, error: packError } = await supabase
    .from("product_packs")
    .select(
      `
      *
    `,
    )
    .eq("id", qrCode)
    .maybeSingle()

if (packError) {
    console.error("[v0] Error fetching pack:", packError)
    return { success: false, error: "Error al buscar el paquete" }
  }

if (packData) {
    console.log("[v0] Pack found:", packData.id)
    return { success: true, type: "pack", data: packData }
  }

console.log("[v0] QR code not found:", qrCode)
  return {
    success: false,
    error: "Producto no encontrado. Verifica que el código QR sea válido y esté registrado en el sistema.",
  }
}

export async function transferProduct(productId: string, toLocationId: string, notes?: string) {
  const supabase = await createClient()

// Get current product location
  const { data: product } = await supabase.from("products").select("current_location_id").eq("id", productId).single()

if (!product) throw new Error("Product not found")

// Create transfer record
  const { error: transferError } = await supabase.from("location_transfers").insert({
    product_id: productId,
    from_location_id: product.current_location_id,
    to_location_id: toLocationId,
    notes: notes || null,
  })

if (transferError) throw transferError

// Update product location
  const { error: updateError } = await supabase
    .from("products")
    .update({ current_location_id: toLocationId })
    .eq("id", productId)

if (updateError) throw updateError

// Log activity
  await supabase.from("activity_log").insert({
    entity_type: "product",
    entity_id: productId,
    action: "moved",
    details: {
      from_location_id: product.current_location_id,
      to_location_id: toLocationId,
      notes,
    },
  })

revalidatePath("/products")
  revalidatePath(`/products/${productId}`)
  revalidatePath("/locations")
  return { success: true }
}

export async function bulkTransferProducts(productIds: string[], toLocationId: string, notes?: string) {
  const supabase = await createClient()

for (const productId of productIds) {
    await transferProduct(productId, toLocationId, notes)
  }

revalidatePath("/products")
  revalidatePath("/locations")
  return { success: true }
}

export async function createLocation(formData: FormData) {
  const supabase = await createClient()

const name = formData.get("name") as string
  const type = formData.get("type") as string
  const address = formData.get("address") as string
  const latitude = formData.get("latitude") as string
  const longitude = formData.get("longitude") as string

const { data, error } = await supabase
    .from("locations")
    .insert({
      name,
      type,
      address: address || null,
      latitude: latitude ? Number.parseFloat(latitude) : null,
      longitude: longitude ? Number.parseFloat(longitude) : null,
      is_active: true,
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/locations")
  return { success: true, data }
}

export async function updateLocation(locationId: string, formData: FormData) {
  const supabase = await createClient()

const updates: any = {}
  const fields = ["name", "type", "address", "latitude", "longitude"]

fields.forEach((field) => {
    const value = formData.get(field)
    if (value !== null) {
      if (field === "latitude" || field === "longitude") {
        updates[field] = value ? Number.parseFloat(value as string) : null
      } else {
        updates[field] = value || null
      }
    }
  })

const { data, error } = await supabase.from("locations").update(updates).eq("id", locationId).select().single()

if (error) throw error

revalidatePath("/locations")
  revalidatePath(`/locations/${locationId}`)
  return { success: true, data }
}

export async function toggleLocationStatus(locationId: string, isActive: boolean) {
  const supabase = await createClient()

const { error } = await supabase.from("locations").update({ is_active: isActive }).eq("id", locationId)

if (error) throw error

revalidatePath("/locations")
  return { success: true }
}

export async function getLocationTransferHistory(locationId?: string, productId?: string) {
  const supabase = await createClient()

let query = supabase.from("location_transfers").select(`
      *,
      products (name, brand, model),
      from_location:locations!location_transfers_from_location_id_fkey (name, type),
      to_location:locations!location_transfers_to_location_id_fkey (name, type)
    `)

if (locationId) {
    query = query.or(`from_location_id.eq.${locationId},to_location_id.eq.${locationId}`)
  }

if (productId) {
    query = query.eq("product_id", productId)
  }

const { data, error } = await query.order("transfer_date", { ascending: false })

if (error) throw error
  return data
}

export async function createProvider(formData: FormData) {
  const supabase = await createClient()

const name = formData.get("name") as string
  const country = formData.get("country") as string
  const type = formData.get("type") as string
  const contactEmail = formData.get("contact_email") as string
  const contactPhone = formData.get("contact_phone") as string
  const notes = formData.get("notes") as string

const { data, error } = await supabase
    .from("providers")
    .insert({
      name,
      country,
      type,
      contact_email: contactEmail || null,
      contact_phone: contactPhone || null,
      notes: notes || null,
      is_active: true,
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/providers")
  return { success: true, data }
}

export async function updateProvider(providerId: string, formData: FormData) {
  const supabase = await createClient()

const updates: any = {}
  const fields = ["name", "country", "type", "contact_email", "contact_phone", "notes"]

fields.forEach((field) => {
    const value = formData.get(field)
    if (value !== null) {
      updates[field] = value || null
    }
  })

const { data, error } = await supabase.from("providers").update(updates).eq("id", providerId).select().single()

if (error) throw error

revalidatePath("/providers")
  revalidatePath(`/providers/${providerId}`)
  return { success: true, data }
}

export async function toggleProviderStatus(providerId: string, isActive: boolean) {
  const supabase = await createClient()

const { error } = await supabase.from("providers").update({ is_active: isActive }).eq("id", providerId)

if (error) throw error

revalidatePath("/providers")
  return { success: true }
}

export async function createInboundShipment(formData: FormData) {
  const supabase = await createClient()

const providerId = formData.get("provider_id") as string
  const trackingNumber = formData.get("tracking_number") as string
  const carrier = formData.get("carrier") as string
  const destinationLocationId = formData.get("destination_location_id") as string
  const expectedDeliveryDate = formData.get("expected_delivery_date") as string
  const notes = formData.get("notes") as string

const { data, error } = await supabase
    .from("inbound_shipments")
    .insert({
      provider_id: providerId,
      tracking_number: trackingNumber || null,
      carrier: carrier || null,
      destination_location_id: destinationLocationId || null,
      expected_delivery_date: expectedDeliveryDate || null,
      notes: notes || null,
      status: "pending",
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/shipments")
  return { success: true, data }
}

export async function updateInboundShipment(shipmentId: string, formData: FormData) {
  const supabase = await createClient()

const updates: any = {}
  const fields = [
    "tracking_number",
    "carrier",
    "destination_location_id",
    "expected_delivery_date",
    "actual_delivery_date",
    "notes",
    "status",
  ]

fields.forEach((field) => {
    const value = formData.get(field)
    if (value !== null) {
      updates[field] = value || null
    }
  })

const { data, error } = await supabase
    .from("inbound_shipments")
    .update(updates)
    .eq("id", shipmentId)
    .select()
    .single()

if (error) throw error

revalidatePath("/shipments")
  revalidatePath(`/shipments/${shipmentId}`)
  return { success: true, data }
}

export async function addShipmentItem(shipmentId: string, productId: string, expectedQuantity: number) {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("inbound_shipment_items")
    .insert({
      shipment_id: shipmentId,
      product_id: productId,
      expected_quantity: expectedQuantity,
      received_quantity: 0,
    })
    .select()
    .single()

if (error) throw error

revalidatePath(`/shipments/${shipmentId}`)
  return { success: true, data }
}

export async function receiveShipmentItem(itemId: string, receivedQuantity: number) {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("inbound_shipment_items")
    .update({ received_quantity: receivedQuantity })
    .eq("id", itemId)
    .select()
    .single()

if (error) throw error

revalidatePath("/shipments")
  return { success: true, data }
}

export async function markShipmentDelivered(shipmentId: string) {
  const supabase = await createClient()

const { error } = await supabase
    .from("inbound_shipments")
    .update({
      status: "delivered",
      actual_delivery_date: new Date().toISOString().split("T")[0],
    })
    .eq("id", shipmentId)

if (error) throw error

revalidatePath("/shipments")
  revalidatePath(`/shipments/${shipmentId}`)
  return { success: true }
}

export async function createSale(formData: FormData) {
  const supabase = await createClient()

const saleType = formData.get("sale_type") as string
  const customerName = formData.get("customer_name") as string
  const customerEmail = formData.get("customer_email") as string
  const customerPhone = formData.get("customer_phone") as string
  const subtotal = formData.get("subtotal") as string
  const discountAmount = formData.get("discount_amount") as string
  const taxAmount = formData.get("tax_amount") as string
  const totalAmount = formData.get("total_amount") as string
  const requiresShipping = formData.get("requires_shipping") === "true"
  const notes = formData.get("notes") as string

// Generate sale number
  const saleNumber = `SALE-${Date.now()}-${Math.random().toString(36).substring(2, 7).toUpperCase()}`

const { data, error } = await supabase
    .from("sales")
    .insert({
      sale_number: saleNumber,
      sale_type: saleType,
      customer_name: customerName || null,
      customer_email: customerEmail || null,
      customer_phone: customerPhone || null,
      subtotal: Number.parseFloat(subtotal),
      discount_amount: discountAmount ? Number.parseFloat(discountAmount) : 0,
      tax_amount: taxAmount ? Number.parseFloat(taxAmount) : 0,
      total_amount: Number.parseFloat(totalAmount),
      payment_status: saleType === "cash" ? "paid" : "pending",
      requires_shipping: requiresShipping,
      shipping_status: requiresShipping ? "pending" : null,
      notes: notes || null,
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/sales")
  return { success: true, data }
}

export async function addSaleItem(
  saleId: string,
  productId: string,
  quantity: number,
  unitPrice: number,
  discountAmount = 0,
) {
  const supabase = await createClient()

const totalPrice = quantity * unitPrice - discountAmount

const { data, error } = await supabase
    .from("sale_items")
    .insert({
      sale_id: saleId,
      product_id: productId,
      quantity,
      unit_price: unitPrice,
      discount_amount: discountAmount,
      total_price: totalPrice,
    })
    .select()
    .single()

if (error) throw error

// Update product status to sold
  await supabase.from("products").update({ status: "sold" }).eq("id", productId)

revalidatePath(`/sales/${saleId}`)
  return { success: true, data }
}

export async function updateSaleStatus(saleId: string, paymentStatus: string, shippingStatus?: string) {
  const supabase = await createClient()

const updates: any = { payment_status: paymentStatus }

if (shippingStatus) {
    updates.shipping_status = shippingStatus
  }

if (paymentStatus === "paid" && !updates.payment_date) {
    updates.payment_date = new Date().toISOString()
  }

const { error } = await supabase.from("sales").update(updates).eq("id", saleId)

if (error) throw error

revalidatePath("/sales")
  revalidatePath(`/sales/${saleId}`)
  return { success: true }
}

export async function generatePaymentLink(saleId: string) {
  // In a real implementation, this would integrate with a payment provider
  // For now, we'll generate a mock payment link
  const supabase = await createClient()

const paymentLink = `https://pay.example.com/sale/${saleId}`

const { error } = await supabase.from("sales").update({ payment_link: paymentLink }).eq("id", saleId)

if (error) throw error

revalidatePath(`/sales/${saleId}`)
  return { success: true, paymentLink }
}

export async function createShippingLabel(formData: FormData) {
  const supabase = await createClient()

const saleId = formData.get("sale_id") as string
  const productId = formData.get("product_id") as string
  const trackingNumber = formData.get("tracking_number") as string
  const carrier = formData.get("carrier") as string
  const serviceType = formData.get("service_type") as string
  const weight = formData.get("weight") as string
  const fromAddress = formData.get("from_address") as string
  const toAddress = formData.get("to_address") as string

const { data, error } = await supabase
    .from("shipping_labels")
    .insert({
      sale_id: saleId || null,
      product_id: productId || null,
      tracking_number: trackingNumber || null,
      carrier: carrier || null,
      service_type: serviceType || null,
      weight: weight ? Number.parseFloat(weight) : null,
      from_address: fromAddress ? JSON.parse(fromAddress) : null,
      to_address: toAddress ? JSON.parse(toAddress) : null,
      status: "created",
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/shipping-labels")
  return { success: true, data }
}

export async function updateShippingLabel(labelId: string, formData: FormData) {
  const supabase = await createClient()

const updates: any = {}
  const fields = [
    "tracking_number",
    "carrier",
    "service_type",
    "weight",
    "shipping_cost",
    "status",
    "from_address",
    "to_address",
  ]

fields.forEach((field) => {
    const value = formData.get(field)
    if (value !== null) {
      if (field === "weight" || field === "shipping_cost") {
        updates[field] = value ? Number.parseFloat(value as string) : null
      } else if (field === "from_address" || field === "to_address") {
        updates[field] = value ? JSON.parse(value as string) : null
      } else {
        updates[field] = value || null
      }
    }
  })

const { data, error } = await supabase.from("shipping_labels").update(updates).eq("id", labelId).select().single()

if (error) throw error

revalidatePath("/shipments")
  revalidatePath(`/shipments/${labelId}`)
  return { success: true, data }
}

export async function getShippingLabelHistory(productId?: string, saleId?: string) {
  const supabase = await createClient()

let query = supabase.from("shipping_labels").select(`
      *,
      products (name, brand, model),
      sales (sale_number, customer_name, customer_email)
    `)

if (productId) {
    query = query.eq("product_id", productId)
  }

if (saleId) {
    query = query.eq("sale_id", saleId)
  }

const { data, error } = await query.order("created_at", { ascending: false })

if (error) throw error
  return data
}

export async function updateCategorySchema(categoryId: string, fieldSchema: any) {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("categories")
    .update({ field_schema: fieldSchema })
    .eq("id", categoryId)
    .select()
    .single()

if (error) throw error

revalidatePath("/categories")
  revalidatePath(`/categories/${categoryId}/edit`)
  return { success: true, data }
}

export async function updateCategory(formData: FormData) {
  const supabase = await createClient()

const categoryId = formData.get("id") as string
  const name = formData.get("name") as string
  const parentId = formData.get("parent_id") as string | null
  const fieldSchemaStr = formData.get("field_schema") as string

const updates: any = {}

if (name) {
    updates.name = name
  }

if (parentId !== undefined) {
    updates.parent_id = parentId || null
  }

if (fieldSchemaStr) {
    updates.field_schema = JSON.parse(fieldSchemaStr)
  }

const { data, error } = await supabase.from("categories").update(updates).eq("id", categoryId).select().single()

if (error) throw error

revalidatePath("/categories")
  return { success: true, data }
}

export async function createCategory(formData: FormData) {
  const supabase = await createClient()

const name = formData.get("name") as string
  const pathInput = formData.get("path") as string
  const fieldSchemaStr = formData.get("field_schema") as string
  const fieldSchema = fieldSchemaStr ? JSON.parse(fieldSchemaStr) : null

// Parse the path segments (e.g., "Electronica / Accesorios" -> ["Electronica", "Accesorios"])
  const pathSegments = pathInput
    ? pathInput
        .split("/")
        .map((s) => s.trim())
        .filter(Boolean)
    : []

let currentParentId: string | null = null
  let currentPath = ""

// Create or find each parent category in the hierarchy
  for (const segment of pathSegments) {
    currentPath = currentPath ? `${currentPath}/${segment}` : segment

// Check if this category already exists
    const { data: existing } = await supabase
      .from("categories")
      .select("id, parent_id")
      .eq("name", segment)
      .eq("path", currentPath)
      .maybeSingle()

if (existing) {
      // Category exists, use it as parent for next level
      currentParentId = existing.id
    } else {
      // Create the parent category
      const { data: newParent, error: parentError } = await supabase
        .from("categories")
        .insert({
          name: segment,
          parent_id: currentParentId,
          path: currentPath,
          field_schema: null, // Parent categories don't have schemas
        })
        .select("id")
        .single()

if (parentError) throw parentError
      currentParentId = newParent.id
    }
  }

const finalPath = currentPath ? `${currentPath}/${name}` : name

// Check if this exact category already exists
  const { data: existingFinal } = await supabase
    .from("categories")
    .select("id")
    .eq("name", name)
    .eq("path", finalPath)
    .maybeSingle()

if (existingFinal) {
    // Category already exists, just update the schema if provided
    if (fieldSchema) {
      const { data, error } = await supabase
        .from("categories")
        .update({ field_schema: fieldSchema })
        .eq("id", existingFinal.id)
        .select()
        .single()

if (error) throw error
      revalidatePath("/categories")
      return { success: true, data }
    }
    revalidatePath("/categories")
    return { success: true, data: existingFinal }
  }

// Create the final category
  const { data, error } = await supabase
    .from("categories")
    .insert({
      name,
      parent_id: currentParentId,
      path: finalPath,
      field_schema: fieldSchema,
    })
    .select()
    .single()

if (error) throw error

revalidatePath("/categories")
  return { success: true, data }
}

export async function createBulkDraftProducts(
  count: number,
  prefix?: string,
  locationId?: string,
  providerId?: string,
) {
  const supabase = await createClient()

const products = Array.from({ length: count }, () => ({
    name: prefix || null,
    status: "draft",
    current_location_id: locationId || null,
    provider_id: providerId || null,
  }))

const { data, error } = await supabase.from("products").insert(products).select()

if (error) throw error

revalidatePath("/ingresos")
  revalidatePath("/products")
  return { success: true, data }
}

export async function updateCategoryParent(categoryId: string, parentId: string | null) {
  const supabase = await createClient()

// Get the category to update its path
  const { data: category, error: fetchError } = await supabase
    .from("categories")
    .select("name, parent_id")
    .eq("id", categoryId)
    .single()

if (fetchError) throw fetchError

// Get the new parent's path if it exists
  let newPath = category.name
  if (parentId) {
    const { data: parent, error: parentError } = await supabase
      .from("categories")
      .select("path")
      .eq("id", parentId)
      .single()

if (parentError) throw parentError
    newPath = `${parent.path}/${category.name}`
  }

// Update the category with new parent and path
  const { data, error } = await supabase
    .from("categories")
    .update({
      parent_id: parentId,
      path: newPath,
    })
    .eq("id", categoryId)
    .select()
    .single()

if (error) throw error

// Update all child categories' paths recursively
  await updateChildPaths(categoryId, newPath)

revalidatePath("/categories")
  return { success: true, data }
}

async function updateChildPaths(parentId: string, parentPath: string) {
  const supabase = await createClient()

const { data: children, error } = await supabase.from("categories").select("id, name").eq("parent_id", parentId)

if (error) throw error
  if (!children || children.length === 0) return

for (const child of children) {
    const newChildPath = `${parentPath}/${child.name}`

await supabase.from("categories").update({ path: newChildPath }).eq("id", child.id)

// Recursively update this child's children
    await updateChildPaths(child.id, newChildPath)
  }
}

export async function getProviderTransferHistory(providerId: string) {
  const supabase = await createClient()

// Get all products from this provider
  const { data: products, error: productsError } = await supabase
    .from("products")
    .select("id, name, brand, model, created_at, status")
    .eq("provider_id", providerId)
    .order("created_at", { ascending: false })

if (productsError) throw productsError

// Get all shipments from this provider
  const { data: shipments, error: shipmentsError } = await supabase
    .from("inbound_shipments")
    .select(
      `
      *,
      destination_location:locations!inbound_shipments_destination_location_id_fkey (name, type)
    `,
    )
    .eq("provider_id", providerId)
    .order("created_at", { ascending: false })

if (shipmentsError) throw shipmentsError

return {
    products: products || [],
    shipments: shipments || [],
  }
}
[V0_FILE]typescript:file="components/create-shipping-label-modal.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { scanQRCode } from "@/lib/db/actions"
import { cn } from "@/lib/utils"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { MapboxAddressInput } from "@/components/mapbox-address-input"
import { Plus, Loader2, X, Scan, AlertCircle } from "lucide-react"
import { QRScannerCamera } from "@/components/qr-scanner-camera"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel"

interface ScannedProduct {
  id: string
  name: string
  brand: string
  model: string
  sku: string
  current_location_id: string | null // Changed from location_id to current_location_id
  status?: string
  locations?: {
    id: string
    name: string
    address: string
  }
}

interface FormDraft {
  scannedProducts: ScannedProduct[]
  customerName: string
  customerEmail: string
  customerPhone: string
  customerDNI: string
  destinationAddress: string
  destinationCoords: { lat: number; lng: number } | null
  carrier: string
  serviceType: string
  trackingNumber: string
  weight: string
  boxLength: string
  boxWidth: string
  boxHeight: string
  shippingCost: string
}

export function CreateShippingLabelModal() {
  const [open, setOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [isScanning, setIsScanning] = useState(false)
  const [scannedProducts, setScannedProducts] = useState<ScannedProduct[]>([])
  const [locationGroups, setLocationGroups] = useState<Map<string, ScannedProduct[]>>(new Map())
  const [qrInput, setQrInput] = useState("")
  const [scanError, setScanError] = useState<string>("")

const [productSuggestions, setProductSuggestions] = useState<ScannedProduct[]>([])
  const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false)
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1)
  const [customerName, setCustomerName] = useState("")
  const [customerEmail, setCustomerEmail] = useState("")
  const [customerPhone, setCustomerPhone] = useState("")
  const [customerDNI, setCustomerDNI] = useState("")
  const [destinationAddress, setDestinationAddress] = useState("")
  const [destinationCoords, setDestinationCoords] = useState<{ lat: number; lng: number } | null>(null)
  const [carrier, setCarrier] = useState("")
  const [serviceType, setServiceType] = useState("")
  const [trackingNumber, setTrackingNumber] = useState("")
  const [weight, setWeight] = useState("")
  const [boxLength, setBoxLength] = useState("")
  const [boxWidth, setBoxWidth] = useState("")
  const [boxHeight, setBoxHeight] = useState("")
  const [shippingCost, setShippingCost] = useState("")
  const [calculatedCost, setCalculatedCost] = useState<number | null>(null)

const debounceTimerRef = useRef<NodeJS.Timeout>()
  const suggestionsRef = useRef<HTMLDivElement>(null)

const router = useRouter()
  const { toast } = useToast()
  const supabase = createClient()
  const qrInputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    const savedDraft = localStorage.getItem("shipping-label-draft")
    if (savedDraft) {
      try {
        const draft: FormDraft = JSON.parse(savedDraft)
        setScannedProducts(draft.scannedProducts)
        setCustomerName(draft.customerName)
        setCustomerEmail(draft.customerEmail)
        setCustomerPhone(draft.customerPhone)
        setCustomerDNI(draft.customerDNI)
        setDestinationAddress(draft.destinationAddress)
        setDestinationCoords(draft.destinationCoords)
        setCarrier(draft.carrier)
        setServiceType(draft.serviceType)
        setTrackingNumber(draft.trackingNumber)
        setWeight(draft.weight)
        setBoxLength(draft.boxLength)
        setBoxWidth(draft.boxWidth)
        setBoxHeight(draft.boxHeight)
        setShippingCost(draft.shippingCost)
      } catch (error) {
        console.error("[v0] Error loading draft:", error)
      }
    }
  }, [])

useEffect(() => {
    if (!open && (scannedProducts.length > 0 || customerName || customerEmail)) {
      const draft: FormDraft = {
        scannedProducts,
        customerName,
        customerEmail,
        customerPhone,
        customerDNI,
        destinationAddress,
        destinationCoords,
        carrier,
        serviceType,
        trackingNumber,
        weight,
        boxLength,
        boxWidth,
        boxHeight,
        shippingCost,
      }
      localStorage.setItem("shipping-label-draft", JSON.stringify(draft))
    }
  }, [
    open,
    scannedProducts,
    customerName,
    customerEmail,
    customerPhone,
    customerDNI,
    destinationAddress,
    destinationCoords,
    carrier,
    serviceType,
    trackingNumber,
    weight,
    boxLength,
    boxWidth,
    boxHeight,
    shippingCost,
  ])

useEffect(() => {
    const groups = new Map<string, ScannedProduct[]>()
    scannedProducts.forEach((product) => {
      const locationKey = product.current_location_id || "sin_ubicacion" // Changed from location_id to current_location_id
      if (!groups.has(locationKey)) {
        groups.set(locationKey, [])
      }
      groups.get(locationKey)?.push(product)
    })
    setLocationGroups(groups)
  }, [scannedProducts])

useEffect(() => {
    if (open) {
      setTimeout(() => qrInputRef.current?.focus(), 100)
    }
  }, [open])

useEffect(() => {
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current)
    }

if (!qrInput || qrInput.length < 2) {
      setProductSuggestions([])
      setShowSuggestions(false)
      setScanError("")
      return
    }

debounceTimerRef.current = setTimeout(async () => {
      setIsLoadingSuggestions(true)
      setScanError("")
      try {
        const { data, error } = await supabase
          .from("products")
          .select(
            `
            id,
            name,
            brand,
            model,
            sku,
            current_location_id,
            status,
            locations (
              id,
              name,
              address
            )
          `,
          )
          .or(`name.ilike.%${qrInput}%,brand.ilike.%${qrInput}%,model.ilike.%${qrInput}%,sku.ilike.%${qrInput}%`)
          .in("status", ["in_stock", "available"])
          .limit(10)

if (error) {
          console.error("[v0] Error fetching product suggestions:", error)
          setProductSuggestions([])
        } else {
          setProductSuggestions(data || [])
          setShowSuggestions(true)
        }
      } catch (error) {
        console.error("[v0] Error searching products:", error)
        setProductSuggestions([])
      } finally {
        setIsLoadingSuggestions(false)
      }
    }, 500)

return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current)
      }
    }
  }, [qrInput, supabase])

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        suggestionsRef.current &&
        !suggestionsRef.current.contains(event.target as Node) &&
        qrInputRef.current &&
        !qrInputRef.current.contains(event.target as Node)
      ) {
        setShowSuggestions(false)
        setSelectedSuggestionIndex(-1)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

const handleScanQR = async (code: string) => {
    if (!code.trim()) {
      setScanError("Código QR inválido")
      return
    }

setIsScanning(true)
    setScanError("")

try {
      console.log("[v0] Attempting to scan QR code:", code.trim())
      const result = await scanQRCode(code.trim())
      console.log("[v0] Scan result:", result)

if (!result.success || result.type !== "product") {
        setScanError(result.error || "El código escaneado no corresponde a un producto válido")
        setIsScanning(false)
        return
      }

const product = result.data as ScannedProduct

if (scannedProducts.some((p) => p.id === product.id)) {
        setScanError("Este producto ya está en la lista")
        setIsScanning(false)
        return
      }

if (product.status !== "in_stock" && product.status !== "available") {
        setScanError(`Producto no disponible. Estado: ${product.status}`)
        setIsScanning(false)
        return
      }

setScannedProducts((prev) => [...prev, product])
      setQrInput("")
      setShowSuggestions(false)
      setProductSuggestions([])
      setScanError("")
      qrInputRef.current?.focus()

toast({
        title: "Producto agregado",
        description: `${product.brand} ${product.model}`,
      })
    } catch (error) {
      console.error("[v0] Error scanning QR:", error)
      setScanError("No se pudo escanear el código QR. Intenta nuevamente.")
    } finally {
      setIsScanning(false)
    }
  }

const handleSelectProduct = async (product: ScannedProduct) => {
    if (scannedProducts.some((p) => p.id === product.id)) {
      setScanError("Este producto ya está en la lista")
      setShowSuggestions(false)
      setQrInput("")
      return
    }

setScannedProducts((prev) => [...prev, product])
    setQrInput("")
    setShowSuggestions(false)
    setProductSuggestions([])
    setSelectedSuggestionIndex(-1)
    setScanError("")
    qrInputRef.current?.focus()

toast({
      title: "Producto agregado",
      description: `${product.brand} ${product.model}`,
    })
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault()
      if (showSuggestions && selectedSuggestionIndex >= 0 && selectedSuggestionIndex < productSuggestions.length) {
        handleSelectProduct(productSuggestions[selectedSuggestionIndex])
      } else {
        handleScanQR(qrInput)
      }
      return
    }

if (!showSuggestions || productSuggestions.length === 0) return

switch (e.key) {
      case "ArrowDown":
        e.preventDefault()
        setSelectedSuggestionIndex((prev) => (prev < productSuggestions.length - 1 ? prev + 1 : prev))
        break
      case "ArrowUp":
        e.preventDefault()
        setSelectedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : -1))
        break
      case "Escape":
        setShowSuggestions(false)
        setSelectedSuggestionIndex(-1)
        break
    }
  }

const removeProduct = (productId: string) => {
    setScannedProducts((prev) => prev.filter((p) => p.id !== productId))
  }

const isAPICarrier = carrier && carrier !== "nosotros"

useEffect(() => {
    if (isAPICarrier && weight && boxLength && boxWidth && boxHeight && destinationAddress) {
      const volume = Number.parseFloat(boxLength) * Number.parseFloat(boxWidth) * Number.parseFloat(boxHeight)
      const weightNum = Number.parseFloat(weight)
      const estimatedCost = (volume / 5000 + weightNum * 2) * 10
      setCalculatedCost(estimatedCost)
    } else {
      setCalculatedCost(null)
    }
  }, [isAPICarrier, weight, boxLength, boxWidth, boxHeight, destinationAddress])

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

if (scannedProducts.length === 0) {
      toast({
        title: "Error",
        description: "Escanea al menos un producto",
        variant: "destructive",
      })
      return
    }

if (!destinationAddress) {
      toast({
        title: "Error",
        description: "Ingresa una dirección de destino",
        variant: "destructive",
      })
      return
    }

if (!customerName || !customerEmail || !customerPhone || !customerDNI) {
      toast({
        title: "Error",
        description: "Completa toda la información del cliente",
        variant: "destructive",
      })
      return
    }

if (!carrier) {
      toast({
        title: "Error",
        description: "Selecciona un carrier",
        variant: "destructive",
      })
      return
    }

if (!weight || !boxLength || !boxWidth || !boxHeight) {
      toast({
        title: "Error",
        description: "Completa las dimensiones y peso del paquete",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      const toAddress = {
        name: customerName,
        email: customerEmail,
        phone: customerPhone,
        dni: customerDNI,
        address: destinationAddress,
        coordinates: destinationCoords,
      }

let totalLabelsCreated = 0

if (locationGroups.size > 1) {
        toast({
          title: "Múltiples ubicaciones",
          description: `Los productos están en ${locationGroups.size} ubicaciones diferentes. Se crearán etiquetas de envío separadas para cada ubicación.`,
        })
      }

for (const [locationId, products] of locationGroups.entries()) {
        if (locationId === "sin_ubicacion") {
          toast({
            title: "Advertencia",
            description: "Algunos productos no tienen ubicación asignada",
            variant: "destructive",
          })
          continue
        }

const location = products[0].locations

const fromAddress = {
          name: location?.name || "",
          address: location?.address || "",
        }

const shippingData = {
          tracking_number: trackingNumber || (isAPICarrier ? null : `TRK${Date.now()}`),
          carrier: carrier,
          service_type: serviceType || null,
          weight: weight ? Number.parseFloat(weight) : null,
          dimensions:
            boxLength && boxWidth && boxHeight
              ? {
                  length: Number.parseFloat(boxLength),
                  width: Number.parseFloat(boxWidth),
                  height: Number.parseFloat(boxHeight),
                }
              : null,
          shipping_cost: isAPICarrier ? calculatedCost : null,
          currency: "USD",
          status: "created",
          from_address: fromAddress,
          to_address: toAddress,
        }

for (const product of products) {
          const { error } = await supabase.from("shipping_labels").insert({
            product_id: product.id,
            ...shippingData,
          })

if (error) throw error

await supabase.from("products").update({ status: "shipped" }).eq("id", product.id)

totalLabelsCreated++
        }
      }

toast({
        title: "Envíos creados",
        description: `Se crearon ${totalLabelsCreated} etiqueta(s) de envío`,
      })

localStorage.removeItem("shipping-label-draft")
      setOpen(false)
      resetForm()
      router.refresh()
    } catch (error) {
      console.error("[v0] Error creating shipping labels:", error)
      toast({
        title: "Error",
        description: "No se pudo crear el envío",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const resetForm = () => {
    setScannedProducts([])
    setCustomerName("")
    setCustomerEmail("")
    setCustomerPhone("")
    setCustomerDNI("")
    setDestinationAddress("")
    setDestinationCoords(null)
    setCarrier("")
    setServiceType("")
    setTrackingNumber("")
    setWeight("")
    setBoxLength("")
    setBoxWidth("")
    setBoxHeight("")
    setShippingCost("")
    setCalculatedCost(null)
    setQrInput("")
    setShowSuggestions(false)
    setProductSuggestions([])
    setSelectedSuggestionIndex(-1)
    setScanError("")
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" className="h-10 aspect-square">
          <Plus className="h-4 w-4" />
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Crear Envío</DialogTitle>
          <DialogDescription>Escanea productos y crea etiquetas de envío al cliente final</DialogDescription>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-3">
            <Label>Escanear Productos</Label>

<div className="relative">
              <div className="flex gap-2">
                <div className="relative flex-1">
                  <Input
                    ref={qrInputRef}
                    value={qrInput}
                    onChange={(e) => setQrInput(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Escanea, busca por nombre, marca, modelo o ID"
                    disabled={isScanning}
                  />
                  {isLoadingSuggestions && (
                    <div className="absolute right-3 top-1/2 -translate-y-1/2">
                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                    </div>
                  )}
                </div>
                <QRScannerCamera
                  onScan={handleScanQR}
                  trigger={
                    <Button type="button" variant="ghost" size="icon" disabled={isScanning}>
                      {isScanning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Scan className="h-4 w-4" />}
                    </Button>
                  }
                />
              </div>

{scanError && (
                <div className="mt-2 flex items-center gap-2 text-sm text-destructive">
                  <AlertCircle className="h-4 w-4" />
                  <span>{scanError}</span>
                </div>
              )}

{showSuggestions && productSuggestions.length > 0 && (
                <div
                  ref={suggestionsRef}
                  className="absolute z-50 w-full mt-1 bg-background border rounded-md shadow-lg max-h-60 overflow-auto"
                >
                  {productSuggestions.map((product, index) => (
                    <button
                      key={product.id}
                      type="button"
                      onClick={() => handleSelectProduct(product)}
                      className={cn(
                        "w-full text-left px-3 py-2 hover:bg-accent transition-colors border-b last:border-b-0",
                        selectedSuggestionIndex === index && "bg-accent",
                      )}
                    >
                      <div className="text-sm font-medium">
                        {product.brand} {product.model}
                      </div>
                      <div className="text-xs text-muted-foreground">{product.name}</div>
                      <div className="text-xs text-muted-foreground font-mono mt-0.5">ID: {product.id}</div>
                    </button>
                  ))}
                </div>
              )}

{showSuggestions && productSuggestions.length === 0 && !isLoadingSuggestions && qrInput.length >= 2 && (
                <div className="absolute z-50 w-full mt-1 bg-background border rounded-md shadow-lg p-4 text-sm text-muted-foreground text-center">
                  No se encontraron productos disponibles
                </div>
              )}
            </div>

{scannedProducts.length > 0 && (
              <div className="border rounded-lg p-4 bg-muted/30">
                <Carousel
                  opts={{
                    align: "start",
                    loop: false,
                    dragFree: true,
                  }}
                  className="w-full"
                >
                  <CarouselContent className="-ml-2">
                    {scannedProducts.map((product) => (
                      <CarouselItem key={product.id} className="pl-2 basis-1/2 md:basis-1/3 lg:basis-1/4 min-w-[180px]">
                        <div className="relative p-3 bg-background rounded-lg border h-full flex flex-col justify-between gap-2">
                          <div className="flex-1">
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="absolute top-1 right-1 h-6 w-6"
                              onClick={() => removeProduct(product.id)}
                            >
                              <X className="h-3 w-3" />
                            </Button>
                            <div className="text-sm font-medium pr-6 mb-1 truncate">
                              {product.brand} {product.model}
                            </div>
                            <div className="text-xs font-mono text-muted-foreground break-all">
                              ...{product.id.slice(-8)}
                            </div>
                          </div>
                          {product.locations && (
                            <Badge variant="outline" className="text-xs w-fit max-w-full truncate">
                              {product.locations.name}
                            </Badge>
                          )}
                        </div>
                      </CarouselItem>
                    ))}
                  </CarouselContent>
                </Carousel>
              </div>
            )}

{locationGroups.size > 1 && (
              <Alert>
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>
                  Los productos están en {locationGroups.size} ubicaciones diferentes. Se crearán etiquetas de envío
                  separadas para cada ubicación.
                </AlertDescription>
              </Alert>
            )}
          </div>

<div className="space-y-3">
            <Label>Información del Cliente *</Label>
            <div className="grid grid-cols-3 gap-3">
              <Input
                value={customerName}
                onChange={(e) => setCustomerName(e.target.value)}
                placeholder="Nombre completo"
                required
              />
              <Input
                type="email"
                value={customerEmail}
                onChange={(e) => setCustomerEmail(e.target.value)}
                placeholder="Email"
                required
              />
              <Input
                value={customerDNI}
                onChange={(e) => setCustomerDNI(e.target.value)}
                placeholder="DNI / Identificación"
                required
              />
            </div>
            <div className="grid grid-cols-3 gap-3">
              <Input
                value={customerPhone}
                onChange={(e) => setCustomerPhone(e.target.value)}
                placeholder="Teléfono"
                required
              />
              <div className="col-span-2">
                <MapboxAddressInput
                  value={destinationAddress}
                  onChange={(address, coords) => {
                    setDestinationAddress(address)
                    setDestinationCoords(coords)
                  }}
                  placeholder="Dirección de destino"
                  required
                  showLabel={false}
                />
              </div>
            </div>
          </div>

<div className="space-y-3">
            <Label>Detalles de Envío *</Label>
            <div className="grid grid-cols-2 gap-3">
              <Select value={carrier} onValueChange={setCarrier} required>
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="Carrier *" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="nosotros">Nosotros</SelectItem>
                  <SelectItem value="mercadoenvios">Mercadoenvíos</SelectItem>
                  <SelectItem value="andreani">Andreani</SelectItem>
                  <SelectItem value="correo_argentino">Correo Argentino</SelectItem>
                  <SelectItem value="oca">OCA</SelectItem>
                  <SelectItem value="ups">UPS</SelectItem>
                  <SelectItem value="fedex">FedEx</SelectItem>
                  <SelectItem value="dhl">DHL</SelectItem>
                </SelectContent>
              </Select>

<Select value={serviceType} onValueChange={setServiceType}>
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="Servicio" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="standard">Standard</SelectItem>
                  <SelectItem value="express">Express</SelectItem>
                  <SelectItem value="priority">Priority</SelectItem>
                  <SelectItem value="overnight">Overnight</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-4 gap-3">
              <Input
                type="number"
                step="0.01"
                value={boxLength}
                onChange={(e) => setBoxLength(e.target.value)}
                placeholder="Largo (cm) *"
                required
              />
              <Input
                type="number"
                step="0.01"
                value={boxWidth}
                onChange={(e) => setBoxWidth(e.target.value)}
                placeholder="Ancho (cm) *"
                required
              />
              <Input
                type="number"
                step="0.01"
                value={boxHeight}
                onChange={(e) => setBoxHeight(e.target.value)}
                placeholder="Alto (cm) *"
                required
              />
              <Input
                type="number"
                step="0.01"
                value={weight}
                onChange={(e) => setWeight(e.target.value)}
                placeholder="Peso (kg) *"
                required
              />
            </div>

{carrier === "nosotros" && (
              <Input
                value={trackingNumber}
                onChange={(e) => setTrackingNumber(e.target.value)}
                placeholder="Número de tracking"
                className="font-mono w-full"
              />
            )}

{isAPICarrier && calculatedCost !== null && (
              <div className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30">
                <span className="text-sm text-muted-foreground">Costo estimado:</span>
                <span className="text-lg font-semibold">${calculatedCost.toFixed(2)} USD</span>
              </div>
            )}

{isAPICarrier && (
              <Alert>
                <AlertCircle className="h-4 w-4" />
                <AlertDescription className="text-xs">
                  El costo y tracking se generarán automáticamente usando la API de {carrier}. La integración estará
                  disponible próximamente.
                </AlertDescription>
              </Alert>
            )}
          </div>

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The "setAll" method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/qr-code.ts" isMerged="true"
import QRCode from "qrcode"

export async function generateQRCode(data: string): Promise<string> {
  try {
    // Generate QR code as data URL
    const qrCodeDataUrl = await QRCode.toDataURL(data, {
      width: 300,
      margin: 2,
      color: {
        dark: "#000000",
        light: "#FFFFFF",
      },
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error("[v0] Error generating QR code:", error)
    throw error
  }
}

export function generateQRCodeId(): string {
  // Generate a unique QR code ID
  return `QR-${Date.now()}-${Math.random().toString(36).substring(2, 9).toUpperCase()}`
}
[V0_FILE]typescript:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider } from "@/components/ui/sidebar"
import { Suspense } from "react"

export const metadata: Metadata = {
  title: "Store Inventory Dashboard",
  description: "QR-code driven inventory management system",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={<div>Loading...</div>}>
          <SidebarProvider>
            <AppSidebar />
            <main className="flex-1 w-full p-6 md:p-10">{children}</main>
          </SidebarProvider>
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="components/location-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { MapboxAddressInput } from "@/components/mapbox-address-input"
import { createLocation, updateLocation } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Location } from "@/lib/types/database"

interface LocationFormProps {
  location?: Location
}

export function LocationForm({ location }: LocationFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [coordinates, setCoordinates] = useState<{ latitude: number; longitude: number } | null>(
    location?.latitude && location?.longitude ? { latitude: location.latitude, longitude: location.longitude } : null,
  )
  const router = useRouter()

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

try {
      const formData = new FormData(e.currentTarget)

if (coordinates) {
        formData.set("latitude", coordinates.latitude.toString())
        formData.set("longitude", coordinates.longitude.toString())
      }

if (location) {
        await updateLocation(location.id, formData)
      } else {
        await createLocation(formData)
      }

router.push("/locations")
      router.refresh()
    } catch (err) {
      setError("Failed to save location")
      console.error("[v0] Location form error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{location ? "Edit Location" : "Create New Location"}</CardTitle>
        <CardDescription>
          {location ? "Update location information" : "Add a new warehouse, store, or house location"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="name">Location Name *</Label>
            <Input id="name" name="name" defaultValue={location?.name} required placeholder="e.g., Main Warehouse" />
          </div>

<div className="space-y-2">
            <Label htmlFor="type">Location Type *</Label>
            <Select name="type" defaultValue={location?.type || "warehouse"} required>
              <SelectTrigger>
                <SelectValue placeholder="Select type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="warehouse">Warehouse</SelectItem>
                <SelectItem value="store">Store</SelectItem>
                <SelectItem value="house">House</SelectItem>
              </SelectContent>
            </Select>
          </div>

<MapboxAddressInput
            value={location?.address || ""}
            onChange={(address, coords) => {
              if (coords) {
                setCoordinates(coords)
              }
            }}
            label="Address"
            placeholder="Start typing an address..."
            required={false}
          />

{coordinates && (
            <div className="text-xs text-muted-foreground">
              Coordinates: {coordinates.latitude.toFixed(6)}, {coordinates.longitude.toFixed(6)}
            </div>
          )}

{error && <p className="text-sm text-destructive">{error}</p>}

<div className="flex gap-2">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Saving..." : location ? "Update Location" : "Create Location"}
            </Button>
            <Button type="button" variant="outline" onClick={() => router.back()}>
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/provider-form.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { createProvider, updateProvider } from "@/lib/db/actions"
import { useRouter } from "next/navigation"
import type { Provider } from "@/lib/types/database"

interface ProviderFormProps {
  provider?: Provider
}

export function ProviderForm({ provider }: ProviderFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

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

try {
      const formData = new FormData(e.currentTarget)

if (provider) {
        await updateProvider(provider.id, formData)
      } else {
        await createProvider(formData)
      }

router.push("/providers")
      router.refresh()
    } catch (err) {
      setError("Failed to save provider")
      console.error("[v0] Provider form error:", err)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{provider ? "Edit Provider" : "Create New Provider"}</CardTitle>
        <CardDescription>
          {provider ? "Update provider information" : "Add a new supplier or distributor"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="name">Provider Name *</Label>
            <Input
              id="name"
              name="name"
              defaultValue={provider?.name}
              required
              placeholder="e.g., US Direct Supplier"
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="country">Country *</Label>
              <Input id="country" name="country" defaultValue={provider?.country} required placeholder="e.g., US" />
            </div>

<div className="space-y-2">
              <Label htmlFor="type">Provider Type *</Label>
              <Select name="type" defaultValue={provider?.type || "direct"} required>
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="direct">Direct</SelectItem>
                  <SelectItem value="distributor">Distributor</SelectItem>
                  <SelectItem value="sub_distributor">Sub-Distributor</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="contact_email">Contact Email</Label>
              <Input
                id="contact_email"
                name="contact_email"
                type="email"
                defaultValue={provider?.contact_email || ""}
                placeholder="contact@provider.com"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="contact_phone">Contact Phone</Label>
              <Input
                id="contact_phone"
                name="contact_phone"
                type="tel"
                defaultValue={provider?.contact_phone || ""}
                placeholder="+1 (555) 123-4567"
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              name="notes"
              defaultValue={provider?.notes || ""}
              placeholder="Additional information about this provider..."
              rows={3}
            />
          </div>