[V0_FILE]markdown:file="README.md" isMerged="true" # POS and Accounting App *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/daroblesr-7933s-projects/valva_boutique_pos) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/h6VQKmi61Lz) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/daroblesr-7933s-projects/valva_boutique_pos](https://vercel.com/daroblesr-7933s-projects/valva_boutique_pos)** ## Build your app Continue building your app on: **[https://v0.app/chat/h6VQKmi61Lz](https://v0.app/chat/h6VQKmi61Lz)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/caja/page.tsx" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { CajaContent } from "@/components/caja-content" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function CajaPage() { return ( ) } [V0_FILE]typescriptreact:file="app/clientes/page.tsx" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { ClientesContent } from "@/components/clientes-content" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function ClientesPage() { return ( ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Valva gold and white luxury theme */ --background: oklch(0.99 0.01 85); --foreground: oklch(0.25 0.02 85); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 85); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 85); --primary: oklch(0.65 0.15 85); --primary-foreground: oklch(0.99 0.01 85); --secondary: oklch(0.96 0.01 85); --secondary-foreground: oklch(0.35 0.02 85); --muted: oklch(0.96 0.01 85); --muted-foreground: oklch(0.55 0.02 85); --accent: oklch(0.75 0.12 85); --accent-foreground: oklch(0.99 0.01 85); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0.01 85); --border: oklch(0.9 0.02 85); --input: oklch(0.95 0.01 85); --ring: oklch(0.65 0.15 85); --chart-1: oklch(0.65 0.15 85); --chart-2: oklch(0.75 0.12 85); --chart-3: oklch(0.55 0.1 85); --chart-4: oklch(0.85 0.08 85); --chart-5: oklch(0.45 0.08 85); --radius: 0.5rem; --sidebar: oklch(0.25 0.02 85); --sidebar-foreground: oklch(0.99 0.01 85); --sidebar-primary: oklch(0.65 0.15 85); --sidebar-primary-foreground: oklch(0.99 0.01 85); --sidebar-accent: oklch(0.35 0.03 85); --sidebar-accent-foreground: oklch(0.99 0.01 85); --sidebar-border: oklch(0.35 0.03 85); --sidebar-ring: oklch(0.65 0.15 85); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --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; } } [V0_FILE]typescriptreact:file="app/inventario/descuentos/page.tsx" isMerged="true" import { DescuentosContent } from "@/components/descuentos-content" export default function DescuentosPage() { return } [V0_FILE]typescriptreact:file="app/inventario/productos/page.tsx" isEdit="true" isMerged="true" import { ProductosContent } from "@/components/productos-content" export default function ProductosPage() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Valva - Sistema POS", description: "Sistema POS y Contable para Boutique Valva", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { DashboardContent } from "@/components/dashboard-content" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function Page() { return ( ) } [V0_FILE]typescriptreact:file="app/reportes/page.tsx" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { ReportesContent } from "@/components/reportes-content" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function ReportesPage() { return ( ) } [V0_FILE]typescriptreact:file="app/ventas/page.tsx" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { VentasContent } from "@/components/ventas-content" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function VentasPage() { return ( ) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/caja-content.tsx" isMerged="true" "use client" import * as React 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 { Textarea } from "@/components/ui/textarea" import { Lock, Unlock } from "lucide-react" export function CajaContent() { const [cajaAbierta, setCajaAbierta] = React.useState(false) const [baseInicial, setBaseInicial] = React.useState("") const [notas, setNotas] = React.useState("") const [efectivoContado, setEfectivoContado] = React.useState("") const handleAbrirCaja = () => { if (baseInicial) { setCajaAbierta(true) } } const handleCerrarCaja = () => { setCajaAbierta(false) setBaseInicial("") setNotas("") setEfectivoContado("") } return (

Gestión de Caja

Control de apertura y cierre de caja

{cajaAbierta ? ( <> Caja Abierta ) : ( <> Caja Cerrada )}

{!cajaAbierta ? ( Apertura de Caja Ingrese los datos para iniciar el turno

Fecha

Hora

Cajero

Base Inicial * setBaseInicial(e.target.value)} />

Notas Opcionales

setNotas(e.target.value)}
              />
            </div>
            <Button className="w-full" size="lg" onClick={handleAbrirCaja} disabled={!baseInicial}>
              <Unlock className="mr-2 h-4 w-4" />
              Abrir Caja
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Resumen del Turno</CardTitle>
              <CardDescription>Estado actual de la caja</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-3">
                <div className="rounded-lg border bg-secondary p-4">
                  <p className="text-sm text-muted-foreground">Base Inicial</p>
                  <p className="text-2xl font-bold">${Number.parseInt(baseInicial).toLocaleString("es-CO")}</p>
                </div>
                <div className="rounded-lg border bg-secondary p-4">
                  <p className="text-sm text-muted-foreground">Ventas del Turno</p>
                  <p className="text-2xl font-bold text-primary">$2,450,000</p>
                </div>
                <div className="rounded-lg border bg-secondary p-4">
                  <p className="text-sm text-muted-foreground">Total en Caja</p>
                  <p className="text-2xl font-bold">
                    ${(Number.parseInt(baseInicial) + 2450000).toLocaleString("es-CO")}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Cierre de Caja</CardTitle>
              <CardDescription>Complete el arqueo para cerrar el turno</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="rounded-lg border bg-secondary p-4">
                  <h3 className="mb-3 font-semibold">Desglose por Tipo de Pago</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">Efectivo:</span>
                      <span className="font-medium">$1,350,000</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm">Transferencia:</span>
                      <span className="font-medium">$850,000</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm">Tarjeta:</span>
                      <span className="font-medium">$250,000</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="text-sm font-semibold">Crédito:</span>
                      <span className="font-semibold text-primary">$450,000</span>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="efectivo-contado">Efectivo Contado en Caja</Label>
                  <Input
                    id="efectivo-contado"
                    type="number"
                    placeholder="Ingrese el monto contado"
                    value={efectivoContado}
                    onChange={(e) => setEfectivoContado(e.target.value)}
                  />
                </div>

{efectivoContado && (
                  <div className="rounded-lg border bg-secondary p-4">
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm">Esperado:</span>
                        <span className="font-medium">
                          ${(Number.parseInt(baseInicial) + 1350000).toLocaleString("es-CO")}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Real:</span>
                        <span className="font-medium">${Number.parseInt(efectivoContado).toLocaleString("es-CO")}</span>
                      </div>
                      <div className="flex justify-between border-t pt-2">
                        <span className="font-semibold">Diferencia:</span>
                        <span
                          className={`font-bold ${Number.parseInt(efectivoContado) - (Number.parseInt(baseInicial) + 1350000) === 0 ? "text-primary" : "text-destructive"}`}
                        >
                          $
                          {(Number.parseInt(efectivoContado) - (Number.parseInt(baseInicial) + 1350000)).toLocaleString(
                            "es-CO",
                          )}
                        </span>
                      </div>
                    </div>
                  </div>
                )}
              </div>

<div className="flex gap-2">
                <Button variant="outline" className="flex-1 bg-transparent">
                  Imprimir Reporte
                </Button>
                <Button className="flex-1" onClick={handleCerrarCaja}>
                  <Lock className="mr-2 h-4 w-4" />
                  Cerrar Caja
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/clientes-content.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, 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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Search, Plus, DollarSign, Edit, CreditCard, History, AlertCircle } from "lucide-react"
import type { Cliente, Abono } from "@/lib/types"
import { getClientes, saveCliente, deleteCliente, saveAbono, getAbonosByCliente, getCurrentUser } from "@/lib/storage"

export function ClientesContent() {
  const [clientes, setClientes] = useState<Cliente[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [dialogOpen, setDialogOpen] = useState(false)
  const [abonoDialogOpen, setAbonoDialogOpen] = useState(false)
  const [historialDialogOpen, setHistorialDialogOpen] = useState(false)
  const [editingClient, setEditingClient] = useState<Cliente | null>(null)
  const [selectedClient, setSelectedClient] = useState<Cliente | null>(null)
  const [abonos, setAbonos] = useState<Abono[]>([])
  const [currentUser] = useState(getCurrentUser())

const [formData, setFormData] = useState({
    nombre: "",
    identificacion: "",
    telefono: "",
    email: "",
    direccion: "",
    tipoCliente: "publico" as Cliente["tipoCliente"],
    limiteCredito: "",
  })

const [abonoData, setAbonoData] = useState({
    monto: "",
    metodoPago: "efectivo",
    referencia: "",
    notas: "",
  })

useEffect(() => {
    loadClientes()
  }, [])

const loadClientes = () => {
    setClientes(getClientes())
  }

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

const cliente: Cliente = {
      id: editingClient?.id || Date.now().toString(),
      nombre: formData.nombre,
      identificacion: formData.identificacion,
      telefono: formData.telefono,
      email: formData.email || undefined,
      direccion: formData.direccion || undefined,
      tipoCliente: formData.tipoCliente,
      limiteCredito: Number.parseFloat(formData.limiteCredito) || 0,
      saldoActual: editingClient?.saldoActual || 0,
      createdAt: editingClient?.createdAt || new Date().toISOString(),
    }

saveCliente(cliente)
    loadClientes()
    handleCloseDialog()
  }

const handleAbonoSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedClient) return

const monto = Number.parseFloat(abonoData.monto)
    if (monto <= 0 || monto > selectedClient.saldoActual) {
      alert("Monto inválido")
      return
    }

const abono: Abono = {
      id: Date.now().toString(),
      clienteId: selectedClient.id,
      monto,
      fecha: new Date().toISOString(),
      metodoPago: abonoData.metodoPago,
      referencia: abonoData.referencia || undefined,
      notas: abonoData.notas || undefined,
      usuario: currentUser?.nombre || "Usuario",
    }

saveAbono(abono, selectedClient.id)
    loadClientes()
    handleCloseAbonoDialog()
    alert("Abono registrado exitosamente")
  }

const handleEdit = (cliente: Cliente) => {
    setEditingClient(cliente)
    setFormData({
      nombre: cliente.nombre,
      identificacion: cliente.identificacion,
      telefono: cliente.telefono,
      email: cliente.email || "",
      direccion: cliente.direccion || "",
      tipoCliente: cliente.tipoCliente,
      limiteCredito: cliente.limiteCredito.toString(),
    })
    setDialogOpen(true)
  }

const handleDelete = (id: string) => {
    if (confirm("¿Está seguro de eliminar este cliente?")) {
      deleteCliente(id)
      loadClientes()
    }
  }

const handleOpenAbono = (cliente: Cliente) => {
    setSelectedClient(cliente)
    setAbonoDialogOpen(true)
  }

const handleOpenHistorial = (cliente: Cliente) => {
    setSelectedClient(cliente)
    setAbonos(getAbonosByCliente(cliente.id))
    setHistorialDialogOpen(true)
  }

const handleCloseDialog = () => {
    setDialogOpen(false)
    setEditingClient(null)
    setFormData({
      nombre: "",
      identificacion: "",
      telefono: "",
      email: "",
      direccion: "",
      tipoCliente: "publico",
      limiteCredito: "",
    })
  }

const handleCloseAbonoDialog = () => {
    setAbonoDialogOpen(false)
    setSelectedClient(null)
    setAbonoData({
      monto: "",
      metodoPago: "efectivo",
      referencia: "",
      notas: "",
    })
  }

const filteredClientes = clientes.filter(
    (c) =>
      c.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      c.identificacion.toLowerCase().includes(searchTerm.toLowerCase()) ||
      c.telefono.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const totalClientes = clientes.length
  const clientesCredito = clientes.filter((c) => c.limiteCredito > 0).length
  const totalPorCobrar = clientes.reduce((sum, c) => sum + c.saldoActual, 0)
  const clientesMorosos = clientes.filter((c) => c.saldoActual >= c.limiteCredito * 0.8 && c.limiteCredito > 0).length

const canManageCredits = currentUser?.permisos.gestionarCreditos

return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Clientes</h1>
          <p className="text-muted-foreground">Gestión de clientes y cuentas por cobrar</p>
        </div>
        <Button onClick={() => setDialogOpen(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Nuevo Cliente
        </Button>
      </div>

{/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Clientes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalClientes}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Clientes con Crédito</CardTitle>
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">{clientesCredito}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total por Cobrar</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">${totalPorCobrar.toLocaleString()}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Clientes en Riesgo</CardTitle>
            <AlertCircle className="h-4 w-4 text-destructive" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-destructive">{clientesMorosos}</div>
            <p className="text-xs text-muted-foreground">80% o más del límite</p>
          </CardContent>
        </Card>
      </div>

{/* Search */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
              <Input
                className="pl-9"
                placeholder="Buscar cliente por nombre, documento o teléfono..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Cliente</TableHead>
                <TableHead>Identificación</TableHead>
                <TableHead>Teléfono</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead className="text-right">Saldo Actual</TableHead>
                <TableHead className="text-right">Límite Crédito</TableHead>
                <TableHead className="text-right">Disponible</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredClientes.map((cliente) => {
                const disponible = cliente.limiteCredito - cliente.saldoActual
                const porcentajeUsado =
                  cliente.limiteCredito > 0 ? (cliente.saldoActual / cliente.limiteCredito) * 100 : 0

return (
                  <TableRow key={cliente.id}>
                    <TableCell>
                      <div>
                        <p className="font-medium">{cliente.nombre}</p>
                        <p className="text-sm text-muted-foreground">{cliente.email || "Sin email"}</p>
                      </div>
                    </TableCell>
                    <TableCell>{cliente.identificacion}</TableCell>
                    <TableCell>{cliente.telefono}</TableCell>
                    <TableCell>
                      <Badge variant={cliente.tipoCliente === "publico" ? "secondary" : "default"}>
                        {cliente.tipoCliente === "publico"
                          ? "Público"
                          : cliente.tipoCliente === "mayorista"
                            ? "Mayorista"
                            : "Especial"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <span className={cliente.saldoActual > 0 ? "font-semibold text-[#D4AF37]" : ""}>
                        ${cliente.saldoActual.toLocaleString()}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">${cliente.limiteCredito.toLocaleString()}</TableCell>
                    <TableCell className="text-right">
                      {cliente.limiteCredito > 0 && (
                        <div>
                          <span
                            className={
                              porcentajeUsado >= 80 ? "text-destructive font-semibold" : "text-muted-foreground"
                            }
                          >
                            ${disponible.toLocaleString()}
                          </span>
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button variant="ghost" size="sm" onClick={() => handleEdit(cliente)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        {cliente.saldoActual > 0 && canManageCredits && (
                          <Button variant="default" size="sm" onClick={() => handleOpenAbono(cliente)}>
                            <DollarSign className="h-4 w-4 mr-1" />
                            Abonar
                          </Button>
                        )}
                        <Button variant="outline" size="sm" onClick={() => handleOpenHistorial(cliente)}>
                          <History className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Add/Edit Client Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingClient ? "Editar Cliente" : "Nuevo Cliente"}</DialogTitle>
            <DialogDescription>Complete la información del cliente</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre Completo *</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="identificacion">Identificación *</Label>
                  <Input
                    id="identificacion"
                    value={formData.identificacion}
                    onChange={(e) => setFormData({ ...formData, identificacion: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono *</Label>
                  <Input
                    id="telefono"
                    value={formData.telefono}
                    onChange={(e) => setFormData({ ...formData, telefono: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="direccion">Dirección</Label>
                <Input
                  id="direccion"
                  value={formData.direccion}
                  onChange={(e) => setFormData({ ...formData, direccion: e.target.value })}
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="tipoCliente">Tipo de Cliente *</Label>
                  <Select
                    value={formData.tipoCliente}
                    onValueChange={(value) =>
                      setFormData({ ...formData, tipoCliente: value as Cliente["tipoCliente"] })
                    }
                  >
                    <SelectTrigger id="tipoCliente">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="publico">Público (Precio Normal)</SelectItem>
                      <SelectItem value="mayorista">Mayorista (Precio Mayorista)</SelectItem>
                      <SelectItem value="especial">Especial (Precio Especial)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="limiteCredito">Límite de Crédito</Label>
                  <Input
                    id="limiteCredito"
                    type="number"
                    step="0.01"
                    value={formData.limiteCredito}
                    onChange={(e) => setFormData({ ...formData, limiteCredito: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleCloseDialog}>
                Cancelar
              </Button>
              <Button type="submit">{editingClient ? "Guardar Cambios" : "Crear Cliente"}</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

{/* Abono Dialog */}
      <Dialog open={abonoDialogOpen} onOpenChange={setAbonoDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Registrar Abono</DialogTitle>
            <DialogDescription>
              Cliente: {selectedClient?.nombre}
              <br />
              Saldo Actual: ${selectedClient?.saldoActual.toLocaleString()}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleAbonoSubmit}>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="monto">Monto del Abono *</Label>
                <Input
                  id="monto"
                  type="number"
                  step="0.01"
                  value={abonoData.monto}
                  onChange={(e) => setAbonoData({ ...abonoData, monto: e.target.value })}
                  max={selectedClient?.saldoActual}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="metodoPago">Método de Pago *</Label>
                <Select
                  value={abonoData.metodoPago}
                  onValueChange={(value) => setAbonoData({ ...abonoData, metodoPago: value })}
                >
                  <SelectTrigger id="metodoPago">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="efectivo">Efectivo</SelectItem>
                    <SelectItem value="transferencia">Transferencia</SelectItem>
                    <SelectItem value="tarjeta">Tarjeta</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="referencia">Referencia</Label>
                <Input
                  id="referencia"
                  value={abonoData.referencia}
                  onChange={(e) => setAbonoData({ ...abonoData, referencia: e.target.value })}
                  placeholder="Número de transacción, cheque, etc."
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="notas">Notas</Label>
                <Textarea
                  id="notas"
                  value={abonoData.notas}
                  onChange={(e) => setAbonoData({ ...abonoData, notas: e.target.value })}
                  placeholder="Observaciones adicionales"
                />
              </div>

{abonoData.monto && selectedClient && (
                <div className="rounded-lg bg-secondary p-4">
                  <div className="flex justify-between mb-2">
                    <span>Saldo Actual:</span>
                    <span className="font-bold">${selectedClient.saldoActual.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between mb-2">
                    <span>Abono:</span>
                    <span className="font-bold">-${Number.parseFloat(abonoData.monto).toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between border-t pt-2">
                    <span className="font-bold">Nuevo Saldo:</span>
                    <span className="font-bold text-[#D4AF37]">
                      ${(selectedClient.saldoActual - Number.parseFloat(abonoData.monto || "0")).toLocaleString()}
                    </span>
                  </div>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleCloseAbonoDialog}>
                Cancelar
              </Button>
              <Button type="submit">Registrar Abono</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

{/* Historial Dialog */}
      <Dialog open={historialDialogOpen} onOpenChange={setHistorialDialogOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Historial de Abonos</DialogTitle>
            <DialogDescription>
              Cliente: {selectedClient?.nombre} | Saldo Actual: ${selectedClient?.saldoActual.toLocaleString()}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            {abonos.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">No hay abonos registrados</div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fecha</TableHead>
                    <TableHead>Monto</TableHead>
                    <TableHead>Método</TableHead>
                    <TableHead>Referencia</TableHead>
                    <TableHead>Usuario</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {abonos.map((abono) => (
                    <TableRow key={abono.id}>
                      <TableCell>{new Date(abono.fecha).toLocaleString()}</TableCell>
                      <TableCell className="font-bold text-[#D4AF37]">${abono.monto.toLocaleString()}</TableCell>
                      <TableCell>
                        <Badge variant="outline">{abono.metodoPago}</Badge>
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">{abono.referencia || "-"}</TableCell>
                      <TableCell className="text-sm">{abono.usuario}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-content.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, Package, TrendingUp, Users, CreditCard } from "lucide-react"
import { Button } from "@/components/ui/button"

export function DashboardContent() {
  const stats = [
    {
      title: "Ventas Hoy",
      value: "$2,450,000",
      description: "15 transacciones",
      icon: DollarSign,
      trend: "+12.5%",
    },
    {
      title: "Productos Vendidos",
      value: "42",
      description: "Unidades totales",
      icon: Package,
      trend: "+8.2%",
    },
    {
      title: "Clientes Atendidos",
      value: "18",
      description: "Clientes únicos",
      icon: Users,
      trend: "+5.1%",
    },
    {
      title: "Cuentas por Cobrar",
      value: "$850,000",
      description: "8 clientes pendientes",
      icon: CreditCard,
      trend: "-3.2%",
    },
  ]

const recentSales = [
    { id: "001", cliente: "María González", total: 125000, tipo: "Contado" },
    { id: "002", cliente: "Juan Pérez", total: 89000, tipo: "Crédito" },
    { id: "003", cliente: "Ana Martínez", total: 215000, tipo: "Contado" },
    { id: "004", cliente: "Carlos López", total: 156000, tipo: "Contado" },
  ]

return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">Bienvenido al sistema Valva</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline">Ver Reportes</Button>
          <Button>Nueva Venta</Button>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
              <stat.icon className="h-4 w-4 text-primary" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <p className="text-xs text-muted-foreground">{stat.description}</p>
              <div className="mt-2 flex items-center gap-1 text-xs">
                <TrendingUp className="h-3 w-3 text-primary" />
                <span className="font-medium text-primary">{stat.trend}</span>
                <span className="text-muted-foreground">vs mes anterior</span>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Ventas Recientes</CardTitle>
            <CardDescription>Últimas transacciones realizadas</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentSales.map((sale) => (
                <div key={sale.id} className="flex items-center justify-between border-b pb-3 last:border-0">
                  <div>
                    <p className="font-medium">{sale.cliente}</p>
                    <p className="text-sm text-muted-foreground">Venta #{sale.id}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-bold">${sale.total.toLocaleString("es-CO")}</p>
                    <p className="text-sm text-muted-foreground">{sale.tipo}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Estado de Caja</CardTitle>
            <CardDescription>Información del turno actual</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Estado:</span>
                <span className="rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">Abierta</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Base Inicial:</span>
                <span className="font-medium">$500,000</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Ventas del Turno:</span>
                <span className="font-medium">$2,450,000</span>
              </div>
              <div className="flex items-center justify-between border-t pt-4">
                <span className="text-sm font-medium">Total en Caja:</span>
                <span className="text-xl font-bold text-primary">$2,950,000</span>
              </div>
              <Button className="w-full bg-transparent" variant="outline">
                Cerrar Caja
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/descuentos-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Percent, Save, X } from "lucide-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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

// Mock data de productos
const mockProductos = [
  { id: 1, nombre: "Vestido Floral", codigo: "VF001", referencia: "7891234567890", precioOriginal: 150000, stock: 5 },
  { id: 2, nombre: "Blusa Blanca", codigo: "BB002", referencia: "7891234567891", precioOriginal: 80000, stock: 8 },
  { id: 3, nombre: "Pantalón Negro", codigo: "PN003", referencia: "7891234567892", precioOriginal: 120000, stock: 3 },
  { id: 4, nombre: "Chaqueta Cuero", codigo: "CC004", referencia: "7891234567893", precioOriginal: 350000, stock: 2 },
]

export function DescuentosContent() {
  const [busqueda, setBusqueda] = useState("")
  const [productoSeleccionado, setProductoSeleccionado] = useState<any>(null)
  const [descuentoPorcentaje, setDescuentoPorcentaje] = useState("")
  const [precioConDescuento, setPrecioConDescuento] = useState("")
  const [productosConDescuento, setProductosConDescuento] = useState<any[]>([])

// Buscar producto por código o referencia
  const buscarProducto = () => {
    const producto = mockProductos.find(
      (p) => p.codigo.toLowerCase() === busqueda.toLowerCase() || p.referencia === busqueda,
    )

if (producto) {
      setProductoSeleccionado(producto)
      setPrecioConDescuento(producto.precioOriginal.toString())
      setDescuentoPorcentaje("")
    } else {
      alert("Producto no encontrado")
      setProductoSeleccionado(null)
    }
  }

// Calcular precio con descuento al cambiar el porcentaje
  const calcularDescuento = (porcentaje: string) => {
    setDescuentoPorcentaje(porcentaje)
    if (productoSeleccionado && porcentaje) {
      const desc = Number.parseFloat(porcentaje)
      if (!isNaN(desc) && desc >= 0 && desc <= 100) {
        const precioFinal = productoSeleccionado.precioOriginal * (1 - desc / 100)
        setPrecioConDescuento(Math.round(precioFinal).toString())
      }
    }
  }

// Aplicar descuento
  const aplicarDescuento = () => {
    if (!productoSeleccionado || !precioConDescuento) return

const precioFinal = Number.parseFloat(precioConDescuento)
    const descPorcentaje = descuentoPorcentaje
      ? Number.parseFloat(descuentoPorcentaje)
      : ((productoSeleccionado.precioOriginal - precioFinal) / productoSeleccionado.precioOriginal) * 100

const nuevoProducto = {
      ...productoSeleccionado,
      precioConDescuento: precioFinal,
      descuentoPorcentaje: Math.round(descPorcentaje * 100) / 100,
      fechaAplicacion: new Date().toLocaleDateString(),
    }

// Actualizar o agregar producto con descuento
    const existe = productosConDescuento.findIndex((p) => p.id === productoSeleccionado.id)
    if (existe >= 0) {
      const nuevaLista = [...productosConDescuento]
      nuevaLista[existe] = nuevoProducto
      setProductosConDescuento(nuevaLista)
    } else {
      setProductosConDescuento([...productosConDescuento, nuevoProducto])
    }

// Limpiar formulario
    setBusqueda("")
    setProductoSeleccionado(null)
    setDescuentoPorcentaje("")
    setPrecioConDescuento("")
  }

// Quitar descuento
  const quitarDescuento = (id: number) => {
    setProductosConDescuento(productosConDescuento.filter((p) => p.id !== id))
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Gestión de Descuentos</h1>
        <p className="text-muted-foreground">
          Busca productos por código o referencia para aplicar descuentos especiales
        </p>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* Formulario de búsqueda y aplicación */}
        <Card>
          <CardHeader>
            <CardTitle>Aplicar Descuento</CardTitle>
            <CardDescription>Busca el producto y define el descuento</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Búsqueda */}
            <div className="space-y-2">
              <Label htmlFor="busqueda">Código o Referencia</Label>
              <div className="flex gap-2">
                <Input
                  id="busqueda"
                  placeholder="Ingresa código o código de barras"
                  value={busqueda}
                  onChange={(e) => setBusqueda(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && buscarProducto()}
                />
                <Button onClick={buscarProducto} size="icon">
                  <Search className="h-4 w-4" />
                </Button>
              </div>
            </div>

{/* Información del producto */}
            {productoSeleccionado && (
              <div className="rounded-lg border bg-muted/50 p-4 space-y-3">
                <div>
                  <p className="text-sm font-medium">Producto Encontrado</p>
                  <p className="text-lg font-bold">{productoSeleccionado.nombre}</p>
                  <p className="text-sm text-muted-foreground">
                    Código: {productoSeleccionado.codigo} | Ref: {productoSeleccionado.referencia}
                  </p>
                </div>

<div className="grid gap-3">
                  <div>
                    <Label className="text-xs">Precio Original</Label>
                    <p className="text-xl font-bold text-primary">
                      ${productoSeleccionado.precioOriginal.toLocaleString()}
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="descuento">Descuento (%)</Label>
                    <div className="relative">
                      <Input
                        id="descuento"
                        type="number"
                        placeholder="0"
                        value={descuentoPorcentaje}
                        onChange={(e) => calcularDescuento(e.target.value)}
                        min="0"
                        max="100"
                      />
                      <Percent className="absolute right-3 top-2.5 h-4 w-4 text-muted-foreground" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="precioFinal">Precio Final</Label>
                    <Input
                      id="precioFinal"
                      type="number"
                      value={precioConDescuento}
                      onChange={(e) => setPrecioConDescuento(e.target.value)}
                      placeholder="Precio con descuento"
                    />
                  </div>

<Button onClick={aplicarDescuento} className="w-full">
                    <Save className="mr-2 h-4 w-4" />
                    Aplicar Descuento
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

{/* Lista de productos con descuento */}
        <Card>
          <CardHeader>
            <CardTitle>Productos con Descuento Activo</CardTitle>
            <CardDescription>{productosConDescuento.length} producto(s) con descuento</CardDescription>
          </CardHeader>
          <CardContent>
            {productosConDescuento.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-8 text-center">
                <Percent className="h-12 w-12 text-muted-foreground/50 mb-3" />
                <p className="text-muted-foreground">No hay productos con descuento</p>
              </div>
            ) : (
              <div className="space-y-3">
                {productosConDescuento.map((producto) => (
                  <div key={producto.id} className="rounded-lg border bg-card p-4 space-y-2">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="font-semibold">{producto.nombre}</p>
                        <p className="text-xs text-muted-foreground">
                          {producto.codigo} | {producto.referencia}
                        </p>
                      </div>
                      <Button variant="ghost" size="icon" onClick={() => quitarDescuento(producto.id)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>

<div className="flex items-center gap-4 text-sm">
                      <div>
                        <p className="text-xs text-muted-foreground">Original</p>
                        <p className="line-through">${producto.precioOriginal.toLocaleString()}</p>
                      </div>
                      <Badge variant="secondary">-{producto.descuentoPorcentaje}%</Badge>
                      <div>
                        <p className="text-xs text-muted-foreground">Con descuento</p>
                        <p className="font-bold text-primary">${producto.precioConDescuento.toLocaleString()}</p>
                      </div>
                    </div>

<p className="text-xs text-muted-foreground">Aplicado: {producto.fechaAplicacion}</p>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

{/* Tabla completa de productos con descuento */}
      {productosConDescuento.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Resumen de Descuentos</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Producto</TableHead>
                  <TableHead>Código</TableHead>
                  <TableHead>Referencia</TableHead>
                  <TableHead className="text-right">Precio Original</TableHead>
                  <TableHead className="text-center">Descuento</TableHead>
                  <TableHead className="text-right">Precio Final</TableHead>
                  <TableHead className="text-right">Ahorro</TableHead>
                  <TableHead></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {productosConDescuento.map((producto) => (
                  <TableRow key={producto.id}>
                    <TableCell className="font-medium">{producto.nombre}</TableCell>
                    <TableCell>{producto.codigo}</TableCell>
                    <TableCell className="font-mono text-xs">{producto.referencia}</TableCell>
                    <TableCell className="text-right">${producto.precioOriginal.toLocaleString()}</TableCell>
                    <TableCell className="text-center">
                      <Badge variant="secondary">-{producto.descuentoPorcentaje}%</Badge>
                    </TableCell>
                    <TableCell className="text-right font-bold text-primary">
                      ${producto.precioConDescuento.toLocaleString()}
                    </TableCell>
                    <TableCell className="text-right text-green-600">
                      ${(producto.precioOriginal - producto.precioConDescuento).toLocaleString()}
                    </TableCell>
                    <TableCell>
                      <Button variant="ghost" size="sm" onClick={() => quitarDescuento(producto.id)}>
                        Quitar
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/reportes-content.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { FileText, Download, TrendingUp, DollarSign, ShoppingCart, Percent } from "lucide-react"
import type { Venta } from "@/lib/types"
import { getVentas, getProducts, getCurrentUser } from "@/lib/storage"

export function ReportesContent() {
  const [ventas, setVentas] = useState<Venta[]>([])
  const [fechaInicio, setFechaInicio] = useState("")
  const [fechaFin, setFechaFin] = useState("")
  const [tipoReporte, setTipoReporte] = useState("todo")
  const [currentUser] = useState(getCurrentUser())

useEffect(() => {
    loadVentas()
    // Set default dates (last 7 days)
    const hoy = new Date()
    const hace7Dias = new Date(hoy)
    hace7Dias.setDate(hoy.getDate() - 7)
    setFechaInicio(hace7Dias.toISOString().split("T")[0])
    setFechaFin(hoy.toISOString().split("T")[0])
  }, [])

const loadVentas = () => {
    setVentas(getVentas())
  }

const ventasFiltradas = ventas.filter((venta) => {
    const fechaVenta = new Date(venta.fecha)
    const inicio = fechaInicio ? new Date(fechaInicio) : new Date(0)
    const fin = fechaFin ? new Date(fechaFin) : new Date()
    fin.setHours(23, 59, 59)

return fechaVenta >= inicio && fechaVenta <= fin
  })

// Calculate profit for each sale
  const productos = getProducts()
  const calcularUtilidad = () => {
    let totalCosto = 0
    let totalVenta = 0

ventasFiltradas.forEach((venta) => {
      venta.productos.forEach((item) => {
        const producto = productos.find((p) => p.id === item.producto.id)
        if (producto) {
          totalCosto += producto.precioCosto * item.cantidad
          totalVenta += item.precioUnitario * item.cantidad
        }
      })
    })

return {
      totalCosto,
      totalVenta,
      utilidad: totalVenta - totalCosto,
      margen: totalVenta > 0 ? ((totalVenta - totalCosto) / totalVenta) * 100 : 0,
    }
  }

const utilidadData = calcularUtilidad()

// Group sales by product
  const ventasPorProducto = ventasFiltradas
    .flatMap((venta) => venta.productos)
    .reduce(
      (acc, item) => {
        const producto = productos.find((p) => p.id === item.producto.id)
        if (!producto) return acc

const key = item.producto.id
        if (!acc[key]) {
          acc[key] = {
            producto: item.producto,
            cantidad: 0,
            totalVenta: 0,
            totalCosto: 0,
            utilidad: 0,
          }
        }
        acc[key].cantidad += item.cantidad
        acc[key].totalVenta += item.precioUnitario * item.cantidad
        acc[key].totalCosto += producto.precioCosto * item.cantidad
        acc[key].utilidad = acc[key].totalVenta - acc[key].totalCosto
        return acc
      },
      {} as Record<string, any>,
    )

const productosTop = Object.values(ventasPorProducto)
    .sort((a: any, b: any) => b.totalVenta - a.totalVenta)
    .slice(0, 10)

const productosMasRentables = Object.values(ventasPorProducto)
    .sort((a: any, b: any) => b.utilidad - a.utilidad)
    .slice(0, 10)

// Sales by day
  const ventasPorDia = ventasFiltradas.reduce(
    (acc, venta) => {
      const dia = new Date(venta.fecha).toLocaleDateString()
      if (!acc[dia]) {
        acc[dia] = { total: 0, transacciones: 0, utilidad: 0 }
      }
      acc[dia].total += venta.total
      acc[dia].transacciones += 1

// Calculate profit
      venta.productos.forEach((item) => {
        const producto = productos.find((p) => p.id === item.producto.id)
        if (producto) {
          acc[dia].utilidad += (item.precioUnitario - producto.precioCosto) * item.cantidad
        }
      })
      return acc
    },
    {} as Record<string, any>,
  )

const totalVentas = ventasFiltradas.reduce((sum, v) => sum + v.total, 0)
  const ventasContado = ventasFiltradas.filter((v) => v.estado === "completada").reduce((sum, v) => sum + v.total, 0)
  const ventasCredito = ventasFiltradas.filter((v) => v.estado === "credito").reduce((sum, v) => sum + v.total, 0)
  const ticketPromedio = ventasFiltradas.length > 0 ? totalVentas / ventasFiltradas.length : 0

const canViewReports = currentUser?.permisos.verReportes
  const canViewCosts = currentUser?.permisos.verCostos

if (!canViewReports) {
    return (
      <div className="flex flex-col items-center justify-center h-[80vh] gap-4 p-6">
        <FileText className="h-16 w-16 text-muted-foreground" />
        <h2 className="text-2xl font-bold">Acceso Denegado</h2>
        <p className="text-muted-foreground">No tiene permisos para ver reportes</p>
      </div>
    )
  }

return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Reportes y Analíticas</h1>
          <p className="text-muted-foreground">Análisis de ventas y rentabilidad</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            Exportar PDF
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            Exportar Excel
          </Button>
        </div>
      </div>

{/* Filters */}
      <Card>
        <CardHeader>
          <CardTitle>Filtros de Reporte</CardTitle>
          <CardDescription>Seleccione el período para analizar</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-4">
            <div className="space-y-2">
              <Label htmlFor="tipo-reporte">Tipo de Análisis</Label>
              <Select value={tipoReporte} onValueChange={setTipoReporte}>
                <SelectTrigger id="tipo-reporte">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todo">Todos</SelectItem>
                  <SelectItem value="ventas">Solo Ventas</SelectItem>
                  <SelectItem value="rentabilidad">Rentabilidad</SelectItem>
                  <SelectItem value="productos">Por Producto</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="fecha-inicio">Fecha Inicio</Label>
              <Input
                id="fecha-inicio"
                type="date"
                value={fechaInicio}
                onChange={(e) => setFechaInicio(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="fecha-fin">Fecha Fin</Label>
              <Input id="fecha-fin" type="date" value={fechaFin} onChange={(e) => setFechaFin(e.target.value)} />
            </div>
            <div className="flex items-end">
              <Button className="w-full" onClick={loadVentas}>
                <FileText className="mr-2 h-4 w-4" />
                Actualizar
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Main Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ventas Totales</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalVentas.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">{ventasFiltradas.length} transacciones</p>
          </CardContent>
        </Card>

{canViewCosts && (
          <>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Utilidad Bruta</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-[#D4AF37]">${utilidadData.utilidad.toLocaleString()}</div>
                <p className="text-xs text-muted-foreground">Ventas menos costos</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Margen de Utilidad</CardTitle>
                <Percent className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-[#D4AF37]">{utilidadData.margen.toFixed(1)}%</div>
                <p className="text-xs text-muted-foreground">Rentabilidad promedio</p>
              </CardContent>
            </Card>
          </>
        )}

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ticket Promedio</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${ticketPromedio.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">Por transacción</p>
          </CardContent>
        </Card>
      </div>

{/* Sales by Payment Method */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Ventas por Método de Pago</CardTitle>
            <CardDescription>Distribución de ventas</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="flex items-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
                  <DollarSign className="h-6 w-6 text-green-600" />
                </div>
                <div>
                  <p className="font-medium">Ventas de Contado</p>
                  <p className="text-sm text-muted-foreground">
                    {((ventasContado / totalVentas) * 100 || 0).toFixed(1)}% del total
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-green-600">${ventasContado.toLocaleString()}</p>
              </div>
            </div>

<div className="flex items-center justify-between rounded-lg border p-4">
              <div className="flex items-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/10">
                  <FileText className="h-6 w-6 text-orange-600" />
                </div>
                <div>
                  <p className="font-medium">Ventas a Crédito</p>
                  <p className="text-sm text-muted-foreground">
                    {((ventasCredito / totalVentas) * 100 || 0).toFixed(1)}% del total
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-orange-600">${ventasCredito.toLocaleString()}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Ventas por Día</CardTitle>
            <CardDescription>Últimos días del período</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {Object.entries(ventasPorDia)
                .slice(-7)
                .map(([dia, data]: [string, any]) => (
                  <div key={dia} className="flex items-center justify-between rounded-lg border p-3">
                    <div>
                      <p className="font-medium">{dia}</p>
                      <p className="text-sm text-muted-foreground">{data.transacciones} transacciones</p>
                    </div>
                    <div className="text-right">
                      <p className="font-bold text-primary">${data.total.toLocaleString()}</p>
                      {canViewCosts && <p className="text-sm text-[#D4AF37]">+${data.utilidad.toLocaleString()}</p>}
                    </div>
                  </div>
                ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Top Products */}
      <Card>
        <CardHeader>
          <CardTitle>Productos Más Vendidos</CardTitle>
          <CardDescription>Top 10 productos por volumen de ventas</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Posición</TableHead>
                <TableHead>Producto</TableHead>
                <TableHead className="text-right">Cantidad</TableHead>
                <TableHead className="text-right">Ventas</TableHead>
                {canViewCosts && (
                  <>
                    <TableHead className="text-right">Costo</TableHead>
                    <TableHead className="text-right">Utilidad</TableHead>
                    <TableHead className="text-right">Margen</TableHead>
                  </>
                )}
              </TableRow>
            </TableHeader>
            <TableBody>
              {productosTop.map((item: any, index) => (
                <TableRow key={item.producto.id}>
                  <TableCell>
                    <Badge variant={index < 3 ? "default" : "secondary"}>#{index + 1}</Badge>
                  </TableCell>
                  <TableCell className="font-medium">{item.producto.nombre}</TableCell>
                  <TableCell className="text-right">{item.cantidad}</TableCell>
                  <TableCell className="text-right font-semibold">${item.totalVenta.toLocaleString()}</TableCell>
                  {canViewCosts && (
                    <>
                      <TableCell className="text-right text-muted-foreground">
                        ${item.totalCosto.toLocaleString()}
                      </TableCell>
                      <TableCell className="text-right font-semibold text-[#D4AF37]">
                        ${item.utilidad.toLocaleString()}
                      </TableCell>
                      <TableCell className="text-right">
                        <Badge variant="outline">{((item.utilidad / item.totalVenta) * 100).toFixed(1)}%</Badge>
                      </TableCell>
                    </>
                  )}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Most Profitable Products */}
      {canViewCosts && (
        <Card>
          <CardHeader>
            <CardTitle>Productos Más Rentables</CardTitle>
            <CardDescription>Top 10 productos por utilidad generada</CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Posición</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead className="text-right">Utilidad</TableHead>
                  <TableHead className="text-right">Margen</TableHead>
                  <TableHead className="text-right">Cantidad</TableHead>
                  <TableHead className="text-right">Total Ventas</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {productosMasRentables.map((item: any, index) => (
                  <TableRow key={item.producto.id}>
                    <TableCell>
                      <Badge className="bg-[#D4AF37]">#{index + 1}</Badge>
                    </TableCell>
                    <TableCell className="font-medium">{item.producto.nombre}</TableCell>
                    <TableCell className="text-right font-bold text-[#D4AF37]">
                      ${item.utilidad.toLocaleString()}
                    </TableCell>
                    <TableCell className="text-right">
                      <Badge variant="outline">{((item.utilidad / item.totalVenta) * 100).toFixed(1)}%</Badge>
                    </TableCell>
                    <TableCell className="text-right">{item.cantidad}</TableCell>
                    <TableCell className="text-right font-semibold">${item.totalVenta.toLocaleString()}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

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

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
'use client'

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

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

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

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

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

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

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className,
      )}
      {...props}
    />
  )
}

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === 'function' ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? 'expanded' : 'collapsed'

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = 'left',
  variant = 'sidebar',
  collapsible = 'offcanvas',
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('size-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        'bg-background relative flex w-full flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn('bg-background h-8 w-full shadow-none', className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn('bg-sidebar-border mx-2 w-auto', className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = 'default',
  size = 'default',
  tooltip,
  className,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : 'button'
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === 'string') {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== 'collapsed' || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<'div'> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = 'md',
  isActive = false,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
  size?: 'sm' | 'md'
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
'use client'

import * as React from 'react'

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

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return (
    <thead
      data-slot="table-header"
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return (
    <tbody
      data-slot="table-body"
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
        className,
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        className,
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<'caption'>) {
  return (
    <caption
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

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

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

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

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ventas-content.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Card, CardContent, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Plus, Trash2, ShoppingCart, Search } from "lucide-react"
import type { Product, Cliente } from "@/lib/types"
import { getProducts, getClientes, saveVenta } from "@/lib/storage"

type CartItem = {
  product: Product
  cantidad: number
  precioUnitario: number
  tipoCliente: "publico" | "mayorista" | "especial"
}

export function VentasContent() {
  const [carrito, setCarrito] = React.useState<CartItem[]>([])
  const [productos, setProductos] = React.useState<Product[]>([])
  const [clientes, setClientes] = React.useState<Cliente[]>([])
  const [searchTerm, setSearchTerm] = React.useState("")
  const [tipoVenta, setTipoVenta] = React.useState("contado")
  const [metodoPago, setMetodoPago] = React.useState("efectivo")
  const [clienteSeleccionado, setClienteSeleccionado] = React.useState<Cliente | null>(null)

React.useEffect(() => {
    setProductos(getProducts())
    setClientes(getClientes())
  }, [])

React.useEffect(() => {
    if (clienteSeleccionado) {
      setCarrito((prevCarrito) =>
        prevCarrito.map((item) => ({
          ...item,
          tipoCliente: clienteSeleccionado.tipoCliente,
          precioUnitario: getPrecioByTipo(item.product, clienteSeleccionado.tipoCliente),
        })),
      )
    }
  }, [clienteSeleccionado])

const getPrecioByTipo = (product: Product, tipoCliente: "publico" | "mayorista" | "especial") => {
    if (product.descuento && product.precioConDescuento) {
      return product.precioConDescuento
    }
    switch (tipoCliente) {
      case "mayorista":
        return product.precioMayorista
      case "especial":
        return product.precioEspecial
      default:
        return product.precioVentaPublico
    }
  }

const agregarProducto = (producto: Product) => {
    const tipoCliente = clienteSeleccionado?.tipoCliente || "publico"
    const precio = getPrecioByTipo(producto, tipoCliente)

const existente = carrito.find((item) => item.product.id === producto.id)
    if (existente) {
      setCarrito(
        carrito.map((item) => (item.product.id === producto.id ? { ...item, cantidad: item.cantidad + 1 } : item)),
      )
    } else {
      setCarrito([
        ...carrito,
        {
          product: producto,
          cantidad: 1,
          precioUnitario: precio,
          tipoCliente,
        },
      ])
    }
  }

const eliminarProducto = (id: string) => {
    setCarrito(carrito.filter((item) => item.product.id !== id))
  }

const actualizarCantidad = (id: string, cantidad: number) => {
    if (cantidad < 1) return
    setCarrito(carrito.map((item) => (item.product.id === id ? { ...item, cantidad } : item)))
  }

const actualizarPrecio = (id: string, precio: number) => {
    if (precio < 0) return
    setCarrito(carrito.map((item) => (item.product.id === id ? { ...item, precioUnitario: precio } : item)))
  }

const subtotal = carrito.reduce((sum, item) => sum + item.precioUnitario * item.cantidad, 0)
  const total = subtotal

const procesarVenta = () => {
    if (carrito.length === 0) return

const venta = {
      id: Date.now().toString(),
      fecha: new Date().toISOString(),
      cliente: clienteSeleccionado || {
        id: "0",
        nombre: "Cliente General",
        identificacion: "N/A",
        telefono: "",
        tipoCliente: "publico" as const,
        limiteCredito: 0,
        saldoActual: 0,
        createdAt: new Date().toISOString(),
      },
      productos: carrito.map((item) => ({
        producto: item.product,
        cantidad: item.cantidad,
        precioUnitario: item.precioUnitario,
        subtotal: item.precioUnitario * item.cantidad,
      })),
      subtotal,
      impuestos: 0,
      descuento: 0,
      total,
      metodoPago: [metodoPago],
      estado: tipoVenta === "credito" ? ("credito" as const) : ("completada" as const),
      vendedor: "Usuario",
    }

saveVenta(venta)
    setCarrito([])
    alert("Venta procesada exitosamente")
  }

const productosFiltrados = productos.filter(
    (p) =>
      p.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.referencia.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Punto de Venta</h1>
          <p className="text-muted-foreground">Sistema POS con múltiples precios</p>
        </div>
        <Button size="lg" disabled={carrito.length === 0} onClick={procesarVenta}>
          <ShoppingCart className="mr-2 h-4 w-4" />
          Procesar Venta
        </Button>
      </div>

<div className="grid gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Búsqueda de Productos</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex gap-2">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    className="pl-9"
                    placeholder="Buscar por nombre, código o referencia..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Productos Disponibles</CardTitle>
            </CardHeader>
            <CardContent>
              {productosFiltrados.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-muted-foreground">No se encontraron productos</p>
                </div>
              ) : (
                <div className="grid gap-3 sm:grid-cols-2">
                  {productosFiltrados.map((producto) => {
                    const tipoCliente = clienteSeleccionado?.tipoCliente || "publico"
                    const precioActual = getPrecioByTipo(producto, tipoCliente)

return (
                      <div
                        key={producto.id}
                        className="flex flex-col rounded-lg border p-4 hover:bg-secondary cursor-pointer transition-colors"
                        onClick={() => agregarProducto(producto)}
                      >
                        <div className="flex items-start justify-between mb-2">
                          <div className="flex-1">
                            <p className="font-medium">{producto.nombre}</p>
                            <p className="text-xs text-muted-foreground">{producto.codigo}</p>
                            {producto.descuento && (
                              <Badge variant="destructive" className="mt-1">
                                {producto.descuento}% OFF
                              </Badge>
                            )}
                          </div>
                          <Button size="sm" variant="ghost" onClick={() => agregarProducto(producto)}>
                            <Plus className="h-4 w-4" />
                          </Button>
                        </div>
                        <div className="space-y-1 text-xs">
                          <div className="flex justify-between">
                            <span className="text-muted-foreground">Público:</span>
                            <span
                              className={
                                tipoCliente === "publico" ? "font-bold text-[#D4AF37]" : "text-muted-foreground"
                              }
                            >
                              ${producto.precioVentaPublico.toLocaleString()}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-muted-foreground">Mayorista:</span>
                            <span
                              className={
                                tipoCliente === "mayorista" ? "font-bold text-[#D4AF37]" : "text-muted-foreground"
                              }
                            >
                              ${producto.precioMayorista.toLocaleString()}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-muted-foreground">Especial:</span>
                            <span
                              className={
                                tipoCliente === "especial" ? "font-bold text-[#D4AF37]" : "text-muted-foreground"
                              }
                            >
                              ${producto.precioEspecial.toLocaleString()}
                            </span>
                          </div>
                        </div>
                        <div className="mt-2 pt-2 border-t">
                          <p className="font-bold text-primary text-lg">${precioActual.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">
                            Stock: {producto.cantidad} | {producto.categoria}
                          </p>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Carrito de Compra</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {carrito.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <ShoppingCart className="h-12 w-12 text-muted-foreground mb-3" />
                  <p className="text-sm text-muted-foreground">No hay productos en el carrito</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {carrito.map((item) => (
                    <div key={item.product.id} className="rounded-lg border p-3 space-y-2">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <p className="font-medium text-sm">{item.product.nombre}</p>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {item.tipoCliente === "publico"
                                ? "Público"
                                : item.tipoCliente === "mayorista"
                                  ? "Mayorista"
                                  : "Especial"}
                            </Badge>
                            {item.product.descuento && (
                              <Badge variant="destructive" className="text-xs">
                                {item.product.descuento}% OFF
                              </Badge>
                            )}
                          </div>
                        </div>
                        <Button size="sm" variant="ghost" onClick={() => eliminarProducto(item.product.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="flex items-center gap-1">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => actualizarCantidad(item.product.id, item.cantidad - 1)}
                          >
                            -
                          </Button>
                          <Input
                            type="number"
                            value={item.cantidad}
                            onChange={(e) => actualizarCantidad(item.product.id, Number.parseInt(e.target.value) || 1)}
                            className="h-8 w-12 text-center"
                          />
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => actualizarCantidad(item.product.id, item.cantidad + 1)}
                          >
                            +
                          </Button>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs text-muted-foreground">Precio:</span>
                        <Input
                          type="number"
                          value={item.precioUnitario}
                          onChange={(e) => actualizarPrecio(item.product.id, Number.parseFloat(e.target.value) || 0)}
                          className="h-8 flex-1 text-sm"
                        />
                      </div>
                      <div className="flex justify-between items-center pt-2 border-t">
                        <span className="text-xs text-muted-foreground">Subtotal:</span>
                        <span className="font-bold text-sm">
                          ${(item.precioUnitario * item.cantidad).toLocaleString()}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Detalles de Pago</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="cliente">Cliente</Label>
                <Select
                  value={clienteSeleccionado?.id || ""}
                  onValueChange={(value) => {
                    const cliente = clientes.find((c) => c.id === value)
                    setClienteSeleccionado(cliente || null)
                  }}
                >
                  <SelectTrigger id="cliente">
                    <SelectValue placeholder="Cliente General (Precio Público)" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="general">Cliente General (Precio Público)</SelectItem>
                    {clientes.map((cliente) => (
                      <SelectItem key={cliente.id} value={cliente.id}>
                        {cliente.nombre} -{" "}
                        {cliente.tipoCliente === "publico"
                          ? "Público"
                          : cliente.tipoCliente === "mayorista"
                            ? "Mayorista"
                            : "Especial"}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="tipo-venta">Tipo de Venta</Label>
                <Select value={tipoVenta} onValueChange={setTipoVenta}>
                  <SelectTrigger id="tipo-venta">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="contado">Contado</SelectItem>
                    <SelectItem value="credito">Crédito</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{tipoVenta === "contado" && (
                <div className="space-y-2">
                  <Label htmlFor="metodo-pago">Método de Pago</Label>
                  <Select value={metodoPago} onValueChange={setMetodoPago}>
                    <SelectTrigger id="metodo-pago">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="efectivo">Efectivo</SelectItem>
                      <SelectItem value="transferencia">Transferencia</SelectItem>
                      <SelectItem value="tarjeta">Tarjeta</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

<div className="space-y-2 border-t pt-4">
                <div className="flex justify-between">
                  <span className="text-sm">Subtotal:</span>
                  <span className="font-medium">${subtotal.toLocaleString()}</span>
                </div>
                <div className="flex justify-between border-t pt-2">
                  <span className="text-lg font-bold">Total:</span>
                  <span className="text-2xl font-bold text-primary">${total.toLocaleString()}</span>
                </div>
              </div>

<Button className="w-full" size="lg" disabled={carrito.length === 0} onClick={procesarVenta}>
                Finalizar Venta
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
 
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "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",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.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": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" 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.205 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.269 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: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --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;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Al6TqdnQ6vAp9ZcyZmIJ5OM62tap/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface Product {
  id: string
  codigo: string
  nombre: string
  referencia: string // Código de barras
  categoria: string
  cantidad: number
  precioCosto: number
  precioVentaPublico: number // Precio retail normal
  precioMayorista: number // Precio wholesale
  precioEspecial: number // Precio especial
  stockMinimo?: number
  proveedor?: string
  descuento?: number
  precioConDescuento?: number
  createdAt: string
  updatedAt: string
}

export interface Cliente {
  id: string
  nombre: string
  identificacion: string
  telefono: string
  email?: string
  direccion?: string
  tipoCliente: "publico" | "mayorista" | "especial"
  limiteCredito: number
  saldoActual: number
  createdAt: string
}

export interface Venta {
  id: string
  fecha: string
  cliente: Cliente
  productos: {
    producto: Product
    cantidad: number
    precioUnitario: number
    subtotal: number
  }[]
  subtotal: number
  impuestos: number
  descuento: number
  total: number
  metodoPago: string[]
  estado: "completada" | "credito" | "abono"
  vendedor: string
}

export interface Usuario {
  id: string
  nombre: string
  email: string
  rol: "administrador" | "vendedor" | "contador" | "inventario"
  permisos: {
    verCostos: boolean
    editarPrecios: boolean
    gestionarCreditos: boolean
    verReportes: boolean
    gestionarUsuarios: boolean
    abrirCaja: boolean
    hacerDescuentos: boolean
  }
  createdAt: string
}

export interface Abono {
  id: string
  clienteId: string
  monto: number
  fecha: string
  metodoPago: string
  referencia?: string
  notas?: string
  usuario: string
}
[V0_FILE]typescriptreact:file="components/productos-content.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } 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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Package, Plus, Search, Edit, Trash2, TrendingUp, DollarSign } from "lucide-react"
import type { Product } from "@/lib/types"
import { getProducts, saveProduct, deleteProduct, getCurrentUser } from "@/lib/storage"

export function ProductosContent() {
  const [productos, setProductos] = useState<Product[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const [currentUser, setCurrentUser] = useState(getCurrentUser())

const [formData, setFormData] = useState({
    codigo: "",
    nombre: "",
    referencia: "",
    categoria: "",
    cantidad: "",
    precioCosto: "",
    precioVentaPublico: "",
    precioMayorista: "",
    precioEspecial: "",
    stockMinimo: "",
    proveedor: "",
  })

useEffect(() => {
    loadProductos()
  }, [])

const loadProductos = () => {
    setProductos(getProducts())
  }

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

const product: Product = {
      id: editingProduct?.id || Date.now().toString(),
      codigo: formData.codigo,
      nombre: formData.nombre,
      referencia: formData.referencia,
      categoria: formData.categoria,
      cantidad: Number.parseFloat(formData.cantidad),
      precioCosto: Number.parseFloat(formData.precioCosto),
      precioVentaPublico: Number.parseFloat(formData.precioVentaPublico),
      precioMayorista: Number.parseFloat(formData.precioMayorista),
      precioEspecial: Number.parseFloat(formData.precioEspecial),
      stockMinimo: formData.stockMinimo ? Number.parseFloat(formData.stockMinimo) : undefined,
      proveedor: formData.proveedor || undefined,
      createdAt: editingProduct?.createdAt || new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

saveProduct(product)
    loadProductos()
    handleCloseDialog()
  }

const handleEdit = (product: Product) => {
    setEditingProduct(product)
    setFormData({
      codigo: product.codigo,
      nombre: product.nombre,
      referencia: product.referencia,
      categoria: product.categoria,
      cantidad: product.cantidad.toString(),
      precioCosto: product.precioCosto.toString(),
      precioVentaPublico: product.precioVentaPublico.toString(),
      precioMayorista: product.precioMayorista.toString(),
      precioEspecial: product.precioEspecial.toString(),
      stockMinimo: product.stockMinimo?.toString() || "",
      proveedor: product.proveedor || "",
    })
    setDialogOpen(true)
  }

const handleDelete = (id: string) => {
    if (confirm("¿Está seguro de eliminar este producto?")) {
      deleteProduct(id)
      loadProductos()
    }
  }

const handleCloseDialog = () => {
    setDialogOpen(false)
    setEditingProduct(null)
    setFormData({
      codigo: "",
      nombre: "",
      referencia: "",
      categoria: "",
      cantidad: "",
      precioCosto: "",
      precioVentaPublico: "",
      precioMayorista: "",
      precioEspecial: "",
      stockMinimo: "",
      proveedor: "",
    })
  }

const calcularMargen = (costo: number, venta: number) => {
    if (!costo || !venta) return 0
    return (((venta - costo) / costo) * 100).toFixed(2)
  }

const filteredProductos = productos.filter(
    (p) =>
      p.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.referencia.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.categoria.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const totalInventario = productos.reduce((sum, p) => sum + p.cantidad * p.precioCosto, 0)
  const totalProductos = productos.length
  const productosStockBajo = productos.filter((p) => p.stockMinimo && p.cantidad <= p.stockMinimo).length

const canViewCosts = currentUser?.permisos.verCostos
  const canEditPrices = currentUser?.permisos.editarPrecios

return (
    <div className="space-y-6">
      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Productos</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalProductos}</div>
            <p className="text-xs text-muted-foreground">{productosStockBajo} con stock bajo</p>
          </CardContent>
        </Card>
        {canViewCosts && (
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Valor Inventario</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${totalInventario.toLocaleString()}</div>
              <p className="text-xs text-muted-foreground">Costo total</p>
            </CardContent>
          </Card>
        )}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Margen Promedio</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {productos.length > 0
                ? (
                    productos.reduce(
                      (sum, p) => sum + Number.parseFloat(calcularMargen(p.precioCosto, p.precioVentaPublico)),
                      0,
                    ) / productos.length
                  ).toFixed(1)
                : 0}
              %
            </div>
            <p className="text-xs text-muted-foreground">Rentabilidad</p>
          </CardContent>
        </Card>
      </div>

{/* Search and Add */}
      <div className="flex gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar por nombre, código, referencia o categoría..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-9"
          />
        </div>
        {canEditPrices && (
          <Button onClick={() => setDialogOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            Nuevo Producto
          </Button>
        )}
      </div>

{/* Products Table */}
      <Card>
        <CardHeader>
          <CardTitle>Inventario de Productos</CardTitle>
          <CardDescription>Gestión de productos con múltiples precios</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Código</TableHead>
                <TableHead>Nombre</TableHead>
                <TableHead>Referencia</TableHead>
                <TableHead>Categoría</TableHead>
                <TableHead className="text-right">Stock</TableHead>
                {canViewCosts && <TableHead className="text-right">Costo</TableHead>}
                <TableHead className="text-right">P. Público</TableHead>
                <TableHead className="text-right">P. Mayorista</TableHead>
                <TableHead className="text-right">P. Especial</TableHead>
                {canViewCosts && <TableHead className="text-right">Margen</TableHead>}
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredProductos.map((producto) => (
                <TableRow key={producto.id}>
                  <TableCell className="font-medium">{producto.codigo}</TableCell>
                  <TableCell>{producto.nombre}</TableCell>
                  <TableCell>{producto.referencia}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{producto.categoria}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <span
                      className={
                        producto.stockMinimo && producto.cantidad <= producto.stockMinimo
                          ? "text-red-600 font-semibold"
                          : ""
                      }
                    >
                      {producto.cantidad}
                    </span>
                  </TableCell>
                  {canViewCosts && (
                    <TableCell className="text-right">${producto.precioCosto.toLocaleString()}</TableCell>
                  )}
                  <TableCell className="text-right">${producto.precioVentaPublico.toLocaleString()}</TableCell>
                  <TableCell className="text-right">${producto.precioMayorista.toLocaleString()}</TableCell>
                  <TableCell className="text-right">${producto.precioEspecial.toLocaleString()}</TableCell>
                  {canViewCosts && (
                    <TableCell className="text-right">
                      <Badge variant="secondary">
                        {calcularMargen(producto.precioCosto, producto.precioVentaPublico)}%
                      </Badge>
                    </TableCell>
                  )}
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      {canEditPrices && (
                        <>
                          <Button variant="ghost" size="icon" onClick={() => handleEdit(producto)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => handleDelete(producto.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Add/Edit Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingProduct ? "Editar Producto" : "Nuevo Producto"}</DialogTitle>
            <DialogDescription>Complete la información del producto con los tres precios de venta</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="codigo">Código *</Label>
                  <Input
                    id="codigo"
                    value={formData.codigo}
                    onChange={(e) => setFormData({ ...formData, codigo: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="referencia">Referencia (Código de Barras) *</Label>
                  <Input
                    id="referencia"
                    value={formData.referencia}
                    onChange={(e) => setFormData({ ...formData, referencia: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="nombre">Nombre del Producto *</Label>
                <Input
                  id="nombre"
                  value={formData.nombre}
                  onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="categoria">Categoría *</Label>
                  <Input
                    id="categoria"
                    value={formData.categoria}
                    onChange={(e) => setFormData({ ...formData, categoria: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="proveedor">Proveedor</Label>
                  <Input
                    id="proveedor"
                    value={formData.proveedor}
                    onChange={(e) => setFormData({ ...formData, proveedor: e.target.value })}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="cantidad">Cantidad en Stock *</Label>
                  <Input
                    id="cantidad"
                    type="number"
                    step="0.01"
                    value={formData.cantidad}
                    onChange={(e) => setFormData({ ...formData, cantidad: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="stockMinimo">Stock Mínimo</Label>
                  <Input
                    id="stockMinimo"
                    type="number"
                    step="0.01"
                    value={formData.stockMinimo}
                    onChange={(e) => setFormData({ ...formData, stockMinimo: e.target.value })}
                  />
                </div>
              </div>

<div className="border-t pt-4">
                <h4 className="font-semibold mb-3 text-[#D4AF37]">Precios</h4>

<div className="space-y-2 mb-3">
                  <Label htmlFor="precioCosto">Precio Costo *</Label>
                  <Input
                    id="precioCosto"
                    type="number"
                    step="0.01"
                    value={formData.precioCosto}
                    onChange={(e) => setFormData({ ...formData, precioCosto: e.target.value })}
                    required
                  />
                </div>

<div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="precioVentaPublico">Precio Público *</Label>
                    <Input
                      id="precioVentaPublico"
                      type="number"
                      step="0.01"
                      value={formData.precioVentaPublico}
                      onChange={(e) => setFormData({ ...formData, precioVentaPublico: e.target.value })}
                      required
                    />
                    {formData.precioCosto && formData.precioVentaPublico && (
                      <p className="text-xs text-muted-foreground">
                        Margen:{" "}
                        {calcularMargen(
                          Number.parseFloat(formData.precioCosto),
                          Number.parseFloat(formData.precioVentaPublico),
                        )}
                        %
                      </p>
                    )}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="precioMayorista">Precio Mayorista *</Label>
                    <Input
                      id="precioMayorista"
                      type="number"
                      step="0.01"
                      value={formData.precioMayorista}
                      onChange={(e) => setFormData({ ...formData, precioMayorista: e.target.value })}
                      required
                    />
                    {formData.precioCosto && formData.precioMayorista && (
                      <p className="text-xs text-muted-foreground">
                        Margen:{" "}
                        {calcularMargen(
                          Number.parseFloat(formData.precioCosto),
                          Number.parseFloat(formData.precioMayorista),
                        )}
                        %
                      </p>
                    )}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="precioEspecial">Precio Especial *</Label>
                    <Input
                      id="precioEspecial"
                      type="number"
                      step="0.01"
                      value={formData.precioEspecial}
                      onChange={(e) => setFormData({ ...formData, precioEspecial: e.target.value })}
                      required
                    />
                    {formData.precioCosto && formData.precioEspecial && (
                      <p className="text-xs text-muted-foreground">
                        Margen:{" "}
                        {calcularMargen(
                          Number.parseFloat(formData.precioCosto),
                          Number.parseFloat(formData.precioEspecial),
                        )}
                        %
                      </p>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleCloseDialog}>
                Cancelar
              </Button>
              <Button type="submit">{editingProduct ? "Guardar Cambios" : "Agregar Producto"}</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/usuarios/page.tsx" isMerged="true"
import { AppSidebar } from "@/components/app-sidebar"
import { UsuariosContent } from "@/components/usuarios-content"
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"

export default function UsuariosPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <UsuariosContent />
      </SidebarInset>
    </SidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="components/usuarios-content.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } 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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Shield, Plus, Edit, UserCog, Users } from "lucide-react"
import type { Usuario } from "@/lib/types"
import { getUsuarios, saveUsuario, getCurrentUser, setCurrentUser } from "@/lib/storage"

const rolesConfig = {
  administrador: {
    label: "Administrador",
    color: "bg-red-500",
    description: "Acceso completo al sistema",
  },
  vendedor: {
    label: "Vendedor",
    color: "bg-blue-500",
    description: "Acceso a ventas y clientes",
  },
  contador: {
    label: "Contador",
    color: "bg-green-500",
    description: "Acceso a reportes y finanzas",
  },
  inventario: {
    label: "Inventario",
    color: "bg-purple-500",
    description: "Gestión de productos",
  },
}

export function UsuariosContent() {
  const [usuarios, setUsuarios] = useState<Usuario[]>([])
  const [currentUser, setCurrentUserState] = useState<Usuario | null>(null)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editingUser, setEditingUser] = useState<Usuario | null>(null)

const [formData, setFormData] = useState({
    nombre: "",
    email: "",
    rol: "vendedor" as Usuario["rol"],
    permisos: {
      verCostos: false,
      editarPrecios: false,
      gestionarCreditos: false,
      verReportes: false,
      gestionarUsuarios: false,
      abrirCaja: false,
      hacerDescuentos: false,
    },
  })

useEffect(() => {
    loadUsuarios()
    setCurrentUserState(getCurrentUser())
  }, [])

const loadUsuarios = () => {
    setUsuarios(getUsuarios())
  }

const handleRolChange = (rol: Usuario["rol"]) => {
    const permisosPreset = {
      administrador: {
        verCostos: true,
        editarPrecios: true,
        gestionarCreditos: true,
        verReportes: true,
        gestionarUsuarios: true,
        abrirCaja: true,
        hacerDescuentos: true,
      },
      vendedor: {
        verCostos: false,
        editarPrecios: false,
        gestionarCreditos: false,
        verReportes: false,
        gestionarUsuarios: false,
        abrirCaja: true,
        hacerDescuentos: false,
      },
      contador: {
        verCostos: true,
        editarPrecios: false,
        gestionarCreditos: false,
        verReportes: true,
        gestionarUsuarios: false,
        abrirCaja: false,
        hacerDescuentos: false,
      },
      inventario: {
        verCostos: true,
        editarPrecios: true,
        gestionarCreditos: false,
        verReportes: false,
        gestionarUsuarios: false,
        abrirCaja: false,
        hacerDescuentos: true,
      },
    }

setFormData({
      ...formData,
      rol,
      permisos: permisosPreset[rol],
    })
  }

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

const usuario: Usuario = {
      id: editingUser?.id || Date.now().toString(),
      nombre: formData.nombre,
      email: formData.email,
      rol: formData.rol,
      permisos: formData.permisos,
      createdAt: editingUser?.createdAt || new Date().toISOString(),
    }

saveUsuario(usuario)
    loadUsuarios()
    handleCloseDialog()
  }

const handleEdit = (usuario: Usuario) => {
    setEditingUser(usuario)
    setFormData({
      nombre: usuario.nombre,
      email: usuario.email,
      rol: usuario.rol,
      permisos: usuario.permisos,
    })
    setDialogOpen(true)
  }

const handleCloseDialog = () => {
    setDialogOpen(false)
    setEditingUser(null)
    setFormData({
      nombre: "",
      email: "",
      rol: "vendedor",
      permisos: {
        verCostos: false,
        editarPrecios: false,
        gestionarCreditos: false,
        verReportes: false,
        gestionarUsuarios: false,
        abrirCaja: false,
        hacerDescuentos: false,
      },
    })
  }

const handleSetCurrentUser = (usuario: Usuario) => {
    setCurrentUser(usuario)
    setCurrentUserState(usuario)
    alert(`Sesión cambiada a: ${usuario.nombre}`)
  }

const canManageUsers = currentUser?.permisos.gestionarUsuarios

return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Usuarios y Roles</h1>
          <p className="text-muted-foreground">Gestión de usuarios y permisos del sistema</p>
        </div>
        {canManageUsers && (
          <Button onClick={() => setDialogOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            Nuevo Usuario
          </Button>
        )}
      </div>

{/* Current User Card */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserCog className="h-5 w-5" />
            Usuario Actual
          </CardTitle>
        </CardHeader>
        <CardContent>
          {currentUser && (
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <p className="font-semibold text-lg">{currentUser.nombre}</p>
                <p className="text-sm text-muted-foreground">{currentUser.email}</p>
                <Badge className={rolesConfig[currentUser.rol].color}>{rolesConfig[currentUser.rol].label}</Badge>
              </div>
              <div className="text-right">
                <p className="text-sm font-medium mb-2">Permisos Activos:</p>
                <div className="flex flex-wrap gap-1 justify-end">
                  {Object.entries(currentUser.permisos)
                    .filter(([_, value]) => value)
                    .map(([key]) => (
                      <Badge key={key} variant="outline" className="text-xs">
                        {key}
                      </Badge>
                    ))}
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

{/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Usuarios</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{usuarios.length}</div>
          </CardContent>
        </Card>
        {Object.entries(rolesConfig).map(([key, config]) => (
          <Card key={key}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{config.label}s</CardTitle>
              <Shield className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{usuarios.filter((u) => u.rol === key).length}</div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Users Table */}
      <Card>
        <CardHeader>
          <CardTitle>Usuarios del Sistema</CardTitle>
          <CardDescription>Lista de usuarios registrados y sus roles</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nombre</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Rol</TableHead>
                <TableHead>Permisos</TableHead>
                <TableHead>Fecha Creación</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {usuarios.map((usuario) => (
                <TableRow key={usuario.id}>
                  <TableCell className="font-medium">{usuario.nombre}</TableCell>
                  <TableCell>{usuario.email}</TableCell>
                  <TableCell>
                    <Badge className={rolesConfig[usuario.rol].color}>{rolesConfig[usuario.rol].label}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      {Object.entries(usuario.permisos)
                        .filter(([_, value]) => value)
                        .slice(0, 3)
                        .map(([key]) => (
                          <Badge key={key} variant="outline" className="text-xs">
                            {key}
                          </Badge>
                        ))}
                      {Object.values(usuario.permisos).filter((v) => v).length > 3 && (
                        <Badge variant="outline" className="text-xs">
                          +{Object.values(usuario.permisos).filter((v) => v).length - 3}
                        </Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>{new Date(usuario.createdAt).toLocaleDateString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" onClick={() => handleSetCurrentUser(usuario)}>
                        Usar
                      </Button>
                      {canManageUsers && (
                        <Button variant="ghost" size="icon" onClick={() => handleEdit(usuario)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Add/Edit Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingUser ? "Editar Usuario" : "Nuevo Usuario"}</DialogTitle>
            <DialogDescription>Configure el rol y permisos del usuario</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre Completo *</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email *</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="rol">Rol del Usuario *</Label>
                <Select value={formData.rol} onValueChange={handleRolChange}>
                  <SelectTrigger id="rol">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(rolesConfig).map(([key, config]) => (
                      <SelectItem key={key} value={key}>
                        <div className="flex flex-col">
                          <span className="font-medium">{config.label}</span>
                          <span className="text-xs text-muted-foreground">{config.description}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="border-t pt-4">
                <h4 className="font-semibold mb-3 text-[#D4AF37]">Permisos Específicos</h4>
                <div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="verCostos"
                      checked={formData.permisos.verCostos}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, verCostos: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="verCostos"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Ver Costos
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="editarPrecios"
                      checked={formData.permisos.editarPrecios}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, editarPrecios: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="editarPrecios"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Editar Precios
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="gestionarCreditos"
                      checked={formData.permisos.gestionarCreditos}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, gestionarCreditos: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="gestionarCreditos"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Gestionar Créditos
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="verReportes"
                      checked={formData.permisos.verReportes}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, verReportes: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="verReportes"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Ver Reportes
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="gestionarUsuarios"
                      checked={formData.permisos.gestionarUsuarios}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, gestionarUsuarios: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="gestionarUsuarios"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Gestionar Usuarios
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="abrirCaja"
                      checked={formData.permisos.abrirCaja}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, abrirCaja: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="abrirCaja"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Abrir Caja
                    </label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="hacerDescuentos"
                      checked={formData.permisos.hacerDescuentos}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          permisos: { ...formData.permisos, hacerDescuentos: checked as boolean },
                        })
                      }
                    />
                    <label
                      htmlFor="hacerDescuentos"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Hacer Descuentos
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleCloseDialog}>
                Cancelar
              </Button>
              <Button type="submit">{editingUser ? "Guardar Cambios" : "Crear Usuario"}</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/webhooks/n8n/route.ts"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { event, data } = body

console.log("[v0] n8n webhook received:", { event, data })

// Process different event types
    switch (event) {
      case "nueva_venta":
        // Handle new sale event
        console.log("[v0] Processing nueva_venta event")
        break

case "bajo_inventario":
        // Handle low inventory alert
        console.log("[v0] Processing bajo_inventario event")
        break

case "nuevo_cliente":
        // Handle new customer event
        console.log("[v0] Processing nuevo_cliente event")
        break

case "pago_recibido":
        // Handle payment received event
        console.log("[v0] Processing pago_recibido event")
        break

default:
        console.log("[v0] Unknown event type:", event)
    }

return NextResponse.json({ success: true, message: "Webhook processed successfully" })
  } catch (error) {
    console.error("[v0] Webhook error:", error)
    return NextResponse.json({ success: false, error: "Failed to process webhook" }, { status: 500 })
  }
}

export async function GET() {
  return NextResponse.json({
    message: "n8n Webhook Endpoint for Valva POS",
    events: ["nueva_venta", "bajo_inventario", "nuevo_cliente", "pago_recibido"],
  })
}
[V0_FILE]typescriptreact:file="lib/webhooks.ts"
"use client"

export interface WebhookConfig {
  url: string
  eventos: string[]
  activo: boolean
}

const WEBHOOK_STORAGE_KEY = "valva_webhooks"

export const getWebhookConfig = (): WebhookConfig => {
  if (typeof window === "undefined") {
    return { url: "", eventos: [], activo: false }
  }

const data = localStorage.getItem(WEBHOOK_STORAGE_KEY)
  if (data) {
    return JSON.parse(data)
  }

return {
    url: "",
    eventos: ["nueva_venta", "bajo_inventario", "nuevo_cliente", "pago_recibido"],
    activo: false,
  }
}

export const saveWebhookConfig = (config: WebhookConfig) => {
  if (typeof window === "undefined") return
  localStorage.setItem(WEBHOOK_STORAGE_KEY, JSON.stringify(config))
}

export const enviarWebhook = async (evento: string, data: any) => {
  const config = getWebhookConfig()

if (!config.activo || !config.url || !config.eventos.includes(evento)) {
    console.log("[v0] Webhook not configured or event not enabled:", evento)
    return
  }

try {
    const response = await fetch(config.url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        event: evento,
        data,
        timestamp: new Date().toISOString(),
      }),
    })

if (!response.ok) {
      console.error("[v0] Webhook failed:", response.statusText)
    } else {
      console.log("[v0] Webhook sent successfully:", evento)
    }
  } catch (error) {
    console.error("[v0] Webhook error:", error)
  }
}
[V0_FILE]typescriptreact:file="lib/storage.ts" isEdit="true"
"use client"

import type { Product, Cliente, Venta, Usuario, Abono } from "./types"
import { enviarWebhook } from "./webhooks"

// Storage keys
const STORAGE_KEYS = {
  PRODUCTS: "valva_products",
  CLIENTES: "valva_clientes",
  VENTAS: "valva_ventas",
  USUARIOS: "valva_usuarios",
  CURRENT_USER: "valva_current_user",
  ABONOS: "valva_abonos",
}

// Products
export const getProducts = (): Product[] => {
  if (typeof window === "undefined") return []
  const data = localStorage.getItem(STORAGE_KEYS.PRODUCTS)
  return data ? JSON.parse(data) : []
}

export const saveProduct = (product: Product) => {
  const products = getProducts()
  const index = products.findIndex((p) => p.id === product.id)

const isNew = index < 0

if (index >= 0) {
    products[index] = product
  } else {
    products.push(product)
  }
  localStorage.setItem(STORAGE_KEYS.PRODUCTS, JSON.stringify(products))

if (product.stockMinimo && product.cantidad <= product.stockMinimo) {
    enviarWebhook("bajo_inventario", {
      producto: product.nombre,
      cantidad: product.cantidad,
      stockMinimo: product.stockMinimo,
      codigo: product.codigo,
    })
  }
}

export const deleteProduct = (id: string) => {
  const products = getProducts().filter((p) => p.id !== id)
  localStorage.setItem(STORAGE_KEYS.PRODUCTS, JSON.stringify(products))
}

// Clientes
export const getClientes = (): Cliente[] => {
  if (typeof window === "undefined") return []
  const data = localStorage.getItem(STORAGE_KEYS.CLIENTES)
  return data ? JSON.parse(data) : []
}

export const saveCliente = (cliente: Cliente) => {
  const clientes = getClientes()
  const index = clientes.findIndex((c) => c.id === cliente.id)

const isNew = index < 0

if (index >= 0) {
    clientes[index] = cliente
  } else {
    clientes.push(cliente)
  }
  localStorage.setItem(STORAGE_KEYS.CLIENTES, JSON.stringify(clientes))

if (isNew) {
    enviarWebhook("nuevo_cliente", {
      nombre: cliente.nombre,
      identificacion: cliente.identificacion,
      tipoCliente: cliente.tipoCliente,
      limiteCredito: cliente.limiteCredito,
    })
  }
}

export const deleteCliente = (id: string) => {
  const clientes = getClientes().filter((c) => c.id !== id)
  localStorage.setItem(STORAGE_KEYS.CLIENTES, JSON.stringify(clientes))
}

// Ventas
export const getVentas = (): Venta[] => {
  if (typeof window === "undefined") return []
  const data = localStorage.getItem(STORAGE_KEYS.VENTAS)
  return data ? JSON.parse(data) : []
}

export const saveVenta = (venta: Venta) => {
  const ventas = getVentas()
  ventas.push(venta)
  localStorage.setItem(STORAGE_KEYS.VENTAS, JSON.stringify(ventas))

enviarWebhook("nueva_venta", {
    id: venta.id,
    cliente: venta.cliente.nombre,
    total: venta.total,
    estado: venta.estado,
    productos: venta.productos.length,
    fecha: venta.fecha,
  })

const productos = getProducts()
  venta.productos.forEach((item) => {
    const producto = productos.find((p) => p.id === item.producto.id)
    if (producto) {
      producto.cantidad -= item.cantidad
      saveProduct(producto)
    }
  })
}

// Usuarios
export const getUsuarios = (): Usuario[] => {
  if (typeof window === "undefined") return []
  const data = localStorage.getItem(STORAGE_KEYS.USUARIOS)
  if (data) return JSON.parse(data)

// Create default admin user
  const defaultAdmin: Usuario = {
    id: "1",
    nombre: "Administrador",
    email: "admin@valva.com",
    rol: "administrador",
    permisos: {
      verCostos: true,
      editarPrecios: true,
      gestionarCreditos: true,
      verReportes: true,
      gestionarUsuarios: true,
      abrirCaja: true,
      hacerDescuentos: true,
    },
    createdAt: new Date().toISOString(),
  }
  localStorage.setItem(STORAGE_KEYS.USUARIOS, JSON.stringify([defaultAdmin]))
  return [defaultAdmin]
}

export const saveUsuario = (usuario: Usuario) => {
  const usuarios = getUsuarios()
  const index = usuarios.findIndex((u) => u.id === usuario.id)
  if (index >= 0) {
    usuarios[index] = usuario
  } else {
    usuarios.push(usuario)
  }
  localStorage.setItem(STORAGE_KEYS.USUARIOS, JSON.stringify(usuarios))
}

export const getCurrentUser = (): Usuario | null => {
  if (typeof window === "undefined") return null
  const data = localStorage.getItem(STORAGE_KEYS.CURRENT_USER)
  if (data) return JSON.parse(data)

// Set default admin as current user
  const usuarios = getUsuarios()
  if (usuarios.length > 0) {
    localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(usuarios[0]))
    return usuarios[0]
  }
  return null
}

export const setCurrentUser = (usuario: Usuario) => {
  localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(usuario))
}

// Abonos
export const getAbonos = (): Abono[] => {
  if (typeof window === "undefined") return []
  const data = localStorage.getItem(STORAGE_KEYS.ABONOS)
  return data ? JSON.parse(data) : []
}

export const saveAbono = (abono: Abono, clienteId: string) => {
  const abonos = getAbonos()
  abonos.push(abono)
  localStorage.setItem(STORAGE_KEYS.ABONOS, JSON.stringify(abonos))

// Update client balance
  const clientes = getClientes()
  const cliente = clientes.find((c) => c.id === clienteId)
  if (cliente) {
    cliente.saldoActual = Math.max(0, cliente.saldoActual - abono.monto)
    saveCliente(cliente)
  }

enviarWebhook("pago_recibido", {
    cliente: cliente?.nombre,
    monto: abono.monto,
    metodoPago: abono.metodoPago,
    saldoRestante: cliente?.saldoActual,
    fecha: abono.fecha,
  })
}

export const getAbonosByCliente = (clienteId: string): Abono[] => {
  return getAbonos().filter((a) => a.clienteId === clienteId)
}
[V0_FILE]typescriptreact:file="app/configuracion/webhooks/page.tsx"
import { AppSidebar } from "@/components/app-sidebar"
import { WebhooksConfig } from "@/components/webhooks-config"
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"

export default function WebhooksPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <WebhooksConfig />
      </SidebarInset>
    </SidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="components/webhooks-config.tsx"
"use client"

export function WebhooksConfig() {
  const [config, setConfig] = useState({
    url: "",
    eventos: [] as string[],
    activo: false,
  })

const [testStatus, setTestStatus] = useState<"idle" | "testing" | "success" | "error">("idle")

const eventosDisponibles = [
    { id: "nueva_venta", label: "Nueva Venta", description: "Se dispara al completar una venta" },
    { id: "bajo_inventario", label: "Inventario Bajo", description: "Alerta cuando un producto llega al stock mínimo" },
    { id: "nuevo_cliente", label: "Nuevo Cliente", description: "Se dispara al registrar un cliente" },
    { id: "pago_recibido", label: "Pago Recibido", description: "Se dispara al registrar un abono" },
  ]

useEffect(() => {
    setConfig(getWebhookConfig())
  }, [])

const handleToggleEvento = (eventoId: string) => {
    const nuevosEventos = config.eventos.includes(eventoId)
      ? config.eventos.filter((e) => e !== eventoId)
      : [...config.eventos, eventoId]

const newConfig = { ...config, eventos: nuevosEventos }
    setConfig(newConfig)
    saveWebhookConfig(newConfig)
  }

const handleSaveUrl = () => {
    saveWebhookConfig(config)
    alert("Configuración guardada")
  }

const handleToggleActivo = (activo: boolean) => {
    const newConfig = { ...config, activo }
    setConfig(newConfig)
    saveWebhookConfig(newConfig)
  }

const handleTestWebhook = async () => {
    if (!config.url) {
      alert("Por favor ingrese una URL de webhook")
      return
    }

setTestStatus("testing")

try {
      const response = await fetch(config.url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          event: "test",
          data: {
            message: "Test desde Valva POS",
            timestamp: new Date().toISOString(),
          },
        }),
      })

if (response.ok) {
        setTestStatus("success")
        setTimeout(() => setTestStatus("idle"), 3000)
      } else {
        setTestStatus("error")
        setTimeout(() => setTestStatus("idle"), 3000)
      }
    } catch (error) {
      console.error("[v0] Test webhook error:", error)
      setTestStatus("error")
      setTimeout(() => setTestStatus("idle"), 3000)
    }
  }

return (
    <div className="flex flex-col gap-6 p-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Configuración de Webhooks</h1>
        <p className="text-muted-foreground">Integración con n8n y otros servicios</p>
      </div>

{/* Main Config */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Webhook Principal</CardTitle>
              <CardDescription>Configure la URL de su flujo de n8n o servicio externo</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Label htmlFor="webhook-activo">Activo</Label>
              <Switch id="webhook-activo" checked={config.activo} onCheckedChange={handleToggleActivo} />
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="webhook-url">URL del Webhook</Label>
            <div className="flex gap-2">
              <Input
                id="webhook-url"
                placeholder="https://tu-dominio.app.n8n.cloud/webhook/valva-pos"
                value={config.url}
                onChange={(e) => setConfig({ ...config, url: e.target.value })}
              />
              <Button onClick={handleSaveUrl}>Guardar</Button>
            </div>
            <p className="text-sm text-muted-foreground">
              Ingrese la URL de su webhook de n8n o cualquier servicio compatible
            </p>
          </div>

<div className="flex gap-2">
            <Button variant="outline" onClick={handleTestWebhook} disabled={testStatus === "testing" || !config.url}>
              <Webhook className="mr-2 h-4 w-4" />
              {testStatus === "testing" ? "Probando..." : "Probar Webhook"}
            </Button>

{testStatus === "success" && (
              <Badge className="bg-green-500">
                <Check className="h-3 w-3 mr-1" />
                Conexión exitosa
              </Badge>
            )}

{testStatus === "error" && (
              <Badge variant="destructive">
                <X className="h-3 w-3 mr-1" />
                Error de conexión
              </Badge>
            )}
          </div>
        </CardContent>
      </Card>

{/* Events Configuration */}
      <Card>
        <CardHeader>
          <CardTitle>Eventos Disponibles</CardTitle>
          <CardDescription>Seleccione qué eventos desea enviar al webhook</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {eventosDisponibles.map((evento) => (
              <div key={evento.id} className="flex items-center justify-between rounded-lg border p-4">
                <div className="flex items-center gap-4">
                  <Switch
                    checked={config.eventos.includes(evento.id)}
                    onCheckedChange={() => handleToggleEvento(evento.id)}
                  />
                  <div>
                    <p className="font-medium">{evento.label}</p>
                    <p className="text-sm text-muted-foreground">{evento.description}</p>
                  </div>
                </div>
                {config.eventos.includes(evento.id) && <Badge variant="outline">Activo</Badge>}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Info Card */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5" />
            Información sobre Webhooks
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <p>
            Los webhooks permiten enviar datos automáticamente a n8n u otros servicios cuando ocurren eventos
            importantes en su sistema POS.
          </p>
          <div className="rounded-lg bg-secondary p-4 space-y-2">
            <p className="font-medium">Formato de datos enviados:</p>
            <pre className="text-xs overflow-x-auto">
              {JSON.stringify(
                {
                  event: "nueva_venta",
                  data: {
                    id: "123456",
                    cliente: "Juan Pérez",
                    total: 150000,
                    estado: "completada",
                  },
                  timestamp: "2024-01-15T10:30:00Z",
                },
                null,
                2,
              )}
            </pre>
          </div>
          <p className="text-muted-foreground">
            Configure un flujo de trabajo en n8n que reciba estos datos y realice las acciones que necesite, como enviar
            notificaciones, actualizar hojas de cálculo, o sincronizar con otros sistemas.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import * as React from "react"
import {
  LayoutDashboard,
  ShoppingCart,
  CreditCard,
  Users,
  Package,
  FileText,
  DollarSign,
  Sparkles,
  ChevronDown,
  Tag,
  Shield,
  Settings,
} from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
} from "@/components/ui/sidebar"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

const menuItems = [
  { title: "Dashboard", icon: LayoutDashboard, href: "/" },
  { title: "Caja", icon: DollarSign, href: "/caja" },
  { title: "Ventas (POS)", icon: ShoppingCart, href: "/ventas" },
  { title: "Compras", icon: Package, href: "/compras" },
  { title: "Proveedores", icon: CreditCard, href: "/proveedores" },
  { title: "Clientes", icon: Users, href: "/clientes" },
  { title: "Reportes", icon: FileText, href: "/reportes" },
  { title: "Usuarios y Roles", icon: Shield, href: "/usuarios" },
  { title: "Webhooks", icon: Settings, href: "/configuracion/webhooks" },
]

const inventorySubmenu = [
  { title: "Productos", href: "/inventario/productos" },
  { title: "Descuentos", href: "/inventario/descuentos" },
]

export function AppSidebar() {
  const [activeItem, setActiveItem] = React.useState("/")

return (
    <Sidebar>
      <SidebarHeader className="border-b border-sidebar-border">
        <div className="flex items-center gap-3 px-4 py-6">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
            <Sparkles className="h-6 w-6 text-primary-foreground" />
          </div>
          <div>
            <h1 className="text-xl font-bold tracking-tight text-sidebar-foreground">Valva</h1>
            <p className="text-xs text-sidebar-foreground/70">Sistema POS</p>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Menú Principal</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={activeItem === item.href}
                    onClick={() => setActiveItem(item.href)}
                  >
                    <a href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}

<Collapsible className="group/collapsible">
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Tag className="h-4 w-4" />
                      <span>Inventario</span>
                      <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {inventorySubmenu.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                          <SidebarMenuSubButton
                            asChild
                            isActive={activeItem === subItem.href}
                            onClick={() => setActiveItem(subItem.href)}
                          >
                            <a href={subItem.href}>
                              <span>{subItem.title}</span>
                            </a>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}</article></body></html>