112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_Ccgi4x5APDW",null],["b_6gbP1QYjtQV",null],["b_ZM9R1WUnhVf",null],["b_VWtALv4NJaG",null]] 118:[["b_Ccgi4x5APDW",{"templateVersionId":null,"templateCanonId":null}],["b_6gbP1QYjtQV",{"templateVersionId":null,"templateCanonId":null}],["b_ZM9R1WUnhVf",{"templateVersionId":null,"templateCanonId":null}],["b_VWtALv4NJaG",{"templateVersionId":null,"templateCanonId":null}]] 119:[["uE2JjT402dX","$D2025-11-18T22:13:58.944Z"],["b_zFDYQL0nwD1","$D2025-11-18T22:22:13.519Z"],["b_zXJsEr4mAOG","$D2025-11-18T22:59:55.847Z"],["b_53yfXamglyI","$D2025-11-18T23:00:43.395Z"],["b_XJQkEXGFyLp","$D2025-11-18T23:02:25.204Z"],["b_vqiE4k0sx4H","$D2025-11-18T23:02:50.145Z"],["b_8sHDo8kr9Qw","$D2025-11-18T23:26:28.455Z"],["b_4EK6A7hUK76","$D2025-11-19T15:32:00.898Z"],["b_wKGRmP3Gfru","$D2025-11-19T15:37:19.062Z"],["b_IVQuTncfjG1","$D2025-11-19T15:40:18.862Z"],["b_ye62GPFO8fj","$D2025-11-19T21:22:19.987Z"],["b_Ccgi4x5APDW","$D2025-11-19T21:36:39.573Z"],["b_6gbP1QYjtQV","$D2025-11-19T21:45:19.053Z"],["b_ZM9R1WUnhVf","$D2025-11-19T21:46:50.987Z"],["b_VWtALv4NJaG","$D2025-11-19T21:50:21.628Z"]] 11a:[["b_Ccgi4x5APDW",false],["b_6gbP1QYjtQV",false],["b_ZM9R1WUnhVf",false],["b_VWtALv4NJaG",false]] 11b:[["b_Ccgi4x5APDW","$undefined"],["b_6gbP1QYjtQV","$undefined"],["b_ZM9R1WUnhVf","$undefined"],["b_VWtALv4NJaG","$undefined"]] 11c:[["b_Ccgi4x5APDW",null],["b_6gbP1QYjtQV",null],["b_ZM9R1WUnhVf",null],["b_VWtALv4NJaG",null]] 11d:[["b_Ccgi4x5APDW",true],["b_6gbP1QYjtQV",true],["b_ZM9R1WUnhVf",true],["b_VWtALv4NJaG",true]] 11e:[["b_Ccgi4x5APDW",true],["b_6gbP1QYjtQV",true],["b_ZM9R1WUnhVf",true],["b_VWtALv4NJaG",true]] 11f:[] 120:T150300,[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 20.5 90.2% 48.2%; --primary-foreground: 60 9.1% 97.8%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 20.5 90.2% 48.2%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 20.5 90.2% 48.2%; --primary-foreground: 60 9.1% 97.8%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 20.5 90.2% 48.2%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [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 { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

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

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

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

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

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

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/financial-charts.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import {
  ResponsiveContainer,
  Line,
  AreaChart,
  Area,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts"

// Datos de ingresos vs costos
const ingresosVsCostos = [
  { mes: "Ene", ingresos: 45000, costosFijos: 12000, costosVariables: 18000, utilidad: 15000 },
  { mes: "Feb", ingresos: 52000, costosFijos: 12000, costosVariables: 21000, utilidad: 19000 },
  { mes: "Mar", ingresos: 48000, costosFijos: 12000, costosVariables: 19000, utilidad: 17000 },
  { mes: "Abr", ingresos: 58000, costosFijos: 12000, costosVariables: 24000, utilidad: 22000 },
  { mes: "May", ingresos: 62000, costosFijos: 12000, costosVariables: 26000, utilidad: 24000 },
  { mes: "Jun", ingresos: 55000, costosFijos: 12000, costosVariables: 23000, utilidad: 20000 },
  { mes: "Jul", ingresos: 68000, costosFijos: 12000, costosVariables: 29000, utilidad: 27000 },
  { mes: "Ago", ingresos: 71000, costosFijos: 12000, costosVariables: 31000, utilidad: 28000 },
  { mes: "Sep", ingresos: 65000, costosFijos: 12000, costosVariables: 28000, utilidad: 25000 },
  { mes: "Oct", ingresos: 73000, costosFijos: 12000, costosVariables: 32000, utilidad: 29000 },
  { mes: "Nov", ingresos: 69000, costosFijos: 12000, costosVariables: 30000, utilidad: 27000 },
  { mes: "Dic", ingresos: 75000, costosFijos: 12000, costosVariables: 33000, utilidad: 30000 },
]

// Datos de rentabilidad por producto
const rentabilidadProductos = [
  { producto: "Kion Orgánico", ventas: 28500, costos: 18200, margen: 36.1, volumen: 1200 },
  { producto: "Cúrcuma Premium", ventas: 22800, costos: 14600, margen: 36.0, volumen: 950 },
  { producto: "Kion Deshidratado", ventas: 18900, costos: 11400, margen: 39.7, volumen: 680 },
  { producto: "Cúrcuma Molida", ventas: 15600, costos: 9800, margen: 37.2, volumen: 520 },
  { producto: "Mix Especias", ventas: 12400, costos: 8100, margen: 34.7, volumen: 380 },
]

// Datos de distribución de costos
const distribucionCostos = [
  { categoria: "Materia Prima", valor: 45, monto: 33750 },
  { categoria: "Mano de Obra", valor: 25, monto: 18750 },
  { categoria: "Procesamiento", valor: 15, monto: 11250 },
  { categoria: "Empaquetado", valor: 8, monto: 6000 },
  { categoria: "Transporte", valor: 4, monto: 3000 },
  { categoria: "Administrativos", valor: 3, monto: 2250 },
]

// Datos de flujo de caja
const flujoCaja = [
  { semana: "S1", entradas: 18500, salidas: 12300, saldo: 6200, acumulado: 6200 },
  { semana: "S2", entradas: 22100, salidas: 15800, saldo: 6300, acumulado: 12500 },
  { semana: "S3", entradas: 19800, salidas: 14200, saldo: 5600, acumulado: 18100 },
  { semana: "S4", entradas: 25600, salidas: 18900, saldo: 6700, acumulado: 24800 },
]

const COLORS = ["#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#ef4444"]

export function IngresosVsCostosChart() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Ingresos vs Costos</h3>
        <p className="text-sm text-muted-foreground">Análisis mensual de rentabilidad</p>
      </div>
      <div className="h-[300px]">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={ingresosVsCostos}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="mes" />
            <YAxis />
            <Tooltip
              formatter={(value: number) => [`$${value.toLocaleString()}`, ""]}
              labelFormatter={(label) => `Mes: ${label}`}
            />
            <Legend />
            <Area type="monotone" dataKey="ingresos" stackId="1" stroke="#22c55e" fill="#22c55e" fillOpacity={0.6} />
            <Area type="monotone" dataKey="costosFijos" stackId="2" stroke="#ef4444" fill="#ef4444" fillOpacity={0.6} />
            <Area
              type="monotone"
              dataKey="costosVariables"
              stackId="2"
              stroke="#f97316"
              fill="#f97316"
              fillOpacity={0.6}
            />
            <Line type="monotone" dataKey="utilidad" stroke="#3b82f6" strokeWidth={3} />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </Card>
  )
}

export function RentabilidadProductosChart() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Rentabilidad por Producto</h3>
        <p className="text-sm text-muted-foreground">Margen de ganancia y volumen de ventas</p>
      </div>
      <div className="h-[300px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={rentabilidadProductos}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="producto" angle={-45} textAnchor="end" height={80} />
            <YAxis yAxisId="left" />
            <YAxis yAxisId="right" orientation="right" />
            <Tooltip
              formatter={(value: number, name: string) => {
                if (name === "margen") return [`${value}%`, "Margen"]
                return [`$${value.toLocaleString()}`, name === "ventas" ? "Ventas" : "Costos"]
              }}
            />
            <Legend />
            <Bar yAxisId="left" dataKey="ventas" fill="#22c55e" name="Ventas" />
            <Bar yAxisId="left" dataKey="costos" fill="#ef4444" name="Costos" />
            <Line yAxisId="right" dataKey="margen" stroke="#3b82f6" strokeWidth={2} name="Margen %" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  )
}

export function DistribucionCostosChart() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Distribución de Costos</h3>
        <p className="text-sm text-muted-foreground">Desglose por categoría de gastos</p>
      </div>
      <div className="grid md:grid-cols-2 gap-4">
        <div className="h-[250px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={distribucionCostos}
                cx="50%"
                cy="50%"
                outerRadius={80}
                fill="#8884d8"
                dataKey="valor"
                label={({ categoria, valor }) => `${categoria}: ${valor}%`}
              >
                {distribucionCostos.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip formatter={(value: number) => [`${value}%`, "Porcentaje"]} />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className="space-y-3">
          {distribucionCostos.map((item, index) => (
            <div key={item.categoria} className="flex items-center justify-between p-2 rounded-lg bg-muted/20">
              <div className="flex items-center gap-2">
                <div className={`w-3 h-3 rounded-full`} style={{ backgroundColor: COLORS[index] }} />
                <span className="text-sm font-medium">{item.categoria}</span>
              </div>
              <div className="text-right">
                <div className="text-sm font-bold">${item.monto.toLocaleString()}</div>
                <div className="text-xs text-muted-foreground">{item.valor}%</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  )
}

export function FlujoCajaChart() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Flujo de Caja Semanal</h3>
        <p className="text-sm text-muted-foreground">Entradas, salidas y saldo acumulado</p>
      </div>
      <div className="h-[300px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={flujoCaja}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="semana" />
            <YAxis />
            <Tooltip formatter={(value: number) => [`$${value.toLocaleString()}`, ""]} />
            <Legend />
            <Bar dataKey="entradas" fill="#22c55e" name="Entradas" />
            <Bar dataKey="salidas" fill="#ef4444" name="Salidas" />
            <Line dataKey="acumulado" stroke="#3b82f6" strokeWidth={3} name="Saldo Acumulado" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/kpi-cards.tsx" isMerged="true"
import type React from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { TrendingUp, TrendingDown, DollarSign, Percent, Target, Clock, Package, CheckCircle } from "lucide-react"

interface KPICardProps {
  titulo: string
  valor: string
  meta?: string
  cambio: {
    valor: string
    porcentaje: string
    positivo: boolean
  }
  progreso?: number
  icono: React.ElementType
  color: string
  descripcion?: string
}

export function KPICard({ titulo, valor, meta, cambio, progreso, icono: Icon, color, descripcion }: KPICardProps) {
  return (
    <Card className="p-4">
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2">
          <Icon className={`h-5 w-5 ${color}`} />
          <h3 className="text-sm font-medium text-muted-foreground">{titulo}</h3>
        </div>
        {cambio.positivo ? (
          <TrendingUp className="h-4 w-4 text-green-500" />
        ) : (
          <TrendingDown className="h-4 w-4 text-red-500" />
        )}
      </div>

<div className="space-y-2">
        <div className="flex items-baseline gap-2">
          <p className="text-2xl font-bold">{valor}</p>
          {meta && <span className="text-sm text-muted-foreground">/ {meta}</span>}
        </div>

<div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">
            {cambio.positivo ? "+" : ""}
            {cambio.valor}
          </span>
          <Badge className={cambio.positivo ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}>
            {cambio.porcentaje}
          </Badge>
        </div>

{progreso !== undefined && (
          <div className="space-y-1">
            <Progress value={progreso} className="h-2" />
            <div className="text-xs text-muted-foreground text-right">{progreso}% de la meta</div>
          </div>
        )}

{descripcion && <p className="text-xs text-muted-foreground">{descripcion}</p>}
      </div>
    </Card>
  )
}

export function KPIDashboard() {
  const kpis = [
    {
      titulo: "Ingresos Mensuales",
      valor: "$75,280",
      meta: "$80,000",
      cambio: { valor: "$5,240", porcentaje: "+7.5%", positivo: true },
      progreso: 94,
      icono: DollarSign,
      color: "text-green-500",
      descripcion: "Meta mensual casi alcanzada",
    },
    {
      titulo: "Margen de Utilidad",
      valor: "38.2%",
      meta: "40%",
      cambio: { valor: "2.1%", porcentaje: "+5.8%", positivo: true },
      progreso: 95,
      icono: Percent,
      color: "text-blue-500",
      descripcion: "Excelente rentabilidad",
    },
    {
      titulo: "Eficiencia Operativa",
      valor: "92%",
      meta: "95%",
      cambio: { valor: "3%", porcentaje: "+3.4%", positivo: true },
      progreso: 97,
      icono: Target,
      color: "text-purple-500",
      descripcion: "Procesos optimizados",
    },
    {
      titulo: "Tiempo Promedio Proceso",
      valor: "4.2 días",
      meta: "4.0 días",
      cambio: { valor: "0.3 días", porcentaje: "-6.7%", positivo: false },
      progreso: 95,
      icono: Clock,
      color: "text-yellow-500",
      descripcion: "Necesita optimización",
    },
    {
      titulo: "Lotes Completados",
      valor: "156",
      meta: "160",
      cambio: { valor: "12", porcentaje: "+8.3%", positivo: true },
      progreso: 97,
      icono: Package,
      color: "text-orange-500",
      descripcion: "Producción estable",
    },
    {
      titulo: "Satisfacción Clientes",
      valor: "4.8/5",
      meta: "4.5/5",
      cambio: { valor: "0.2", porcentaje: "+4.3%", positivo: true },
      progreso: 96,
      icono: CheckCircle,
      color: "text-emerald-500",
      descripción: "Excelente calidad",
    },
  ]

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {kpis.map((kpi, index) => (
        <KPICard key={index} {...kpi} />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/operational-metrics.tsx" isMerged="true"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Clock, AlertTriangle, CheckCircle, TrendingUp, TrendingDown, Target, Truck } from "lucide-react"

const metricsOperacionales = [
  {
    categoria: "Producción",
    metricas: [
      { nombre: "Lotes en Proceso", valor: 28, meta: 30, unidad: "lotes", tendencia: "up" },
      { nombre: "Capacidad Utilizada", valor: 85, meta: 90, unidad: "%", tendencia: "up" },
      { nombre: "Tiempo Ciclo Promedio", valor: 4.2, meta: 4.0, unidad: "días", tendencia: "down" },
      { nombre: "Eficiencia General", valor: 92, meta: 95, unidad: "%", tendencia: "up" },
    ],
  },
  {
    categoria: "Calidad",
    metricas: [
      { nombre: "Lotes Aprobados", valor: 98.5, meta: 99, unidad: "%", tendencia: "up" },
      { nombre: "Rechazos", valor: 1.5, meta: 1, unidad: "%", tendencia: "down" },
      { nombre: "Reprocesos", valor: 2.8, meta: 2, unidad: "%", tendencia: "down" },
      { nombre: "Certificaciones", valor: 100, meta: 100, unidad: "%", tendencia: "stable" },
    ],
  },
  {
    categoria: "Logística",
    metricas: [
      { nombre: "Entregas a Tiempo", valor: 94, meta: 95, unidad: "%", tendencia: "up" },
      { nombre: "Costo por Envío", valor: 45, meta: 40, unidad: "$", tendencia: "down" },
      { nombre: "Rotación Inventario", valor: 12, meta: 15, unidad: "veces/año", tendencia: "up" },
      { nombre: "Stock Disponible", valor: 87, meta: 85, unidad: "%", tendencia: "up" },
    ],
  },
]

const alertasOperacionales = [
  {
    tipo: "Crítico",
    mensaje: "Capacidad de Almacén C al 95%",
    area: "Logística",
    tiempo: "Hace 1 hora",
    accion: "Programar despachos urgentes",
    icono: AlertTriangle,
    color: "text-red-500",
  },
  {
    tipo: "Advertencia",
    mensaje: "Tiempo de proceso aumentó 15%",
    area: "Producción",
    tiempo: "Hace 3 horas",
    accion: "Revisar línea de deshidratado",
    icono: Clock,
    color: "text-yellow-500",
  },
  {
    tipo: "Info",
    mensaje: "Nueva certificación orgánica aprobada",
    area: "Calidad",
    tiempo: "Hace 6 horas",
    accion: "Actualizar documentación",
    icono: CheckCircle,
    color: "text-green-500",
  },
  {
    tipo: "Advertencia",
    mensaje: "Proveedor principal con retraso",
    area: "Compras",
    tiempo: "Hace 8 horas",
    accion: "Contactar proveedor alternativo",
    icono: Truck,
    color: "text-yellow-500",
  },
]

const rendimientoPersonal = [
  {
    nombre: "Juan Pérez",
    area: "Producción",
    eficiencia: 96,
    lotesCompletados: 24,
    horasExtras: 8,
    calificacion: 4.8,
  },
  {
    nombre: "María García",
    area: "Control Calidad",
    eficiencia: 98,
    lotesCompletados: 18,
    horasExtras: 4,
    calificacion: 4.9,
  },
  {
    nombre: "Carlos López",
    area: "Empaquetado",
    eficiencia: 94,
    lotesCompletados: 32,
    horasExtras: 12,
    calificacion: 4.7,
  },
  {
    nombre: "Ana Ruiz",
    area: "Logística",
    eficiencia: 92,
    lotesCompletados: 28,
    horasExtras: 6,
    calificacion: 4.6,
  },
]

const getTendenciaIcon = (tendencia: string) => {
  switch (tendencia) {
    case "up":
      return <TrendingUp className="h-3 w-3 text-green-500" />
    case "down":
      return <TrendingDown className="h-3 w-3 text-red-500" />
    default:
      return <Target className="h-3 w-3 text-gray-500" />
  }
}

const getTendenciaColor = (tendencia: string) => {
  switch (tendencia) {
    case "up":
      return "text-green-500"
    case "down":
      return "text-red-500"
    default:
      return "text-gray-500"
  }
}

export function MetricasOperacionales() {
  return (
    <div className="grid gap-6 lg:grid-cols-3">
      {metricsOperacionales.map((categoria) => (
        <Card key={categoria.categoria} className="p-6">
          <div className="mb-4">
            <h3 className="text-lg font-semibold">{categoria.categoria}</h3>
            <p className="text-sm text-muted-foreground">Métricas operacionales clave</p>
          </div>
          <div className="space-y-4">
            {categoria.metricas.map((metrica) => {
              const progreso = metrica.meta ? (metrica.valor / metrica.meta) * 100 : 0
              const cumpleMeta = metrica.valor >= metrica.meta

return (
                <div key={metrica.nombre} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">{metrica.nombre}</span>
                    <div className="flex items-center gap-1">
                      {getTendenciaIcon(metrica.tendencia)}
                      <span className={`text-sm font-bold ${getTendenciaColor(metrica.tendencia)}`}>
                        {metrica.valor}
                        {metrica.unidad}
                      </span>
                    </div>
                  </div>
                  {metrica.meta && (
                    <div className="space-y-1">
                      <Progress value={Math.min(progreso, 100)} className="h-2" />
                      <div className="flex justify-between text-xs text-muted-foreground">
                        <span>
                          Meta: {metrica.meta}
                          {metrica.unidad}
                        </span>
                        <Badge
                          className={cumpleMeta ? "bg-green-500/10 text-green-500" : "bg-yellow-500/10 text-yellow-500"}
                        >
                          {cumpleMeta ? "Cumplida" : "Pendiente"}
                        </Badge>
                      </div>
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </Card>
      ))}
    </div>
  )
}

export function AlertasOperacionales() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Alertas Operacionales</h3>
        <p className="text-sm text-muted-foreground">Notificaciones y acciones requeridas</p>
      </div>
      <div className="space-y-3">
        {alertasOperacionales.map((alerta, index) => {
          const Icon = alerta.icono
          return (
            <div key={index} className="flex items-start gap-3 p-3 rounded-lg bg-muted/20">
              <Icon className={`h-5 w-5 ${alerta.color} mt-0.5`} />
              <div className="flex-1 space-y-1">
                <div className="flex items-center justify-between">
                  <Badge
                    className={
                      alerta.tipo === "Crítico"
                        ? "bg-red-500/10 text-red-500"
                        : alerta.tipo === "Advertencia"
                          ? "bg-yellow-500/10 text-yellow-500"
                          : "bg-blue-500/10 text-blue-500"
                    }
                  >
                    {alerta.tipo}
                  </Badge>
                  <span className="text-xs text-muted-foreground">{alerta.tiempo}</span>
                </div>
                <p className="text-sm font-medium">{alerta.mensaje}</p>
                <div className="flex items-center justify-between">
                  <span className="text-xs text-muted-foreground">Área: {alerta.area}</span>
                  <span className="text-xs font-medium text-primary">{alerta.accion}</span>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </Card>
  )
}

export function RendimientoPersonal() {
  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold">Rendimiento del Personal</h3>
        <p className="text-sm text-muted-foreground">Métricas de productividad por empleado</p>
      </div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Empleado</TableHead>
            <TableHead>Área</TableHead>
            <TableHead>Eficiencia</TableHead>
            <TableHead>Lotes</TableHead>
            <TableHead>H. Extras</TableHead>
            <TableHead>Rating</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rendimientoPersonal.map((empleado) => (
            <TableRow key={empleado.nombre}>
              <TableCell className="font-medium">{empleado.nombre}</TableCell>
              <TableCell>
                <Badge variant="outline">{empleado.area}</Badge>
              </TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  <Progress value={empleado.eficiencia} className="w-16 h-2" />
                  <span className="text-sm font-medium">{empleado.eficiencia}%</span>
                </div>
              </TableCell>
              <TableCell className="text-center">{empleado.lotesCompletados}</TableCell>
              <TableCell className="text-center">{empleado.horasExtras}h</TableCell>
              <TableCell>
                <div className="flex items-center gap-1">
                  <span className="text-sm font-medium">{empleado.calificacion}</span>
                  <span className="text-yellow-500">★</span>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/real-time-dashboard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import {
  Activity,
  RefreshCw,
  Wifi,
  WifiOff,
  Package,
  Users,
  AlertTriangle,
  CheckCircle,
  TrendingUp,
} from "lucide-react"

interface RealTimeData {
  timestamp: string
  lotesActivos: number
  personalActivo: number
  produccionHoy: number
  alertasActivas: number
  eficienciaGeneral: number
  conexionEstable: boolean
}

export function RealTimeDashboard() {
  const [data, setData] = useState<RealTimeData>({
    timestamp: new Date().toLocaleTimeString(),
    lotesActivos: 28,
    personalActivo: 24,
    produccionHoy: 1250,
    alertasActivas: 3,
    eficienciaGeneral: 92,
    conexionEstable: true,
  })

const [isUpdating, setIsUpdating] = useState(false)
  const [lastUpdate, setLastUpdate] = useState(new Date())

// Simulación de actualización en tiempo real
  useEffect(() => {
    const interval = setInterval(() => {
      setData((prev) => ({
        ...prev,
        timestamp: new Date().toLocaleTimeString(),
        lotesActivos: prev.lotesActivos + Math.floor(Math.random() * 3) - 1,
        personalActivo: Math.max(20, prev.personalActivo + Math.floor(Math.random() * 3) - 1),
        produccionHoy: prev.produccionHoy + Math.floor(Math.random() * 50),
        alertasActivas: Math.max(0, prev.alertasActivas + Math.floor(Math.random() * 2) - 1),
        eficienciaGeneral: Math.max(85, Math.min(98, prev.eficienciaGeneral + Math.random() * 2 - 1)),
        conexionEstable: Math.random() > 0.1, // 90% de tiempo conectado
      }))
      setLastUpdate(new Date())
    }, 5000) // Actualizar cada 5 segundos

return () => clearInterval(interval)
  }, [])

const handleManualRefresh = async () => {
    setIsUpdating(true)
    // Simular llamada a API
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setIsUpdating(false)
    setLastUpdate(new Date())
  }

const estadoProduccion = [
    { etapa: "Recepción", activos: 5, capacidad: 8, porcentaje: 62.5 },
    { etapa: "Procesamiento", activos: 12, capacidad: 15, porcentaje: 80 },
    { etapa: "Empaquetado", activos: 8, capacidad: 10, porcentaje: 80 },
    { etapa: "Control Calidad", activos: 3, capacidad: 5, porcentaje: 60 },
  ]

const alertasEnVivo = [
    {
      id: 1,
      tipo: "warning",
      mensaje: "Temperatura alta en Zona 2",
      tiempo: "Hace 2 min",
      activa: true,
    },
    {
      id: 2,
      tipo: "info",
      mensaje: "Lote LOT-2024-018 completado",
      tiempo: "Hace 5 min",
      activa: false,
    },
    {
      id: 3,
      tipo: "error",
      mensaje: "Stock crítico: Kion Orgánico",
      tiempo: "Hace 8 min",
      activa: true,
    },
  ]

return (
    <div className="space-y-6">
      {/* Header de Estado en Tiempo Real */}
      <Card className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Activity className="h-5 w-5 text-green-500" />
              <span className="font-semibold">Dashboard en Tiempo Real</span>
            </div>
            <div className="flex items-center gap-2">
              {data.conexionEstable ? (
                <Wifi className="h-4 w-4 text-green-500" />
              ) : (
                <WifiOff className="h-4 w-4 text-red-500" />
              )}
              <span className="text-sm text-muted-foreground">
                {data.conexionEstable ? "Conectado" : "Desconectado"}
              </span>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-sm text-muted-foreground">Última actualización: {lastUpdate.toLocaleTimeString()}</div>
            <Button variant="outline" size="sm" onClick={handleManualRefresh} disabled={isUpdating}>
              <RefreshCw className={`h-4 w-4 ${isUpdating ? "animate-spin" : ""}`} />
              Actualizar
            </Button>
          </div>
        </div>
      </Card>

{/* Métricas en Tiempo Real */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
        <Card className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <Package className="h-4 w-4 text-blue-500" />
            <span className="text-sm font-medium">Lotes Activos</span>
          </div>
          <div className="text-2xl font-bold">{data.lotesActivos}</div>
          <div className="text-xs text-muted-foreground">En proceso ahora</div>
        </Card>

<Card className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <Users className="h-4 w-4 text-green-500" />
            <span className="text-sm font-medium">Personal Activo</span>
          </div>
          <div className="text-2xl font-bold">{data.personalActivo}</div>
          <div className="text-xs text-muted-foreground">Trabajando ahora</div>
        </Card>

<Card className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <TrendingUp className="h-4 w-4 text-purple-500" />
            <span className="text-sm font-medium">Producción Hoy</span>
          </div>
          <div className="text-2xl font-bold">{data.produccionHoy.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground">kg procesados</div>
        </Card>

<Card className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle className="h-4 w-4 text-yellow-500" />
            <span className="text-sm font-medium">Alertas Activas</span>
          </div>
          <div className="text-2xl font-bold">{data.alertasActivas}</div>
          <div className="text-xs text-muted-foreground">Requieren atención</div>
        </Card>

<Card className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <CheckCircle className="h-4 w-4 text-emerald-500" />
            <span className="text-sm font-medium">Eficiencia</span>
          </div>
          <div className="text-2xl font-bold">{data.eficienciaGeneral.toFixed(1)}%</div>
          <div className="text-xs text-muted-foreground">General del día</div>
        </Card>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* Estado de Producción en Tiempo Real */}
        <Card className="p-6">
          <div className="mb-4">
            <h3 className="text-lg font-semibold">Estado de Producción</h3>
            <p className="text-sm text-muted-foreground">Capacidad utilizada por etapa</p>
          </div>
          <div className="space-y-4">
            {estadoProduccion.map((etapa) => (
              <div key={etapa.etapa} className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="font-medium">{etapa.etapa}</span>
                  <span className="text-sm text-muted-foreground">
                    {etapa.activos}/{etapa.capacidad}
                  </span>
                </div>
                <Progress value={etapa.porcentaje} className="h-2" />
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>{etapa.porcentaje.toFixed(1)}% utilizado</span>
                  <Badge
                    className={
                      etapa.porcentaje > 80
                        ? "bg-red-500/10 text-red-500"
                        : etapa.porcentaje > 60
                          ? "bg-yellow-500/10 text-yellow-500"
                          : "bg-green-500/10 text-green-500"
                    }
                  >
                    {etapa.porcentaje > 80 ? "Alto" : etapa.porcentaje > 60 ? "Medio" : "Bajo"}
                  </Badge>
                </div>
              </div>
            ))}
          </div>
        </Card>

{/* Feed de Alertas en Vivo */}
        <Card className="p-6">
          <div className="mb-4">
            <h3 className="text-lg font-semibold">Alertas en Vivo</h3>
            <p className="text-sm text-muted-foreground">Notificaciones en tiempo real</p>
          </div>
          <div className="space-y-3 max-h-[300px] overflow-y-auto">
            {alertasEnVivo.map((alerta) => (
              <div
                key={alerta.id}
                className={`flex items-start gap-3 p-3 rounded-lg ${
                  alerta.activa ? "bg-muted/50 border-l-4 border-l-primary" : "bg-muted/20"
                }`}
              >
                <div
                  className={`w-2 h-2 rounded-full mt-2 ${
                    alerta.tipo === "error" ? "bg-red-500" : alerta.tipo === "warning" ? "bg-yellow-500" : "bg-blue-500"
                  } ${alerta.activa ? "animate-pulse" : ""}`}
                />
                <div className="flex-1">
                  <p className="text-sm font-medium">{alerta.mensaje}</p>
                  <div className="flex items-center justify-between mt-1">
                    <span className="text-xs text-muted-foreground">{alerta.tiempo}</span>
                    {alerta.activa && (
                      <Badge variant="outline" className="text-xs">
                        Activa
                      </Badge>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/advanced-kanban-board.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Calendar, Clock, DollarSign, Package, Plus, Edit, Users, Utensils, Timer } from "lucide-react"

interface Trabajador {
  id: string
  nombre: string
  tipo: "fijo" | "jornalero"
  tarifaHora?: number
  tarifaDia?: number
  especialidad: string[]
  disponible: boolean
}

interface Tarea {
  id: string
  titulo: string
  lote: string
  producto: string
  cantidad: string
  responsables: string[]
  fechaInicio: string
  fechaVencimiento: string
  horaInicio?: string
  horaFin?: string
  prioridad: "Alta" | "Media" | "Baja"
  costo: string
  descripcion: string
  incluirAlmuerzo: boolean
  pagoJornaleros: {
    [trabajadorId: string]: {
      horas: number
      tarifa: number
      almuerzo: boolean
      total: number
    }
  }
  estado: "pendiente" | "en-proceso" | "pausada" | "completada"
  progreso: number
  observaciones: string
  materialesRequeridos: string[]
  equiposRequeridos: string[]
}

interface Column {
  id: string
  title: string
  tasks: Tarea[]
  color: string
  limite?: number
}

const trabajadoresDisponibles: Trabajador[] = [
  {
    id: "t1",
    nombre: "Juan Pérez",
    tipo: "fijo",
    especialidad: ["recepcion", "lavado"],
    disponible: true,
  },
  {
    id: "t2",
    nombre: "María García",
    tipo: "jornalero",
    tarifaHora: 8.5,
    tarifaDia: 65,
    especialidad: ["control-calidad", "empaquetado"],
    disponible: true,
  },
  {
    id: "t3",
    nombre: "Carlos López",
    tipo: "fijo",
    especialidad: ["procesamiento", "deshidratado"],
    disponible: true,
  },
  {
    id: "t4",
    nombre: "Ana Ruiz",
    tipo: "jornalero",
    tarifaHora: 7.5,
    tarifaDia: 60,
    especialidad: ["empaquetado", "etiquetado"],
    disponible: true,
  },
  {
    id: "t5",
    nombre: "Luis Torres",
    tipo: "jornalero",
    tarifaHora: 9.0,
    tarifaDia: 70,
    especialidad: ["almacen", "transporte"],
    disponible: false,
  },
]

const initialColumns: Column[] = [
  {
    id: "pendientes",
    title: "Tareas Pendientes",
    color: "bg-gray-500",
    limite: 10,
    tasks: [
      {
        id: "task-1",
        titulo: "Recepción Kion Orgánico",
        lote: "LOT-2024-019",
        producto: "Kion",
        cantidad: "500 kg",
        responsables: ["t1"],
        fechaInicio: "2024-12-21",
        fechaVencimiento: "2024-12-21",
        horaInicio: "08:00",
        horaFin: "12:00",
        prioridad: "Alta",
        costo: "$320",
        descripcion: "Recepción y control inicial de calidad de kion orgánico certificado",
        incluirAlmuerzo: false,
        pagoJornaleros: {},
        estado: "pendiente",
        progreso: 0,
        observaciones: "",
        materialesRequeridos: ["Balanza", "Termómetro", "Higrómetro"],
        equiposRequeridos: ["Montacargas", "Pallets"],
      },
    ],
  },
  {
    id: "asignadas",
    title: "Asignadas",
    color: "bg-blue-500",
    limite: 8,
    tasks: [
      {
        id: "task-2",
        titulo: "Lavado Cúrcuma Premium",
        lote: "LOT-2024-020",
        producto: "Cúrcuma",
        cantidad: "300 kg",
        responsables: ["t2", "t4"],
        fechaInicio: "2024-12-21",
        fechaVencimiento: "2024-12-21",
        horaInicio: "09:00",
        horaFin: "17:00",
        prioridad: "Media",
        costo: "$450",
        descripcion: "Proceso de lavado y desinfección con ozono",
        incluirAlmuerzo: true,
        pagoJornaleros: {
          t2: { horas: 8, tarifa: 8.5, almuerzo: true, total: 78 }, // 8.5 * 8 + 10 almuerzo
          t4: { horas: 8, tarifa: 7.5, almuerzo: true, total: 70 }, // 7.5 * 8 + 10 almuerzo
        },
        estado: "pendiente",
        progreso: 0,
        observaciones: "Verificar temperatura del agua",
        materialesRequeridos: ["Ozono", "Agua tratada", "Detergente orgánico"],
        equiposRequeridos: ["Lavadora industrial", "Sistema de ozono"],
      },
    ],
  },
  {
    id: "en-proceso",
    title: "En Proceso",
    color: "bg-yellow-500",
    limite: 6,
    tasks: [
      {
        id: "task-3",
        titulo: "Deshidratado Kion",
        lote: "LOT-2024-018",
        producto: "Kion Deshidratado",
        cantidad: "200 kg",
        responsables: ["t3"],
        fechaInicio: "2024-12-20",
        fechaVencimiento: "2024-12-22",
        horaInicio: "06:00",
        horaFin: "14:00",
        prioridad: "Alta",
        costo: "$800",
        descripcion: "Proceso de deshidratación controlada a 60°C",
        incluirAlmuerzo: true,
        pagoJornaleros: {},
        estado: "en-proceso",
        progreso: 65,
        observaciones: "Monitorear temperatura cada 2 horas",
        materialesRequeridos: ["Bandejas", "Termómetro digital"],
        equiposRequeridos: ["Deshidratador industrial", "Ventiladores"],
      },
    ],
  },
  {
    id: "control-calidad",
    title: "Control de Calidad",
    color: "bg-purple-500",
    limite: 5,
    tasks: [],
  },
  {
    id: "empaquetado",
    title: "Empaquetado",
    color: "bg-orange-500",
    limite: 8,
    tasks: [
      {
        id: "task-4",
        titulo: "Empaque Cúrcuma Molida",
        lote: "LOT-2024-017",
        producto: "Cúrcuma Molida",
        cantidad: "150 kg",
        responsables: ["t2", "t4"],
        fechaInicio: "2024-12-20",
        fechaVencimiento: "2024-12-21",
        horaInicio: "14:00",
        horaFin: "18:00",
        prioridad: "Media",
        costo: "$320",
        descripcion: "Empaquetado en bolsas de 1kg con etiquetado",
        incluirAlmuerzo: false,
        pagoJornaleros: {
          t2: { horas: 4, tarifa: 8.5, almuerzo: false, total: 34 },
          t4: { horas: 4, tarifa: 7.5, almuerzo: false, total: 30 },
        },
        estado: "en-proceso",
        progreso: 80,
        observaciones: "Verificar sellado hermético",
        materialesRequeridos: ["Bolsas 1kg", "Etiquetas", "Sellador"],
        equiposRequeridos: ["Empaquetadora", "Balanza de precisión"],
      },
    ],
  },
  {
    id: "completadas",
    title: "Completadas",
    color: "bg-green-500",
    tasks: [
      {
        id: "task-5",
        titulo: "Almacenamiento Kion Fresco",
        lote: "LOT-2024-016",
        producto: "Kion Fresco",
        cantidad: "400 kg",
        responsables: ["t5"],
        fechaInicio: "2024-12-19",
        fechaVencimiento: "2024-12-19",
        horaInicio: "16:00",
        horaFin: "18:00",
        prioridad: "Baja",
        costo: "$180",
        descripcion: "Almacenamiento en cámara fría",
        incluirAlmuerzo: false,
        pagoJornaleros: {
          t5: { horas: 2, tarifa: 9.0, almuerzo: false, total: 18 },
        },
        estado: "completada",
        progreso: 100,
        observaciones: "Completado sin observaciones",
        materialesRequeridos: ["Pallets", "Film plástico"],
        equiposRequeridos: ["Montacargas"],
      },
    ],
  },
]

export function AdvancedKanbanBoard() {
  const [columns, setColumns] = useState(initialColumns)
  const [showTaskModal, setShowTaskModal] = useState(false)
  const [editingTask, setEditingTask] = useState<Tarea | null>(null)
  const [selectedTask, setSelectedTask] = useState<Tarea | null>(null)

const [newTask, setNewTask] = useState<Partial<Tarea>>({
    titulo: "",
    lote: "",
    producto: "",
    cantidad: "",
    responsables: [],
    fechaInicio: "",
    fechaVencimiento: "",
    horaInicio: "",
    horaFin: "",
    prioridad: "Media",
    descripcion: "",
    incluirAlmuerzo: false,
    pagoJornaleros: {},
    materialesRequeridos: [],
    equiposRequeridos: [],
  })

const getPriorityColor = (prioridad: string) => {
    switch (prioridad) {
      case "Alta":
        return "bg-red-500/10 text-red-500"
      case "Media":
        return "bg-yellow-500/10 text-yellow-500"
      case "Baja":
        return "bg-green-500/10 text-green-500"
      default:
        return "bg-gray-500/10 text-gray-500"
    }
  }

const calcularPagoTotal = (pagoJornaleros: Tarea["pagoJornaleros"]) => {
    return Object.values(pagoJornaleros).reduce((total, pago) => total + pago.total, 0)
  }

const handleAsignarTrabajador = (trabajadorId: string) => {
    if (!newTask.responsables?.includes(trabajadorId)) {
      setNewTask((prev) => ({
        ...prev,
        responsables: [...(prev.responsables || []), trabajadorId],
      }))
    }
  }

const handleRemoverTrabajador = (trabajadorId: string) => {
    setNewTask((prev) => ({
      ...prev,
      responsables: prev.responsables?.filter((id) => id !== trabajadorId) || [],
    }))
  }

const calcularPagoJornalero = (trabajadorId: string, horas: number, incluirAlmuerzo: boolean) => {
    const trabajador = trabajadoresDisponibles.find((t) => t.id === trabajadorId)
    if (!trabajador || trabajador.tipo !== "jornalero") return 0

const pagoHoras = (trabajador.tarifaHora || 0) * horas
    const pagoAlmuerzo = incluirAlmuerzo ? 10 : 0 // $10 por almuerzo
    return pagoHoras + pagoAlmuerzo
  }

const handleSaveTask = () => {
    if (!newTask.titulo || !newTask.lote) return

const task: Tarea = {
      id: `task-${Date.now()}`,
      titulo: newTask.titulo || "",
      lote: newTask.lote || "",
      producto: newTask.producto || "",
      cantidad: newTask.cantidad || "",
      responsables: newTask.responsables || [],
      fechaInicio: newTask.fechaInicio || "",
      fechaVencimiento: newTask.fechaVencimiento || "",
      horaInicio: newTask.horaInicio,
      horaFin: newTask.horaFin,
      prioridad: newTask.prioridad || "Media",
      costo: newTask.costo || "$0",
      descripcion: newTask.descripcion || "",
      incluirAlmuerzo: newTask.incluirAlmuerzo || false,
      pagoJornaleros: newTask.pagoJornaleros || {},
      estado: "pendiente",
      progreso: 0,
      observaciones: "",
      materialesRequeridos: newTask.materialesRequeridos || [],
      equiposRequeridos: newTask.equiposRequeridos || [],
    }

setColumns((prev) => prev.map((col) => (col.id === "pendientes" ? { ...col, tasks: [...col.tasks, task] } : col)))

setShowTaskModal(false)
    setNewTask({
      titulo: "",
      lote: "",
      producto: "",
      cantidad: "",
      responsables: [],
      fechaInicio: "",
      fechaVencimiento: "",
      horaInicio: "",
      horaFin: "",
      prioridad: "Media",
      descripcion: "",
      incluirAlmuerzo: false,
      pagoJornaleros: {},
      materialesRequeridos: [],
      equiposRequeridos: [],
    })
  }

return (
    <div className="space-y-6">
      {/* Header con estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Users className="h-5 w-5 text-blue-500" />
            <div>
              <p className="text-sm text-muted-foreground">Personal Activo</p>
              <p className="text-2xl font-bold">{trabajadoresDisponibles.filter((t) => t.disponible).length}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Package className="h-5 w-5 text-green-500" />
            <div>
              <p className="text-sm text-muted-foreground">Tareas Activas</p>
              <p className="text-2xl font-bold">{columns.reduce((total, col) => total + col.tasks.length, 0)}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <DollarSign className="h-5 w-5 text-purple-500" />
            <div>
              <p className="text-sm text-muted-foreground">Costo Jornaleros Hoy</p>
              <p className="text-2xl font-bold">
                $
                {columns
                  .flatMap((col) => col.tasks)
                  .reduce((total, task) => total + calcularPagoTotal(task.pagoJornaleros), 0)
                  .toFixed(2)}
              </p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Timer className="h-5 w-5 text-orange-500" />
            <div>
              <p className="text-sm text-muted-foreground">Eficiencia</p>
              <p className="text-2xl font-bold">94%</p>
            </div>
          </div>
        </Card>
      </div>

{/* Botón para nueva tarea */}
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">Board de Producción</h2>
        <Button onClick={() => setShowTaskModal(true)} className="gap-2">
          <Plus className="h-4 w-4" />
          Nueva Tarea
        </Button>
      </div>

{/* Kanban Board */}
      <div className="flex gap-6 overflow-x-auto pb-6">
        {columns.map((column) => (
          <div key={column.id} className="flex-shrink-0 w-80">
            <div className="flex items-center gap-2 mb-4">
              <div className={`w-3 h-3 rounded-full ${column.color}`} />
              <h3 className="font-semibold">{column.title}</h3>
              <Badge variant="secondary" className="ml-auto">
                {column.tasks.length}
                {column.limite && `/${column.limite}`}
              </Badge>
            </div>
            <div className="space-y-3">
              {column.tasks.map((task) => (
                <Card
                  key={task.id}
                  className="p-4 cursor-pointer hover:shadow-md transition-shadow"
                  onClick={() => setSelectedTask(task)}
                >
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <h4 className="font-medium text-sm">{task.titulo}</h4>
                      <Badge className={getPriorityColor(task.prioridad)}>{task.prioridad}</Badge>
                    </div>

<div className="space-y-2 text-xs text-muted-foreground">
                      <div className="flex items-center gap-2">
                        <Package className="h-3 w-3" />
                        <span>{task.lote}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{task.producto}</span>
                        <span>•</span>
                        <span>{task.cantidad}</span>
                      </div>
                      {task.horaInicio && task.horaFin && (
                        <div className="flex items-center gap-2">
                          <Clock className="h-3 w-3" />
                          <span>
                            {task.horaInicio} - {task.horaFin}
                          </span>
                        </div>
                      )}
                    </div>

{task.progreso > 0 && (
                      <div className="space-y-1">
                        <div className="flex justify-between text-xs">
                          <span>Progreso</span>
                          <span>{task.progreso}%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2">
                          <div
                            className="bg-primary h-2 rounded-full transition-all"
                            style={{ width: `${task.progreso}%` }}
                          />
                        </div>
                      </div>
                    )}

<p className="text-xs text-muted-foreground">{task.descripcion}</p>

{/* Personal asignado */}
                    <div className="flex items-center gap-2">
                      {task.responsables.map((responsableId) => {
                        const trabajador = trabajadoresDisponibles.find((t) => t.id === responsableId)
                        return (
                          <Avatar key={responsableId} className="h-6 w-6">
                            <AvatarFallback className="text-xs">
                              {trabajador?.nombre
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                        )
                      })}
                      {task.incluirAlmuerzo && <Utensils className="h-3 w-3 text-orange-500" />}
                    </div>

<div className="flex items-center justify-between pt-2 border-t">
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <DollarSign className="h-3 w-3" />
                        <span>{task.costo}</span>
                        {Object.keys(task.pagoJornaleros).length > 0 && (
                          <span className="text-orange-500">+${calcularPagoTotal(task.pagoJornaleros).toFixed(2)}</span>
                        )}
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="h-3 w-3" />
                        <span className="text-xs">{task.fechaVencimiento}</span>
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
              <Card className="p-4 border-dashed border-2 text-center text-muted-foreground hover:bg-muted/50 cursor-pointer transition-colors">
                <span className="text-sm">+ Agregar tarea</span>
              </Card>
            </div>
          </div>
        ))}
      </div>

{/* Modal para nueva tarea */}
      {showTaskModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold">Nueva Tarea de Producción</h2>
                <Button variant="ghost" onClick={() => setShowTaskModal(false)}>
                  ×
                </Button>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Información básica */}
                <div className="space-y-4">
                  <h3 className="font-medium">Información Básica</h3>
                  <div>
                    <Label htmlFor="titulo">Título de la Tarea *</Label>
                    <Input
                      id="titulo"
                      value={newTask.titulo}
                      onChange={(e) => setNewTask((prev) => ({ ...prev, titulo: e.target.value }))}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="lote">Lote *</Label>
                      <Input
                        id="lote"
                        value={newTask.lote}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, lote: e.target.value }))}
                      />
                    </div>
                    <div>
                      <Label htmlFor="producto">Producto</Label>
                      <select
                        className="w-full p-2 border rounded-md bg-background"
                        value={newTask.producto}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, producto: e.target.value }))}
                      >
                        <option value="">Seleccionar</option>
                        <option value="Kion Orgánico">Kion Orgánico</option>
                        <option value="Kion Convencional">Kion Convencional</option>
                        <option value="Cúrcuma Premium">Cúrcuma Premium</option>
                        <option value="Cúrcuma Estándar">Cúrcuma Estándar</option>
                        <option value="Mix Especias">Mix Especias</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="cantidad">Cantidad</Label>
                      <Input
                        id="cantidad"
                        value={newTask.cantidad}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, cantidad: e.target.value }))}
                        placeholder="ej: 500 kg"
                      />
                    </div>
                    <div>
                      <Label htmlFor="prioridad">Prioridad</Label>
                      <select
                        className="w-full p-2 border rounded-md bg-background"
                        value={newTask.prioridad}
                        onChange={(e) =>
                          setNewTask((prev) => ({ ...prev, prioridad: e.target.value as "Alta" | "Media" | "Baja" }))
                        }
                      >
                        <option value="Baja">Baja</option>
                        <option value="Media">Media</option>
                        <option value="Alta">Alta</option>
                      </select>
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="descripcion">Descripción</Label>
                    <Textarea
                      id="descripcion"
                      value={newTask.descripcion}
                      onChange={(e) => setNewTask((prev) => ({ ...prev, descripcion: e.target.value }))}
                      rows={3}
                    />
                  </div>
                </div>

{/* Programación y personal */}
                <div className="space-y-4">
                  <h3 className="font-medium">Programación y Personal</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="fechaInicio">Fecha Inicio</Label>
                      <Input
                        id="fechaInicio"
                        type="date"
                        value={newTask.fechaInicio}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, fechaInicio: e.target.value }))}
                      />
                    </div>
                    <div>
                      <Label htmlFor="fechaVencimiento">Fecha Vencimiento</Label>
                      <Input
                        id="fechaVencimiento"
                        type="date"
                        value={newTask.fechaVencimiento}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, fechaVencimiento: e.target.value }))}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="horaInicio">Hora Inicio</Label>
                      <Input
                        id="horaInicio"
                        type="time"
                        value={newTask.horaInicio}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, horaInicio: e.target.value }))}
                      />
                    </div>
                    <div>
                      <Label htmlFor="horaFin">Hora Fin</Label>
                      <Input
                        id="horaFin"
                        type="time"
                        value={newTask.horaFin}
                        onChange={(e) => setNewTask((prev) => ({ ...prev, horaFin: e.target.value }))}
                      />
                    </div>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="incluirAlmuerzo"
                      checked={newTask.incluirAlmuerzo}
                      onCheckedChange={(checked) =>
                        setNewTask((prev) => ({ ...prev, incluirAlmuerzo: checked as boolean }))
                      }
                    />
                    <Label htmlFor="incluirAlmuerzo" className="flex items-center gap-2">
                      <Utensils className="h-4 w-4" />
                      Incluir almuerzo (+$10 por persona)
                    </Label>
                  </div>

<div>
                    <Label>Personal Asignado</Label>
                    <div className="space-y-2 max-h-40 overflow-y-auto border rounded-md p-2">
                      {trabajadoresDisponibles.map((trabajador) => (
                        <div
                          key={trabajador.id}
                          className="flex items-center justify-between p-2 hover:bg-muted rounded"
                        >
                          <div className="flex items-center gap-2">
                            <Checkbox
                              checked={newTask.responsables?.includes(trabajador.id)}
                              onCheckedChange={(checked) => {
                                if (checked) {
                                  handleAsignarTrabajador(trabajador.id)
                                } else {
                                  handleRemoverTrabajador(trabajador.id)
                                }
                              }}
                            />
                            <div>
                              <span className="font-medium">{trabajador.nombre}</span>
                              <div className="text-xs text-muted-foreground">
                                {trabajador.tipo === "jornalero" && (
                                  <span>
                                    ${trabajador.tarifaHora}/h - ${trabajador.tarifaDia}/día
                                  </span>
                                )}
                                <span className="ml-2">{trabajador.especialidad.join(", ")}</span>
                              </div>
                            </div>
                          </div>
                          <Badge
                            className={
                              trabajador.disponible ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
                            }
                          >
                            {trabajador.disponible ? "Disponible" : "Ocupado"}
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </div>

{/* Cálculo de costos para jornaleros */}
                  {newTask.responsables && newTask.responsables.length > 0 && (
                    <div className="space-y-2">
                      <Label>Cálculo de Pagos (Jornaleros)</Label>
                      <div className="border rounded-md p-3 space-y-2">
                        {newTask.responsables
                          .map((id) => trabajadoresDisponibles.find((t) => t.id === id))
                          .filter((t) => t?.tipo === "jornalero")
                          .map((trabajador) => {
                            if (!trabajador) return null
                            const horas =
                              newTask.horaInicio && newTask.horaFin
                                ? Math.abs(
                                    new Date(`2000-01-01T${newTask.horaFin}`).getTime() -
                                      new Date(`2000-01-01T${newTask.horaInicio}`).getTime(),
                                  ) /
                                  (1000 * 60 * 60)
                                : 8
                            const pago = calcularPagoJornalero(trabajador.id, horas, newTask.incluirAlmuerzo || false)

return (
                              <div key={trabajador.id} className="flex justify-between items-center text-sm">
                                <span>{trabajador.nombre}</span>
                                <div className="text-right">
                                  <div>
                                    ${trabajador.tarifaHora} × {horas}h = $
                                    {((trabajador.tarifaHora || 0) * horas).toFixed(2)}
                                  </div>
                                  {newTask.incluirAlmuerzo && (
                                    <div className="text-xs text-muted-foreground">+ $10 almuerzo</div>
                                  )}
                                  <div className="font-medium">${pago.toFixed(2)}</div>
                                </div>
                              </div>
                            )
                          })}
                      </div>
                    </div>
                  )}
                </div>
              </div>

<div className="flex justify-end gap-4 mt-6 pt-6 border-t">
                <Button variant="outline" onClick={() => setShowTaskModal(false)}>
                  Cancelar
                </Button>
                <Button onClick={handleSaveTask}>
                  <Plus className="h-4 w-4 mr-2" />
                  Crear Tarea
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}

{/* Modal de detalle de tarea */}
      {selectedTask && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold">{selectedTask.titulo}</h2>
                <Button variant="ghost" onClick={() => setSelectedTask(null)}>
                  ×
                </Button>
              </div>

<div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Lote</Label>
                    <p className="font-medium">{selectedTask.lote}</p>
                  </div>
                  <div>
                    <Label>Producto</Label>
                    <p className="font-medium">{selectedTask.producto}</p>
                  </div>
                  <div>
                    <Label>Cantidad</Label>
                    <p className="font-medium">{selectedTask.cantidad}</p>
                  </div>
                  <div>
                    <Label>Prioridad</Label>
                    <Badge className={getPriorityColor(selectedTask.prioridad)}>{selectedTask.prioridad}</Badge>
                  </div>
                </div>

<div>
                  <Label>Descripción</Label>
                  <p className="text-sm text-muted-foreground">{selectedTask.descripcion}</p>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Horario</Label>
                    <p className="font-medium">
                      {selectedTask.horaInicio} - {selectedTask.horaFin}
                    </p>
                  </div>
                  <div>
                    <Label>Fecha</Label>
                    <p className="font-medium">{selectedTask.fechaInicio}</p>
                  </div>
                </div>

<div>
                  <Label>Personal Asignado</Label>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {selectedTask.responsables.map((responsableId) => {
                      const trabajador = trabajadoresDisponibles.find((t) => t.id === responsableId)
                      return (
                        <div key={responsableId} className="flex items-center gap-2 bg-muted rounded-md p-2">
                          <Avatar className="h-6 w-6">
                            <AvatarFallback className="text-xs">
                              {trabajador?.nombre
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          <span className="text-sm">{trabajador?.nombre}</span>
                          {trabajador?.tipo === "jornalero" && (
                            <Badge variant="outline" className="text-xs">
                              Jornalero
                            </Badge>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>

{Object.keys(selectedTask.pagoJornaleros).length > 0 && (
                  <div>
                    <Label>Pagos Calculados</Label>
                    <div className="border rounded-md p-3 space-y-2 mt-2">
                      {Object.entries(selectedTask.pagoJornaleros).map(([trabajadorId, pago]) => {
                        const trabajador = trabajadoresDisponibles.find((t) => t.id === trabajadorId)
                        return (
                          <div key={trabajadorId} className="flex justify-between items-center">
                            <span className="font-medium">{trabajador?.nombre}</span>
                            <div className="text-right">
                              <div className="text-sm">
                                ${pago.tarifa} × {pago.horas}h = ${(pago.tarifa * pago.horas).toFixed(2)}
                              </div>
                              {pago.almuerzo && <div className="text-xs text-muted-foreground">+ $10 almuerzo</div>}
                              <div className="font-bold text-green-600">${pago.total.toFixed(2)}</div>
                            </div>
                          </div>
                        )
                      })}
                      <div className="border-t pt-2 flex justify-between font-bold">
                        <span>Total Jornaleros:</span>
                        <span>${calcularPagoTotal(selectedTask.pagoJornaleros).toFixed(2)}</span>
                      </div>
                    </div>
                  </div>
                )}

{selectedTask.progreso > 0 && (
                  <div>
                    <Label>Progreso</Label>
                    <div className="space-y-2 mt-2">
                      <div className="flex justify-between">
                        <span>Completado</span>
                        <span>{selectedTask.progreso}%</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-3">
                        <div
                          className="bg-primary h-3 rounded-full transition-all"
                          style={{ width: `${selectedTask.progreso}%` }}
                        />
                      </div>
                    </div>
                  </div>
                )}
              </div>

<div className="flex justify-end gap-4 mt-6 pt-6 border-t">
                <Button variant="outline" onClick={() => setSelectedTask(null)}>
                  Cerrar
                </Button>
                <Button>
                  <Edit className="h-4 w-4 mr-2" />
                  Editar Tarea
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/costos-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } 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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Checkbox } from "@/components/ui/checkbox"
import { Plus, Edit, Trash2, DollarSign, Factory, Home, AlertTriangle, TrendingUp, Calculator } from "lucide-react"

interface CostoBase {
  id: string
  nombre: string
  descripcion: string
  categoria: string
  subcategoria: string
  monto: number
  moneda: "USD" | "PEN"
  fechaCreacion: string
  fechaVigencia: string
  fechaVencimiento?: string
  activo: boolean
  observaciones: string
}

interface CostoFijo extends CostoBase {
  tipo: "fijo"
  frecuencia: "mensual" | "trimestral" | "semestral" | "anual"
  proveedor?: string
  numeroFactura?: string
  centroCosto: string
  esRecurrente: boolean
}

interface CostoVariable extends CostoBase {
  tipo: "variable"
  unidadMedida: string
  costoPorUnidad: number
  volumenMinimo?: number
  volumenMaximo?: number
  proveedor?: string
  tiempoEntrega: number
}

interface CostoProceso extends CostoBase {
  tipo: "proceso"
  procesoId: string
  procesoNombre: string
  costoPorKg: number
  costoPorHora?: number
  costoPorLote?: number
  equiposRequeridos: string[]
  personalRequerido: number
  tiempoEstimado: number
}

interface CostoMerma extends CostoBase {
  tipo: "merma"
  procesoId: string
  procesoNombre: string
  porcentajeMerma: number
  valorPerdido: number
  causas: string[]
  medicionPor: "peso" | "volumen" | "unidades"
}

type Costo = CostoFijo | CostoVariable | CostoProceso | CostoMerma

const categoriasCostosFijos = [
  { id: "personal", nombre: "Personal", subcategorias: ["Sueldos", "Beneficios", "Capacitación", "Seguros"] },
  { id: "infraestructura", nombre: "Infraestructura", subcategorias: ["Alquiler", "Mantenimiento", "Seguridad"] },
  { id: "servicios", nombre: "Servicios", subcategorias: ["Luz", "Agua", "Gas", "Internet", "Teléfono"] },
  { id: "administrativos", nombre: "Administrativos", subcategorias: ["Contabilidad", "Legal", "Bancarios"] },
  { id: "seguros", nombre: "Seguros", subcategorias: ["Responsabilidad Civil", "Incendio", "Robo"] },
]

const categoriasVariables = [
  { id: "materias-primas", nombre: "Materias Primas", subcategorias: ["Kion", "Cúrcuma", "Insumos"] },
  { id: "insumos", nombre: "Insumos", subcategorias: ["Empaques", "Etiquetas", "Químicos", "Combustible"] },
  { id: "transporte", nombre: "Transporte", subcategorias: ["Combustible", "Mantenimiento", "Peajes"] },
  { id: "servicios-variables", nombre: "Servicios Variables", subcategorias: ["Laboratorio", "Certificaciones"] },
]

const procesosProduccion = [
  { id: "recepcion", nombre: "Recepción MP" },
  { id: "lavado", nombre: "Lavado y Limpieza" },
  { id: "procesamiento", nombre: "Procesamiento" },
  { id: "deshidratado", nombre: "Deshidratado" },
  { id: "molido", nombre: "Molido" },
  { id: "empaquetado", nombre: "Empaquetado" },
  { id: "control-calidad", nombre: "Control de Calidad" },
  { id: "almacenamiento", nombre: "Almacenamiento" },
]

export function CostosManagement() {
  const [costos, setCostos] = useState<Costo[]>([])
  const [showModal, setShowModal] = useState(false)
  const [tipoCosteSeleccionado, setTipoCosteSeleccionado] = useState<"fijo" | "variable" | "proceso" | "merma">("fijo")
  const [editingCosto, setEditingCosto] = useState<Costo | null>(null)
  const [filtroCategoria, setFiltroCategoria] = useState<string>("todos")
  const [filtroTipo, setFiltroTipo] = useState<string>("todos")

const [nuevoCosto, setNuevoCosto] = useState<Partial<Costo>>({
    nombre: "",
    descripcion: "",
    categoria: "",
    subcategoria: "",
    monto: 0,
    moneda: "PEN",
    fechaVigencia: "",
    activo: true,
    observaciones: "",
  })

const resetForm = () => {
    setNuevoCosto({
      nombre: "",
      descripcion: "",
      categoria: "",
      subcategoria: "",
      monto: 0,
      moneda: "PEN",
      fechaVigencia: "",
      activo: true,
      observaciones: "",
    })
    setEditingCosto(null)
  }

const handleSaveCosto = () => {
    if (!nuevoCosto.nombre || !nuevoCosto.categoria) return

const costoBase = {
      id: editingCosto?.id || `costo-${Date.now()}`,
      nombre: nuevoCosto.nombre || "",
      descripcion: nuevoCosto.descripcion || "",
      categoria: nuevoCosto.categoria || "",
      subcategoria: nuevoCosto.subcategoria || "",
      monto: nuevoCosto.monto || 0,
      moneda: nuevoCosto.moneda || "PEN",
      fechaCreacion: editingCosto?.fechaCreacion || new Date().toISOString().split("T")[0],
      fechaVigencia: nuevoCosto.fechaVigencia || "",
      activo: nuevoCosto.activo ?? true,
      observaciones: nuevoCosto.observaciones || "",
    }

let costo: Costo

switch (tipoCosteSeleccionado) {
      case "fijo":
        costo = {
          ...costoBase,
          tipo: "fijo",
          frecuencia: (nuevoCosto as any).frecuencia || "mensual",
          proveedor: (nuevoCosto as any).proveedor,
          centroCosto: (nuevoCosto as any).centroCosto || "",
          esRecurrente: (nuevoCosto as any).esRecurrente ?? true,
        } as CostoFijo
        break
      case "variable":
        costo = {
          ...costoBase,
          tipo: "variable",
          unidadMedida: (nuevoCosto as any).unidadMedida || "",
          costoPorUnidad: (nuevoCosto as any).costoPorUnidad || 0,
          proveedor: (nuevoCosto as any).proveedor,
          tiempoEntrega: (nuevoCosto as any).tiempoEntrega || 0,
        } as CostoVariable
        break
      case "proceso":
        costo = {
          ...costoBase,
          tipo: "proceso",
          procesoId: (nuevoCosto as any).procesoId || "",
          procesoNombre: (nuevoCosto as any).procesoNombre || "",
          costoPorKg: (nuevoCosto as any).costoPorKg || 0,
          costoPorHora: (nuevoCosto as any).costoPorHora,
          costoPorLote: (nuevoCosto as any).costoPorLote,
          equiposRequeridos: (nuevoCosto as any).equiposRequeridos || [],
          personalRequerido: (nuevoCosto as any).personalRequerido || 1,
          tiempoEstimado: (nuevoCosto as any).tiempoEstimado || 0,
        } as CostoProceso
        break
      case "merma":
        costo = {
          ...costoBase,
          tipo: "merma",
          procesoId: (nuevoCosto as any).procesoId || "",
          procesoNombre: (nuevoCosto as any).procesoNombre || "",
          porcentajeMerma: (nuevoCosto as any).porcentajeMerma || 0,
          valorPerdido: (nuevoCosto as any).valorPerdido || 0,
          causas: (nuevoCosto as any).causas || [],
          medicionPor: (nuevoCosto as any).medicionPor || "peso",
        } as CostoMerma
        break
    }

if (editingCosto) {
      setCostos((prev) => prev.map((c) => (c.id === editingCosto.id ? costo : c)))
    } else {
      setCostos((prev) => [...prev, costo])
    }

setShowModal(false)
    resetForm()
  }

const handleEditCosto = (costo: Costo) => {
    setEditingCosto(costo)
    setTipoCosteSeleccionado(costo.tipo)
    setNuevoCosto(costo)
    setShowModal(true)
  }

const handleDeleteCosto = (id: string) => {
    setCostos((prev) => prev.filter((c) => c.id !== id))
  }

const getTipoIcon = (tipo: string) => {
    switch (tipo) {
      case "fijo":
        return <Home className="h-4 w-4 text-blue-500" />
      case "variable":
        return <TrendingUp className="h-4 w-4 text-green-500" />
      case "proceso":
        return <Factory className="h-4 w-4 text-purple-500" />
      case "merma":
        return <AlertTriangle className="h-4 w-4 text-red-500" />
      default:
        return <DollarSign className="h-4 w-4" />
    }
  }

const getTipoColor = (tipo: string) => {
    switch (tipo) {
      case "fijo":
        return "bg-blue-500/10 text-blue-500"
      case "variable":
        return "bg-green-500/10 text-green-500"
      case "proceso":
        return "bg-purple-500/10 text-purple-500"
      case "merma":
        return "bg-red-500/10 text-red-500"
      default:
        return "bg-gray-500/10 text-gray-500"
    }
  }

const costosFiltrados = costos.filter((costo) => {
    const filtroTipoMatch = filtroTipo === "todos" || costo.tipo === filtroTipo
    const filtroCategoriaMatch = filtroCategoria === "todos" || costo.categoria === filtroCategoria
    return filtroTipoMatch && filtroCategoriaMatch
  })

const calcularTotalPorTipo = (tipo: string) => {
    return costos.filter((c) => c.tipo === tipo && c.activo).reduce((total, c) => total + c.monto, 0)
  }

return (
    <div className="space-y-6">
      {/* Resumen de Costos */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Home className="h-5 w-5 text-blue-500" />
            <div>
              <p className="text-sm text-muted-foreground">Costos Fijos</p>
              <p className="text-2xl font-bold">S/ {calcularTotalPorTipo("fijo").toLocaleString()}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5 text-green-500" />
            <div>
              <p className="text-sm text-muted-foreground">Costos Variables</p>
              <p className="text-2xl font-bold">S/ {calcularTotalPorTipo("variable").toLocaleString()}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Factory className="h-5 w-5 text-purple-500" />
            <div>
              <p className="text-sm text-muted-foreground">Costos de Proceso</p>
              <p className="text-2xl font-bold">S/ {calcularTotalPorTipo("proceso").toLocaleString()}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            <div>
              <p className="text-sm text-muted-foreground">Costos por Mermas</p>
              <p className="text-2xl font-bold">S/ {calcularTotalPorTipo("merma").toLocaleString()}</p>
            </div>
          </div>
        </Card>
      </div>

{/* Controles */}
      <div className="flex items-center justify-between">
        <div className="flex gap-4">
          <div>
            <Label>Filtrar por Tipo</Label>
            <select
              className="w-40 p-2 border rounded-md bg-background"
              value={filtroTipo}
              onChange={(e) => setFiltroTipo(e.target.value)}
            >
              <option value="todos">Todos</option>
              <option value="fijo">Costos Fijos</option>
              <option value="variable">Costos Variables</option>
              <option value="proceso">Costos de Proceso</option>
              <option value="merma">Costos por Mermas</option>
            </select>
          </div>
          <div>
            <Label>Filtrar por Categoría</Label>
            <select
              className="w-40 p-2 border rounded-md bg-background"
              value={filtroCategoria}
              onChange={(e) => setFiltroCategoria(e.target.value)}
            >
              <option value="todos">Todas</option>
              <option value="personal">Personal</option>
              <option value="infraestructura">Infraestructura</option>
              <option value="servicios">Servicios</option>
              <option value="materias-primas">Materias Primas</option>
              <option value="insumos">Insumos</option>
            </select>
          </div>
        </div>
        <Button onClick={() => setShowModal(true)} className="gap-2">
          <Plus className="h-4 w-4" />
          Nuevo Costo
        </Button>
      </div>

{/* Tabla de Costos */}
      <Card className="p-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Tipo</TableHead>
              <TableHead>Nombre</TableHead>
              <TableHead>Categoría</TableHead>
              <TableHead>Monto</TableHead>
              <TableHead>Vigencia</TableHead>
              <TableHead>Estado</TableHead>
              <TableHead>Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {costosFiltrados.map((costo) => (
              <TableRow key={costo.id}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    {getTipoIcon(costo.tipo)}
                    <Badge className={getTipoColor(costo.tipo)}>{costo.tipo}</Badge>
                  </div>
                </TableCell>
                <TableCell>
                  <div>
                    <div className="font-medium">{costo.nombre}</div>
                    <div className="text-xs text-muted-foreground">{costo.descripcion}</div>
                  </div>
                </TableCell>
                <TableCell>
                  <div>
                    <div className="font-medium">{costo.categoria}</div>
                    <div className="text-xs text-muted-foreground">{costo.subcategoria}</div>
                  </div>
                </TableCell>
                <TableCell>
                  <div className="font-medium">
                    {costo.moneda} {costo.monto.toLocaleString()}
                  </div>
                  {costo.tipo === "variable" && (
                    <div className="text-xs text-muted-foreground">Por {(costo as CostoVariable).unidadMedida}</div>
                  )}
                  {costo.tipo === "proceso" && (
                    <div className="text-xs text-muted-foreground">Por kg: S/ {(costo as CostoProceso).costoPorKg}</div>
                  )}
                  {costo.tipo === "merma" && (
                    <div className="text-xs text-muted-foreground">{(costo as CostoMerma).porcentajeMerma}% merma</div>
                  )}
                </TableCell>
                <TableCell>
                  <div className="text-sm">{costo.fechaVigencia}</div>
                  {costo.tipo === "fijo" && (
                    <div className="text-xs text-muted-foreground">{(costo as CostoFijo).frecuencia}</div>
                  )}
                </TableCell>
                <TableCell>
                  <Badge className={costo.activo ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}>
                    {costo.activo ? "Activo" : "Inactivo"}
                  </Badge>
                </TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => handleEditCosto(costo)}>
                      <Edit className="h-3 w-3" />
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => handleDeleteCosto(costo.id)}>
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

{/* Modal para Nuevo/Editar Costo */}
      {showModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold">{editingCosto ? "Editar Costo" : "Nuevo Costo"}</h2>
                <Button
                  variant="ghost"
                  onClick={() => {
                    setShowModal(false)
                    resetForm()
                  }}
                >
                  ×
                </Button>
              </div>

{/* Selector de Tipo de Costo */}
              <div className="mb-6">
                <Label>Tipo de Costo</Label>
                <div className="grid grid-cols-4 gap-4 mt-2">
                  {[
                    { tipo: "fijo", label: "Costo Fijo", icon: Home, desc: "Sueldos, alquiler, servicios" },
                    { tipo: "variable", label: "Costo Variable", icon: TrendingUp, desc: "Materias primas, insumos" },
                    { tipo: "proceso", label: "Costo de Proceso", icon: Factory, desc: "Por etapa productiva" },
                    { tipo: "merma", label: "Costo por Merma", icon: AlertTriangle, desc: "Pérdidas y desperdicios" },
                  ].map(({ tipo, label, icon: Icon, desc }) => (
                    <Card
                      key={tipo}
                      className={`p-4 cursor-pointer transition-colors ${
                        tipoCosteSeleccionado === tipo ? "border-primary bg-primary/5" : ""
                      }`}
                      onClick={() => setTipoCosteSeleccionado(tipo as any)}
                    >
                      <div className="flex items-center gap-2 mb-2">
                        <Icon className="h-5 w-5" />
                        <span className="font-medium">{label}</span>
                      </div>
                      <p className="text-xs text-muted-foreground">{desc}</p>
                    </Card>
                  ))}
                </div>
              </div>

{/* Formulario Dinámico según Tipo */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Información Básica */}
                <div className="space-y-4">
                  <h3 className="font-medium">Información Básica</h3>
                  <div>
                    <Label htmlFor="nombre">Nombre del Costo *</Label>
                    <Input
                      id="nombre"
                      value={nuevoCosto.nombre}
                      onChange={(e) => setNuevoCosto((prev) => ({ ...prev, nombre: e.target.value }))}
                      placeholder="ej: Sueldo Gerente General"
                    />
                  </div>
                  <div>
                    <Label htmlFor="descripcion">Descripción</Label>
                    <Textarea
                      id="descripcion"
                      value={nuevoCosto.descripcion}
                      onChange={(e) => setNuevoCosto((prev) => ({ ...prev, descripcion: e.target.value }))}
                      rows={2}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="categoria">Categoría *</Label>
                      <select
                        className="w-full p-2 border rounded-md bg-background"
                        value={nuevoCosto.categoria}
                        onChange={(e) => setNuevoCosto((prev) => ({ ...prev, categoria: e.target.value }))}
                      >
                        <option value="">Seleccionar</option>
                        {tipoCosteSeleccionado === "fijo" &&
                          categoriasCostosFijos.map((cat) => (
                            <option key={cat.id} value={cat.id}>
                              {cat.nombre}
                            </option>
                          ))}
                        {tipoCosteSeleccionado === "variable" &&
                          categoriasVariables.map((cat) => (
                            <option key={cat.id} value={cat.id}>
                              {cat.nombre}
                            </option>
                          ))}
                        {(tipoCosteSeleccionado === "proceso" || tipoCosteSeleccionado === "merma") && (
                          <option value="produccion">Producción</option>
                        )}
                      </select>
                    </div>
                    <div>
                      <Label htmlFor="subcategoria">Subcategoría</Label>
                      <select
                        className="w-full p-2 border rounded-md bg-background"
                        value={nuevoCosto.subcategoria}
                        onChange={(e) => setNuevoCosto((prev) => ({ ...prev, subcategoria: e.target.value }))}
                      >
                        <option value="">Seleccionar</option>
                        {tipoCosteSeleccionado === "fijo" &&
                          categoriasCostosFijos
                            .find((cat) => cat.id === nuevoCosto.categoria)
                            ?.subcategorias.map((sub) => (
                              <option key={sub} value={sub}>
                                {sub}
                              </option>
                            ))}
                        {tipoCosteSeleccionado === "variable" &&
                          categoriasVariables
                            .find((cat) => cat.id === nuevoCosto.categoria)
                            ?.subcategorias.map((sub) => (
                              <option key={sub} value={sub}>
                                {sub}
                              </option>
                            ))}
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="monto">Monto *</Label>
                      <Input
                        id="monto"
                        type="number"
                        step="0.01"
                        value={nuevoCosto.monto}
                        onChange={(e) =>
                          setNuevoCosto((prev) => ({ ...prev, monto: Number.parseFloat(e.target.value) || 0 }))
                        }
                      />
                    </div>
                    <div>
                      <Label htmlFor="moneda">Moneda</Label>
                      <select
                        className="w-full p-2 border rounded-md bg-background"
                        value={nuevoCosto.moneda}
                        onChange={(e) =>
                          setNuevoCosto((prev) => ({ ...prev, moneda: e.target.value as "USD" | "PEN" }))
                        }
                      >
                        <option value="PEN">PEN (Soles)</option>
                        <option value="USD">USD (Dólares)</option>
                      </select>
                    </div>
                  </div>
                </div>

{/* Información Específica por Tipo */}
                <div className="space-y-4">
                  <h3 className="font-medium">Información Específica</h3>

{/* Costos Fijos */}
                  {tipoCosteSeleccionado === "fijo" && (
                    <>
                      <div>
                        <Label htmlFor="frecuencia">Frecuencia de Pago</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).frecuencia || "mensual"}
                          onChange={(e) => setNuevoCosto((prev) => ({ ...prev, frecuencia: e.target.value }))}
                        >
                          <option value="mensual">Mensual</option>
                          <option value="trimestral">Trimestral</option>
                          <option value="semestral">Semestral</option>
                          <option value="anual">Anual</option>
                        </select>
                      </div>
                      <div>
                        <Label htmlFor="centroCosto">Centro de Costo</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).centroCosto || ""}
                          onChange={(e) => setNuevoCosto((prev) => ({ ...prev, centroCosto: e.target.value }))}
                        >
                          <option value="">Seleccionar</option>
                          <option value="administracion">Administración</option>
                          <option value="produccion">Producción</option>
                          <option value="ventas">Ventas</option>
                          <option value="logistica">Logística</option>
                        </select>
                      </div>
                      <div>
                        <Label htmlFor="proveedor">Proveedor</Label>
                        <Input
                          id="proveedor"
                          value={(nuevoCosto as any).proveedor || ""}
                          onChange={(e) => setNuevoCosto((prev) => ({ ...prev, proveedor: e.target.value }))}
                        />
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="esRecurrente"
                          checked={(nuevoCosto as any).esRecurrente ?? true}
                          onCheckedChange={(checked) =>
                            setNuevoCosto((prev) => ({ ...prev, esRecurrente: checked as boolean }))
                          }
                        />
                        <Label htmlFor="esRecurrente">Es recurrente</Label>
                      </div>
                    </>
                  )}

{/* Costos Variables */}
                  {tipoCosteSeleccionado === "variable" && (
                    <>
                      <div>
                        <Label htmlFor="unidadMedida">Unidad de Medida</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).unidadMedida || ""}
                          onChange={(e) => setNuevoCosto((prev) => ({ ...prev, unidadMedida: e.target.value }))}
                        >
                          <option value="">Seleccionar</option>
                          <option value="kg">Kilogramos</option>
                          <option value="litros">Litros</option>
                          <option value="unidades">Unidades</option>
                          <option value="metros">Metros</option>
                          <option value="horas">Horas</option>
                        </select>
                      </div>
                      <div>
                        <Label htmlFor="costoPorUnidad">Costo por Unidad</Label>
                        <Input
                          id="costoPorUnidad"
                          type="number"
                          step="0.01"
                          value={(nuevoCosto as any).costoPorUnidad || 0}
                          onChange={(e) =>
                            setNuevoCosto((prev) => ({
                              ...prev,
                              costoPorUnidad: Number.parseFloat(e.target.value) || 0,
                            }))
                          }
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="volumenMinimo">Volumen Mínimo</Label>
                          <Input
                            id="volumenMinimo"
                            type="number"
                            value={(nuevoCosto as any).volumenMinimo || ""}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                volumenMinimo: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                        <div>
                          <Label htmlFor="volumenMaximo">Volumen Máximo</Label>
                          <Input
                            id="volumenMaximo"
                            type="number"
                            value={(nuevoCosto as any).volumenMaximo || ""}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                volumenMaximo: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="tiempoEntrega">Tiempo de Entrega (días)</Label>
                        <Input
                          id="tiempoEntrega"
                          type="number"
                          value={(nuevoCosto as any).tiempoEntrega || 0}
                          onChange={(e) =>
                            setNuevoCosto((prev) => ({ ...prev, tiempoEntrega: Number.parseInt(e.target.value) || 0 }))
                          }
                        />
                      </div>
                    </>
                  )}

{/* Costos de Proceso */}
                  {tipoCosteSeleccionado === "proceso" && (
                    <>
                      <div>
                        <Label htmlFor="procesoId">Proceso</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).procesoId || ""}
                          onChange={(e) => {
                            const proceso = procesosProduccion.find((p) => p.id === e.target.value)
                            setNuevoCosto((prev) => ({
                              ...prev,
                              procesoId: e.target.value,
                              procesoNombre: proceso?.nombre || "",
                            }))
                          }}
                        >
                          <option value="">Seleccionar Proceso</option>
                          {procesosProduccion.map((proceso) => (
                            <option key={proceso.id} value={proceso.id}>
                              {proceso.nombre}
                            </option>
                          ))}
                        </select>
                      </div>
                      <div className="grid grid-cols-3 gap-4">
                        <div>
                          <Label htmlFor="costoPorKg">Costo por Kg</Label>
                          <Input
                            id="costoPorKg"
                            type="number"
                            step="0.01"
                            value={(nuevoCosto as any).costoPorKg || 0}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({ ...prev, costoPorKg: Number.parseFloat(e.target.value) || 0 }))
                            }
                          />
                        </div>
                        <div>
                          <Label htmlFor="costoPorHora">Costo por Hora</Label>
                          <Input
                            id="costoPorHora"
                            type="number"
                            step="0.01"
                            value={(nuevoCosto as any).costoPorHora || ""}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                costoPorHora: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                        <div>
                          <Label htmlFor="costoPorLote">Costo por Lote</Label>
                          <Input
                            id="costoPorLote"
                            type="number"
                            step="0.01"
                            value={(nuevoCosto as any).costoPorLote || ""}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                costoPorLote: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="personalRequerido">Personal Requerido</Label>
                          <Input
                            id="personalRequerido"
                            type="number"
                            value={(nuevoCosto as any).personalRequerido || 1}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                personalRequerido: Number.parseInt(e.target.value) || 1,
                              }))
                            }
                          />
                        </div>
                        <div>
                          <Label htmlFor="tiempoEstimado">Tiempo Estimado (horas)</Label>
                          <Input
                            id="tiempoEstimado"
                            type="number"
                            step="0.5"
                            value={(nuevoCosto as any).tiempoEstimado || 0}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                tiempoEstimado: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                      </div>
                    </>
                  )}

{/* Costos por Merma */}
                  {tipoCosteSeleccionado === "merma" && (
                    <>
                      <div>
                        <Label htmlFor="procesoMerma">Proceso donde ocurre la merma</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).procesoId || ""}
                          onChange={(e) => {
                            const proceso = procesosProduccion.find((p) => p.id === e.target.value)
                            setNuevoCosto((prev) => ({
                              ...prev,
                              procesoId: e.target.value,
                              procesoNombre: proceso?.nombre || "",
                            }))
                          }}
                        >
                          <option value="">Seleccionar Proceso</option>
                          {procesosProduccion.map((proceso) => (
                            <option key={proceso.id} value={proceso.id}>
                              {proceso.nombre}
                            </option>
                          ))}
                        </select>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="porcentajeMerma">Porcentaje de Merma (%)</Label>
                          <Input
                            id="porcentajeMerma"
                            type="number"
                            step="0.1"
                            max="100"
                            value={(nuevoCosto as any).porcentajeMerma || 0}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                porcentajeMerma: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                        <div>
                          <Label htmlFor="valorPerdido">Valor Perdido por Kg</Label>
                          <Input
                            id="valorPerdido"
                            type="number"
                            step="0.01"
                            value={(nuevoCosto as any).valorPerdido || 0}
                            onChange={(e) =>
                              setNuevoCosto((prev) => ({
                                ...prev,
                                valorPerdido: Number.parseFloat(e.target.value) || 0,
                              }))
                            }
                          />
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="medicionPor">Medición por</Label>
                        <select
                          className="w-full p-2 border rounded-md bg-background"
                          value={(nuevoCosto as any).medicionPor || "peso"}
                          onChange={(e) => setNuevoCosto((prev) => ({ ...prev, medicionPor: e.target.value }))}
                        >
                          <option value="peso">Peso</option>
                          <option value="volumen">Volumen</option>
                          <option value="unidades">Unidades</option>
                        </select>
                      </div>
                    </>
                  )}

<div>
                    <Label htmlFor="fechaVigencia">Fecha de Vigencia</Label>
                    <Input
                      id="fechaVigencia"
                      type="date"
                      value={nuevoCosto.fechaVigencia}
                      onChange={(e) => setNuevoCosto((prev) => ({ ...prev, fechaVigencia: e.target.value }))}
                    />
                  </div>

<div>
                    <Label htmlFor="observaciones">Observaciones</Label>
                    <Textarea
                      id="observaciones"
                      value={nuevoCosto.observaciones}
                      onChange={(e) => setNuevoCosto((prev) => ({ ...prev, observaciones: e.target.value }))}
                      rows={3}
                    />
                  </div>
                </div>
              </div>

<div className="flex justify-end gap-4 mt-6 pt-6 border-t">
                <Button
                  variant="outline"
                  onClick={() => {
                    setShowModal(false)
                    resetForm()
                  }}
                >
                  Cancelar
                </Button>
                <Button onClick={handleSaveCosto}>
                  <Calculator className="h-4 w-4 mr-2" />
                  {editingCosto ? "Actualizar" : "Guardar"} Costo
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/productividad-personal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  TrendingUp,
  TrendingDown,
  Clock,
  Target,
  Award,
  AlertTriangle,
  Users,
  Calendar,
  BarChart3,
  Filter,
  Download,
} from "lucide-react"

interface RegistroProductividad {
  id: string
  trabajadorId: string
  fecha: string
  proceso: string
  horasTrabajas: number
  cantidadProcesada: number
  cantidadEsperada: number
  eficiencia: number
  calidad: number
  observaciones: string
  lote: string
}

interface MetricasTrabajador {
  trabajadorId: string
  nombre: string
  tipo: "fijo" | "jornalero"
  especialidades: string[]
  promedioEficiencia: number
  promedioCalidad: number
  horasTotales: number
  lotesCompletados: number
  tendenciaEficiencia: "up" | "down" | "stable"
  alertas: string[]
  salarioBase?: number
  bonificaciones: number
  penalizaciones: number
}

const trabajadores: MetricasTrabajador[] = [
  {
    trabajadorId: "t1",
    nombre: "Juan Pérez",
    tipo: "fijo",
    especialidades: ["Recepción", "Lavado"],
    promedioEficiencia: 95,
    promedioCalidad: 98,
    horasTotales: 168,
    lotesCompletados: 24,
    tendenciaEficiencia: "up",
    alertas: [],
    salarioBase: 2800,
    bonificaciones: 420,
    penalizaciones: 0,
  },
  {
    trabajadorId: "t2",
    nombre: "María García",
    tipo: "jornalero",
    especialidades: ["Control Calidad", "Empaquetado"],
    promedioEficiencia: 88,
    promedioCalidad: 96,
    horasTotales: 152,
    lotesCompletados: 18,
    tendenciaEficiencia: "stable",
    alertas: ["Eficiencia por debajo del promedio"],
    bonificaciones: 180,
    penalizaciones: 50,
  },
  {
    trabajadorId: "t3",
    nombre: "Carlos López",
    tipo: "fijo",
    especialidades: ["Procesamiento", "Deshidratado"],
    promedioEficiencia: 92,
    promedioCalidad: 94,
    horasTotales: 176,
    lotesCompletados: 32,
    tendenciaEficiencia: "up",
    alertas: [],
    salarioBase: 3200,
    bonificaciones: 480,
    penalizaciones: 0,
  },
  {
    trabajadorId: "t4",
    nombre: "Ana Ruiz",
    tipo: "jornalero",
    especialidades: ["Empaquetado", "Etiquetado"],
    promedioEficiencia: 85,
    promedioCalidad: 92,
    horasTotales: 144,
    lotesCompletados: 28,
    tendenciaEficiencia: "down",
    alertas: ["Calidad en descenso", "Requiere capacitación"],
    bonificaciones: 120,
    penalizaciones: 80,
  },
  {
    trabajadorId: "t5",
    nombre: "Luis Torres",
    tipo: "jornalero",
    especialidades: ["Almacén", "Transporte"],
    promedioEficiencia: 78,
    promedioCalidad: 89,
    horasTotales: 120,
    lotesCompletados: 15,
    tendenciaEficiencia: "down",
    alertas: ["Eficiencia crítica", "Evaluación requerida"],
    bonificaciones: 60,
    penalizaciones: 120,
  },
]

const registrosRecientes: RegistroProductividad[] = [
  {
    id: "r1",
    trabajadorId: "t1",
    fecha: "2024-12-20",
    proceso: "Recepción",
    horasTrabajas: 8,
    cantidadProcesada: 520,
    cantidadEsperada: 500,
    eficiencia: 104,
    calidad: 98,
    observaciones: "Excelente rendimiento",
    lote: "LOT-2024-019",
  },
  {
    id: "r2",
    trabajadorId: "t2",
    fecha: "2024-12-20",
    proceso: "Control Calidad",
    horasTrabajas: 6,
    cantidadProcesada: 280,
    cantidadEsperada: 300,
    eficiencia: 93,
    calidad: 96,
    observaciones: "Buen trabajo, mejorar velocidad",
    lote: "LOT-2024-018",
  },
  {
    id: "r3",
    trabajadorId: "t4",
    fecha: "2024-12-20",
    proceso: "Empaquetado",
    horasTrabajas: 7,
    cantidadProcesada: 180,
    cantidadEsperada: 210,
    eficiencia: 86,
    calidad: 91,
    observaciones: "Necesita mejorar ritmo",
    lote: "LOT-2024-017",
  },
]

export function ProductividadPersonal() {
  const [filtroTipo, setFiltroTipo] = useState<string>("todos")
  const [filtroEspecialidad, setFiltroEspecialidad] = useState<string>("todos")
  const [showRegistroModal, setShowRegistroModal] = useState(false)
  const [selectedTrabajador, setSelectedTrabajador] = useState<MetricasTrabajador | null>(null)

const getTendenciaIcon = (tendencia: string) => {
    switch (tendencia) {
      case "up":
        return <TrendingUp className="h-4 w-4 text-green-500" />
      case "down":
        return <TrendingDown className="h-4 w-4 text-red-500" />
      default:
        return <Target className="h-4 w-4 text-gray-500" />
    }
  }

const getEficienciaColor = (eficiencia: number) => {
    if (eficiencia >= 90) return "text-green-500"
    if (eficiencia >= 80) return "text-yellow-500"
    return "text-red-500"
  }

const getCalidadColor = (calidad: number) => {
    if (calidad >= 95) return "text-green-500"
    if (calidad >= 90) return "text-yellow-500"
    return "text-red-500"
  }

const calcularBonificacionTotal = (trabajador: MetricasTrabajador) => {
    let bonificacion = 0

// Bonificación por eficiencia
    if (trabajador.promedioEficiencia >= 95) bonificacion += 200
    else if (trabajador.promedioEficiencia >= 90) bonificacion += 100

// Bonificación por calidad
    if (trabajador.promedioCalidad >= 95) bonificacion += 150
    else if (trabajador.promedioCalidad >= 90) bonificacion += 75

// Bonificación por lotes completados
    bonificacion += trabajador.lotesCompletados * 5

return bonificacion + trabajador.bonificaciones - trabajador.penalizaciones
  }

const trabajadoresFiltrados = trabajadores.filter((trabajador) => {
    const filtroTipoMatch = filtroTipo === "todos" || trabajador.tipo === filtroTipo
    const filtroEspecialidadMatch =
      filtroEspecialidad === "todos" ||
      trabajador.especialidades.some((esp) => esp.toLowerCase().includes(filtroEspecialidad.toLowerCase()))
    return filtroTipoMatch && filtroEspecialidadMatch
  })

return (
    <div className="space-y-6">
      {/* Métricas Generales */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Users className="h-5 w-5 text-blue-500" />
            <div>
              <p className="text-sm text-muted-foreground">Personal Total</p>
              <p className="text-2xl font-bold">{trabajadores.length}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Target className="h-5 w-5 text-green-500" />
            <div>
              <p className="text-sm text-muted-foreground">Eficiencia Promedio</p>
              <p className="text-2xl font-bold">
                {Math.round(trabajadores.reduce((sum, t) => sum + t.promedioEficiencia, 0) / trabajadores.length)}%
              </p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Award className="h-5 w-5 text-purple-500" />
            <div>
              <p className="text-sm text-muted-foreground">Calidad Promedio</p>
              <p className="text-2xl font-bold">
                {Math.round(trabajadores.reduce((sum, t) => sum + t.promedioCalidad, 0) / trabajadores.length)}%
              </p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            <div>
              <p className="text-sm text-muted-foreground">Con Alertas</p>
              <p className="text-2xl font-bold">{trabajadores.filter((t) => t.alertas.length > 0).length}</p>
            </div>
          </div>
        </Card>
      </div>

{/* Controles */}
      <div className="flex items-center justify-between">
        <div className="flex gap-4">
          <div>
            <Label>Tipo de Personal</Label>
            <select
              className="w-40 p-2 border rounded-md bg-background"
              value={filtroTipo}
              onChange={(e) => setFiltroTipo(e.target.value)}
            >
              <option value="todos">Todos</option>
              <option value="fijo">Personal Fijo</option>
              <option value="jornalero">Jornaleros</option>
            </select>
          </div>
          <div>
            <Label>Especialidad</Label>
            <select
              className="w-40 p-2 border rounded-md bg-background"
              value={filtroEspecialidad}
              onChange={(e) => setFiltroEspecialidad(e.target.value)}
            >
              <option value="todos">Todas</option>
              <option value="recepcion">Recepción</option>
              <option value="lavado">Lavado</option>
              <option value="procesamiento">Procesamiento</option>
              <option value="empaquetado">Empaquetado</option>
              <option value="control">Control Calidad</option>
            </select>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="gap-2">
            <Filter className="h-4 w-4" />
            Más Filtros
          </Button>
          <Button variant="outline" className="gap-2">
            <Download className="h-4 w-4" />
            Exportar
          </Button>
          <Button onClick={() => setShowRegistroModal(true)} className="gap-2">
            <BarChart3 className="h-4 w-4" />
            Nuevo Registro
          </Button>
        </div>
      </div>

{/* Tabla de Productividad */}
      <Card className="p-6">
        <div className="mb-6">
          <h2 className="text-lg font-semibold">Productividad del Personal</h2>
          <p className="text-sm text-muted-foreground">Métricas de rendimiento y calidad</p>
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Trabajador</TableHead>
              <TableHead>Tipo</TableHead>
              <TableHead>Especialidades</TableHead>
              <TableHead>Eficiencia</TableHead>
              <TableHead>Calidad</TableHead>
              <TableHead>Lotes</TableHead>
              <TableHead>Horas</TableHead>
              <TableHead>Bonificación</TableHead>
              <TableHead>Estado</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {trabajadoresFiltrados.map((trabajador) => (
              <TableRow
                key={trabajador.trabajadorId}
                className="cursor-pointer hover:bg-muted/50"
                onClick={() => setSelectedTrabajador(trabajador)}
              >
                <TableCell>
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback>
                        {trabajador.nombre
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="font-medium">{trabajador.nombre}</div>
                      <div className="text-xs text-muted-foreground">ID: {trabajador.trabajadorId}</div>
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge
                    className={
                      trabajador.tipo === "fijo" ? "bg-blue-500/10 text-blue-500" : "bg-green-500/10 text-green-500"
                    }
                  >
                    {trabajador.tipo === "fijo" ? "Fijo" : "Jornalero"}
                  </Badge>
                </TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {trabajador.especialidades.map((esp, idx) => (
                      <Badge key={idx} variant="outline" className="text-xs">
                        {esp}
                      </Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    {getTendenciaIcon(trabajador.tendenciaEficiencia)}
                    <div>
                      <div className={`font-medium ${getEficienciaColor(trabajador.promedioEficiencia)}`}>
                        {trabajador.promedioEficiencia}%
                      </div>
                      <Progress value={trabajador.promedioEficiencia} className="w-16 h-1" />
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  <div className={`font-medium ${getCalidadColor(trabajador.promedioCalidad)}`}>
                    {trabajador.promedioCalidad}%
                  </div>
                  <Progress value={trabajador.promedioCalidad} className="w-16 h-1" />
                </TableCell>
                <TableCell className="text-center font-medium">{trabajador.lotesCompletados}</TableCell>
                <TableCell className="text-center">{trabajador.horasTotales}h</TableCell>
                <TableCell>
                  <div className="text-right">
                    <div className="font-medium text-green-600">+S/ {calcularBonificacionTotal(trabajador)}</div>
                    {trabajador.penalizaciones > 0 && (
                      <div className="text-xs text-red-500">-S/ {trabajador.penalizaciones}</div>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  {trabajador.alertas.length > 0 ? (
                    <div className="space-y-1">
                      {trabajador.alertas.map((alerta, idx) => (
                        <Badge key={idx} className="bg-red-500/10 text-red-500 text-xs">
                          {alerta}
                        </Badge>
                      ))}
                    </div>
                  ) : (
                    <Badge className="bg-green-500/10 text-green-500">Óptimo</Badge>
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

{/* Registros Recientes */}
      <Card className="p-6">
        <div className="mb-6">
          <h2 className="text-lg font-semibold">Registros Recientes</h2>
          <p className="text-sm text-muted-foreground">Últimas mediciones de productividad</p>
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Fecha</TableHead>
              <TableHead>Trabajador</TableHead>
              <TableHead>Proceso</TableHead>
              <TableHead>Horas</TableHead>
              <TableHead>Procesado/Esperado</TableHead>
              <TableHead>Eficiencia</TableHead>
              <TableHead>Calidad</TableHead>
              <TableHead>Observaciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {registrosRecientes.map((registro) => {
              const trabajador = trabajadores.find((t) => t.trabajadorId === registro.trabajadorId)
              return (
                <TableRow key={registro.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                      {registro.fecha}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="font-medium">{trabajador?.nombre}</div>
                    <div className="text-xs text-muted-foreground">{registro.lote}</div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{registro.proceso}</Badge>
                  </TableCell>
                  <TableCell className="text-center">
                    <div className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {registro.horasTrabajas}h
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="text-center">
                      <div className="font-medium">{registro.cantidadProcesada} kg</div>
                      <div className="text-xs text-muted-foreground">de {registro.cantidadEsperada} kg</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className={`text-center font-medium ${getEficienciaColor(registro.eficiencia)}`}>
                      {registro.eficiencia}%
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className={`text-center font-medium ${getCalidadColor(registro.calidad)}`}>
                      {registro.calidad}%
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="text-xs text-muted-foreground max-w-[200px] truncate">{registro.observaciones}</div>
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </Card>

{/* Modal de Detalle del Trabajador */}
      {selectedTrabajador && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <Avatar className="h-12 w-12">
                    <AvatarFallback>
                      {selectedTrabajador.nombre
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <h2 className="text-xl font-semibold">{selectedTrabajador.nombre}</h2>
                    <p className="text-muted-foreground">
                      {selectedTrabajador.tipo === "fijo" ? "Personal Fijo" : "Jornalero"} -
                      {selectedTrabajador.especialidades.join(", ")}
                    </p>
                  </div>
                </div>
                <Button variant="ghost" onClick={() => setSelectedTrabajador(null)}>
                  ×
                </Button>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Métricas Principales */}
                <div className="space-y-4">
                  <h3 className="font-medium">Métricas Principales</h3>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Eficiencia Promedio</span>
                      <div className="flex items-center gap-2">
                        {getTendenciaIcon(selectedTrabajador.tendenciaEficiencia)}
                        <span className={`font-bold ${getEficienciaColor(selectedTrabajador.promedioEficiencia)}`}>
                          {selectedTrabajador.promedioEficiencia}%
                        </span>
                      </div>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Calidad Promedio</span>
                      <span className={`font-bold ${getCalidadColor(selectedTrabajador.promedioCalidad)}`}>
                        {selectedTrabajador.promedioCalidad}%
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Lotes Completados</span>
                      <span className="font-bold">{selectedTrabajador.lotesCompletados}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Horas Totales</span>
                      <span className="font-bold">{selectedTrabajador.horasTotales}h</span>
                    </div>
                  </div>
                </div>

{/* Compensación */}
                <div className="space-y-4">
                  <h3 className="font-medium">Compensación</h3>
                  <div className="space-y-3">
                    {selectedTrabajador.salarioBase && (
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Salario Base</span>
                        <span className="font-bold">S/ {selectedTrabajador.salarioBase}</span>
                      </div>
                    )}
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Bonificaciones</span>
                      <span className="font-bold text-green-600">+S/ {selectedTrabajador.bonificaciones}</span>
                    </div>
                    {selectedTrabajador.penalizaciones > 0 && (
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Penalizaciones</span>
                        <span className="font-bold text-red-600">-S/ {selectedTrabajador.penalizaciones}</span>
                      </div>
                    )}
                    <div className="border-t pt-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm font-medium">Total Bonificación</span>
                        <span className="font-bold text-lg text-green-600">
                          S/ {calcularBonificacionTotal(selectedTrabajador)}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

{/* Alertas */}
                <div className="space-y-4">
                  <h3 className="font-medium">Estado y Alertas</h3>
                  {selectedTrabajador.alertas.length > 0 ? (
                    <div className="space-y-2">
                      {selectedTrabajador.alertas.map((alerta, idx) => (
                        <div key={idx} className="flex items-start gap-2 p-2 bg-red-50 dark:bg-red-950/20 rounded">
                          <AlertTriangle className="h-4 w-4 text-red-500 mt-0.5" />
                          <span className="text-sm text-red-700 dark:text-red-300">{alerta}</span>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950/20 rounded">
                      <Award className="h-4 w-4 text-green-500" />
                      <span className="text-sm text-green-700 dark:text-green-300">Rendimiento óptimo</span>
                    </div>
                  )}
                </div>
              </div>

<div className="flex justify-end gap-4 mt-6 pt-6 border-t">
                <Button variant="outline" onClick={() => setSelectedTrabajador(null)}>
                  Cerrar
                </Button>
                <Button>
                  <BarChart3 className="h-4 w-4 mr-2" />
                  Ver Historial Completo
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]png:file="public/images/receipt-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Imagen%20de%20WhatsApp%202025-05-19%20a%20las%2023.12.20_6e9de88e.jpg-pcLAigrlekAuwkVMPmhVrC7PxjRpUS.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/lotes/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card } from "@/components/ui/card"

export default function LotesLoading() {
  return (
    <div className="container mx-auto p-4 lg:p-6 space-y-4 lg:space-y-6">
      {/* Stats Cards Skeleton */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i} className="p-3 lg:p-4">
            <div className="flex items-center gap-2">
              <Skeleton className="h-4 w-4 lg:h-5 lg:w-5" />
              <div className="space-y-2">
                <Skeleton className="h-3 w-16" />
                <Skeleton className="h-6 w-12" />
              </div>
            </div>
          </Card>
        ))}
      </div>

{/* Header Skeleton */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div className="space-y-2">
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-4 w-64" />
        </div>
        <div className="flex gap-2">
          <Skeleton className="h-9 w-24" />
          <Skeleton className="h-9 w-24" />
        </div>
      </div>

{/* Table Skeleton */}
      <Card className="p-3 lg:p-6">
        <div className="space-y-4">
          <div className="space-y-2">
            <Skeleton className="h-5 w-32" />
            <Skeleton className="h-4 w-48" />
          </div>

<div className="space-y-3">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex items-center justify-between p-4 border rounded">
                <div className="space-y-2">
                  <Skeleton className="h-4 w-24" />
                  <Skeleton className="h-3 w-32" />
                </div>
                <div className="flex gap-2">
                  <Skeleton className="h-8 w-8" />
                  <Skeleton className="h-8 w-8" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/asignacion-procesamiento.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } 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 { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  Package,
  ShoppingCart,
  Split,
  Play,
  Clock,
  Users,
  Calendar,
  Weight,
  Factory,
  Target,
  TrendingUp,
  Settings,
  X,
  Plus,
} from "lucide-react"

interface Lote {
  id: string
  codigo: string
  producto: "curcuma" | "kion" | "jengibre"
  nombreProductor: string
  fechaRecepcion: string
  pesoNeto: number
  numeroJabas: number
  jabasDisponibles: number
  nivelHumedad: number
  estado: "disponible" | "parcial" | "agotado" | "reservado"
  modalidadCompra: "carga-cerrada" | "por-proceso"
  categorias?: {
    exportable: number
    industrial: number
    tronco: number
    descarte: number
  }
  observaciones: string
}

interface Pedido {
  id: string
  codigoVenta: string
  cliente: string
  fechaPedido: string
  fechaEntrega: string
  cantidadRequerida: number
  producto: "curcuma" | "kion" | "jengibre"
  calidad: "exportable" | "industrial" | "mixta"
  estado: "pendiente" | "en-asignacion" | "en-proceso" | "completado" | "cancelado"
  prioridad: "alta" | "media" | "baja"
  observaciones: string
  procesosAsignados: string[]
}

interface Proceso {
  id: string
  codigo: string
  loteOrigen: string
  pedidoDestino: string
  jabasAsignadas: number
  pesoEstimado: number
  fechaInicio: string
  fechaEstimadaFin: string
  estado: "programado" | "en-proceso" | "completado" | "pausado"
  personalAsignado: string[]
  etapaActual: "lavado" | "perfilado" | "seleccion" | "empaquetado" | "finalizado"
  rendimientoReal?: {
    exportable: number
    industrial: number
    tronco: number
    descarte: number
    merma: number
  }
  costos?: {
    manoObra: number
    insumos: number
    energia: number
    agua: number
  }
  observaciones: string
}

const lotesDisponibles: Lote[] = [
  {
    id: "lote-1",
    codigo: "LOT-2024-001",
    producto: "jengibre",
    nombreProductor: "Julian Benito Boza",
    fechaRecepcion: "2024-12-20",
    pesoNeto: 485.5,
    numeroJabas: 80,
    jabasDisponibles: 80,
    nivelHumedad: 5,
    estado: "disponible",
    modalidadCompra: "carga-cerrada",
    categorias: {
      exportable: 350,
      industrial: 100,
      tronco: 25,
      descarte: 10.5,
    },
    observaciones: "Calidad excelente, sin daños mecánicos",
  },
  {
    id: "lote-2",
    codigo: "LOT-2024-002",
    producto: "jengibre",
    nombreProductor: "Cooperativa San Martín",
    fechaRecepcion: "2024-12-21",
    pesoNeto: 320.0,
    numeroJabas: 50,
    jabasDisponibles: 50,
    nivelHumedad: 7,
    estado: "disponible",
    modalidadCompra: "por-proceso",
    observaciones: "Requiere clasificación detallada",
  },
  {
    id: "lote-3",
    codigo: "LOT-2024-003",
    producto: "curcuma",
    nombreProductor: "Agrícola Norte SAC",
    fechaRecepcion: "2024-12-19",
    pesoNeto: 280.5,
    numeroJabas: 45,
    jabasDisponibles: 25,
    nivelHumedad: 3,
    estado: "parcial",
    modalidadCompra: "carga-cerrada",
    categorias: {
      exportable: 200,
      industrial: 60,
      tronco: 15,
      descarte: 5.5,
    },
    observaciones: "Lote parcialmente utilizado",
  },
]

const pedidosActivos: Pedido[] = [
  {
    id: "pedido-1",
    codigoVenta: "VTA-2024-001",
    cliente: "Exportadora Lima",
    fechaPedido: "2024-12-22",
    fechaEntrega: "2024-12-28",
    cantidadRequerida: 200,
    producto: "jengibre",
    calidad: "exportable",
    estado: "pendiente",
    prioridad: "alta",
    observaciones: "Cliente premium, calidad AAA requerida",
    procesosAsignados: [],
  },
  {
    id: "pedido-2",
    codigoVenta: "VTA-2024-002",
    cliente: "Mercado Central",
    fechaPedido: "2024-12-22",
    fechaEntrega: "2024-12-30",
    cantidadRequerida: 150,
    producto: "jengibre",
    calidad: "industrial",
    estado: "pendiente",
    prioridad: "media",
    observaciones: "Mezcla de calidades aceptable",
    procesosAsignados: [],
  },
  {
    id: "pedido-3",
    codigoVenta: "VTA-2024-003",
    cliente: "Supermercados Wong",
    fechaPedido: "2024-12-21",
    fechaEntrega: "2024-12-27",
    cantidadRequerida: 100,
    producto: "curcuma",
    calidad: "exportable",
    estado: "en-asignacion",
    prioridad: "alta",
    observaciones: "Urgente para campaña navideña",
    procesosAsignados: ["PROC-001"],
  },
]

const personalDisponible = [
  { id: "p1", nombre: "Juan Pérez", especialidad: "Lavado" },
  { id: "p2", nombre: "María García", especialidad: "Perfilado" },
  { id: "p3", nombre: "Carlos López", especialidad: "Selección" },
  { id: "p4", nombre: "Ana Ruiz", especialidad: "Empaquetado" },
]

export function AsignacionProcesamiento() {
  const [lotes, setLotes] = useState<Lote[]>(lotesDisponibles)
  const [pedidos, setPedidos] = useState<Pedido[]>(pedidosActivos)
  const [procesos, setProcesos] = useState<Proceso[]>([])
  const [showAsignacionModal, setShowAsignacionModal] = useState(false)
  const [showProcesoModal, setShowProcesoModal] = useState(false)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [selectedPedido, setSelectedPedido] = useState<Pedido | null>(null)
  const [draggedLote, setDraggedLote] = useState<Lote | null>(null)
  const [showPedidoModal, setShowPedidoModal] = useState(false)
  const [editingPedido, setEditingPedido] = useState<Pedido | null>(null)
  const [isCreatingPedido, setIsCreatingPedido] = useState(false)
  const [pedidoFormData, setPedidoFormData] = useState({
    codigoVenta: "",
    cliente: "",
    fechaPedido: "",
    fechaEntrega: "",
    cantidadRequerida: 0,
    producto: "jengibre" as "curcuma" | "kion" | "jengibre",
    calidad: "exportable" as "exportable" | "industrial" | "mixta",
    prioridad: "media" as "alta" | "media" | "baja",
    observaciones: "",
    lotesAsignados: [] as Array<{
      loteId: string
      jabasAsignadas: number
      pesoEstimado: number
    }>,
  })

const [asignacionData, setAsignacionData] = useState({
    jabasAsignadas: 0,
    pesoEstimado: 0,
    fechaInicio: "",
    fechaEstimadaFin: "",
    personalAsignado: [] as string[],
    observaciones: "",
  })

const handleDragStart = (lote: Lote) => {
    setDraggedLote(lote)
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
  }

const handleDrop = (e: React.DragEvent, pedido: Pedido) => {
    e.preventDefault()
    if (draggedLote && draggedLote.producto === pedido.producto) {
      setSelectedLote(draggedLote)
      setSelectedPedido(pedido)
      setAsignacionData({
        jabasAsignadas: Math.min(draggedLote.jabasDisponibles, Math.ceil(pedido.cantidadRequerida / 6)),
        pesoEstimado: Math.min(draggedLote.pesoNeto, pedido.cantidadRequerida),
        fechaInicio: new Date().toISOString().split("T")[0],
        fechaEstimadaFin: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
        personalAsignado: [],
        observaciones: "",
      })
      setShowAsignacionModal(true)
    }
    setDraggedLote(null)
  }

const handleCreateProceso = () => {
    if (!selectedLote || !selectedPedido) return

const nuevoProceso: Proceso = {
      id: `proceso-${Date.now()}`,
      codigo: `PROC-${Date.now().toString().slice(-6)}`,
      loteOrigen: selectedLote.id,
      pedidoDestino: selectedPedido.id,
      jabasAsignadas: asignacionData.jabasAsignadas,
      pesoEstimado: asignacionData.pesoEstimado,
      fechaInicio: asignacionData.fechaInicio,
      fechaEstimadaFin: asignacionData.fechaEstimadaFin,
      estado: "programado",
      personalAsignado: asignacionData.personalAsignado,
      etapaActual: "lavado",
      observaciones: asignacionData.observaciones,
    }

setProcesos((prev) => [...prev, nuevoProceso])

// Actualizar lote
    setLotes((prev) =>
      prev.map((lote) => {
        if (lote.id === selectedLote.id) {
          const nuevasJabasDisponibles = lote.jabasDisponibles - asignacionData.jabasAsignadas
          return {
            ...lote,
            jabasDisponibles: nuevasJabasDisponibles,
            estado:
              nuevasJabasDisponibles === 0
                ? "agotado"
                : nuevasJabasDisponibles < lote.numeroJabas
                  ? "parcial"
                  : "disponible",
          }
        }
        return lote
      }),
    )

// Actualizar pedido
    setPedidos((prev) =>
      prev.map((pedido) => {
        if (pedido.id === selectedPedido.id) {
          return {
            ...pedido,
            procesosAsignados: [...pedido.procesosAsignados, nuevoProceso.codigo],
            estado: "en-asignacion",
          }
        }
        return pedido
      }),
    )

setShowAsignacionModal(false)
    resetAsignacionData()
  }

const resetAsignacionData = () => {
    setAsignacionData({
      jabasAsignadas: 0,
      pesoEstimado: 0,
      fechaInicio: "",
      fechaEstimadaFin: "",
      personalAsignado: [],
      observaciones: "",
    })
    setSelectedLote(null)
    setSelectedPedido(null)
  }

const handleIniciarPedido = (pedido: Pedido) => {
    setPedidos((prev) => prev.map((p) => (p.id === pedido.id ? { ...p, estado: "en-proceso" as const } : p)))
  }

const handleCancelarPedido = (pedido: Pedido) => {
    // Liberar lotes asignados
    const procesosDelPedido = procesos.filter((p) => p.pedidoDestino === pedido.id)

procesosDelPedido.forEach((proceso) => {
      setLotes((prev) =>
        prev.map((lote) => {
          if (lote.id === proceso.loteOrigen) {
            const nuevasJabasDisponibles = lote.jabasDisponibles + proceso.jabasAsignadas
            return {
              ...lote,
              jabasDisponibles: nuevasJabasDisponibles,
              estado: nuevasJabasDisponibles === lote.numeroJabas ? ("disponible" as const) : ("parcial" as const),
            }
          }
          return lote
        }),
      )
    })

// Eliminar procesos del pedido
    setProcesos((prev) => prev.filter((p) => p.pedidoDestino !== pedido.id))

// Cancelar pedido
    setPedidos((prev) =>
      prev.map((p) => (p.id === pedido.id ? { ...p, estado: "cancelado" as const, procesosAsignados: [] } : p)),
    )
  }

const handleEditarPedido = (pedido: Pedido) => {
    setEditingPedido(pedido)
    setPedidoFormData({
      codigoVenta: pedido.codigoVenta,
      cliente: pedido.cliente,
      fechaPedido: pedido.fechaPedido,
      fechaEntrega: pedido.fechaEntrega,
      cantidadRequerida: pedido.cantidadRequerida,
      producto: pedido.producto,
      calidad: pedido.calidad,
      prioridad: pedido.prioridad,
      observaciones: pedido.observaciones,
      lotesAsignados: procesos
        .filter((p) => p.pedidoDestino === pedido.id)
        .map((p) => ({
          loteId: p.loteOrigen,
          jabasAsignadas: p.jabasAsignadas,
          pesoEstimado: p.pesoEstimado,
        })),
    })
    setShowPedidoModal(true)
  }

const handleNuevoPedido = () => {
    setIsCreatingPedido(true)
    setEditingPedido(null)
    setPedidoFormData({
      codigoVenta: `VTA-${new Date().getFullYear()}-${String(pedidos.length + 1).padStart(3, "0")}`,
      cliente: "",
      fechaPedido: new Date().toISOString().split("T")[0],
      fechaEntrega: "",
      cantidadRequerida: 0,
      producto: "jengibre",
      calidad: "exportable",
      prioridad: "media",
      observaciones: "",
      lotesAsignados: [],
    })
    setShowPedidoModal(true)
  }

const handleGuardarPedido = () => {
    if (isCreatingPedido) {
      // Crear nuevo pedido
      const nuevoPedido: Pedido = {
        id: `pedido-${Date.now()}`,
        ...pedidoFormData,
        estado: "pendiente",
        procesosAsignados: [],
      }
      setPedidos((prev) => [...prev, nuevoPedido])

// Crear procesos para lotes asignados
      pedidoFormData.lotesAsignados.forEach((loteAsignado) => {
        const nuevoProceso: Proceso = {
          id: `proceso-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
          codigo: `PROC-${Date.now().toString().slice(-6)}`,
          loteOrigen: loteAsignado.loteId,
          pedidoDestino: nuevoPedido.id,
          jabasAsignadas: loteAsignado.jabasAsignadas,
          pesoEstimado: loteAsignado.pesoEstimado,
          fechaInicio: new Date().toISOString().split("T")[0],
          fechaEstimadaFin: pedidoFormData.fechaEntrega,
          estado: "programado",
          personalAsignado: [],
          etapaActual: "lavado",
          observaciones: "",
        }
        setProcesos((prev) => [...prev, nuevoProceso])

// Actualizar lote
        setLotes((prev) =>
          prev.map((lote) => {
            if (lote.id === loteAsignado.loteId) {
              const nuevasJabasDisponibles = lote.jabasDisponibles - loteAsignado.jabasAsignadas
              return {
                ...lote,
                jabasDisponibles: nuevasJabasDisponibles,
                estado:
                  nuevasJabasDisponibles === 0
                    ? ("agotado" as const)
                    : nuevasJabasDisponibles < lote.numeroJabas
                      ? ("parcial" as const)
                      : ("disponible" as const),
              }
            }
            return lote
          }),
        )
      })
    } else if (editingPedido) {
      // Actualizar pedido existente
      setPedidos((prev) => prev.map((p) => (p.id === editingPedido.id ? { ...p, ...pedidoFormData } : p)))
    }

setShowPedidoModal(false)
    setIsCreatingPedido(false)
    setEditingPedido(null)
  }

const handleAgregarLoteAPedido = (loteId: string, jabas: number) => {
    const lote = lotes.find((l) => l.id === loteId)
    if (!lote) return

const pesoEstimado = (jabas * lote.pesoNeto) / lote.numeroJabas

setPedidoFormData((prev) => ({
      ...prev,
      lotesAsignados: [
        ...prev.lotesAsignados.filter((l) => l.loteId !== loteId),
        { loteId, jabasAsignadas: jabas, pesoEstimado },
      ],
    }))
  }

const handleRemoverLoteDePedido = (loteId: string) => {
    setPedidoFormData((prev) => ({
      ...prev,
      lotesAsignados: prev.lotesAsignados.filter((l) => l.loteId !== loteId),
    }))
  }

const getEstadoColor = (estado: string) => {
    switch (estado) {
      case "disponible":
        return "bg-green-500/10 text-green-500"
      case "parcial":
        return "bg-yellow-500/10 text-yellow-500"
      case "agotado":
        return "bg-red-500/10 text-red-500"
      case "reservado":
        return "bg-blue-500/10 text-blue-500"
      case "pendiente":
        return "bg-orange-500/10 text-orange-500"
      case "en-asignacion":
        return "bg-blue-500/10 text-blue-500"
      case "en-proceso":
        return "bg-purple-500/10 text-purple-500"
      case "completado":
        return "bg-green-500/10 text-green-500"
      case "programado":
        return "bg-gray-500/10 text-gray-500"
      case "pausado":
        return "bg-red-500/10 text-red-500"
      case "cancelado":
        return "bg-red-500/10 text-red-500"
      default:
        return "bg-gray-500/10 text-gray-500"
    }
  }

const getPrioridadColor = (prioridad: string) => {
    switch (prioridad) {
      case "alta":
        return "bg-red-500/10 text-red-500"
      case "media":
        return "bg-yellow-500/10 text-yellow-500"
      case "baja":
        return "bg-green-500/10 text-green-500"
      default:
        return "bg-gray-500/10 text-gray-500"
    }
  }

const getEtapaIcon = (etapa: string) => {
    switch (etapa) {
      case "lavado":
        return "🧽"
      case "perfilado":
        return "✂️"
      case "seleccion":
        return "🔍"
      case "empaquetado":
        return "📦"
      case "finalizado":
        return "✅"
      default:
        return "⏳"
    }
  }

return (
    <div className="space-y-4 lg:space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div>
          <h1 className="text-xl lg:text-2xl font-bold">Asignación y Procesamiento</h1>
          <p className="text-sm text-muted-foreground">Gestión de lotes, pedidos y procesos de producción</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="gap-2 text-sm">
            <Target className="h-4 w-4" />
            Optimizar Asignación
          </Button>
          <Button onClick={() => setShowProcesoModal(true)} className="gap-2 text-sm">
            <Play className="h-4 w-4" />
            Iniciar Proceso
          </Button>
        </div>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3 lg:gap-4">
        <Card className="p-3 lg:p-4">
          <div className="flex items-center gap-2">
            <Package className="h-4 w-4 lg:h-5 lg:w-5 text-blue-500" />
            <div>
              <p className="text-xs lg:text-sm text-muted-foreground">Lotes Disponibles</p>
              <p className="text-lg lg:text-2xl font-bold">{lotes.filter((l) => l.estado === "disponible").length}</p>
            </div>
          </div>
        </Card>
        <Card className="p-3 lg:p-4">
          <div className="flex items-center gap-2">
            <ShoppingCart className="h-4 w-4 lg:h-5 lg:w-5 text-green-500" />
            <div>
              <p className="text-xs lg:text-sm text-muted-foreground">Pedidos Activos</p>
              <p className="text-lg lg:text-2xl font-bold">{pedidos.filter((p) => p.estado !== "completado").length}</p>
            </div>
          </div>
        </Card>
        <Card className="p-3 lg:p-4">
          <div className="flex items-center gap-2">
            <Factory className="h-4 w-4 lg:h-5 lg:w-5 text-purple-500" />
            <div>
              <p className="text-xs lg:text-sm text-muted-foreground">Procesos Activos</p>
              <p className="text-lg lg:text-2xl font-bold">
                {procesos.filter((p) => p.estado !== "completado").length}
              </p>
            </div>
          </div>
        </Card>
        <Card className="p-3 lg:p-4">
          <div className="flex items-center gap-2">
            <Weight className="h-4 w-4 lg:h-5 lg:w-5 text-orange-500" />
            <div>
              <p className="text-xs lg:text-sm text-muted-foreground">Jabas en Proceso</p>
              <p className="text-lg lg:text-2xl font-bold">{procesos.reduce((sum, p) => sum + p.jabasAsignadas, 0)}</p>
            </div>
          </div>
        </Card>
        <Card className="p-3 lg:p-4">
          <div className="flex items-center gap-2">
            <TrendingUp className="h-4 w-4 lg:h-5 lg:w-5 text-teal-500" />
            <div>
              <p className="text-xs lg:text-sm text-muted-foreground">Eficiencia</p>
              <p className="text-lg lg:text-2xl font-bold">94%</p>
            </div>
          </div>
        </Card>
      </div>

{/* Main Layout */}
      <div className="grid grid-cols-1 xl:grid-cols-4 gap-4 lg:gap-6">
        {/* Lotes Disponibles */}
        <div className="xl:col-span-1">
          <Card className="p-4">
            <div className="flex items-center gap-2 mb-4">
              <Package className="h-5 w-5 text-blue-500" />
              <h2 className="font-semibold">Lotes Disponibles</h2>
            </div>
            <div className="space-y-3 max-h-96 overflow-y-auto">
              {lotes
                .filter((lote) => lote.estado !== "agotado")
                .map((lote) => (
                  <Card
                    key={lote.id}
                    className="p-3 cursor-grab hover:shadow-md transition-shadow"
                    draggable
                    onDragStart={() => handleDragStart(lote)}
                  >
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-medium text-sm">{lote.codigo}</span>
                        <Badge className={getEstadoColor(lote.estado)}>{lote.estado}</Badge>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        <div>{lote.producto.toUpperCase()}</div>
                        <div>{lote.nombreProductor}</div>
                      </div>
                      <div className="grid grid-cols-2 gap-2 text-xs">
                        <div>
                          <span className="text-muted-foreground">Jabas:</span>
                          <span className="ml-1 font-medium">
                            {lote.jabasDisponibles}/{lote.numeroJabas}
                          </span>
                        </div>
                        <div>
                          <span className="text-muted-foreground">Peso:</span>
                          <span className="ml-1 font-medium">{lote.pesoNeto.toFixed(1)} kg</span>
                        </div>
                      </div>
                      {lote.modalidadCompra === "carga-cerrada" && lote.categorias && (
                        <div className="text-xs bg-muted/50 rounded p-2">
                          <div className="font-medium mb-1">Categorías conocidas:</div>
                          <div className="grid grid-cols-2 gap-1">
                            <span>Exp: {lote.categorias.exportable}kg</span>
                            <span>Ind: {lote.categorias.industrial}kg</span>
                            <span>Tronco: {lote.categorias.tronco}kg</span>
                            <span>Desc: {lote.categorias.descarte}kg</span>
                          </div>
                        </div>
                      )}
                      {lote.modalidadCompra === "por-proceso" && (
                        <div className="text-xs bg-yellow-50 dark:bg-yellow-950/20 rounded p-2">
                          <span className="text-yellow-700 dark:text-yellow-300">⚠️ Requiere clasificación</span>
                        </div>
                      )}
                    </div>
                  </Card>
                ))}
            </div>
          </Card>
        </div>

{/* Pedidos Activos */}
        <div className="xl:col-span-2">
          <Card className="p-4">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <ShoppingCart className="h-5 w-5 text-green-500" />
                <h2 className="font-semibold">Pedidos Activos</h2>
              </div>
              <Button onClick={handleNuevoPedido} size="sm" className="gap-2">
                <Plus className="h-4 w-4" />
                Nuevo Pedido
              </Button>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              {pedidos
                .filter((pedido) => pedido.estado !== "completado" && pedido.estado !== "cancelado")
                .map((pedido) => (
                  <Card
                    key={pedido.id}
                    className="p-4 border-2 border-dashed border-muted hover:border-primary/50 transition-colors"
                    onDragOver={handleDragOver}
                    onDrop={(e) => handleDrop(e, pedido)}
                  >
                    <div className="space-y-3">
                      <div className="flex items-start justify-between">
                        <div>
                          <h3 className="font-medium text-sm">{pedido.codigoVenta}</h3>
                          <p className="text-xs text-muted-foreground">{pedido.cliente}</p>
                        </div>
                        <div className="flex gap-1">
                          <Badge className={getPrioridadColor(pedido.prioridad)}>{pedido.prioridad}</Badge>
                          <Badge className={getEstadoColor(pedido.estado)}>{pedido.estado}</Badge>
                        </div>
                      </div>

<div className="space-y-2 text-xs">
                        <div className="flex items-center gap-2">
                          <Package className="h-3 w-3" />
                          <span>{pedido.producto.toUpperCase()}</span>
                          <span>•</span>
                          <span>{pedido.cantidadRequerida} kg</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Calendar className="h-3 w-3" />
                          <span>Entrega: {pedido.fechaEntrega}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Target className="h-3 w-3" />
                          <span>Calidad: {pedido.calidad}</span>
                        </div>
                      </div>

{pedido.procesosAsignados.length > 0 && (
                        <div className="space-y-2">
                          <div className="text-xs font-medium">Procesos Asignados:</div>
                          <div className="flex flex-wrap gap-1">
                            {pedido.procesosAsignados.map((procesoId) => {
                              const proceso = procesos.find((p) => p.codigo === procesoId)
                              return (
                                <Badge key={procesoId} variant="outline" className="text-xs">
                                  {procesoId}
                                  {proceso && <span className="ml-1">{getEtapaIcon(proceso.etapaActual)}</span>}
                                </Badge>
                              )
                            })}
                          </div>
                        </div>
                      )}

<div className="text-xs text-muted-foreground bg-muted/50 rounded p-2">
                        {pedido.observaciones}
                      </div>

{/* Botones de Acción */}
                      <div className="flex flex-wrap gap-2 pt-2 border-t">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleEditarPedido(pedido)}
                          className="gap-1 text-xs"
                        >
                          <Settings className="h-3 w-3" />
                          Gestionar
                        </Button>

{pedido.estado === "pendiente" && (
                          <Button size="sm" onClick={() => handleIniciarPedido(pedido)} className="gap-1 text-xs">
                            <Play className="h-3 w-3" />
                            Iniciar
                          </Button>
                        )}

{pedido.estado !== "completado" && (
                          <Button
                            size="sm"
                            variant="destructive"
                            onClick={() => handleCancelarPedido(pedido)}
                            className="gap-1 text-xs"
                          >
                            <X className="h-3 w-3" />
                            Cancelar
                          </Button>
                        )}
                      </div>

{pedido.estado === "pendiente" && (
                        <div className="text-center text-xs text-muted-foreground border-t pt-2">
                          Arrastra un lote aquí para asignar
                        </div>
                      )}
                    </div>
                  </Card>
                ))}
            </div>
          </Card>
        </div>

{/* Procesos en Curso */}
        <div className="xl:col-span-1">
          <Card className="p-4">
            <div className="flex items-center gap-2 mb-4">
              <Factory className="h-5 w-5 text-purple-500" />
              <h2 className="font-semibold">Procesos en Curso</h2>
            </div>
            <div className="space-y-3 max-h-96 overflow-y-auto">
              {procesos.map((proceso) => {
                const loteOrigen = lotes.find((l) => l.id === proceso.loteOrigen)
                const pedidoDestino = pedidos.find((p) => p.id === proceso.pedidoDestino)
                return (
                  <Card key={proceso.id} className="p-3">
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-medium text-sm">{proceso.codigo}</span>
                        <Badge className={getEstadoColor(proceso.estado)}>{proceso.estado}</Badge>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        <div>De: {loteOrigen?.codigo}</div>
                        <div>Para: {pedidoDestino?.codigoVenta}</div>
                      </div>
                      <div className="flex items-center gap-2 text-xs">
                        <span className="text-2xl">{getEtapaIcon(proceso.etapaActual)}</span>
                        <div>
                          <div className="font-medium">{proceso.etapaActual}</div>
                          <div className="text-muted-foreground">{proceso.jabasAsignadas} jabas</div>
                        </div>
                      </div>
                      {proceso.personalAsignado.length > 0 && (
                        <div className="flex items-center gap-1">
                          <Users className="h-3 w-3" />
                          <div className="flex gap-1">
                            {proceso.personalAsignado.map((personaId) => {
                              const persona = personalDisponible.find((p) => p.id === personaId)
                              return (
                                <Avatar key={personaId} className="h-5 w-5">
                                  <AvatarFallback className="text-xs">
                                    {persona?.nombre
                                      .split(" ")
                                      .map((n) => n[0])
                                      .join("")}
                                  </AvatarFallback>
                                </Avatar>
                              )
                            })}
                          </div>
                        </div>
                      )}
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <Clock className="h-3 w-3" />
                        <span>Fin: {proceso.fechaEstimadaFin}</span>
                      </div>
                    </div>
                  </Card>
                )
              })}
            </div>
          </Card>
        </div>
      </div>

{/* Modal de Asignación */}
      {showAsignacionModal && selectedLote && selectedPedido && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="p-4 lg:p-6">
              <div className="flex items-center justify-between mb-4 lg:mb-6">
                <h2 className="text-lg lg:text-xl font-semibold">Asignar Lote a Pedido</h2>
                <Button variant="ghost" onClick={() => setShowAsignacionModal(false)}>
                  ×
                </Button>
              </div>

<div className="space-y-6">
                {/* Información de Origen y Destino */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <Card className="p-4 bg-blue-50 dark:bg-blue-950/20">
                    <h3 className="font-medium text-blue-700 dark:text-blue-300 mb-2">Lote Origen</h3>
                    <div className="space-y-1 text-sm">
                      <div>
                        <strong>Código:</strong> {selectedLote.codigo}
                      </div>
                      <div>
                        <strong>Productor:</strong> {selectedLote.nombreProductor}
                      </div>
                      <div>
                        <strong>Jabas disponibles:</strong> {selectedLote.jabasDisponibles}
                      </div>
                      <div>
                        <strong>Peso neto:</strong> {selectedLote.pesoNeto.toFixed(1)} kg
                      </div>
                      <div>
                        <strong>Modalidad:</strong> {selectedLote.modalidadCompra}
                      </div>
                    </div>
                  </Card>

<Card className="p-4 bg-green-50 dark:bg-green-950/20">
                    <h3 className="font-medium text-green-700 dark:text-green-300 mb-2">Pedido Destino</h3>
                    <div className="space-y-1 text-sm">
                      <div>
                        <strong>Código:</strong> {selectedPedido.codigoVenta}
                      </div>
                      <div>
                        <strong>Cliente:</strong> {selectedPedido.cliente}
                      </div>
                      <div>
                        <strong>Cantidad requerida:</strong> {selectedPedido.cantidadRequerida} kg
                      </div>
                      <div>
                        <strong>Calidad:</strong> {selectedPedido.calidad}
                      </div>
                      <div>
                        <strong>Entrega:</strong> {selectedPedido.fechaEntrega}
                      </div>
                    </div>
                  </Card>
                </div>

{/* Configuración del Proceso */}
                <div className="space-y-4">
                  <h3 className="font-medium">Configuración del Proceso</h3>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="jabasAsignadas">Jabas a Asignar *</Label>
                      <Input
                        id="jabasAsignadas"
                        type="number"
                        min="1"
                        max={selectedLote.jabasDisponibles}
                        value={asignacionData.jabasAsignadas}
                        onChange={(e) =>
                          setAsignacionData((prev) => ({
                            ...prev,
                            jabasAsignadas: Number.parseInt(e.target.value) || 0,
                            pesoEstimado:
                              (Number.parseInt(e.target.value) || 0) *
                              (selectedLote.pesoNeto / selectedLote.numeroJabas),
                          }))
                        }
                        className="text-sm"
                      />
                      <p className="text-xs text-muted-foreground mt-1">
                        Máximo: {selectedLote.jabasDisponibles} jabas disponibles
                      </p>
                    </div>
                    <div>
                      <Label htmlFor="pesoEstimado">Peso Estimado (kg)</Label>
                      <Input
                        id="pesoEstimado"
                        type="number"
                        step="0.1"
                        value={asignacionData.pesoEstimado.toFixed(1)}
                        onChange={(e) =>
                          setAsignacionData((prev) => ({
                            ...prev,
                            pesoEstimado: Number.parseFloat(e.target.value) || 0,
                          }))
                        }
                        className="text-sm"
                      />
                    </div>
                  </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="fechaInicio">Fecha de Inicio</Label>
                      <Input
                        id="fechaInicio"
                        type="date"
                        value={asignacionData.fechaInicio}
                        onChange={(e) => setAsignacionData((prev) => ({ ...prev, fechaInicio: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="fechaEstimadaFin">Fecha Estimada de Fin</Label>
                      <Input
                        id="fechaEstimadaFin"
                        type="date"
                        value={asignacionData.fechaEstimadaFin}
                        onChange={(e) => setAsignacionData((prev) => ({ ...prev, fechaEstimadaFin: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                  </div>

<div>
                    <Label>Personal Asignado</Label>
                    <div className="grid grid-cols-2 gap-2 mt-2">
                      {personalDisponible.map((persona) => (
                        <label
                          key={persona.id}
                          className="flex items-center gap-2 p-2 border rounded cursor-pointer hover:bg-muted/50"
                        >
                          <input
                            type="checkbox"
                            checked={asignacionData.personalAsignado.includes(persona.id)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                setAsignacionData((prev) => ({
                                  ...prev,
                                  personalAsignado: [...prev.personalAsignado, persona.id],
                                }))
                              } else {
                                setAsignacionData((prev) => ({
                                  ...prev,
                                  personalAsignado: prev.personalAsignado.filter((id) => id !== persona.id),
                                }))
                              }
                            }}
                          />
                          <div className="text-sm">
                            <div className="font-medium">{persona.nombre}</div>
                            <div className="text-xs text-muted-foreground">{persona.especialidad}</div>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>

<div>
                    <Label htmlFor="observaciones">Observaciones</Label>
                    <Textarea
                      id="observaciones"
                      value={asignacionData.observaciones}
                      onChange={(e) => setAsignacionData((prev) => ({ ...prev, observaciones: e.target.value }))}
                      rows={3}
                      className="text-sm"
                    />
                  </div>
                </div>

{/* Resumen */}
                <Card className="p-4 bg-muted/50">
                  <h4 className="font-medium mb-2">Resumen del Proceso</h4>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-muted-foreground">Código del proceso:</span>
                      <p className="font-medium">PROC-{Date.now().toString().slice(-6)}</p>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Jabas restantes en lote:</span>
                      <p className="font-medium">{selectedLote.jabasDisponibles - asignacionData.jabasAsignadas}</p>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Estado del lote después:</span>
                      <p className="font-medium">
                        {selectedLote.jabasDisponibles - asignacionData.jabasAsignadas === 0 ? "Agotado" : "Parcial"}
                      </p>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Duración estimada:</span>
                      <p className="font-medium">
                        {asignacionData.fechaInicio && asignacionData.fechaEstimadaFin
                          ? Math.ceil(
                              (new Date(asignacionData.fechaEstimadaFin).getTime() -
                                new Date(asignacionData.fechaInicio).getTime()) /
                                (1000 * 60 * 60 * 24),
                            )
                          : 0}{" "}
                        días
                      </p>
                    </div>
                  </div>
                </Card>
              </div>

<div className="flex flex-col sm:flex-row justify-end gap-3 mt-6 pt-6 border-t">
                <Button variant="outline" onClick={() => setShowAsignacionModal(false)} className="text-sm">
                  Cancelar
                </Button>
                <Button
                  onClick={handleCreateProceso}
                  disabled={asignacionData.jabasAsignadas === 0 || !asignacionData.fechaInicio}
                  className="text-sm"
                >
                  <Split className="h-4 w-4 mr-2" />
                  Crear Proceso
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}

{/* Modal de Gestión de Pedidos */}
      {showPedidoModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="p-4 lg:p-6">
              <div className="flex items-center justify-between mb-4 lg:mb-6">
                <h2 className="text-lg lg:text-xl font-semibold">
                  {isCreatingPedido ? "Nuevo Pedido" : "Gestionar Pedido"}
                </h2>
                <Button variant="ghost" onClick={() => setShowPedidoModal(false)}>
                  ×
                </Button>
              </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Información del Pedido */}
                <div className="space-y-4">
                  <h3 className="font-medium">Información del Pedido</h3>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="codigoVenta">Código de Venta</Label>
                      <Input
                        id="codigoVenta"
                        value={pedidoFormData.codigoVenta}
                        onChange={(e) => setPedidoFormData((prev) => ({ ...prev, codigoVenta: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="cliente">Cliente</Label>
                      <Input
                        id="cliente"
                        value={pedidoFormData.cliente}
                        onChange={(e) => setPedidoFormData((prev) => ({ ...prev, cliente: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="fechaPedido">Fecha de Pedido</Label>
                      <Input
                        id="fechaPedido"
                        type="date"
                        value={pedidoFormData.fechaPedido}
                        onChange={(e) => setPedidoFormData((prev) => ({ ...prev, fechaPedido: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="fechaEntrega">Fecha de Entrega</Label>
                      <Input
                        id="fechaEntrega"
                        type="date"
                        value={pedidoFormData.fechaEntrega}
                        onChange={(e) => setPedidoFormData((prev) => ({ ...prev, fechaEntrega: e.target.value }))}
                        className="text-sm"
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="producto">Producto</Label>
                      <select
                        id="producto"
                        value={pedidoFormData.producto}
                        onChange={(e) =>
                          setPedidoFormData((prev) => ({
                            ...prev,
                            producto: e.target.value as "curcuma" | "kion" | "jengibre",
                            lotesAsignados: [], // Reset lotes when changing product
                          }))
                        }
                        className="w-full p-2 border rounded text-sm"
                      >
                        <option value="jengibre">Jengibre</option>
                        <option value="curcuma">Cúrcuma</option>
                        <option value="kion">Kion</option>
                      </select>
                    </div>
                    <div>
                      <Label htmlFor="cantidadRequerida">Cantidad Requerida (kg)</Label>
                      <Input
                        id="cantidadRequerida"
                        type="number"
                        value={pedidoFormData.cantidadRequerida}
                        onChange={(e) =>
                          setPedidoFormData((prev) => ({ ...prev, cantidadRequerida: Number(e.target.value) }))
                        }
                        className="text-sm"
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="calidad">Calidad</Label>
                      <select
                        id="calidad"
                        value={pedidoFormData.calidad}
                        onChange={(e) =>
                          setPedidoFormData((prev) => ({
                            ...prev,
                            calidad: e.target.value as "exportable" | "industrial" | "mixta",
                          }))
                        }
                        className="w-full p-2 border rounded text-sm"
                      >
                        <option value="exportable">Exportable</option>
                        <option value="industrial">Industrial</option>
                        <option value="mixta">Mixta</option>
                      </select>
                    </div>
                    <div>
                      <Label htmlFor="prioridad">Prioridad</Label>
                      <select
                        id="prioridad"
                        value={pedidoFormData.prioridad}
                        onChange={(e) =>
                          setPedidoFormData((prev) => ({
                            ...prev,
                            prioridad: e.target.value as "alta" | "media" | "baja",
                          }))
                        }
                        className="w-full p-2 border rounded text-sm"
                      >
                        <option value="alta">Alta</option>
                        <option value="media">Media</option>
                        <option value="baja">Baja</option>
                      </select>
                    </div>
                  </div>

<div>
                    <Label htmlFor="observacionesPedido">Observaciones</Label>
                    <Textarea
                      id="observacionesPedido"
                      value={pedidoFormData.observaciones}
                      onChange={(e) => setPedidoFormData((prev) => ({ ...prev, observaciones: e.target.value }))}
                      rows={3}
                      className="text-sm"
                    />
                  </div>
                </div>

{/* Gestión de Lotes */}
                <div className="space-y-4">
                  <h3 className="font-medium">Lotes Asignados</h3>

{/* Lotes ya asignados */}
                  <div className="space-y-2 max-h-40 overflow-y-auto">
                    {pedidoFormData.lotesAsignados.map((loteAsignado) => {
                      const lote = lotes.find((l) => l.id === loteAsignado.loteId)
                      if (!lote) return null

return (
                        <Card key={loteAsignado.loteId} className="p-3 bg-green-50 dark:bg-green-950/20">
                          <div className="flex items-center justify-between">
                            <div className="flex-1">
                              <div className="font-medium text-sm">{lote.codigo}</div>
                              <div className="text-xs text-muted-foreground">{lote.nombreProductor}</div>
                              <div className="text-xs">
                                <span>Jabas: {loteAsignado.jabasAsignadas}</span>
                                <span className="ml-2">Peso: {loteAsignado.pesoEstimado.toFixed(1)} kg</span>
                              </div>
                            </div>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => handleRemoverLoteDePedido(loteAsignado.loteId)}
                              className="text-red-500 hover:text-red-700"
                            >
                              <X className="h-4 w-4" />
                            </Button>
                          </div>
                        </Card>
                      )
                    })}
                  </div>

{/* Lotes disponibles para agregar */}
                  <div>
                    <h4 className="font-medium text-sm mb-2">Lotes Disponibles ({pedidoFormData.producto})</h4>
                    <div className="space-y-2 max-h-60 overflow-y-auto">
                      {lotes
                        .filter(
                          (lote) =>
                            lote.producto === pedidoFormData.producto &&
                            lote.jabasDisponibles > 0 &&
                            !pedidoFormData.lotesAsignados.some((la) => la.loteId === lote.id),
                        )
                        .map((lote) => (
                          <Card key={lote.id} className="p-3">
                            <div className="space-y-2">
                              <div className="flex items-center justify-between">
                                <div>
                                  <div className="font-medium text-sm">{lote.codigo}</div>
                                  <div className="text-xs text-muted-foreground">{lote.nombreProductor}</div>
                                </div>
                                <Badge className={getEstadoColor(lote.estado)}>{lote.estado}</Badge>
                              </div>

<div className="text-xs">
                                <span>
                                  Disponibles: {lote.jabasDisponibles}/{lote.numeroJabas} jabas
                                </span>
                                <span className="ml-2">Peso: {lote.pesoNeto.toFixed(1)} kg</span>
                              </div>

<div className="flex items-center gap-2">
                                <Input
                                  type="number"
                                  min="1"
                                  max={lote.jabasDisponibles}
                                  placeholder="Jabas"
                                  className="text-xs h-8 w-20"
                                  id={`jabas-${lote.id}`}
                                />
                                <Button
                                  size="sm"
                                  onClick={() => {
                                    const input = document.getElementById(`jabas-${lote.id}`) as HTMLInputElement
                                    const jabas = Number.parseInt(input.value) || 0
                                    if (jabas > 0 && jabas <= lote.jabasDisponibles) {
                                      handleAgregarLoteAPedido(lote.id, jabas)
                                      input.value = ""
                                    }
                                  }}
                                  className="gap-1 text-xs h-8"
                                >
                                  <Plus className="h-3 w-3" />
                                  Agregar
                                </Button>
                              </div>
                            </div>
                          </Card>
                        ))}
                    </div>
                  </div>

{/* Resumen */}
                  <Card className="p-3 bg-muted/50">
                    <h4 className="font-medium text-sm mb-2">Resumen</h4>
                    <div className="text-xs space-y-1">
                      <div>
                        Total jabas asignadas:{" "}
                        {pedidoFormData.lotesAsignados.reduce((sum, l) => sum + l.jabasAsignadas, 0)}
                      </div>
                      <div>
                        Peso total estimado:{" "}
                        {pedidoFormData.lotesAsignados.reduce((sum, l) => sum + l.pesoEstimado, 0).toFixed(1)} kg
                      </div>
                      <div>Cantidad requerida: {pedidoFormData.cantidadRequerida} kg</div>
                      <div
                        className={
                          pedidoFormData.lotesAsignados.reduce((sum, l) => sum + l.pesoEstimado, 0) >=
                          pedidoFormData.cantidadRequerida
                            ? "text-green-600 font-medium"
                            : "text-red-600 font-medium"
                        }
                      >
                        {pedidoFormData.lotesAsignados.reduce((sum, l) => sum + l.pesoEstimado, 0) >=
                        pedidoFormData.cantidadRequerida
                          ? "✅ Cantidad suficiente"
                          : "⚠️ Cantidad insuficiente"}
                      </div>
                    </div>
                  </Card>
                </div>
              </div>

<div className="flex flex-col sm:flex-row justify-end gap-3 mt-6 pt-6 border-t">
                <Button variant="outline" onClick={() => setShowPedidoModal(false)} className="text-sm">
                  Cancelar
                </Button>
                <Button
                  onClick={handleGuardarPedido}
                  disabled={
                    !pedidoFormData.cliente || !pedidoFormData.fechaEntrega || pedidoFormData.cantidadRequerida <= 0
                  }
                  className="text-sm"
                >
                  {isCreatingPedido ? "Crear Pedido" : "Guardar Cambios"}
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/procesos-service.ts" isQuickEdit="true" isMerged="true"
import type { Proceso } from "@/lib/types"

export class ProcesosService {
  async getAll(): Promise<Proceso[]> {
    // TODO: Implementar cuando esté disponible el endpoint en el backend
    console.warn("Endpoint de procesos aún no implementado en el backend")
    return []
  }

async getById(id: number): Promise<Proceso> {
    // TODO: Implementar cuando esté disponible el endpoint
    throw new Error("Endpoint not implemented")
  }

async create(data: Omit<Proceso, "id" | "created_at" | "updated_at">): Promise<Proceso> {
    // TODO: Implementar cuando esté disponible el endpoint
    throw new Error("Endpoint not implemented")
  }

async update(id: number, data: Partial<Omit<Proceso, "id" | "created_at" | "updated_at">>): Promise<Proceso> {
    // TODO: Implementar cuando esté disponible el endpoint
    throw new Error("Endpoint not implemented")
  }

async delete(id: number): Promise<void> {
    // TODO: Implementar cuando esté disponible el endpoint
    throw new Error("Endpoint not implemented")
  }

async getProcesosActivos(): Promise<Proceso[]> {
    const procesos = await this.getAll()
    return procesos.filter((p) => p.estado !== "completado" && p.estado !== "cancelado")
  }

async getProcesosByLote(loteId: number): Promise<Proceso[]> {
    const procesos = await this.getAll()
    return procesos.filter((p) => p.lote_id === loteId)
  }

async generarCodigoProceso(): Promise<string> {
    const timestamp = Date.now().toString().slice(-6)
    return `PROC-${timestamp}`
  }
}

export const procesosService = new ProcesosService()
[V0_FILE]typescript:file="lib/hooks/use-lotes.ts" isMerged="true"
import { useApi } from "./use-api"
import { lotesService } from "@/lib/services/lotes-service"

export function useLotes() {
  const { data: lotes, loading, error, create, update, remove, refresh } = useApi(lotesService)

const getLotesDisponibles = async () => {
    return await lotesService.getLotesDisponibles()
  }

const getLotesByProductor = async (productorId: number) => {
    return await lotesService.getLotesByProductor(productorId)
  }

const getLotesByEstado = async (estado: string) => {
    return await lotesService.getLotesByEstado(estado)
  }

const generarCodigoLote = async () => {
    return await lotesService.generarCodigoLote()
  }

return {
    lotes,
    loading,
    error,
    create,
    update,
    remove,
    refresh,
    getLotesDisponibles,
    getLotesByProductor,
    getLotesByEstado,
    generarCodigoLote,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-pedidos.ts" isQuickEdit="true" isMerged="true"
import { useApi } from "./use-api"
import { pedidosService } from "@/lib/services/pedidos-service"

export function usePedidos() {
  const { data: pedidos, loading, error, create, update, remove, refresh } = useApi(pedidosService)

const getPedidosActivos = async () => {
    return await pedidosService.getPedidosActivos()
  }

const getPedidosByEstado = async (estado: string) => {
    return await pedidosService.getPedidosByEstado(estado)
  }

const generarCodigoPedido = async () => {
    return await pedidosService.generarCodigoPedido()
  }

return {
    pedidos,
    loading,
    error,
    create,
    update,
    remove,
    refresh,
    getPedidosActivos,
    getPedidosByEstado,
    generarCodigoPedido,
  }
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "erp-sistema",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "setup-appwrite": "chmod +x scripts/setup-appwrite.sh && ./scripts/setup-appwrite.sh"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "^18",
    "react-dom": "^18",
    "appwrite": "^13.0.0",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.294.0",
    "next-themes": "^0.2.1",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "@radix-ui/react-progress": "1.1.7",
    "recharts": "3.2.1",
    "date-fns": "4.1.0",
    "@radix-ui/react-collapsible": "1.1.12"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.0"
  }
}
[V0_FILE]typescript:file="components/trazabilidad-timeline.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { lotesService } from "@/lib/services/lotes-service"
import { procesosService } from "@/lib/services/procesos-service"
import { useApi } from "@/lib/hooks/use-api"
import type { Lote, Particion } from "@/lib/types"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import { Loader2, AlertCircle } from "lucide-react"

export function TrazabilidadTimeline() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("activos")
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [selectedParticion, setSelectedParticion] = useState<Particion | null>(null)
  const [isProcesoDialogOpen, setIsProcesoDialogOpen] = useState(false)
  const [isDetalleDialogOpen, setIsDetalleDialogOpen] = useState(false)
  const [procesoForm, setProcesoForm] = useState({
    tipo: "",
    descripcion: "",
    duracionHoras: 0,
    duracionMinutos: 0,
    jabasInicio: 0,
    jabasFinal: 0,
    pesoInicio: 0,
    pesoFinal: 0,
    costoManoObra: 0,
    costoInsumos: 0,
    costoOtros: 0,
  })

const {
    data: lotes,
    loading: loadingLotes,
    error: errorLotes,
    update: updateLote,
    refresh: refreshLotes,
  } = useApi(lotesService, { initialLoad: true })

const {
    data: procesos,
    loading: loadingProcesos,
    error: errorProcesos,
    create: createProceso,
    refresh: refreshProcesos,
  } = useApi(procesosService, { initialLoad: true })

// Filtrar lotes según la pestaña activa
  const [filteredLotes, setFilteredLotes] = useState<Lote[]>([])

useEffect(() => {
    if (lotes.length > 0) {
      let filtered = [...lotes]

// Filtrar por estado
      if (activeTab === "activos") {
        filtered = filtered.filter(
          (lote) =>
            lote.estado === "disponible" ||
            lote.estado === "parcial" ||
            lote.particiones?.some((p) => p.estado === "en_proceso"),
        )
      } else if (activeTab === "completados") {
        filtered = filtered.filter(
          (lote) =>
            lote.estado === "agotado" ||
            lote.estado === "liquidado" ||
            lote.particiones?.every((p) => p.estado === "completado"),
        )
      }

setFilteredLotes(filtered)
    } else {
      setFilteredLotes([])
    }
  }, [lotes, activeTab])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setProcesoForm((prev) => ({
      ...prev,
      [name]: [
        "duracionHoras",
        "duracionMinutos",
        "jabasInicio",
        "jabasFinal",
        "pesoInicio",
        "pesoFinal",
        "costoManoObra",
        "costoInsumos",
        "costoOtros",
      ].includes(name)
        ? Number.parseFloat(value) || 0
        : value,
    }))
  }

const handleSelectChange = (name: string, value: string) => {
    setProcesoForm((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectLote = (lote: Lote) => {
    setSelectedLote(lote)
    setSelectedParticion(null)
  }

const handleSelectParticion = (particion: Particion) => {
    setSelectedParticion(particion)
  }

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

if (!selectedLote || !selectedParticion) {
      toast({
        title: "Error",
        description: "Debe seleccionar un lote y una partición",
        variant: "destructive",
      })
      return
    }

if (!procesoForm.tipo) {
      toast({
        title: "Error",
        description: "Debe seleccionar un tipo de proceso",
        variant: "destructive",
      })
      return
    }

if (procesoForm.jabasFinal > procesoForm.jabasInicio) {
      toast({
        title: "Error",
        description: "El número de jabas final no puede ser mayor al inicial",
        variant: "destructive",
      })
      return
    }

try {
      const duracionTotal = procesoForm.duracionHoras * 60 + procesoForm.duracionMinutos
      const costoTotal = procesoForm.costoManoObra + procesoForm.costoInsumos + procesoForm.costoOtros

// TODO: Crear el proceso cuando el endpoint esté disponible
      console.warn("Creación de procesos pendiente de implementación en el backend")

toast({
        title: "Proceso registrado",
        description: `El proceso ha sido registrado exitosamente`,
      })

setIsProcesoDialogOpen(false)
      setProcesoForm({
        tipo: "",
        descripcion: "",
        duracionHoras: 0,
        duracionMinutos: 0,
        jabasInicio: 0,
        jabasFinal: 0,
        pesoInicio: 0,
        pesoFinal: 0,
        costoManoObra: 0,
        costoInsumos: 0,
        costoOtros: 0,
      })

refreshLotes()
      refreshProcesos()
    } catch (error) {
      console.error("Error al registrar proceso:", error)
      toast({
        title: "Error",
        description: "No se pudo registrar el proceso. Intente nuevamente.",
        variant: "destructive",
      })
    }
  }

const handleCrearParticion = async () => {
    if (!selectedLote) return

try {
      if (selectedLote.peso_neto <= 0) {
        toast({
          title: "Error",
          description: "No hay peso disponible para crear una partición",
          variant: "destructive",
        })
        return
      }

// TODO: Crear nueva partición cuando el backend esté disponible
      console.warn("Creación de particiones pendiente de implementación en el backend")

toast({
        title: "Partición creada",
        description: `La partición ha sido creada exitosamente`,
      })

refreshLotes()
    } catch (error) {
      console.error("Error al crear partición:", error)
      toast({
        title: "Error",
        description: "No se pudo crear la partición. Intente nuevamente.",
        variant: "destructive",
      })
    }
  }

const formatDate = (dateString: string) => {
    try {
      return format(new Date(dateString), "dd/MM/yyyy HH:mm", { locale: es })
    } catch (error) {
      return dateString
    }
  }

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "en_proceso":
        return <Badge className="bg-yellow-500">En Proceso</Badge>
      case "completado":
        return <Badge className="bg-green-500">Completado</Badge>
      default:
        return <Badge className="bg-gray-500">{estado}</Badge>
    }
  }

const getTipoProcesoBadge = (tipo: string) => {
    switch (tipo) {
      case "recepcion":
        return <Badge className="bg-blue-500">Recepción</Badge>
      case "seleccion":
        return <Badge className="bg-purple-500">Selección</Badge>
      case "lavado":
        return <Badge className="bg-cyan-500">Lavado</Badge>
      case "secado":
        return <Badge className="bg-orange-500">Secado</Badge>
      case "empaque":
        return <Badge className="bg-green-500">Empaque</Badge>
      case "almacenamiento":
        return <Badge className="bg-gray-500">Almacenamiento</Badge>
      default:
        return <Badge className="bg-gray-500">{tipo}</Badge>
    }
  }

const calcularProgreso = (particion: Particion) => {
    if (!particion.procesos || particion.procesos.length === 0) return 0

// Calcular progreso basado en la cantidad de procesos completados
    // Asumimos que un lote completo pasa por 5 procesos: recepción, selección, lavado, secado y empaque
    const procesosCompletados = new Set(particion.procesos.map((p) => p.tipo)).size
    return Math.min((procesosCompletados / 5) * 100, 100)
  }

const calcularCostoTotal = (particion: Particion) => {
    if (!particion.procesos || particion.procesos.length === 0) return 0

return particion.procesos.reduce((total, proceso) => total + (proceso.costoTotal || 0), 0)
  }

if (loadingLotes && lotes.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2 text-lg">Cargando datos de trazabilidad...</span>
      </div>
    )
  }

if (errorLotes) {
    return (
      <div className="flex flex-col items-center justify-center h-64">
        <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
        <h3 className="text-xl font-semibold mb-2">Error al cargar los datos</h3>
        <p className="text-gray-600 mb-4">{errorLotes}</p>
        <Button onClick={refreshLotes}>Reintentar</Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Trazabilidad</h2>
          <p className="text-muted-foreground">Seguimiento de lotes y procesos</p>
        </div>
      </div>

<div className="text-center py-12 text-muted-foreground">
        <p>Sistema de trazabilidad en desarrollo</p>
        <p className="text-sm">Los endpoints del backend están siendo implementados</p>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/enhanced-kanban-board.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { lotesService } from "@/lib/services/lotes-service"
import { useApi } from "@/lib/hooks/use-api"
import { usePersonas } from "@/lib/hooks/use-personas"
import type { Lote } from "@/lib/types"
import { Package, Clock, Weight, DollarSign } from "lucide-react"

interface ProcesoEnCurso {
  id: string
  codigo: string
  loteId: string
  codigoLote: string
  producto: string
  variedad: string
  etapa: string
  jabasActuales: number
  pesoEstimado: number
  responsable: string
  fechaInicio: string
  estado: "pendiente" | "en-proceso" | "completado" | "pausado"
  subprocesos: any[]
  costoTotal: number
}

const ETAPAS = [
  { id: "pendiente", nombre: "Lotes Disponibles", color: "bg-gray-100" },
  { id: "asignado", nombre: "Procesos Asignados", color: "bg-blue-100" },
  { id: "en-proceso", nombre: "En Proceso", color: "bg-yellow-100" },
  { id: "completado", nombre: "Completados", color: "bg-green-100" },
]

const SUBPROCESOS_DISPONIBLES = [
  "Lavado",
  "Perfilado",
  "Selección",
  "Empaquetado",
  "Control de Calidad",
  "Almacenamiento",
]

export function EnhancedKanbanBoard() {
  const { toast } = useToast()
  const [procesosEnCurso, setProcesosEnCurso] = useState<ProcesoEnCurso[]>([])
  const [isAsignarPersonalOpen, setIsAsignarPersonalOpen] = useState(false)
  const [isIniciarProcesoOpen, setIsIniciarProcesoOpen] = useState(false)
  const [isDescontarJabasOpen, setIsDescontarJabasOpen] = useState(false)
  const [selectedProceso, setSelectedProceso] = useState<ProcesoEnCurso | null>(null)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [personalSeleccionado, setPersonalSeleccionado] = useState<string[]>([])
  const [procesoForm, setProcesoForm] = useState({
    responsable: "",
    subprocesos: [] as string[],
    observaciones: "",
  })
  const [descontoForm, setDescontoForm] = useState({
    cantidadJabas: 0,
    destino: "almacen" as "almacen" | "sobrantes",
    categoria: "exportable" as "exportable" | "industrial" | "jugo" | "descarte",
    motivo: "",
  })

// Cargar datos
  const { data: lotes, refresh: refreshLotes } = useApi(lotesService, { initialLoad: true })
  const { data: personal } = usePersonas(true)

// Filtrar personal disponible (jornaleros)
  const personalDisponible = personal.filter((p) => p.roles?.includes("jornalero") || p.roles?.includes("operario"))

// Generar procesos desde lotes disponibles
  useEffect(() => {
    const generarProcesosDesdeProduccion = () => {
      const procesosGenerados: ProcesoEnCurso[] = []

lotes.forEach((lote) => {
        if (lote.estado === "disponible") {
          // Lotes disponibles para convertir en procesos
          procesosGenerados.push({
            id: `lote-${lote.$id}`,
            codigo: `${lote.codigo}`,
            loteId: lote.$id,
            codigoLote: lote.codigo,
            producto: lote.producto,
            variedad: lote.variedad || "",
            etapa: "pendiente",
            jabasActuales: lote.jabasDisponibles,
            pesoEstimado: lote.jabasDisponibles * lote.pesoPromedioPorJaba,
            responsable: "",
            fechaInicio: lote.fechaRecepcion,
            estado: "pendiente",
            subprocesos: [],
            costoTotal: 0,
          })
        } else if (lote.estado === "en-proceso") {
          // Lotes que ya son procesos
          procesosGenerados.push({
            id: `proceso-${lote.$id}`,
            codigo: `${lote.codigo}-P01`, // Código de proceso
            loteId: lote.$id,
            codigoLote: lote.codigo,
            producto: lote.producto,
            variedad: lote.variedad || "",
            etapa: "en-proceso",
            jabasActuales: lote.jabasDisponibles,
            pesoEstimado: lote.jabasDisponibles * lote.pesoPromedioPorJaba,
            responsable: lote.responsableRecepcion || "",
            fechaInicio: lote.fechaRecepcion,
            estado: "en-proceso",
            subprocesos: [], // Se cargarían desde la base de datos
            costoTotal: 0,
          })
        }
      })

setProcesosEnCurso(procesosGenerados)
    }

if (lotes.length > 0) {
      generarProcesosDesdeProduccion()
    }
  }, [lotes])

const handleIniciarProceso = (lote: Lote) => {
    setSelectedLote(lote)
    setProcesoForm({
      responsable: "",
      subprocesos: [],
      observaciones: "",
    })
    setIsIniciarProcesoOpen(true)
  }

const handleAsignarPersonal = (proceso: ProcesoEnCurso) => {
    setSelectedProceso(proceso)
    setPersonalSeleccionado([])
    setIsAsignarPersonalOpen(true)
  }

const handleDescontarJabas = (proceso: ProcesoEnCurso) => {
    setSelectedProceso(proceso)
    setDescontoForm({
      cantidadJabas: 0,
      destino: "almacen",
      categoria: "exportable",
      motivo: "",
    })
    setIsDescontarJabasOpen(true)
  }

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

if (!selectedLote) return

try {
      // Convertir lote en proceso
      const codigoProceso = `${selectedLote.codigo}-P01`

// Actualizar el lote a estado "en-proceso"
      await lotesService.update(selectedLote.$id, {
        estado: "en-proceso",
      })

toast({
        title: "Proceso iniciado",
        description: `El lote ${selectedLote.codigo} se ha convertido en proceso ${codigoProceso}`,
      })

setIsIniciarProcesoOpen(false)
      refreshLotes()
    } catch (error) {
      console.error("Error al iniciar proceso:", error)
      toast({
        title: "Error",
        description: "No se pudo iniciar el proceso",
        variant: "destructive",
      })
    }
  }

const handleSubmitDescontarJabas = async () => {
    if (!selectedProceso) return

try {
      const lote = lotes.find((l) => l.$id === selectedProceso.loteId)
      if (!lote) return

const nuevasJabas = lote.jabasDisponibles - descontoForm.cantidadJabas

await lotesService.update(lote.$id, {
        jabasDisponibles: nuevasJabas,
        estado: nuevasJabas === 0 ? "completado" : lote.estado,
      })

toast({
        title: "Jabas descontadas",
        description: `Se han descontado ${descontoForm.cantidadJabas} jabas del proceso ${selectedProceso.codigo}`,
      })

setIsDescontarJabasOpen(false)
      refreshLotes()
    } catch (error) {
      console.error("Error al descontar jabas:", error)
      toast({
        title: "Error",
        description: "No se pudieron descontar las jabas",
        variant: "destructive",
      })
    }
  }

const avanzarSubproceso = async (proceso: ProcesoEnCurso, subprocesoIndex: number) => {
    // Lógica para avanzar subproceso (Pendiente → En Curso → Completado)
    toast({
      title: "Subproceso avanzado",
      description: `Subproceso actualizado para ${proceso.codigo}`,
    })
  }

return (
    <div className="space-y-6">
      {/* Estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Package className="h-5 w-5 text-blue-500" />
              <div>
                <p className="text-sm text-muted-foreground">Lotes Disponibles</p>
                <p className="text-2xl font-bold">{lotes.filter((l) => l.estado === "pendiente").length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Clock className="h-5 w-5 text-yellow-500" />
              <div>
                <p className="text-sm text-muted-foreground">Procesos Activos</p>
                <p className="text-2xl font-bold">{lotes.filter((l) => l.estado === "proceso").length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Weight className="h-5 w-5 text-purple-500" />
              <div>
                <p className="text-sm text-muted-foreground">Total Peso</p>
                <p className="text-2xl font-bold">
                  {lotes
                    .filter((l) => l.estado === "proceso")
                    .reduce((total, l) => total + l.peso_neto, 0)
                    .toFixed(0)}{" "}
                  kg
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <DollarSign className="h-5 w-5 text-green-500" />
              <div>
                <p className="text-sm text-muted-foreground">Personal Activo</p>
                <p className="text-2xl font-bold">{personal.filter((p) => p.activo).length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="text-center py-12 text-muted-foreground">
        <p>Tablero Kanban en desarrollo</p>
        <p className="text-sm">Los endpoints del backend están siendo implementados</p>
      </div>

{/* Board Kanban */}
      {/* Tablero Kanban en desarrollo */}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/adelantos/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function AdelantosLoading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center gap-3">
        <Skeleton className="h-8 w-8" />
        <Skeleton className="h-8 w-48" />
      </div>

<Card>
        <CardHeader>
          <Skeleton className="h-6 w-64" />
          <Skeleton className="h-4 w-96" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              {Array.from({ length: 4 }).map((_, i) => (
                <Card key={i}>
                  <CardContent className="p-4">
                    <Skeleton className="h-16 w-full" />
                  </CardContent>
                </Card>
              ))}
            </div>

<div className="space-y-2">
              <Skeleton className="h-10 w-full" />
              <Skeleton className="h-64 w-full" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/proveedores/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/images/liquidacion-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Imagen%20de%20WhatsApp%202025-05-19%20a%20las%2023.12.20_1aeeaadd.jpg-wr8Q34wY57VKUz0uw43sbu3hmXpwfQ.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/almacen/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function AlmacenLoading() {
  return (
    <div className="space-y-6">
      {/* Header Skeleton */}
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-3">
          <Skeleton className="h-8 w-8" />
          <div>
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-4 w-64 mt-2" />
          </div>
        </div>
      </div>

{/* Stats Skeleton */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <Skeleton className="h-5 w-5" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-6 w-12" />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Content Skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-4 w-32" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-16 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true"
import { Leaf } from "lucide-react"

/**
 * Centralised icon registry.
 * Extend this object with any custom / frequently-used icons in the app.
 */
export const Icons = {
  logo: Leaf,
}
[V0_FILE]typescript:file="lib/hooks/use-print.ts" isMerged="true"
/**
 * Lightweight replacement for `react-to-print`.
 *
 * Returns a callback that opens a new window, copies the given element’s
 * styles + HTML and fires the browser print dialog.
 */
export function usePrint(options: {
  /** A function that returns the element you want to print (e.g. ref.current) */
  content: () => HTMLElement | null
  /** Title shown in the print-preview tab */
  documentTitle?: string
}) {
  return () => {
    const node = options.content()
    if (!node) return

const printWindow = window.open("", "", "width=800,height=600")
    if (!printWindow) return

/* copy page styles */
    const styleSheets = Array.from(document.querySelectorAll('style,link[rel="stylesheet"]'))
      .map((el) => el.outerHTML)
      .join("\n")

printWindow.document.write(`
      <html>
        <head>
          <title>${options.documentTitle ?? "print"}</title>
          ${styleSheets}
        </head>
        <body>${node.outerHTML}</body>
      </html>
    `)

printWindow.document.close()
    printWindow.focus()

// give the new doc a moment to render before printing
    setTimeout(() => {
      printWindow.print()
      printWindow.close()
    }, 300)
  }
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 142 76% 36%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 210 40% 98%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 98%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 98%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 142 76% 36%;
    --radius: 0.75rem;
    --chart-1: 142 76% 36%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 142 76% 36%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 142 76% 36%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

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

@layer components {
  .sayariq-card {
    @apply bg-white border border-gray-100 rounded-xl shadow-sm hover:shadow-md transition-all duration-200;
  }

.sayariq-button {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2 font-medium transition-colors duration-200;
  }

.sayariq-input {
    @apply border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors duration-200;
  }

.sayariq-sidebar {
    @apply bg-white border-r border-gray-100 shadow-sm;
  }

.sayariq-nav-item {
    @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary/5 rounded-lg transition-all duration-200 font-medium;
  }

.sayariq-nav-item.active {
    @apply text-primary bg-primary/10 border-r-2 border-primary;
  }

.sayariq-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

.sayariq-table {
    @apply w-full border-collapse;
  }

.sayariq-table th {
    @apply text-left font-semibold text-gray-900 py-3 px-4 border-b border-gray-100;
  }

.sayariq-table td {
    @apply py-3 px-4 border-b border-gray-50;
  }
}

/* Responsive utilities */
@media (max-width: 768px) {
  .mobile-hidden {
    @apply hidden;
  }

.mobile-full {
    @apply w-full;
  }

.mobile-stack {
    @apply flex-col space-y-2;
  }
}
[V0_FILE]typescript:file="lib/services/liquidaciones-service.ts" isMerged="true"
import { adelantosService } from "./adelantos-service"

export interface DetalleLiquidacion {
  concepto: string
  monto: number
  tipo: "adelanto" | "descuento" | "bonificacion"
  referencia?: string
}

export interface NuevaLiquidacion {
  lote_id: number
  lote_codigo: string
  productor_id: number
  productor_nombre: string
  valor_bruto: number
  otros_descuentos?: number
  observaciones?: string
}

export interface Liquidacion {
  id: number
  numero_liquidacion: string
  lote_id: number
  lote_codigo: string
  productor_id: number
  productor_nombre: string
  fecha_liquidacion: string
  modalidad: string
  valor_bruto: number
  descuentos_adelantos: number
  otros_descuentos: number
  valor_neto: number
  estado: string
  detalles_descuentos: DetalleLiquidacion[]
  created_at?: string
  updated_at?: string
}

export class LiquidacionesService {
  async obtenerLiquidaciones(): Promise<Liquidacion[]> {
    // TODO: Implementar cuando esté disponible el endpoint en el backend
    console.warn("Endpoint de liquidaciones aún no implementado en el backend")
    return []
  }

async obtenerLiquidacionesPorProductor(productorId: number): Promise<Liquidacion[]> {
    const liquidaciones = await this.obtenerLiquidaciones()
    return liquidaciones.filter((l) => l.productor_id === productorId)
  }

async crearLiquidacion(datos: NuevaLiquidacion): Promise<{
    liquidacion: Liquidacion | null
    preview: {
      valor_bruto: number
      descuentos_adelantos: number
      otros_descuentos: number
      valor_neto: number
      detalles_descuentos: DetalleLiquidacion[]
    }
  }> {
    try {
      // Calcular descuentos automáticos de adelantos
      const resultadoDescuentos = await adelantosService.procesarDescuentosAutomaticos(
        datos.productor_id,
        datos.lote_id,
        datos.lote_codigo,
        datos.valor_bruto,
      )

const descuentosAdelantos = resultadoDescuentos.monto_total_descontado
      const otrosDescuentos = datos.otros_descuentos || 0
      const valorNeto = datos.valor_bruto - descuentosAdelantos - otrosDescuentos

// Crear detalles de descuentos
      const detallesDescuentos: DetalleLiquidacion[] = []

// Agregar descuentos de adelantos
      resultadoDescuentos.descuentos_aplicados.forEach((descuento, index) => {
        detallesDescuentos.push({
          concepto: `Adelanto ${index + 1}`,
          monto: descuento.monto_descontado,
          tipo: "adelanto",
          referencia: descuento.lote_id.toString(),
        })
      })

// Agregar otros descuentos si existen
      if (otrosDescuentos > 0) {
        detallesDescuentos.push({
          concepto: "Otros descuentos",
          monto: otrosDescuentos,
          tipo: "descuento",
        })
      }

// TODO: Guardar en backend cuando esté disponible

return {
        liquidacion: null,
        preview: {
          valor_bruto: datos.valor_bruto,
          descuentos_adelantos: descuentosAdelantos,
          otros_descuentos: otrosDescuentos,
          valor_neto: valorNeto,
          detalles_descuentos: detallesDescuentos,
        },
      }
    } catch (error) {
      console.error("Error al crear liquidación:", error)
      return {
        liquidacion: null,
        preview: {
          valor_bruto: 0,
          descuentos_adelantos: 0,
          otros_descuentos: 0,
          valor_neto: 0,
          detalles_descuentos: [],
        },
      }
    }
  }

async generarNumeroLiquidacion(): Promise<string> {
    const año = new Date().getFullYear()
    const liquidaciones = await this.obtenerLiquidaciones()
    const numero = liquidaciones.length + 1
    return `LIQ-${año}-${numero.toString().padStart(4, "0")}`
  }
}

export const liquidacionesService = new LiquidacionesService()
[V0_FILE]typescriptreact:file="components/estado-cuenta-productor.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { ScrollArea } from "@/components/ui/scroll-area"
import { DollarSign, TrendingUp, TrendingDown, FileText, AlertCircle, Clock } from "lucide-react"
import { adelantosService, type Adelanto } from "@/lib/services/adelantos-service"
import { liquidacionesService, type Liquidacion } from "@/lib/services/liquidaciones-service"

interface EstadoCuentaProductor {
  productor_id: string
  productor_nombre: string
  saldo_adelantos: {
    total_adelantos: number
    total_descontado: number
    saldo_pendiente: number
    adelantos_activos: number
  }
  resumen_liquidaciones: {
    total_liquidaciones: number
    valor_total_neto: number
    liquidaciones_pendientes: number
    liquidaciones_pagadas: number
  }
  saldo_final: number // Positivo = empresa debe, Negativo = productor debe
  adelantos: Adelanto[]
  liquidaciones: Liquidacion[]
}

export function EstadoCuentaProductor() {
  const [productores] = useState([
    { id: "1", nombre: "Juan Pérez" },
    { id: "2", nombre: "María García" },
    { id: "3", nombre: "Carlos López" },
    { id: "4", nombre: "Ana Martínez" },
  ])

const [productorSeleccionado, setProductorSeleccionado] = useState<string>("")
  const [estadoCuenta, setEstadoCuenta] = useState<EstadoCuentaProductor | null>(null)
  const [cargando, setCargando] = useState(false)
  const [filtroFecha, setFiltroFecha] = useState("")
  const [busqueda, setBusqueda] = useState("")

const cargarEstadoCuenta = async (productorId: string) => {
    if (!productorId) return

setCargando(true)
    try {
      const productor = productores.find((p) => p.id === productorId)
      if (!productor) return

// Cargar datos en paralelo
      const [saldoAdelantos, resumenLiquidaciones, adelantos, liquidaciones] = await Promise.all([
        adelantosService.calcularSaldoProductor(productorId),
        liquidacionesService.obtenerResumenFinanciero(productorId),
        adelantosService.obtenerAdelantosPorProductor(productorId),
        liquidacionesService.obtenerLiquidacionesPorProductor(productorId),
      ])

// Calcular saldo final
      const saldoFinal = resumenLiquidaciones.valor_total_neto - saldoAdelantos.saldo_pendiente

setEstadoCuenta({
        productor_id: productorId,
        productor_nombre: productor.nombre,
        saldo_adelantos: saldoAdelantos,
        resumen_liquidaciones: resumenLiquidaciones,
        saldo_final: saldoFinal,
        adelantos,
        liquidaciones,
      })
    } catch (error) {
      console.error("Error al cargar estado de cuenta:", error)
    } finally {
      setCargando(false)
    }
  }

useEffect(() => {
    if (productorSeleccionado) {
      cargarEstadoCuenta(productorSeleccionado)
    }
  }, [productorSeleccionado])

const formatearMoneda = (monto: number) => {
    return new Intl.NumberFormat("es-PE", {
      style: "currency",
      currency: "PEN",
    }).format(monto)
  }

const formatearFecha = (fecha: string) => {
    return new Date(fecha).toLocaleDateString("es-PE", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

const getEstadoBadge = (estado: string) => {
    const variants = {
      pendiente: "destructive",
      "descontado-parcial": "secondary",
      "descontado-total": "default",
      borrador: "outline",
      confirmada: "secondary",
      pagada: "default",
    } as const

return (
      <Badge variant={variants[estado as keyof typeof variants] || "outline"}>
        {estado.replace("-", " ").toUpperCase()}
      </Badge>
    )
  }

if (!estadoCuenta) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Estado de Cuenta</h1>
            <p className="text-gray-600">Balance financiero por productor</p>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Seleccionar Productor</CardTitle>
            <CardDescription>Elige un productor para ver su estado de cuenta detallado</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <Label htmlFor="productor">Productor</Label>
                <Select value={productorSeleccionado} onValueChange={setProductorSeleccionado}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar productor..." />
                  </SelectTrigger>
                  <SelectContent>
                    {productores.map((productor) => (
                      <SelectItem key={productor.id} value={productor.id}>
                        {productor.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Estado de Cuenta</h1>
          <p className="text-gray-600">{estadoCuenta.productor_nombre}</p>
        </div>
        <Button variant="outline" onClick={() => setProductorSeleccionado("")}>
          Cambiar Productor
        </Button>
      </div>

{/* Resumen General */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Adelantos Pendientes</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">
              {formatearMoneda(estadoCuenta.saldo_adelantos.saldo_pendiente)}
            </div>
            <p className="text-xs text-muted-foreground">
              {estadoCuenta.saldo_adelantos.adelantos_activos} adelantos activos
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Liquidado</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">
              {formatearMoneda(estadoCuenta.resumen_liquidaciones.valor_total_neto)}
            </div>
            <p className="text-xs text-muted-foreground">
              {estadoCuenta.resumen_liquidaciones.total_liquidaciones} liquidaciones
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saldo Final</CardTitle>
            {estadoCuenta.saldo_final >= 0 ? (
              <TrendingUp className="h-4 w-4 text-green-600" />
            ) : (
              <TrendingDown className="h-4 w-4 text-red-600" />
            )}
          </CardHeader>
          <CardContent>
            <div className={`text-2xl font-bold ${estadoCuenta.saldo_final >= 0 ? "text-green-600" : "text-red-600"}`}>
              {formatearMoneda(Math.abs(estadoCuenta.saldo_final))}
            </div>
            <p className="text-xs text-muted-foreground">
              {estadoCuenta.saldo_final >= 0 ? "Empresa debe" : "Productor debe"}
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pagos Pendientes</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">
              {estadoCuenta.resumen_liquidaciones.liquidaciones_pendientes}
            </div>
            <p className="text-xs text-muted-foreground">Liquidaciones por pagar</p>
          </CardContent>
        </Card>
      </div>

{/* Alerta de Saldo */}
      {estadoCuenta.saldo_final !== 0 && (
        <Alert className={estadoCuenta.saldo_final >= 0 ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"}>
          <AlertCircle className={`h-4 w-4 ${estadoCuenta.saldo_final >= 0 ? "text-green-600" : "text-red-600"}`} />
          <AlertDescription className={estadoCuenta.saldo_final >= 0 ? "text-green-800" : "text-red-800"}>
            {estadoCuenta.saldo_final >= 0
              ? `La empresa debe ${formatearMoneda(estadoCuenta.saldo_final)} a este productor.`
              : `Este productor debe ${formatearMoneda(Math.abs(estadoCuenta.saldo_final))} a la empresa.`}
          </AlertDescription>
        </Alert>
      )}

{/* Tabs de Detalles */}
      <Tabs defaultValue="adelantos" className="space-y-4">
        <TabsList>
          <TabsTrigger value="adelantos">Adelantos ({estadoCuenta.adelantos.length})</TabsTrigger>
          <TabsTrigger value="liquidaciones">Liquidaciones ({estadoCuenta.liquidaciones.length})</TabsTrigger>
          <TabsTrigger value="movimientos">Todos los Movimientos</TabsTrigger>
        </TabsList>

<TabsContent value="adelantos" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Historial de Adelantos</CardTitle>
              <CardDescription>Todos los adelantos otorgados y su estado actual</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[400px]">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Concepto</TableHead>
                      <TableHead>Monto Original</TableHead>
                      <TableHead>Descontado</TableHead>
                      <TableHead>Saldo</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {estadoCuenta.adelantos.map((adelanto) => (
                      <TableRow key={adelanto.$id}>
                        <TableCell>{formatearFecha(adelanto.fecha_adelanto)}</TableCell>
                        <TableCell>{adelanto.concepto}</TableCell>
                        <TableCell>{formatearMoneda(adelanto.monto_original)}</TableCell>
                        <TableCell>{formatearMoneda(adelanto.monto_descontado)}</TableCell>
                        <TableCell>{formatearMoneda(adelanto.saldo_pendiente)}</TableCell>
                        <TableCell>{getEstadoBadge(adelanto.estado)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="liquidaciones" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Historial de Liquidaciones</CardTitle>
              <CardDescription>Todas las liquidaciones procesadas</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[400px]">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Lote</TableHead>
                      <TableHead>Valor Bruto</TableHead>
                      <TableHead>Desc. Adelantos</TableHead>
                      <TableHead>Otros Desc.</TableHead>
                      <TableHead>Valor Neto</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {estadoCuenta.liquidaciones.map((liquidacion) => (
                      <TableRow key={liquidacion.$id}>
                        <TableCell>{formatearFecha(liquidacion.fecha_liquidacion)}</TableCell>
                        <TableCell>{liquidacion.lote_codigo}</TableCell>
                        <TableCell>{formatearMoneda(liquidacion.valor_bruto)}</TableCell>
                        <TableCell>{formatearMoneda(liquidacion.descuentos_adelantos)}</TableCell>
                        <TableCell>{formatearMoneda(liquidacion.otros_descuentos)}</TableCell>
                        <TableCell className="font-medium">{formatearMoneda(liquidacion.valor_neto)}</TableCell>
                        <TableCell>{getEstadoBadge(liquidacion.estado)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="movimientos" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Todos los Movimientos</CardTitle>
              <CardDescription>Cronología completa de adelantos y liquidaciones</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[400px]">
                <div className="space-y-4">
                  {/* Aquí se mostrarían todos los movimientos ordenados cronológicamente */}
                  <div className="text-center text-gray-500 py-8">
                    <FileText className="h-12 w-12 mx-auto mb-4 text-gray-300" />
                    <p>Vista de movimientos cronológicos en desarrollo</p>
                  </div>
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/estado-cuenta/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function EstadoCuentaLoading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-48" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>

{/* Tarjetas de resumen */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-4" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-20 mb-2" />
              <Skeleton className="h-3 w-16" />
            </CardContent>
          </Card>
        ))}
      </div>

{/* Alerta */}
      <Card>
        <CardContent className="pt-6">
          <Skeleton className="h-4 w-full" />
        </CardContent>
      </Card>

{/* Tabs */}
      <Card>
        <CardHeader>
          <div className="flex space-x-4">
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-12 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pedidos/loading.tsx" isRecovered="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function PedidosLoading() {
  return (
    <div className="p-3 lg:p-6 space-y-4 lg:space-y-6">
      <div className="flex flex-col sm:flex-row justify-between gap-3">
        <div className="space-y-2">
          <Skeleton className="h-6 lg:h-8 w-48" />
          <Skeleton className="h-4 w-64" />
        </div>
        <div className="flex gap-2">
          <Skeleton className="h-9 w-20" />
          <Skeleton className="h-9 w-28" />
        </div>
      </div>

<div className="flex flex-col sm:flex-row gap-3">
        <Skeleton className="h-9 w-full max-w-md" />
        <div className="flex gap-2">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-6 w-16" />
          ))}
        </div>
      </div>

<Skeleton className="h-64 w-full" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pedidos/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/components/ui/use-toast"
import {
  ShoppingCart,
  Plus,
  Filter,
  Search,
  Eye,
  Truck,
  CheckCircle,
  Clock,
  AlertCircle,
  Package,
  Calendar,
  User,
  DollarSign,
  X,
  Edit,
  Globe,
  MapPin,
  FileText,
  Settings,
  Download,
} from "lucide-react"
import { ClientSearchCombobox } from "@/components/client-search-combobox"
import { LotesAsignacionModal } from "@/components/lotes-asignacion-modal"

// ... existing interfaces ...
interface ProductoPedido {
  id: string
  nombre: string
  tipoProducto: "jengibre" | "curcuma"
  categoria: "exportable" | "industrial" | "nacional" | "organico"
  cantidad: number
  unidad: "kg" | "toneladas" | "jabas"
  precioUnitario: number
  subtotal: number
  especificaciones: {
    presentacion?: "cajas" | "mallas" | "lermas" | "jabas"
    cantidad?: number
    pesoBruto?: number
    pesoNeto?: number
    humedad?: number
    totalKilogramos?: number
    calibre?: string
    empaque?: string
    etiquetado?: string
    certificaciones?: string[]
  }
}

interface Pedido {
  id: string
  numero: string
  fechaCreacion: string
  fechaPedido: string
  fechaEntregaRequerida: string
  cliente: {
    nombre: string
    tipoCliente: "nacional" | "internacional"
    ruc?: string
    direccion: string
    ciudad: string
    pais: string
    contacto: {
      nombre: string
      cargo: string
      telefono: string
      email: string
    }
  }
  tipoMercado: "exportacion" | "nacional"
  incoterm?: "FOB" | "CIF" | "EXW" | "FCA" | "CPT" | "CIP"
  puertoDestino?: string
  moneda: "USD" | "PEN" | "EUR"
  productos: ProductoPedido[]
  subtotal: number
  igv: number
  total: number
  estado: "borrador" | "enviado" | "confirmado" | "en-preparacion" | "listo" | "enviado" | "entregado" | "cancelado"
  prioridad: "baja" | "media" | "alta" | "urgente"
  condicionesPago: string
  observaciones?: string
  especificacionesGenerales?: string
  documentosRequeridos?: string[]
  loteAsignado?: string
  lotesAsignados?: Array<{ codigo: string; numeroJabas: number; fechaAsignacion: string }>
  fechaAsignacion?: string
  responsableComercial: string
}

interface Lote {
  id: string
  codigo: string
  producto: string
  presentacion: string
  numeroJabas: number
  pesoTotal: number
  estado: string
  fechaIngreso: string
}

// ... existing estadoColors and estadoIcons ...
const estadoColors = {
  borrador: "bg-gray-100 text-gray-800 border-gray-300",
  enviado: "bg-blue-100 text-blue-800 border-blue-300",
  confirmado: "bg-green-100 text-green-800 border-green-300",
  "en-preparacion": "bg-purple-100 text-purple-800 border-purple-300",
  listo: "bg-emerald-100 text-emerald-800 border-emerald-300",
  entregado: "bg-teal-100 text-teal-800 border-teal-300",
  cancelado: "bg-red-100 text-red-800 border-red-300",
}

const estadoIcons = {
  borrador: FileText,
  enviado: Clock,
  confirmado: CheckCircle,
  "en-preparacion": Package,
  listo: CheckCircle,
  entregado: Truck,
  cancelado: AlertCircle,
}

const clientesRegistrados = [
  {
    id: "1",
    nombre: "Exportadora Lima SAC",
    tipoCliente: "nacional" as const,
    ruc: "20123456789",
    direccion: "Av. Argentina 1234",
    ciudad: "Callao",
    pais: "Perú",
    contacto: {
      nombre: "Carlos Mendoza",
      cargo: "Gerente de Compras",
      telefono: "987654321",
      email: "carlos@exportadoralima.com",
    },
  },
  {
    id: "2",
    nombre: "Distribuidora Norte EIRL",
    tipoCliente: "nacional" as const,
    ruc: "10987654321",
    direccion: "Jr. Huancayo 567",
    ciudad: "Trujillo",
    pais: "Perú",
    contacto: {
      nombre: "Ana García",
      cargo: "Jefe de Compras",
      telefono: "912345678",
      email: "ana@distribuidoranorte.com",
    },
  },
]

const lotesDisponibles: Lote[] = [
  {
    id: "1",
    codigo: "LOT-2024-018",
    producto: "Jengibre",
    presentacion: "Fresco",
    numeroJabas: 45,
    pesoTotal: 1125,
    estado: "disponible",
    fechaIngreso: "2024-12-10",
  },
  {
    id: "2",
    codigo: "LOT-2024-019",
    producto: "Cúrcuma",
    presentacion: "Fresco",
    numeroJabas: 30,
    pesoTotal: 750,
    estado: "disponible",
    fechaIngreso: "2024-12-15",
  },
]

export default function PedidosPage() {
  const { toast } = useToast()
  const [filtroEstado, setFiltroEstado] = useState("todos")
  const [filtroCliente, setFiltroCliente] = useState("todos")
  const [filtroTipoMercado, setFiltroTipoMercado] = useState("todos")
  const [busqueda, setBusqueda] = useState("")
  const [fechaDesde, setFechaDesde] = useState("")
  const [fechaHasta, setFechaHasta] = useState("")
  const [mostrarFiltros, setMostrarFiltros] = useState(false)
  const [pedidoSeleccionado, setPedidoSeleccionado] = useState<Pedido | null>(null)
  const [mostrarFormulario, setMostrarFormulario] = useState(false)
  const [editandoPedido, setEditandoPedido] = useState<Pedido | null>(null)
  const [mostrarAsignacionLotes, setMostrarAsignacionLotes] = useState(false)
  const [pedidoParaAsignar, setPedidoParaAsignar] = useState<Pedido | null>(null)
  const [clienteSeleccionado, setClienteSeleccionado] = useState<any>(null)

const [formularioPedido, setFormularioPedido] = useState<Partial<Pedido>>({
    cliente: {
      nombre: "",
      tipoCliente: "nacional",
      direccion: "",
      ciudad: "",
      pais: "Perú",
      contacto: {
        nombre: "",
        cargo: "",
        telefono: "",
        email: "",
      },
    },
    tipoMercado: "nacional",
    moneda: "PEN",
    productos: [],
    condicionesPago: "",
    responsableComercial: "",
    prioridad: "media",
    estado: "borrador",
    lotesAsignados: [],
  })

const [productoTemporal, setProductoTemporal] = useState<Partial<ProductoPedido>>({
    nombre: "",
    tipoProducto: "jengibre",
    categoria: "exportable",
    cantidad: 0,
    unidad: "kg",
    precioUnitario: 0,
    especificaciones: {
      presentacion: "cajas",
      cantidad: 0,
      pesoBruto: 0,
      pesoNeto: 0,
      humedad: 0,
      totalKilogramos: 0,
    },
  })

const [pedidos] = useState<Pedido[]>([
    {
      id: "1",
      numero: "PED-2024-001",
      fechaCreacion: "2024-12-20T08:00:00",
      fechaPedido: "2024-12-20T08:30:00",
      fechaEntregaRequerida: "2024-12-25T14:00:00",
      cliente: {
        nombre: "Exportadora Lima SAC",
        tipoCliente: "nacional",
        ruc: "20123456789",
        direccion: "Av. Argentina 1234",
        ciudad: "Callao",
        pais: "Perú",
        contacto: {
          nombre: "Carlos Mendoza",
          cargo: "Gerente de Compras",
          telefono: "987654321",
          email: "carlos@exportadoralima.com",
        },
      },
      tipoMercado: "exportacion",
      incoterm: "FOB",
      puertoDestino: "Puerto del Callao",
      moneda: "USD",
      productos: [
        {
          id: "p1",
          nombre: "Jengibre Fresco Premium",
          tipoProducto: "jengibre",
          categoria: "exportable",
          cantidad: 500,
          unidad: "kg",
          precioUnitario: 2.5,
          subtotal: 1250,
          especificaciones: {
            presentacion: "cajas",
            cantidad: 50,
            pesoBruto: 550,
            pesoNeto: 500,
            humedad: 85,
            totalKilogramos: 500,
            calibre: "80-150g",
            empaque: "Cajas de cartón 10kg",
            etiquetado: "Etiqueta exportación",
            certificaciones: ["Orgánico", "Global GAP"],
          },
        },
      ],
      subtotal: 1250,
      igv: 0,
      total: 1250,
      estado: "confirmado",
      prioridad: "alta",
      condicionesPago: "Carta de crédito 30 días",
      observaciones: "Entrega en horario de oficina. Coordinar con almacén.",
      especificacionesGenerales: "Producto para mercado europeo, cumplir estándares EU",
      documentosRequeridos: ["Certificado fitosanitario", "Certificado de origen", "Factura comercial"],
      lotesAsignados: [{ codigo: "LOT-2024-018", numeroJabas: 45, fechaAsignacion: "2024-12-20" }],
      responsableComercial: "Ana García",
    },
    {
      id: "2",
      numero: "PED-2024-002",
      fechaCreacion: "2024-12-21T09:00:00",
      fechaPedido: "2024-12-21T10:15:00",
      fechaEntregaRequerida: "2024-12-28T09:00:00",
      cliente: {
        nombre: "Distribuidora Norte EIRL",
        tipoCliente: "nacional",
        ruc: "10987654321",
        direccion: "Jr. Huancayo 567",
        ciudad: "Trujillo",
        pais: "Perú",
        contacto: {
          nombre: "Ana García",
          cargo: "Jefe de Compras",
          telefono: "912345678",
          email: "ana@distribuidoranorte.com",
        },
      },
      tipoMercado: "nacional",
      moneda: "PEN",
      productos: [
        {
          id: "p2",
          nombre: "Jengibre Nacional Seleccionado",
          tipoProducto: "jengibre",
          categoria: "nacional",
          cantidad: 100,
          unidad: "kg",
          precioUnitario: 8.0,
          subtotal: 800,
          especificaciones: {
            presentacion: "jabas",
            cantidad: 10,
            pesoBruto: 110,
            pesoNeto: 100,
            humedad: 88,
            totalKilogramos: 100,
            empaque: "Sacos de 25kg",
            etiquetado: "Etiqueta nacional",
          },
        },
      ],
      subtotal: 800,
      igv: 144,
      total: 944,
      estado: "en-preparacion",
      prioridad: "media",
      condicionesPago: "30 días",
      lotesAsignados: [],
      responsableComercial: "Luis Torres",
    },
  ])

const clientesUnicos = [...new Set(pedidos.map((pedido) => pedido.cliente.nombre))].sort()

const pedidosFiltrados = pedidos.filter((pedido) => {
    const matchEstado = filtroEstado === "todos" || pedido.estado === filtroEstado
    const matchCliente = filtroCliente === "todos" || pedido.cliente.nombre === filtroCliente
    const matchTipoMercado = filtroTipoMercado === "todos" || pedido.tipoMercado === filtroTipoMercado
    const matchBusqueda =
      pedido.numero.toLowerCase().includes(busqueda.toLowerCase()) ||
      pedido.cliente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
      pedido.cliente.contacto.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
      pedido.productos.some((p) => p.nombre.toLowerCase().includes(busqueda.toLowerCase()))

let matchesFecha = true
    if (fechaDesde || fechaHasta) {
      const fechaPedido = new Date(pedido.fechaPedido)
      if (fechaDesde) {
        const desde = new Date(fechaDesde)
        matchesFecha = matchesFecha && fechaPedido >= desde
      }
      if (fechaHasta) {
        const hasta = new Date(fechaHasta)
        matchesFecha = matchesFecha && fechaPedido <= hasta
      }
    }

return matchEstado && matchCliente && matchTipoMercado && matchBusqueda && matchesFecha
  })

const estadisticas = {
    total: pedidos.length,
    borradores: pedidos.filter((p) => p.estado === "borrador").length,
    confirmados: pedidos.filter((p) => p.estado === "confirmado").length,
    enPreparacion: pedidos.filter((p) => p.estado === "en-preparacion").length,
    exportacion: pedidos.filter((p) => p.tipoMercado === "exportacion").length,
    valorTotal: pedidos.reduce((sum, p) => sum + p.total, 0),
  }

const formatDateTime = (dateString: string) => {
    return new Date(dateString).toLocaleString("es-PE", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

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

const handleEstadoChange = (pedidoId: string, nuevoEstado: string) => {
    toast({
      title: "Estado actualizado",
      description: `El pedido ha sido marcado como ${nuevoEstado}`,
    })
  }

const handleVerDetalle = (pedido: Pedido) => {
    setPedidoSeleccionado(pedido)
  }

const handleEditarPedido = (pedido: Pedido) => {
    setEditandoPedido(pedido)
    setFormularioPedido(pedido)
    setMostrarFormulario(true)
  }

const handleNuevoPedido = () => {
    setEditandoPedido(null)
    setClienteSeleccionado(null)
    setFormularioPedido({
      cliente: {
        nombre: "",
        tipoCliente: "nacional",
        direccion: "",
        ciudad: "",
        pais: "Perú",
        contacto: {
          nombre: "",
          cargo: "",
          telefono: "",
          email: "",
        },
      },
      tipoMercado: "nacional",
      moneda: "PEN",
      productos: [],
      condicionesPago: "",
      responsableComercial: "",
      prioridad: "media",
      estado: "borrador",
      lotesAsignados: [],
    })
    setMostrarFormulario(true)
  }

const agregarProducto = () => {
    if (!productoTemporal.nombre || !productoTemporal.cantidad || !productoTemporal.precioUnitario) {
      toast({
        title: "Error",
        description: "Complete todos los campos requeridos del producto",
        variant: "destructive",
      })
      return
    }

const nuevoProducto: ProductoPedido = {
      id: `p${Date.now()}`,
      nombre: productoTemporal.nombre!,
      tipoProducto: productoTemporal.tipoProducto!,
      categoria: productoTemporal.categoria!,
      cantidad: productoTemporal.cantidad!,
      unidad: productoTemporal.unidad!,
      precioUnitario: productoTemporal.precioUnitario!,
      subtotal: productoTemporal.cantidad! * productoTemporal.precioUnitario!,
      especificaciones: productoTemporal.especificaciones!,
    }

setFormularioPedido((prev) => ({
      ...prev,
      productos: [...(prev.productos || []), nuevoProducto],
    }))

setProductoTemporal({
      nombre: "",
      tipoProducto: "jengibre",
      categoria: "exportable",
      cantidad: 0,
      unidad: "kg",
      precioUnitario: 0,
      especificaciones: {
        presentacion: "cajas",
        cantidad: 0,
        pesoBruto: 0,
        pesoNeto: 0,
        humedad: 0,
        totalKilogramos: 0,
      },
    })
  }

const eliminarProducto = (productoId: string) => {
    setFormularioPedido((prev) => ({
      ...prev,
      productos: prev.productos?.filter((p) => p.id !== productoId) || [],
    }))
  }

const calcularTotales = () => {
    const subtotal = formularioPedido.productos?.reduce((sum, p) => sum + p.subtotal, 0) || 0
    const igv = formularioPedido.tipoMercado === "nacional" ? subtotal * 0.18 : 0
    const total = subtotal + igv

return { subtotal, igv, total }
  }

const guardarPedido = () => {
    const { subtotal, igv, total } = calcularTotales()

const pedidoCompleto: Pedido = {
      ...(formularioPedido as Pedido),
      id: editandoPedido?.id || `${Date.now()}`,
      numero:
        editandoPedido?.numero || `PED-${new Date().getFullYear()}-${String(pedidos.length + 1).padStart(3, "0")}`,
      fechaCreacion: editandoPedido?.fechaCreacion || new Date().toISOString(),
      fechaPedido: new Date().toISOString(),
      subtotal,
      igv,
      total,
    }

toast({
      title: editandoPedido ? "Pedido actualizado" : "Pedido creado",
      description: `El pedido ${pedidoCompleto.numero} ha sido ${editandoPedido ? "actualizado" : "creado"} exitosamente`,
    })

setMostrarFormulario(false)
    setEditandoPedido(null)
  }

const limpiarFiltros = () => {
    setBusqueda("")
    setFiltroEstado("todos")
    setFiltroCliente("todos")
    setFiltroTipoMercado("todos")
    setFechaDesde("")
    setFechaHasta("")
  }

const handleAsignarLotes = (pedido: Pedido) => {
    setPedidoParaAsignar(pedido)
    setMostrarAsignacionLotes(true)
  }

const handleConfirmarAsignacion = (lotesSeleccionados: Lote[]) => {
    if (pedidoParaAsignar) {
      const lotesAsignados = lotesSeleccionados.map((lote) => ({
        codigo: lote.codigo,
        numeroJabas: lote.numeroJabas,
        fechaAsignacion: new Date().toISOString().split("T")[0],
      }))

toast({
        title: "Lotes asignados",
        description: `Se asignaron ${lotesSeleccionados.length} lote(s) al pedido ${pedidoParaAsignar.numero}`,
      })

setMostrarAsignacionLotes(false)
      setPedidoParaAsignar(null)
    }
  }

return (
    <div className="p-3 lg:p-6 space-y-4 lg:space-y-6">
      {/* ... existing header and stats ... */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div>
          <h1 className="text-xl lg:text-2xl font-bold">Gestión de Pedidos</h1>
          <p className="text-sm text-muted-foreground">Control de órdenes comerciales y seguimiento de entregas</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="gap-2 text-sm bg-transparent">
            <Filter className="h-4 w-4" />
            Filtros
          </Button>
          <Button onClick={handleNuevoPedido} className="gap-2 text-sm">
            <Plus className="h-4 w-4" />
            Nuevo Pedido
          </Button>
        </div>
      </div>

{/* ... existing stats cards ... */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <ShoppingCart className="h-5 w-5 text-blue-500" />
            <div>
              <p className="text-sm text-muted-foreground">Total</p>
              <p className="text-2xl font-bold">{estadisticas.total}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <FileText className="h-5 w-5 text-gray-500" />
            <div>
              <p className="text-sm text-muted-foreground">Borradores</p>
              <p className="text-2xl font-bold">{estadisticas.borradores}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <CheckCircle className="h-5 w-5 text-green-500" />
            <div>
              <p className="text-sm text-muted-foreground">Confirmados</p>
              <p className="text-2xl font-bold">{estadisticas.confirmados}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Package className="h-5 w-5 text-purple-500" />
            <div>
              <p className="text-sm text-muted-foreground">En Preparación</p>
              <p className="text-2xl font-bold">{estadisticas.enPreparacion}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Globe className="h-5 w-5 text-indigo-500" />
            <div>
              <p className="text-sm text-muted-foreground">Exportación</p>
              <p className="text-2xl font-bold">{estadisticas.exportacion}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <DollarSign className="h-5 w-5 text-emerald-500" />
            <div>
              <p className="text-sm text-muted-foreground">Valor Total</p>
              <p className="text-lg font-bold">S/ {estadisticas.valorTotal.toLocaleString()}</p>
            </div>
          </div>
        </Card>
      </div>

{/* ... existing filters ... */}
      <Card className="p-4">
        <div className="space-y-4">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar pedidos..."
                className="pl-10 text-sm"
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Button variant="outline" onClick={() => setMostrarFiltros(!mostrarFiltros)} className="text-sm">
                <Filter className="h-4 w-4 mr-2" />
                Filtros Avanzados
              </Button>
              {(filtroEstado !== "todos" ||
                filtroCliente !== "todos" ||
                filtroTipoMercado !== "todos" ||
                fechaDesde ||
                fechaHasta) && (
                <Button variant="outline" onClick={limpiarFiltros} className="text-sm bg-transparent">
                  <X className="h-4 w-4 mr-2" />
                  Limpiar
                </Button>
              )}
            </div>
          </div>

{/* ... existing quick filters ... */}
          <div className="flex flex-wrap gap-2">
            <Badge
              variant={filtroEstado === "todos" ? "default" : "outline"}
              className="cursor-pointer text-xs"
              onClick={() => setFiltroEstado("todos")}
            >
              Todos
            </Badge>
            <Badge
              variant={filtroEstado === "borrador" ? "default" : "outline"}
              className="cursor-pointer text-xs"
              onClick={() => setFiltroEstado("borrador")}
            >
              Borradores
            </Badge>
            <Badge
              variant={filtroEstado === "confirmado" ? "default" : "outline"}
              className="cursor-pointer text-xs"
              onClick={() => setFiltroEstado("confirmado")}
            >
              Confirmados
            </Badge>
            <Badge
              variant={filtroEstado === "en-preparacion" ? "default" : "outline"}
              className="cursor-pointer text-xs"
              onClick={() => setFiltroEstado("en-preparacion")}
            >
              En Preparación
            </Badge>
            <Badge
              variant={filtroTipoMercado === "exportacion" ? "default" : "outline"}
              className="cursor-pointer text-xs"
              onClick={() => setFiltroTipoMercado(filtroTipoMercado === "exportacion" ? "todos" : "exportacion")}
            >
              <Globe className="h-3 w-3 mr-1" />
              Exportación
            </Badge>
          </div>

{/* ... existing advanced filters ... */}
          {mostrarFiltros && (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 p-4 bg-gray-50 rounded-lg">
              <div className="space-y-2">
                <Label className="text-sm font-medium">Estado</Label>
                <Select value={filtroEstado} onValueChange={setFiltroEstado}>
                  <SelectTrigger className="text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todos">Todos</SelectItem>
                    <SelectItem value="borrador">Borrador</SelectItem>
                    <SelectItem value="enviado">Enviado</SelectItem>
                    <SelectItem value="confirmado">Confirmado</SelectItem>
                    <SelectItem value="en-preparacion">En Preparación</SelectItem>
                    <SelectItem value="listo">Listo</SelectItem>
                    <SelectItem value="entregado">Entregado</SelectItem>
                    <SelectItem value="cancelado">Cancelado</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-sm font-medium">Cliente</Label>
                <Select value={filtroCliente} onValueChange={setFiltroCliente}>
                  <SelectTrigger className="text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todos">Todos</SelectItem>
                    {clientesUnicos.map((cliente) => (
                      <SelectItem key={cliente} value={cliente}>
                        {cliente}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-sm font-medium">Tipo de Mercado</Label>
                <Select value={filtroTipoMercado} onValueChange={setFiltroTipoMercado}>
                  <SelectTrigger className="text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todos">Todos</SelectItem>
                    <SelectItem value="nacional">Nacional</SelectItem>
                    <SelectItem value="exportacion">Exportación</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-sm font-medium">Fecha Desde</Label>
                <Input
                  type="date"
                  value={fechaDesde}
                  onChange={(e) => setFechaDesde(e.target.value)}
                  className="text-sm"
                />
              </div>

<div className="space-y-2">
                <Label className="text-sm font-medium">Fecha Hasta</Label>
                <Input
                  type="date"
                  value={fechaHasta}
                  onChange={(e) => setFechaHasta(e.target.value)}
                  className="text-sm"
                />
              </div>
            </div>
          )}
        </div>
      </Card>

<Card className="p-4 lg:p-6">
        <div className="mb-4">
          <h3 className="text-lg font-semibold">Listado de Pedidos</h3>
          <p className="text-sm text-muted-foreground">
            {pedidosFiltrados.length} {pedidosFiltrados.length === 1 ? "pedido encontrado" : "pedidos encontrados"}
            {pedidos.length !== pedidosFiltrados.length && ` de ${pedidos.length} total`}
          </p>
        </div>
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Pedido</TableHead>
                <TableHead>Cliente</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>Fecha Pedido</TableHead>
                <TableHead>Entrega Requerida</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Total</TableHead>
                <TableHead>Lotes Asignados</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pedidosFiltrados.map((pedido) => {
                const EstadoIcon = estadoIcons[pedido.estado]
                return (
                  <TableRow key={pedido.id}>
                    <TableCell className="font-medium">
                      <div>
                        <p>{pedido.numero}</p>
                        <p className="text-xs text-muted-foreground">
                          {pedido.productos.length} producto{pedido.productos.length !== 1 ? "s" : ""}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div>
                        <p className="font-medium">{pedido.cliente.nombre}</p>
                        <p className="text-xs text-muted-foreground flex items-center gap-1">
                          {pedido.cliente.tipoCliente === "internacional" ? (
                            <Globe className="h-3 w-3" />
                          ) : (
                            <MapPin className="h-3 w-3" />
                          )}
                          {pedido.cliente.ciudad}, {pedido.cliente.pais}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant={pedido.tipoMercado === "exportacion" ? "default" : "secondary"}
                        className="text-xs"
                      >
                        {pedido.tipoMercado === "exportacion" ? (
                          <>
                            <Globe className="h-3 w-3 mr-1" />
                            Exportación
                          </>
                        ) : (
                          <>
                            <MapPin className="h-3 w-3 mr-1" />
                            Nacional
                          </>
                        )}
                      </Badge>
                    </TableCell>
                    <TableCell>{formatDate(pedido.fechaPedido)}</TableCell>
                    <TableCell>{formatDate(pedido.fechaEntregaRequerida)}</TableCell>
                    <TableCell>
                      <Badge className={`${estadoColors[pedido.estado]} gap-1`}>
                        <EstadoIcon className="h-3 w-3" />
                        {pedido.estado.replace("-", " ")}
                      </Badge>
                    </TableCell>
                    <TableCell className="font-medium">
                      {pedido.moneda} {pedido.total.toLocaleString()}
                    </TableCell>
                    <TableCell>
                      <Button size="sm" variant="outline" onClick={() => handleAsignarLotes(pedido)} className="gap-1">
                        <Download className="h-4 w-4" />
                        {pedido.lotesAsignados?.length || 0}
                      </Button>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleVerDetalle(pedido)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleEditarPedido(pedido)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Select onValueChange={(value) => handleEstadoChange(pedido.id, value)}>
                          <SelectTrigger className="w-32">
                            <SelectValue placeholder="Estado" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="borrador">Borrador</SelectItem>
                            <SelectItem value="enviado">Enviado</SelectItem>
                            <SelectItem value="confirmado">Confirmado</SelectItem>
                            <SelectItem value="en-preparacion">En Preparación</SelectItem>
                            <SelectItem value="listo">Listo</SelectItem>
                            <SelectItem value="entregado">Entregado</SelectItem>
                            <SelectItem value="cancelado">Cancelado</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </div>

{pedidosFiltrados.length === 0 && (
          <div className="text-center py-12">
            <ShoppingCart className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-semibold mb-2">No se encontraron pedidos</h3>
            <p className="text-muted-foreground mb-4">
              {busqueda ||
              filtroEstado !== "todos" ||
              filtroCliente !== "todos" ||
              filtroTipoMercado !== "todos" ||
              fechaDesde ||
              fechaHasta
                ? "Intenta ajustar los filtros de búsqueda"
                : "Comienza creando tu primer pedido comercial"}
            </p>
            <Button onClick={handleNuevoPedido} className="gap-2">
              <Plus className="h-4 w-4" />
              Crear Primer Pedido
            </Button>
          </div>
        )}
      </Card>

{mostrarFormulario && (
        <Dialog open={mostrarFormulario} onOpenChange={setMostrarFormulario}>
          <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {editandoPedido ? `Editar Pedido ${editandoPedido.numero}` : "Nuevo Pedido Comercial"}
              </DialogTitle>
            </DialogHeader>

<Tabs defaultValue="cliente" className="w-full">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="cliente">Cliente</TabsTrigger>
                <TabsTrigger value="productos">Productos</TabsTrigger>
                <TabsTrigger value="comercial">Comercial</TabsTrigger>
                <TabsTrigger value="resumen">Resumen</TabsTrigger>
              </TabsList>

{/* Tab Cliente */}
              <TabsContent value="cliente" className="space-y-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-4">Búsqueda de Cliente Registrado</h3>
                  <ClientSearchCombobox
                    value={clienteSeleccionado}
                    onChange={(cliente) => {
                      setClienteSeleccionado(cliente)
                      setFormularioPedido((prev) => ({
                        ...prev,
                        cliente: cliente,
                      }))
                    }}
                    clientes={clientesRegistrados}
                  />
                </Card>

<Card className="p-4">
                  <h3 className="font-semibold mb-4">Información del Cliente</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Nombre del Cliente *</Label>
                      <Input
                        value={formularioPedido.cliente?.nombre || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, nombre: e.target.value },
                          }))
                        }
                        placeholder="Nombre de la empresa o cliente"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Tipo de Cliente</Label>
                      <Select
                        value={formularioPedido.cliente?.tipoCliente}
                        onValueChange={(value: "nacional" | "internacional") =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, tipoCliente: value },
                          }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="nacional">Nacional</SelectItem>
                          <SelectItem value="internacional">Internacional</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>RUC / Tax ID</Label>
                      <Input
                        value={formularioPedido.cliente?.ruc || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, ruc: e.target.value },
                          }))
                        }
                        placeholder="20123456789"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>País *</Label>
                      <Input
                        value={formularioPedido.cliente?.pais || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, pais: e.target.value },
                          }))
                        }
                        placeholder="Perú"
                      />
                    </div>
                    <div className="space-y-2 md:col-span-2">
                      <Label>Dirección *</Label>
                      <Input
                        value={formularioPedido.cliente?.direccion || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, direccion: e.target.value },
                          }))
                        }
                        placeholder="Dirección completa"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Ciudad *</Label>
                      <Input
                        value={formularioPedido.cliente?.ciudad || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: { ...prev.cliente!, ciudad: e.target.value },
                          }))
                        }
                        placeholder="Lima"
                      />
                    </div>
                  </div>
                </Card>

<Card className="p-4">
                  <h3 className="font-semibold mb-4">Contacto Principal</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Nombre del Contacto *</Label>
                      <Input
                        value={formularioPedido.cliente?.contacto?.nombre || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: {
                              ...prev.cliente!,
                              contacto: { ...prev.cliente!.contacto, nombre: e.target.value },
                            },
                          }))
                        }
                        placeholder="Juan Pérez"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Cargo</Label>
                      <Input
                        value={formularioPedido.cliente?.contacto?.cargo || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: {
                              ...prev.cliente!,
                              contacto: { ...prev.cliente!.contacto, cargo: e.target.value },
                            },
                          }))
                        }
                        placeholder="Gerente de Compras"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Teléfono *</Label>
                      <Input
                        value={formularioPedido.cliente?.contacto?.telefono || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: {
                              ...prev.cliente!,
                              contacto: { ...prev.cliente!.contacto, telefono: e.target.value },
                            },
                          }))
                        }
                        placeholder="+51 987654321"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Email *</Label>
                      <Input
                        type="email"
                        value={formularioPedido.cliente?.contacto?.email || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({
                            ...prev,
                            cliente: {
                              ...prev.cliente!,
                              contacto: { ...prev.cliente!.contacto, email: e.target.value },
                            },
                          }))
                        }
                        placeholder="contacto@empresa.com"
                      />
                    </div>
                  </div>
                </Card>
              </TabsContent>

{/* Tab Productos */}
              <TabsContent value="productos" className="space-y-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-4">Agregar Producto</h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="space-y-2">
                      <Label>Nombre del Producto *</Label>
                      <Input
                        value={productoTemporal.nombre || ""}
                        onChange={(e) => setProductoTemporal((prev) => ({ ...prev, nombre: e.target.value }))}
                        placeholder="Jengibre Fresco Premium"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Tipo de Producto</Label>
                      <Select
                        value={productoTemporal.tipoProducto}
                        onValueChange={(value: "jengibre" | "curcuma") =>
                          setProductoTemporal((prev) => ({ ...prev, tipoProducto: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="jengibre">Jengibre</SelectItem>
                          <SelectItem value="curcuma">Cúrcuma</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Categoría</Label>
                      <Select
                        value={productoTemporal.categoria}
                        onValueChange={(value: "exportable" | "industrial" | "nacional" | "organico") =>
                          setProductoTemporal((prev) => ({ ...prev, categoria: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="exportable">Exportable</SelectItem>
                          <SelectItem value="industrial">Industrial</SelectItem>
                          <SelectItem value="nacional">Nacional</SelectItem>
                          <SelectItem value="organico">Orgánico</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Cantidad *</Label>
                      <Input
                        type="number"
                        value={productoTemporal.cantidad || ""}
                        onChange={(e) => setProductoTemporal((prev) => ({ ...prev, cantidad: Number(e.target.value) }))}
                        placeholder="500"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Unidad</Label>
                      <Select
                        value={productoTemporal.unidad}
                        onValueChange={(value: "kg" | "toneladas" | "jabas") =>
                          setProductoTemporal((prev) => ({ ...prev, unidad: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="kg">Kilogramos</SelectItem>
                          <SelectItem value="toneladas">Toneladas</SelectItem>
                          <SelectItem value="jabas">Jabas</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Precio Unitario *</Label>
                      <Input
                        type="number"
                        step="0.01"
                        value={productoTemporal.precioUnitario || ""}
                        onChange={(e) =>
                          setProductoTemporal((prev) => ({ ...prev, precioUnitario: Number(e.target.value) }))
                        }
                        placeholder="2.50"
                      />
                    </div>
                  </div>

<div className="mt-4 space-y-4">
                    <h4 className="font-medium">Especificaciones del Producto</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label>Presentación</Label>
                        <Select
                          value={productoTemporal.especificaciones?.presentacion}
                          onValueChange={(value: "cajas" | "mallas" | "lermas" | "jabas") =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, presentacion: value },
                            }))
                          }
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="cajas">Cajas</SelectItem>
                            <SelectItem value="mallas">Mallas</SelectItem>
                            <SelectItem value="lermas">Lermas</SelectItem>
                            <SelectItem value="jabas">Jabas</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Cantidad</Label>
                        <Input
                          type="number"
                          value={productoTemporal.especificaciones?.cantidad || ""}
                          onChange={(e) =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, cantidad: Number(e.target.value) },
                            }))
                          }
                          placeholder="50"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Peso Bruto (kg)</Label>
                        <Input
                          type="number"
                          value={productoTemporal.especificaciones?.pesoBruto || ""}
                          onChange={(e) =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, pesoBruto: Number(e.target.value) },
                            }))
                          }
                          placeholder="550"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Peso Neto (kg)</Label>
                        <Input
                          type="number"
                          value={productoTemporal.especificaciones?.pesoNeto || ""}
                          onChange={(e) =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, pesoNeto: Number(e.target.value) },
                            }))
                          }
                          placeholder="500"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Humedad (%)</Label>
                        <Input
                          type="number"
                          value={productoTemporal.especificaciones?.humedad || ""}
                          onChange={(e) =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, humedad: Number(e.target.value) },
                            }))
                          }
                          placeholder="85"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Total Kilogramos</Label>
                        <Input
                          type="number"
                          value={productoTemporal.especificaciones?.totalKilogramos || ""}
                          onChange={(e) =>
                            setProductoTemporal((prev) => ({
                              ...prev,
                              especificaciones: { ...prev.especificaciones!, totalKilogramos: Number(e.target.value) },
                            }))
                          }
                          placeholder="500"
                        />
                      </div>
                    </div>
                    <div className="flex justify-end">
                      <Button onClick={agregarProducto} className="gap-2">
                        <Plus className="h-4 w-4" />
                        Agregar Producto
                      </Button>
                    </div>
                  </div>
                </Card>

{/* ... existing product list ... */}
                {formularioPedido.productos && formularioPedido.productos.length > 0 && (
                  <Card className="p-4">
                    <h3 className="font-semibold mb-4">Productos en el Pedido</h3>
                    <div className="space-y-3">
                      {formularioPedido.productos.map((producto) => (
                        <div key={producto.id} className="flex items-center justify-between p-3 border rounded-lg">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-1">
                              <h4 className="font-medium">{producto.nombre}</h4>
                              <Badge variant="outline" className="text-xs">
                                {producto.tipoProducto} - {producto.categoria}
                              </Badge>
                            </div>
                            <div className="text-sm text-muted-foreground">
                              <span>
                                {producto.cantidad} {producto.unidad}
                              </span>
                              <span className="mx-2">•</span>
                              <span>
                                {formularioPedido.moneda} {producto.precioUnitario}
                              </span>
                              <span className="mx-2">•</span>
                              <span className="font-medium">
                                {formularioPedido.moneda} {producto.subtotal.toFixed(2)}
                              </span>
                            </div>
                            {producto.especificaciones.presentacion && (
                              <div className="text-xs text-muted-foreground mt-1">
                                {producto.especificaciones.presentacion}
                                {producto.especificaciones.humedad &&
                                  ` • ${producto.especificaciones.humedad}% humedad`}
                              </div>
                            )}
                          </div>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => eliminarProducto(producto.id)}
                            className="text-red-500 hover:text-red-700"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </Card>
                )}
              </TabsContent>

{/* ... existing comercial and resumen tabs ... */}
              <TabsContent value="comercial" className="space-y-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-4">Información Comercial</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Tipo de Mercado *</Label>
                      <Select
                        value={formularioPedido.tipoMercado}
                        onValueChange={(value: "nacional" | "exportacion") =>
                          setFormularioPedido((prev) => ({ ...prev, tipoMercado: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="nacional">Nacional</SelectItem>
                          <SelectItem value="exportacion">Exportación</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Moneda *</Label>
                      <Select
                        value={formularioPedido.moneda}
                        onValueChange={(value: "USD" | "PEN" | "EUR") =>
                          setFormularioPedido((prev) => ({ ...prev, moneda: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="PEN">Soles (PEN)</SelectItem>
                          <SelectItem value="USD">Dólares (USD)</SelectItem>
                          <SelectItem value="EUR">Euros (EUR)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    {formularioPedido.tipoMercado === "exportacion" && (
                      <>
                        <div className="space-y-2">
                          <Label>Incoterm</Label>
                          <Select
                            value={formularioPedido.incoterm}
                            onValueChange={(value: "FOB" | "CIF" | "EXW" | "FCA" | "CPT" | "CIP") =>
                              setFormularioPedido((prev) => ({ ...prev, incoterm: value }))
                            }
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="FOB">FOB - Free On Board</SelectItem>
                              <SelectItem value="CIF">CIF - Cost, Insurance & Freight</SelectItem>
                              <SelectItem value="EXW">EXW - Ex Works</SelectItem>
                              <SelectItem value="FCA">FCA - Free Carrier</SelectItem>
                              <SelectItem value="CPT">CPT - Carriage Paid To</SelectItem>
                              <SelectItem value="CIP">CIP - Carriage & Insurance Paid</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label>Puerto de Destino</Label>
                          <Input
                            value={formularioPedido.puertoDestino || ""}
                            onChange={(e) =>
                              setFormularioPedido((prev) => ({ ...prev, puertoDestino: e.target.value }))
                            }
                            placeholder="Puerto del Callao"
                          />
                        </div>
                      </>
                    )}
                    <div className="space-y-2">
                      <Label>Prioridad</Label>
                      <Select
                        value={formularioPedido.prioridad}
                        onValueChange={(value: "baja" | "media" | "alta" | "urgente") =>
                          setFormularioPedido((prev) => ({ ...prev, prioridad: value }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="baja">Baja</SelectItem>
                          <SelectItem value="media">Media</SelectItem>
                          <SelectItem value="alta">Alta</SelectItem>
                          <SelectItem value="urgente">Urgente</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Responsable Comercial *</Label>
                      <Input
                        value={formularioPedido.responsableComercial || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({ ...prev, responsableComercial: e.target.value }))
                        }
                        placeholder="Ana García"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Fecha de Entrega Requerida *</Label>
                      <Input
                        type="date"
                        value={formularioPedido.fechaEntregaRequerida || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({ ...prev, fechaEntregaRequerida: e.target.value }))
                        }
                      />
                    </div>
                  </div>
                </Card>

<Card className="p-4">
                  <h3 className="font-semibold mb-4">Condiciones y Especificaciones</h3>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label>Condiciones de Pago *</Label>
                      <Textarea
                        value={formularioPedido.condicionesPago || ""}
                        onChange={(e) => setFormularioPedido((prev) => ({ ...prev, condicionesPago: e.target.value }))}
                        placeholder="Carta de crédito 30 días / Pago contra entrega / etc."
                        rows={2}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Especificaciones Generales</Label>
                      <Textarea
                        value={formularioPedido.especificacionesGenerales || ""}
                        onChange={(e) =>
                          setFormularioPedido((prev) => ({ ...prev, especificacionesGenerales: e.target.value }))
                        }
                        placeholder="Requisitos especiales, estándares de calidad, certificaciones requeridas..."
                        rows={3}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Observaciones</Label>
                      <Textarea
                        value={formularioPedido.observaciones || ""}
                        onChange={(e) => setFormularioPedido((prev) => ({ ...prev, observaciones: e.target.value }))}
                        placeholder="Información adicional, instrucciones especiales..."
                        rows={2}
                      />
                    </div>
                  </div>
                </Card>
              </TabsContent>

<TabsContent value="resumen" className="space-y-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-4">Resumen del Pedido</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                      <h4 className="font-medium mb-2">Cliente</h4>
                      <div className="text-sm space-y-1">
                        <p className="font-medium">{formularioPedido.cliente?.nombre}</p>
                        <p>
                          {formularioPedido.cliente?.contacto?.nombre} - {formularioPedido.cliente?.contacto?.cargo}
                        </p>
                        <p>{formularioPedido.cliente?.direccion}</p>
                        <p>
                          {formularioPedido.cliente?.ciudad}, {formularioPedido.cliente?.pais}
                        </p>
                        <p>
                          {formularioPedido.cliente?.contacto?.telefono} | {formularioPedido.cliente?.contacto?.email}
                        </p>
                      </div>
                    </div>
                    <div>
                      <h4 className="font-medium mb-2">Información Comercial</h4>
                      <div className="text-sm space-y-1">
                        <p>
                          <span className="font-medium">Tipo:</span> {formularioPedido.tipoMercado}
                        </p>
                        <p>
                          <span className="font-medium">Moneda:</span> {formularioPedido.moneda}
                        </p>
                        {formularioPedido.incoterm && (
                          <p>
                            <span className="font-medium">Incoterm:</span> {formularioPedido.incoterm}
                          </p>
                        )}
                        <p>
                          <span className="font-medium">Prioridad:</span> {formularioPedido.prioridad}
                        </p>
                        <p>
                          <span className="font-medium">Responsable:</span> {formularioPedido.responsableComercial}
                        </p>
                        <p>
                          <span className="font-medium">Entrega:</span> {formularioPedido.fechaEntregaRequerida}
                        </p>
                      </div>
                    </div>
                  </div>

{formularioPedido.productos && formularioPedido.productos.length > 0 && (
                    <div className="mb-6">
                      <h4 className="font-medium mb-3">Productos</h4>
                      <div className="overflow-x-auto">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>Producto</TableHead>
                              <TableHead>Cantidad</TableHead>
                              <TableHead>Precio Unit.</TableHead>
                              <TableHead>Subtotal</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {formularioPedido.productos.map((producto) => (
                              <TableRow key={producto.id}>
                                <TableCell>
                                  <div>
                                    <p className="font-medium">{producto.nombre}</p>
                                    <p className="text-xs text-muted-foreground">
                                      {producto.tipoProducto} - {producto.categoria}
                                    </p>
                                  </div>
                                </TableCell>
                                <TableCell>
                                  {producto.cantidad} {producto.unidad}
                                </TableCell>
                                <TableCell>
                                  {formularioPedido.moneda} {producto.precioUnitario.toFixed(2)}
                                </TableCell>
                                <TableCell>
                                  {formularioPedido.moneda} {producto.subtotal.toFixed(2)}
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                  )}

<div className="border-t pt-4">
                    <div className="flex justify-end">
                      <div className="w-64 space-y-2">
                        <div className="flex justify-between">
                          <span>Subtotal:</span>
                          <span>
                            {formularioPedido.moneda} {calcularTotales().subtotal.toFixed(2)}
                          </span>
                        </div>
                        {formularioPedido.tipoMercado === "nacional" && (
                          <div className="flex justify-between">
                            <span>IGV (18%):</span>
                            <span>
                              {formularioPedido.moneda} {calcularTotales().igv.toFixed(2)}
                            </span>
                          </div>
                        )}
                        <div className="flex justify-between font-bold text-lg border-t pt-2">
                          <span>Total:</span>
                          <span>
                            {formularioPedido.moneda} {calcularTotales().total.toFixed(2)}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

{formularioPedido.condicionesPago && (
                    <div className="mt-6 p-3 bg-gray-50 rounded-lg">
                      <h4 className="font-medium mb-2">Condiciones de Pago</h4>
                      <p className="text-sm">{formularioPedido.condicionesPago}</p>
                    </div>
                  )}

{formularioPedido.especificacionesGenerales && (
                    <div className="mt-4 p-3 bg-gray-50 rounded-lg">
                      <h4 className="font-medium mb-2">Especificaciones Generales</h4>
                      <p className="text-sm">{formularioPedido.especificacionesGenerales}</p>
                    </div>
                  )}

{formularioPedido.observaciones && (
                    <div className="mt-4 p-3 bg-gray-50 rounded-lg">
                      <h4 className="font-medium mb-2">Observaciones</h4>
                      <p className="text-sm">{formularioPedido.observaciones}</p>
                    </div>
                  )}
                </Card>
              </TabsContent>
            </Tabs>

<div className="flex justify-end gap-3 mt-6 pt-6 border-t">
              <Button variant="outline" onClick={() => setMostrarFormulario(false)}>
                Cancelar
              </Button>
              <Button onClick={guardarPedido} className="gap-2">
                <Settings className="h-4 w-4" />
                {editandoPedido ? "Actualizar Pedido" : "Crear Pedido"}
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* ... existing detail dialog ... */}
      {pedidoSeleccionado && (
        <Dialog open={!!pedidoSeleccionado} onOpenChange={() => setPedidoSeleccionado(null)}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Detalle del Pedido {pedidoSeleccionado.numero}</DialogTitle>
            </DialogHeader>

<div className="space-y-6">
              <div className="grid md:grid-cols-2 gap-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-3 flex items-center gap-2">
                    <User className="h-4 w-4" />
                    Información del Cliente
                  </h3>
                  <div className="space-y-2 text-sm">
                    <p>
                      <strong>Cliente:</strong> {pedidoSeleccionado.cliente.nombre}
                    </p>
                    <p>
                      <strong>Tipo:</strong> {pedidoSeleccionado.cliente.tipoCliente}
                    </p>
                    <p>
                      <strong>Contacto:</strong> {pedidoSeleccionado.cliente.contacto.nombre}
                    </p>
                    <p>
                      <strong>Cargo:</strong> {pedidoSeleccionado.cliente.contacto.cargo}
                    </p>
                    <p>
                      <strong>Teléfono:</strong> {pedidoSeleccionado.cliente.contacto.telefono}
                    </p>
                    <p>
                      <strong>Email:</strong> {pedidoSeleccionado.cliente.contacto.email}
                    </p>
                    <p>
                      <strong>Dirección:</strong> {pedidoSeleccionado.cliente.direccion}
                    </p>
                    <p>
                      <strong>Ciudad:</strong> {pedidoSeleccionado.cliente.ciudad}, {pedidoSeleccionado.cliente.pais}
                    </p>
                  </div>
                </Card>

<Card className="p-4">
                  <h3 className="font-semibold mb-3 flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    Información Comercial
                  </h3>
                  <div className="space-y-2 text-sm">
                    <p>
                      <strong>Número:</strong> {pedidoSeleccionado.numero}
                    </p>
                    <p>
                      <strong>Tipo de Mercado:</strong> {pedidoSeleccionado.tipoMercado}
                    </p>
                    <p>
                      <strong>Moneda:</strong> {pedidoSeleccionado.moneda}
                    </p>
                    {pedidoSeleccionado.incoterm && (
                      <p>
                        <strong>Incoterm:</strong> {pedidoSeleccionado.incoterm}
                      </p>
                    )}
                    <p>
                      <strong>Fecha Pedido:</strong> {formatDate(pedidoSeleccionado.fechaPedido)}
                    </p>
                    <p>
                      <strong>Entrega Requerida:</strong> {formatDate(pedidoSeleccionado.fechaEntregaRequerida)}
                    </p>
                    <p>
                      <strong>Prioridad:</strong> {pedidoSeleccionado.prioridad}
                    </p>
                    <p>
                      <strong>Responsable:</strong> {pedidoSeleccionado.responsableComercial}
                    </p>
                  </div>
                </Card>
              </div>

<Card className="p-4">
                <h3 className="font-semibold mb-3 flex items-center gap-2">
                  <Package className="h-4 w-4" />
                  Productos
                </h3>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Producto</TableHead>
                      <TableHead>Especificaciones</TableHead>
                      <TableHead>Cantidad</TableHead>
                      <TableHead>Precio Unit.</TableHead>
                      <TableHead>Subtotal</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {pedidoSeleccionado.productos.map((producto, index) => (
                      <TableRow key={index}>
                        <TableCell>
                          <div>
                            <p className="font-medium">{producto.nombre}</p>
                            <p className="text-xs text-muted-foreground">
                              {producto.tipoProducto} - {producto.categoria}
                            </p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-xs space-y-1">
                            {producto.especificaciones.presentacion && (
                              <p>Presentación: {producto.especificaciones.presentacion}</p>
                            )}
                            {producto.especificaciones.humedad && <p>Humedad: {producto.especificaciones.humedad}%</p>}
                          </div>
                        </TableCell>
                        <TableCell>
                          {producto.cantidad} {producto.unidad}
                        </TableCell>
                        <TableCell>
                          {pedidoSeleccionado.moneda} {producto.precioUnitario.toFixed(2)}
                        </TableCell>
                        <TableCell>
                          {pedidoSeleccionado.moneda} {producto.subtotal.toFixed(2)}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </Card>

<Card className="p-4">
                <div className="space-y-2 text-right">
                  <div className="flex justify-between">
                    <span>Subtotal:</span>
                    <span>
                      {pedidoSeleccionado.moneda} {pedidoSeleccionado.subtotal.toFixed(2)}
                    </span>
                  </div>
                  {pedidoSeleccionado.tipoMercado === "nacional" && (
                    <div className="flex justify-between">
                      <span>IGV (18%):</span>
                      <span>
                        {pedidoSeleccionado.moneda} {pedidoSeleccionado.igv.toFixed(2)}
                      </span>
                    </div>
                  )}
                  <div className="flex justify-between font-bold text-lg border-t pt-2">
                    <span>Total:</span>
                    <span>
                      {pedidoSeleccionado.moneda} {pedidoSeleccionado.total.toFixed(2)}
                    </span>
                  </div>
                </div>
              </Card>

<div className="grid md:grid-cols-2 gap-4">
                <Card className="p-4">
                  <h3 className="font-semibold mb-2">Condiciones de Pago</h3>
                  <p className="text-sm text-muted-foreground">{pedidoSeleccionado.condicionesPago}</p>
                </Card>
                {pedidoSeleccionado.observaciones && (
                  <Card className="p-4">
                    <h3 className="font-semibold mb-2">Observaciones</h3>
                    <p className="text-sm text-muted-foreground">{pedidoSeleccionado.observaciones}</p>
                  </Card>
                )}
              </div>

{pedidoSeleccionado.especificacionesGenerales && (
                <Card className="p-4">
                  <h3 className="font-semibold mb-2">Especificaciones Generales</h3>
                  <p className="text-sm text-muted-foreground">{pedidoSeleccionado.especificacionesGenerales}</p>
                </Card>
              )}
            </div>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/hooks/use-adelantos.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { adelantosService, type Adelanto, type NuevoAdelanto } from "@/lib/services/adelantos-service"

export function useAdelantos(initialLoad = true) {
  const [data, setData] = useState<Adelanto[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const loadData = async () => {
    setLoading(true)
    setError(null)

try {
      const result = await adelantosService.obtenerAdelantos()
      setData(result)
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error desconocido"
      console.error("Error loading adelantos:", errorMessage)
      setError(errorMessage)
      setData([])
    } finally {
      setLoading(false)
    }
  }

const create = async (adelanto: NuevoAdelanto) => {
    setLoading(true)
    setError(null)
    try {
      const newAdelanto = await adelantosService.crearAdelanto(adelanto)
      if (newAdelanto) {
        setData((prev) => [newAdelanto, ...prev])
        return newAdelanto
      }
      throw new Error("No se pudo crear el adelanto")
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al crear adelanto"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const getByProductor = async (productorId: number) => {
    try {
      return await adelantosService.obtenerAdelantosPorProductor(productorId)
    } catch (err) {
      console.error("Error getting adelantos by productor:", err)
      return []
    }
  }

const getPendientes = async (productorId: number) => {
    try {
      return await adelantosService.obtenerAdelantosPendientes(productorId)
    } catch (err) {
      console.error("Error getting adelantos pendientes:", err)
      return []
    }
  }

const calcularSaldo = async (productorId: number) => {
    try {
      return await adelantosService.calcularSaldoProductor(productorId)
    } catch (err) {
      console.error("Error calculating saldo:", err)
      return {
        total_adelantos: 0,
        total_descontado: 0,
        saldo_pendiente: 0,
        adelantos_activos: 0,
      }
    }
  }

const descontar = async (adelantoId: number, loteId: number, loteCodigo: string, montoDescuento: number) => {
    try {
      const success = await adelantosService.descontarAdelanto(adelantoId, loteId, loteCodigo, montoDescuento)
      if (success) {
        await loadData() // Recargar datos después del descuento
      }
      return success
    } catch (err) {
      console.error("Error descontando adelanto:", err)
      return false
    }
  }

const procesarDescuentosAutomaticos = async (
    productorId: number,
    loteId: number,
    loteCodigo: string,
    valorLote: number,
  ) => {
    try {
      return await adelantosService.procesarDescuentosAutomaticos(productorId, loteId, loteCodigo, valorLote)
    } catch (err) {
      console.error("Error processing automatic discounts:", err)
      return {
        descuentos_aplicados: [],
        monto_total_descontado: 0,
        saldo_final: valorLote,
      }
    }
  }

const refresh = () => loadData()

useEffect(() => {
    if (initialLoad) {
      const timer = setTimeout(() => {
        loadData()
      }, 300)
      return () => clearTimeout(timer)
    }
  }, [initialLoad])

return {
    data,
    loading,
    error,
    create,
    getByProductor,
    getPendientes,
    calcularSaldo,
    descontar,
    procesarDescuentosAutomaticos,
    refresh,
    loadData,
  }
}
[V0_FILE]typescript:file="components/gestion-adelantos.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, DollarSign, TrendingUp, TrendingDown, Clock, AlertCircle } from "lucide-react"
import { useAdelantos } from "@/lib/hooks/use-adelantos"
import { usePersonas } from "@/lib/hooks/use-personas"
import { format } from "date-fns"
import { es } from "date-fns/locale"
import type { NuevoAdelanto } from "@/lib/services/adelantos-service"
import { useToast } from "@/components/ui/use-toast"

export function GestionAdelantos() {
  const { toast } = useToast()
  const { data: adelantos, loading: loadingAdelantos, error: errorAdelantos, create, refresh } = useAdelantos()
  const { data: personas, loading: loadingPersonas, error: errorPersonas } = usePersonas()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [formData, setFormData] = useState<Partial<NuevoAdelanto>>({
    productor_id: "",
    productor_nombre: "",
    monto_original: 0,
    concepto: "",
    fecha_adelanto: new Date().toISOString().split("T")[0],
  })

// Asegurar que personas sea un array
  const personasArray = Array.isArray(personas) ? personas : []
  const productores = personasArray.filter((p) => p.tipo === "productor" && p.activo)

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

if (!formData.productor_id || !formData.monto_original || !formData.concepto) {
      toast({
        title: "Error",
        description: "Por favor completa todos los campos requeridos",
        variant: "destructive",
      })
      return
    }

try {
      await create(formData as NuevoAdelanto)
      toast({
        title: "Éxito",
        description: "Adelanto creado correctamente",
      })
      setIsDialogOpen(false)
      setFormData({
        productor_id: "",
        productor_nombre: "",
        monto_original: 0,
        concepto: "",
        fecha_adelanto: new Date().toISOString().split("T")[0],
      })
    } catch (error) {
      console.error("Error creating adelanto:", error)
      toast({
        title: "Error",
        description: "No se pudo crear el adelanto",
        variant: "destructive",
      })
    }
  }

const handleProductorChange = (productorId: string) => {
    const productor = productores.find((p) => p.$id === productorId)
    setFormData((prev) => ({
      ...prev,
      productor_id: productorId,
      productor_nombre: productor ? `${productor.nombres} ${productor.apellidos}` : "",
    }))
  }

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "pendiente":
        return (
          <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Pendiente
          </Badge>
        )
      case "descontado-parcial":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800">
            <TrendingDown className="w-3 h-3 mr-1" />
            Parcial
          </Badge>
        )
      case "descontado-total":
        return (
          <Badge variant="default" className="bg-green-100 text-green-800">
            <TrendingUp className="w-3 h-3 mr-1" />
            Completado
          </Badge>
        )
      default:
        return <Badge variant="secondary">{estado}</Badge>
    }
  }

// Calcular estadísticas
  const adelantosArray = Array.isArray(adelantos) ? adelantos : []
  const stats = {
    total: adelantosArray.length,
    pendientes: adelantosArray.filter((a) => a.estado === "pendiente").length,
    parciales: adelantosArray.filter((a) => a.estado === "descontado-parcial").length,
    completados: adelantosArray.filter((a) => a.estado === "descontado-total").length,
    montoTotal: adelantosArray.reduce((sum, a) => sum + a.monto_original, 0),
    saldoPendiente: adelantosArray.reduce((sum, a) => sum + a.saldo_pendiente, 0),
  }

const isLoading = loadingAdelantos || loadingPersonas
  const hasError = errorAdelantos || errorPersonas

if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
          <p className="mt-2 text-sm text-muted-foreground">Cargando adelantos...</p>
        </div>
      </div>
    )
  }

if (hasError) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
          <p className="text-destructive">Error: {errorAdelantos || errorPersonas}</p>
          <Button onClick={refresh} className="mt-2">
            Reintentar
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Gestión de Adelantos</h1>
          <p className="text-muted-foreground">Administra los adelantos otorgados a productores</p>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nuevo Adelanto
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Crear Nuevo Adelanto</DialogTitle>
              <DialogDescription>Registra un nuevo adelanto para un productor</DialogDescription>
            </DialogHeader>
            <form onSubmit={handleSubmit}>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="productor">Productor *</Label>
                  <Select value={formData.productor_id} onValueChange={handleProductorChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar productor" />
                    </SelectTrigger>
                    <SelectContent>
                      {productores.map((productor) => (
                        <SelectItem key={productor.$id} value={productor.$id}>
                          {productor.nombres} {productor.apellidos}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="monto">Monto *</Label>
                  <Input
                    id="monto"
                    type="number"
                    step="0.01"
                    min="0.01"
                    placeholder="0.00"
                    value={formData.monto_original || ""}
                    onChange={(e) =>
                      setFormData((prev) => ({ ...prev, monto_original: Number.parseFloat(e.target.value) || 0 }))
                    }
                    required
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="fecha">Fecha *</Label>
                  <Input
                    id="fecha"
                    type="date"
                    value={formData.fecha_adelanto}
                    onChange={(e) => setFormData((prev) => ({ ...prev, fecha_adelanto: e.target.value }))}
                    required
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="concepto">Concepto *</Label>
                  <Textarea
                    id="concepto"
                    placeholder="Describe el motivo del adelanto..."
                    value={formData.concepto}
                    onChange={(e) => setFormData((prev) => ({ ...prev, concepto: e.target.value }))}
                    required
                  />
                </div>
              </div>
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Crear Adelanto</Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg: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 Adelantos</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
            <p className="text-xs text-muted-foreground">S/ {stats.montoTotal.toLocaleString()}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pendientes</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.pendientes}</div>
            <p className="text-xs text-muted-foreground">Sin descuentos</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Parciales</CardTitle>
            <TrendingDown className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.parciales}</div>
            <p className="text-xs text-muted-foreground">Con descuentos</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saldo Pendiente</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">S/ {stats.saldoPendiente.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">Por descontar</p>
          </CardContent>
        </Card>
      </div>

{/* Adelantos Table */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Adelantos</CardTitle>
          <CardDescription>Historial completo de adelantos registrados</CardDescription>
        </CardHeader>
        <CardContent>
          {adelantosArray.length === 0 ? (
            <div className="text-center py-8">
              <DollarSign className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">No hay adelantos registrados</p>
              <p className="text-sm text-muted-foreground">Crea el primer adelanto usando el botón "Nuevo Adelanto"</p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Productor</TableHead>
                  <TableHead>Concepto</TableHead>
                  <TableHead>Monto Original</TableHead>
                  <TableHead>Descontado</TableHead>
                  <TableHead>Saldo</TableHead>
                  <TableHead>Estado</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {adelantosArray.map((adelanto) => (
                  <TableRow key={adelanto.$id}>
                    <TableCell>{format(new Date(adelanto.fecha_adelanto), "dd/MM/yyyy", { locale: es })}</TableCell>
                    <TableCell className="font-medium">{adelanto.productor_nombre}</TableCell>
                    <TableCell className="max-w-xs truncate">{adelanto.concepto}</TableCell>
                    <TableCell className="font-semibold">S/ {adelanto.monto_original.toLocaleString()}</TableCell>
                    <TableCell className="text-green-600">S/ {adelanto.monto_descontado.toLocaleString()}</TableCell>
                    <TableCell className="font-semibold text-orange-600">
                      S/ {adelanto.saldo_pendiente.toLocaleString()}
                    </TableCell>
                    <TableCell>{getEstadoBadge(adelanto.estado)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ingreso-materia-prima/page.tsx" isMerged="true"
import { IngresoMateriaPrima } from "@/components/ingreso-materia-prima"

export default function IngresoMateriaPrimaPage() {
  return <IngresoMateriaPrima />
}
[V0_FILE]typescriptreact:file="app/ingreso-materia-prima/loading.tsx" isMerged="true"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    <div className="flex items-center justify-center h-64">
      <Loader2 className="h-8 w-8 animate-spin text-primary" />
      <span className="ml-2 text-lg">Cargando...</span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ingreso-materia-prima.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useMemo } 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 { Dialog, DialogContent, 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, X, Calculator, Package, Scale, AlertCircle } from 'lucide-react'
import { useToast } from "@/components/ui/use-toast"
import { Badge } from "@/components/ui/badge"
import { usePersonas } from "@/lib/hooks/use-personas"
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import type { Persona } from "@/lib/types"
import { Alert, AlertDescription } from "@/components/ui/alert"

export function IngresoMateriaPrima() {
  const { toast } = useToast()
  const [isDialogOpen, setIsDialogOpen] = useState(false)

const { data: personas, loading: loadingPersonas } = usePersonas()
  const { data: lotes, loading: loadingLotes, create: createLote } = useApi(lotesService, { initialLoad: true })

const [formData, setFormData] = useState({
    tipoProducto: "",
    producto: "",
    categoria: "",
    proveedorId: "",
    fechaRecepcion: new Date().toISOString().split("T")[0],
    numeroJabas: 0,
    pesoBrutoTotal: 0,
    taraPromedio: 0,
    modalidadCompra: "por-proceso",
    lugarProcedencia: "",
    zona: "",
    transportista: "",
    placa: "",
    responsableRecepcion: "",
    deudaAnterior: 0,
    adelantoSolicitado: 0,
    observaciones: "",
  })

const [proveedorBusqueda, setProveedorBusqueda] = useState("")
  const [mostrarResultados, setMostrarResultados] = useState(false)
  const [proveedorSeleccionado, setProveedorSeleccionado] = useState<Persona | null>(null)

const proveedoresFiltrados = useMemo(() => {
    if (!proveedorBusqueda.trim()) return []
    const searchTerm = proveedorBusqueda.toLowerCase()
    return (Array.isArray(personas) ? personas : [])
      .filter(
        (p) =>
          p.nombre_completo?.toLowerCase().includes(searchTerm) ||
          p.documento_identidad?.includes(searchTerm) ||
          p.telefono?.includes(searchTerm),
      )
      .slice(0, 5)
  }, [proveedorBusqueda, personas])

const calculations = useMemo(() => {
    const jabas = Number.parseFloat(String(formData.numeroJabas)) || 0
    const peso = Number.parseFloat(String(formData.pesoBrutoTotal)) || 0
    const tara = Number.parseFloat(String(formData.taraPromedio)) || 0

const pesoPromedioPorJaba = jabas > 0 ? peso / jabas : 0
    const taraTotal = tara * jabas
    const pesoNeto = peso - taraTotal

return {
      pesoPromedioPorJaba: pesoPromedioPorJaba.toFixed(2),
      taraTotal: taraTotal.toFixed(2),
      pesoNeto: Math.max(0, pesoNeto).toFixed(2),
    }
  }, [formData.numeroJabas, formData.pesoBrutoTotal, formData.taraPromedio])

const seleccionarProveedor = (proveedor: Persona) => {
    setProveedorSeleccionado(proveedor)
    setFormData((prev) => ({ ...prev, proveedorId: String(proveedor.id) }))
    setProveedorBusqueda(proveedor.nombre_completo || "")
    setMostrarResultados(false)
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]:
        ["numeroJabas", "pesoBrutoTotal", "taraPromedio", "deudaAnterior", "adelantoSolicitado"].includes(name)
          ? Number.parseFloat(value) || 0
          : value,
    }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

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

if (!proveedorSeleccionado) {
      toast({
        title: "Error",
        description: "Debe seleccionar un proveedor",
        variant: "destructive",
      })
      return
    }

if (!formData.producto || !formData.categoria) {
      toast({
        title: "Error",
        description: "Complete producto y categoría",
        variant: "destructive",
      })
      return
    }

if (formData.numeroJabas <= 0 || formData.pesoBrutoTotal <= 0) {
      toast({
        title: "Error",
        description: "Número de jabas y peso deben ser mayores a 0",
        variant: "destructive",
      })
      return
    }

const pesoNeto = Number(calculations.pesoNeto)
    if (pesoNeto > formData.pesoBrutoTotal) {
      toast({
        title: "Error de Validación",
        description: "El peso neto no puede exceder el peso bruto",
        variant: "destructive",
      })
      return
    }

try {
      await createLote({
        codigo: `LOT-${new Date().getFullYear()}-${Date.now().toString().slice(-6)}`,
        productor_id: Number(proveedorSeleccionado.id),
        peso_bruto: formData.pesoBrutoTotal,
        peso_neto: pesoNeto,
        tara: Number(calculations.taraTotal),
        fecha_ingreso: formData.fechaRecepcion,
        estado: "pendiente",
        observaciones: formData.observaciones,
        num_jabas: formData.numeroJabas,
      })

toast({
        title: "Lote registrado",
        description: `Lote de materia prima registrado exitosamente para ${proveedorSeleccionado.nombre_completo}`,
      })

// Reset form
      setFormData({
        tipoProducto: "",
        producto: "",
        categoria: "",
        proveedorId: "",
        fechaRecepcion: new Date().toISOString().split("T")[0],
        numeroJabas: 0,
        pesoBrutoTotal: 0,
        taraPromedio: 0,
        modalidadCompra: "por-proceso",
        lugarProcedencia: "",
        zona: "",
        transportista: "",
        placa: "",
        responsableRecepcion: "",
        deudaAnterior: 0,
        adelantoSolicitado: 0,
        observaciones: "",
      })
      setProveedorSeleccionado(null)
      setProveedorBusqueda("")
      setIsDialogOpen(false)
    } catch (error) {
      console.error("Error al registrar lote:", error)
      toast({
        title: "Error",
        description: "No se pudo registrar el lote",
        variant: "destructive",
      })
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Ingreso de Materia Prima</h2>
          <p className="text-muted-foreground">Registre el ingreso de lotes de materia prima</p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nuevo Ingreso
        </Button>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[1000px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-2xl">Registro de Ingreso de Lote</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Left Column - Provider Search and Batch Info */}
              <div className="lg:col-span-2 space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <Search className="h-5 w-5" />
                      Búsqueda de Proveedor
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex gap-2">
                      <div className="relative flex-1">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 z-10" />
                        <Input
                          value={proveedorBusqueda}
                          onChange={(e) => {
                            setProveedorBusqueda(e.target.value)
                            setMostrarResultados(true)
                            setProveedorSeleccionado(null)
                          }}
                          onFocus={() => setMostrarResultados(true)}
                          className="pl-10"
                          placeholder="Buscar proveedor por nombre o documento..."
                          autoComplete="off"
                          disabled={loadingPersonas}
                        />
                        {mostrarResultados && proveedorBusqueda && (
                          <div className="absolute z-20 w-full mt-1 bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
                            {proveedoresFiltrados.length > 0 ? (
                              <>
                                {proveedoresFiltrados.map((proveedor) => (
                                  <div
                                    key={proveedor.id}
                                    className="px-4 py-3 hover:bg-blue-50 cursor-pointer border-b last:border-b-0"
                                    onClick={() => seleccionarProveedor(proveedor)}
                                  >
                                    <div className="font-medium">{proveedor.nombre_completo}</div>
                                    <div className="text-sm text-gray-500">
                                      Doc: {proveedor.documento_identidad} • Tel: {proveedor.telefono}
                                    </div>
                                  </div>
                                ))}
                              </>
                            ) : (
                              <div className="px-4 py-6 text-center">
                                <div className="text-gray-500">No se encontraron proveedores</div>
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    </div>

{proveedorSeleccionado && (
                      <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex items-center justify-between">
                          <div>
                            <div className="font-medium text-green-800">✅ {proveedorSeleccionado.nombre_completo}</div>
                            <div className="text-sm text-green-600 mt-1">
                              Doc: {proveedorSeleccionado.documento_identidad} • Tel: {proveedorSeleccionado.telefono}
                            </div>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setProveedorSeleccionado(null)
                              setFormData((prev) => ({ ...prev, proveedorId: "" }))
                              setProveedorBusqueda("")
                            }}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <Package className="h-5 w-5" />
                      Información del Lote
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label>Producto *</Label>
                        <Select
                          value={formData.producto}
                          onValueChange={(value) => handleSelectChange("producto", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccionar" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="jengibre">Jengibre</SelectItem>
                            <SelectItem value="curcuma">Cúrcuma</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div>
                        <Label>Categoría *</Label>
                        <Select
                          value={formData.categoria}
                          onValueChange={(value) => handleSelectChange("categoria", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccionar" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="exportable">Exportable</SelectItem>
                            <SelectItem value="industrial">Industrial</SelectItem>
                            <SelectItem value="descarte">Descarte</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="grid grid-cols-3 gap-4">
                      <div>
                        <Label>Número de Jabas *</Label>
                        <Input
                          name="numeroJabas"
                          type="number"
                          value={formData.numeroJabas || ""}
                          onChange={handleInputChange}
                        />
                      </div>
                      <div>
                        <Label>Peso Bruto Total (kg) *</Label>
                        <Input
                          name="pesoBrutoTotal"
                          type="number"
                          step="0.01"
                          value={formData.pesoBrutoTotal || ""}
                          onChange={handleInputChange}
                        />
                      </div>
                      <div>
                        <Label>Tara Promedio (kg/jaba)</Label>
                        <Input
                          name="taraPromedio"
                          type="number"
                          step="0.01"
                          value={formData.taraPromedio || ""}
                          onChange={handleInputChange}
                        />
                      </div>
                    </div>

<div className="grid grid-cols-3 gap-4">
                      <div>
                        <Label>Transportista</Label>
                        <Input name="transportista" value={formData.transportista} onChange={handleInputChange} />
                      </div>
                      <div>
                        <Label>Placa</Label>
                        <Input
                          name="placa"
                          value={formData.placa}
                          onChange={(e) => {
                            e.target.value = e.target.value.toUpperCase()
                            handleInputChange(e)
                          }}
                        />
                      </div>
                      <div>
                        <Label>Fecha Recepción *</Label>
                        <Input
                          name="fechaRecepcion"
                          type="date"
                          value={formData.fechaRecepcion}
                          onChange={handleInputChange}
                        />
                      </div>
                    </div>

<div>
                      <Label>Observaciones</Label>
                      <Textarea
                        name="observaciones"
                        value={formData.observaciones}
                        onChange={handleInputChange}
                        rows={2}
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Right Column - Automatic Calculations */}
              <div className="space-y-4">
                <Card className="bg-gradient-to-br from-blue-50 to-indigo-50">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                      <Calculator className="h-4 w-4" />
                      Cálculos Automáticos
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="bg-white p-3 rounded-lg border">
                      <div className="flex items-center gap-2 mb-1">
                        <Package className="h-3 w-3 text-gray-600" />
                        <span className="text-xs font-medium text-gray-600">Número de Jabas</span>
                      </div>
                      <p className="text-xl font-bold">{formData.numeroJabas || "0"}</p>
                    </div>

<div className="bg-white p-3 rounded-lg border">
                      <div className="flex items-center gap-2 mb-1">
                        <Scale className="h-3 w-3 text-gray-600" />
                        <span className="text-xs font-medium text-gray-600">Peso Bruto Total</span>
                      </div>
                      <p className="text-xl font-bold">{formData.pesoBrutoTotal || "0"} kg</p>
                    </div>

<div className="bg-white p-3 rounded-lg border border-blue-200">
                      <div className="flex items-center gap-2 mb-1">
                        <Calculator className="h-3 w-3 text-blue-600" />
                        <span className="text-xs font-medium text-blue-600">Peso por Jaba</span>
                      </div>
                      <p className="text-xl font-bold text-blue-800">{calculations.pesoPromedioPorJaba} kg</p>
                    </div>

<div className="bg-white p-3 rounded-lg border border-amber-200">
                      <div className="flex items-center gap-2 mb-1">
                        <Scale className="h-3 w-3 text-amber-600" />
                        <span className="text-xs font-medium text-amber-600">Tara Total</span>
                      </div>
                      <p className="text-xl font-bold text-amber-800">{calculations.taraTotal} kg</p>
                    </div>

<div className="bg-white p-3 rounded-lg border border-green-200">
                      <div className="flex items-center gap-2 mb-1">
                        <Scale className="h-3 w-3 text-green-600" />
                        <span className="text-xs font-medium text-green-600">Peso Neto</span>
                      </div>
                      <p className="text-xl font-bold text-green-800">{calculations.pesoNeto} kg</p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>

<div className="flex justify-end gap-2 pt-4 border-t">
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Cancelar
              </Button>
              <Button type="submit" size="lg">
                Registrar Lote
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

{/* Batch List */}
      <Card>
        <CardHeader>
          <CardTitle>Lotes de Materia Prima</CardTitle>
          <CardDescription>Historial de ingresos registrados</CardDescription>
        </CardHeader>
        <CardContent>
          {loadingLotes ? (
            <div className="text-center py-8 text-muted-foreground">Cargando lotes...</div>
          ) : lotes && lotes.length > 0 ? (
            <div className="space-y-2">
              {lotes.map((lote) => (
                <div key={lote.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                  <div>
                    <p className="font-medium">{lote.codigo}</p>
                    <p className="text-sm text-gray-600">{lote.peso_bruto} kg | {lote.num_jabas} jabas</p>
                  </div>
                  <Badge>{lote.estado}</Badge>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">No hay lotes registrados aún</div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-pedidos/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-32" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="p-4 border rounded-lg">
            <Skeleton className="h-4 w-20 mb-2" />
            <Skeleton className="h-8 w-16" />
          </div>
        ))}
      </div>

<div className="space-y-4">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="p-4 border rounded-lg">
            <div className="flex items-center justify-between mb-2">
              <Skeleton className="h-5 w-32" />
              <Skeleton className="h-6 w-20" />
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-4 w-28" />
              <Skeleton className="h-4 w-16" />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subprocesos-pro/page.tsx" isMerged="true"
import { Suspense } from "react"
import { SubprocesosPro } from "@/components/subprocesos-pro"

export default function SubprocesosProPage() {
  return (
    <div className="container mx-auto p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Control de Subprocesos Pro</h1>
        <p className="text-gray-600 mt-2">Gestión avanzada de subprocesos con control de personal y costos</p>
      </div>

<Suspense fallback={<div>Cargando...</div>}>
        <SubprocesosPro />
      </Suspense>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subprocesos-pro/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="space-y-2">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-4 w-96" />
      </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <Card key={i}>
            <CardHeader>
              <Skeleton className="h-6 w-32" />
              <Skeleton className="h-4 w-24" />
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-8 w-20" />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subprocesos-pro.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  Search,
  Users,
  Clock,
  DollarSign,
  ChevronDown,
  Play,
  Square,
  Calculator,
  Settings,
  Plus,
  Eye,
  Scale,
} from "lucide-react"

// Tipos de datos
interface Trabajador {
  id: string
  nombre: string
  apellidos: string
  genero: "hombre" | "mujer"
  activo: boolean
  documento: string
}

interface SubprocesoDetalle {
  id: string
  nombre: "lavado" | "perfilado" | "desinfeccion" | "secado" | "empaque" | "salida"
  estado: "pendiente" | "en-proceso" | "completado" | "pausado"
  horaInicio?: string
  horaFin?: string
  pesoInicial?: number
  pesoFinal?: number
  jabasIniciales: number
  jabasFinal?: number
  personalAsignado: string[]
  costoTotal: number
  observaciones: string
  fechaCreacion: string
  totalHorasTrabajadas: number
  detalleJabasPorTrabajador?: {
    [trabajadorId: string]: {
      exportable: number
      industrial: number
      jugo?: number
      descarte?: number
    }
  }
}

interface Proceso {
  id: string
  codigoLote: string
  producto: "jengibre" | "curcuma"
  fechaCreacion: string
  subprocesoActual: "lavado" | "perfilado" | "desinfeccion" | "secado" | "empaque" | "salida"
  estado: "activo" | "completado" | "pausado"
  subprocesos: SubprocesoDetalle[]
  costoTotalProceso: number
  pesoInicialProceso: number
  pesoFinalProceso?: number
  jabasInicialesProceso: number
  jabasFinalProceso?: number
}

// Datos mock
const trabajadoresMock: Trabajador[] = [
  { id: "1", nombre: "Juan", apellidos: "Pérez", genero: "hombre", activo: true, documento: "12345678" },
  { id: "2", nombre: "María", apellidos: "García", genero: "mujer", activo: true, documento: "87654321" },
  { id: "3", nombre: "Carlos", apellidos: "López", genero: "hombre", activo: true, documento: "11223344" },
  { id: "4", nombre: "Ana", apellidos: "Torres", genero: "mujer", activo: true, documento: "44332211" },
  { id: "5", nombre: "Pedro", apellidos: "Sánchez", genero: "hombre", activo: true, documento: "55667788" },
  { id: "6", nombre: "Rosa", apellidos: "Mendoza", genero: "mujer", activo: true, documento: "88776655" },
]

const procesosMock: Proceso[] = [
  {
    id: "1",
    codigoLote: "JEN-001",
    producto: "jengibre",
    fechaCreacion: "2024-01-15",
    subprocesoActual: "lavado",
    estado: "activo",
    costoTotalProceso: 0,
    pesoInicialProceso: 1000,
    jabasInicialesProceso: 50,
    subprocesos: [
      {
        id: "1-lavado",
        nombre: "lavado",
        estado: "en-proceso",
        horaInicio: "08:00",
        pesoInicial: 1000,
        jabasIniciales: 50,
        personalAsignado: ["1", "2"],
        costoTotal: 0,
        observaciones: "",
        fechaCreacion: "2024-01-15T08:00:00",
        totalHorasTrabajadas: 0,
      },
    ],
  },
  {
    id: "2",
    codigoLote: "CUR-002",
    producto: "curcuma",
    fechaCreacion: "2024-01-16",
    subprocesoActual: "perfilado",
    estado: "activo",
    costoTotalProceso: 240,
    pesoInicialProceso: 800,
    pesoFinalProceso: 720,
    jabasInicialesProceso: 40,
    jabasFinalProceso: 36,
    subprocesos: [
      {
        id: "2-lavado",
        nombre: "lavado",
        estado: "completado",
        horaInicio: "07:30",
        horaFin: "10:30",
        pesoInicial: 800,
        pesoFinal: 750,
        jabasIniciales: 40,
        jabasFinal: 38,
        personalAsignado: ["3", "4"],
        costoTotal: 120,
        observaciones: "Lavado completado sin problemas",
        fechaCreacion: "2024-01-16T07:30:00",
        totalHorasTrabajadas: 3,
      },
      {
        id: "2-perfilado",
        nombre: "perfilado",
        estado: "en-proceso",
        horaInicio: "11:00",
        pesoInicial: 750,
        jabasIniciales: 38,
        personalAsignado: ["1", "5"],
        costoTotal: 0,
        observaciones: "",
        fechaCreacion: "2024-01-16T11:00:00",
        totalHorasTrabajadas: 0,
      },
    ],
  },
]

const subprocesosDisponibles = [
  { value: "lavado", label: "Lavado", icon: "💧", descripcion: "Limpieza inicial del producto" },
  { value: "perfilado", label: "Perfilado", icon: "✂️", descripcion: "Selección y clasificación por calidad" },
  { value: "desinfeccion", label: "Desinfección", icon: "🧽", descripcion: "Proceso de desinfección y sanitización" },
  { value: "secado", label: "Secado", icon: "🌡️", descripcion: "Reducción de humedad del producto" },
  { value: "empaque", label: "Empaque", icon: "📦", descripcion: "Empacado final para distribución" },
  { value: "salida", label: "Salida", icon: "🚚", descripcion: "Preparación para despacho" },
]

const categoriasPago = [
  { value: "exportable", label: "Exportable", precio: 2.5 },
  { value: "industrial", label: "Industrial", precio: 1.8 },
  { value: "jugo", label: "Jugo", precio: 1.2 },
  { value: "descarte", label: "Descarte", precio: 0.5 },
]

const categoriasEmpaque = [
  { value: "exportable", label: "Exportable", precio: 2.5 },
  { value: "industrial", label: "Industrial", precio: 1.8 },
]

export function SubprocesosPro() {
  const [procesos, setProcesos] = useState<Proceso[]>(procesosMock)
  const [trabajadores] = useState<Trabajador[]>(trabajadoresMock)
  const [procesoSeleccionado, setProcesoSeleccionado] = useState<Proceso | null>(null)
  const [subprocesoEditando, setSubprocesoEditando] = useState<SubprocesoDetalle | null>(null)
  const [modalPersonalAbierto, setModalPersonalAbierto] = useState(false)
  const [modalMatrizAbierto, setModalMatrizAbierto] = useState(false)
  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false)
  const [modalNuevoSubprocesoAbierto, setModalNuevoSubprocesoAbierto] = useState(false)
  const [busquedaHombres, setBusquedaHombres] = useState("")
  const [busquedaMujeres, setBusquedaMujeres] = useState("")
  const [personalSeleccionado, setPersonalSeleccionado] = useState<string[]>([])
  const [matrizJabas, setMatrizJabas] = useState<{ [key: string]: { [categoria: string]: number } }>({})
  const [nuevoSubproceso, setNuevoSubproceso] = useState({
    tipo: "",
    jabasIniciales: 0,
    pesoInicial: 0,
    observaciones: "",
  })

// Filtrar trabajadores
  const trabajadoresHombres = trabajadores.filter(
    (t) =>
      t.genero === "hombre" &&
      t.activo &&
      (t.nombre.toLowerCase().includes(busquedaHombres.toLowerCase()) ||
        t.apellidos.toLowerCase().includes(busquedaHombres.toLowerCase()) ||
        t.documento.includes(busquedaHombres)),
  )

const trabajadoresMujeres = trabajadores.filter(
    (t) =>
      t.genero === "mujer" &&
      t.activo &&
      (t.nombre.toLowerCase().includes(busquedaMujeres.toLowerCase()) ||
        t.apellidos.toLowerCase().includes(busquedaMujeres.toLowerCase()) ||
        t.documento.includes(busquedaMujeres)),
  )

// Calcular horas trabajadas
  const calcularHorasTrabajadas = (horaInicio?: string, horaFin?: string): number => {
    if (!horaInicio || !horaFin) return 0
    const inicio = new Date(`2024-01-01 ${horaInicio}`)
    const fin = new Date(`2024-01-01 ${horaFin}`)
    return (fin.getTime() - inicio.getTime()) / (1000 * 60 * 60)
  }

// Calcular costos
  const calcularCostoPersonal = (subproceso: SubprocesoDetalle, totalJabas: number) => {
    if (!subproceso.horaInicio || !subproceso.horaFin) return 0

const horasTrabajadas = calcularHorasTrabajadas(subproceso.horaInicio, subproceso.horaFin)
    let costoTotal = 0

subproceso.personalAsignado.forEach((trabajadorId) => {
      const trabajador = trabajadores.find((t) => t.id === trabajadorId)
      if (!trabajador) return

if (subproceso.nombre === "perfilado" || subproceso.nombre === "empaque") {
        // Pago por jabas procesadas (adicional al jornal)
        const jabasPorTrabajador = Math.floor(totalJabas / subproceso.personalAsignado.length)
        const tarifaPorJaba = trabajador.genero === "hombre" ? 1.2 : 1.0
        const costoJabas = jabasPorTrabajador * tarifaPorJaba

// Pago por horas también
        const tarifaPorHora = trabajador.genero === "hombre" ? 7.5 : 6.25
        const costoHoras = horasTrabajadas * tarifaPorHora

costoTotal += costoJabas + costoHoras
      } else {
        // Solo pago por horas
        const tarifaPorHora = trabajador.genero === "hombre" ? 7.5 : 6.25
        costoTotal += horasTrabajadas * tarifaPorHora
      }
    })

return costoTotal
  }

const cambiarSubproceso = (procesoId: string, nuevoSubproceso: string) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          const subprocesoExistente = proceso.subprocesos.find((s) => s.nombre === nuevoSubproceso)

if (!subprocesoExistente) {
            // Crear nuevo subproceso
            const nuevoSubprocesoObj: SubprocesoDetalle = {
              id: `${procesoId}-${nuevoSubproceso}-${Date.now()}`,
              nombre: nuevoSubproceso as any,
              estado: "pendiente",
              horaInicio: new Date().toLocaleTimeString("es-PE", { hour12: false, hour: "2-digit", minute: "2-digit" }),
              jabasIniciales: 0,
              personalAsignado: [],
              costoTotal: 0,
              observaciones: "",
              fechaCreacion: new Date().toISOString(),
              totalHorasTrabajadas: 0,
            }

return {
              ...proceso,
              subprocesoActual: nuevoSubproceso as any,
              subprocesos: [...proceso.subprocesos, nuevoSubprocesoObj],
            }
          } else {
            return {
              ...proceso,
              subprocesoActual: nuevoSubproceso as any,
            }
          }
        }
        return proceso
      }),
    )
  }

const agregarNuevoSubproceso = () => {
    if (!procesoSeleccionado || !nuevoSubproceso.tipo) return

const nuevoSubprocesoObj: SubprocesoDetalle = {
      id: `${procesoSeleccionado.id}-${nuevoSubproceso.tipo}-${Date.now()}`,
      nombre: nuevoSubproceso.tipo as any,
      estado: "pendiente",
      horaInicio: new Date().toLocaleTimeString("es-PE", { hour12: false, hour: "2-digit", minute: "2-digit" }),
      jabasIniciales: nuevoSubproceso.jabasIniciales,
      pesoInicial: nuevoSubproceso.pesoInicial,
      personalAsignado: [],
      costoTotal: 0,
      observaciones: nuevoSubproceso.observaciones,
      fechaCreacion: new Date().toISOString(),
      totalHorasTrabajadas: 0,
    }

setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoSeleccionado.id) {
          return {
            ...proceso,
            subprocesos: [...proceso.subprocesos, nuevoSubprocesoObj],
          }
        }
        return proceso
      }),
    )

setNuevoSubproceso({ tipo: "", jabasIniciales: 0, pesoInicial: 0, observaciones: "" })
    setModalNuevoSubprocesoAbierto(false)
  }

const iniciarSubproceso = (procesoId: string, subprocesoId: string) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          return {
            ...proceso,
            subprocesos: proceso.subprocesos.map((sub) => {
              if (sub.id === subprocesoId) {
                return {
                  ...sub,
                  estado: "en-proceso" as const,
                  horaInicio:
                    sub.horaInicio ||
                    new Date().toLocaleTimeString("es-PE", { hour12: false, hour: "2-digit", minute: "2-digit" }),
                }
              }
              return sub
            }),
          }
        }
        return proceso
      }),
    )
  }

const finalizarSubproceso = (procesoId: string, subprocesoId: string) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          return {
            ...proceso,
            subprocesos: proceso.subprocesos.map((sub) => {
              if (sub.id === subprocesoId) {
                const horaFin = new Date().toLocaleTimeString("es-PE", {
                  hour12: false,
                  hour: "2-digit",
                  minute: "2-digit",
                })
                const horasTrabajadas = calcularHorasTrabajadas(sub.horaInicio, horaFin)
                const costoCalculado = calcularCostoPersonal({ ...sub, horaFin }, sub.jabasFinal || sub.jabasIniciales)

return {
                  ...sub,
                  estado: "completado" as const,
                  horaFin,
                  totalHorasTrabajadas: horasTrabajadas,
                  costoTotal: costoCalculado,
                }
              }
              return sub
            }),
          }
        }
        return proceso
      }),
    )
  }

const guardarPersonal = () => {
    if (subprocesoEditando && procesoSeleccionado) {
      setProcesos((prev) =>
        prev.map((proceso) => {
          if (proceso.id === procesoSeleccionado.id) {
            return {
              ...proceso,
              subprocesos: proceso.subprocesos.map((sub) => {
                if (sub.id === subprocesoEditando.id) {
                  return {
                    ...sub,
                    personalAsignado: personalSeleccionado,
                  }
                }
                return sub
              }),
            }
          }
          return proceso
        }),
      )
      setModalPersonalAbierto(false)
    }
  }

const calcularPagoTrabajador = (trabajadorId: string) => {
    const trabajador = trabajadores.find((t) => t.id === trabajadorId)
    if (!trabajador) return 0

let total = 0
    const categorias = subprocesoEditando?.nombre === "empaque" ? categoriasEmpaque : categoriasPago

categorias.forEach((categoria) => {
      const jabas = matrizJabas[trabajadorId]?.[categoria.value] || 0
      total += jabas * categoria.precio
    })
    return total
  }

const actualizarMatrizJabas = (trabajadorId: string, categoria: string, jabas: number) => {
    setMatrizJabas((prev) => ({
      ...prev,
      [trabajadorId]: {
        ...prev[trabajadorId],
        [categoria]: jabas,
      },
    }))
  }

const actualizarHorario = (procesoId: string, subprocesoId: string, tipo: "inicio" | "fin", hora: string) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          return {
            ...proceso,
            subprocesos: proceso.subprocesos.map((sub) => {
              if (sub.id === subprocesoId) {
                const updatedSub = {
                  ...sub,
                  [tipo === "inicio" ? "horaInicio" : "horaFin"]: hora,
                }

// Recalcular horas y costo si ambas horas están disponibles
                if (updatedSub.horaInicio && updatedSub.horaFin) {
                  updatedSub.totalHorasTrabajadas = calcularHorasTrabajadas(updatedSub.horaInicio, updatedSub.horaFin)
                  updatedSub.costoTotal = calcularCostoPersonal(
                    updatedSub,
                    updatedSub.jabasFinal || updatedSub.jabasIniciales,
                  )
                }

return updatedSub
              }
              return sub
            }),
          }
        }
        return proceso
      }),
    )
  }

const actualizarDatos = (procesoId: string, subprocesoId: string, campo: string, valor: number) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          return {
            ...proceso,
            subprocesos: proceso.subprocesos.map((sub) => {
              if (sub.id === subprocesoId) {
                const updatedSub = {
                  ...sub,
                  [campo]: valor,
                }

// Recalcular costo si es necesario
                if (updatedSub.horaInicio && updatedSub.horaFin) {
                  updatedSub.costoTotal = calcularCostoPersonal(
                    updatedSub,
                    updatedSub.jabasFinal || updatedSub.jabasIniciales,
                  )
                }

return updatedSub
              }
              return sub
            }),
          }
        }
        return proceso
      }),
    )
  }

const actualizarPesoProceso = (procesoId: string, campo: string, valor: number) => {
    setProcesos((prev) =>
      prev.map((proceso) => {
        if (proceso.id === procesoId) {
          return {
            ...proceso,
            [campo]: valor,
          }
        }
        return proceso
      }),
    )
  }

return (
    <div className="space-y-6">
      {/* Header con estadísticas */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                <Settings className="h-4 w-4 text-blue-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-600">Procesos Activos</p>
                <p className="text-2xl font-bold text-gray-900">
                  {procesos.filter((p) => p.estado === "activo").length}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                <Users className="h-4 w-4 text-green-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-600">Personal Activo</p>
                <p className="text-2xl font-bold text-gray-900">{trabajadores.filter((t) => t.activo).length}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
                <Clock className="h-4 w-4 text-yellow-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-600">En Proceso</p>
                <p className="text-2xl font-bold text-gray-900">
                  {procesos.reduce((acc, p) => acc + p.subprocesos.filter((s) => s.estado === "en-proceso").length, 0)}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                <DollarSign className="h-4 w-4 text-purple-600" />
              </div>
              <div>
                <p className="text-sm font-medium text-gray-600">Costo Total</p>
                <p className="text-2xl font-bold text-gray-900">
                  S/{" "}
                  {procesos
                    .reduce((acc, p) => acc + p.subprocesos.reduce((subAcc, s) => subAcc + s.costoTotal, 0), 0)
                    .toFixed(2)}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Lista de procesos */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {procesos.map((proceso) => {
          const subprocesoActual = proceso.subprocesos.find((s) => s.nombre === proceso.subprocesoActual)

return (
            <Card key={proceso.id} className="border-l-4 border-l-blue-500">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">{proceso.codigoLote}</CardTitle>
                  <Badge variant={proceso.estado === "activo" ? "default" : "secondary"}>{proceso.estado}</Badge>
                </div>
                <div className="flex items-center space-x-2 text-sm text-gray-600">
                  <span className="capitalize">{proceso.producto}</span>
                  <span>•</span>
                  <span>{proceso.fechaCreacion}</span>
                </div>
              </CardHeader>

<CardContent className="space-y-4">
                {/* Información general del proceso */}
                <div className="bg-blue-50 rounded-lg p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="font-semibold text-blue-800">Información del Proceso</h4>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => {
                        setProcesoSeleccionado(proceso)
                        setModalDetalleAbierto(true)
                      }}
                    >
                      <Eye className="h-3 w-3 mr-1" />
                      Detalle
                    </Button>
                  </div>
                  <div className="grid grid-cols-2 gap-2 text-xs">
                    <div>
                      <span className="text-gray-600">Peso Inicial:</span>
                      <Input
                        type="number"
                        value={proceso.pesoInicialProceso || ""}
                        onChange={(e) =>
                          actualizarPesoProceso(proceso.id, "pesoInicialProceso", Number(e.target.value))
                        }
                        className="h-6 text-xs mt-1"
                        placeholder="kg"
                      />
                    </div>
                    <div>
                      <span className="text-gray-600">Peso Final:</span>
                      <Input
                        type="number"
                        value={proceso.pesoFinalProceso || ""}
                        onChange={(e) => actualizarPesoProceso(proceso.id, "pesoFinalProceso", Number(e.target.value))}
                        className="h-6 text-xs mt-1"
                        placeholder="kg"
                      />
                    </div>
                    <div>
                      <span className="text-gray-600">Jabas Iniciales:</span>
                      <Input
                        type="number"
                        value={proceso.jabasInicialesProceso || ""}
                        onChange={(e) =>
                          actualizarPesoProceso(proceso.id, "jabasInicialesProceso", Number(e.target.value))
                        }
                        className="h-6 text-xs mt-1"
                        placeholder="jabas"
                      />
                    </div>
                    <div>
                      <span className="text-gray-600">Jabas Final:</span>
                      <Input
                        type="number"
                        value={proceso.jabasFinalProceso || ""}
                        onChange={(e) => actualizarPesoProceso(proceso.id, "jabasFinalProceso", Number(e.target.value))}
                        className="h-6 text-xs mt-1"
                        placeholder="jabas"
                      />
                    </div>
                  </div>
                </div>

{/* Subproceso actual */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm font-medium">Subproceso Actual</Label>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="outline" size="sm" className="h-8 bg-transparent">
                          {subprocesosDisponibles.find((s) => s.value === proceso.subprocesoActual)?.icon}{" "}
                          {subprocesosDisponibles.find((s) => s.value === proceso.subprocesoActual)?.label}
                          <ChevronDown className="h-3 w-3 ml-1" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent>
                        {subprocesosDisponibles.map((subproceso) => (
                          <DropdownMenuItem
                            key={subproceso.value}
                            onClick={() => cambiarSubproceso(proceso.id, subproceso.value)}
                          >
                            {subproceso.icon} {subproceso.label}
                          </DropdownMenuItem>
                        ))}
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>

{subprocesoActual && (
                    <div className="bg-gray-50 rounded-lg p-3 space-y-2">
                      <div className="flex items-center justify-between">
                        <Badge
                          variant={
                            subprocesoActual.estado === "completado"
                              ? "default"
                              : subprocesoActual.estado === "en-proceso"
                                ? "secondary"
                                : subprocesoActual.estado === "pausado"
                                  ? "destructive"
                                  : "outline"
                          }
                        >
                          {subprocesoActual.estado}
                        </Badge>
                        <div className="flex space-x-1">
                          {subprocesoActual.estado === "pendiente" && (
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => iniciarSubproceso(proceso.id, subprocesoActual.id)}
                            >
                              <Play className="h-3 w-3" />
                            </Button>
                          )}
                          {subprocesoActual.estado === "en-proceso" && (
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => finalizarSubproceso(proceso.id, subprocesoActual.id)}
                            >
                              <Square className="h-3 w-3" />
                            </Button>
                          )}
                        </div>
                      </div>

<div className="grid grid-cols-2 gap-2">
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Hora Inicio</Label>
                          <Input
                            type="time"
                            value={subprocesoActual.horaInicio || ""}
                            onChange={(e) =>
                              actualizarHorario(proceso.id, subprocesoActual.id, "inicio", e.target.value)
                            }
                            className="h-7 text-xs"
                          />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Hora Fin</Label>
                          <Input
                            type="time"
                            value={subprocesoActual.horaFin || ""}
                            onChange={(e) => actualizarHorario(proceso.id, subprocesoActual.id, "fin", e.target.value)}
                            className="h-7 text-xs"
                            disabled={subprocesoActual.estado === "pendiente"}
                          />
                        </div>
                      </div>

<div className="grid grid-cols-2 gap-2">
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Jabas Iniciales</Label>
                          <Input
                            type="number"
                            value={subprocesoActual.jabasIniciales || ""}
                            onChange={(e) =>
                              actualizarDatos(proceso.id, subprocesoActual.id, "jabasIniciales", Number(e.target.value))
                            }
                            className="h-7 text-xs"
                            min="0"
                          />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Jabas Final</Label>
                          <Input
                            type="number"
                            value={subprocesoActual.jabasFinal || ""}
                            onChange={(e) =>
                              actualizarDatos(proceso.id, subprocesoActual.id, "jabasFinal", Number(e.target.value))
                            }
                            className="h-7 text-xs"
                            min="0"
                          />
                        </div>
                      </div>

<div className="grid grid-cols-2 gap-2">
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Peso Inicial (kg)</Label>
                          <Input
                            type="number"
                            value={subprocesoActual.pesoInicial || ""}
                            onChange={(e) =>
                              actualizarDatos(proceso.id, subprocesoActual.id, "pesoInicial", Number(e.target.value))
                            }
                            className="h-7 text-xs"
                            min="0"
                            step="0.1"
                          />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs text-gray-500">Peso Final (kg)</Label>
                          <Input
                            type="number"
                            value={subprocesoActual.pesoFinal || ""}
                            onChange={(e) =>
                              actualizarDatos(proceso.id, subprocesoActual.id, "pesoFinal", Number(e.target.value))
                            }
                            className="h-7 text-xs"
                            min="0"
                            step="0.1"
                          />
                        </div>
                      </div>

<div className="flex space-x-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            setProcesoSeleccionado(proceso)
                            setSubprocesoEditando(subprocesoActual)
                            setPersonalSeleccionado(subprocesoActual.personalAsignado)
                            setModalPersonalAbierto(true)
                          }}
                        >
                          <Users className="h-3 w-3 mr-1" />
                          Personal ({subprocesoActual.personalAsignado.length})
                        </Button>

{(subprocesoActual.nombre === "perfilado" || subprocesoActual.nombre === "empaque") && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                              setProcesoSeleccionado(proceso)
                              setSubprocesoEditando(subprocesoActual)
                              setModalMatrizAbierto(true)
                            }}
                          >
                            <Calculator className="h-3 w-3 mr-1" />
                            Matriz
                          </Button>
                        )}
                      </div>

{/* Información adicional del subproceso */}
                      <div className="text-xs text-gray-600 space-y-1">
                        <div>Horas trabajadas: {subprocesoActual.totalHorasTrabajadas.toFixed(1)}h</div>
                        <div>Costo: S/ {subprocesoActual.costoTotal.toFixed(2)}</div>
                      </div>
                    </div>
                  )}
                </div>

{/* Botón para agregar nuevo subproceso */}
                <Button
                  size="sm"
                  variant="outline"
                  className="w-full bg-transparent"
                  onClick={() => {
                    setProcesoSeleccionado(proceso)
                    setModalNuevoSubprocesoAbierto(true)
                  }}
                >
                  <Plus className="h-3 w-3 mr-1" />
                  Agregar Subproceso
                </Button>

{/* Progreso de subprocesos */}
                <div className="space-y-1">
                  <Label className="text-sm font-medium">Progreso ({proceso.subprocesos.length} subprocesos)</Label>
                  <div className="flex space-x-1">
                    {subprocesosDisponibles.map((subproceso) => {
                      const subprocesoData = proceso.subprocesos.find((s) => s.nombre === subproceso.value)
                      const estado = subprocesoData?.estado || "pendiente"

return (
                        <div
                          key={subproceso.value}
                          className={`flex-1 h-2 rounded-full ${
                            estado === "completado"
                              ? "bg-green-500"
                              : estado === "en-proceso"
                                ? "bg-blue-500"
                                : estado === "pausado"
                                  ? "bg-red-500"
                                  : "bg-gray-200"
                          }`}
                          title={`${subproceso.label}: ${estado}`}
                        />
                      )
                    })}
                  </div>
                </div>

{/* Costo total */}
                <div className="pt-2 border-t">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-gray-600">Costo Total:</span>
                    <span className="font-semibold">
                      S/ {proceso.subprocesos.reduce((acc, s) => acc + s.costoTotal, 0).toFixed(2)}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{/* Modal de Detalle del Proceso */}
      <Dialog open={modalDetalleAbierto} onOpenChange={setModalDetalleAbierto}>
        <DialogContent className="max-w-6xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Detalle del Proceso - {procesoSeleccionado?.codigoLote}</DialogTitle>
          </DialogHeader>

{procesoSeleccionado && (
            <div className="space-y-6">
              {/* Información general */}
              <div className="grid md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Información General</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label className="text-sm text-gray-600">Código Lote</Label>
                        <p className="font-semibold">{procesoSeleccionado.codigoLote}</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Producto</Label>
                        <p className="font-semibold capitalize">{procesoSeleccionado.producto}</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Fecha Creación</Label>
                        <p className="font-semibold">{procesoSeleccionado.fechaCreacion}</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Estado</Label>
                        <Badge variant={procesoSeleccionado.estado === "activo" ? "default" : "secondary"}>
                          {procesoSeleccionado.estado}
                        </Badge>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center">
                      <Scale className="h-5 w-5 mr-2" />
                      Pesado General
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label className="text-sm text-gray-600">Peso Inicial</Label>
                        <p className="font-semibold">{procesoSeleccionado.pesoInicialProceso || 0} kg</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Peso Final</Label>
                        <p className="font-semibold">{procesoSeleccionado.pesoFinalProceso || 0} kg</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Jabas Iniciales</Label>
                        <p className="font-semibold">{procesoSeleccionado.jabasInicialesProceso || 0}</p>
                      </div>
                      <div>
                        <Label className="text-sm text-gray-600">Jabas Final</Label>
                        <p className="font-semibold">{procesoSeleccionado.jabasFinalProceso || 0}</p>
                      </div>
                    </div>
                    <div className="pt-2 border-t">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Merma:</span>
                        <span className="font-semibold text-red-600">
                          {(
                            (procesoSeleccionado.pesoInicialProceso || 0) - (procesoSeleccionado.pesoFinalProceso || 0)
                          ).toFixed(1)}{" "}
                          kg
                        </span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Lista de subprocesos */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Subprocesos ({procesoSeleccionado.subprocesos.length})</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {procesoSeleccionado.subprocesos.map((subproceso, index) => (
                      <div key={subproceso.id} className="border rounded-lg p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-2">
                            <span className="text-2xl">
                              {subprocesosDisponibles.find((s) => s.value === subproceso.nombre)?.icon}
                            </span>
                            <div>
                              <h4 className="font-semibold">
                                {index + 1}. {subprocesosDisponibles.find((s) => s.value === subproceso.nombre)?.label}
                              </h4>
                              <p className="text-sm text-gray-600">
                                {subprocesosDisponibles.find((s) => s.value === subproceso.nombre)?.descripcion}
                              </p>
                            </div>
                          </div>
                          <Badge
                            variant={
                              subproceso.estado === "completado"
                                ? "default"
                                : subproceso.estado === "en-proceso"
                                  ? "secondary"
                                  : subproceso.estado === "pausado"
                                    ? "destructive"
                                    : "outline"
                            }
                          >
                            {subproceso.estado}
                          </Badge>
                        </div>

<div className="grid md:grid-cols-4 gap-4">
                          <div>
                            <Label className="text-xs text-gray-500">Horario</Label>
                            <p className="text-sm font-medium">
                              {subproceso.horaInicio || "No iniciado"} - {subproceso.horaFin || "En proceso"}
                            </p>
                            <p className="text-xs text-gray-600">{subproceso.totalHorasTrabajadas.toFixed(1)} horas</p>
                          </div>
                          <div>
                            <Label className="text-xs text-gray-500">Jabas</Label>
                            <p className="text-sm font-medium">
                              {subproceso.jabasIniciales} → {subproceso.jabasFinal || "En proceso"}
                            </p>
                          </div>
                          <div>
                            <Label className="text-xs text-gray-500">Peso (kg)</Label>
                            <p className="text-sm font-medium">
                              {subproceso.pesoInicial || 0} → {subproceso.pesoFinal || "En proceso"}
                            </p>
                          </div>
                          <div>
                            <Label className="text-xs text-gray-500">Personal</Label>
                            <p className="text-sm font-medium">{subproceso.personalAsignado.length} operarios</p>
                            <p className="text-xs text-gray-600">S/ {subproceso.costoTotal.toFixed(2)}</p>
                          </div>
                        </div>

{subproceso.personalAsignado.length > 0 && (
                          <div className="mt-3 pt-3 border-t">
                            <Label className="text-xs text-gray-500">Personal Asignado</Label>
                            <div className="flex flex-wrap gap-1 mt-1">
                              {subproceso.personalAsignado.map((trabajadorId) => {
                                const trabajador = trabajadores.find((t) => t.id === trabajadorId)
                                return trabajador ? (
                                  <Badge key={trabajadorId} variant="outline" className="text-xs">
                                    {trabajador.genero === "hombre" ? "👨" : "👩"} {trabajador.nombre}{" "}
                                    {trabajador.apellidos}
                                  </Badge>
                                ) : null
                              })}
                            </div>
                          </div>
                        )}

{subproceso.observaciones && (
                          <div className="mt-3 pt-3 border-t">
                            <Label className="text-xs text-gray-500">Observaciones</Label>
                            <p className="text-sm">{subproceso.observaciones}</p>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Resumen de costos */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Resumen de Costos</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {procesoSeleccionado.subprocesos.map((subproceso, index) => (
                      <div key={subproceso.id} className="flex justify-between items-center">
                        <span className="text-sm">
                          {index + 1}. {subprocesosDisponibles.find((s) => s.value === subproceso.nombre)?.label}
                        </span>
                        <span className="font-medium">S/ {subproceso.costoTotal.toFixed(2)}</span>
                      </div>
                    ))}
                    <div className="pt-2 border-t flex justify-between items-center font-semibold">
                      <span>TOTAL</span>
                      <span>
                        S/ {procesoSeleccionado.subprocesos.reduce((acc, s) => acc + s.costoTotal, 0).toFixed(2)}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

<div className="flex justify-end pt-4">
            <Button onClick={() => setModalDetalleAbierto(false)}>Cerrar</Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal para Agregar Nuevo Subproceso */}
      <Dialog open={modalNuevoSubprocesoAbierto} onOpenChange={setModalNuevoSubprocesoAbierto}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Agregar Nuevo Subproceso</DialogTitle>
          </DialogHeader>

<div className="space-y-4">
            <div>
              <Label>Tipo de Subproceso *</Label>
              <Select
                value={nuevoSubproceso.tipo}
                onValueChange={(value) => setNuevoSubproceso((prev) => ({ ...prev, tipo: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar subproceso" />
                </SelectTrigger>
                <SelectContent>
                  {subprocesosDisponibles.map((subproceso) => (
                    <SelectItem key={subproceso.value} value={subproceso.value}>
                      {subproceso.icon} {subproceso.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Jabas Iniciales *</Label>
                <Input
                  type="number"
                  value={nuevoSubproceso.jabasIniciales}
                  onChange={(e) => setNuevoSubproceso((prev) => ({ ...prev, jabasIniciales: Number(e.target.value) }))}
                  min="0"
                  placeholder="0"
                />
              </div>
              <div>
                <Label>Peso Inicial (kg)</Label>
                <Input
                  type="number"
                  value={nuevoSubproceso.pesoInicial}
                  onChange={(e) => setNuevoSubproceso((prev) => ({ ...prev, pesoInicial: Number(e.target.value) }))}
                  min="0"
                  step="0.1"
                  placeholder="0.0"
                />
              </div>
            </div>

<div>
              <Label>Observaciones</Label>
              <Textarea
                value={nuevoSubproceso.observaciones}
                onChange={(e) => setNuevoSubproceso((prev) => ({ ...prev, observaciones: e.target.value }))}
                placeholder="Observaciones del subproceso..."
                rows={3}
              />
            </div>
          </div>

<div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => setModalNuevoSubprocesoAbierto(false)}>
              Cancelar
            </Button>
            <Button
              onClick={agregarNuevoSubproceso}
              disabled={!nuevoSubproceso.tipo || nuevoSubproceso.jabasIniciales <= 0}
            >
              Agregar Subproceso
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal de Personal */}
      <Dialog open={modalPersonalAbierto} onOpenChange={setModalPersonalAbierto}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Asignar Personal - {subprocesoEditando?.nombre}</DialogTitle>
          </DialogHeader>

<div className="grid md:grid-cols-2 gap-6">
            {/* Hombres */}
            <div className="space-y-4">
              <div className="flex items-center space-x-2">
                <h3 className="font-semibold text-blue-600">👨 Hombres</h3>
                <Badge variant="outline">{trabajadoresHombres.length}</Badge>
              </div>

<div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Buscar hombres..."
                  value={busquedaHombres}
                  onChange={(e) => setBusquedaHombres(e.target.value)}
                  className="pl-10"
                />
              </div>

<div className="border rounded-lg max-h-60 overflow-y-auto">
                {trabajadoresHombres.map((trabajador) => (
                  <div key={trabajador.id} className="flex items-center space-x-3 p-3 border-b last:border-b-0">
                    <Checkbox
                      checked={personalSeleccionado.includes(trabajador.id)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          setPersonalSeleccionado((prev) => [...prev, trabajador.id])
                        } else {
                          setPersonalSeleccionado((prev) => prev.filter((id) => id !== trabajador.id))
                        }
                      }}
                    />
                    <div className="flex-1">
                      <p className="font-medium">
                        {trabajador.nombre} {trabajador.apellidos}
                      </p>
                      <p className="text-sm text-gray-500">DNI: {trabajador.documento}</p>
                    </div>
                    <div className="text-xs text-gray-500">S/ 7.5/h | S/ 60/día</div>
                  </div>
                ))}
              </div>
            </div>

{/* Mujeres */}
            <div className="space-y-4">
              <div className="flex items-center space-x-2">
                <h3 className="font-semibold text-pink-600">👩 Mujeres</h3>
                <Badge variant="outline">{trabajadoresMujeres.length}</Badge>
              </div>

<div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Buscar mujeres..."
                  value={busquedaMujeres}
                  onChange={(e) => setBusquedaMujeres(e.target.value)}
                  className="pl-10"
                />
              </div>

<div className="border rounded-lg max-h-60 overflow-y-auto">
                {trabajadoresMujeres.map((trabajador) => (
                  <div key={trabajador.id} className="flex items-center space-x-3 p-3 border-b last:border-b-0">
                    <Checkbox
                      checked={personalSeleccionado.includes(trabajador.id)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          setPersonalSeleccionado((prev) => [...prev, trabajador.id])
                        } else {
                          setPersonalSeleccionado((prev) => prev.filter((id) => id !== trabajador.id))
                        }
                      }}
                    />
                    <div className="flex-1">
                      <p className="font-medium">
                        {trabajador.nombre} {trabajador.apellidos}
                      </p>
                      <p className="text-sm text-gray-500">DNI: {trabajador.documento}</p>
                    </div>
                    <div className="text-xs text-gray-500">S/ 6.25/h | S/ 50/día</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

{/* Personal seleccionado */}
          {personalSeleccionado.length > 0 && (
            <div className="mt-6 p-4 bg-green-50 rounded-lg">
              <h4 className="font-semibold text-green-800 mb-2">
                Personal Seleccionado ({personalSeleccionado.length})
              </h4>
              <div className="flex flex-wrap gap-2">
                {personalSeleccionado.map((id) => {
                  const trabajador = trabajadores.find((t) => t.id === id)
                  return trabajador ? (
                    <Badge key={id} variant="secondary" className="bg-green-100 text-green-800">
                      {trabajador.genero === "hombre" ? "👨" : "👩"} {trabajador.nombre} {trabajador.apellidos}
                    </Badge>
                  ) : null
                })}
              </div>
            </div>
          )}

<div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => setModalPersonalAbierto(false)}>
              Cancelar
            </Button>
            <Button onClick={guardarPersonal}>Guardar Personal</Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal de Matriz de Jabas */}
      <Dialog open={modalMatrizAbierto} onOpenChange={setModalMatrizAbierto}>
        <DialogContent className="max-w-6xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Matriz de Jabas por Trabajador - {subprocesoEditando?.nombre}</DialogTitle>
          </DialogHeader>

{subprocesoEditando && (
            <div className="space-y-6">
              {/* Tabla de matriz */}
              <div className="overflow-x-auto">
                <table className="w-full border-collapse border border-gray-300">
                  <thead>
                    <tr className="bg-gray-50">
                      <th className="border border-gray-300 p-3 text-left">Trabajador</th>
                      {(subprocesoEditando.nombre === "empaque" ? categoriasEmpaque : categoriasPago).map(
                        (categoria) => (
                          <th key={categoria.value} className="border border-gray-300 p-3 text-center">
                            {categoria.label}
                            <br />
                            <span className="text-xs text-gray-500">S/ {categoria.precio}/jaba</span>
                          </th>
                        ),
                      )}
                      <th className="border border-gray-300 p-3 text-center bg-green-50">Total a Pagar</th>
                    </tr>
                  </thead>
                  <tbody>
                    {subprocesoEditando.personalAsignado.map((trabajadorId) => {
                      const trabajador = trabajadores.find((t) => t.id === trabajadorId)
                      if (!trabajador) return null

return (
                        <tr key={trabajadorId}>
                          <td className="border border-gray-300 p-3">
                            <div className="flex items-center space-x-2">
                              <span>{trabajador.genero === "hombre" ? "👨" : "👩"}</span>
                              <div>
                                <p className="font-medium">
                                  {trabajador.nombre} {trabajador.apellidos}
                                </p>
                                <p className="text-xs text-gray-500">{trabajador.documento}</p>
                              </div>
                            </div>
                          </td>
                          {(subprocesoEditando.nombre === "empaque" ? categoriasEmpaque : categoriasPago).map(
                            (categoria) => (
                              <td key={categoria.value} className="border border-gray-300 p-2">
                                <Input
                                  type="number"
                                  min="0"
                                  placeholder="0"
                                  value={matrizJabas[trabajadorId]?.[categoria.value] || ""}
                                  onChange={(e) =>
                                    actualizarMatrizJabas(
                                      trabajadorId,
                                      categoria.value,
                                      Number.parseInt(e.target.value) || 0,
                                    )
                                  }
                                  className="text-center"
                                />
                              </td>
                            ),
                          )}
                          <td className="border border-gray-300 p-3 text-center bg-green-50 font-semibold">
                            S/ {calcularPagoTrabajador(trabajadorId).toFixed(2)}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                  <tfoot>
                    <tr className="bg-gray-100 font-semibold">
                      <td className="border border-gray-300 p-3">TOTAL</td>
                      {(subprocesoEditando.nombre === "empaque" ? categoriasEmpaque : categoriasPago).map(
                        (categoria) => (
                          <td key={categoria.value} className="border border-gray-300 p-3 text-center">
                            {subprocesoEditando.personalAsignado.reduce(
                              (sum, trabajadorId) => sum + (matrizJabas[trabajadorId]?.[categoria.value] || 0),
                              0,
                            )}{" "}
                            jabas
                          </td>
                        ),
                      )}
                      <td className="border border-gray-300 p-3 text-center bg-green-100">
                        S/{" "}
                        {subprocesoEditando.personalAsignado
                          .reduce((sum, trabajadorId) => sum + calcularPagoTrabajador(trabajadorId), 0)
                          .toFixed(2)}
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>

{/* Resumen por categoría */}
              <div className="grid md:grid-cols-4 gap-4">
                {(subprocesoEditando.nombre === "empaque" ? categoriasEmpaque : categoriasPago).map((categoria) => {
                  const totalJabas = subprocesoEditando.personalAsignado.reduce(
                    (sum, trabajadorId) => sum + (matrizJabas[trabajadorId]?.[categoria.value] || 0),
                    0,
                  )
                  const totalPago = totalJabas * categoria.precio

return (
                    <Card key={categoria.value}>
                      <CardContent className="p-4">
                        <h4 className="font-semibold text-sm">{categoria.label}</h4>
                        <p className="text-2xl font-bold">{totalJabas}</p>
                        <p className="text-xs text-gray-500">jabas</p>
                        <p className="text-sm font-medium text-green-600">S/ {totalPago.toFixed(2)}</p>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>
            </div>
          )}

<div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => setModalMatrizAbierto(false)}>
              Cancelar
            </Button>
            <Button onClick={() => setModalMatrizAbierto(false)}>Guardar Matriz</Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/evaluacion-liquidacion/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function EvaluacionLiquidacionLoading() {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-96" />
        </div>
        <div className="flex gap-2">
          <Skeleton className="h-10 w-48" />
          <Skeleton className="h-10 w-32" />
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {[1, 2, 3].map((i) => (
          <Card key={i}>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-3 w-3/4" />
                <Skeleton className="h-3 w-1/2" />
              </div>
              <div className="space-y-2">
                {[1, 2, 3].map((j) => (
                  <div key={j} className="flex justify-between">
                    <Skeleton className="h-3 w-24" />
                    <Skeleton className="h-3 w-16" />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/evaluacion-liquidacion-service.ts" isMerged="true"
import { databases, DATABASE_ID, COLLECTIONS } from "@/lib/appwrite"
import { Query } from "appwrite"

export interface EvaluacionLiquidacionData {
  id?: string
  proveedorId: string
  loteIds: string[]
  fechaEvaluacion: string
  estado: "borrador" | "revision" | "aprobado" | "rechazado" | "liquidado"
  observaciones: string
  totalIngresosBrutos: number
  totalCostosProcesamiento: number
  porcentajeProductor: number
  montoProductor: number
  totalAdelantos: number
  saldoFinal: number
  aprobadoPor?: string
  fechaAprobacion?: string
  createdAt?: string
  updatedAt?: string
}

export interface LoteEvaluacion {
  id: string
  codigo: string
  modalidad: "carga_cerrada" | "proceso"
  pesoIngreso: number
  pesoFinal: number
  categorias: {
    primera: number
    segunda: number
    tercera: number
    descarte: number
  }
  precios: {
    primera: number
    segunda: number
    tercera: number
    descarte: number
  }
  costosProcesamiento: number
}

export class EvaluacionLiquidacionService {
  private static collectionId = COLLECTIONS.EVALUACIONES_LIQUIDACION

static async crear(data: EvaluacionLiquidacionData) {
    try {
      const documento = {
        ...data,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      }

const response = await databases.createDocument(DATABASE_ID, this.collectionId, "unique()", documento)

return response
    } catch (error) {
      console.error("Error al crear evaluación de liquidación:", error)
      throw error
    }
  }

static async obtenerTodas() {
    try {
      const response = await databases.listDocuments(DATABASE_ID, this.collectionId, [
        Query.orderDesc("createdAt"),
        Query.limit(100),
      ])

return response.documents
    } catch (error) {
      console.error("Error al obtener evaluaciones:", error)
      throw error
    }
  }

static async obtenerPorId(id: string) {
    try {
      const response = await databases.getDocument(DATABASE_ID, this.collectionId, id)

return response
    } catch (error) {
      console.error("Error al obtener evaluación:", error)
      throw error
    }
  }

static async obtenerPorProveedor(proveedorId: string) {
    try {
      const response = await databases.listDocuments(DATABASE_ID, this.collectionId, [
        Query.equal("proveedorId", proveedorId),
        Query.orderDesc("createdAt"),
      ])

return response.documents
    } catch (error) {
      console.error("Error al obtener evaluaciones por proveedor:", error)
      throw error
    }
  }

static async actualizar(id: string, data: Partial<EvaluacionLiquidacionData>) {
    try {
      const documento = {
        ...data,
        updatedAt: new Date().toISOString(),
      }

const response = await databases.updateDocument(DATABASE_ID, this.collectionId, id, documento)

return response
    } catch (error) {
      console.error("Error al actualizar evaluación:", error)
      throw error
    }
  }

static async cambiarEstado(id: string, nuevoEstado: EvaluacionLiquidacionData["estado"], aprobadoPor?: string) {
    try {
      const data: Partial<EvaluacionLiquidacionData> = {
        estado: nuevoEstado,
        updatedAt: new Date().toISOString(),
      }

if (nuevoEstado === "aprobado" && aprobadoPor) {
        data.aprobadoPor = aprobadoPor
        data.fechaAprobacion = new Date().toISOString().split("T")[0]
      }

const response = await databases.updateDocument(DATABASE_ID, this.collectionId, id, data)

return response
    } catch (error) {
      console.error("Error al cambiar estado de evaluación:", error)
      throw error
    }
  }

static async eliminar(id: string) {
    try {
      await databases.deleteDocument(DATABASE_ID, this.collectionId, id)

return true
    } catch (error) {
      console.error("Error al eliminar evaluación:", error)
      throw error
    }
  }

static async obtenerEstadisticas() {
    try {
      const [todas, borradores, revision, aprobadas, liquidadas] = await Promise.all([
        databases.listDocuments(DATABASE_ID, this.collectionId, [Query.limit(1000)]),
        databases.listDocuments(DATABASE_ID, this.collectionId, [Query.equal("estado", "borrador")]),
        databases.listDocuments(DATABASE_ID, this.collectionId, [Query.equal("estado", "revision")]),
        databases.listDocuments(DATABASE_ID, this.collectionId, [Query.equal("estado", "aprobado")]),
        databases.listDocuments(DATABASE_ID, this.collectionId, [Query.equal("estado", "liquidado")]),
      ])

const totalMonto = todas.documents.reduce((sum, doc) => sum + (doc.saldoFinal || 0), 0)

return {
        total: todas.total,
        borradores: borradores.total,
        revision: revision.total,
        aprobadas: aprobadas.total,
        liquidadas: liquidadas.total,
        montoTotal: totalMonto,
      }
    } catch (error) {
      console.error("Error al obtener estadísticas:", error)
      throw error
    }
  }

static calcularTotales(lotes: LoteEvaluacion[], porcentajeProductor = 65) {
    const totalIngresosBrutos = lotes.reduce((sum, lote) => {
      return (
        sum +
        (lote.categorias.primera * lote.precios.primera +
          lote.categorias.segunda * lote.precios.segunda +
          lote.categorias.tercera * lote.precios.tercera +
          lote.categorias.descarte * lote.precios.descarte)
      )
    }, 0)

const totalCostosProcesamiento = lotes.reduce((sum, lote) => sum + lote.costosProcesamiento, 0)
    const ingresoNeto = totalIngresosBrutos - totalCostosProcesamiento
    const montoProductor = ingresoNeto * (porcentajeProductor / 100)

return {
      totalIngresosBrutos,
      totalCostosProcesamiento,
      ingresoNeto,
      montoProductor,
    }
  }
}
[V0_FILE]typescript:file="lib/hooks/use-evaluacion-liquidacion.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  EvaluacionLiquidacionService,
  type EvaluacionLiquidacionData,
} from "@/lib/services/evaluacion-liquidacion-service"

export function useEvaluacionLiquidacion() {
  const [evaluaciones, setEvaluaciones] = useState<EvaluacionLiquidacionData[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const cargarEvaluaciones = async () => {
    try {
      setLoading(true)
      const data = await EvaluacionLiquidacionService.obtenerTodas()
      setEvaluaciones(data as EvaluacionLiquidacionData[])
      setError(null)
    } catch (err) {
      setError("Error al cargar evaluaciones")
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

const crearEvaluacion = async (data: EvaluacionLiquidacionData) => {
    try {
      const nuevaEvaluacion = await EvaluacionLiquidacionService.crear(data)
      setEvaluaciones((prev) => [nuevaEvaluacion as EvaluacionLiquidacionData, ...prev])
      return nuevaEvaluacion
    } catch (err) {
      setError("Error al crear evaluación")
      throw err
    }
  }

const actualizarEvaluacion = async (id: string, data: Partial<EvaluacionLiquidacionData>) => {
    try {
      const evaluacionActualizada = await EvaluacionLiquidacionService.actualizar(id, data)
      setEvaluaciones((prev) =>
        prev.map((evaluacion) => (evaluacion.id === id ? { ...evaluacion, ...data } : evaluacion)),
      )
      return evaluacionActualizada
    } catch (err) {
      setError("Error al actualizar evaluación")
      throw err
    }
  }

const cambiarEstado = async (id: string, nuevoEstado: EvaluacionLiquidacionData["estado"], aprobadoPor?: string) => {
    try {
      await EvaluacionLiquidacionService.cambiarEstado(id, nuevoEstado, aprobadoPor)
      setEvaluaciones((prev) =>
        prev.map((evaluacion) =>
          evaluacion.id === id
            ? {
                ...evaluacion,
                estado: nuevoEstado,
                ...(nuevoEstado === "aprobado" &&
                  aprobadoPor && {
                    aprobadoPor,
                    fechaAprobacion: new Date().toISOString().split("T")[0],
                  }),
              }
            : evaluacion,
        ),
      )
    } catch (err) {
      setError("Error al cambiar estado")
      throw err
    }
  }

const eliminarEvaluacion = async (id: string) => {
    try {
      await EvaluacionLiquidacionService.eliminar(id)
      setEvaluaciones((prev) => prev.filter((evaluacion) => evaluacion.id !== id))
    } catch (err) {
      setError("Error al eliminar evaluación")
      throw err
    }
  }

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

return {
    evaluaciones,
    loading,
    error,
    cargarEvaluaciones,
    crearEvaluacion,
    actualizarEvaluacion,
    cambiarEstado,
    eliminarEvaluacion,
  }
}

export function useEvaluacionEstadisticas() {
  const [estadisticas, setEstadisticas] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const cargarEstadisticas = async () => {
    try {
      setLoading(true)
      const data = await EvaluacionLiquidacionService.obtenerEstadisticas()
      setEstadisticas(data)
      setError(null)
    } catch (err) {
      setError("Error al cargar estadísticas")
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

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

return {
    estadisticas,
    loading,
    error,
    cargarEstadisticas,
  }
}
[V0_FILE]typescriptreact:file="components/liquidaciones-sayariq.tsx" isMerged="true"
"use client"

import { useState, useRef } 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 { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import {
  FileText,
  Printer,
  Download,
  Eye,
  Plus,
  Edit,
  CheckCircle,
  Clock,
  ChevronDown,
  Check,
  Receipt,
} from "lucide-react"
import { cn } from "@/lib/utils"

interface Productor {
  id: string
  nombre: string
  documento: string
  telefono: string
  direccion: string
  banco: string
  numeroCuenta: string
  cargasVendidas: number
  montoTotal: number
  adelantos: number
  saldoPendiente: number
}

interface Liquidacion {
  id: string
  numero: string
  productorId: string
  productorNombre: string
  fecha: string
  fechaVencimiento: string
  montoTotal: number
  adelantos: number
  montoNeto: number
  estado: "Borrador" | "Emitida" | "Pagada"
  observaciones: string
  metodoPago: string
  numeroComprobante?: string
  fechaPago?: string
}

interface DetalleLiquidacion {
  id: string
  producto: string
  cantidad: number
  precioUnitario: number
  calidad: string
  descuentos: number
  subtotal: number
}

const mockProductores: Productor[] = [
  {
    id: "1",
    nombre: "Juan Carlos Mendoza",
    documento: "12345678",
    telefono: "987654321",
    direccion: "Av. Los Productores 123, Lima",
    banco: "Banco de Crédito del Perú",
    numeroCuenta: "194-123456789-0-12",
    cargasVendidas: 15,
    montoTotal: 45000,
    adelantos: 12000,
    saldoPendiente: 33000,
  },
  {
    id: "2",
    nombre: "María Elena Quispe",
    documento: "87654321",
    telefono: "912345678",
    direccion: "Jr. San Martín 456, Huancayo",
    banco: "Banco Continental",
    numeroCuenta: "011-987654321-0-45",
    cargasVendidas: 8,
    montoTotal: 24000,
    adelantos: 8000,
    saldoPendiente: 16000,
  },
  {
    id: "3",
    nombre: "Carlos Alberto Rojas",
    documento: "11223344",
    telefono: "998877665",
    direccion: "Calle Los Andes 789, Cusco",
    banco: "Interbank",
    numeroCuenta: "898-445566778-0-89",
    cargasVendidas: 25,
    montoTotal: 75000,
    adelantos: 20000,
    saldoPendiente: 55000,
  },
]

const mockLiquidaciones: Liquidacion[] = [
  {
    id: "1",
    numero: "LIQ-2024-001",
    productorId: "1",
    productorNombre: "Juan Carlos Mendoza",
    fecha: "2024-01-20",
    fechaVencimiento: "2024-01-27",
    montoTotal: 45000,
    adelantos: 12000,
    montoNeto: 33000,
    estado: "Emitida",
    observaciones: "Liquidación correspondiente a cargas de enero",
    metodoPago: "Transferencia Bancaria",
  },
  {
    id: "2",
    numero: "LIQ-2024-002",
    productorId: "2",
    productorNombre: "María Elena Quispe",
    fecha: "2024-01-21",
    fechaVencimiento: "2024-01-28",
    montoTotal: 24000,
    adelantos: 8000,
    montoNeto: 16000,
    estado: "Pagada",
    observaciones: "Pago realizado por transferencia",
    metodoPago: "Transferencia Bancaria",
    numeroComprobante: "TRF-001234",
    fechaPago: "2024-01-22",
  },
]

const mockDetalleLiquidacion: DetalleLiquidacion[] = [
  {
    id: "1",
    producto: "Café Pergamino Premium",
    cantidad: 800,
    precioUnitario: 18.5,
    calidad: "Premium",
    descuentos: 500,
    subtotal: 14300,
  },
  {
    id: "2",
    producto: "Café Pergamino Estándar",
    cantidad: 1200,
    precioUnitario: 16.0,
    calidad: "Estándar",
    descuentos: 800,
    subtotal: 18400,
  },
]

export function LiquidacionesSayariq() {
  const [selectedProductor, setSelectedProductor] = useState<Productor | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [open, setOpen] = useState(false)
  const [liquidaciones, setLiquidaciones] = useState<Liquidacion[]>(mockLiquidaciones)
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [showDetailDialog, setShowDetailDialog] = useState(false)
  const [selectedLiquidacion, setSelectedLiquidacion] = useState<Liquidacion | null>(null)
  const printRef = useRef<HTMLDivElement>(null)

const filteredProductores = mockProductores.filter(
    (productor) =>
      productor.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
      productor.documento.includes(searchTerm) ||
      productor.telefono.includes(searchTerm),
  )

const handleCreateLiquidacion = () => {
    if (!selectedProductor) return

const newLiquidacion: Liquidacion = {
      id: Date.now().toString(),
      numero: `LIQ-2024-${String(liquidaciones.length + 1).padStart(3, "0")}`,
      productorId: selectedProductor.id,
      productorNombre: selectedProductor.nombre,
      fecha: new Date().toISOString().split("T")[0],
      fechaVencimiento: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
      montoTotal: selectedProductor.montoTotal,
      adelantos: selectedProductor.adelantos,
      montoNeto: selectedProductor.saldoPendiente,
      estado: "Borrador",
      observaciones: "",
      metodoPago: "Transferencia Bancaria",
    }

setLiquidaciones([...liquidaciones, newLiquidacion])
    setShowCreateDialog(false)
    setSelectedProductor(null)
  }

const handlePrint = () => {
    if (printRef.current) {
      const printContent = printRef.current.innerHTML
      const originalContent = document.body.innerHTML
      document.body.innerHTML = printContent
      window.print()
      document.body.innerHTML = originalContent
      window.location.reload()
    }
  }

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "Borrador":
        return (
          <Badge variant="secondary">
            <Clock className="w-3 h-3 mr-1" />
            Borrador
          </Badge>
        )
      case "Emitida":
        return (
          <Badge variant="default">
            <FileText className="w-3 h-3 mr-1" />
            Emitida
          </Badge>
        )
      case "Pagada":
        return (
          <Badge variant="destructive">
            <CheckCircle className="w-3 h-3 mr-1" />
            Pagada
          </Badge>
        )
      default:
        return <Badge variant="outline">{estado}</Badge>
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Liquidaciones Sayariq</h1>
          <p className="text-muted-foreground">Gestión profesional de liquidaciones y comprobantes de pago</p>
        </div>
        <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nueva Liquidación
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Crear Nueva Liquidación</DialogTitle>
              <DialogDescription>Selecciona un productor para crear su liquidación</DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Buscar Productor</Label>
                <Popover open={open} onOpenChange={setOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={open}
                      className="w-full justify-between bg-transparent"
                    >
                      {selectedProductor ? selectedProductor.nombre : "Seleccionar productor..."}
                      <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput
                        placeholder="Buscar por nombre, documento o teléfono..."
                        value={searchTerm}
                        onValueChange={setSearchTerm}
                      />
                      <CommandEmpty>No se encontraron productores.</CommandEmpty>
                      <CommandList>
                        <CommandGroup>
                          {filteredProductores.map((productor) => (
                            <CommandItem
                              key={productor.id}
                              value={productor.id}
                              onSelect={() => {
                                setSelectedProductor(productor)
                                setOpen(false)
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  selectedProductor?.id === productor.id ? "opacity-100" : "opacity-0",
                                )}
                              />
                              <div className="flex-1">
                                <div className="font-medium">{productor.nombre}</div>
                                <div className="text-sm text-muted-foreground">
                                  {productor.documento} • Saldo: S/ {productor.saldoPendiente.toLocaleString()}
                                </div>
                              </div>
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

{selectedProductor && (
                <div className="space-y-3 p-4 bg-muted/50 rounded-lg">
                  <h4 className="font-semibold">Resumen de Liquidación</h4>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <div className="text-muted-foreground">Monto Total</div>
                      <div className="font-semibold">S/ {selectedProductor.montoTotal.toLocaleString()}</div>
                    </div>
                    <div>
                      <div className="text-muted-foreground">Adelantos</div>
                      <div className="font-semibold text-orange-600">
                        S/ {selectedProductor.adelantos.toLocaleString()}
                      </div>
                    </div>
                    <div>
                      <div className="text-muted-foreground">Monto Neto</div>
                      <div className="font-semibold text-green-600">
                        S/ {selectedProductor.saldoPendiente.toLocaleString()}
                      </div>
                    </div>
                    <div>
                      <div className="text-muted-foreground">Cargas</div>
                      <div className="font-semibold">{selectedProductor.cargasVendidas}</div>
                    </div>
                  </div>
                </div>
              )}

<div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
                  Cancelar
                </Button>
                <Button onClick={handleCreateLiquidacion} disabled={!selectedProductor}>
                  Crear Liquidación
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

{/* Lista de Liquidaciones */}
      <Card>
        <CardHeader>
          <CardTitle>Liquidaciones Recientes</CardTitle>
          <CardDescription>Gestiona todas las liquidaciones emitidas</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {liquidaciones.map((liquidacion) => (
              <div key={liquidacion.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="font-semibold">{liquidacion.numero}</div>
                    {getEstadoBadge(liquidacion.estado)}
                  </div>
                  <div className="text-sm text-muted-foreground mb-1">
                    <strong>{liquidacion.productorNombre}</strong>
                  </div>
                  <div className="text-sm text-muted-foreground">
                    Fecha: {liquidacion.fecha} • Vence: {liquidacion.fechaVencimiento}
                  </div>
                  {liquidacion.fechaPago && (
                    <div className="text-sm text-green-600">
                      Pagado: {liquidacion.fechaPago} • {liquidacion.numeroComprobante}
                    </div>
                  )}
                </div>
                <div className="text-right mr-4">
                  <div className="font-semibold text-lg">S/ {liquidacion.montoNeto.toLocaleString()}</div>
                  <div className="text-sm text-muted-foreground">Monto Neto</div>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setSelectedLiquidacion(liquidacion)
                      setShowDetailDialog(true)
                    }}
                  >
                    <Eye className="h-4 w-4" />
                  </Button>
                  <Button variant="outline" size="sm">
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button variant="outline" size="sm">
                    <Printer className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Dialog de Detalle */}
      <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Detalle de Liquidación</DialogTitle>
            <DialogDescription>
              {selectedLiquidacion?.numero} - {selectedLiquidacion?.productorNombre}
            </DialogDescription>
          </DialogHeader>

{selectedLiquidacion && (
            <div className="space-y-6">
              {/* Comprobante de Liquidación */}
              <div ref={printRef} className="bg-white p-8 border rounded-lg">
                <div className="text-center mb-8">
                  <div className="flex items-center justify-center gap-3 mb-4">
                    <div className="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
                      <Receipt className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h2 className="text-2xl font-bold text-primary">SAYARIQ</h2>
                      <p className="text-sm text-muted-foreground">Agronegocios</p>
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold">COMPROBANTE DE LIQUIDACIÓN</h3>
                  <p className="text-muted-foreground">{selectedLiquidacion.numero}</p>
                </div>

<div className="grid grid-cols-2 gap-8 mb-8">
                  <div>
                    <h4 className="font-semibold mb-3">DATOS DEL PRODUCTOR</h4>
                    <div className="space-y-2 text-sm">
                      <div>
                        <strong>Nombre:</strong> {selectedLiquidacion.productorNombre}
                      </div>
                      <div>
                        <strong>Documento:</strong>{" "}
                        {mockProductores.find((p) => p.id === selectedLiquidacion.productorId)?.documento}
                      </div>
                      <div>
                        <strong>Teléfono:</strong>{" "}
                        {mockProductores.find((p) => p.id === selectedLiquidacion.productorId)?.telefono}
                      </div>
                      <div>
                        <strong>Dirección:</strong>{" "}
                        {mockProductores.find((p) => p.id === selectedLiquidacion.productorId)?.direccion}
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-3">DATOS DE LIQUIDACIÓN</h4>
                    <div className="space-y-2 text-sm">
                      <div>
                        <strong>Fecha:</strong> {selectedLiquidacion.fecha}
                      </div>
                      <div>
                        <strong>Vencimiento:</strong> {selectedLiquidacion.fechaVencimiento}
                      </div>
                      <div>
                        <strong>Estado:</strong> {selectedLiquidacion.estado}
                      </div>
                      <div>
                        <strong>Método de Pago:</strong> {selectedLiquidacion.metodoPago}
                      </div>
                    </div>
                  </div>
                </div>

<div className="mb-8">
                  <h4 className="font-semibold mb-4">DETALLE DE PRODUCTOS</h4>
                  <div className="border rounded-lg overflow-hidden">
                    <table className="w-full">
                      <thead className="bg-muted">
                        <tr>
                          <th className="text-left p-3">Producto</th>
                          <th className="text-right p-3">Cantidad (kg)</th>
                          <th className="text-right p-3">Precio Unit.</th>
                          <th className="text-right p-3">Calidad</th>
                          <th className="text-right p-3">Descuentos</th>
                          <th className="text-right p-3">Subtotal</th>
                        </tr>
                      </thead>
                      <tbody>
                        {mockDetalleLiquidacion.map((detalle) => (
                          <tr key={detalle.id} className="border-t">
                            <td className="p-3">{detalle.producto}</td>
                            <td className="text-right p-3">{detalle.cantidad.toLocaleString()}</td>
                            <td className="text-right p-3">S/ {detalle.precioUnitario}</td>
                            <td className="text-right p-3">{detalle.calidad}</td>
                            <td className="text-right p-3">S/ {detalle.descuentos.toLocaleString()}</td>
                            <td className="text-right p-3 font-semibold">S/ {detalle.subtotal.toLocaleString()}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>

<div className="border-t pt-6">
                  <div className="flex justify-end">
                    <div className="w-80 space-y-2">
                      <div className="flex justify-between">
                        <span>Monto Total:</span>
                        <span className="font-semibold">S/ {selectedLiquidacion.montoTotal.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between text-orange-600">
                        <span>Adelantos:</span>
                        <span className="font-semibold">- S/ {selectedLiquidacion.adelantos.toLocaleString()}</span>
                      </div>
                      <Separator />
                      <div className="flex justify-between text-lg font-bold text-green-600">
                        <span>MONTO NETO A PAGAR:</span>
                        <span>S/ {selectedLiquidacion.montoNeto.toLocaleString()}</span>
                      </div>
                    </div>
                  </div>
                </div>

{selectedLiquidacion.observaciones && (
                  <div className="mt-6 p-4 bg-muted/50 rounded-lg">
                    <h4 className="font-semibold mb-2">Observaciones:</h4>
                    <p className="text-sm">{selectedLiquidacion.observaciones}</p>
                  </div>
                )}

<div className="mt-8 text-center text-xs text-muted-foreground">
                  <p>Este documento es un comprobante de liquidación emitido por Sayariq Agronegocios</p>
                  <p>Fecha de emisión: {new Date().toLocaleDateString()}</p>
                </div>
              </div>

<div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setShowDetailDialog(false)}>
                  Cerrar
                </Button>
                <Button variant="outline" onClick={handlePrint}>
                  <Printer className="mr-2 h-4 w-4" />
                  Imprimir
                </Button>
                <Button>
                  <Download className="mr-2 h-4 w-4" />
                  Descargar PDF
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/liquidaciones-sayariq/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-96" />
        </div>
        <Skeleton className="h-10 w-40" />
      </div>

<Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-4 w-72" />
        </CardHeader>
        <CardContent className="space-y-4">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
              <div className="flex-1 space-y-2">
                <div className="flex items-center gap-3">
                  <Skeleton className="h-5 w-32" />
                  <Skeleton className="h-5 w-16" />
                </div>
                <Skeleton className="h-4 w-48" />
                <Skeleton className="h-4 w-64" />
              </div>
              <div className="text-right mr-4 space-y-1">
                <Skeleton className="h-6 w-24" />
                <Skeleton className="h-4 w-16" />
              </div>
              <div className="flex gap-2">
                <Skeleton className="h-8 w-8" />
                <Skeleton className="h-8 w-8" />
                <Skeleton className="h-8 w-8" />
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/factura-liquidacion.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Receipt } from "lucide-react"

interface FacturaLiquidacionProps {
  liquidacion: {
    numero: string
    fecha: string
    productor: {
      nombre: string
      documento: string
      direccion: string
      telefono: string
    }
    detalles: Array<{
      producto: string
      cantidad: number
      precioUnitario: number
      subtotal: number
    }>
    montoTotal: number
    adelantos: number
    montoNeto: number
    observaciones?: string
  }
}

export const FacturaLiquidacion = forwardRef<HTMLDivElement, FacturaLiquidacionProps>(({ liquidacion }, ref) => {
  return (
    <div ref={ref} className="bg-white p-8 max-w-4xl mx-auto">
      {/* Header */}
      <div className="text-center mb-8">
        <div className="flex items-center justify-center gap-3 mb-4">
          <div className="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
            <Receipt className="h-6 w-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-primary">SAYARIQ</h1>
            <p className="text-sm text-muted-foreground">Agronegocios</p>
          </div>
        </div>
        <h2 className="text-xl font-semibold mb-2">COMPROBANTE DE LIQUIDACIÓN</h2>
        <div className="flex justify-center gap-4 text-sm">
          <span>
            <strong>N°:</strong> {liquidacion.numero}
          </span>
          <span>
            <strong>Fecha:</strong> {liquidacion.fecha}
          </span>
        </div>
      </div>

{/* Información del Productor */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">Datos del Productor</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p>
                <strong>Nombre:</strong> {liquidacion.productor.nombre}
              </p>
              <p>
                <strong>Documento:</strong> {liquidacion.productor.documento}
              </p>
            </div>
            <div>
              <p>
                <strong>Teléfono:</strong> {liquidacion.productor.telefono}
              </p>
              <p>
                <strong>Dirección:</strong> {liquidacion.productor.direccion}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Detalle de Productos */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">Detalle de Productos</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-2">Producto</th>
                  <th className="text-right py-2">Cantidad (kg)</th>
                  <th className="text-right py-2">Precio Unit. (S/)</th>
                  <th className="text-right py-2">Subtotal (S/)</th>
                </tr>
              </thead>
              <tbody>
                {liquidacion.detalles.map((detalle, index) => (
                  <tr key={index} className="border-b">
                    <td className="py-2">{detalle.producto}</td>
                    <td className="text-right py-2">{detalle.cantidad.toLocaleString()}</td>
                    <td className="text-right py-2">{detalle.precioUnitario.toFixed(2)}</td>
                    <td className="text-right py-2">{detalle.subtotal.toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Resumen de Montos */}
      <div className="flex justify-end mb-6">
        <div className="w-80">
          <div className="space-y-2 p-4 border rounded-lg">
            <div className="flex justify-between">
              <span>Monto Total:</span>
              <span className="font-semibold">S/ {liquidacion.montoTotal.toLocaleString()}</span>
            </div>
            <div className="flex justify-between text-orange-600">
              <span>Adelantos:</span>
              <span className="font-semibold">- S/ {liquidacion.adelantos.toLocaleString()}</span>
            </div>
            <Separator />
            <div className="flex justify-between text-lg font-bold text-green-600">
              <span>MONTO NETO:</span>
              <span>S/ {liquidacion.montoNeto.toLocaleString()}</span>
            </div>
          </div>
        </div>
      </div>

{/* Observaciones */}
      {liquidacion.observaciones && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="text-lg">Observaciones</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm">{liquidacion.observaciones}</p>
          </CardContent>
        </Card>
      )}

{/* Footer */}
      <div className="text-center text-xs text-muted-foreground mt-8 pt-4 border-t">
        <p>Este documento es un comprobante de liquidación emitido por Sayariq Agronegocios</p>
        <p>RUC: 20123456789 | Dirección: Av. Principal 123, Lima, Perú</p>
        <p>Teléfono: (01) 234-5678 | Email: info@sayariq.com</p>
        <p>Fecha de impresión: {new Date().toLocaleDateString()}</p>
      </div>
    </div>
  )
})

FacturaLiquidacion.displayName = "FacturaLiquidacion"
[V0_FILE]typescriptreact:file="components/evaluacion-liquidacion-avanzada.tsx" 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 { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Separator } from "@/components/ui/separator"
import { Progress } from "@/components/ui/progress"
import {
  Calculator,
  DollarSign,
  Scale,
  AlertTriangle,
  CheckCircle,
  Edit3,
  Save,
  Eye,
  FileText,
  Users,
  Banknote,
  Target,
} from "lucide-react"

// Tipos de datos
interface LoteSubproceso {
  id: string
  loteId: string
  codigoLote: string
  proveedor: string
  fechaUltimaPesada: string
  tipoSubproceso: string
  pesoFinal: number
  categorias: {
    exportable: number
    industrial: number
    nacional: number
    descarte: number
  }
  estadoVenta: "vendido" | "disponible" | "reservado"
  modalidadLiquidacion: "carga_cerrada" | "por_proceso"
  precioAcordado?: number
  ventaId?: string
}

interface PreciosCategoria {
  exportable: number
  industrial: number
  nacional: number
  descarte: number
}

interface EstadoDeuda {
  proveedorId: string
  saldoAnterior: number
  adelantosPendientes: number
  totalAdelantosDescontados: number
  saldoActual: number
  limitCredito: number
  creditoDisponible: number
}

interface EvaluacionLiquidacion {
  id: string
  proveedorId: string
  proveedor: string
  fechaEvaluacion: string
  lotes: LoteSubproceso[]
  precios: PreciosCategoria
  estadoDeuda: EstadoDeuda
  montoTotalBruto: number
  descuentoAdelantos: number
  montoNeto: number
  estado: "borrador" | "revision" | "aprobado" | "liquidado"
  observaciones: string
  responsable: string
}

// Datos mock
const mockLotesSubprocesos: LoteSubproceso[] = [
  {
    id: "1",
    loteId: "L001",
    codigoLote: "SAY-2024-001",
    proveedor: "Juan Pérez",
    fechaUltimaPesada: "2024-01-15T14:30:00",
    tipoSubproceso: "Secado Final",
    pesoFinal: 1250.5,
    categorias: {
      exportable: 850.2,
      industrial: 280.1,
      nacional: 95.2,
      descarte: 25.0,
    },
    estadoVenta: "vendido",
    modalidadLiquidacion: "por_proceso",
    ventaId: "V001",
  },
  {
    id: "2",
    loteId: "L002",
    codigoLote: "SAY-2024-002",
    proveedor: "Juan Pérez",
    fechaUltimaPesada: "2024-01-16T09:15:00",
    tipoSubproceso: "Clasificación",
    pesoFinal: 980.3,
    categorias: {
      exportable: 720.1,
      industrial: 180.2,
      nacional: 65.0,
      descarte: 15.0,
    },
    estadoVenta: "vendido",
    modalidadLiquidacion: "carga_cerrada",
    precioAcordado: 4.5,
    ventaId: "V002",
  },
]

const mockPreciosBase: PreciosCategoria = {
  exportable: 5.2,
  industrial: 3.8,
  nacional: 2.5,
  descarte: 0.8,
}

const mockEstadoDeuda: EstadoDeuda = {
  proveedorId: "P001",
  saldoAnterior: -150.0,
  adelantosPendientes: 800.0,
  totalAdelantosDescontados: 2400.0,
  saldoActual: -950.0,
  limitCredito: 5000.0,
  creditoDisponible: 4050.0,
}

export function EvaluacionLiquidacionAvanzada() {
  const [proveedorSeleccionado, setProveedorSeleccionado] = useState("")
  const [lotesDisponibles, setLotesDisponibles] = useState<LoteSubproceso[]>([])
  const [lotesSeleccionados, setLotesSeleccionados] = useState<string[]>([])
  const [precios, setPrecios] = useState<PreciosCategoria>(mockPreciosBase)
  const [preciosEditando, setPreciosEditando] = useState(false)
  const [evaluacion, setEvaluacion] = useState<EvaluacionLiquidacion | null>(null)
  const [observaciones, setObservaciones] = useState("")

// Cargar lotes cuando se selecciona proveedor
  useEffect(() => {
    if (proveedorSeleccionado) {
      const lotesFiltrados = mockLotesSubprocesos.filter(
        (lote) => lote.proveedor === proveedorSeleccionado && lote.estadoVenta === "vendido",
      )
      setLotesDisponibles(lotesFiltrados)
    }
  }, [proveedorSeleccionado])

// Calcular totales
  const calcularTotales = () => {
    const lotesEvaluacion = lotesDisponibles.filter((lote) => lotesSeleccionados.includes(lote.id))

let montoTotalBruto = 0

lotesEvaluacion.forEach((lote) => {
      if (lote.modalidadLiquidacion === "carga_cerrada") {
        montoTotalBruto += lote.pesoFinal * (lote.precioAcordado || 0)
      } else {
        montoTotalBruto +=
          lote.categorias.exportable * precios.exportable +
          lote.categorias.industrial * precios.industrial +
          lote.categorias.nacional * precios.nacional +
          lote.categorias.descarte * precios.descarte
      }
    })

const descuentoAdelantos = mockEstadoDeuda.adelantosPendientes
    const montoNeto = montoTotalBruto - descuentoAdelantos

return { montoTotalBruto, descuentoAdelantos, montoNeto }
  }

const { montoTotalBruto, descuentoAdelantos, montoNeto } = calcularTotales()

const crearEvaluacion = () => {
    const nuevaEvaluacion: EvaluacionLiquidacion = {
      id: `EVAL-${Date.now()}`,
      proveedorId: "P001",
      proveedor: proveedorSeleccionado,
      fechaEvaluacion: new Date().toISOString(),
      lotes: lotesDisponibles.filter((lote) => lotesSeleccionados.includes(lote.id)),
      precios,
      estadoDeuda: mockEstadoDeuda,
      montoTotalBruto,
      descuentoAdelantos,
      montoNeto,
      estado: "borrador",
      observaciones,
      responsable: "Admin",
    }
    setEvaluacion(nuevaEvaluacion)
  }

const aprobarEvaluacion = () => {
    if (evaluacion) {
      setEvaluacion({
        ...evaluacion,
        estado: "aprobado",
      })
    }
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Evaluación de Liquidación Avanzada</h1>
          <p className="text-gray-600 mt-2">
            Sistema avanzado de evaluación con integración completa de subprocesos y gestión de deudas
          </p>
        </div>
        <Badge variant="outline" className="text-lg px-4 py-2">
          <Target className="w-4 h-4 mr-2" />
          Módulo Avanzado
        </Badge>
      </div>

<Tabs defaultValue="seleccion" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="seleccion">1. Selección</TabsTrigger>
          <TabsTrigger value="evaluacion">2. Evaluación</TabsTrigger>
          <TabsTrigger value="revision">3. Revisión</TabsTrigger>
          <TabsTrigger value="aprobacion">4. Aprobación</TabsTrigger>
        </TabsList>

{/* Paso 1: Selección de Proveedor y Lotes */}
        <TabsContent value="seleccion" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="w-5 h-5" />
                Selección de Proveedor
              </CardTitle>
              <CardDescription>Selecciona el proveedor y los lotes vendidos para evaluar</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="proveedor">Proveedor</Label>
                  <Select value={proveedorSeleccionado} onValueChange={setProveedorSeleccionado}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar proveedor" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Juan Pérez">Juan Pérez</SelectItem>
                      <SelectItem value="María García">María García</SelectItem>
                      <SelectItem value="Carlos López">Carlos López</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Estado de Crédito</Label>
                  <div className="flex items-center gap-2 mt-2">
                    <Progress
                      value={(mockEstadoDeuda.creditoDisponible / mockEstadoDeuda.limitCredito) * 100}
                      className="flex-1"
                    />
                    <span className="text-sm font-medium">S/ {mockEstadoDeuda.creditoDisponible.toFixed(2)}</span>
                  </div>
                </div>
              </div>

{proveedorSeleccionado && (
                <div className="mt-6">
                  <h3 className="text-lg font-semibold mb-4">Lotes Vendidos Disponibles</h3>
                  <div className="border rounded-lg">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-12">Sel.</TableHead>
                          <TableHead>Código Lote</TableHead>
                          <TableHead>Última Pesada</TableHead>
                          <TableHead>Subproceso</TableHead>
                          <TableHead>Peso Final</TableHead>
                          <TableHead>Modalidad</TableHead>
                          <TableHead>Estado</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {lotesDisponibles.map((lote) => (
                          <TableRow key={lote.id}>
                            <TableCell>
                              <input
                                type="checkbox"
                                checked={lotesSeleccionados.includes(lote.id)}
                                onChange={(e) => {
                                  if (e.target.checked) {
                                    setLotesSeleccionados([...lotesSeleccionados, lote.id])
                                  } else {
                                    setLotesSeleccionados(lotesSeleccionados.filter((id) => id !== lote.id))
                                  }
                                }}
                                className="rounded"
                              />
                            </TableCell>
                            <TableCell className="font-medium">{lote.codigoLote}</TableCell>
                            <TableCell>{new Date(lote.fechaUltimaPesada).toLocaleDateString("es-PE")}</TableCell>
                            <TableCell>{lote.tipoSubproceso}</TableCell>
                            <TableCell>{lote.pesoFinal.toFixed(2)} kg</TableCell>
                            <TableCell>
                              <Badge variant={lote.modalidadLiquidacion === "carga_cerrada" ? "default" : "secondary"}>
                                {lote.modalidadLiquidacion === "carga_cerrada" ? "Carga Cerrada" : "Por Proceso"}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <Badge variant="outline" className="text-green-600">
                                <CheckCircle className="w-3 h-3 mr-1" />
                                Vendido
                              </Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

{/* Paso 2: Evaluación y Precios */}
        <TabsContent value="evaluacion" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <DollarSign className="w-5 h-5" />
                  Precios por Categoría
                  <Button variant="outline" size="sm" onClick={() => setPreciosEditando(!preciosEditando)}>
                    {preciosEditando ? <Save className="w-4 h-4" /> : <Edit3 className="w-4 h-4" />}
                  </Button>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {Object.entries(precios).map(([categoria, precio]) => (
                  <div key={categoria} className="flex items-center justify-between">
                    <Label className="capitalize">{categoria}</Label>
                    {preciosEditando ? (
                      <Input
                        type="number"
                        step="0.01"
                        value={precio}
                        onChange={(e) =>
                          setPrecios({
                            ...precios,
                            [categoria]: Number.parseFloat(e.target.value) || 0,
                          })
                        }
                        className="w-24"
                      />
                    ) : (
                      <span className="font-medium">S/ {precio.toFixed(2)}</span>
                    )}
                  </div>
                ))}
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Banknote className="w-5 h-5" />
                  Estado de Deuda
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex justify-between">
                  <span>Saldo Anterior:</span>
                  <span className="font-medium text-red-600">S/ {mockEstadoDeuda.saldoAnterior.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span>Adelantos Pendientes:</span>
                  <span className="font-medium text-orange-600">
                    S/ {mockEstadoDeuda.adelantosPendientes.toFixed(2)}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>Adelantos Descontados:</span>
                  <span className="font-medium text-gray-600">
                    S/ {mockEstadoDeuda.totalAdelantosDescontados.toFixed(2)}
                  </span>
                </div>
                <Separator />
                <div className="flex justify-between font-semibold">
                  <span>Saldo Actual:</span>
                  <span className={mockEstadoDeuda.saldoActual < 0 ? "text-red-600" : "text-green-600"}>
                    S/ {mockEstadoDeuda.saldoActual.toFixed(2)}
                  </span>
                </div>
                <div className="flex justify-between text-sm text-gray-600">
                  <span>Crédito Disponible:</span>
                  <span>S/ {mockEstadoDeuda.creditoDisponible.toFixed(2)}</span>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Detalle de Lotes Seleccionados */}
          {lotesSeleccionados.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Scale className="w-5 h-5" />
                  Detalle de Evaluación
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Lote</TableHead>
                      <TableHead>Modalidad</TableHead>
                      <TableHead>Exportable</TableHead>
                      <TableHead>Industrial</TableHead>
                      <TableHead>Nacional</TableHead>
                      <TableHead>Descarte</TableHead>
                      <TableHead>Total</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {lotesDisponibles
                      .filter((lote) => lotesSeleccionados.includes(lote.id))
                      .map((lote) => {
                        const total =
                          lote.modalidadLiquidacion === "carga_cerrada"
                            ? lote.pesoFinal * (lote.precioAcordado || 0)
                            : lote.categorias.exportable * precios.exportable +
                              lote.categorias.industrial * precios.industrial +
                              lote.categorias.nacional * precios.nacional +
                              lote.categorias.descarte * precios.descarte

return (
                          <TableRow key={lote.id}>
                            <TableCell className="font-medium">{lote.codigoLote}</TableCell>
                            <TableCell>
                              <Badge variant={lote.modalidadLiquidacion === "carga_cerrada" ? "default" : "secondary"}>
                                {lote.modalidadLiquidacion === "carga_cerrada" ? "Cerrada" : "Proceso"}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              {lote.modalidadLiquidacion === "carga_cerrada"
                                ? "-"
                                : `${lote.categorias.exportable.toFixed(1)} kg`}
                            </TableCell>
                            <TableCell>
                              {lote.modalidadLiquidacion === "carga_cerrada"
                                ? "-"
                                : `${lote.categorias.industrial.toFixed(1)} kg`}
                            </TableCell>
                            <TableCell>
                              {lote.modalidadLiquidacion === "carga_cerrada"
                                ? "-"
                                : `${lote.categorias.nacional.toFixed(1)} kg`}
                            </TableCell>
                            <TableCell>
                              {lote.modalidadLiquidacion === "carga_cerrada"
                                ? "-"
                                : `${lote.categorias.descarte.toFixed(1)} kg`}
                            </TableCell>
                            <TableCell className="font-semibold">S/ {total.toFixed(2)}</TableCell>
                          </TableRow>
                        )
                      })}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          )}
        </TabsContent>

{/* Paso 3: Revisión */}
        <TabsContent value="revision" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calculator className="w-5 h-5" />
                Resumen de Liquidación
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="text-center p-4 bg-blue-50 rounded-lg">
                  <div className="text-2xl font-bold text-blue-600">S/ {montoTotalBruto.toFixed(2)}</div>
                  <div className="text-sm text-gray-600">Monto Bruto</div>
                </div>
                <div className="text-center p-4 bg-orange-50 rounded-lg">
                  <div className="text-2xl font-bold text-orange-600">S/ {descuentoAdelantos.toFixed(2)}</div>
                  <div className="text-sm text-gray-600">Descuento Adelantos</div>
                </div>
                <div className="text-center p-4 bg-green-50 rounded-lg">
                  <div className="text-2xl font-bold text-green-600">S/ {montoNeto.toFixed(2)}</div>
                  <div className="text-sm text-gray-600">Monto Neto</div>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="observaciones">Observaciones</Label>
                <Textarea
                  id="observaciones"
                  value={observaciones}
                  onChange={(e) => setObservaciones(e.target.value)}
                  placeholder="Agregar observaciones sobre la evaluación..."
                  rows={3}
                />
              </div>

<div className="flex gap-2">
                <Button onClick={crearEvaluacion} className="flex-1">
                  <FileText className="w-4 h-4 mr-2" />
                  Crear Evaluación
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Paso 4: Aprobación */}
        <TabsContent value="aprobacion" className="space-y-6">
          {evaluacion ? (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5" />
                  Evaluación Creada
                  <Badge
                    variant={
                      evaluacion.estado === "aprobado"
                        ? "default"
                        : evaluacion.estado === "borrador"
                          ? "secondary"
                          : "outline"
                    }
                  >
                    {evaluacion.estado}
                  </Badge>
                </CardTitle>
                <CardDescription>
                  ID: {evaluacion.id} | Fecha: {new Date(evaluacion.fechaEvaluacion).toLocaleDateString("es-PE")}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <strong>Proveedor:</strong> {evaluacion.proveedor}
                  </div>
                  <div>
                    <strong>Lotes:</strong> {evaluacion.lotes.length}
                  </div>
                  <div>
                    <strong>Monto Bruto:</strong> S/ {evaluacion.montoTotalBruto.toFixed(2)}
                  </div>
                  <div>
                    <strong>Monto Neto:</strong> S/ {evaluacion.montoNeto.toFixed(2)}
                  </div>
                </div>

{evaluacion.observaciones && (
                  <div>
                    <strong>Observaciones:</strong>
                    <p className="text-gray-600 mt-1">{evaluacion.observaciones}</p>
                  </div>
                )}

<div className="flex gap-2">
                  {evaluacion.estado === "borrador" && (
                    <Button onClick={aprobarEvaluacion}>
                      <CheckCircle className="w-4 h-4 mr-2" />
                      Aprobar Evaluación
                    </Button>
                  )}
                  <Button variant="outline">
                    <Eye className="w-4 h-4 mr-2" />
                    Ver Detalle Completo
                  </Button>
                  <Button variant="outline">
                    <FileText className="w-4 h-4 mr-2" />
                    Exportar PDF
                  </Button>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Alert>
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>
                Completa los pasos anteriores para crear la evaluación de liquidación.
              </AlertDescription>
            </Alert>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/evaluacion-liquidacion-avanzada/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
            </CardHeader>
            <CardContent className="space-y-4">
              {Array.from({ length: 4 }).map((_, i) => (
                <div key={i} className="flex justify-between items-center">
                  <Skeleton className="h-4 w-24" />
                  <Skeleton className="h-4 w-16" />
                </div>
              ))}
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
            </CardHeader>
            <CardContent className="space-y-4">
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} className="flex justify-between items-center">
                  <Skeleton className="h-4 w-32" />
                  <Skeleton className="h-4 w-20" />
                </div>
              ))}
            </CardContent>
          </Card>
        </div>

<Card>
          <CardHeader>
            <Skeleton className="h-6 w-48" />
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-deudas/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-1">
          <CardHeader>
            <Skeleton className="h-6 w-32" />
          </CardHeader>
          <CardContent className="space-y-3">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="p-3 border rounded-lg space-y-2">
                <div className="flex justify-between">
                  <div className="space-y-1">
                    <Skeleton className="h-4 w-24" />
                    <Skeleton className="h-3 w-20" />
                  </div>
                  <div className="space-y-1">
                    <Skeleton className="h-4 w-16" />
                    <Skeleton className="h-3 w-12" />
                  </div>
                </div>
                <Skeleton className="h-2 w-full" />
                <Skeleton className="h-3 w-32" />
              </div>
            ))}
          </CardContent>
        </Card>

<div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <div className="flex justify-between">
                <Skeleton className="h-6 w-48" />
                <div className="flex gap-2">
                  <Skeleton className="h-8 w-20" />
                  <Skeleton className="h-8 w-20" />
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i} className="text-center p-3 rounded-lg border">
                    <Skeleton className="h-6 w-16 mx-auto mb-2" />
                    <Skeleton className="h-3 w-20 mx-auto" />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {Array.from({ length: 6 }).map((_, i) => (
                  <Skeleton key={i} className="h-12 w-full" />
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ingreso-lotes-mejorado/page.tsx" isMerged="true"
import { Suspense } from "react"
import IngresoLotesMejorado from "@/components/ingreso-lotes-mejorado"

export default function IngresoLotesMejoradoPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Suspense fallback={<div>Cargando...</div>}>
        <IngresoLotesMejorado />
      </Suspense>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ingreso-lotes-mejorado/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-80" />
          <Skeleton className="h-4 w-96" />
        </div>
        <div className="flex items-center gap-2">
          <Skeleton className="h-8 w-8 rounded" />
          <Skeleton className="h-8 w-8 rounded" />
          <Skeleton className="h-8 w-8 rounded" />
        </div>
      </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <Skeleton className="h-6 w-48" />
                <Skeleton className="h-4 w-64" />
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <Skeleton className="h-20 w-full" />
                  <Skeleton className="h-20 w-full" />
                </div>
                <Skeleton className="h-24 w-full" />
                <Skeleton className="h-24 w-full" />
                <Skeleton className="h-32 w-full" />
              </CardContent>
            </Card>
            <Skeleton className="h-12 w-full" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-personal-subprocesos/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function GestionPersonalSubprocesosLoading() {
  return (
    <div className="container mx-auto p-4 space-y-4">
      {/* Header skeleton */}
      <div className="flex justify-between items-center">
        <div className="space-y-2">
          <Skeleton className="h-6 w-64" />
          <Skeleton className="h-4 w-48" />
        </div>
        <Skeleton className="h-10 w-40" />
      </div>

{/* Table skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-48" />
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex space-x-4">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-4 w-28" />
                <Skeleton className="h-4 w-16" />
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-16" />
                <Skeleton className="h-8 w-24" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/control-produccion-subprocesos.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Eye,
  BarChart3,
  TrendingUp,
  Package,
  Award,
  Zap,
  Factory,
  AlertTriangle,
  Trophy,
  Medal,
  Star,
  Edit,
  Save,
  X,
} from "lucide-react"

// Tipos de datos
interface ProcesoActivo {
  id: string
  pedido: string
  cliente: string
  fechaInicio: string
  operacionesCompletadas: number
  operacionesTotales: number
  pesoTotal: number
  estado: "en-proceso" | "completado" | "pausado"
  eficiencia: number
  operaciones: string[]
}

interface DetalleProduccion {
  categoria: string
  pesoObjetivo: number
  pesoReal: number
  porcentaje: number
  lotes: string[]
  esObjetivoPrincipal: boolean
}

interface LoteCalidad {
  lote: string
  proveedor: string
  pesoInicial: number
  pesoFinal: number
  eficiencia: number
  calidad: "excelente" | "buena" | "regular" | "deficiente"
  categorias: {
    primera: number
    segunda: number
    tercera: number
    descarte: number
  }
}

interface RegistroProduccion {
  operacion: string
  pesoInicial: number
  pesoFinal: number
  merma: number
  observaciones: string
  responsable: string
  fechaRegistro: string
  categorias: {
    primera: number
    segunda: number
    tercera: number
    descarte: number
  }
}

// Datos mock
const procesosActivos: ProcesoActivo[] = [
  {
    id: "PROC-001",
    pedido: "PED-001",
    cliente: "Exportadora Lima",
    fechaInicio: "2024-01-20",
    operacionesCompletadas: 4,
    operacionesTotales: 6,
    pesoTotal: 2500,
    estado: "en-proceso",
    eficiencia: 87,
    operaciones: ["lavado", "perfilado", "empaque"],
  },
  {
    id: "PROC-002",
    pedido: "PED-002",
    cliente: "Mercado Central",
    fechaInicio: "2024-01-19",
    operacionesCompletadas: 6,
    operacionesTotales: 6,
    pesoTotal: 1800,
    estado: "completado",
    eficiencia: 92,
    operaciones: ["lavado", "secado"],
  },
  {
    id: "PROC-003",
    pedido: "PED-003",
    cliente: "Supermercados Norte",
    fechaInicio: "2024-01-21",
    operacionesCompletadas: 2,
    operacionesTotales: 5,
    pesoTotal: 3200,
    estado: "en-proceso",
    eficiencia: 78,
    operaciones: ["lavado", "perfilado", "desinfeccion", "secado", "empaque"],
  },
]

const detallesProduccion: Record<string, DetalleProduccion[]> = {
  "PROC-001": [
    {
      categoria: "Primera",
      pesoObjetivo: 1500,
      pesoReal: 1420,
      porcentaje: 94.7,
      lotes: ["L001", "L003", "L005"],
      esObjetivoPrincipal: true,
    },
    {
      categoria: "Segunda",
      pesoObjetivo: 0,
      pesoReal: 750,
      porcentaje: 0,
      lotes: ["L002", "L004"],
      esObjetivoPrincipal: false,
    },
    {
      categoria: "Tercera",
      pesoObjetivo: 0,
      pesoReal: 180,
      porcentaje: 0,
      lotes: ["L006"],
      esObjetivoPrincipal: false,
    },
    {
      categoria: "Descarte",
      pesoObjetivo: 0,
      pesoReal: 150,
      porcentaje: 0,
      lotes: ["L007"],
      esObjetivoPrincipal: false,
    },
  ],
  "PROC-002": [
    {
      categoria: "Primera",
      pesoObjetivo: 1200,
      pesoReal: 1280,
      porcentaje: 106.7,
      lotes: ["L008", "L009"],
      esObjetivoPrincipal: true,
    },
    {
      categoria: "Segunda",
      pesoObjetivo: 0,
      pesoReal: 380,
      porcentaje: 0,
      lotes: ["L010"],
      esObjetivoPrincipal: false,
    },
    {
      categoria: "Tercera",
      pesoObjetivo: 0,
      pesoReal: 120,
      porcentaje: 0,
      lotes: ["L011"],
      esObjetivoPrincipal: false,
    },
    {
      categoria: "Descarte",
      pesoObjetivo: 0,
      pesoReal: 20,
      porcentaje: 0,
      lotes: ["L012"],
      esObjetivoPrincipal: false,
    },
  ],
}

const lotesCalidad: Record<string, LoteCalidad[]> = {
  "PROC-001": [
    {
      lote: "L001",
      proveedor: "Juan Pérez",
      pesoInicial: 500,
      pesoFinal: 480,
      eficiencia: 96,
      calidad: "excelente",
      categorias: { primera: 400, segunda: 60, tercera: 15, descarte: 5 },
    },
    {
      lote: "L002",
      proveedor: "María García",
      pesoInicial: 450,
      pesoFinal: 420,
      eficiencia: 93,
      calidad: "buena",
      categorias: { primera: 300, segunda: 80, tercera: 30, descarte: 10 },
    },
    {
      lote: "L003",
      proveedor: "Carlos López",
      pesoInicial: 600,
      pesoFinal: 580,
      eficiencia: 97,
      calidad: "excelente",
      categorias: { primera: 480, segunda: 70, tercera: 20, descarte: 10 },
    },
  ],
  "PROC-002": [
    {
      lote: "L008",
      proveedor: "Ana Rodríguez",
      pesoInicial: 800,
      pesoFinal: 760,
      eficiencia: 95,
      calidad: "excelente",
      categorias: { primera: 650, segunda: 80, tercera: 25, descarte: 5 },
    },
    {
      lote: "L009",
      proveedor: "Pedro Martín",
      pesoInicial: 700,
      pesoFinal: 650,
      eficiencia: 93,
      calidad: "buena",
      categorias: { primera: 520, segunda: 90, tercera: 30, descarte: 10 },
    },
  ],
}

export function ControlProduccionSubprocesos() {
  const [procesoSeleccionado, setProcesoSeleccionado] = useState<string | null>(null)
  const [modalDetalles, setModalDetalles] = useState(false)
  const [modalAnalisis, setModalAnalisis] = useState(false)
  const [modalRegistro, setModalRegistro] = useState(false)
  const [operacionActual, setOperacionActual] = useState("")
  const [registroProduccion, setRegistroProduccion] = useState<RegistroProduccion>({
    operacion: "",
    pesoInicial: 0,
    pesoFinal: 0,
    merma: 0,
    observaciones: "",
    responsable: "",
    fechaRegistro: new Date().toISOString().split("T")[0],
    categorias: {
      primera: 0,
      segunda: 0,
      tercera: 0,
      descarte: 0,
    },
  })
  const [editandoDetalle, setEditandoDetalle] = useState<string | null>(null)
  const [detallesEditados, setDetallesEditados] = useState<Record<string, DetalleProduccion>>({})

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "en-proceso":
        return <Badge className="bg-blue-100 text-blue-800 border-blue-200">En Proceso</Badge>
      case "completado":
        return <Badge className="bg-green-100 text-green-800 border-green-200">Completado</Badge>
      case "pausado":
        return <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">Pausado</Badge>
      default:
        return <Badge variant="secondary">{estado}</Badge>
    }
  }

const getCalidadBadge = (calidad: string) => {
    switch (calidad) {
      case "excelente":
        return (
          <Badge className="bg-green-100 text-green-800 border-green-200">
            <Trophy className="w-3 h-3 mr-1" />
            Excelente
          </Badge>
        )
      case "buena":
        return (
          <Badge className="bg-blue-100 text-blue-800 border-blue-200">
            <Medal className="w-3 h-3 mr-1" />
            Buena
          </Badge>
        )
      case "regular":
        return (
          <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">
            <Star className="w-3 h-3 mr-1" />
            Regular
          </Badge>
        )
      case "deficiente":
        return (
          <Badge className="bg-red-100 text-red-800 border-red-200">
            <AlertTriangle className="w-3 h-3 mr-1" />
            Deficiente
          </Badge>
        )
      default:
        return <Badge variant="secondary">{calidad}</Badge>
    }
  }

const abrirDetalles = (procesoId: string) => {
    setProcesoSeleccionado(procesoId)
    setModalDetalles(true)
  }

const abrirAnalisis = (procesoId: string) => {
    setProcesoSeleccionado(procesoId)
    setModalAnalisis(true)
  }

const abrirRegistro = (procesoId: string) => {
    setProcesoSeleccionado(procesoId)
    const proceso = procesosActivos.find((p) => p.id === procesoId)
    if (proceso && proceso.operaciones.length > 0) {
      setOperacionActual(proceso.operaciones[0])
      setRegistroProduccion({
        operacion: proceso.operaciones[0],
        pesoInicial: 0,
        pesoFinal: 0,
        merma: 0,
        observaciones: "",
        responsable: "",
        fechaRegistro: new Date().toISOString().split("T")[0],
        categorias: {
          primera: 0,
          segunda: 0,
          tercera: 0,
          descarte: 0,
        },
      })
    }
    setModalRegistro(true)
  }

const guardarRegistro = () => {
    // Aquí se guardaría el registro en la base de datos
    console.log("Guardando registro:", registroProduccion)
    setModalRegistro(false)
    // Actualizar los datos del proceso
  }

const iniciarEdicion = (categoria: string, detalle: DetalleProduccion) => {
    setEditandoDetalle(categoria)
    setDetallesEditados({
      ...detallesEditados,
      [categoria]: { ...detalle },
    })
  }

const guardarEdicion = (categoria: string) => {
    // Aquí se guardarían los cambios en la base de datos
    console.log("Guardando cambios para:", categoria, detallesEditados[categoria])
    setEditandoDetalle(null)
    // Actualizar los datos en detallesProduccion
  }

const cancelarEdicion = () => {
    setEditandoDetalle(null)
    setDetallesEditados({})
  }

const actualizarDetalleEditado = (categoria: string, campo: keyof DetalleProduccion, valor: any) => {
    setDetallesEditados({
      ...detallesEditados,
      [categoria]: {
        ...detallesEditados[categoria],
        [campo]: valor,
      },
    })
  }

const actualizarCategoria = (categoria: keyof RegistroProduccion["categorias"], valor: number) => {
    const nuevasCategorias = {
      ...registroProduccion.categorias,
      [categoria]: valor,
    }
    const totalCategorias = Object.values(nuevasCategorias).reduce((sum, val) => sum + val, 0)
    const merma = registroProduccion.pesoInicial - totalCategorias

setRegistroProduccion((prev) => ({
      ...prev,
      categorias: nuevasCategorias,
      pesoFinal: totalCategorias,
      merma: merma > 0 ? merma : 0,
    }))
  }

// Calcular KPIs
  const totalProcesos = procesosActivos.length
  const procesosCompletados = procesosActivos.filter((p) => p.estado === "completado").length
  const pesoTotalProcesado = procesosActivos.reduce((sum, p) => sum + p.pesoTotal, 0)
  const eficienciaPromedio = procesosActivos.reduce((sum, p) => sum + p.eficiencia, 0) / totalProcesos
  const lotesExcelentes = Object.values(lotesCalidad)
    .flat()
    .filter((l) => l.calidad === "excelente").length

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Control de Producción</h1>
          <p className="text-muted-foreground">Monitoreo y análisis de procesos de producción</p>
        </div>
      </div>

{/* KPIs principales - Más pequeños */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
        <Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{pesoTotalProcesado.toLocaleString()}</p>
                <p className="text-xs text-muted-foreground">kg Total</p>
              </div>
              <Package className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{eficienciaPromedio.toFixed(1)}%</p>
                <p className="text-xs text-muted-foreground">Eficiencia</p>
              </div>
              <TrendingUp className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">
                  {procesosCompletados}/{totalProcesos}
                </p>
                <p className="text-xs text-muted-foreground">Procesos</p>
              </div>
              <Factory className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{lotesExcelentes}</p>
                <p className="text-xs text-muted-foreground">Lotes Exc.</p>
              </div>
              <Award className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{(pesoTotalProcesado / totalProcesos).toFixed(0)}</p>
                <p className="text-xs text-muted-foreground">kg/proceso</p>
              </div>
              <Zap className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Tabla de procesos activos */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Procesos Activos
          </CardTitle>
          <CardDescription>Control y seguimiento de procesos de producción</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Pedido</TableHead>
                <TableHead>Cliente</TableHead>
                <TableHead>Fecha Inicio</TableHead>
                <TableHead>Progreso</TableHead>
                <TableHead>Peso (kg)</TableHead>
                <TableHead>Eficiencia</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {procesosActivos.map((proceso) => (
                <TableRow key={proceso.id}>
                  <TableCell className="font-medium">{proceso.pedido}</TableCell>
                  <TableCell>{proceso.cliente}</TableCell>
                  <TableCell>{proceso.fechaInicio}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Progress
                        value={(proceso.operacionesCompletadas / proceso.operacionesTotales) * 100}
                        className="w-16"
                      />
                      <span className="text-sm text-muted-foreground">
                        {proceso.operacionesCompletadas}/{proceso.operacionesTotales}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell>{proceso.pesoTotal.toLocaleString()}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <span
                        className={`font-semibold ${proceso.eficiencia >= 90 ? "text-green-600" : proceso.eficiencia >= 80 ? "text-yellow-600" : "text-red-600"}`}
                      >
                        {proceso.eficiencia}%
                      </span>
                    </div>
                  </TableCell>
                  <TableCell>{getEstadoBadge(proceso.estado)}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm" onClick={() => abrirDetalles(proceso.id)}>
                        <Eye className="h-4 w-4 mr-1" />
                        Detalles
                      </Button>
                      <Button variant="outline" size="sm" onClick={() => abrirAnalisis(proceso.id)}>
                        <BarChart3 className="h-4 w-4 mr-1" />
                        Análisis
                      </Button>
                      <Button variant="outline" size="sm" onClick={() => abrirRegistro(proceso.id)}>
                        <Edit className="h-4 w-4 mr-1" />
                        Registrar
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Modal de Registro de Producción */}
      <Dialog open={modalRegistro} onOpenChange={setModalRegistro}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-between">
              Registrar Producción
              <Button variant="ghost" size="sm" onClick={() => setModalRegistro(false)}>
                <X className="h-4 w-4" />
              </Button>
            </DialogTitle>
            <DialogDescription>Registrar kilogramos procesados para el proceso {procesoSeleccionado}</DialogDescription>
          </DialogHeader>

{procesoSeleccionado && (
            <div className="space-y-6">
              {/* Selección de operación */}
              <div>
                <Label>Operación a Registrar</Label>
                <div className="flex gap-2 mt-2 flex-wrap">
                  {procesosActivos
                    .find((p) => p.id === procesoSeleccionado)
                    ?.operaciones.map((operacion) => (
                      <Button
                        key={operacion}
                        variant={operacionActual === operacion ? "default" : "outline"}
                        size="sm"
                        onClick={() => {
                          setOperacionActual(operacion)
                          setRegistroProduccion((prev) => ({ ...prev, operacion }))
                        }}
                      >
                        {operacion}
                      </Button>
                    ))}
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Responsable</Label>
                  <Input
                    value={registroProduccion.responsable}
                    onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, responsable: e.target.value }))}
                    placeholder="Nombre del responsable"
                  />
                </div>
                <div>
                  <Label>Fecha de Registro</Label>
                  <Input
                    type="date"
                    value={registroProduccion.fechaRegistro}
                    onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, fechaRegistro: e.target.value }))}
                  />
                </div>
              </div>

<div>
                <Label>Peso Inicial (kg)</Label>
                <Input
                  type="number"
                  value={registroProduccion.pesoInicial}
                  onChange={(e) => {
                    const pesoInicial = Number(e.target.value)
                    setRegistroProduccion((prev) => ({ ...prev, pesoInicial }))
                  }}
                  placeholder="0"
                />
              </div>

{/* Distribución por categorías */}
              <div>
                <Label className="text-base font-semibold">Distribución por Categorías (kg)</Label>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-3">
                  <div>
                    <Label className="text-sm text-green-600">Primera</Label>
                    <Input
                      type="number"
                      value={registroProduccion.categorias.primera}
                      onChange={(e) => actualizarCategoria("primera", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div>
                    <Label className="text-sm text-blue-600">Segunda</Label>
                    <Input
                      type="number"
                      value={registroProduccion.categorias.segunda}
                      onChange={(e) => actualizarCategoria("segunda", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div>
                    <Label className="text-sm text-yellow-600">Tercera</Label>
                    <Input
                      type="number"
                      value={registroProduccion.categorias.tercera}
                      onChange={(e) => actualizarCategoria("tercera", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div>
                    <Label className="text-sm text-red-600">Descarte</Label>
                    <Input
                      type="number"
                      value={registroProduccion.categorias.descarte}
                      onChange={(e) => actualizarCategoria("descarte", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                </div>
              </div>

<div>
                <Label>Observaciones</Label>
                <Textarea
                  value={registroProduccion.observaciones}
                  onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, observaciones: e.target.value }))}
                  placeholder="Observaciones adicionales sobre el proceso..."
                  rows={3}
                />
              </div>

{/* Resumen */}
              <Card className="bg-blue-50">
                <CardContent className="p-4">
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center mb-4">
                    <div>
                      <p className="text-2xl font-bold text-blue-600">{registroProduccion.pesoInicial}</p>
                      <p className="text-sm text-gray-600">kg Inicial</p>
                    </div>
                    <div>
                      <p className="text-2xl font-bold text-green-600">{registroProduccion.pesoFinal}</p>
                      <p className="text-sm text-gray-600">kg Final</p>
                    </div>
                    <div>
                      <p className="text-2xl font-bold text-red-600">{registroProduccion.merma}</p>
                      <p className="text-sm text-gray-600">kg Merma</p>
                    </div>
                    <div>
                      <p className="text-2xl font-bold text-purple-600">
                        {registroProduccion.pesoInicial > 0
                          ? ((registroProduccion.pesoFinal / registroProduccion.pesoInicial) * 100).toFixed(1)
                          : 0}
                        %
                      </p>
                      <p className="text-sm text-gray-600">Eficiencia</p>
                    </div>
                  </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                    <div className="p-2 bg-green-100 rounded">
                      <p className="font-bold text-green-700">{registroProduccion.categorias.primera} kg</p>
                      <p className="text-xs text-green-600">Primera</p>
                    </div>
                    <div className="p-2 bg-blue-100 rounded">
                      <p className="font-bold text-blue-700">{registroProduccion.categorias.segunda} kg</p>
                      <p className="text-xs text-blue-600">Segunda</p>
                    </div>
                    <div className="p-2 bg-yellow-100 rounded">
                      <p className="font-bold text-yellow-700">{registroProduccion.categorias.tercera} kg</p>
                      <p className="text-xs text-yellow-600">Tercera</p>
                    </div>
                    <div className="p-2 bg-red-100 rounded">
                      <p className="font-bold text-red-700">{registroProduccion.categorias.descarte} kg</p>
                      <p className="text-xs text-red-600">Descarte</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

<div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => setModalRegistro(false)}>
              Cancelar
            </Button>
            <Button
              onClick={guardarRegistro}
              disabled={
                !registroProduccion.operacion ||
                !registroProduccion.responsable ||
                registroProduccion.pesoInicial <= 0 ||
                registroProduccion.pesoFinal <= 0
              }
            >
              <Save className="h-4 w-4 mr-2" />
              Guardar Registro
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal de Detalles de Producción */}
      <Dialog open={modalDetalles} onOpenChange={setModalDetalles}>
        <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-between">
              Detalles de Producción
              <Button variant="ghost" size="sm" onClick={() => setModalDetalles(false)}>
                <X className="h-4 w-4" />
              </Button>
            </DialogTitle>
            <DialogDescription>Información detallada del proceso {procesoSeleccionado}</DialogDescription>
          </DialogHeader>

{procesoSeleccionado && detallesProduccion[procesoSeleccionado] && (
            <div className="space-y-6">
              {/* Peso total unificado */}
              <Card className="bg-blue-50">
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg">Resumen General</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="text-center">
                      <p className="text-2xl font-bold text-blue-600">
                        {detallesProduccion[procesoSeleccionado]
                          .reduce((total, detalle) => total + detalle.pesoReal, 0)
                          .toLocaleString()}
                      </p>
                      <p className="text-sm text-muted-foreground">kg Peso Total Procesado</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-green-600">
                        {detallesProduccion[procesoSeleccionado]
                          .filter((d) => d.esObjetivoPrincipal)
                          .reduce((total, detalle) => total + detalle.pesoReal, 0)
                          .toLocaleString()}
                      </p>
                      <p className="text-sm text-muted-foreground">kg Objetivo Principal</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-orange-600">
                        {detallesProduccion[procesoSeleccionado]
                          .filter((d) => !d.esObjetivoPrincipal)
                          .reduce((total, detalle) => total + detalle.pesoReal, 0)
                          .toLocaleString()}
                      </p>
                      <p className="text-sm text-muted-foreground">kg Subproductos</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Categorías separadas por objetivo */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Objetivo Principal */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base text-green-600">🎯 Objetivo Principal</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {detallesProduccion[procesoSeleccionado]
                      .filter((detalle) => detalle.esObjetivoPrincipal)
                      .map((detalle, index) => (
                        <div key={index} className="space-y-2 p-3 border rounded-lg">
                          <div className="flex justify-between items-center">
                            <span className="font-semibold">{detalle.categoria}</span>
                            <div className="flex items-center gap-2">
                              <Badge
                                variant={
                                  detalle.porcentaje >= 100
                                    ? "default"
                                    : detalle.porcentaje >= 90
                                      ? "secondary"
                                      : "destructive"
                                }
                              >
                                {detalle.porcentaje.toFixed(1)}%
                              </Badge>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => iniciarEdicion(detalle.categoria, detalle)}
                              >
                                <Edit className="h-3 w-3" />
                              </Button>
                            </div>
                          </div>

{editandoDetalle === detalle.categoria ? (
                            <div className="space-y-2">
                              <div className="flex justify-between text-sm items-center">
                                <span className="text-muted-foreground">Objetivo:</span>
                                <Input
                                  type="number"
                                  value={detallesEditados[detalle.categoria]?.pesoObjetivo || detalle.pesoObjetivo}
                                  onChange={(e) =>
                                    actualizarDetalleEditado(detalle.categoria, "pesoObjetivo", Number(e.target.value))
                                  }
                                  className="w-20 h-6 text-xs"
                                />
                              </div>
                              <div className="flex justify-between text-sm items-center">
                                <span className="text-muted-foreground">Real:</span>
                                <Input
                                  type="number"
                                  value={detallesEditados[detalle.categoria]?.pesoReal || detalle.pesoReal}
                                  onChange={(e) =>
                                    actualizarDetalleEditado(detalle.categoria, "pesoReal", Number(e.target.value))
                                  }
                                  className="w-20 h-6 text-xs"
                                />
                              </div>
                              <div className="flex justify-end gap-1">
                                <Button size="sm" variant="outline" onClick={() => guardarEdicion(detalle.categoria)}>
                                  <Save className="h-3 w-3" />
                                </Button>
                                <Button size="sm" variant="outline" onClick={cancelarEdicion}>
                                  <X className="h-3 w-3" />
                                </Button>
                              </div>
                            </div>
                          ) : (
                            <>
                              <div className="flex justify-between text-sm">
                                <span className="text-muted-foreground">Objetivo:</span>
                                <span className="font-semibold">{detalle.pesoObjetivo} kg</span>
                              </div>
                              <div className="flex justify-between text-sm">
                                <span className="text-muted-foreground">Real:</span>
                                <span className="font-semibold">{detalle.pesoReal} kg</span>
                              </div>
                            </>
                          )}

<Progress value={Math.min(detalle.porcentaje, 100)} className="mt-2" />
                          <div className="flex flex-wrap gap-1 mt-2">
                            {detalle.lotes.map((lote, i) => (
                              <Badge key={i} variant="secondary" className="text-xs">
                                {lote}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      ))}
                  </CardContent>
                </Card>

{/* Subproductos */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base text-orange-600">📦 Subproductos</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {detallesProduccion[procesoSeleccionado]
                        .filter((detalle) => !detalle.esObjetivoPrincipal)
                        .map((detalle, index) => (
                          <div key={index} className="p-3 border rounded-lg bg-gray-50">
                            <div className="flex justify-between items-center mb-2">
                              <span className="font-medium">{detalle.categoria}</span>
                              <div className="flex items-center gap-2">
                                <span className="font-semibold text-orange-600">{detalle.pesoReal} kg</span>
                                <Button
                                  size="sm"
                                  variant="ghost"
                                  onClick={() => iniciarEdicion(detalle.categoria, detalle)}
                                >
                                  <Edit className="h-3 w-3" />
                                </Button>
                              </div>
                            </div>

{editandoDetalle === detalle.categoria ? (
                              <div className="space-y-2">
                                <Input
                                  type="number"
                                  value={detallesEditados[detalle.categoria]?.pesoReal || detalle.pesoReal}
                                  onChange={(e) =>
                                    actualizarDetalleEditado(detalle.categoria, "pesoReal", Number(e.target.value))
                                  }
                                  className="w-full h-6 text-xs"
                                />
                                <div className="flex justify-end gap-1">
                                  <Button size="sm" variant="outline" onClick={() => guardarEdicion(detalle.categoria)}>
                                    <Save className="h-3 w-3" />
                                  </Button>
                                  <Button size="sm" variant="outline" onClick={cancelarEdicion}>
                                    <X className="h-3 w-3" />
                                  </Button>
                                </div>
                              </div>
                            ) : (
                              <div className="flex flex-wrap gap-1">
                                {detalle.lotes.map((lote, i) => (
                                  <Badge key={i} variant="outline" className="text-xs">
                                    {lote}
                                  </Badge>
                                ))}
                              </div>
                            )}
                          </div>
                        ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

{/* Modal de Análisis de Lotes */}
      <Dialog open={modalAnalisis} onOpenChange={setModalAnalisis}>
        <DialogContent className="max-w-7xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-between">
              Análisis de Calidad por Lotes
              <Button variant="ghost" size="sm" onClick={() => setModalAnalisis(false)}>
                <X className="h-4 w-4" />
              </Button>
            </DialogTitle>
            <DialogDescription>
              Ranking de lotes y análisis de calidad para el proceso {procesoSeleccionado}
            </DialogDescription>
          </DialogHeader>

{procesoSeleccionado && lotesCalidad[procesoSeleccionado] && (
            <div className="space-y-6">
              {/* Ranking de lotes */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Trophy className="h-5 w-5" />
                    Ranking de Lotes por Calidad
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {lotesCalidad[procesoSeleccionado]
                      .sort((a, b) => b.eficiencia - a.eficiencia)
                      .map((lote, index) => (
                        <div key={lote.lote} className="flex items-center justify-between p-3 border rounded-lg">
                          <div className="flex items-center gap-3">
                            <div className="flex items-center gap-2">
                              {index === 0 && <Trophy className="h-5 w-5 text-yellow-500" />}
                              {index === 1 && <Medal className="h-5 w-5 text-gray-400" />}
                              {index === 2 && <Award className="h-5 w-5 text-orange-500" />}
                              <span className="font-semibold">#{index + 1}</span>
                            </div>
                            <div>
                              <div className="font-medium">
                                {lote.lote} - {lote.proveedor}
                              </div>
                              <div className="text-sm text-muted-foreground">
                                {lote.pesoInicial} kg → {lote.pesoFinal} kg
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-3">
                            <div className="text-right">
                              <div className="font-semibold">{lote.eficiencia}%</div>
                              <div className="text-sm text-muted-foreground">Eficiencia</div>
                            </div>
                            {getCalidadBadge(lote.calidad)}
                          </div>
                        </div>
                      ))}
                  </div>
                </CardContent>
              </Card>

{/* Detalle por categorías */}
              <Card>
                <CardHeader>
                  <CardTitle>Producción por Categorías</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="overflow-x-auto">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Lote</TableHead>
                          <TableHead>Proveedor</TableHead>
                          <TableHead>Primera (kg)</TableHead>
                          <TableHead>Segunda (kg)</TableHead>
                          <TableHead>Tercera (kg)</TableHead>
                          <TableHead>Descarte (kg)</TableHead>
                          <TableHead>Eficiencia</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {lotesCalidad[procesoSeleccionado].map((lote) => (
                          <TableRow key={lote.lote}>
                            <TableCell className="font-medium">{lote.lote}</TableCell>
                            <TableCell>{lote.proveedor}</TableCell>
                            <TableCell className="text-green-600 font-semibold">{lote.categorias.primera}</TableCell>
                            <TableCell className="text-blue-600 font-semibold">{lote.categorias.segunda}</TableCell>
                            <TableCell className="text-yellow-600 font-semibold">{lote.categorias.tercera}</TableCell>
                            <TableCell className="text-red-600 font-semibold">{lote.categorias.descarte}</TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <span
                                  className={`font-semibold ${lote.eficiencia >= 95 ? "text-green-600" : lote.eficiencia >= 90 ? "text-yellow-600" : "text-red-600"}`}
                                >
                                  {lote.eficiencia}%
                                </span>
                                {getCalidadBadge(lote.calidad)}
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[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 { Check, ChevronDown, ChevronUp } from "lucide-react"

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
        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)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { DashboardOverview } from "@/components/dashboard-overview"

export default function HomePage() {
  return (
    <div className="container mx-auto p-6">
      <DashboardOverview />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-personal-subprocesos/page.tsx" isMerged="true"
import { GestionPersonalSubprocesos } from "@/components/gestion-personal-subprocesos"

export default function GestionPersonalSubprocesosPage() {
  return (
    <div className="container mx-auto p-6">
      <GestionPersonalSubprocesos />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

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

export const metadata: Metadata = {
  title: "Sayariq System",
  description: "Sistema integral de gestión empresarial",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body className={inter.className}>
        <SidebarProvider>
          <AppSidebar />
          <SidebarInset>
            <main className="flex-1 p-4">{children}</main>
          </SidebarInset>
        </SidebarProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/personas/page.tsx" isMerged="true"
import { PersonasManagement } from "@/components/personas-management"

export default function PersonasPage() {
  return (
    <div className="container mx-auto">
      <PersonasManagement />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
"use client"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="app/lotes-pedidos/page.tsx" isMerged="true"
import { LotesPedidos } from "@/components/lotes-pedidos"

export default function LotesPedidosPage() {
  return (
    <div className="container mx-auto p-6">
      <LotesPedidos />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/lote-liquidacion/page.tsx" isMerged="true"
import { LoteLiquidacion } from "@/components/lote-liquidacion"

export default function LoteLiquidacionPage() {
  return (
    <div className="container mx-auto p-6">
      <LoteLiquidacion />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/lotes-pedidos.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Search,
  Package,
  Scale,
  Calendar,
  Tag,
  TrendingUp,
  TrendingDown,
  CheckCircle,
  AlertCircle,
  Layers,
} from "lucide-react"
import { Progress } from "@/components/ui/progress"

interface CalidadGenerada {
  categoria: string
  kilogramos: number
  porcentaje: number
  esperado: boolean
  observaciones?: string
}

interface LoteDetalle {
  id: string
  loteId: string
  fechaProceso: string
  kilogramosUsados: number
  kilogramosDisponibles: number
  jabas: number
  categoria: string
  eficiencia: number
  calidadesGeneradas: CalidadGenerada[]
}

interface AnalisisLotePedido {
  id: string
  loteId: string
  pedidoId: string
  clienteId: string
  kilogramosSolicitados: number
  kilogramosEntregados: number
  kilogramosAceptadosExtra: number
  jabas: number
  categoria: string
  fechaPedido: string
  fechaCompletado: string
  lotesUtilizados: LoteDetalle[]
  totalSobra: number
  porcentajeEficiencia: number
  estadoCliente: "aceptado" | "rechazado" | "parcial"
  observaciones: string
}

export function LotesPedidos() {
  const [analisisLotes, setAnalisisLotes] = useState<AnalisisLotePedido[]>([
    {
      id: "1",
      loteId: "L001",
      pedidoId: "P001",
      clienteId: "CLI001",
      kilogramosSolicitados: 1000,
      kilogramosEntregados: 1150,
      kilogramosAceptadosExtra: 150,
      jabas: 58,
      categoria: "Exportación",
      fechaPedido: "2024-01-15",
      fechaCompletado: "2024-01-17",
      lotesUtilizados: [
        {
          id: "1",
          loteId: "L001-A",
          fechaProceso: "2024-01-16",
          kilogramosUsados: 450,
          kilogramosDisponibles: 500,
          jabas: 22,
          categoria: "Exportación",
          eficiencia: 90,
          calidadesGeneradas: [
            { categoria: "Exportación", kilogramos: 380, porcentaje: 84.4, esperado: true },
            {
              categoria: "Nacional",
              kilogramos: 50,
              porcentaje: 11.1,
              esperado: false,
              observaciones: "Calidad inferior por humedad",
            },
            {
              categoria: "Descarte",
              kilogramos: 20,
              porcentaje: 4.4,
              esperado: false,
              observaciones: "Producto dañado",
            },
          ],
        },
        {
          id: "2",
          loteId: "L001-B",
          fechaProceso: "2024-01-17",
          kilogramosUsados: 700,
          kilogramosDisponibles: 750,
          jabas: 36,
          categoria: "Exportación",
          eficiencia: 93.3,
          calidadesGeneradas: [
            { categoria: "Exportación", kilogramos: 620, porcentaje: 88.6, esperado: true },
            {
              categoria: "Premium",
              kilogramos: 60,
              porcentaje: 8.6,
              esperado: false,
              observaciones: "Calidad superior inesperada",
            },
            { categoria: "Nacional", kilogramos: 20, porcentaje: 2.9, esperado: false },
          ],
        },
      ],
      totalSobra: 100,
      porcentajeEficiencia: 91.7,
      estadoCliente: "aceptado",
      observaciones: "Cliente aceptó 150kg extra por buena calidad",
    },
    {
      id: "2",
      loteId: "L002",
      pedidoId: "P002",
      clienteId: "CLI002",
      kilogramosSolicitados: 800,
      kilogramosEntregados: 750,
      kilogramosAceptadosExtra: 0,
      jabas: 38,
      categoria: "Nacional",
      fechaPedido: "2024-01-18",
      fechaCompletado: "2024-01-19",
      lotesUtilizados: [
        {
          id: "3",
          loteId: "L002-A",
          fechaProceso: "2024-01-19",
          kilogramosUsados: 750,
          kilogramosDisponibles: 920,
          jabas: 38,
          categoria: "Nacional",
          eficiencia: 81.5,
          calidadesGeneradas: [
            { categoria: "Nacional", kilogramos: 580, porcentaje: 77.3, esperado: true },
            {
              categoria: "Descarte",
              kilogramos: 120,
              porcentaje: 16.0,
              esperado: false,
              observaciones: "Alta humedad y defectos",
            },
            {
              categoria: "Exportación",
              kilogramos: 50,
              porcentaje: 6.7,
              esperado: false,
              observaciones: "Calidad superior inesperada",
            },
          ],
        },
      ],
      totalSobra: 170,
      porcentajeEficiencia: 81.5,
      estadoCliente: "parcial",
      observaciones: "No se completó el pedido por calidad inferior en parte del lote",
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [filtroEstado, setFiltroEstado] = useState("todos")

const filteredAnalisis = analisisLotes.filter((analisis) => {
    const matchesSearch =
      analisis.loteId.toLowerCase().includes(searchTerm.toLowerCase()) ||
      analisis.pedidoId.toLowerCase().includes(searchTerm.toLowerCase()) ||
      analisis.clienteId.toLowerCase().includes(searchTerm.toLowerCase()) ||
      analisis.categoria.toLowerCase().includes(searchTerm.toLowerCase())

const matchesFilter =
      filtroEstado === "todos" ||
      (filtroEstado === "eficiente" && analisis.porcentajeEficiencia >= 90) ||
      (filtroEstado === "sobra" && analisis.totalSobra > 0) ||
      (filtroEstado === "aceptado-extra" && analisis.kilogramosAceptadosExtra > 0) ||
      (filtroEstado === "incompleto" && analisis.kilogramosEntregados < analisis.kilogramosSolicitados)

return matchesSearch && matchesFilter
  })

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "aceptado":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="mr-1 h-3 w-3" />
            Aceptado
          </Badge>
        )
      case "parcial":
        return (
          <Badge className="bg-yellow-100 text-yellow-800">
            <AlertCircle className="mr-1 h-3 w-3" />
            Parcial
          </Badge>
        )
      case "rechazado":
        return (
          <Badge className="bg-red-100 text-red-800">
            <AlertCircle className="mr-1 h-3 w-3" />
            Rechazado
          </Badge>
        )
      default:
        return <Badge variant="outline">{estado}</Badge>
    }
  }

const getCalidadBadge = (calidad: CalidadGenerada) => {
    if (calidad.esperado) {
      return <Badge className="bg-green-100 text-green-800">Esperada</Badge>
    } else if (calidad.categoria === "Premium" || calidad.categoria === "Exportación") {
      return <Badge className="bg-blue-100 text-blue-800">Superior</Badge>
    } else if (calidad.categoria === "Descarte") {
      return <Badge className="bg-red-100 text-red-800">Descarte</Badge>
    } else {
      return <Badge className="bg-yellow-100 text-yellow-800">No Esperada</Badge>
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Análisis Lotes Pedidos</h1>
          <p className="text-muted-foreground">
            Análisis del comportamiento de lotes en pedidos, eficiencia y aceptación de sobras
          </p>
        </div>
      </div>

<div className="flex items-center space-x-2">
        <div className="relative flex-1">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar por lote, pedido, cliente o categoría..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-8"
          />
        </div>
        <Select value={filtroEstado} onValueChange={setFiltroEstado}>
          <SelectTrigger className="w-[200px]">
            <SelectValue placeholder="Filtrar por comportamiento" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="todos">Todos</SelectItem>
            <SelectItem value="eficiente">Alta Eficiencia (≥90%)</SelectItem>
            <SelectItem value="sobra">Con Sobras</SelectItem>
            <SelectItem value="aceptado-extra">Extra Aceptado</SelectItem>
            <SelectItem value="incompleto">Incompletos</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="grid gap-6">
        {filteredAnalisis.map((analisis) => (
          <Card key={analisis.id} className="overflow-hidden">
            <CardHeader className="bg-muted/50">
              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <CardTitle className="flex items-center gap-2">
                    <Package className="h-5 w-5" />
                    Lote {analisis.loteId} - Pedido {analisis.pedidoId}
                  </CardTitle>
                  <CardDescription className="flex items-center gap-4">
                    <span className="flex items-center gap-1">
                      <Calendar className="h-4 w-4" />
                      {analisis.fechaPedido} → {analisis.fechaCompletado}
                    </span>
                    <Badge variant="outline">
                      <Tag className="mr-1 h-3 w-3" />
                      {analisis.categoria}
                    </Badge>
                    <span className="text-sm">Cliente: {analisis.clienteId}</span>
                  </CardDescription>
                </div>
                <div className="text-right space-y-2">
                  <div className="flex items-center gap-2">
                    <Scale className="h-4 w-4 text-muted-foreground" />
                    <span className="font-semibold">{analisis.kilogramosEntregados} kg</span>
                    <span className="text-muted-foreground">de {analisis.kilogramosSolicitados} kg</span>
                  </div>
                  <div className="flex gap-2 items-center">
                    {getEstadoBadge(analisis.estadoCliente)}
                    <div className="flex items-center gap-1">
                      {analisis.porcentajeEficiencia >= 90 ? (
                        <TrendingUp className="h-4 w-4 text-green-600" />
                      ) : (
                        <TrendingDown className="h-4 w-4 text-red-600" />
                      )}
                      <span className="text-sm font-medium">{analisis.porcentajeEficiencia}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6">
              <Tabs defaultValue="resumen" className="w-full">
                <TabsList>
                  <TabsTrigger value="resumen">Resumen</TabsTrigger>
                  <TabsTrigger value="lotes-detalle">Detalle Lotes</TabsTrigger>
                  <TabsTrigger value="calidades">Calidades Generadas</TabsTrigger>
                  <TabsTrigger value="comportamiento">Comportamiento</TabsTrigger>
                </TabsList>

<TabsContent value="resumen" className="space-y-4">
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <Card>
                      <CardContent className="p-4">
                        <div className="text-2xl font-bold text-blue-600">{analisis.kilogramosSolicitados} kg</div>
                        <p className="text-xs text-muted-foreground">Solicitado</p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardContent className="p-4">
                        <div className="text-2xl font-bold text-green-600">{analisis.kilogramosEntregados} kg</div>
                        <p className="text-xs text-muted-foreground">Entregado</p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardContent className="p-4">
                        <div className="text-2xl font-bold text-orange-600">{analisis.kilogramosAceptadosExtra} kg</div>
                        <p className="text-xs text-muted-foreground">Extra Aceptado</p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardContent className="p-4">
                        <div className="text-2xl font-bold text-purple-600">{analisis.totalSobra} kg</div>
                        <p className="text-xs text-muted-foreground">Sobra Total</p>
                      </CardContent>
                    </Card>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>Eficiencia del Lote</span>
                      <span>{analisis.porcentajeEficiencia}%</span>
                    </div>
                    <Progress value={analisis.porcentajeEficiencia} className="h-2" />
                  </div>

{analisis.observaciones && (
                    <Card className="bg-blue-50">
                      <CardContent className="p-4">
                        <p className="text-sm">
                          <strong>Observaciones:</strong> {analisis.observaciones}
                        </p>
                      </CardContent>
                    </Card>
                  )}
                </TabsContent>

<TabsContent value="lotes-detalle" className="space-y-4">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Lote ID</TableHead>
                        <TableHead>Fecha Proceso</TableHead>
                        <TableHead>Usado / Disponible</TableHead>
                        <TableHead>Eficiencia</TableHead>
                        <TableHead>Jabas</TableHead>
                        <TableHead>Categoría</TableHead>
                        <TableHead>Calidades</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {analisis.lotesUtilizados.map((lote) => (
                        <TableRow key={lote.id}>
                          <TableCell className="font-medium">{lote.loteId}</TableCell>
                          <TableCell>{lote.fechaProceso}</TableCell>
                          <TableCell>
                            <div className="space-y-1">
                              <div className="text-sm">
                                {lote.kilogramosUsados} / {lote.kilogramosDisponibles} kg
                              </div>
                              <Progress
                                value={(lote.kilogramosUsados / lote.kilogramosDisponibles) * 100}
                                className="h-1"
                              />
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-1">
                              {lote.eficiencia >= 90 ? (
                                <TrendingUp className="h-4 w-4 text-green-600" />
                              ) : (
                                <TrendingDown className="h-4 w-4 text-red-600" />
                              )}
                              <span className={lote.eficiencia >= 90 ? "text-green-600" : "text-red-600"}>
                                {lote.eficiencia}%
                              </span>
                            </div>
                          </TableCell>
                          <TableCell>{lote.jabas}</TableCell>
                          <TableCell>
                            <Badge variant="outline">{lote.categoria}</Badge>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-1">
                              <Layers className="h-4 w-4 text-muted-foreground" />
                              <span className="text-sm">{lote.calidadesGeneradas.length} tipos</span>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </TabsContent>

<TabsContent value="calidades" className="space-y-4">
                  <div className="space-y-6">
                    {analisis.lotesUtilizados.map((lote) => (
                      <Card key={lote.id}>
                        <CardHeader>
                          <CardTitle className="flex items-center gap-2 text-lg">
                            <Package className="h-5 w-5" />
                            {lote.loteId} - Análisis de Calidades
                          </CardTitle>
                          <CardDescription>
                            Comparación entre calidades esperadas vs obtenidas y su impacto en el pedido
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-6">
                            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                              <Card className="bg-green-50 border-green-200">
                                <CardContent className="p-4">
                                  <div className="text-2xl font-bold text-green-600">
                                    {lote.calidadesGeneradas
                                      .filter((c) => c.esperado)
                                      .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                    kg
                                  </div>
                                  <p className="text-xs text-muted-foreground">Calidad Esperada</p>
                                  <p className="text-xs text-green-600">
                                    {(
                                      (lote.calidadesGeneradas
                                        .filter((c) => c.esperado)
                                        .reduce((sum, c) => sum + c.kilogramos, 0) /
                                        lote.kilogramosUsados) *
                                      100
                                    ).toFixed(1)}
                                    % del lote
                                  </p>
                                </CardContent>
                              </Card>
                              <Card className="bg-blue-50 border-blue-200">
                                <CardContent className="p-4">
                                  <div className="text-2xl font-bold text-blue-600">
                                    {lote.calidadesGeneradas
                                      .filter((c) => !c.esperado && c.categoria !== "Descarte")
                                      .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                    kg
                                  </div>
                                  <p className="text-xs text-muted-foreground">Calidad Reasignable</p>
                                  <p className="text-xs text-blue-600">Puede ir a otros pedidos</p>
                                </CardContent>
                              </Card>
                              <Card className="bg-red-50 border-red-200">
                                <CardContent className="p-4">
                                  <div className="text-2xl font-bold text-red-600">
                                    {lote.calidadesGeneradas
                                      .filter((c) => c.categoria === "Descarte")
                                      .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                    kg
                                  </div>
                                  <p className="text-xs text-muted-foreground">Descarte</p>
                                  <p className="text-xs text-red-600">Pérdida total</p>
                                </CardContent>
                              </Card>
                              <Card className="bg-purple-50 border-purple-200">
                                <CardContent className="p-4">
                                  <div className="text-2xl font-bold text-purple-600">
                                    {(
                                      (lote.calidadesGeneradas
                                        .filter((c) => !c.esperado)
                                        .reduce((sum, c) => sum + c.kilogramos, 0) /
                                        lote.kilogramosUsados) *
                                      100
                                    ).toFixed(1)}
                                    %
                                  </div>
                                  <p className="text-xs text-muted-foreground">Variación</p>
                                  <p className="text-xs text-purple-600">Del total procesado</p>
                                </CardContent>
                              </Card>
                            </div>

<div className="space-y-4">
                              <div className="flex items-center justify-between">
                                <h4 className="text-lg font-semibold">Desglose de Calidades</h4>
                                <Badge variant="outline">
                                  Total: {lote.calidadesGeneradas.reduce((sum, c) => sum + c.kilogramos, 0)} kg
                                </Badge>
                              </div>

<Table>
                                <TableHeader>
                                  <TableRow>
                                    <TableHead>Categoría</TableHead>
                                    <TableHead>Kilogramos</TableHead>
                                    <TableHead>% del Lote</TableHead>
                                    <TableHead>Estado</TableHead>
                                    <TableHead>Impacto en Pedido</TableHead>
                                    <TableHead>Observaciones</TableHead>
                                  </TableRow>
                                </TableHeader>
                                <TableBody>
                                  {lote.calidadesGeneradas
                                    .sort((a, b) => b.kilogramos - a.kilogramos)
                                    .map((calidad, index) => (
                                      <TableRow key={index} className={!calidad.esperado ? "bg-yellow-50" : ""}>
                                        <TableCell className="font-medium">
                                          <Badge
                                            variant="outline"
                                            className={
                                              calidad.categoria === "Exportación"
                                                ? "border-green-500 text-green-700"
                                                : calidad.categoria === "Premium"
                                                  ? "border-blue-500 text-blue-700"
                                                  : calidad.categoria === "Nacional"
                                                    ? "border-orange-500 text-orange-700"
                                                    : calidad.categoria === "Descarte"
                                                      ? "border-red-500 text-red-700"
                                                      : ""
                                            }
                                          >
                                            {calidad.categoria}
                                          </Badge>
                                        </TableCell>
                                        <TableCell>
                                          <div className="font-semibold">{calidad.kilogramos} kg</div>
                                        </TableCell>
                                        <TableCell>
                                          <div className="space-y-1">
                                            <span className="font-medium">{calidad.porcentaje}%</span>
                                            <Progress value={calidad.porcentaje} className="h-2" />
                                          </div>
                                        </TableCell>
                                        <TableCell>{getCalidadBadge(calidad)}</TableCell>
                                        <TableCell>
                                          {calidad.esperado ? (
                                            <Badge className="bg-green-100 text-green-800">✓ Cumple pedido</Badge>
                                          ) : calidad.categoria === "Descarte" ? (
                                            <Badge className="bg-red-100 text-red-800">✗ Pérdida</Badge>
                                          ) : (
                                            <Badge className="bg-blue-100 text-blue-800">→ Reasignar</Badge>
                                          )}
                                        </TableCell>
                                        <TableCell className="text-sm text-muted-foreground max-w-xs">
                                          {calidad.observaciones || "Sin observaciones"}
                                        </TableCell>
                                      </TableRow>
                                    ))}
                                </TableBody>
                              </Table>
                            </div>

{lote.calidadesGeneradas.some((c) => !c.esperado) && (
                              <Card className="bg-orange-50 border-orange-200">
                                <CardHeader>
                                  <CardTitle className="text-lg text-orange-800 flex items-center gap-2">
                                    <AlertCircle className="h-5 w-5" />
                                    Análisis de Variaciones en el Lote
                                  </CardTitle>
                                  <CardDescription>
                                    Explicación de por qué el lote no rindió según lo esperado
                                  </CardDescription>
                                </CardHeader>
                                <CardContent>
                                  <div className="space-y-4">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                      <div>
                                        <h5 className="font-semibold text-orange-800 mb-2">Calidades No Esperadas:</h5>
                                        <div className="space-y-2">
                                          {lote.calidadesGeneradas
                                            .filter((c) => !c.esperado)
                                            .map((calidad, index) => (
                                              <div
                                                key={index}
                                                className="flex justify-between items-center p-2 bg-white rounded border"
                                              >
                                                <div>
                                                  <Badge variant="outline" className="mr-2">
                                                    {calidad.categoria}
                                                  </Badge>
                                                  <span className="text-sm font-medium">{calidad.kilogramos} kg</span>
                                                </div>
                                                <div className="text-right">
                                                  <div className="text-sm text-orange-700">
                                                    {calidad.categoria === "Descarte"
                                                      ? "Pérdida directa"
                                                      : calidad.categoria === "Premium"
                                                        ? "Calidad superior"
                                                        : "Calidad diferente"}
                                                  </div>
                                                  <div className="text-xs text-muted-foreground">
                                                    {calidad.porcentaje}% del lote
                                                  </div>
                                                </div>
                                              </div>
                                            ))}
                                        </div>
                                      </div>

<div>
                                        <h5 className="font-semibold text-orange-800 mb-2">Impacto en el Pedido:</h5>
                                        <div className="space-y-2">
                                          <div className="p-2 bg-white rounded border">
                                            <div className="text-sm">
                                              <strong>Kilogramos perdidos por descarte:</strong>
                                            </div>
                                            <div className="text-lg font-bold text-red-600">
                                              {lote.calidadesGeneradas
                                                .filter((c) => c.categoria === "Descarte")
                                                .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                              kg
                                            </div>
                                          </div>

<div className="p-2 bg-white rounded border">
                                            <div className="text-sm">
                                              <strong>Kilogramos para reasignar:</strong>
                                            </div>
                                            <div className="text-lg font-bold text-blue-600">
                                              {lote.calidadesGeneradas
                                                .filter((c) => !c.esperado && c.categoria !== "Descarte")
                                                .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                              kg
                                            </div>
                                          </div>

<div className="p-2 bg-white rounded border">
                                            <div className="text-sm">
                                              <strong>Eficiencia real del lote:</strong>
                                            </div>
                                            <div className="text-lg font-bold text-green-600">
                                              {(
                                                (lote.calidadesGeneradas
                                                  .filter((c) => c.esperado)
                                                  .reduce((sum, c) => sum + c.kilogramos, 0) /
                                                  lote.kilogramosUsados) *
                                                100
                                              ).toFixed(1)}
                                              %
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>

<div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                                      <h6 className="font-semibold text-blue-800 mb-2">Recomendaciones:</h6>
                                      <ul className="text-sm text-blue-700 space-y-1">
                                        {lote.calidadesGeneradas.some(
                                          (c) => c.categoria === "Descarte" && c.kilogramos > 50,
                                        ) && <li>• Revisar proceso de selección inicial para reducir descarte</li>}
                                        {lote.calidadesGeneradas.some(
                                          (c) => !c.esperado && c.categoria !== "Descarte",
                                        ) && (
                                          <li>
                                            • Considerar reasignar{" "}
                                            {lote.calidadesGeneradas
                                              .filter((c) => !c.esperado && c.categoria !== "Descarte")
                                              .reduce((sum, c) => sum + c.kilogramos, 0)}{" "}
                                            kg a otros pedidos
                                          </li>
                                        )}
                                        {lote.eficiencia < 85 && (
                                          <li>• Evaluar condiciones de almacenamiento y transporte del lote</li>
                                        )}
                                      </ul>
                                    </div>
                                  </div>
                                </CardContent>
                              </Card>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </TabsContent>

<TabsContent value="comportamiento" className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Análisis de Cumplimiento</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="flex justify-between items-center">
                          <span>Pedido Completado:</span>
                          <Badge
                            variant={
                              analisis.kilogramosEntregados >= analisis.kilogramosSolicitados
                                ? "default"
                                : "destructive"
                            }
                          >
                            {analisis.kilogramosEntregados >= analisis.kilogramosSolicitados ? "Sí" : "No"}
                          </Badge>
                        </div>
                        <div className="flex justify-between items-center">
                          <span>Cliente Aceptó Extra:</span>
                          <Badge variant={analisis.kilogramosAceptadosExtra > 0 ? "default" : "secondary"}>
                            {analisis.kilogramosAceptadosExtra > 0 ? "Sí" : "No"}
                          </Badge>
                        </div>
                        <div className="flex justify-between items-center">
                          <span>Eficiencia Alta:</span>
                          <Badge variant={analisis.porcentajeEficiencia >= 90 ? "default" : "destructive"}>
                            {analisis.porcentajeEficiencia >= 90 ? "Sí" : "No"}
                          </Badge>
                        </div>
                      </CardContent>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Impacto Económico</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="flex justify-between items-center">
                          <span>Sobra Generada:</span>
                          <span className="font-semibold text-orange-600">{analisis.totalSobra} kg</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span>Extra Vendido:</span>
                          <span className="font-semibold text-green-600">{analisis.kilogramosAceptadosExtra} kg</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span>Estado Final:</span>
                          {getEstadoBadge(analisis.estadoCliente)}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/lote-liquidacion.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Search, Calculator, DollarSign, Package, Scale, Edit } from "lucide-react"

interface CategoriaVenta {
  categoria: string
  kilogramos: number
  numeroJabas: number
  pesoBajas: number
  pesoNetoSinBajas: number
  precioVenta: number
  pedidoId: string
  totalVenta: number
}

interface LoteData {
  id: string
  loteId: string
  productor: string
  pesoTotal: number
  pesoJabas: number
  pesoNeto: number
  adelantos: number
  categoriasVentas: CategoriaVenta[]
  multiplicadorHumedad: number
  descuentoJabas: boolean
}

export function LoteLiquidacion() {
  const [lotes, setLotes] = useState<LoteData[]>([
    {
      id: "1",
      loteId: "L001",
      productor: "Juan Pérez",
      pesoTotal: 1000,
      pesoJabas: 50,
      pesoNeto: 950,
      adelantos: 500,
      multiplicadorHumedad: 0.95,
      descuentoJabas: true,
      categoriasVentas: [
        {
          categoria: "Exportación Premium",
          kilogramos: 400,
          numeroJabas: 20,
          pesoBajas: 15,
          pesoNetoSinBajas: 385,
          precioVenta: 5.5,
          pedidoId: "P001",
          totalVenta: 2200,
        },
        {
          categoria: "Exportación Estándar",
          kilogramos: 350,
          numeroJabas: 18,
          pesoBajas: 12,
          pesoNetoSinBajas: 338,
          precioVenta: 4.8,
          pedidoId: "P001",
          totalVenta: 1680,
        },
        {
          categoria: "Nacional",
          kilogramos: 200,
          numeroJabas: 10,
          pesoBajas: 8,
          pesoNetoSinBajas: 192,
          precioVenta: 3.2,
          pedidoId: "P002",
          totalVenta: 640,
        },
      ],
    },
  ])

const [selectedLote, setSelectedLote] = useState<LoteData>(lotes[0])
  const [searchTerm, setSearchTerm] = useState("")
  const [editingPrices, setEditingPrices] = useState(false)

const calcularTotalVentas = (lote: LoteData) => {
    return lote.categoriasVentas.reduce((sum, cat) => sum + cat.totalVenta, 0)
  }

const calcularPesoLiquidacion = (lote: LoteData) => {
    let pesoFinal = lote.pesoTotal
    if (lote.descuentoJabas) {
      pesoFinal -= lote.pesoJabas
    }
    return pesoFinal * lote.multiplicadorHumedad
  }

const calcularLiquidacionFinal = (lote: LoteData) => {
    const totalVentas = calcularTotalVentas(lote)
    const liquidacion = totalVentas - lote.adelantos
    return liquidacion
  }

const handleUpdatePrice = (categoriaIndex: number, newPrice: number) => {
    const updatedLote = { ...selectedLote }
    updatedLote.categoriasVentas[categoriaIndex].precioVenta = newPrice
    updatedLote.categoriasVentas[categoriaIndex].totalVenta =
      updatedLote.categoriasVentas[categoriaIndex].kilogramos * newPrice
    setSelectedLote(updatedLote)
  }

const handleUpdateMultiplicador = (newMultiplicador: number) => {
    setSelectedLote({ ...selectedLote, multiplicadorHumedad: newMultiplicador })
  }

const handleUpdateNumeroJabas = (categoriaIndex: number, newValue: number) => {
    const updatedLote = { ...selectedLote }
    updatedLote.categoriasVentas[categoriaIndex].numeroJabas = newValue
    setSelectedLote(updatedLote)
  }

const handleUpdatePesoBajas = (categoriaIndex: number, newValue: number) => {
    const updatedLote = { ...selectedLote }
    updatedLote.categoriasVentas[categoriaIndex].pesoBajas = newValue
    updatedLote.categoriasVentas[categoriaIndex].pesoNetoSinBajas =
      updatedLote.categoriasVentas[categoriaIndex].kilogramos - newValue
    setSelectedLote(updatedLote)
  }

const handleUpdatePesoNetoSinBajas = (categoriaIndex: number, newValue: number) => {
    const updatedLote = { ...selectedLote }
    updatedLote.categoriasVentas[categoriaIndex].pesoNetoSinBajas = newValue
    setSelectedLote(updatedLote)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Lote Liquidación</h1>
          <p className="text-muted-foreground">
            Cálculo automático de liquidaciones con análisis detallado de ventas y costos
          </p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Selector de Lote */}
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="text-lg">Seleccionar Lote</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="relative">
              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar lote..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-8"
              />
            </div>
            <div className="space-y-2">
              {lotes.map((lote) => (
                <Button
                  key={lote.id}
                  variant={selectedLote.id === lote.id ? "default" : "outline"}
                  className="w-full justify-start"
                  onClick={() => setSelectedLote(lote)}
                >
                  <Package className="mr-2 h-4 w-4" />
                  {lote.loteId}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Detalles del Lote */}
        <div className="lg:col-span-3 space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center gap-2">
                    <Calculator className="h-5 w-5" />
                    Liquidación Lote {selectedLote.loteId}
                  </CardTitle>
                  <CardDescription>Productor: {selectedLote.productor}</CardDescription>
                </div>
                <Badge variant="outline" className="text-lg px-3 py-1">
                  <DollarSign className="mr-1 h-4 w-4" />${calcularLiquidacionFinal(selectedLote).toFixed(2)}
                </Badge>
              </div>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="ventas" className="w-full">
                <TabsList className="grid w-full grid-cols-4">
                  <TabsTrigger value="ventas">Ventas por Categoría</TabsTrigger>
                  <TabsTrigger value="calculos">Cálculos</TabsTrigger>
                  <TabsTrigger value="ajustes">Ajustes</TabsTrigger>
                  <TabsTrigger value="resumen">Resumen</TabsTrigger>
                </TabsList>

<TabsContent value="ventas" className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold">Categorías Extraídas y Ventas</h3>
                    <Button variant="outline" size="sm" onClick={() => setEditingPrices(!editingPrices)}>
                      <Edit className="mr-2 h-4 w-4" />
                      {editingPrices ? "Guardar" : "Editar Precios"}
                    </Button>
                  </div>

<Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Categoría</TableHead>
                        <TableHead>Kilogramos</TableHead>
                        <TableHead>Número de Jabas</TableHead>
                        <TableHead>Peso de Bajas</TableHead>
                        <TableHead>Peso Neto sin Bajas</TableHead>
                        <TableHead>Precio Venta</TableHead>
                        <TableHead>Pedido</TableHead>
                        <TableHead>Total Venta</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {selectedLote.categoriasVentas.map((categoria, index) => (
                        <TableRow key={index}>
                          <TableCell className="font-medium">{categoria.categoria}</TableCell>
                          <TableCell>{categoria.kilogramos} kg</TableCell>
                          <TableCell>
                            <Input
                              type="number"
                              step="1"
                              value={categoria.numeroJabas}
                              onChange={(e) => handleUpdateNumeroJabas(index, Number.parseInt(e.target.value))}
                              className="w-20"
                            />
                          </TableCell>
                          <TableCell>
                            <Input
                              type="number"
                              step="0.1"
                              value={categoria.pesoBajas}
                              onChange={(e) => handleUpdatePesoBajas(index, Number.parseFloat(e.target.value))}
                              className="w-20"
                            />
                          </TableCell>
                          <TableCell>
                            <Input
                              type="number"
                              step="0.1"
                              value={categoria.pesoNetoSinBajas}
                              onChange={(e) => handleUpdatePesoNetoSinBajas(index, Number.parseFloat(e.target.value))}
                              className="w-24"
                            />
                          </TableCell>
                          <TableCell>
                            {editingPrices ? (
                              <Input
                                type="number"
                                step="0.01"
                                value={categoria.precioVenta}
                                onChange={(e) => handleUpdatePrice(index, Number.parseFloat(e.target.value))}
                                className="w-20"
                              />
                            ) : (
                              `$${categoria.precioVenta.toFixed(2)}`
                            )}
                          </TableCell>
                          <TableCell>
                            <Badge variant="outline">{categoria.pedidoId}</Badge>
                          </TableCell>
                          <TableCell className="font-semibold">${categoria.totalVenta.toFixed(2)}</TableCell>
                        </TableRow>
                      ))}
                      <TableRow className="bg-muted/50 font-semibold">
                        <TableCell colSpan={7}>Total Ventas</TableCell>
                        <TableCell>${calcularTotalVentas(selectedLote).toFixed(2)}</TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </TabsContent>

<TabsContent value="calculos" className="space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Pesos</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex justify-between">
                          <span>Peso Total:</span>
                          <span className="font-semibold">{selectedLote.pesoTotal} kg</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Peso Jabas:</span>
                          <span className="font-semibold">{selectedLote.pesoJabas} kg</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Peso Neto:</span>
                          <span className="font-semibold">{selectedLote.pesoNeto} kg</span>
                        </div>
                        <Separator />
                        <div className="flex justify-between">
                          <span>Peso Liquidación:</span>
                          <span className="font-semibold text-primary">
                            {calcularPesoLiquidacion(selectedLote).toFixed(2)} kg
                          </span>
                        </div>
                      </CardContent>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Financiero</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex justify-between">
                          <span>Total Ventas:</span>
                          <span className="font-semibold text-green-600">
                            ${calcularTotalVentas(selectedLote).toFixed(2)}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span>Adelantos:</span>
                          <span className="font-semibold text-red-600">-${selectedLote.adelantos.toFixed(2)}</span>
                        </div>
                        <Separator />
                        <div className="flex justify-between">
                          <span>Liquidación Final:</span>
                          <span className="font-semibold text-primary text-lg">
                            ${calcularLiquidacionFinal(selectedLote).toFixed(2)}
                          </span>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

<TabsContent value="ajustes" className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Ajustes de Peso</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="descuento-jabas"
                            checked={selectedLote.descuentoJabas}
                            onChange={(e) =>
                              setSelectedLote({
                                ...selectedLote,
                                descuentoJabas: e.target.checked,
                              })
                            }
                          />
                          <Label htmlFor="descuento-jabas">Descontar peso de jabas</Label>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="multiplicador-humedad">
                            Multiplicador Humedad ({(selectedLote.multiplicadorHumedad * 100).toFixed(1)}%)
                          </Label>
                          <Input
                            id="multiplicador-humedad"
                            type="number"
                            step="0.01"
                            min="0"
                            max="1"
                            value={selectedLote.multiplicadorHumedad}
                            onChange={(e) => handleUpdateMultiplicador(Number.parseFloat(e.target.value))}
                          />
                        </div>
                      </CardContent>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Adelantos</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="adelantos">Adelantos Otorgados</Label>
                          <Input
                            id="adelantos"
                            type="number"
                            step="0.01"
                            value={selectedLote.adelantos}
                            onChange={(e) =>
                              setSelectedLote({
                                ...selectedLote,
                                adelantos: Number.parseFloat(e.target.value),
                              })
                            }
                          />
                        </div>

<div className="text-sm text-muted-foreground">
                          <p>
                            Los adelantos se descuentan automáticamente del total de ventas para calcular la liquidación
                            final.
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

<TabsContent value="resumen" className="space-y-4">
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-xl">Resumen de Liquidación</CardTitle>
                      <CardDescription>
                        Lote {selectedLote.loteId} - {selectedLote.productor}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div className="grid grid-cols-3 gap-4">
                        <div className="text-center p-4 bg-blue-50 rounded-lg">
                          <Scale className="mx-auto h-8 w-8 text-blue-600 mb-2" />
                          <div className="text-2xl font-bold text-blue-600">
                            {calcularPesoLiquidacion(selectedLote).toFixed(0)}
                          </div>
                          <div className="text-sm text-blue-600">kg Liquidación</div>
                        </div>

<div className="text-center p-4 bg-green-50 rounded-lg">
                          <DollarSign className="mx-auto h-8 w-8 text-green-600 mb-2" />
                          <div className="text-2xl font-bold text-green-600">
                            ${calcularTotalVentas(selectedLote).toFixed(0)}
                          </div>
                          <div className="text-sm text-green-600">Total Ventas</div>
                        </div>

<div className="text-center p-4 bg-primary/10 rounded-lg">
                          <Calculator className="mx-auto h-8 w-8 text-primary mb-2" />
                          <div className="text-2xl font-bold text-primary">
                            ${calcularLiquidacionFinal(selectedLote).toFixed(0)}
                          </div>
                          <div className="text-sm text-primary">Liquidación Final</div>
                        </div>
                      </div>

<div className="space-y-3">
                        <h4 className="font-semibold">Desglose de Cálculo:</h4>
                        <div className="space-y-2 text-sm">
                          <div className="flex justify-between">
                            <span>Peso original:</span>
                            <span>{selectedLote.pesoTotal} kg</span>
                          </div>
                          {selectedLote.descuentoJabas && (
                            <div className="flex justify-between">
                              <span>- Descuento jabas:</span>
                              <span>{selectedLote.pesoJabas} kg</span>
                            </div>
                          )}
                          <div className="flex justify-between">
                            <span>× Multiplicador humedad:</span>
                            <span>{(selectedLote.multiplicadorHumedad * 100).toFixed(1)}%</span>
                          </div>
                          <div className="flex justify-between font-semibold border-t pt-2">
                            <span>= Peso liquidación:</span>
                            <span>{calcularPesoLiquidacion(selectedLote).toFixed(2)} kg</span>
                          </div>
                        </div>
                      </div>

<Button className="w-full" size="lg">
                        <Calculator className="mr-2 h-4 w-4" />
                        Procesar Liquidación
                      </Button>
                    </CardContent>
                  </Card>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/asignacion-procesamiento/page.tsx" isMerged="true"
import { AsignacionProcesamiento } from "@/components/asignacion-procesamiento"

export default function AsignacionProcesamientoPage() {
  return (
    <div className="container mx-auto p-6">
      <AsignacionProcesamiento />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/client-search-combobox.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Search, X } from "lucide-react"

interface Cliente {
  id: string
  nombre: string
  tipoCliente: "nacional" | "internacional"
  ruc?: string
  direccion: string
  ciudad: string
  pais: string
  contacto: {
    nombre: string
    cargo: string
    telefono: string
    email: string
  }
}

interface ClientSearchComboboxProps {
  value: Cliente | null
  onChange: (cliente: Cliente) => void
  clientes: Cliente[]
}

export function ClientSearchCombobox({ value, onChange, clientes }: ClientSearchComboboxProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")

const filteredClientes = useMemo(() => {
    if (!searchTerm) return clientes
    return clientes.filter(
      (cliente) =>
        cliente.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.contacto.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
        cliente.ciudad.toLowerCase().includes(searchTerm.toLowerCase()),
    )
  }, [searchTerm, clientes])

return (
    <div className="relative">
      <div className="flex gap-2">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            placeholder="Buscar cliente por nombre, contacto o ciudad..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setIsOpen(true)
            }}
            onFocus={() => setIsOpen(true)}
            className="pl-10"
          />
        </div>
        {value && (
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              onChange(null as any)
              setSearchTerm("")
            }}
          >
            <X className="h-4 w-4" />
          </Button>
        )}
      </div>

{isOpen && (
        <Card className="absolute top-full left-0 right-0 mt-2 z-50 max-h-64 overflow-y-auto">
          {filteredClientes.length > 0 ? (
            <div className="divide-y">
              {filteredClientes.map((cliente) => (
                <button
                  key={cliente.id}
                  onClick={() => {
                    onChange(cliente)
                    setIsOpen(false)
                    setSearchTerm("")
                  }}
                  className="w-full text-left p-3 hover:bg-gray-50 transition-colors"
                >
                  <div className="font-medium">{cliente.nombre}</div>
                  <div className="text-sm text-gray-600">
                    {cliente.contacto.nombre} - {cliente.ciudad}, {cliente.pais}
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div className="p-4 text-center text-gray-500">No se encontraron clientes</div>
          )}
        </Card>
      )}

{value && (
        <Card className="mt-2 p-3 bg-blue-50 border-blue-200">
          <div className="font-medium">{value.nombre}</div>
          <div className="text-sm text-gray-600">
            {value.contacto.nombre} - {value.ciudad}, {value.pais}
          </div>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/lotes-asignacion-modal.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Search, Check } from "lucide-react"

interface Lote {
  id: string
  codigo: string
  producto: string
  presentacion: string
  numeroJabas: number
  pesoTotal: number
  estado: string
  fechaIngreso: string
}

interface LotesAsignacionModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: (lotes: Lote[]) => void
  lotesDisponibles: Lote[]
}

export function LotesAsignacionModal({ open, onOpenChange, onConfirm, lotesDisponibles }: LotesAsignacionModalProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedLotes, setSelectedLotes] = useState<string[]>([])

const filteredLotes = useMemo(() => {
    if (!searchTerm) return lotesDisponibles
    return lotesDisponibles.filter(
      (lote) =>
        lote.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
        lote.producto.toLowerCase().includes(searchTerm.toLowerCase()),
    )
  }, [searchTerm, lotesDisponibles])

const handleConfirm = () => {
    const lotesSeleccionados = lotesDisponibles.filter((lote) => selectedLotes.includes(lote.id))
    onConfirm(lotesSeleccionados)
    setSelectedLotes([])
    setSearchTerm("")
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Asignar Lotes al Pedido</DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Búsqueda de lotes */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Buscar lote por código o producto..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

{/* Tabla de lotes disponibles */}
          <div className="border rounded-lg overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">
                    <input
                      type="checkbox"
                      checked={selectedLotes.length === filteredLotes.length && filteredLotes.length > 0}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setSelectedLotes(filteredLotes.map((l) => l.id))
                        } else {
                          setSelectedLotes([])
                        }
                      }}
                      className="rounded"
                    />
                  </TableHead>
                  <TableHead>Código</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead>Presentación</TableHead>
                  <TableHead>Jabas</TableHead>
                  <TableHead>Peso (kg)</TableHead>
                  <TableHead>Fecha Ingreso</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredLotes.map((lote) => (
                  <TableRow key={lote.id}>
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={selectedLotes.includes(lote.id)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setSelectedLotes([...selectedLotes, lote.id])
                          } else {
                            setSelectedLotes(selectedLotes.filter((id) => id !== lote.id))
                          }
                        }}
                        className="rounded"
                      />
                    </TableCell>
                    <TableCell className="font-medium">{lote.codigo}</TableCell>
                    <TableCell>{lote.producto}</TableCell>
                    <TableCell>{lote.presentacion}</TableCell>
                    <TableCell>{lote.numeroJabas}</TableCell>
                    <TableCell>{lote.pesoTotal} kg</TableCell>
                    <TableCell>{lote.fechaIngreso}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

{/* Resumen de selección */}
          {selectedLotes.length > 0 && (
            <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
              <p className="text-sm font-medium">
                {selectedLotes.length} lote{selectedLotes.length !== 1 ? "s" : ""} seleccionado
                {selectedLotes.length !== 1 ? "s" : ""}
              </p>
            </div>
          )}

{/* Botones de acción */}
          <div className="flex justify-end gap-3">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button onClick={handleConfirm} disabled={selectedLotes.length === 0}>
              <Check className="h-4 w-4 mr-2" />
              Confirmar Asignación
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/registro-pesos.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { BarChart3, TrendingUp, Package, Factory, Trophy, Edit, Save, Search } from "lucide-react"

interface ProcesoActivo {
  id: string
  asignacion: string
  asig01: string
  asig02: string
  asig03: string
  lote: string
  productor: string
  numeroJabas: number
  fechaIngreso: string
  fechaProceso: string
  estado: "en-proceso" | "completado" | "pausado"
  eficiencia: number
}

interface RegistroProduccion {
  asignacion: string
  categorias: {
    exportable: number
    industrial: number
    nacional: number
    jugo: number
    descarte: number
    primera: number
    segunda: number
    tercera: number
    cuarta: number
    quinta: number
    dedos: number
  }
  kilogramos: number
  numeroJabas: number
  pesoJabas: number
  humedad: number
  pesoNeto: number
  precio: number
  pedido: string
  totalValor: number
  observaciones: string
  enfermedades: {
    pudicionBacteriana: number
    pudicionHongo: number
    verruga: number
    moho: number
    otros: number
  }
  defectos: {
    danoMecanico: number
    deshidratado: number
    verdeado: number
    pelado: number
  }
}

const procesosActivos: ProcesoActivo[] = [
  {
    id: "PROC-001",
    asignacion: "ASIG-001",
    asig01: "ASG01-001",
    asig02: "ASG02-001",
    asig03: "ASG03-001",
    lote: "LOT-2024-018",
    productor: "Juan Carlos Mendoza",
    numeroJabas: 45,
    fechaIngreso: "2024-12-10",
    fechaProceso: "2024-12-20",
    estado: "en-proceso",
    eficiencia: 87,
  },
  {
    id: "PROC-002",
    asignacion: "ASIG-002",
    asig01: "ASG01-002",
    asig02: "ASG02-002",
    asig03: "ASG03-002",
    lote: "LOT-2024-019",
    productor: "María Elena Vásquez",
    numeroJabas: 30,
    fechaIngreso: "2024-12-15",
    fechaProceso: "2024-12-21",
    estado: "completado",
    eficiencia: 92,
  },
]

export function RegistroPesos() {
  const [searchTerm, setSearchTerm] = useState("")
  const [modalRegistro, setModalRegistro] = useState(false)
  const [procesoSeleccionado, setProcesoSeleccionado] = useState<ProcesoActivo | null>(null)
  const [registroProduccion, setRegistroProduccion] = useState<RegistroProduccion>({
    asignacion: "",
    categorias: {
      exportable: 0,
      industrial: 0,
      nacional: 0,
      jugo: 0,
      descarte: 0,
      primera: 0,
      segunda: 0,
      tercera: 0,
      cuarta: 0,
      quinta: 0,
      dedos: 0,
    },
    kilogramos: 0,
    numeroJabas: 0,
    pesoJabas: 0,
    humedad: 0,
    pesoNeto: 0,
    precio: 0,
    pedido: "",
    totalValor: 0,
    observaciones: "",
    enfermedades: {
      pudicionBacteriana: 0,
      pudicionHongo: 0,
      verruga: 0,
      moho: 0,
      otros: 0,
    },
    defectos: {
      danoMecanico: 0,
      deshidratado: 0,
      verdeado: 0,
      pelado: 0,
    },
  })

const lotesFiltrados = procesosActivos.filter((proceso) => {
    return (
      proceso.lote.toLowerCase().includes(searchTerm.toLowerCase()) ||
      proceso.asignacion.toLowerCase().includes(searchTerm.toLowerCase()) ||
      proceso.productor.toLowerCase().includes(searchTerm.toLowerCase())
    )
  })

const abrirRegistro = (proceso: ProcesoActivo) => {
    setProcesoSeleccionado(proceso)
    setRegistroProduccion({
      asignacion: proceso.asignacion,
      categorias: {
        exportable: 0,
        industrial: 0,
        nacional: 0,
        jugo: 0,
        descarte: 0,
        primera: 0,
        segunda: 0,
        tercera: 0,
        cuarta: 0,
        quinta: 0,
        dedos: 0,
      },
      kilogramos: 0,
      numeroJabas: 0,
      pesoJabas: 0,
      humedad: 0,
      pesoNeto: 0,
      precio: 0,
      pedido: "",
      totalValor: 0,
      observaciones: "",
      enfermedades: {
        pudicionBacteriana: 0,
        pudicionHongo: 0,
        verruga: 0,
        moho: 0,
        otros: 0,
      },
      defectos: {
        danoMecanico: 0,
        deshidratado: 0,
        verdeado: 0,
        pelado: 0,
      },
    })
    setModalRegistro(true)
  }

const guardarRegistro = () => {
    console.log("Guardando registro:", registroProduccion)
    setModalRegistro(false)
  }

const actualizarCategoria = (categoria: keyof RegistroProduccion["categorias"], valor: number) => {
    setRegistroProduccion((prev) => ({
      ...prev,
      categorias: {
        ...prev.categorias,
        [categoria]: valor,
      },
    }))
  }

const actualizarEnfermedad = (enfermedad: keyof RegistroProduccion["enfermedades"], valor: number) => {
    setRegistroProduccion((prev) => ({
      ...prev,
      enfermedades: {
        ...prev.enfermedades,
        [enfermedad]: valor,
      },
    }))
  }

const actualizarDefecto = (defecto: keyof RegistroProduccion["defectos"], valor: number) => {
    setRegistroProduccion((prev) => ({
      ...prev,
      defectos: {
        ...prev.defectos,
        [defecto]: valor,
      },
    }))
  }

const totalProcesos = procesosActivos.length
  const procesosCompletados = procesosActivos.filter((p) => p.estado === "completado").length
  const eficienciaPromedio = procesosActivos.reduce((sum, p) => sum + p.eficiencia, 0) / totalProcesos

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Registro de Pesos</h1>
          <p className="text-muted-foreground">Control y registro de pesos en producción</p>
        </div>
      </div>

{/* KPIs principales */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        <Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{totalProcesos}</p>
                <p className="text-xs text-muted-foreground">Procesos Activos</p>
              </div>
              <Factory className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">
                  {procesosCompletados}/{totalProcesos}
                </p>
                <p className="text-xs text-muted-foreground">Completados</p>
              </div>
              <Trophy className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{eficienciaPromedio.toFixed(1)}%</p>
                <p className="text-xs text-muted-foreground">Eficiencia Promedio</p>
              </div>
              <TrendingUp className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>

<Card className="p-3">
          <CardContent className="p-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-lg font-bold">{procesosActivos.reduce((sum, p) => sum + p.numeroJabas, 0)}</p>
                <p className="text-xs text-muted-foreground">Total Jabas</p>
              </div>
              <Package className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Búsqueda */}
      <Card className="p-4">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            placeholder="Buscar por lote, asignación o productor..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10"
          />
        </div>
      </Card>

{/* Tabla de procesos */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Control de Lotes en Producción
          </CardTitle>
          <CardDescription>Registro de pesos y categorías de producción</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Asignación</TableHead>
                  <TableHead>Asig01</TableHead>
                  <TableHead>Asig02</TableHead>
                  <TableHead>Asig03</TableHead>
                  <TableHead>Lote</TableHead>
                  <TableHead>Productor</TableHead>
                  <TableHead>Número Jabas</TableHead>
                  <TableHead>Fecha Ingreso</TableHead>
                  <TableHead>Fecha Proceso</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {lotesFiltrados.map((proceso) => (
                  <TableRow key={proceso.id}>
                    <TableCell className="font-medium">{proceso.asignacion}</TableCell>
                    <TableCell>{proceso.asig01}</TableCell>
                    <TableCell>{proceso.asig02}</TableCell>
                    <TableCell>{proceso.asig03}</TableCell>
                    <TableCell className="font-medium">{proceso.lote}</TableCell>
                    <TableCell>{proceso.productor}</TableCell>
                    <TableCell>{proceso.numeroJabas}</TableCell>
                    <TableCell>{proceso.fechaIngreso}</TableCell>
                    <TableCell>{proceso.fechaProceso}</TableCell>
                    <TableCell>
                      <Badge
                        className={
                          proceso.estado === "completado"
                            ? "bg-green-100 text-green-800"
                            : proceso.estado === "en-proceso"
                              ? "bg-blue-100 text-blue-800"
                              : "bg-yellow-100 text-yellow-800"
                        }
                      >
                        {proceso.estado}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <Button size="sm" variant="outline" onClick={() => abrirRegistro(proceso)}>
                        <Edit className="h-4 w-4 mr-1" />
                        Registrar
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Modal de Registro de Producción */}
      <Dialog open={modalRegistro} onOpenChange={setModalRegistro}>
        <DialogContent className="max-w-6xl max-h-[95vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Registrar Producción</DialogTitle>
            <DialogDescription>
              Registro de peso para la asignación: {procesoSeleccionado?.asignacion}
            </DialogDescription>
          </DialogHeader>

{procesoSeleccionado && (
            <div className="space-y-6">
              {/* Información de la asignación */}
              <Card className="p-4 bg-blue-50 border-blue-200">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div>
                    <p className="text-sm text-gray-600">Asignación</p>
                    <p className="font-semibold">{procesoSeleccionado.asignacion}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Lote</p>
                    <p className="font-semibold">{procesoSeleccionado.lote}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Productor</p>
                    <p className="font-semibold">{procesoSeleccionado.productor}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Número Jabas</p>
                    <p className="font-semibold">{procesoSeleccionado.numeroJabas}</p>
                  </div>
                </div>
              </Card>

{/* Tabla de Categorías */}
              <Card className="p-4">
                <h3 className="font-semibold mb-4">Distribución por Categorías</h3>
                <div className="space-y-4">
                  {/* Grupo 1: Exportable, Industrial, Nacional, Jugo, Descarte */}
                  <div>
                    <h4 className="text-sm font-medium mb-3 text-gray-700">Grupo 1: Calidad de Exportación</h4>
                    <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                      <div className="space-y-2">
                        <Label className="text-sm text-green-600">Exportable (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.exportable}
                          onChange={(e) => actualizarCategoria("exportable", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-blue-600">Industrial (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.industrial}
                          onChange={(e) => actualizarCategoria("industrial", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-purple-600">Nacional (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.nacional}
                          onChange={(e) => actualizarCategoria("nacional", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-orange-600">Jugo (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.jugo}
                          onChange={(e) => actualizarCategoria("jugo", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-red-600">Descarte (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.descarte}
                          onChange={(e) => actualizarCategoria("descarte", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                    </div>
                  </div>

{/* Grupo 2: Primera, Segunda, Tercera, Cuarta, Quinta, Dedos, Descarte */}
                  <div>
                    <h4 className="text-sm font-medium mb-3 text-gray-700">Grupo 2: Clasificación por Grado</h4>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                      <div className="space-y-2">
                        <Label className="text-sm text-green-600">Primera (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.primera}
                          onChange={(e) => actualizarCategoria("primera", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-blue-600">Segunda (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.segunda}
                          onChange={(e) => actualizarCategoria("segunda", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-yellow-600">Tercera (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.tercera}
                          onChange={(e) => actualizarCategoria("tercera", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-orange-600">Cuarta (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.cuarta}
                          onChange={(e) => actualizarCategoria("cuarta", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-red-600">Quinta (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.quinta}
                          onChange={(e) => actualizarCategoria("quinta", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-sm text-gray-600">Dedos (kg)</Label>
                        <Input
                          type="number"
                          value={registroProduccion.categorias.dedos}
                          onChange={(e) => actualizarCategoria("dedos", Number(e.target.value) || 0)}
                          placeholder="0"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

{/* Datos de Producción */}
              <Card className="p-4">
                <h3 className="font-semibold mb-4">Datos de Producción</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label>Kilogramos</Label>
                    <Input
                      type="number"
                      value={registroProduccion.kilogramos}
                      onChange={(e) =>
                        setRegistroProduccion((prev) => ({ ...prev, kilogramos: Number(e.target.value) }))
                      }
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Número de Jabas</Label>
                    <Input
                      type="number"
                      value={registroProduccion.numeroJabas}
                      onChange={(e) =>
                        setRegistroProduccion((prev) => ({ ...prev, numeroJabas: Number(e.target.value) }))
                      }
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Peso de Jabas (kg)</Label>
                    <Input
                      type="number"
                      value={registroProduccion.pesoJabas}
                      onChange={(e) =>
                        setRegistroProduccion((prev) => ({ ...prev, pesoJabas: Number(e.target.value) }))
                      }
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Humedad (%)</Label>
                    <Input
                      type="number"
                      value={registroProduccion.humedad}
                      onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, humedad: Number(e.target.value) }))}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Peso Neto (kg)</Label>
                    <Input
                      type="number"
                      value={registroProduccion.pesoNeto}
                      onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, pesoNeto: Number(e.target.value) }))}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Precio</Label>
                    <Input
                      type="number"
                      value={registroProduccion.precio}
                      onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, precio: Number(e.target.value) }))}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Pedido</Label>
                    <Input
                      value={registroProduccion.pedido}
                      onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, pedido: e.target.value }))}
                      placeholder="PED-2024-001"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Total Valor</Label>
                    <Input
                      type="number"
                      value={registroProduccion.totalValor}
                      onChange={(e) =>
                        setRegistroProduccion((prev) => ({ ...prev, totalValor: Number(e.target.value) }))
                      }
                      placeholder="0"
                    />
                  </div>
                </div>
              </Card>

{/* Observaciones */}
              <Card className="p-4">
                <h3 className="font-semibold mb-4">Observaciones</h3>
                <Textarea
                  value={registroProduccion.observaciones}
                  onChange={(e) => setRegistroProduccion((prev) => ({ ...prev, observaciones: e.target.value }))}
                  placeholder="Observaciones adicionales sobre el proceso..."
                  rows={3}
                />
              </Card>

{/* Enfermedades */}
              <Card className="p-4">
                <h3 className="font-semibold mb-4">Enfermedades Detectadas (%)</h3>
                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                  <div className="space-y-2">
                    <Label className="text-sm">Pudrición Bacteriana</Label>
                    <Input
                      type="number"
                      value={registroProduccion.enfermedades.pudicionBacteriana}
                      onChange={(e) => actualizarEnfermedad("pudicionBacteriana", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Pudrición por Hongo</Label>
                    <Input
                      type="number"
                      value={registroProduccion.enfermedades.pudicionHongo}
                      onChange={(e) => actualizarEnfermedad("pudicionHongo", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Verruga</Label>
                    <Input
                      type="number"
                      value={registroProduccion.enfermedades.verruga}
                      onChange={(e) => actualizarEnfermedad("verruga", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Moho</Label>
                    <Input
                      type="number"
                      value={registroProduccion.enfermedades.moho}
                      onChange={(e) => actualizarEnfermedad("moho", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Otros</Label>
                    <Input
                      type="number"
                      value={registroProduccion.enfermedades.otros}
                      onChange={(e) => actualizarEnfermedad("otros", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                </div>
              </Card>

{/* Defectos */}
              <Card className="p-4">
                <h3 className="font-semibold mb-4">Defectos Detectados (%)</h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  <div className="space-y-2">
                    <Label className="text-sm">Daño Mecánico</Label>
                    <Input
                      type="number"
                      value={registroProduccion.defectos.danoMecanico}
                      onChange={(e) => actualizarDefecto("danoMecanico", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Deshidratado</Label>
                    <Input
                      type="number"
                      value={registroProduccion.defectos.deshidratado}
                      onChange={(e) => actualizarDefecto("deshidratado", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Verdeado</Label>
                    <Input
                      type="number"
                      value={registroProduccion.defectos.verdeado}
                      onChange={(e) => actualizarDefecto("verdeado", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm">Pelado</Label>
                    <Input
                      type="number"
                      value={registroProduccion.defectos.pelado}
                      onChange={(e) => actualizarDefecto("pelado", Number(e.target.value) || 0)}
                      placeholder="0"
                    />
                  </div>
                </div>
              </Card>

{/* Botones de acción */}
              <div className="flex justify-end gap-3">
                <Button variant="outline" onClick={() => setModalRegistro(false)}>
                  Cancelar
                </Button>
                <Button onClick={guardarRegistro}>
                  <Save className="h-4 w-4 mr-2" />
                  Guardar Registro
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/registro-pesos/page.tsx" isMerged="true"
import { RegistroPesos } from "@/components/registro-pesos"

export default function RegistroPesosPage() {
  return <RegistroPesos />
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  BarChart3,
  Users,
  Package,
  ShoppingCart,
  DollarSign,
  FileText,
  Home,
  ChevronDown,
  ChevronRight,
  Truck,
  Factory,
  UserCheck,
  Calculator,
  TrendingUp,
  ClipboardList,
  Archive,
  CreditCard,
  Receipt,
  Building2,
  PieChart,
  Target,
  Zap,
  CheckSquare,
  AlertCircle,
  Layers,
  UserCog,
  BarChart2,
} from "lucide-react"
import { cn } from "@/lib/utils"

interface NavItem {
  title: string
  href?: string
  icon: React.ComponentType<{ className?: string }>
  badge?: string
  children?: NavItem[]
}

const navigationItems: NavItem[] = [
  {
    title: "Dashboard",
    href: "/",
    icon: Home,
  },
  {
    title: "Gestión de Personas",
    icon: Users,
    children: [
      {
        title: "Registro de Personas",
        href: "/personas",
        icon: UserCheck,
      },
      {
        title: "Gestión de Adelantos",
        href: "/adelantos",
        icon: CreditCard,
      },
      {
        title: "Pre-liquidación",
        href: "/pre-liquidacion",
        icon: Calculator,
      },
      {
        title: "Liquidaciones",
        href: "/liquidaciones",
        icon: Receipt,
      },
      {
        title: "Liquidaciones Sayariq",
        href: "/liquidaciones-sayariq",
        icon: Building2,
      },
      {
        title: "Estado de Cuenta",
        href: "/estado-cuenta",
        icon: FileText,
      },
      {
        title: "Evaluación Liquidación",
        href: "/evaluacion-liquidacion",
        icon: TrendingUp,
      },
      {
        title: "Evaluación Avanzada",
        href: "/evaluacion-liquidacion-avanzada",
        icon: BarChart3,
      },
    ],
  },
  {
    title: "Inventario",
    icon: Package,
    children: [
      {
        title: "Gestión de Lotes",
        href: "/lotes",
        icon: Archive,
      },
      {
        title: "Ingreso Lotes Mejorado",
        href: "/ingreso-lotes-mejorado",
        icon: Layers,
      },
      {
        title: "Ingreso Materia Prima",
        href: "/ingreso-materia-prima",
        icon: Factory,
      },
      {
        title: "Almacén",
        href: "/almacen",
        icon: Package,
      },
    ],
  },
  {
    title: "Ventas",
    icon: ShoppingCart,
    children: [
      {
        title: "Gestión de Pedidos",
        href: "/gestion-pedidos",
        icon: ClipboardList,
      },
      {
        title: "Pedidos",
        href: "/pedidos",
        icon: ShoppingCart,
      },
    ],
  },
  {
    title: "Procesamiento",
    icon: Factory,
    children: [
      {
        title: "Control Subprocesos",
        href: "/control-subprocesos",
        icon: CheckSquare,
      },
      {
        title: "Personal Subprocesos",
        href: "/gestion-personal-subprocesos",
        icon: UserCog,
      },
      {
        title: "Registro de Pesos",
        href: "/registro-pesos",
        icon: BarChart2,
      },
    ],
  },
  {
    title: "Proveedores",
    icon: Truck,
    children: [
      {
        title: "Gestión de Proveedores",
        href: "/proveedores",
        icon: Building2,
      },
      {
        title: "Gestión de Deudas",
        href: "/gestion-deudas",
        icon: AlertCircle,
      },
    ],
  },
  {
    title: "Finanzas",
    icon: DollarSign,
    children: [
      {
        title: "Reportes Financieros",
        href: "/finanzas",
        icon: PieChart,
      },
      {
        title: "Análisis de Costos",
        href: "/costos",
        icon: Calculator,
      },
      {
        title: "Productividad Personal",
        href: "/productividad",
        icon: Target,
      },
    ],
  },
]

export function Navigation() {
  const pathname = usePathname()
  const [expandedItems, setExpandedItems] = useState<string[]>([])

const toggleExpanded = (title: string) => {
    setExpandedItems((prev) => (prev.includes(title) ? prev.filter((item) => item !== title) : [...prev, title]))
  }

const isExpanded = (title: string) => expandedItems.includes(title)

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

const isParentActive = (children: NavItem[]) => {
    return children.some((child) => child.href && isActive(child.href))
  }

return (
    <div className="w-64 bg-white border-r border-gray-200 h-screen overflow-y-auto">
      <div className="p-6">
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <Zap className="w-5 h-5 text-white" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-gray-900">Sayariq System</h1>
            <p className="text-xs text-gray-500">Gestión Empresarial</p>
          </div>
        </div>
      </div>

<nav className="px-4 pb-4">
        <div className="space-y-1">
          {navigationItems.map((item) => (
            <div key={item.title}>
              {item.children ? (
                <div>
                  <Button
                    variant="ghost"
                    className={cn(
                      "w-full justify-between text-left font-normal",
                      isParentActive(item.children) && "bg-blue-50 text-blue-700",
                    )}
                    onClick={() => toggleExpanded(item.title)}
                  >
                    <div className="flex items-center">
                      <item.icon className="mr-2 h-4 w-4" />
                      {item.title}
                      {item.badge && (
                        <Badge variant="secondary" className="ml-2 text-xs">
                          {item.badge}
                        </Badge>
                      )}
                    </div>
                    {isExpanded(item.title) ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                  </Button>
                  {isExpanded(item.title) && (
                    <div className="ml-4 mt-1 space-y-1">
                      {item.children.map((child) => (
                        <Link key={child.title} href={child.href || "#"}>
                          <Button
                            variant="ghost"
                            size="sm"
                            className={cn(
                              "w-full justify-start text-left font-normal",
                              child.href && isActive(child.href) && "bg-blue-100 text-blue-700",
                            )}
                          >
                            <child.icon className="mr-2 h-3 w-3" />
                            {child.title}
                            {child.badge && (
                              <Badge variant="secondary" className="ml-auto text-xs">
                                {child.badge}
                              </Badge>
                            )}
                          </Button>
                        </Link>
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <Link href={item.href || "#"}>
                  <Button
                    variant="ghost"
                    className={cn(
                      "w-full justify-start text-left font-normal",
                      item.href && isActive(item.href) && "bg-blue-100 text-blue-700",
                    )}
                  >
                    <item.icon className="mr-2 h-4 w-4" />
                    {item.title}
                    {item.badge && (
                      <Badge variant="secondary" className="ml-auto text-xs">
                        {item.badge}
                      </Badge>
                    )}
                  </Button>
                </Link>
              )}
            </div>
          ))}
        </div>
      </nav>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/categorias-service.ts" isQuickEdit="true" isMerged="true"
import type { Categoria } from "@/lib/types"

class CategoriasService {
  async obtenerCategorias(): Promise<Categoria[]> {
    // TODO: Implementar cuando esté disponible el endpoint en el backend
    console.warn("Endpoint de categorías aún no implementado en el backend")
    return []
  }

async obtenerCategoriaPorId(id: number): Promise<Categoria | null> {
    const categorias = await this.obtenerCategorias()
    return categorias.find((c) => c.id === id) || null
  }

async crearCategoria(categoria: Omit<Categoria, "id" | "created_at" | "updated_at">): Promise<Categoria | null> {
    console.warn("Endpoint de categorías aún no implementado en el backend")
    return null
  }

async actualizarCategoria(id: number, updates: Partial<Categoria>): Promise<Categoria | null> {
    console.warn("Endpoint de categorías aún no implementado en el backend")
    return null
  }

async eliminarCategoria(id: number): Promise<boolean> {
    console.warn("Endpoint de categorías aún no implementado en el backend")
    return false
  }
}

export const categoriasService = new CategoriasService()
[V0_FILE]typescript:file="lib/services/enfermedades-service.ts" isQuickEdit="true" isMerged="true"
import type { Enfermedad } from "@/lib/types"

class EnfermedadesService {
  async obtenerEnfermedades(): Promise<Enfermedad[]> {
    // TODO: Implementar cuando esté disponible el endpoint en el backend
    console.warn("Endpoint de enfermedades aún no implementado en el backend")
    return []
  }

async obtenerEnfermedadPorId(id: number): Promise<Enfermedad | null> {
    const enfermedades = await this.obtenerEnfermedades()
    return enfermedades.find((e) => e.id === id) || null
  }

async crearEnfermedad(enfermedad: Omit<Enfermedad, "id" | "created_at" | "updated_at">): Promise<Enfermedad | null> {
    console.warn("Endpoint de enfermedades aún no implementado en el backend")
    return null
  }

async actualizarEnfermedad(id: number, updates: Partial<Enfermedad>): Promise<Enfermedad | null> {
    console.warn("Endpoint de enfermedades aún no implementado en el backend")
    return null
  }

async eliminarEnfermedad(id: number): Promise<boolean> {
    console.warn("Endpoint de enfermedades aún no implementado en el backend")
    return false
  }
}

export const enfermedadesService = new EnfermedadesService()
[V0_FILE]typescriptreact:file="components/categorias-management.tsx" isMerged="true"
"use client"

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, 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, Edit, Trash2, Package, DollarSign } from "lucide-react"
import { categoriasService } from "@/lib/services/categorias-service"
import type { Categoria } from "@/lib/types/appwrite"

export function CategoriasManagement() {
  const [categorias, setCategorias] = useState<Categoria[]>([])
  const [busqueda, setBusqueda] = useState("")
  const [filtroGrupo, setFiltroGrupo] = useState<"todos" | "grupo1" | "grupo2">("todos")
  const [mostrarFormulario, setMostrarFormulario] = useState(false)
  const [categoriaEditando, setCategoriaEditando] = useState<Categoria | null>(null)
  const [formulario, setFormulario] = useState({
    nombre: "",
    grupo: "grupo1" as "grupo1" | "grupo2",
    descripcion: "",
    unidad: "kg",
    precioReferencial: 0,
    activo: true,
    orden: 0,
  })

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

const cargarCategorias = async () => {
    const data = await categoriasService.obtenerCategorias()
    setCategorias(data)
  }

const categoriasFiltradas = categorias.filter((categoria) => {
    const coincideBusqueda =
      categoria.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
      categoria.descripcion?.toLowerCase().includes(busqueda.toLowerCase())

const coincideGrupo = filtroGrupo === "todos" || categoria.grupo === filtroGrupo

return coincideBusqueda && coincideGrupo
  })

const abrirFormulario = (categoria?: Categoria) => {
    if (categoria) {
      setCategoriaEditando(categoria)
      setFormulario({
        nombre: categoria.nombre,
        grupo: categoria.grupo,
        descripcion: categoria.descripcion || "",
        unidad: categoria.unidad,
        precioReferencial: categoria.precioReferencial || 0,
        activo: categoria.activo,
        orden: categoria.orden,
      })
    } else {
      setCategoriaEditando(null)
      setFormulario({
        nombre: "",
        grupo: "grupo1",
        descripcion: "",
        unidad: "kg",
        precioReferencial: 0,
        activo: true,
        orden: categorias.length + 1,
      })
    }
    setMostrarFormulario(true)
  }

const guardarCategoria = async () => {
    if (categoriaEditando) {
      await categoriasService.actualizarCategoria(categoriaEditando.$id, formulario)
    } else {
      await categoriasService.crearCategoria(formulario)
    }
    await cargarCategorias()
    setMostrarFormulario(false)
  }

const eliminarCategoria = async (id: string) => {
    if (confirm("¿Está seguro de eliminar esta categoría?")) {
      await categoriasService.eliminarCategoria(id)
      await cargarCategorias()
    }
  }

const grupo1Count = categorias.filter((c) => c.grupo === "grupo1" && c.activo).length
  const grupo2Count = categorias.filter((c) => c.grupo === "grupo2" && c.activo).length

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Gestión de Categorías</h1>
          <p className="text-gray-600">Administra las categorías de clasificación de productos</p>
        </div>
        <Button onClick={() => abrirFormulario()}>
          <Plus className="h-4 w-4 mr-2" />
          Nueva Categoría
        </Button>
      </div>

{/* Estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <Package className="h-8 w-8 text-blue-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Categorías</p>
                <p className="text-2xl font-bold">{categorias.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <Package className="h-8 w-8 text-green-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Grupo 1 (Exportación)</p>
                <p className="text-2xl font-bold">{grupo1Count}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <DollarSign className="h-8 w-8 text-purple-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Grupo 2 (Grado)</p>
                <p className="text-2xl font-bold">{grupo2Count}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por nombre o descripción..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={filtroGrupo} onValueChange={(value: any) => setFiltroGrupo(value)}>
              <SelectTrigger className="w-full md:w-[200px]">
                <SelectValue placeholder="Filtrar por grupo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los grupos</SelectItem>
                <SelectItem value="grupo1">Grupo 1 (Exportación)</SelectItem>
                <SelectItem value="grupo2">Grupo 2 (Grado)</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Tabla de categorías */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Categorías ({categoriasFiltradas.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Orden</TableHead>
                <TableHead>Nombre</TableHead>
                <TableHead>Grupo</TableHead>
                <TableHead>Descripción</TableHead>
                <TableHead>Unidad</TableHead>
                <TableHead>Precio Ref.</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {categoriasFiltradas.map((categoria) => (
                <TableRow key={categoria.$id}>
                  <TableCell className="font-medium">{categoria.orden}</TableCell>
                  <TableCell className="font-medium">{categoria.nombre}</TableCell>
                  <TableCell>
                    <Badge
                      className={
                        categoria.grupo === "grupo1" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"
                      }
                    >
                      {categoria.grupo === "grupo1" ? "Exportación" : "Grado"}
                    </Badge>
                  </TableCell>
                  <TableCell className="max-w-xs truncate">{categoria.descripcion || "-"}</TableCell>
                  <TableCell>{categoria.unidad}</TableCell>
                  <TableCell>S/ {categoria.precioReferencial?.toFixed(2) || "0.00"}</TableCell>
                  <TableCell>
                    <Badge variant={categoria.activo ? "default" : "secondary"}>
                      {categoria.activo ? "Activo" : "Inactivo"}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline" onClick={() => abrirFormulario(categoria)}>
                        <Edit className="h-3 w-3" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => eliminarCategoria(categoria.$id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Modal de formulario */}
      <Dialog open={mostrarFormulario} onOpenChange={setMostrarFormulario}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{categoriaEditando ? "Editar Categoría" : "Nueva Categoría"}</DialogTitle>
            <DialogDescription>
              {categoriaEditando ? "Modifica los datos de la categoría" : "Completa los datos de la nueva categoría"}
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Nombre *</Label>
                <Input
                  value={formulario.nombre}
                  onChange={(e) => setFormulario({ ...formulario, nombre: e.target.value })}
                  placeholder="Ej: Exportable"
                />
              </div>

<div className="space-y-2">
                <Label>Grupo *</Label>
                <Select
                  value={formulario.grupo}
                  onValueChange={(value: any) => setFormulario({ ...formulario, grupo: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="grupo1">Grupo 1 (Calidad Exportación)</SelectItem>
                    <SelectItem value="grupo2">Grupo 2 (Clasificación Grado)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label>Descripción</Label>
              <Textarea
                value={formulario.descripcion}
                onChange={(e) => setFormulario({ ...formulario, descripcion: e.target.value })}
                placeholder="Descripción de la categoría..."
                rows={3}
              />
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label>Unidad *</Label>
                <Input
                  value={formulario.unidad}
                  onChange={(e) => setFormulario({ ...formulario, unidad: e.target.value })}
                  placeholder="kg"
                />
              </div>

<div className="space-y-2">
                <Label>Precio Referencial</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={formulario.precioReferencial}
                  onChange={(e) =>
                    setFormulario({ ...formulario, precioReferencial: Number.parseFloat(e.target.value) || 0 })
                  }
                  placeholder="0.00"
                />
              </div>

<div className="space-y-2">
                <Label>Orden</Label>
                <Input
                  type="number"
                  value={formulario.orden}
                  onChange={(e) => setFormulario({ ...formulario, orden: Number.parseInt(e.target.value) || 0 })}
                  placeholder="1"
                />
              </div>
            </div>

<div className="flex items-center space-x-2">
              <input
                type="checkbox"
                id="activo"
                checked={formulario.activo}
                onChange={(e) => setFormulario({ ...formulario, activo: e.target.checked })}
                className="h-4 w-4"
              />
              <Label htmlFor="activo">Categoría activa</Label>
            </div>

<div className="flex justify-end gap-3 pt-4">
              <Button variant="outline" onClick={() => setMostrarFormulario(false)}>
                Cancelar
              </Button>
              <Button onClick={guardarCategoria}>Guardar Categoría</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/enfermedades-management.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

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, 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, Edit, Trash2, AlertTriangle, Activity } from "lucide-react"
import { enfermedadesService } from "@/lib/services/enfermedades-service"
import type { Enfermedad } from "@/lib/types/appwrite"

export function EnfermedadesManagement() {
  const [enfermedades, setEnfermedades] = useState<Enfermedad[]>([])
  const [busqueda, setBusqueda] = useState("")
  const [filtroSeveridad, setFiltroSeveridad] = useState<"todos" | "baja" | "media" | "alta">("todos")
  const [mostrarFormulario, setMostrarFormulario] = useState(false)
  const [enfermedadEditando, setEnfermedadEditando] = useState<Enfermedad | null>(null)
  const [formulario, setFormulario] = useState({
    nombre: "",
    nombreCientifico: "",
    descripcion: "",
    severidad: "media" as "baja" | "media" | "alta",
    impactoEnGrado: "" as "" | "exportable" | "industrial" | "nacional" | "descarte",
    activo: true,
    orden: 0,
  })

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

const cargarEnfermedades = async () => {
    const data = await enfermedadesService.obtenerEnfermedades()
    setEnfermedades(data)
  }

const enfermedadesFiltradas = enfermedades.filter((enfermedad) => {
    const coincideBusqueda =
      enfermedad.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
      enfermedad.nombreCientifico?.toLowerCase().includes(busqueda.toLowerCase()) ||
      enfermedad.descripcion?.toLowerCase().includes(busqueda.toLowerCase())

const coincideSeveridad = filtroSeveridad === "todos" || enfermedad.severidad === filtroSeveridad

return coincideBusqueda && coincideSeveridad
  })

const abrirFormulario = (enfermedad?: Enfermedad) => {
    if (enfermedad) {
      setEnfermedadEditando(enfermedad)
      setFormulario({
        nombre: enfermedad.nombre,
        nombreCientifico: enfermedad.nombreCientifico || "",
        descripcion: enfermedad.descripcion || "",
        severidad: enfermedad.severidad,
        impactoEnGrado: enfermedad.impactoEnGrado || "",
        activo: enfermedad.activo,
        orden: enfermedad.orden,
      })
    } else {
      setEnfermedadEditando(null)
      setFormulario({
        nombre: "",
        nombreCientifico: "",
        descripcion: "",
        severidad: "media",
        impactoEnGrado: "",
        activo: true,
        orden: enfermedades.length + 1,
      })
    }
    setMostrarFormulario(true)
  }

const guardarEnfermedad = async () => {
    const data = {
      ...formulario,
      impactoEnGrado: formulario.impactoEnGrado || undefined,
    }

if (enfermedadEditando) {
      await enfermedadesService.actualizarEnfermedad(enfermedadEditando.$id, data)
    } else {
      await enfermedadesService.crearEnfermedad(data)
    }
    await cargarEnfermedades()
    setMostrarFormulario(false)
  }

const eliminarEnfermedad = async (id: string) => {
    if (confirm("¿Está seguro de eliminar esta enfermedad?")) {
      await enfermedadesService.eliminarEnfermedad(id)
      await cargarEnfermedades()
    }
  }

const getSeveridadColor = (severidad: string) => {
    switch (severidad) {
      case "alta":
        return "bg-red-100 text-red-800"
      case "media":
        return "bg-yellow-100 text-yellow-800"
      case "baja":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const altaCount = enfermedades.filter((e) => e.severidad === "alta" && e.activo).length
  const mediaCount = enfermedades.filter((e) => e.severidad === "media" && e.activo).length
  const bajaCount = enfermedades.filter((e) => e.severidad === "baja" && e.activo).length

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Gestión de Enfermedades</h1>
          <p className="text-gray-600">Administra el catálogo de enfermedades y defectos</p>
        </div>
        <Button onClick={() => abrirFormulario()}>
          <Plus className="h-4 w-4 mr-2" />
          Nueva Enfermedad
        </Button>
      </div>

{/* Estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <Activity className="h-8 w-8 text-blue-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Enfermedades</p>
                <p className="text-2xl font-bold">{enfermedades.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <AlertTriangle className="h-8 w-8 text-red-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Severidad Alta</p>
                <p className="text-2xl font-bold">{altaCount}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <AlertTriangle className="h-8 w-8 text-yellow-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Severidad Media</p>
                <p className="text-2xl font-bold">{mediaCount}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <AlertTriangle className="h-8 w-8 text-green-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Severidad Baja</p>
                <p className="text-2xl font-bold">{bajaCount}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por nombre, nombre científico o descripción..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={filtroSeveridad} onValueChange={(value: any) => setFiltroSeveridad(value)}>
              <SelectTrigger className="w-full md:w-[200px]">
                <SelectValue placeholder="Filtrar por severidad" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todas las severidades</SelectItem>
                <SelectItem value="alta">Severidad Alta</SelectItem>
                <SelectItem value="media">Severidad Media</SelectItem>
                <SelectItem value="baja">Severidad Baja</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Tabla de enfermedades */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Enfermedades ({enfermedadesFiltradas.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Orden</TableHead>
                <TableHead>Nombre</TableHead>
                <TableHead>Nombre Científico</TableHead>
                <TableHead>Descripción</TableHead>
                <TableHead>Severidad</TableHead>
                <TableHead>Impacto en Grado</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {enfermedadesFiltradas.map((enfermedad) => (
                <TableRow key={enfermedad.$id}>
                  <TableCell className="font-medium">{enfermedad.orden}</TableCell>
                  <TableCell className="font-medium">{enfermedad.nombre}</TableCell>
                  <TableCell className="italic text-sm">{enfermedad.nombreCientifico || "-"}</TableCell>
                  <TableCell className="max-w-xs truncate">{enfermedad.descripcion || "-"}</TableCell>
                  <TableCell>
                    <Badge className={getSeveridadColor(enfermedad.severidad)}>
                      {enfermedad.severidad.charAt(0).toUpperCase() + enfermedad.severidad.slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {enfermedad.impactoEnGrado ? <Badge variant="outline">{enfermedad.impactoEnGrado}</Badge> : "-"}
                  </TableCell>
                  <TableCell>
                    <Badge variant={enfermedad.activo ? "default" : "secondary"}>
                      {enfermedad.activo ? "Activo" : "Inactivo"}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline" onClick={() => abrirFormulario(enfermedad)}>
                        <Edit className="h-3 w-3" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => eliminarEnfermedad(enfermedad.$id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Modal de formulario */}
      <Dialog open={mostrarFormulario} onOpenChange={setMostrarFormulario}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{enfermedadEditando ? "Editar Enfermedad" : "Nueva Enfermedad"}</DialogTitle>
            <DialogDescription>
              {enfermedadEditando ? "Modifica los datos de la enfermedad" : "Completa los datos de la nueva enfermedad"}
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Nombre *</Label>
                <Input
                  value={formulario.nombre}
                  onChange={(e) => setFormulario({ ...formulario, nombre: e.target.value })}
                  placeholder="Ej: Pudrición Bacteriana"
                />
              </div>

<div className="space-y-2">
                <Label>Nombre Científico</Label>
                <Input
                  value={formulario.nombreCientifico}
                  onChange={(e) => setFormulario({ ...formulario, nombreCientifico: e.target.value })}
                  placeholder="Ej: Erwinia carotovora"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label>Descripción</Label>
              <Textarea
                value={formulario.descripcion}
                onChange={(e) => setFormulario({ ...formulario, descripcion: e.target.value })}
                placeholder="Descripción de la enfermedad..."
                rows={3}
              />
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label>Severidad *</Label>
                <Select
                  value={formulario.severidad}
                  onValueChange={(value: any) => setFormulario({ ...formulario, severidad: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="baja">Baja</SelectItem>
                    <SelectItem value="media">Media</SelectItem>
                    <SelectItem value="alta">Alta</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label>Impacto en Grado</Label>
                <Select
                  value={formulario.impactoEnGrado}
                  onValueChange={(value: any) => setFormulario({ ...formulario, impactoEnGrado: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ninguno">Ninguno</SelectItem>
                    <SelectItem value="exportable">Exportable</SelectItem>
                    <SelectItem value="industrial">Industrial</SelectItem>
                    <SelectItem value="nacional">Nacional</SelectItem>
                    <SelectItem value="descarte">Descarte</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="flex justify-end gap-3 pt-4">
              <Button variant="outline" onClick={() => setMostrarFormulario(false)}>
                Cancelar
              </Button>
              <Button onClick={guardarEnfermedad}>Guardar Enfermedad</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categorias/page.tsx" isMerged="true"
import { CategoriasManagement } from "@/components/categorias-management"

export default function CategoriasPage() {
  return <CategoriasManagement />
}
[V0_FILE]typescriptreact:file="app/enfermedades/page.tsx" isMerged="true"
import { EnfermedadesManagement } from "@/components/enfermedades-management"

export default function EnfermedadesPage() {
  return <EnfermedadesManagement />
}
[V0_FILE]typescript:file="lib/services/banco-service.ts" isQuickEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { TransaccionBanco, ApiResponse } from "@/lib/types"

export const bancoService = {
  async registrarTransaccion(datos: Omit<TransaccionBanco, "id" | "created_at" | "updated_at">) {
    try {
      const response = await ApiService.post<ApiResponse<TransaccionBanco>>(API_ENDPOINTS.BANCO, datos)
      return response.data
    } catch (error) {
      console.error("Error al registrar transacción:", error)
      throw error
    }
  },

async obtenerTransacciones(filtros?: { fechaInicio?: string; fechaFin?: string; tipo?: string }) {
    try {
      const response = await ApiService.get<ApiResponse<TransaccionBanco[]>>(API_ENDPOINTS.BANCO)
      let transacciones = response.data

if (filtros?.fechaInicio) {
        transacciones = transacciones.filter((t) => t.fecha >= filtros.fechaInicio!)
      }

if (filtros?.fechaFin) {
        transacciones = transacciones.filter((t) => t.fecha <= filtros.fechaFin!)
      }

if (filtros?.tipo) {
        transacciones = transacciones.filter((t) => t.tipo === filtros.tipo)
      }

return transacciones.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
    } catch (error) {
      console.error("Error al obtener transacciones:", error)
      throw error
    }
  },

async obtenerSaldoTotal() {
    try {
      const transacciones = await this.obtenerTransacciones()
      return transacciones.reduce((sum, t) => {
        return sum + (t.tipo === "ingreso" ? t.monto : -t.monto)
      }, 0)
    } catch (error) {
      console.error("Error al calcular saldo total:", error)
      return 0
    }
  },

async actualizarTransaccion(id: number, datos: Partial<TransaccionBanco>) {
    try {
      const response = await ApiService.put<ApiResponse<TransaccionBanco>>(API_ENDPOINTS.BANCO_BY_ID(id), datos)
      return response.data
    } catch (error) {
      console.error("Error al actualizar transacción:", error)
      throw error
    }
  },

async eliminarTransaccion(id: number) {
    try {
      await ApiService.delete(API_ENDPOINTS.BANCO_BY_ID(id))
    } catch (error) {
      console.error("Error al eliminar transacción:", error)
      throw error
    }
  },
}
[V0_FILE]typescriptreact:file="components/kardex-lotes.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Plus, TrendingUp, TrendingDown, Package, Search } from "lucide-react"
import type { MovimientoKardex, SaldoKardex } from "@/lib/types/appwrite"

export function KardexLotes() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filtroLote, setFiltroLote] = useState("todos")
  const [isNuevoMovimientoOpen, setIsNuevoMovimientoOpen] = useState(false)

// Mock data - replace with actual data from service
  const [movimientos] = useState<MovimientoKardex[]>([
    {
      $id: "1",
      fecha: "2024-12-15",
      loteId: "lote1",
      codigoLote: "LOT-2024-018",
      tipoMovimiento: "ingreso",
      categoria: "exportable",
      cantidad: 3671,
      precioUnitario: 2.2,
      valorTotal: 8076.2,
      saldoAnterior: 0,
      saldoActual: 3671,
      motivo: "Procesamiento inicial",
      responsable: "Juan Pérez",
      documentoReferencia: "C2425-0356",
    } as MovimientoKardex,
    {
      $id: "2",
      fecha: "2024-12-15",
      loteId: "lote1",
      codigoLote: "LOT-2024-018",
      tipoMovimiento: "ingreso",
      categoria: "industrial",
      cantidad: 446,
      precioUnitario: 1.2,
      valorTotal: 535.2,
      saldoAnterior: 0,
      saldoActual: 446,
      motivo: "Procesamiento inicial",
      responsable: "Juan Pérez",
      documentoReferencia: "C2425-0356",
    } as MovimientoKardex,
    {
      $id: "3",
      fecha: "2024-12-16",
      loteId: "lote1",
      codigoLote: "LOT-2024-018",
      tipoMovimiento: "salida",
      categoria: "exportable",
      cantidad: 500,
      precioUnitario: 2.2,
      valorTotal: 1100,
      saldoAnterior: 3671,
      saldoActual: 3171,
      motivo: "Venta a cliente",
      responsable: "María García",
      documentoReferencia: "VTA-001",
    } as MovimientoKardex,
  ])

const [saldos] = useState<SaldoKardex[]>([
    {
      loteId: "lote1",
      codigoLote: "LOT-2024-018",
      exportable: 3171,
      industrial: 446,
      descarte: 133.6,
      total: 3750.6,
      ultimaActualizacion: "2024-12-16",
    },
    {
      loteId: "lote2",
      codigoLote: "LOT-2024-019",
      exportable: 2500,
      industrial: 300,
      descarte: 100,
      total: 2900,
      ultimaActualizacion: "2024-12-15",
    },
  ])

const [formData, setFormData] = useState({
    loteId: "",
    codigoLote: "",
    tipoMovimiento: "ingreso" as "ingreso" | "salida",
    categoria: "exportable" as "exportable" | "industrial" | "descarte",
    cantidad: "",
    precioUnitario: "",
    motivo: "",
    responsable: "",
    documentoReferencia: "",
  })

const movimientosFiltrados = movimientos.filter((mov) => {
    const coincideBusqueda =
      mov.codigoLote.toLowerCase().includes(searchTerm.toLowerCase()) ||
      mov.motivo.toLowerCase().includes(searchTerm.toLowerCase())

const coincideLote = filtroLote === "todos" || mov.loteId === filtroLote

return coincideBusqueda && coincideLote
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Registrar movimiento:", formData)
    setIsNuevoMovimientoOpen(false)
  }

const formatearMoneda = (valor: number) => {
    return new Intl.NumberFormat("es-PE", {
      style: "currency",
      currency: "PEN",
    }).format(valor)
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Package className="h-8 w-8 text-primary" />
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Kardex de Lotes</h1>
            <p className="text-gray-600">Control de ingresos, salidas y saldos por categoría</p>
          </div>
        </div>
        <Dialog open={isNuevoMovimientoOpen} onOpenChange={setIsNuevoMovimientoOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nuevo Movimiento
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Registrar Movimiento</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="codigoLote">Código de Lote *</Label>
                  <Input
                    id="codigoLote"
                    value={formData.codigoLote}
                    onChange={(e) => setFormData({ ...formData, codigoLote: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="tipoMovimiento">Tipo de Movimiento *</Label>
                  <Select
                    value={formData.tipoMovimiento}
                    onValueChange={(value: "ingreso" | "salida") => setFormData({ ...formData, tipoMovimiento: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="ingreso">Ingreso</SelectItem>
                      <SelectItem value="salida">Salida</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="categoria">Categoría *</Label>
                  <Select
                    value={formData.categoria}
                    onValueChange={(value: "exportable" | "industrial" | "descarte") =>
                      setFormData({ ...formData, categoria: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="exportable">Exportable</SelectItem>
                      <SelectItem value="industrial">Industrial</SelectItem>
                      <SelectItem value="descarte">Descarte</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="cantidad">Cantidad (kg) *</Label>
                  <Input
                    id="cantidad"
                    type="number"
                    step="0.01"
                    value={formData.cantidad}
                    onChange={(e) => setFormData({ ...formData, cantidad: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="precioUnitario">Precio Unitario (S/)</Label>
                  <Input
                    id="precioUnitario"
                    type="number"
                    step="0.01"
                    value={formData.precioUnitario}
                    onChange={(e) => setFormData({ ...formData, precioUnitario: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="responsable">Responsable *</Label>
                  <Input
                    id="responsable"
                    value={formData.responsable}
                    onChange={(e) => setFormData({ ...formData, responsable: e.target.value })}
                    required
                  />
                </div>
              </div>

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

<div className="space-y-2">
                <Label htmlFor="documentoReferencia">Documento de Referencia</Label>
                <Input
                  id="documentoReferencia"
                  value={formData.documentoReferencia}
                  onChange={(e) => setFormData({ ...formData, documentoReferencia: e.target.value })}
                />
              </div>

<div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsNuevoMovimientoOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Registrar Movimiento</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>

{/* Resumen de Saldos */}
      <Card className="sayariq-card">
        <CardHeader>
          <CardTitle>Saldos Actuales por Lote</CardTitle>
          <CardDescription>Vista consolidada de inventario por categoría</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Código Lote</TableHead>
                  <TableHead className="text-right">Exportable (kg)</TableHead>
                  <TableHead className="text-right">Industrial (kg)</TableHead>
                  <TableHead className="text-right">Descarte (kg)</TableHead>
                  <TableHead className="text-right">Total (kg)</TableHead>
                  <TableHead>Última Actualización</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {saldos.map((saldo) => (
                  <TableRow key={saldo.loteId}>
                    <TableCell className="font-medium">{saldo.codigoLote}</TableCell>
                    <TableCell className="text-right text-green-600 font-medium">
                      {saldo.exportable.toFixed(2)}
                    </TableCell>
                    <TableCell className="text-right text-blue-600 font-medium">
                      {saldo.industrial.toFixed(2)}
                    </TableCell>
                    <TableCell className="text-right text-orange-600 font-medium">
                      {saldo.descarte.toFixed(2)}
                    </TableCell>
                    <TableCell className="text-right font-bold">{saldo.total.toFixed(2)}</TableCell>
                    <TableCell>{new Date(saldo.ultimaActualizacion).toLocaleDateString()}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Movimientos por Categoría */}
      <Card className="sayariq-card">
        <CardHeader>
          <CardTitle>Movimientos de Kardex</CardTitle>
          <CardDescription>{movimientosFiltrados.length} movimientos registrados</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="todos" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="todos">Todos</TabsTrigger>
              <TabsTrigger value="exportable">Exportable</TabsTrigger>
              <TabsTrigger value="industrial">Industrial</TabsTrigger>
              <TabsTrigger value="descarte">Descarte</TabsTrigger>
            </TabsList>

<TabsContent value="todos" className="mt-4">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Lote</TableHead>
                      <TableHead>Tipo</TableHead>
                      <TableHead>Categoría</TableHead>
                      <TableHead className="text-right">Cantidad</TableHead>
                      <TableHead className="text-right">Saldo Anterior</TableHead>
                      <TableHead className="text-right">Saldo Actual</TableHead>
                      <TableHead className="text-right">Valor Total</TableHead>
                      <TableHead>Motivo</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {movimientosFiltrados.map((mov) => (
                      <TableRow key={mov.$id}>
                        <TableCell>{new Date(mov.fecha).toLocaleDateString()}</TableCell>
                        <TableCell className="font-medium">{mov.codigoLote}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            {mov.tipoMovimiento === "ingreso" ? (
                              <TrendingUp className="h-4 w-4 text-green-600" />
                            ) : (
                              <TrendingDown className="h-4 w-4 text-red-600" />
                            )}
                            <span className={mov.tipoMovimiento === "ingreso" ? "text-green-600" : "text-red-600"}>
                              {mov.tipoMovimiento === "ingreso" ? "Ingreso" : "Salida"}
                            </span>
                          </div>
                        </TableCell>
                        <TableCell className="capitalize">{mov.categoria}</TableCell>
                        <TableCell className="text-right font-medium">{mov.cantidad.toFixed(2)} kg</TableCell>
                        <TableCell className="text-right">{mov.saldoAnterior.toFixed(2)} kg</TableCell>
                        <TableCell className="text-right font-bold">{mov.saldoActual.toFixed(2)} kg</TableCell>
                        <TableCell className="text-right">
                          {mov.valorTotal ? formatearMoneda(mov.valorTotal) : "-"}
                        </TableCell>
                        <TableCell className="max-w-xs truncate">{mov.motivo}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>

{["exportable", "industrial", "descarte"].map((categoria) => (
              <TabsContent key={categoria} value={categoria} className="mt-4">
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Lote</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead className="text-right">Cantidad</TableHead>
                        <TableHead className="text-right">Saldo Anterior</TableHead>
                        <TableHead className="text-right">Saldo Actual</TableHead>
                        <TableHead className="text-right">Valor Total</TableHead>
                        <TableHead>Motivo</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {movimientosFiltrados
                        .filter((mov) => mov.categoria === categoria)
                        .map((mov) => (
                          <TableRow key={mov.$id}>
                            <TableCell>{new Date(mov.fecha).toLocaleDateString()}</TableCell>
                            <TableCell className="font-medium">{mov.codigoLote}</TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                {mov.tipoMovimiento === "ingreso" ? (
                                  <TrendingUp className="h-4 w-4 text-green-600" />
                                ) : (
                                  <TrendingDown className="h-4 w-4 text-red-600" />
                                )}
                                <span className={mov.tipoMovimiento === "ingreso" ? "text-green-600" : "text-red-600"}>
                                  {mov.tipoMovimiento === "ingreso" ? "Ingreso" : "Salida"}
                                </span>
                              </div>
                            </TableCell>
                            <TableCell className="text-right font-medium">{mov.cantidad.toFixed(2)} kg</TableCell>
                            <TableCell className="text-right">{mov.saldoAnterior.toFixed(2)} kg</TableCell>
                            <TableCell className="text-right font-bold">{mov.saldoActual.toFixed(2)} kg</TableCell>
                            <TableCell className="text-right">
                              {mov.valorTotal ? formatearMoneda(mov.valorTotal) : "-"}
                            </TableCell>
                            <TableCell className="max-w-xs truncate">{mov.motivo}</TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/kardex-lotes/page.tsx" isMerged="true"
import { KardexLotes } from "@/components/kardex-lotes"

export default function KardexLotesPage() {
  return <KardexLotes />
}
[V0_FILE]typescriptreact:file="components/libro-banco.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Plus, DollarSign, TrendingDown, Search, Calendar } from "lucide-react"
import type { TransaccionBanco } from "@/lib/types/appwrite"

export function LibroBanco() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filtroEstado, setFiltroEstado] = useState("todos")
  const [filtroRubro, setFiltroRubro] = useState("todos")
  const [isNuevaTransaccionOpen, setIsNuevaTransaccionOpen] = useState(false)

// Mock data - replace with actual data from service
  const [transacciones] = useState<TransaccionBanco[]>([
    {
      $id: "1",
      fecha: "2024-12-08",
      operacion: "TRANSFERENCIA A TERCEROS BCP",
      aQuien: "VEGA LOYOLA MARCOS ARMANDO",
      deQuien: "ND",
      motivo: "LOTE 0249",
      rubroEconomico: "campo",
      numeroOperacion: "1061214",
      comprobante: "",
      deudor: 0,
      acreedor: 2586.6,
      estado: "cancelado",
      agricultor: "VEGA LOYOLA MARCOS ARMANDO",
      loteRelacionado: "LOTE 0249",
    } as TransaccionBanco,
    {
      $id: "2",
      fecha: "2024-12-08",
      operacion: "TRANSFERENCIA A TERCEROS BCP",
      aQuien: "MAMAN: CASTAÑEDA CARLOS DANIEL",
      deQuien: "ND",
      motivo: "VENTA NATIVA - NACIONAL",
      rubroEconomico: "venta",
      numeroOperacion: "162121",
      comprobante: "",
      deudor: 0,
      acreedor: 1415.84,
      estado: "cancelado",
    } as TransaccionBanco,
    {
      $id: "3",
      fecha: "2024-12-12",
      operacion: "TRANSFERENCIA A TERCEROS BCP",
      aQuien: "RAMIREZ TAIPE ELISEO",
      deQuien: "ND",
      motivo: "LOTE 0250",
      rubroEconomico: "campo",
      numeroOperacion: "1185425",
      comprobante: "",
      deudor: 0,
      acreedor: 2883,
      estado: "pendiente",
      agricultor: "RAMIREZ TAIPE ELISEO",
      loteRelacionado: "LOTE 0250",
    } as TransaccionBanco,
    {
      $id: "4",
      fecha: "2024-12-16",
      operacion: "ADELANTO MATERIA PRIMA",
      aQuien: "ND",
      deQuien: "QUISPE ORTIZ SABINA",
      motivo: "ADELANTO MATERIA PRIMA",
      rubroEconomico: "campo",
      numeroOperacion: "729812",
      comprobante: "",
      deudor: 1000,
      acreedor: 0,
      estado: "pendiente",
      agricultor: "QUISPE ORTIZ SABINA",
    } as TransaccionBanco,
  ])

const [formData, setFormData] = useState({
    fecha: new Date().toISOString().split("T")[0],
    operacion: "",
    aQuien: "",
    deQuien: "",
    motivo: "",
    rubroEconomico: "campo" as "campo" | "venta" | "nd",
    numeroOperacion: "",
    comprobante: "",
    deudor: "",
    acreedor: "",
    estado: "pendiente" as "cancelado" | "pendiente" | "deficit",
    agricultor: "",
    loteRelacionado: "",
  })

const transaccionesFiltradas = transacciones.filter((trans) => {
    const coincideBusqueda =
      trans.operacion.toLowerCase().includes(searchTerm.toLowerCase()) ||
      trans.aQuien.toLowerCase().includes(searchTerm.toLowerCase()) ||
      trans.motivo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (trans.agricultor && trans.agricultor.toLowerCase().includes(searchTerm.toLowerCase()))

const coincideEstado = filtroEstado === "todos" || trans.estado === filtroEstado
    const coincideRubro = filtroRubro === "todos" || trans.rubroEconomico === filtroRubro

return coincideBusqueda && coincideEstado && coincideRubro
  })

const sumaPagoPendiente = transacciones
    .filter((t) => t.estado === "pendiente")
    .reduce((sum, t) => sum + t.acreedor, 0)

const sumaAdelantosPendientes = transacciones
    .filter((t) => t.rubroEconomico === "campo" && t.estado === "pendiente" && t.deudor > 0)
    .reduce((sum, t) => sum + t.deudor, 0)

const recuentoLiquidacionesPendientes = transacciones.filter((t) => t.estado === "pendiente" && t.acreedor > 0).length

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Registrar transacción:", formData)
    setIsNuevaTransaccionOpen(false)
  }

const formatearMoneda = (valor: number) => {
    return new Intl.NumberFormat("es-PE", {
      style: "currency",
      currency: "PEN",
    }).format(valor)
  }

const getEstadoBadge = (estado: string) => {
    const config = {
      cancelado: { label: "Cancelado", variant: "default" as const, className: "bg-green-100 text-green-800" },
      pendiente: { label: "Pendiente", variant: "secondary" as const, className: "bg-orange-100 text-orange-800" },
      deficit: { label: "Déficit", variant: "destructive" as const, className: "bg-yellow-100 text-yellow-800" },
    }

const { label, className } = config[estado as keyof typeof config]
    return <Badge className={className}>{label}</Badge>
  }

const getRubroBadge = (rubro: string) => {
    const config = {
      campo: { label: "Campo", className: "bg-blue-100 text-blue-800" },
      venta: { label: "Venta", className: "bg-green-100 text-green-800" },
      nd: { label: "N/D", className: "bg-gray-100 text-gray-800" },
    }

const { label, className } = config[rubro as keyof typeof config]
    return <Badge className={className}>{label}</Badge>
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <DollarSign className="h-8 w-8 text-primary" />
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Libro Banco</h1>
            <p className="text-gray-600">Registro de transacciones bancarias y adelantos</p>
          </div>
        </div>
        <Dialog open={isNuevaTransaccionOpen} onOpenChange={setIsNuevaTransaccionOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nueva Transacción
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Registrar Nueva Transacción</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="fecha">Fecha *</Label>
                  <Input
                    id="fecha"
                    type="date"
                    value={formData.fecha}
                    onChange={(e) => setFormData({ ...formData, fecha: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="numeroOperacion">N° Operación *</Label>
                  <Input
                    id="numeroOperacion"
                    value={formData.numeroOperacion}
                    onChange={(e) => setFormData({ ...formData, numeroOperacion: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="operacion">Operación *</Label>
                <Input
                  id="operacion"
                  value={formData.operacion}
                  onChange={(e) => setFormData({ ...formData, operacion: e.target.value })}
                  placeholder="Ej: TRANSFERENCIA A TERCEROS BCP"
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="aQuien">¿A Quién?</Label>
                  <Input
                    id="aQuien"
                    value={formData.aQuien}
                    onChange={(e) => setFormData({ ...formData, aQuien: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="deQuien">¿De Quién?</Label>
                  <Input
                    id="deQuien"
                    value={formData.deQuien}
                    onChange={(e) => setFormData({ ...formData, deQuien: e.target.value })}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="rubroEconomico">Rubro Económico *</Label>
                  <Select
                    value={formData.rubroEconomico}
                    onValueChange={(value: "campo" | "venta" | "nd") =>
                      setFormData({ ...formData, rubroEconomico: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="campo">Campo</SelectItem>
                      <SelectItem value="venta">Venta</SelectItem>
                      <SelectItem value="nd">N/D</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="estado">Estado *</Label>
                  <Select
                    value={formData.estado}
                    onValueChange={(value: "cancelado" | "pendiente" | "deficit") =>
                      setFormData({ ...formData, estado: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="pendiente">Pendiente</SelectItem>
                      <SelectItem value="cancelado">Cancelado</SelectItem>
                      <SelectItem value="deficit">Déficit</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="deudor">Deudor (S/)</Label>
                  <Input
                    id="deudor"
                    type="number"
                    step="0.01"
                    value={formData.deudor}
                    onChange={(e) => setFormData({ ...formData, deudor: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="acreedor">Acreedor (S/)</Label>
                  <Input
                    id="acreedor"
                    type="number"
                    step="0.01"
                    value={formData.acreedor}
                    onChange={(e) => setFormData({ ...formData, acreedor: e.target.value })}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="agricultor">Agricultor</Label>
                  <Input
                    id="agricultor"
                    value={formData.agricultor}
                    onChange={(e) => setFormData({ ...formData, agricultor: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="loteRelacionado">Lote Relacionado</Label>
                  <Input
                    id="loteRelacionado"
                    value={formData.loteRelacionado}
                    onChange={(e) => setFormData({ ...formData, loteRelacionado: e.target.value })}
                  />
                </div>
              </div>

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

<div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsNuevaTransaccionOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Registrar Transacción</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>

{/* Resumen Financiero */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card className="sayariq-card border-orange-200">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                <TrendingDown className="h-5 w-5 text-orange-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Suma de Pago Pendiente</p>
                <p className="text-2xl font-bold text-orange-600">{formatearMoneda(sumaPagoPendiente)}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="sayariq-card border-blue-200">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <DollarSign className="h-5 w-5 text-blue-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Suma de Adelantos Pendientes</p>
                <p className="text-2xl font-bold text-blue-600">{formatearMoneda(sumaAdelantosPendientes)}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="sayariq-card border-purple-200">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <Calendar className="h-5 w-5 text-purple-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Recuento de Liquidaciones Pendiente</p>
                <p className="text-2xl font-bold text-purple-600">{recuentoLiquidacionesPendientes}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card className="sayariq-card">
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por operación, agricultor o motivo..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 sayariq-input"
              />
            </div>
            <Select value={filtroEstado} onValueChange={setFiltroEstado}>
              <SelectTrigger className="w-full sm:w-48 sayariq-input">
                <SelectValue placeholder="Filtrar por estado" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los estados</SelectItem>
                <SelectItem value="pendiente">Pendiente</SelectItem>
                <SelectItem value="cancelado">Cancelado</SelectItem>
                <SelectItem value="deficit">Déficit</SelectItem>
              </SelectContent>
            </Select>
            <Select value={filtroRubro} onValueChange={setFiltroRubro}>
              <SelectTrigger className="w-full sm:w-48 sayariq-input">
                <SelectValue placeholder="Filtrar por rubro" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los rubros</SelectItem>
                <SelectItem value="campo">Campo</SelectItem>
                <SelectItem value="venta">Venta</SelectItem>
                <SelectItem value="nd">N/D</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Tabla de Transacciones */}
      <Card className="sayariq-card">
        <CardHeader>
          <CardTitle>Registro de Transacciones</CardTitle>
          <CardDescription>{transaccionesFiltradas.length} transacciones encontradas</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Operación</TableHead>
                  <TableHead>¿A Quién? / ¿De Quién?</TableHead>
                  <TableHead>Motivo</TableHead>
                  <TableHead>Rubro</TableHead>
                  <TableHead>N° Operación</TableHead>
                  <TableHead className="text-right">Deudor</TableHead>
                  <TableHead className="text-right">Acreedor</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Agricultor</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {transaccionesFiltradas.map((trans) => (
                  <TableRow
                    key={trans.$id}
                    className={
                      trans.rubroEconomico === "campo"
                        ? "bg-blue-50"
                        : trans.rubroEconomico === "venta"
                          ? "bg-green-50"
                          : ""
                    }
                  >
                    <TableCell>{new Date(trans.fecha).toLocaleDateString()}</TableCell>
                    <TableCell className="font-medium max-w-xs truncate">{trans.operacion}</TableCell>
                    <TableCell>
                      <div className="text-sm">
                        {trans.aQuien !== "ND" && <div className="font-medium">A: {trans.aQuien}</div>}
                        {trans.deQuien !== "ND" && <div className="text-gray-600">De: {trans.deQuien}</div>}
                      </div>
                    </TableCell>
                    <TableCell className="max-w-xs truncate">{trans.motivo}</TableCell>
                    <TableCell>{getRubroBadge(trans.rubroEconomico)}</TableCell>
                    <TableCell>{trans.numeroOperacion}</TableCell>
                    <TableCell className="text-right">
                      {trans.deudor > 0 ? (
                        <span className="text-red-600 font-medium">{formatearMoneda(trans.deudor)}</span>
                      ) : (
                        "-"
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      {trans.acreedor > 0 ? (
                        <span className="text-green-600 font-medium">{formatearMoneda(trans.acreedor)}</span>
                      ) : (
                        "-"
                      )}
                    </TableCell>
                    <TableCell>{getEstadoBadge(trans.estado)}</TableCell>
                    <TableCell className="max-w-xs truncate">{trans.agricultor || "-"}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/libro-banco/page.tsx" isMerged="true"
import { LibroBanco } from "@/components/libro-banco"

export default function LibroBancoPage() {
  return <LibroBanco />
}
[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { Badge } from "@/components/ui/badge"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import {
  Users,
  Package,
  ShoppingCart,
  Home,
  ChevronDown,
  ChevronRight,
  Factory,
  UserCheck,
  Calculator,
  ClipboardList,
  Zap,
  UserCog,
  BarChart2,
  TrendingUp,
  DollarSign,
  CreditCard,
  FileText,
  Wallet,
  PieChart,
} from "lucide-react"
import { cn } from "@/lib/utils"

interface NavItem {
  title: string
  href?: string
  icon: React.ComponentType<{ className?: string }>
  badge?: string
  children?: NavItem[]
}

const navigationItems: NavItem[] = [
  {
    title: "Dashboard",
    href: "/",
    icon: Home,
  },
  {
    title: "Gestión de personas",
    icon: Users,
    children: [
      {
        title: "Registro de Personas",
        href: "/personas",
        icon: UserCheck,
      },
    ],
  },
  {
    title: "Inventario",
    icon: Package,
    children: [
      {
        title: "Almacén",
        href: "/almacen",
        icon: Package,
      },
    ],
  },
  {
    title: "Pedido de Productos",
    icon: ShoppingCart,
    children: [
      {
        title: "Gestión de pedidos",
        href: "/pedidos",
        icon: ShoppingCart,
      },
    ],
  },
  {
    title: "Producción-campo",
    icon: Factory,
    children: [
      {
        title: "Planificación Operativa",
        href: "/lotes-pedidos",
        icon: ClipboardList,
      },
      {
        title: "Registro de pesos",
        href: "/registro-pesos",
        icon: BarChart2,
      },
      {
        title: "Lote Liquidación",
        href: "/lote-liquidacion",
        icon: Calculator,
      },
    ],
  },
  {
    title: "Contabilidad",
    icon: Calculator,
    children: [
      {
        title: "Ajuste Pesos-precio contable",
        href: "/ajuste-contable",
        icon: Calculator,
      },
      {
        title: "Registro Pago-campo",
        href: "/registro-pago-campo",
        icon: CreditCard,
      },
      {
        title: "Libro Banco",
        href: "/libro-banco",
        icon: Wallet,
      },
    ],
  },
  {
    title: "Ventas",
    icon: TrendingUp,
    children: [
      {
        title: "Registro Venta",
        href: "/registro-venta",
        icon: FileText,
      },
      {
        title: "Ventas clientes",
        href: "/ventas-clientes",
        icon: ShoppingCart,
      },
    ],
  },
  {
    title: "Finanzas",
    icon: DollarSign,
    children: [
      {
        title: "Control-rentabilidad",
        href: "/control-rentabilidad",
        icon: PieChart,
      },
      {
        title: "COSTOS FIJOS",
        href: "/costos-fijos",
        icon: FileText,
      },
    ],
  },
  {
    title: "RRHH",
    icon: UserCog,
    children: [
      {
        title: "Registro de personal",
        href: "/gestion-personal-subprocesos",
        icon: UserCog,
      },
    ],
  },
]

export function AppSidebar() {
  const pathname = usePathname()
  const [expandedItems, setExpandedItems] = useState<string[]>([])

const toggleExpanded = (title: string) => {
    setExpandedItems((prev) => (prev.includes(title) ? prev.filter((item) => item !== title) : [...prev, title]))
  }

const isExpanded = (title: string) => expandedItems.includes(title)
  const isActive = (href: string) => pathname === href
  const isParentActive = (children: NavItem[]) => {
    return children.some((child) => child.href && isActive(child.href))
  }

return (
    <Sidebar>
      <SidebarHeader className="border-b border-sidebar-border">
        <div className="flex items-center justify-between p-2">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center">
              <Zap className="w-5 h-5 text-white" />
            </div>
            <div className="group-data-[collapsible=icon]:hidden">
              <h1 className="text-xl font-bold text-sidebar-foreground">SAYARIQ SYSTEM</h1>
              <p className="text-xs text-sidebar-foreground/70">Gestión Empresarial</p>
            </div>
          </div>
          <SidebarTrigger className="md:hidden" />
        </div>
      </SidebarHeader>

<SidebarContent>
        <SidebarMenu>
          {navigationItems.map((item) => (
            <SidebarMenuItem key={item.title}>
              {item.children ? (
                <Collapsible open={isExpanded(item.title)} onOpenChange={() => toggleExpanded(item.title)}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                      className={cn(
                        "w-full justify-between",
                        isParentActive(item.children) && "bg-sidebar-accent text-sidebar-accent-foreground",
                      )}
                    >
                      <div className="flex items-center">
                        <item.icon className="mr-2 h-4 w-4" />
                        <span>{item.title}</span>
                        {item.badge && (
                          <Badge variant="secondary" className="ml-2 text-xs">
                            {item.badge}
                          </Badge>
                        )}
                      </div>
                      {isExpanded(item.title) ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      )}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.children.map((child) => (
                        <SidebarMenuSubItem key={child.title}>
                          <SidebarMenuSubButton asChild isActive={child.href ? isActive(child.href) : false}>
                            <Link href={child.href || "#"}>
                              <child.icon className="mr-2 h-3 w-3" />
                              <span>{child.title}</span>
                              {child.badge && (
                                <Badge variant="secondary" className="ml-auto text-xs">
                                  {child.badge}
                                </Badge>
                              )}
                            </Link>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </Collapsible>
              ) : (
                <SidebarMenuButton asChild isActive={item.href ? isActive(item.href) : false}>
                  <Link href={item.href || "#"}>
                    <item.icon className="mr-2 h-4 w-4" />
                    <span>{item.title}</span>
                    {item.badge && (
                      <Badge variant="secondary" className="ml-auto text-xs">
                        {item.badge}
                      </Badge>
                    )}
                  </Link>
                </SidebarMenuButton>
              )}
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="components/ajuste-contable.tsx" isMerged="true"
"use client"

export function AjusteContable() {
  const [tipoAjuste, setTipoAjuste] = useState<"por-proceso" | "carga-cerrada">("por-proceso")
  const [busqueda, setBusqueda] = useState("")

// Estado para ajuste por proceso
  const [categorias, setCategorias] = useState({
    exportable: { peso: 100.75678, precio: 2.2, monto: 220 },
    industrial: { peso: 200, precio: 1.2, monto: 240 },
    descarte: { peso: 150, precio: 0.5, monto: 75 },
  })

// Estado para carga cerrada
  const [cargaCerrada, setCargaCerrada] = useState({
    pesoIngreso: 1800,
    precioPorKg: 2.5,
    totalCarga: 4500,
  })

const [formData, setFormData] = useState({
    fechaPago: "",
    fechaLiquidacion: "",
    serie: "",
    numeroLC: "",
    observaciones: "",
  })

const totalProceso = categorias.exportable.monto + categorias.industrial.monto + categorias.descarte.monto

const handleCategoriaChange = (categoria: keyof typeof categorias, field: string, value: number) => {
    setCategorias((prev) => ({
      ...prev,
      [categoria]: {
        ...prev[categoria],
        [field]: value,
        monto:
          field === "peso" || field === "precio"
            ? (field === "peso" ? value : prev[categoria].peso) * (field === "precio" ? value : prev[categoria].precio)
            : prev[categoria].monto,
      },
    }))
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold">Ajuste Pesos-precio contable</h2>
          <p className="text-muted-foreground">Registro contable y ajuste de pesos para liquidación</p>
        </div>
      </div>

<Tabs value={tipoAjuste} onValueChange={(v) => setTipoAjuste(v as any)}>
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="por-proceso">Por Proceso</TabsTrigger>
          <TabsTrigger value="carga-cerrada">Carga Cerrada</TabsTrigger>
        </TabsList>

<TabsContent value="por-proceso" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-6">
              {/* Búsqueda */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Search className="h-5 w-5" />
                    Buscar Lote
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <Input
                    placeholder="Buscar por código de lote o productor..."
                    value={busqueda}
                    onChange={(e) => setBusqueda(e.target.value)}
                  />
                </CardContent>
              </Card>

{/* Registro Contable */}
              <Card>
                <CardHeader>
                  <CardTitle>REGISTRO CONTABLE</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-4">
                    {Object.entries(categorias).map(([key, data]) => (
                      <div key={key} className="grid grid-cols-4 gap-4 items-center">
                        <div>
                          <Label className="capitalize">{key}</Label>
                        </div>
                        <div>
                          <Label className="text-xs text-muted-foreground">Peso Neto</Label>
                          <Input
                            type="number"
                            step="0.01"
                            value={data.peso}
                            onChange={(e) =>
                              handleCategoriaChange(key as any, "peso", Number.parseFloat(e.target.value))
                            }
                          />
                        </div>
                        <div>
                          <Label className="text-xs text-muted-foreground">Precio</Label>
                          <Input
                            type="number"
                            step="0.01"
                            value={data.precio}
                            onChange={(e) =>
                              handleCategoriaChange(key as any, "precio", Number.parseFloat(e.target.value))
                            }
                            className="font-mono"
                          />
                        </div>
                        <div>
                          <Label className="text-xs text-muted-foreground">MONTO</Label>
                          <div className="font-bold text-lg">S/. {data.monto.toFixed(2)}</div>
                        </div>
                      </div>
                    ))}
                  </div>

<div className="pt-4 border-t">
                    <div className="flex justify-between items-center">
                      <span className="font-bold">TOTAL PROCESO:</span>
                      <span className="text-2xl font-bold text-green-600">S/. {totalProceso.toFixed(2)}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Observaciones */}
              <Card>
                <CardHeader>
                  <CardTitle>OBSERVACIONES</CardTitle>
                </CardHeader>
                <CardContent>
                  <Textarea
                    placeholder="Observaciones adicionales..."
                    value={formData.observaciones}
                    onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                    rows={3}
                  />
                </CardContent>
              </Card>
            </div>

{/* Panel derecho - Ajuste Contable */}
            <div className="space-y-6">
              <Card className="bg-yellow-50 border-yellow-200">
                <CardHeader>
                  <CardTitle className="text-yellow-800">AJUSTE CONTABLE</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="bg-white p-4 rounded-lg border">
                    <Label className="text-sm text-muted-foreground">MONTO</Label>
                    <div className="text-3xl font-bold text-yellow-700">{totalProceso.toFixed(0)}</div>
                  </div>

<div className="space-y-2">
                    <Label>FECHA DE PAGO</Label>
                    <Input
                      type="date"
                      value={formData.fechaPago}
                      onChange={(e) => setFormData({ ...formData, fechaPago: e.target.value })}
                    />
                  </div>

<div className="space-y-2">
                    <Label>FECHA LIQUIDACIÓN</Label>
                    <Input
                      type="date"
                      value={formData.fechaLiquidacion}
                      onChange={(e) => setFormData({ ...formData, fechaLiquidacion: e.target.value })}
                    />
                  </div>

<div className="grid grid-cols-2 gap-2">
                    <div className="space-y-2">
                      <Label>SERIE</Label>
                      <Input
                        value={formData.serie}
                        onChange={(e) => setFormData({ ...formData, serie: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>N° L/C</Label>
                      <Input
                        value={formData.numeroLC}
                        onChange={(e) => setFormData({ ...formData, numeroLC: e.target.value })}
                      />
                    </div>
                  </div>

<Button className="w-full" size="lg">
                    REGISTRAR
                  </Button>

<div className="text-xs text-muted-foreground bg-blue-50 p-3 rounded-lg">
                    Los datos de ajuste contable toman en primera instancia todo lo que está en proceso, y el monto
                    final de ajuste contable es lo que se debe PAGAR al productor
                  </div>
                </CardContent>
              </Card>

<Card className="bg-blue-50 border-blue-200">
                <CardHeader>
                  <CardTitle className="text-sm">PESOS DE PROCESO</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-xs text-muted-foreground">
                    PARA PAGO Y REGISTRO CONTABLE PARA LOTES POR CARGA CERRADA SE CONSIDERA EL PESO INICIAL DE INGRESO
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

<TabsContent value="carga-cerrada" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Search className="h-5 w-5" />
                    Buscar Lote
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <Input placeholder="Buscar por código de lote o productor..." />
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>REGISTRO CONTABLE - CARGA CERRADA</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>PESO DE INGRESO</Label>
                      <Input
                        type="number"
                        value={cargaCerrada.pesoIngreso}
                        onChange={(e) =>
                          setCargaCerrada({
                            ...cargaCerrada,
                            pesoIngreso: Number.parseFloat(e.target.value),
                            totalCarga: Number.parseFloat(e.target.value) * cargaCerrada.precioPorKg,
                          })
                        }
                      />
                    </div>
                    <div>
                      <Label>PRECIO POR KG:</Label>
                      <Input
                        type="number"
                        step="0.01"
                        value={cargaCerrada.precioPorKg}
                        onChange={(e) =>
                          setCargaCerrada({
                            ...cargaCerrada,
                            precioPorKg: Number.parseFloat(e.target.value),
                            totalCarga: cargaCerrada.pesoIngreso * Number.parseFloat(e.target.value),
                          })
                        }
                      />
                    </div>
                  </div>

<div className="pt-4 border-t">
                    <div className="flex justify-between items-center">
                      <span className="font-bold">TOTAL CARGA:</span>
                      <span className="text-2xl font-bold text-green-600">
                        S/. {cargaCerrada.totalCarga.toFixed(2)}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>OBSERVACIONES</CardTitle>
                </CardHeader>
                <CardContent>
                  <Textarea placeholder="Observaciones adicionales..." rows={3} />
                </CardContent>
              </Card>
            </div>

<div className="space-y-6">
              <Card className="bg-yellow-50 border-yellow-200">
                <CardHeader>
                  <CardTitle className="text-yellow-800">AJUSTE CONTABLE</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="bg-white p-4 rounded-lg border">
                    <Label className="text-sm text-muted-foreground">MONTO</Label>
                    <div className="text-3xl font-bold text-yellow-700">{cargaCerrada.totalCarga.toFixed(0)}</div>
                  </div>

<div className="space-y-2">
                    <Label>FECHA DE PAGO</Label>
                    <Input type="date" />
                  </div>

<div className="space-y-2">
                    <Label>FECHA LIQUIDACIÓN</Label>
                    <Input type="date" />
                  </div>

<div className="grid grid-cols-2 gap-2">
                    <div className="space-y-2">
                      <Label>SERIE</Label>
                      <Input />
                    </div>
                    <div className="space-y-2">
                      <Label>N° L/C</Label>
                      <Input />
                    </div>
                  </div>

<Button className="w-full" size="lg">
                    REGISTRAR
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ajuste-contable/page.tsx" isMerged="true"
import { AjusteContable } from "@/components/ajuste-contable"

export default function AjusteContablePage() {
  return <AjusteContable />
}
[V0_FILE]typescriptreact:file="app/registro-pago-campo/page.tsx" isMerged="true"
import { RegistroPagoCampo } from "@/components/registro-pago-campo"

export default function RegistroPagoCampoPage() {
  return <RegistroPagoCampo />
}
[V0_FILE]typescriptreact:file="app/registro-venta/page.tsx" isMerged="true"
import { RegistroVenta } from "@/components/registro-venta"

export default function RegistroVentaPage() {
  return <RegistroVenta />
}
[V0_FILE]plaintext:file="app/.htaccess" isMerged="true"
# Configuración Apache para API v3.0
# Reescritura de URLs y configuración de seguridad

RewriteEngine On

# Habilitar logging de rewrite para debugging
# RewriteLog /tmp/rewrite.log
# RewriteLogLevel 3

# Configuración CORS - debe ir antes de las reglas de rewrite
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-API-Version"
Header always set Access-Control-Max-Age "86400"

# Manejar preflight OPTIONS requests
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ index.php [QSA,L]

# Redirigir todo el tráfico que no sea archivo físico a index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]

# Configuración de seguridad
Header always set X-Content-Type-Options nosniff
Header always set X-Frame-Options DENY
Header always set X-XSS-Protection "1; mode=block"
Header always set Referrer-Policy "strict-origin-when-cross-origin"

# Configuración de cache para archivos estáticos
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg)$">
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    Header set Cache-Control "public, immutable"
</FilesMatch>

# Configuración de compresión
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
</IfModule>

# Configuración de límites
php_value upload_max_filesize 100M
php_value post_max_size 100M
php_value max_execution_time 300
php_value memory_limit 256M

# Habilitar logging de errores
php_value log_errors On
php_value error_log /tmp/php_errors.log

# Ocultar información del servidor
ServerTokens Prod
Header unset Server
Header unset X-Powered-By

# Proteger archivos sensibles
<Files "*.log">
    Order allow,deny
    Deny from all
</Files>

<Files ".env">
    Order allow,deny
    Deny from all
</Files>

<Files "config.php">
    Order allow,deny
    Deny from all
</Files>

# Configuración de tipos MIME
AddType application/json .json
AddType text/css .css
AddType application/javascript .js

# Configuración de errores personalizados - redirigir a index.php
ErrorDocument 404 /NawapariyProject/api-v3/index.php
ErrorDocument 500 /NawapariyProject/api-v3/index.php
[V0_FILE]php:file="app/index.php" isMerged="true"
<?php
/**
 * Punto de entrada principal de la API v3
 * Ñawpariy Avanza Apurímac - Sistema IoT Agroclimático
 * Versión corregida con mejor manejo de errores y ruteo
 */

// Inicializar tiempo de ejecución
$_SERVER['REQUEST_TIME_FLOAT'] = microtime(true);

// Habilitar logging de errores
ini_set('log_errors', 1);
ini_set('error_log', '/tmp/api_v3_errors.log');

// Log de inicio de request
error_log("=== API v3 Request Start ===");
error_log("Method: " . $_SERVER['REQUEST_METHOD']);
error_log("URI: " . $_SERVER['REQUEST_URI']);
error_log("Script Name: " . $_SERVER['SCRIPT_NAME']);

// Cargar configuración
require_once __DIR__ . '/config/config.php';

// Configurar CORS
require_once __DIR__ . '/config/cors.php';

// Cargar clases principales
require_once __DIR__ . '/config/database.php';
require_once __DIR__ . '/utils/Response.php';
require_once __DIR__ . '/utils/Validator.php';
require_once __DIR__ . '/utils/Router.php';

require_once __DIR__ . '/services/EmailService.php';

// Cargar controladores
require_once __DIR__ . '/controllers/HealthController.php';
require_once __DIR__ . '/controllers/AuthController.php';
require_once __DIR__ . '/controllers/DashboardController.php';
require_once __DIR__ . '/controllers/SensorsController.php';
require_once __DIR__ . '/controllers/SensorDataController.php';
require_once __DIR__ . '/controllers/ZonesController.php';
require_once __DIR__ . '/controllers/ParcelsController.php';
require_once __DIR__ . '/controllers/StationsController.php';
require_once __DIR__ . '/controllers/AlertsController.php';
require_once __DIR__ . '/controllers/UsersController.php';
require_once __DIR__ . '/controllers/AuditController.php';
require_once __DIR__ . '/controllers/PermissionsController.php';

// Manejo de errores global
set_exception_handler(function($exception) {
    error_log("Uncaught exception: " . $exception->getMessage());
    error_log("Stack trace: " . $exception->getTraceAsString());
    
    if (DEBUG_MODE) {
        Response::error('Excepción no capturada: ' . $exception->getMessage() . ' en ' . $exception->getFile() . ':' . $exception->getLine(), 500, [
            'exception_type' => get_class($exception),
            'file' => $exception->getFile(),
            'line' => $exception->getLine(),
            'stack_trace' => $exception->getTraceAsString()
        ]);
    } else {
        Response::error('Error interno del servidor', 500);
    }
});

set_error_handler(function($severity, $message, $file, $line) {
    if (!(error_reporting() & $severity)) {
        return false;
    }
    
    error_log("PHP Error: {$message} in {$file} on line {$line}");
    
    if (DEBUG_MODE) {
        Response::error("Error PHP: {$message}", 500, [
            'severity' => $severity,
            'file' => $file,
            'line' => $line,
            'error_type' => 'PHP_ERROR'
        ]);
    } else {
        Response::error('Error interno del servidor', 500);
    }
});

try {
    // Verificar método HTTP
    $allowedMethods = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'];
    if (!in_array($_SERVER['REQUEST_METHOD'], $allowedMethods)) {
        error_log("Method not allowed: " . $_SERVER['REQUEST_METHOD']);
        Response::error('Método HTTP no permitido', 405);
    }
    
    // Verificar si es un request de health check simple
    $path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
    if (strpos($path, '/health') !== false && $_SERVER['REQUEST_METHOD'] === 'GET') {
        error_log("Health check request detected");
        Response::success([
            'status' => 'OK',
            'version' => '3.0',
            'timestamp' => date('Y-m-d H:i:s'),
            'server' => $_SERVER['SERVER_NAME'],
            'path' => $path
        ], 'API v3 funcionando correctamente');
        exit;
    }
    
    // Inicializar router y procesar solicitud
    error_log("Initializing router...");
    $router = new Router();
    $router->route();
    
} catch (Exception $e) {
    error_log("Router error: " . $e->getMessage());
    error_log("Stack trace: " . $e->getTraceAsString());
    Response::error('Error en el enrutamiento: ' . $e->getMessage(), 500);
}

error_log("=== API v3 Request End ===");
[V0_FILE]markdown:file="app/README-ALERTS.md" isMerged="true"
# Sistema de Alertas Automáticas - Documentación

## Resumen de Cambios

Este documento describe las mejoras implementadas en el sistema de alertas para resolver los problemas de evaluación automática y control de permisos.

## Problemas Resueltos

### 1. ✅ Evaluación Automática en Tiempo Real

**Problema anterior:** Las alertas solo se evaluaban cuando alguien accedía manualmente al endpoint `/alerts/evaluate`.

**Solución implementada:**
- Las alertas ahora se evalúan **automáticamente** cada vez que llegan nuevos datos de sensores
- El método `evaluateAlertsForNewData()` se ejecuta en `SensorDataController::receiveData()`
- Cada lectura de sensor dispara la evaluación de alertas relevantes en tiempo real

**Flujo de evaluación:**
\`\`\`
Sensor envía datos → receiveData() → Guardar datos → evaluateAlertsForNewData() → Generar alertas + Enviar emails
\`\`\`

### 2. ✅ Control de Permisos por Rol

**Problema anterior:** Los visualizadores podían acceder a alertas configuradas.

**Solución implementada:**
- Sistema de permisos basado en roles integrado en el Router
- Rutas protegidas con verificación de permisos antes de ejecutar

**Permisos por rol:**

| Rol | Permisos de Alertas |
|-----|---------------------|
| **Admin** | - Ver alertas activas<br>- Ver/crear/editar/eliminar alertas configuradas<br>- Activar/desactivar alertas<br>- Evaluar alertas manualmente<br>- Ver estadísticas |
| **Operador** | - Ver alertas activas<br>- Ver/crear/editar alertas configuradas<br>- Activar/desactivar alertas<br>- Reconocer/resolver alertas |
| **Visualizador** | - Ver alertas activas únicamente<br>- Reconocer alertas |

**Rutas protegidas:**
- `/alerts/configured/*` - Requiere permiso `manage_alerts`
- `/alerts/evaluate` - Requiere permiso `manage_alerts`
- `/alerts/configured/bulk-toggle` - Requiere permiso `manage_alerts`

### 3. ✅ Activar/Desactivar Alertas

**Problema anterior:** No existía funcionalidad para activar/desactivar alertas configuradas.

**Solución implementada:**

#### Nuevos Endpoints:

**Activar/Desactivar una alerta:**
\`\`\`http
PUT /api-v3/alerts/configured/{id}/toggle
Content-Type: application/json

{
  "activo": true  // o false
}
\`\`\`

**Activar/Desactivar múltiples alertas:**
\`\`\`http
POST /api-v3/alerts/configured/bulk-toggle
Content-Type: application/json

{
  "ids": [1, 2, 3],
  "activo": false
}
\`\`\`

**Respuesta:**
\`\`\`json
{
  "success": true,
  "message": "Alerta activada exitosamente",
  "data": {
    "id": 1,
    "activo": true
  }
}
\`\`\`

## Arquitectura del Sistema

### Evaluación Automática

\`\`\`
┌─────────────────┐
│  Sensor IoT     │
└────────┬────────┘
         │ POST /sensor-data/receive
         ▼
┌─────────────────────────────────┐
│  SensorDataController           │
│  - receiveData()                │
│  - Validar datos                │
│  - Guardar en BD                │
│  - evaluateAlertsForNewData()   │◄─── EVALUACIÓN AUTOMÁTICA
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────────────────────┐
│  Evaluación de Alertas          │
│  1. Buscar alertas activas      │
│  2. Verificar condiciones       │
│  3. Aplicar debounce            │
│  4. Generar alertas             │
│  5. Enviar emails               │
└─────────────────────────────────┘
\`\`\`

### Cron Job (Respaldo)

Aunque la evaluación es automática, el cron job sigue disponible como respaldo:

\`\`\`bash
# Ejecutar cada 10 minutos
*/10 * * * * /usr/bin/php /path/to/api-v3/cron/evaluate-alerts.php >> /var/log/alert-evaluation.log 2>&1
\`\`\`

## Ejemplos de Uso

### 1. Crear una Alerta Configurada

\`\`\`http
POST /api-v3/alerts/configured
Authorization: Bearer {token}
Content-Type: application/json

{
  "nombre": "Temperatura Alta",
  "descripcion": "Alerta cuando la temperatura supera 35°C",
  "categoria": "temperatura",
  "campo_sensor": "temp_ambiente",
  "operador": ">",
  "valor_umbral": 35,
  "nivel_severidad": "HIGH",
  "debounce_minutos": 30,
  "aplica_a_todas_parcelas": true,
  "enviar_email": true,
  "emails_destino": ["admin@example.com"],
  "mensaje_personalizado": "¡Alerta! Temperatura crítica detectada",
  "activo": true
}
\`\`\`

### 2. Desactivar una Alerta

\`\`\`http
PUT /api-v3/alerts/configured/1/toggle
Authorization: Bearer {token}
Content-Type: application/json

{
  "activo": false
}
\`\`\`

### 3. Ver Alertas Activas (Todos los roles)

\`\`\`http
GET /api-v3/alerts/active
Authorization: Bearer {token}
\`\`\`

### 4. Ver Alertas Configuradas (Solo Admin/Operador)

\`\`\`http
GET /api-v3/alerts/configured
Authorization: Bearer {token}
\`\`\`

## Seguridad

### Validación de Permisos

El Router verifica permisos antes de ejecutar cualquier acción:

1. **Autenticación:** Verifica token válido
2. **Autorización:** Verifica permisos del usuario
3. **Ejecución:** Solo si pasa las validaciones

### Respuestas de Error

**Sin autenticación:**
\`\`\`json
{
  "success": false,
  "message": "Token de autenticación requerido",
  "error_code": 401
}
\`\`\`

**Sin permisos:**
\`\`\`json
{
  "success": false,
  "message": "No tienes permisos para acceder a este recurso",
  "error_code": 403
}
\`\`\`

## Logs y Debugging

El sistema registra todas las operaciones importantes:

\`\`\`php
error_log("[SensorDataController] Evaluating alerts for new data - dataId: 123");
error_log("[SensorDataController] Found 5 active alerts to evaluate");
error_log("[SensorDataController] Alert generated: ID 456 for config Temperatura Alta");
error_log("[Router] Permission granted for user 1 on path /alerts/configured");
\`\`\`

## Monitoreo

### Estadísticas de Alertas

\`\`\`http
GET /api-v3/alerts/statistics
Authorization: Bearer {token}
\`\`\`

Respuesta:
\`\`\`json
{
  "success": true,
  "data": {
    "total_configuradas": 10,
    "activas": 8,
    "total_evaluaciones": 1500,
    "total_alertas_generadas": 45,
    "por_categoria": {
      "temperatura": {"total": 3, "alertas_generadas": 15},
      "humedad": {"total": 2, "alertas_generadas": 10}
    }
  }
}
\`\`\`

## Mejores Prácticas

1. **Debounce:** Configure tiempos de debounce apropiados (30-60 minutos) para evitar spam de alertas
2. **Emails:** Use emails específicos por tipo de alerta para mejor organización
3. **Activación:** Desactive alertas durante mantenimiento para evitar falsas alarmas
4. **Monitoreo:** Revise las estadísticas regularmente para optimizar umbrales

## Próximos Pasos

- [ ] Implementar notificaciones push
- [ ] Agregar webhooks para integraciones externas
- [ ] Dashboard de monitoreo de alertas en tiempo real
- [ ] Historial de cambios en alertas configuradas
[V0_FILE]php:file="app/routes.php" isMerged="true"
<?php
/**
 * Definición de rutas de la API v3
 */

// Cargar controlador de sensores de alertas
require_once __DIR__ . '/controllers/AlertSensorsController.php';

$router->addRoute('GET', '/health', 'HealthController', 'check');
$router->addRoute('GET', '/health/detailed', 'HealthController', 'detailed');

// Autenticación
$router->addRoute('POST', '/auth/login', 'AuthController', 'login');
$router->addRoute('POST', '/auth/logout', 'AuthController', 'logout');
$router->addRoute('GET', '/auth/me', 'AuthController', 'getCurrentUser');
$router->addRoute('POST', '/auth/users', 'AuthController', 'createUser');

// Dashboard
$router->addRoute('GET', '/dashboard/overview', 'DashboardController', 'overview');
$router->addRoute('GET', '/dashboard/stats', 'DashboardController', 'stats');

// Sensores
$router->addRoute('GET', '/sensors', 'SensorsController', 'list');
$router->addRoute('GET', '/sensors/{id}', 'SensorsController', 'get');
$router->addRoute('POST', '/sensors', 'SensorsController', 'create');
$router->addRoute('PUT', '/sensors/{id}', 'SensorsController', 'update');
$router->addRoute('DELETE', '/sensors/{id}', 'SensorsController', 'delete');
$router->addRoute('GET', '/sensors/types', 'SensorsController', 'getTypes');
$router->addRoute('GET', '/sensors/station/{stationId}', 'SensorsController', 'getByStation');

// Datos de sensores
$router->addRoute('POST', '/sensor-data/receive', 'SensorDataController', 'receiveData');
$router->addRoute('GET', '/sensor-data/latest', 'SensorDataController', 'getLatestData');
$router->addRoute('GET', '/sensor-data/historical', 'SensorDataController', 'getHistoricalData');
$router->addRoute('GET', '/sensor-data/statistics', 'SensorDataController', 'getStatistics');
$router->addRoute('GET', '/sensor-data/parcela/{parcelaId}', 'SensorDataController', 'getParcelaData');
$router->addRoute('GET', '/sensor-data/export', 'SensorDataController', 'exportData');

// Zonas
$router->addRoute('GET', '/zones', 'ZonesController', 'list');
$router->addRoute('GET', '/zones/{id}', 'ZonesController', 'get');
$router->addRoute('POST', '/zones', 'ZonesController', 'create');
$router->addRoute('PUT', '/zones/{id}', 'ZonesController', 'update');
$router->addRoute('DELETE', '/zones/{id}', 'ZonesController', 'delete');

// Parcelas
$router->addRoute('GET', '/parcels', 'ParcelsController', 'list');
$router->addRoute('GET', '/parcels/{id}', 'ParcelsController', 'get');
$router->addRoute('POST', '/parcels', 'ParcelsController', 'create');
$router->addRoute('PUT', '/parcels/{id}', 'ParcelsController', 'update');
$router->addRoute('DELETE', '/parcels/{id}', 'ParcelsController', 'delete');
$router->addRoute('GET', '/parcels/zone/{zoneId}', 'ParcelsController', 'getByZone');

// Estaciones
$router->addRoute('GET', '/stations', 'StationsController', 'list');
$router->addRoute('GET', '/stations/{id}', 'StationsController', 'get');
$router->addRoute('POST', '/stations', 'StationsController', 'create');
$router->addRoute('PUT', '/stations/{id}', 'StationsController', 'update');
$router->addRoute('DELETE', '/stations/{id}', 'StationsController', 'delete');
$router->addRoute('GET', '/stations/parcela/{parcelaId}', 'StationsController', 'getByParcela');

// Alertas generadas (visualizadores pueden ver solo activas)
$router->addRoute('GET', '/alerts', 'AlertsController', 'list');
$router->addRoute('GET', '/alerts/active', 'AlertsController', 'active');
$router->addRoute('POST', '/alerts/{id}/acknowledge', 'AlertsController', 'acknowledge');
$router->addRoute('POST', '/alerts/{id}/resolve', 'AlertsController', 'resolve');

// Alertas configuradas (solo admin y operador)
$router->addRoute('GET', '/alerts/configured', 'AlertsController', 'listConfigured');
$router->addRoute('GET', '/alerts/configured/{id}', 'AlertsController', 'getConfigured');
$router->addRoute('POST', '/alerts/configured', 'AlertsController', 'createConfigured');
$router->addRoute('PUT', '/alerts/configured/{id}', 'AlertsController', 'updateConfigured');
$router->addRoute('DELETE', '/alerts/configured/{id}', 'AlertsController', 'deleteConfigured');

$router->addRoute('PUT', '/alerts/configured/{id}/toggle', 'AlertsController', 'toggleConfigured');
$router->addRoute('POST', '/alerts/configured/bulk-toggle', 'AlertsController', 'bulkToggle');

// Evaluación de alertas (solo admin)
$router->addRoute('POST', '/alerts/evaluate', 'AlertsController', 'evaluateAlerts');

// Estadísticas de alertas
$router->addRoute('GET', '/alerts/statistics', 'AlertsController', 'statistics');

// Test de emails
$router->addRoute('POST', '/alerts/configured/{id}/test-email', 'AlertsController', 'sendTestEmail');
$router->addRoute('GET', '/alerts/email-methods-stats', 'AlertsController', 'getEmailMethodsStats');

// Sensores de alertas
$router->addRoute('GET', '/alerts/configured/{id}/sensors', 'AlertSensorsController', 'getAlertSensors');
$router->addRoute('POST', '/alerts/configured/sensors', 'AlertSensorsController', 'addSensorToAlert');
$router->addRoute('PUT', '/alerts/configured/sensors/{id}', 'AlertSensorsController', 'updateAlertSensor');
$router->addRoute('PUT', '/alerts/configured/sensors/{id}/toggle', 'AlertSensorsController', 'toggleSensorStatus');
$router->addRoute('DELETE', '/alerts/configured/sensors/{id}', 'AlertSensorsController', 'removeSensorFromAlert');
$router->addRoute('POST', '/alerts/configured/sensors/bulk', 'AlertSensorsController', 'bulkAddSensors');

// Additional routes for alert sensors management
$router->addRoute('GET', '/alerts/configured/{id}/sensors/details', 'AlertSensorsController', 'getSensorDetails');
$router->addRoute('POST', '/alerts/configured/{id}/sensors/priority', 'AlertSensorsController', 'setSensorPriority');

// Usuarios
$router->addRoute('GET', '/users', 'UsersController', 'list');
$router->addRoute('GET', '/users/{id}', 'UsersController', 'get');
$router->addRoute('POST', '/users', 'UsersController', 'create');
$router->addRoute('PUT', '/users/{id}', 'UsersController', 'update');
$router->addRoute('DELETE', '/users/{id}', 'UsersController', 'delete');

// Auditoría
$router->addRoute('GET', '/audit', 'AuditController', 'list');
$router->addRoute('GET', '/audit/{id}', 'AuditController', 'get');
$router->addRoute('GET', '/audit/user/{userId}', 'AuditController', 'getByUser');
$router->addRoute('GET', '/audit/module/{module}', 'AuditController', 'getByModule');

// Permisos
$router->addRoute('GET', '/permissions', 'PermissionsController', 'list');
$router->addRoute('GET', '/permissions/user/{userId}', 'PermissionsController', 'getUserPermissions');
$router->addRoute('POST', '/permissions/user/{userId}', 'PermissionsController', 'assignPermission');
$router->addRoute('DELETE', '/permissions/user/{userId}/{permission}', 'PermissionsController', 'revokePermission');
$router->addRoute('GET', '/permissions/role/{role}', 'PermissionsController', 'getRolePermissions');
[V0_FILE]php:file="backend/config/config.php" isMerged="true"
<?php
/**
 * Configuración principal del backend Sayariq
 * Acceso total desde cualquier origen con errores visibles
 */

error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/../logs/php_errors.log');

// Configuración de zona horaria
date_default_timezone_set('America/Lima');

// Configuración de memoria y tiempo
ini_set('memory_limit', '256M');
ini_set('max_execution_time', 300);

// Configuración de la aplicación
define('API_VERSION', '1.1');
define('DEBUG_MODE', true);
define('AUTH_REQUIRED', false); // Acceso abierto

// Configuración de base de datos InfinityFree
define('DB_HOST', 'sql308.infinityfree.com');
define('DB_NAME', 'if0_40375920_sayariq');
define('DB_USER', 'if0_40375920');
define('DB_PASS', '4EcScCLR1tZun');
define('DB_CHARSET', 'utf8mb4');

// Configuración de sesiones
define('SESSION_LIFETIME', 86400); // 24 horas

// Configuración de archivos
define('UPLOAD_PATH', __DIR__ . '/../uploads/');
define('MAX_FILE_SIZE', 100 * 1024 * 1024); // 100MB

// Configuración de logging
define('LOG_LEVEL', 'DEBUG');
define('LOG_PATH', __DIR__ . '/../logs/');

// Configuración de API
define('API_RATE_LIMIT', 10000); // requests per hour
define('API_TIMEOUT', 30); // seconds

// Configuración de seguridad
define('ENCRYPTION_KEY', 'sayariq_2024_key');
define('JWT_SECRET', 'sayariq_jwt_secret_2024');

// Crear directorios necesarios
$directories = [
    LOG_PATH,
    UPLOAD_PATH
];

foreach ($directories as $dir) {
    if (!file_exists($dir)) {
        @mkdir($dir, 0755, true);
    }
}

// Configuración de headers de seguridad
header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: SAMEORIGIN');
header('X-XSS-Protection: 1; mode=block');
header('Referrer-Policy: strict-origin-when-cross-origin');

// Configuración de contenido
header('Content-Type: application/json; charset=utf-8');

// Función de logging mejorada
function logMessage($level, $message, $context = []) {
    $timestamp = date('Y-m-d H:i:s');
    $contextStr = !empty($context) ? ' | Context: ' . json_encode($context) : '';
    $logEntry = "[{$timestamp}] [{$level}] {$message}{$contextStr}" . PHP_EOL;
    
    $logFile = LOG_PATH . 'api_' . date('Y-m-d') . '.log';
    @file_put_contents($logFile, $logEntry, FILE_APPEND | LOCK_EX);
    
    // También mostrar en pantalla si DEBUG_MODE está activo
    if (DEBUG_MODE) {
        error_log($logEntry);
    }
}

// Función de configuración dinámica
function getConfig($key, $default = null) {
    $configs = [
        'api.version' => API_VERSION,
        'api.debug' => DEBUG_MODE,
        'db.host' => DB_HOST,
        'db.name' => DB_NAME,
        'upload.max_size' => MAX_FILE_SIZE,
        'auth.required' => AUTH_REQUIRED
    ];
    
    return $configs[$key] ?? $default;
}

// Log de inicio de la aplicación
logMessage('INFO', 'Backend Sayariq v' . API_VERSION . ' iniciado', [
    'method' => $_SERVER['REQUEST_METHOD'] ?? 'unknown',
    'uri' => $_SERVER['REQUEST_URI'] ?? 'unknown',
    'ip' => $_SERVER['REMOTE_ADDR'] ?? 'unknown',
    'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? 'unknown'
]);

// Función para responder con JSON
function jsonResponse($data, $statusCode = 200) {
    http_response_code($statusCode);
    header('Content-Type: application/json');
    echo json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
    exit;
}

// Manejador de errores global
set_error_handler(function($errno, $errstr, $errfile, $errline) {
    $error = [
        'success' => false,
        'error' => 'PHP Error',
        'message' => $errstr,
        'file' => $errfile,
        'line' => $errline,
        'code' => $errno,
        'timestamp' => date('Y-m-d H:i:s')
    ];
    
    logMessage('ERROR', $errstr, [
        'file' => $errfile,
        'line' => $errline,
        'code' => $errno
    ]);
    
    // Mostrar error visible
    if (DEBUG_MODE) {
        echo json_encode($error, JSON_PRETTY_PRINT);
    }
    
    return true;
});

// Manejador de excepciones global
set_exception_handler(function($exception) {
    $error = [
        'success' => false,
        'error' => 'Exception',
        'message' => $exception->getMessage(),
        'file' => $exception->getFile(),
        'line' => $exception->getLine(),
        'trace' => $exception->getTraceAsString(),
        'timestamp' => date('Y-m-d H:i:s')
    ];
    
    logMessage('EXCEPTION', $exception->getMessage(), [
        'file' => $exception->getFile(),
        'line' => $exception->getLine()
    ]);
    
    jsonResponse($error, 500);
});
?>
[V0_FILE]php:file="backend/config/cors.php" isMerged="true"
[V0_FILE]php:file="backend/config/database.php" isMerged="true"
[V0_FILE]php:file="backend/controllers/AjusteContableController.php" isMerged="true"
[V0_FILE]php:file="backend/controllers/BancoController.php" isMerged="true"
<?php
require_once 'BaseController.php';

class BancoController extends BaseController {
    public function index() {
        $stmt = $this->db->query("
            SELECT * FROM libro_banco 
            ORDER BY fecha DESC, created_at DESC
        ");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

public function show($id) {
        $stmt = $this->db->prepare("SELECT * FROM libro_banco WHERE id = ?");
        $stmt->execute([$id]);
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

public function create($data) {
        $stmt = $this->db->prepare("
            INSERT INTO libro_banco (
                fecha, operacion, quien, de_quien, motivo, tipo,
                rubro_campo, rubro_economico, numero_operacion,
                comprobante, monto, deudor, acreedor, estado
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
        ");
        
        $result = $stmt->execute([
            $data['fecha'] ?? date('Y-m-d'),
            $data['operacion'],
            $data['quien'] ?? null,
            $data['de_quien'] ?? null,
            $data['motivo'] ?? null,
            $data['tipo'] ?? 'general',
            $data['rubro_campo'] ?? null,
            $data['rubro_economico'] ?? null,
            $data['numero_operacion'] ?? null,
            $data['comprobante'] ?? null,
            $data['monto'] ?? 0,
            $data['deudor'] ?? 0,
            $data['acreedor'] ?? 0,
            $data['estado'] ?? 'activo'
        ]);

return $result ? $this->db->lastInsertId() : false;
    }

public function update($id, $data) {
        $fields = [];
        $values = [];

foreach ($data as $key => $value) {
            if ($key !== 'id') {
                $fields[] = "$key = ?";
                $values[] = $value;
            }
        }

$values[] = $id;
        $sql = "UPDATE libro_banco SET " . implode(', ', $fields) . " WHERE id = ?";
        $stmt = $this->db->prepare($sql);
        return $stmt->execute($values);
    }

public function delete($id) {
        $stmt = $this->db->prepare("DELETE FROM libro_banco WHERE id = ?");
        return $stmt->execute([$id]);
    }

public function getSummary() {
        $stmt = $this->db->query("
            SELECT 
                SUM(CASE WHEN tipo = 'adelanto' AND estado = 'pendiente' THEN monto ELSE 0 END) as suma_adelantos_pendientes,
                COUNT(CASE WHEN tipo = 'liquidacion' AND estado = 'pendiente' THEN 1 END) as recuento_liquidaciones_pendiente,
                SUM(CASE WHEN tipo = 'pago' AND estado = 'pendiente' THEN monto ELSE 0 END) as suma_pago_pendiente
            FROM libro_banco
        ");
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }
}
[V0_FILE]php:file="backend/controllers/BaseController.php" isMerged="true"
<?php

class BaseController {
    protected $db;

public function __construct($db) {
        $this->db = $db;
    }

public function handleRequest($method, $id = null, $action = null) {
        // Get JSON input for POST/PUT
        $data = null;
        if ($method === 'POST' || $method === 'PUT') {
            $json = file_get_contents('php://input');
            $data = json_decode($json, true);
        }

try {
            switch($method) {
                case 'GET':
                    if ($id) {
                        if ($action) {
                            // Custom action
                            $methodName = 'get' . ucfirst($action);
                            if (method_exists($this, $methodName)) {
                                $result = $this->$methodName($id);
                            } else {
                                http_response_code(404);
                                echo json_encode(["message" => "Acción no encontrada"]);
                                return;
                            }
                        } else {
                            // Get single resource
                            $result = $this->show($id);
                        }
                    } else {
                        // Get all resources
                        $result = $this->index();
                    }
                    echo json_encode($result);
                    break;

case 'POST':
                    $result = $this->create($data);
                    if ($result) {
                        http_response_code(201);
                        echo json_encode(["id" => $result, "message" => "Creado exitosamente"]);
                    } else {
                        http_response_code(400);
                        echo json_encode(["message" => "Error al crear"]);
                    }
                    break;

case 'PUT':
                    if (!$id) {
                        http_response_code(400);
                        echo json_encode(["message" => "ID requerido"]);
                        return;
                    }
                    $result = $this->update($id, $data);
                    if ($result) {
                        echo json_encode(["message" => "Actualizado exitosamente"]);
                    } else {
                        http_response_code(400);
                        echo json_encode(["message" => "Error al actualizar"]);
                    }
                    break;

case 'DELETE':
                    if (!$id) {
                        http_response_code(400);
                        echo json_encode(["message" => "ID requerido"]);
                        return;
                    }
                    $result = $this->delete($id);
                    if ($result) {
                        echo json_encode(["message" => "Eliminado exitosamente"]);
                    } else {
                        http_response_code(400);
                        echo json_encode(["message" => "Error al eliminar"]);
                    }
                    break;

default:
                    http_response_code(405);
                    echo json_encode(["message" => "Método no permitido"]);
                    break;
            }
        } catch (Exception $e) {
            http_response_code(500);
            echo json_encode(["message" => "Error del servidor", "error" => $e->getMessage()]);
        }
    }

// Override these methods in child controllers
    public function index() {
        return [];
    }

public function show($id) {
        return null;
    }

public function create($data) {
        return false;
    }

public function update($id, $data) {
        return false;
    }

public function delete($id) {
        return false;
    }
}
[V0_FILE]php:file="backend/controllers/EmpleadosController.php" isMerged="true"
<?php
require_once 'BaseController.php';

class EmpleadosController extends BaseController {
    public function index() {
        $stmt = $this->db->query("
            SELECT * FROM empleados 
            ORDER BY created_at DESC
        ");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

public function show($id) {
        $stmt = $this->db->prepare("SELECT * FROM empleados WHERE id = ?");
        $stmt->execute([$id]);
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

public function create($data) {
        $stmt = $this->db->prepare("
            INSERT INTO empleados (
                nombres, apellidos, documento_identidad, cargo,
                area, sueldo, fecha_ingreso, estado
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
        ");
        
        $result = $stmt->execute([
            $data['nombres'],
            $data['apellidos'],
            $data['documento_identidad'],
            $data['cargo'],
            $data['area'],
            $data['sueldo'],
            $data['fecha_ingreso'] ?? date('Y-m-d'),
            $data['estado'] ?? 'activo'
        ]);

return $result ? $this->db->lastInsertId() : false;
    }

public function update($id, $data) {
        $fields = [];
        $values = [];

foreach ($data as $key => $value) {
            if ($key !== 'id') {
                $fields[] = "$key = ?";
                $values[] = $value;
            }
        }

$values[] = $id;
        $sql = "UPDATE empleados SET " . implode(', ', $fields) . " WHERE id = ?";
        $stmt = $this->db->prepare($sql);
        return $stmt->execute($values);
    }

public function delete($id) {
        $stmt = $this->db->prepare("DELETE FROM empleados WHERE id = ?");
        return $stmt->execute([$id]);
    }
}
[V0_FILE]php:file="backend/controllers/KardexController.php" isMerged="true"
<?php
class KardexController {
    private $conn;
    private $table = "kardex_lotes";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'por-lote') {
                    $this->getByLote();
                } else if ($action === 'saldos') {
                    $this->getSaldos();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT k.*, l.numero_lote, p.nombre_completo as productor_nombre
                  FROM " . $this->table . " k
                  LEFT JOIN lotes l ON k.lote_id = l.id
                  LEFT JOIN personas p ON l.productor_id = p.id
                  ORDER BY k.fecha_movimiento DESC, k.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT k.*, l.numero_lote, p.nombre_completo as productor_nombre
                  FROM " . $this->table . " k
                  LEFT JOIN lotes l ON k.lote_id = l.id
                  LEFT JOIN personas p ON l.productor_id = p.id
                  WHERE k.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getByLote() {
        $data = json_decode(file_get_contents("php://input"));
        $loteId = $data->lote_id ?? null;
        
        $query = "SELECT k.* FROM " . $this->table . " k
                  WHERE k.lote_id = :lote_id
                  ORDER BY k.fecha_movimiento DESC, k.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':lote_id', $loteId);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getSaldos() {
        $data = json_decode(file_get_contents("php://input"));
        $loteId = $data->lote_id ?? null;
        
        if ($loteId) {
            $query = "SELECT 
                        categoria,
                        SUM(CASE WHEN tipo_movimiento = 'ingreso' THEN peso ELSE 0 END) as total_ingreso,
                        SUM(CASE WHEN tipo_movimiento = 'salida' THEN peso ELSE 0 END) as total_salida,
                        SUM(CASE WHEN tipo_movimiento = 'ingreso' THEN peso ELSE -peso END) as saldo
                      FROM " . $this->table . "
                      WHERE lote_id = :lote_id
                      GROUP BY categoria";
            $stmt = $this->conn->prepare($query);
            $stmt->bindParam(':lote_id', $loteId);
        } else {
            $query = "SELECT 
                        categoria,
                        SUM(CASE WHEN tipo_movimiento = 'ingreso' THEN peso ELSE 0 END) as total_ingreso,
                        SUM(CASE WHEN tipo_movimiento = 'salida' THEN peso ELSE 0 END) as total_salida,
                        SUM(CASE WHEN tipo_movimiento = 'ingreso' THEN peso ELSE -peso END) as saldo
                      FROM " . $this->table . "
                      GROUP BY categoria";
            $stmt = $this->conn->prepare($query);
        }
        
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (lote_id, tipo_movimiento, categoria, peso, fecha_movimiento, referencia, saldo_categoria) 
                  VALUES (:lote, :tipo, :cat, :peso, :fecha, :ref, :saldo)";
        
        $stmt = $this->conn->prepare($query);
        
        $lote = $data->lote_id ?? null;
        $tipo = $data->tipo_movimiento ?? 'ingreso';
        $cat = $data->categoria ?? 'exportable';
        $peso = $data->peso ?? 0;
        $fecha = $data->fecha_movimiento ?? date('Y-m-d');
        $ref = $data->referencia ?? '';
        $saldo = $data->saldo_categoria ?? 0;
        
        $stmt->bindParam(':lote', $lote);
        $stmt->bindParam(':tipo', $tipo);
        $stmt->bindParam(':cat', $cat);
        $stmt->bindParam(':peso', $peso);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':ref', $ref);
        $stmt->bindParam(':saldo', $saldo);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Kardex creado", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear kardex"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Kardex eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar kardex"]);
        }
    }
}
?>
[V0_FILE]php:file="backend/controllers/LotesController.php" isMerged="true"
<?php
class LotesController {
    private $conn;
    private $table = "lotes";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'almacen') {
                    $this->getAlmacen();
                } else if ($action === 'por-liquidar') {
                    $this->getPorLiquidar();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT l.*, p.nombre_completo as productor_nombre 
                  FROM " . $this->table . " l
                  LEFT JOIN personas p ON l.productor_id = p.id
                  ORDER BY l.fecha_ingreso DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT l.*, p.nombre_completo as productor_nombre,
                  p.documento_identidad, p.telefono, p.cuenta_bancaria
                  FROM " . $this->table . " l
                  LEFT JOIN personas p ON l.productor_id = p.id
                  WHERE l.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getAlmacen() {
        $query = "SELECT l.*, p.nombre_completo as productor_nombre,
                  (SELECT SUM(peso_exportable) FROM pesos_lote WHERE lote_id = l.id) as total_exportable,
                  (SELECT SUM(peso_industrial) FROM pesos_lote WHERE lote_id = l.id) as total_industrial,
                  (SELECT SUM(peso_descarte) FROM pesos_lote WHERE lote_id = l.id) as total_descarte
                  FROM " . $this->table . " l
                  LEFT JOIN personas p ON l.productor_id = p.id
                  WHERE l.estado IN ('proceso', 'pendiente')
                  ORDER BY l.fecha_ingreso DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getPorLiquidar() {
        $query = "SELECT l.*, p.nombre_completo as productor_nombre,
                  (SELECT total_proceso FROM ajustes_contables WHERE lote_id = l.id ORDER BY id DESC LIMIT 1) as total_liquidacion
                  FROM " . $this->table . " l
                  LEFT JOIN personas p ON l.productor_id = p.id
                  WHERE l.estado = 'proceso'
                  ORDER BY l.fecha_proceso DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (numero_lote, guia_ingreso, productor_id, producto, fecha_ingreso, 
                   peso_inicial, numero_jabas, estado, estado_frescura, observaciones) 
                  VALUES (:numero, :guia, :productor, :producto, :fecha, 
                          :peso, :jabas, :estado, :frescura, :obs)";
        
        $stmt = $this->conn->prepare($query);
        
        $numero = $data->numero_lote ?? '';
        $guia = $data->guia_ingreso ?? '';
        $productor = $data->productor_id ?? null;
        $producto = $data->producto ?? '';
        $fecha = $data->fecha_ingreso ?? date('Y-m-d');
        $peso = $data->peso_inicial ?? 0;
        $jabas = $data->numero_jabas ?? 0;
        $estado = $data->estado ?? 'pendiente';
        $frescura = $data->estado_frescura ?? 'optimo';
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':numero', $numero);
        $stmt->bindParam(':guia', $guia);
        $stmt->bindParam(':productor', $productor);
        $stmt->bindParam(':producto', $producto);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':peso', $peso);
        $stmt->bindParam(':jabas', $jabas);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':frescura', $frescura);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Lote creado", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear lote", "error" => $stmt->errorInfo()]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "UPDATE " . $this->table . " SET 
                  numero_lote = :numero,
                  guia_ingreso = :guia,
                  productor_id = :productor,
                  producto = :producto,
                  fecha_ingreso = :fecha,
                  fecha_proceso = :fecha_proceso,
                  peso_inicial = :peso,
                  peso_neto = :peso_neto,
                  numero_jabas = :jabas,
                  estado = :estado,
                  estado_frescura = :frescura,
                  observaciones = :obs
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        
        $numero = $data->numero_lote ?? '';
        $guia = $data->guia_ingreso ?? '';
        $productor = $data->productor_id ?? null;
        $producto = $data->producto ?? '';
        $fecha = $data->fecha_ingreso ?? date('Y-m-d');
        $fechaProceso = $data->fecha_proceso ?? null;
        $peso = $data->peso_inicial ?? 0;
        $pesoNeto = $data->peso_neto ?? null;
        $jabas = $data->numero_jabas ?? 0;
        $estado = $data->estado ?? 'pendiente';
        $frescura = $data->estado_frescura ?? 'optimo';
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':numero', $numero);
        $stmt->bindParam(':guia', $guia);
        $stmt->bindParam(':productor', $productor);
        $stmt->bindParam(':producto', $producto);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':fecha_proceso', $fechaProceso);
        $stmt->bindParam(':peso', $peso);
        $stmt->bindParam(':peso_neto', $pesoNeto);
        $stmt->bindParam(':jabas', $jabas);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':frescura', $frescura);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Lote actualizado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar lote"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Lote eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar lote"]);
        }
    }
}
?>
[V0_FILE]php:file="backend/controllers/PagoCampoController.php" isMerged="true"
<?php
class PagoCampoController {
    private $conn;
    private $table = "pagos_campo";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'por-productor') {
                    $this->getByProductor();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT pc.*, p.nombre_completo as productor_nombre,
                  l.numero_lote, ac.total_proceso as total_liquidacion
                  FROM " . $this->table . " pc
                  LEFT JOIN personas p ON pc.productor_id = p.id
                  LEFT JOIN lotes l ON pc.lote_id = l.id
                  LEFT JOIN ajustes_contables ac ON ac.lote_id = l.id
                  ORDER BY pc.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT pc.*, p.nombre_completo as productor_nombre,
                  p.documento_identidad, p.cuenta_bancaria, p.banco,
                  l.numero_lote, ac.total_proceso as total_liquidacion
                  FROM " . $this->table . " pc
                  LEFT JOIN personas p ON pc.productor_id = p.id
                  LEFT JOIN lotes l ON pc.lote_id = l.id
                  LEFT JOIN ajustes_contables ac ON ac.lote_id = l.id
                  WHERE pc.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getByProductor() {
        $data = json_decode(file_get_contents("php://input"));
        $productorId = $data->productor_id ?? null;
        
        if (!$productorId) {
            http_response_code(400);
            echo json_encode(["message" => "productor_id requerido"]);
            return;
        }
        
        $query = "SELECT pc.*, l.numero_lote, ac.total_proceso as total_liquidacion
                  FROM " . $this->table . " pc
                  LEFT JOIN lotes l ON pc.lote_id = l.id
                  LEFT JOIN ajustes_contables ac ON ac.lote_id = l.id
                  WHERE pc.productor_id = :productor
                  ORDER BY pc.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':productor', $productorId);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (lote_id, productor_id, total_liquidacion, total_adelantos, adelanto_restante, 
                   monto_pago, saldo_pendiente, fecha_pago, datos_bancarios, observaciones, estado) 
                  VALUES (:lote, :prod, :total_liq, :total_adel, :adel_rest, :monto, :saldo, 
                          :fecha, :datos, :obs, :estado)";
        
        $stmt = $this->conn->prepare($query);
        
        $lote = $data->lote_id ?? null;
        $prod = $data->productor_id ?? null;
        $totalLiq = $data->total_liquidacion ?? 0;
        $totalAdel = $data->total_adelantos ?? 0;
        $adelRest = $data->adelanto_restante ?? 0;
        $monto = $data->monto_pago ?? 0;
        $saldo = $data->saldo_pendiente ?? 0;
        $fecha = $data->fecha_pago ?? null;
        $datos = $data->datos_bancarios ?? '';
        $obs = $data->observaciones ?? '';
        $estado = $data->estado ?? 'pendiente';
        
        $stmt->bindParam(':lote', $lote);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':total_liq', $totalLiq);
        $stmt->bindParam(':total_adel', $totalAdel);
        $stmt->bindParam(':adel_rest', $adelRest);
        $stmt->bindParam(':monto', $monto);
        $stmt->bindParam(':saldo', $saldo);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':datos', $datos);
        $stmt->bindParam(':obs', $obs);
        $stmt->bindParam(':estado', $estado);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Pago creado", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear pago"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "UPDATE " . $this->table . " SET 
                  lote_id = :lote,
                  productor_id = :prod,
                  total_liquidacion = :total_liq,
                  total_adelantos = :total_adel,
                  adelanto_restante = :adel_rest,
                  monto_pago = :monto,
                  saldo_pendiente = :saldo,
                  fecha_pago = :fecha,
                  datos_bancarios = :datos,
                  observaciones = :obs,
                  estado = :estado
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        
        $lote = $data->lote_id ?? null;
        $prod = $data->productor_id ?? null;
        $totalLiq = $data->total_liquidacion ?? 0;
        $totalAdel = $data->total_adelantos ?? 0;
        $adelRest = $data->adelanto_restante ?? 0;
        $monto = $data->monto_pago ?? 0;
        $saldo = $data->saldo_pendiente ?? 0;
        $fecha = $data->fecha_pago ?? null;
        $datos = $data->datos_bancarios ?? '';
        $obs = $data->observaciones ?? '';
        $estado = $data->estado ?? 'pendiente';
        
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':lote', $lote);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':total_liq', $totalLiq);
        $stmt->bindParam(':total_adel', $totalAdel);
        $stmt->bindParam(':adel_rest', $adelRest);
        $stmt->bindParam(':monto', $monto);
        $stmt->bindParam(':saldo', $saldo);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':datos', $datos);
        $stmt->bindParam(':obs', $obs);
        $stmt->bindParam(':estado', $estado);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Pago actualizado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar pago"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Pago eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar pago"]);
        }
    }
}
?>
[V0_FILE]php:file="backend/controllers/PesosController.php" isMerged="true"
<?php
class PesosController {
    private $conn;
    private $table = "pesos_lote";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($action === 'por-lote' && $id) {
                    $this->getPorLote($id);
                } else if ($id) {
                    $this->getOne($id);
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT p.*, l.numero_lote, l.producto
                  FROM " . $this->table . " p
                  LEFT JOIN lotes l ON p.lote_id = l.id
                  ORDER BY p.fecha_pesado DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT * FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getPorLote($loteId) {
        $query = "SELECT * FROM " . $this->table . " WHERE lote_id = :lote_id ORDER BY fecha_pesado DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':lote_id', $loteId);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (lote_id, fecha_pesado, peso_bruto, peso_exportable, 
                   peso_industrial, peso_descarte, observaciones) 
                  VALUES (:lote, :fecha, :bruto, :exportable, 
                          :industrial, :descarte, :obs)";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':lote', $data->lote_id);
        $stmt->bindParam(':fecha', $data->fecha_pesado);
        $stmt->bindParam(':bruto', $data->peso_bruto);
        $stmt->bindParam(':exportable', $data->peso_exportable);
        $stmt->bindParam(':industrial', $data->peso_industrial);
        $stmt->bindParam(':descarte', $data->peso_descarte);
        $stmt->bindParam(':obs', $data->observaciones);
        
        if($stmt->execute()) {
            // Actualizar kardex
            $this->updateKardex($data);
            http_response_code(201);
            echo json_encode(["message" => "Peso registrado", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al registrar peso"]);
        }
    }

private function updateKardex($data) {
        // Registrar ingresos en kardex por cada categoría
        if ($data->peso_exportable > 0) {
            $this->insertKardex($data->lote_id, 'ingreso', 'exportable', $data->peso_exportable, $data->fecha_pesado);
        }
        if ($data->peso_industrial > 0) {
            $this->insertKardex($data->lote_id, 'ingreso', 'industrial', $data->peso_industrial, $data->fecha_pesado);
        }
        if ($data->peso_descarte > 0) {
            $this->insertKardex($data->lote_id, 'ingreso', 'descarte', $data->peso_descarte, $data->fecha_pesado);
        }
    }

private function insertKardex($loteId, $tipo, $categoria, $peso, $fecha) {
        // Obtener saldo anterior
        $query = "SELECT saldo_categoria FROM kardex_lotes 
                  WHERE lote_id = :lote AND categoria = :cat 
                  ORDER BY id DESC LIMIT 1";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':lote', $loteId);
        $stmt->bindParam(':cat', $categoria);
        $stmt->execute();
        $saldoAnterior = $stmt->fetchColumn() ?: 0;
        
        $nuevoSaldo = $tipo === 'ingreso' ? $saldoAnterior + $peso : $saldoAnterior - $peso;
        
        $query = "INSERT INTO kardex_lotes 
                  (lote_id, tipo_movimiento, categoria, peso, fecha_movimiento, saldo_categoria, referencia)
                  VALUES (:lote, :tipo, :cat, :peso, :fecha, :saldo, :ref)";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':lote', $loteId);
        $stmt->bindParam(':tipo', $tipo);
        $stmt->bindParam(':cat', $categoria);
        $stmt->bindParam(':peso', $peso);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':saldo', $nuevoSaldo);
        $ref = "Registro de peso";
        $stmt->bindParam(':ref', $ref);
        $stmt->execute();
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "UPDATE " . $this->table . " SET 
                  lote_id = :lote,
                  fecha_pesado = :fecha,
                  peso_bruto = :bruto,
                  peso_exportable = :exportable,
                  peso_industrial = :industrial,
                  peso_descarte = :descarte,
                  observaciones = :obs
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':lote', $data->lote_id);
        $stmt->bindParam(':fecha', $data->fecha_pesado);
        $stmt->bindParam(':bruto', $data->peso_bruto);
        $stmt->bindParam(':exportable', $data->peso_exportable);
        $stmt->bindParam(':industrial', $data->peso_industrial);
        $stmt->bindParam(':descarte', $data->peso_descarte);
        $stmt->bindParam(':obs', $data->observaciones);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Peso actualizado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar peso"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Peso eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar peso"]);
        }
    }
}
[V0_FILE]php:file="backend/controllers/RentabilidadController.php" isMerged="true"
<?php
require_once 'BaseController.php';

class RentabilidadController extends BaseController {
    public function handleRequest($method, $id = null, $action = null) {
        if ($method !== 'GET') {
            http_response_code(405);
            echo json_encode(["message" => "Solo se permite GET"]);
            return;
        }

try {
            $periodo = $action ?? 'diaria';
            
            switch($periodo) {
                case 'diaria':
                    $fecha = $_GET['fecha'] ?? null;
                    $result = $this->getDiaria($fecha);
                    break;
                case 'semanal':
                    $fechaInicio = $_GET['fechaInicio'] ?? null;
                    $fechaFin = $_GET['fechaFin'] ?? null;
                    $result = $this->getSemanal($fechaInicio, $fechaFin);
                    break;
                case 'mensual':
                    $mes = $_GET['mes'] ?? null;
                    $anio = $_GET['anio'] ?? null;
                    $result = $this->getMensual($mes, $anio);
                    break;
                default:
                    http_response_code(400);
                    echo json_encode(["message" => "Período inválido"]);
                    return;
            }

echo json_encode($result);
        } catch (Exception $e) {
            http_response_code(500);
            echo json_encode(["message" => "Error del servidor", "error" => $e->getMessage()]);
        }
    }

private function getDiaria($fecha = null) {
        if (!$fecha) $fecha = date('Y-m-d');
        
        $stmt = $this->db->prepare("SELECT SUM(total) as suma_ventas FROM ventas WHERE DATE(fecha) = ?");
        $stmt->execute([$fecha]);
        $ventas = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->query("SELECT SUM(sueldo / 30) as suma_personal FROM empleados WHERE estado = 'activo'");
        $personal = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->prepare("
            SELECT SUM(ac.total_proceso) as suma_mp
            FROM ventas v
            JOIN detalles_venta dv ON v.id = dv.venta_id
            JOIN lotes l ON dv.lote_id = l.id
            JOIN ajustes_contables ac ON ac.lote_id = l.id
            WHERE DATE(v.fecha) = ?
        ");
        $stmt->execute([$fecha]);
        $mp = $stmt->fetch(PDO::FETCH_ASSOC);

$ganancia = ($ventas['suma_ventas'] ?? 0) - ($personal['suma_personal'] ?? 0) - ($mp['suma_mp'] ?? 0);

return [
            'suma_ventas' => $ventas['suma_ventas'] ?? 0,
            'suma_personal' => $personal['suma_personal'] ?? 0,
            'suma_mp' => $mp['suma_mp'] ?? 0,
            'ganancia_dia' => $ganancia
        ];
    }

private function getSemanal($fechaInicio = null, $fechaFin = null) {
        if (!$fechaInicio) {
            $fechaInicio = date('Y-m-d', strtotime('monday this week'));
            $fechaFin = date('Y-m-d', strtotime('sunday this week'));
        }

$stmt = $this->db->prepare("SELECT SUM(total) as suma_ventas FROM ventas WHERE fecha BETWEEN ? AND ?");
        $stmt->execute([$fechaInicio, $fechaFin]);
        $ventas = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->query("SELECT SUM(sueldo / 30 * 7) as suma_personal FROM empleados WHERE estado = 'activo'");
        $personal = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->prepare("
            SELECT SUM(ac.total_proceso) as suma_mp
            FROM ventas v
            JOIN detalles_venta dv ON v.id = dv.venta_id
            JOIN lotes l ON dv.lote_id = l.id
            JOIN ajustes_contables ac ON ac.lote_id = l.id
            WHERE v.fecha BETWEEN ? AND ?
        ");
        $stmt->execute([$fechaInicio, $fechaFin]);
        $mp = $stmt->fetch(PDO::FETCH_ASSOC);

$ganancia = ($ventas['suma_ventas'] ?? 0) - ($personal['suma_personal'] ?? 0) - ($mp['suma_mp'] ?? 0);

return [
            'suma_ventas' => $ventas['suma_ventas'] ?? 0,
            'suma_personal' => $personal['suma_personal'] ?? 0,
            'suma_mp' => $mp['suma_mp'] ?? 0,
            'ganancia_semanal' => $ganancia
        ];
    }

private function getMensual($mes = null, $anio = null) {
        if (!$mes) $mes = date('m');
        if (!$anio) $anio = date('Y');

$stmt = $this->db->prepare("SELECT SUM(total) as suma_ventas FROM ventas WHERE MONTH(fecha) = ? AND YEAR(fecha) = ?");
        $stmt->execute([$mes, $anio]);
        $ventas = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->query("SELECT SUM(sueldo) as suma_personal FROM empleados WHERE estado = 'activo'");
        $personal = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->prepare("
            SELECT SUM(ac.total_proceso) as suma_mp
            FROM ventas v
            JOIN detalles_venta dv ON v.id = dv.venta_id
            JOIN lotes l ON dv.lote_id = l.id
            JOIN ajustes_contables ac ON ac.lote_id = l.id
            WHERE MONTH(v.fecha) = ? AND YEAR(v.fecha) = ?
        ");
        $stmt->execute([$mes, $anio]);
        $mp = $stmt->fetch(PDO::FETCH_ASSOC);

$stmt = $this->db->query("SELECT SUM(monto) as costos_fijos FROM costos_fijos WHERE periodo = 'mensual'");
        $costos = $stmt->fetch(PDO::FETCH_ASSOC);

$ganancia = ($ventas['suma_ventas'] ?? 0) - ($personal['suma_personal'] ?? 0) - ($mp['suma_mp'] ?? 0) - ($costos['costos_fijos'] ?? 0);

return [
            'suma_ventas' => $ventas['suma_ventas'] ?? 0,
            'suma_personal' => $personal['suma_personal'] ?? 0,
            'suma_mp' => $mp['suma_mp'] ?? 0,
            'costos_fijos' => $costos['costos_fijos'] ?? 0,
            'ganancia_mes' => $ganancia
        ];
    }
}
[V0_FILE]sql:file="backend/database/schema.sql" isMerged="true"
-- phpMyAdmin SQL Dump
-- version 5.2.2
-- https://www.phpmyadmin.net/
--
-- Servidor: localhost:3306
-- Tiempo de generación: 18-11-2025 a las 16:09:35
-- Versión del servidor: 10.11.14-MariaDB-cll-lve
-- Versión de PHP: 8.4.14

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `fran2869_sayariq`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `adelantos`
--

CREATE TABLE `adelantos` (
  `id` int(11) NOT NULL,
  `productor_id` int(11) NOT NULL,
  `lote_id` int(11) DEFAULT NULL,
  `monto` decimal(10,2) NOT NULL,
  `fecha_adelanto` date NOT NULL,
  `motivo` text DEFAULT NULL,
  `estado` enum('pendiente','aplicado','cancelado') DEFAULT 'pendiente',
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `adelantos`
--

INSERT INTO `adelantos` (`id`, `productor_id`, `lote_id`, `monto`, `fecha_adelanto`, `motivo`, `estado`, `created_at`) VALUES
(1, 1, 1, 3000.00, '2024-01-10', 'Adelanto para gastos de cosecha', 'aplicado', '2025-11-13 15:19:28'),
(2, 3, 2, 4000.00, '2024-01-12', 'Adelanto programado', 'aplicado', '2025-11-13 15:19:28'),
(3, 6, NULL, 2000.00, '2024-01-14', 'Adelanto por futura cosecha', 'pendiente', '2025-11-13 15:19:28'),
(4, 1, 4, 3500.00, '2024-01-20', 'Adelanto para insumos', 'aplicado', '2025-11-13 15:19:28'),
(5, 3, NULL, 2500.00, '2024-01-22', 'Adelanto personal', 'pendiente', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `ajustes_contables`
--

CREATE TABLE `ajustes_contables` (
  `id` int(11) NOT NULL,
  `lote_id` int(11) NOT NULL,
  `tipo_ajuste` enum('por_proceso','carga_cerrada') NOT NULL,
  `peso_exportable` decimal(10,2) DEFAULT 0.00,
  `precio_exportable` decimal(10,2) DEFAULT 0.00,
  `monto_exportable` decimal(10,2) DEFAULT 0.00,
  `peso_industrial` decimal(10,2) DEFAULT 0.00,
  `precio_industrial` decimal(10,2) DEFAULT 0.00,
  `monto_industrial` decimal(10,2) DEFAULT 0.00,
  `peso_descarte` decimal(10,2) DEFAULT 0.00,
  `precio_descarte` decimal(10,2) DEFAULT 0.00,
  `monto_descarte` decimal(10,2) DEFAULT 0.00,
  `total_proceso` decimal(10,2) NOT NULL,
  `peso_ingreso` decimal(10,2) DEFAULT NULL,
  `precio_kg` decimal(10,2) DEFAULT NULL,
  `total_carga` decimal(10,2) DEFAULT NULL,
  `fecha_liquidacion` date DEFAULT NULL,
  `serie` varchar(50) DEFAULT NULL,
  `numero_liquidacion` varchar(50) DEFAULT NULL,
  `observaciones` text DEFAULT NULL,
  `estado` enum('pendiente','aprobado') DEFAULT 'pendiente',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `ajustes_contables`
--

INSERT INTO `ajustes_contables` (`id`, `lote_id`, `tipo_ajuste`, `peso_exportable`, `precio_exportable`, `monto_exportable`, `peso_industrial`, `precio_industrial`, `monto_industrial`, `peso_descarte`, `precio_descarte`, `monto_descarte`, `total_proceso`, `peso_ingreso`, `precio_kg`, `total_carga`, `fecha_liquidacion`, `serie`, `numero_liquidacion`, `observaciones`, `estado`, `created_at`, `updated_at`) VALUES
(1, 1, 'carga_cerrada', 1050.50, 8.50, 8929.25, 280.15, 4.20, 1176.63, 60.10, 1.50, 90.15, 10195.03, 1420.75, 7.18, 10195.03, '2024-01-25', 'B001', 'LIQ-001-2024', 'Liquidación completa del lote', 'aprobado', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 4, 'por_proceso', 1550.80, 8.80, 13647.04, 280.70, 4.50, 1263.15, 59.00, 1.80, 106.20, 15016.39, 1890.50, 7.94, 15016.39, '2024-01-28', 'B001', 'LIQ-002-2024', 'Liquidación con precios premium', 'aprobado', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 2, 'por_proceso', 1280.25, 8.20, 10498.05, 300.15, 4.00, 1200.60, 95.40, 1.20, 114.48, 11813.13, 1705.80, 6.93, 11813.13, NULL, NULL, NULL, 'Liquidación pendiente de aprobación', 'pendiente', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `costos_fijos`
--

CREATE TABLE `costos_fijos` (
  `id` int(11) NOT NULL,
  `concepto` varchar(255) NOT NULL,
  `categoria` enum('administrativo','alquiler','servicios','planilla','impuestos','otros') NOT NULL,
  `monto` decimal(10,2) NOT NULL,
  `periodicidad` enum('mensual','anual') DEFAULT 'mensual',
  `descripcion` text DEFAULT NULL,
  `estado` enum('activo','inactivo') DEFAULT 'activo',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `costos_fijos`
--

INSERT INTO `costos_fijos` (`id`, `concepto`, `categoria`, `monto`, `periodicidad`, `descripcion`, `estado`, `created_at`, `updated_at`) VALUES
(1, 'Alquiler planta procesadora', 'alquiler', 5000.00, 'mensual', 'Alquiler mensual de instalaciones', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 'Sueldo administrativo', 'planilla', 8500.00, 'mensual', 'Sueldo de personal administrativo', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 'Servicios de agua y luz', 'servicios', 1200.00, 'mensual', 'Agua, luz, teléfono, internet', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(4, 'Impuesto a la renta', 'impuestos', 2500.00, 'mensual', 'Pago mensual de impuestos', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(5, 'Mantenimiento de equipos', 'otros', 1500.00, 'mensual', 'Mantenimiento preventivo', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(6, 'Seguros', 'otros', 800.00, 'mensual', 'Seguro de planta y equipos', 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `empleados`
--

CREATE TABLE `empleados` (
  `id` int(11) NOT NULL,
  `persona_id` int(11) NOT NULL,
  `cargo` varchar(100) NOT NULL,
  `area` enum('administrativo','campo','planta','ventas') NOT NULL,
  `sueldo` decimal(10,2) DEFAULT NULL,
  `fecha_ingreso` date DEFAULT NULL,
  `fecha_salida` date DEFAULT NULL,
  `estado` enum('activo','inactivo') DEFAULT 'activo',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `empleados`
--

INSERT INTO `empleados` (`id`, `persona_id`, `cargo`, `area`, `sueldo`, `fecha_ingreso`, `fecha_salida`, `estado`, `created_at`, `updated_at`) VALUES
(1, 4, 'Supervisora de Calidad', 'planta', 2800.00, '2023-03-15', NULL, 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 7, 'Asistente Administrativo', 'administrativo', 1800.00, '2023-05-20', NULL, 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 4, 'Jefa de Producción', 'planta', 3200.00, '2023-03-15', NULL, 'activo', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `kardex_lotes`
--

CREATE TABLE `kardex_lotes` (
  `id` int(11) NOT NULL,
  `lote_id` int(11) NOT NULL,
  `tipo_movimiento` enum('ingreso','salida') NOT NULL,
  `categoria` enum('exportable','industrial','descarte') NOT NULL,
  `peso` decimal(10,2) NOT NULL,
  `fecha_movimiento` date NOT NULL,
  `referencia` varchar(255) DEFAULT NULL,
  `saldo_categoria` decimal(10,2) NOT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `kardex_lotes`
--

INSERT INTO `kardex_lotes` (`id`, `lote_id`, `tipo_movimiento`, `categoria`, `peso`, `fecha_movimiento`, `referencia`, `saldo_categoria`, `created_at`) VALUES
(1, 1, 'ingreso', 'exportable', 1100.25, '2024-01-16', 'Proceso inicial', 1100.25, '2025-11-13 15:19:28'),
(2, 1, 'ingreso', 'industrial', 250.30, '2024-01-16', 'Proceso inicial', 250.30, '2025-11-13 15:19:28'),
(3, 1, 'ingreso', 'descarte', 70.20, '2024-01-16', 'Proceso inicial', 70.20, '2025-11-13 15:19:28'),
(4, 1, 'salida', 'exportable', 500.00, '2024-01-21', 'PED-2024-001', 600.25, '2025-11-13 15:19:28'),
(5, 2, 'ingreso', 'exportable', 1350.75, '2024-01-19', 'Proceso inicial', 1350.75, '2025-11-13 15:19:28'),
(6, 2, 'ingreso', 'industrial', 320.40, '2024-01-19', 'Proceso inicial', 320.40, '2025-11-13 15:19:28'),
(7, 2, 'ingreso', 'descarte', 98.65, '2024-01-19', 'Proceso inicial', 98.65, '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `libro_banco`
--

CREATE TABLE `libro_banco` (
  `id` int(11) NOT NULL,
  `fecha` date NOT NULL,
  `operacion` varchar(255) NOT NULL,
  `de_quien` varchar(255) DEFAULT NULL,
  `a_quien` varchar(255) DEFAULT NULL,
  `motivo` text DEFAULT NULL,
  `rubro` enum('campo','economico','ventas') NOT NULL,
  `tipo_operacion` enum('adelanto','venta','pago','impuesto','otros') NOT NULL,
  `numero_operacion` varchar(50) DEFAULT NULL,
  `comprobante` varchar(100) DEFAULT NULL,
  `deudor` decimal(10,2) DEFAULT 0.00,
  `acreedor` decimal(10,2) DEFAULT 0.00,
  `estado` enum('cancelado','pendiente') DEFAULT 'pendiente',
  `agricultor` varchar(255) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `libro_banco`
--

INSERT INTO `libro_banco` (`id`, `fecha`, `operacion`, `de_quien`, `a_quien`, `motivo`, `rubro`, `tipo_operacion`, `numero_operacion`, `comprobante`, `deudor`, `acreedor`, `estado`, `agricultor`, `created_at`) VALUES
(1, '2024-01-10', 'Adelanto a productor', 'SAYARIQ SYSTEM', 'María Elena Quispe', 'Adelanto para cosecha', 'campo', 'adelanto', 'OP-001', 'COMP-001', 3000.00, 0.00, 'cancelado', 'María Elena Quispe', '2025-11-13 15:19:28'),
(2, '2024-01-12', 'Adelanto a productor', 'SAYARIQ SYSTEM', 'Juan Pérez Mendoza', 'Adelanto programado', 'campo', 'adelanto', 'OP-002', 'COMP-002', 4000.00, 0.00, 'cancelado', 'Juan Pérez Mendoza', '2025-11-13 15:19:28'),
(3, '2024-01-21', 'Venta de espárragos', 'Carlos Rodríguez S.A.C.', 'SAYARIQ SYSTEM', 'PED-2024-001', 'ventas', 'venta', 'OP-003', 'FACT-001', 0.00, 6093.75, 'cancelado', NULL, '2025-11-13 15:19:28'),
(4, '2024-01-26', 'Pago a productor', 'SAYARIQ SYSTEM', 'María Elena Quispe', 'Liquidación LOTE-2024-001', 'campo', 'pago', 'OP-004', 'COMP-003', 7195.03, 0.00, 'cancelado', 'María Elena Quispe', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `lotes`
--

CREATE TABLE `lotes` (
  `id` int(11) NOT NULL,
  `numero_lote` varchar(50) NOT NULL,
  `guia_ingreso` varchar(50) NOT NULL,
  `productor_id` int(11) NOT NULL,
  `producto` varchar(100) NOT NULL,
  `fecha_ingreso` date NOT NULL,
  `fecha_proceso` date DEFAULT NULL,
  `peso_inicial` decimal(10,2) NOT NULL,
  `peso_neto` decimal(10,2) DEFAULT NULL,
  `numero_jabas` int(11) DEFAULT NULL,
  `estado` enum('pendiente','proceso','liquidado','cancelado') DEFAULT 'pendiente',
  `estado_frescura` enum('optimo','proximo_vencer','en_riesgo') DEFAULT 'optimo',
  `observaciones` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `lotes`
--

INSERT INTO `lotes` (`id`, `numero_lote`, `guia_ingreso`, `productor_id`, `producto`, `fecha_ingreso`, `fecha_proceso`, `peso_inicial`, `peso_neto`, `numero_jabas`, `estado`, `estado_frescura`, `observaciones`, `created_at`, `updated_at`) VALUES
(1, 'LOTE-2024-001', 'GI-001-2024', 1, 'Espárragos Verdes', '2024-01-15', '2024-01-16', 1500.50, 1420.75, 120, 'liquidado', 'optimo', 'Producto de buena calidad, tamaño uniforme', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 'LOTE-2024-002', 'GI-002-2024', 3, 'Espárragos Blancos', '2024-01-18', '2024-01-19', 1800.25, 1705.80, 150, 'proceso', 'optimo', 'Espárragos frescos, buen calibre', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 'LOTE-2024-003', 'GI-003-2024', 6, 'Espárragos Verdes', '2024-01-20', NULL, 1200.75, NULL, 95, 'pendiente', 'proximo_vencer', 'Producto necesita procesamiento urgente', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(4, 'LOTE-2024-004', 'GI-004-2024', 1, 'Espárragos Blancos', '2024-01-22', '2024-01-23', 2000.00, 1890.50, 165, 'liquidado', 'optimo', 'Alta calidad, tamaño premium', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(5, 'LOTE-2024-005', 'GI-005-2024', 3, 'Espárragos Verdes', '2024-01-25', NULL, 1600.30, NULL, 130, 'pendiente', 'optimo', 'Producto recién cosechado', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `pagos_campo`
--

CREATE TABLE `pagos_campo` (
  `id` int(11) NOT NULL,
  `lote_id` int(11) NOT NULL,
  `productor_id` int(11) NOT NULL,
  `total_liquidacion` decimal(10,2) NOT NULL,
  `total_adelantos` decimal(10,2) DEFAULT 0.00,
  `adelanto_restante` decimal(10,2) DEFAULT 0.00,
  `monto_pago` decimal(10,2) NOT NULL,
  `saldo_pendiente` decimal(10,2) DEFAULT 0.00,
  `fecha_pago` date DEFAULT NULL,
  `datos_bancarios` text DEFAULT NULL,
  `observaciones` text DEFAULT NULL,
  `estado` enum('pendiente','cancelado','deficit') DEFAULT 'pendiente',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `pagos_campo`
--

INSERT INTO `pagos_campo` (`id`, `lote_id`, `productor_id`, `total_liquidacion`, `total_adelantos`, `adelanto_restante`, `monto_pago`, `saldo_pendiente`, `fecha_pago`, `datos_bancarios`, `observaciones`, `estado`, `created_at`, `updated_at`) VALUES
(1, 1, 1, 10195.03, 3000.00, 0.00, 7195.03, 0.00, '2024-01-26', 'Banco de la Nación - 001-123456-789', 'Pago completo sin saldo pendiente', 'cancelado', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 4, 1, 15016.39, 3500.00, 0.00, 11516.39, 0.00, '2024-01-29', 'Banco de la Nación - 001-123456-789', 'Segundo pago al mismo productor', 'cancelado', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 2, 3, 11813.13, 4000.00, 0.00, 7813.13, 0.00, NULL, 'Interbank - 001-456789-123', 'Pago programado para próxima semana', 'pendiente', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `pedidos`
--

CREATE TABLE `pedidos` (
  `id` int(11) NOT NULL,
  `numero_pedido` varchar(50) NOT NULL,
  `cliente_id` int(11) NOT NULL,
  `producto` varchar(100) NOT NULL,
  `categoria` varchar(50) DEFAULT NULL,
  `kg_bruto` decimal(10,2) NOT NULL,
  `porcentaje_humedad` decimal(5,2) DEFAULT 0.00,
  `kg_neto` decimal(10,2) NOT NULL,
  `precio` decimal(10,2) NOT NULL,
  `total` decimal(10,2) NOT NULL,
  `fecha_pedido` date NOT NULL,
  `estado` enum('pendiente','proceso','completado','cancelado') DEFAULT 'pendiente',
  `observaciones` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `pedidos`
--

INSERT INTO `pedidos` (`id`, `numero_pedido`, `cliente_id`, `producto`, `categoria`, `kg_bruto`, `porcentaje_humedad`, `kg_neto`, `precio`, `total`, `fecha_pedido`, `estado`, `observaciones`, `created_at`, `updated_at`) VALUES
(1, 'PED-2024-001', 2, 'Espárragos Verdes', 'Premium', 500.00, 2.50, 487.50, 12.50, 6093.75, '2024-01-20', 'completado', 'Pedido urgente para exportación', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(2, 'PED-2024-002', 5, 'Espárragos Blancos', 'Extra', 750.00, 2.00, 735.00, 11.80, 8673.00, '2024-01-22', 'proceso', 'Pedido para mercado europeo', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(3, 'PED-2024-003', 2, 'Espárragos Verdes', 'Standard', 300.00, 2.80, 291.60, 10.50, 3061.80, '2024-01-25', 'pendiente', 'Pedido regular para supermercados', '2025-11-13 15:19:28', '2025-11-13 15:19:28'),
(4, 'PED-2024-004', 5, 'Espárragos Blancos', 'Premium', 600.00, 2.20, 586.80, 13.20, 7745.76, '2024-01-28', 'pendiente', 'Pedido especial para restaurante', '2025-11-13 15:19:28', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `personas`
--

CREATE TABLE `personas` (
  `id` int(11) NOT NULL,
  `nombre_completo` varchar(255) NOT NULL,
  `documento_identidad` varchar(20) NOT NULL,
  `tipo_documento` enum('DNI','RUC','CE') DEFAULT 'DNI',
  `telefono` varchar(20) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `direccion` text DEFAULT NULL,
  `tipo_persona` enum('productor','cliente','empleado','proveedor') NOT NULL,
  `cuenta_bancaria` varchar(50) DEFAULT NULL,
  `banco` varchar(100) DEFAULT NULL,
  `estado` enum('activo','inactivo') DEFAULT 'activo',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `personas`
--

INSERT INTO `personas` (`id`, `nombre_completo`, `documento_identidad`, `tipo_documento`, `telefono`, `email`, `direccion`, `tipo_persona`, `cuenta_bancaria`, `banco`, `estado`, `created_at`, `updated_at`) VALUES
(1, 'María Elena Quispe', '401233', 'DNI', '987654321', 'maria.quispe@email.com', 'Av. Los Olivos 123, Lima', 'cliente', '001-123456-789', 'Banco de la Nación', 'activo', '2025-11-13 15:19:27', '2025-11-13 16:48:57'),
(2, 'Carlos Rodríguez S.A.C.', '20123456789', 'RUC', '012345678', 'ventas@carlosrodriguez.com', 'Calle Las Flores 456, Ica', 'cliente', '001-987654-321', 'BCP', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(3, 'Juan Pérez Mendoza', '40876543', 'DNI', '987654322', 'juan.perez@email.com', 'Jr. Union 789, Chincha', 'productor', '001-456789-123', 'Interbank', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(4, 'Ana María Gómez', '40765432', 'DNI', '987654323', 'ana.gomez@email.com', 'Av. Progreso 321, Pisco', 'empleado', '001-321654-987', 'BBVA', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(5, 'Distribuidora San Martín', '20198765432', 'RUC', '012345679', 'compras@sanmar.com', 'Carretera Panamericana Km 245, Ica', 'cliente', '001-741852-963', 'Scotiabank', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(6, 'Roberto Silva Castro', '40654321', 'DNI', '987654324', 'roberto.silva@email.com', 'Mz. L Lt. 15, Villa El Salvador', 'productor', '001-159753-486', 'Banco de la Nación', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(7, 'Luz Marina Díaz', '40543219', 'DNI', '987654325', 'luz.diaz@email.com', 'Calle Los Pinos 654, Cañete', 'empleado', '001-357159-482', 'BCP', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27'),
(8, 'Agroexportadora Del Sur', '20234567891', 'RUC', '012345680', 'administracion@agroexportadora.com', 'Av. Industrial 789, Arequipa', 'proveedor', '001-852741-963', 'Interbank', 'activo', '2025-11-13 15:19:27', '2025-11-13 15:19:27');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `pesos_lote`
--

CREATE TABLE `pesos_lote` (
  `id` int(11) NOT NULL,
  `lote_id` int(11) NOT NULL,
  `fecha_pesado` date NOT NULL,
  `peso_bruto` decimal(10,2) NOT NULL,
  `peso_exportable` decimal(10,2) DEFAULT 0.00,
  `peso_industrial` decimal(10,2) DEFAULT 0.00,
  `peso_descarte` decimal(10,2) DEFAULT 0.00,
  `observaciones` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `pesos_lote`
--

INSERT INTO `pesos_lote` (`id`, `lote_id`, `fecha_pesado`, `peso_bruto`, `peso_exportable`, `peso_industrial`, `peso_descarte`, `observaciones`, `created_at`) VALUES
(1, 1, '2024-01-16', 1500.50, 1100.25, 250.30, 70.20, 'Buen rendimiento en exportable', '2025-11-13 15:19:28'),
(2, 1, '2024-01-17', 1420.75, 1050.50, 280.15, 60.10, 'Segundo pesaje confirmatorio', '2025-11-13 15:19:28'),
(3, 2, '2024-01-19', 1800.25, 1350.75, 320.40, 98.65, 'Proceso en curso', '2025-11-13 15:19:28'),
(4, 4, '2024-01-23', 2000.00, 1550.80, 280.70, 59.00, 'Excelente calidad, alto porcentaje exportable', '2025-11-13 15:19:28'),
(5, 2, '2024-01-20', 1705.80, 1280.25, 300.15, 95.40, 'Pesaje final del lote', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `planificacion_operativa`
--

CREATE TABLE `planificacion_operativa` (
  `id` int(11) NOT NULL,
  `lote_id` int(11) NOT NULL,
  `pedido_id` int(11) NOT NULL,
  `peso_asignado` decimal(10,2) NOT NULL,
  `fecha_asignacion` date NOT NULL,
  `estado` enum('planificado','en_proceso','completado') DEFAULT 'planificado',
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `planificacion_operativa`
--

INSERT INTO `planificacion_operativa` (`id`, `lote_id`, `pedido_id`, `peso_asignado`, `fecha_asignacion`, `estado`, `created_at`) VALUES
(1, 1, 1, 500.00, '2024-01-20', 'completado', '2025-11-13 15:19:28'),
(2, 2, 2, 750.00, '2024-01-22', 'en_proceso', '2025-11-13 15:19:28'),
(3, 4, 4, 600.00, '2024-01-28', 'planificado', '2025-11-13 15:19:28');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `ventas`
--

CREATE TABLE `ventas` (
  `id` int(11) NOT NULL,
  `pedido_id` int(11) NOT NULL,
  `producto` varchar(100) NOT NULL,
  `categoria` varchar(50) DEFAULT NULL,
  `kg` decimal(10,2) NOT NULL,
  `precio` decimal(10,2) NOT NULL,
  `total` decimal(10,2) NOT NULL,
  `fecha_venta` date NOT NULL,
  `observaciones` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `ventas`
--

INSERT INTO `ventas` (`id`, `pedido_id`, `producto`, `categoria`, `kg`, `precio`, `total`, `fecha_venta`, `observaciones`, `created_at`) VALUES
(1, 1, 'Espárragos Verdes', 'Premium', 487.50, 12.50, 6093.75, '2024-01-21', 'Venta realizada con éxito', '2025-11-13 15:19:28'),
(2, 2, 'Espárragos Blancos', 'Extra', 400.00, 11.80, 4720.00, '2024-01-24', 'Entrega parcial del pedido', '2025-11-13 15:19:28'),
(3, 2, 'Espárragos Blancos', 'Extra', 335.00, 11.80, 3953.00, '2024-01-26', 'Completación del pedido', '2025-11-13 15:19:28');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `adelantos`
--
ALTER TABLE `adelantos`
  ADD PRIMARY KEY (`id`),
  ADD KEY `lote_id` (`lote_id`),
  ADD KEY `idx_productor` (`productor_id`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `ajustes_contables`
--
ALTER TABLE `ajustes_contables`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_lote` (`lote_id`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `costos_fijos`
--
ALTER TABLE `costos_fijos`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_categoria` (`categoria`);

--
-- Indices de la tabla `empleados`
--
ALTER TABLE `empleados`
  ADD PRIMARY KEY (`id`),
  ADD KEY `persona_id` (`persona_id`),
  ADD KEY `idx_area` (`area`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `kardex_lotes`
--
ALTER TABLE `kardex_lotes`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_lote` (`lote_id`),
  ADD KEY `idx_categoria` (`categoria`),
  ADD KEY `idx_fecha` (`fecha_movimiento`);

--
-- Indices de la tabla `libro_banco`
--
ALTER TABLE `libro_banco`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_fecha` (`fecha`),
  ADD KEY `idx_rubro` (`rubro`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `lotes`
--
ALTER TABLE `lotes`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `numero_lote` (`numero_lote`),
  ADD UNIQUE KEY `guia_ingreso` (`guia_ingreso`),
  ADD KEY `productor_id` (`productor_id`),
  ADD KEY `idx_numero_lote` (`numero_lote`),
  ADD KEY `idx_estado` (`estado`),
  ADD KEY `idx_fecha_ingreso` (`fecha_ingreso`);

--
-- Indices de la tabla `pagos_campo`
--
ALTER TABLE `pagos_campo`
  ADD PRIMARY KEY (`id`),
  ADD KEY `productor_id` (`productor_id`),
  ADD KEY `idx_lote` (`lote_id`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `pedidos`
--
ALTER TABLE `pedidos`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `numero_pedido` (`numero_pedido`),
  ADD KEY `cliente_id` (`cliente_id`),
  ADD KEY `idx_numero` (`numero_pedido`),
  ADD KEY `idx_estado` (`estado`);

--
-- Indices de la tabla `personas`
--
ALTER TABLE `personas`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `documento_identidad` (`documento_identidad`),
  ADD KEY `idx_documento` (`documento_identidad`),
  ADD KEY `idx_tipo` (`tipo_persona`);

--
-- Indices de la tabla `pesos_lote`
--
ALTER TABLE `pesos_lote`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_lote` (`lote_id`),
  ADD KEY `idx_fecha` (`fecha_pesado`);

--
-- Indices de la tabla `planificacion_operativa`
--
ALTER TABLE `planificacion_operativa`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_lote` (`lote_id`),
  ADD KEY `idx_pedido` (`pedido_id`);

--
-- Indices de la tabla `ventas`
--
ALTER TABLE `ventas`
  ADD PRIMARY KEY (`id`),
  ADD KEY `idx_pedido` (`pedido_id`),
  ADD KEY `idx_fecha` (`fecha_venta`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `adelantos`
--
ALTER TABLE `adelantos`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT de la tabla `ajustes_contables`
--
ALTER TABLE `ajustes_contables`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT de la tabla `costos_fijos`
--
ALTER TABLE `costos_fijos`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT de la tabla `empleados`
--
ALTER TABLE `empleados`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT de la tabla `kardex_lotes`
--
ALTER TABLE `kardex_lotes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;

--
-- AUTO_INCREMENT de la tabla `libro_banco`
--
ALTER TABLE `libro_banco`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT de la tabla `lotes`
--
ALTER TABLE `lotes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT de la tabla `pagos_campo`
--
ALTER TABLE `pagos_campo`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT de la tabla `pedidos`
--
ALTER TABLE `pedidos`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT de la tabla `personas`
--
ALTER TABLE `personas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

--
-- AUTO_INCREMENT de la tabla `pesos_lote`
--
ALTER TABLE `pesos_lote`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT de la tabla `planificacion_operativa`
--
ALTER TABLE `planificacion_operativa`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT de la tabla `ventas`
--
ALTER TABLE `ventas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- Restricciones para tablas volcadas
--

--
-- Filtros para la tabla `adelantos`
--
ALTER TABLE `adelantos`
  ADD CONSTRAINT `adelantos_ibfk_1` FOREIGN KEY (`productor_id`) REFERENCES `personas` (`id`),
  ADD CONSTRAINT `adelantos_ibfk_2` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`);

--
-- Filtros para la tabla `ajustes_contables`
--
ALTER TABLE `ajustes_contables`
  ADD CONSTRAINT `ajustes_contables_ibfk_1` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`);

--
-- Filtros para la tabla `empleados`
--
ALTER TABLE `empleados`
  ADD CONSTRAINT `empleados_ibfk_1` FOREIGN KEY (`persona_id`) REFERENCES `personas` (`id`);

--
-- Filtros para la tabla `kardex_lotes`
--
ALTER TABLE `kardex_lotes`
  ADD CONSTRAINT `kardex_lotes_ibfk_1` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`);

--
-- Filtros para la tabla `lotes`
--
ALTER TABLE `lotes`
  ADD CONSTRAINT `lotes_ibfk_1` FOREIGN KEY (`productor_id`) REFERENCES `personas` (`id`);

--
-- Filtros para la tabla `pagos_campo`
--
ALTER TABLE `pagos_campo`
  ADD CONSTRAINT `pagos_campo_ibfk_1` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`),
  ADD CONSTRAINT `pagos_campo_ibfk_2` FOREIGN KEY (`productor_id`) REFERENCES `personas` (`id`);

--
-- Filtros para la tabla `pedidos`
--
ALTER TABLE `pedidos`
  ADD CONSTRAINT `pedidos_ibfk_1` FOREIGN KEY (`cliente_id`) REFERENCES `personas` (`id`);

--
-- Filtros para la tabla `pesos_lote`
--
ALTER TABLE `pesos_lote`
  ADD CONSTRAINT `pesos_lote_ibfk_1` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`) ON DELETE CASCADE;

--
-- Filtros para la tabla `planificacion_operativa`
--
ALTER TABLE `planificacion_operativa`
  ADD CONSTRAINT `planificacion_operativa_ibfk_1` FOREIGN KEY (`lote_id`) REFERENCES `lotes` (`id`),
  ADD CONSTRAINT `planificacion_operativa_ibfk_2` FOREIGN KEY (`pedido_id`) REFERENCES `pedidos` (`id`);

--
-- Filtros para la tabla `ventas`
--
ALTER TABLE `ventas`
  ADD CONSTRAINT `ventas_ibfk_1` FOREIGN KEY (`pedido_id`) REFERENCES `pedidos` (`id`);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
[V0_FILE]php:file="backend/public/index.php" isMerged="true"
<?php
require_once '../config/config.php';
require_once '../config/cors.php';

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// Handle preflight requests
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    echo json_encode([
        'success' => true,
        'message' => 'Preflight OK',
        'timestamp' => date('Y-m-d H:i:s')
    ]);
    exit();
}

$request_uri = $_SERVER['REQUEST_URI'];
$path = parse_url($request_uri, PHP_URL_PATH);

// Si es la raíz del backend, mostrar información
if (preg_match('#/backend(/public(/index\.php)?)?/?$#', $path)) {
    jsonResponse([
        'success' => true,
        'message' => 'Backend Sayariq API',
        'version' => API_VERSION,
        'timestamp' => date('Y-m-d H:i:s'),
        'endpoints' => [
            'personas' => '/backend/personas',
            'lotes' => '/backend/lotes',
            'pesos' => '/backend/pesos',
            'ajustes-contables' => '/backend/ajustes-contables',
            'pagos-campo' => '/backend/pagos-campo',
            'pedidos' => '/backend/pedidos',
            'kardex' => '/backend/kardex',
            'ventas' => '/backend/ventas',
            'banco' => '/backend/banco',
            'costos-fijos' => '/backend/costos-fijos',
            'empleados' => '/backend/empleados',
            'rentabilidad' => '/backend/rentabilidad',
            'test' => '/backend/test'
        ],
        'database' => [
            'host' => DB_HOST,
            'name' => DB_NAME,
            'user' => DB_USER
        ],
        'config' => [
            'debug_mode' => DEBUG_MODE,
            'api_version' => API_VERSION,
            'auth_required' => AUTH_REQUIRED
        ]
    ]);
}

if (preg_match('#/backend/test/?$#', $path)) {
    require_once '../config/database.php';
    $database = new Database();
    $result = $database->testConnection();
    jsonResponse($result);
}

// Include router
require_once '../routes/api.php';
?>
[V0_FILE]plaintext:file="backend/.htaccess" isMerged="true"
RewriteEngine On

# Habilitar logging de rewrite para debugging
# RewriteLog /tmp/rewrite.log
# RewriteLogLevel 3

# Manejar preflight OPTIONS requests
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ public/index.php [QSA,L]

# Redirigir todo el tráfico que no sea archivo físico a public/index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ public/index.php [QSA,L]

# Configuración de seguridad
Header always set X-Content-Type-Options nosniff
Header always set X-Frame-Options SAMEORIGIN
Header always set X-XSS-Protection "1; mode=block"
Header always set Referrer-Policy "strict-origin-when-cross-origin"

# Configuración de límites
php_value upload_max_filesize 100M
php_value post_max_size 100M
php_value max_execution_time 300
php_value memory_limit 256M

php_flag display_errors On
php_flag display_startup_errors On
php_value error_reporting 32767
php_flag log_errors On
php_value error_log /tmp/php_errors.log

# Configuración de tipos MIME
AddType application/json .json
AddType text/css .css
AddType application/javascript .js
[V0_FILE]typescript:file="lib/types/index.ts" isMerged="true"
export interface BaseEntity {
  id: number
  created_at?: string
  updated_at?: string
}

export interface Lote extends BaseEntity {
  codigo: string
  productor_id: number
  productor_nombre?: string
  peso_bruto: number
  peso_neto: number
  tara: number
  fecha_ingreso: string
  estado: "pendiente" | "proceso" | "completado" | "entregado"
  precio_unitario?: number
  total?: number
  observaciones?: string
  num_jabas?: number
}

export interface Persona extends BaseEntity {
  tipo: "productor" | "empleado" | "proveedor"
  nombres: string
  apellidos: string
  dni?: string
  telefono?: string
  direccion?: string
  email?: string
  banco?: string
  cuenta_bancaria?: string
  activo: boolean
}

export interface Empleado extends BaseEntity {
  nombres: string
  apellidos: string
  dni?: string
  telefono?: string
  cargo?: string
  fecha_ingreso?: string
  salario?: number
  activo: boolean
}

export interface Pedido extends BaseEntity {
  codigo: string
  cliente: string
  fecha_pedido: string
  fecha_entrega?: string
  estado: "pendiente" | "proceso" | "completado" | "cancelado"
  total: number
  observaciones?: string
}

export interface Peso extends BaseEntity {
  lote_id: number
  lote_codigo?: string
  peso_bruto: number
  tara: number
  peso_neto: number
  fecha_registro: string
  num_jabas?: number
}

export interface TransaccionBanco extends BaseEntity {
  tipo: "ingreso" | "egreso"
  fecha: string
  concepto: string
  monto: number
  referencia?: string
  categoria?: string
  observaciones?: string
}

export interface MovimientoKardex extends BaseEntity {
  lote_id: number
  lote_codigo?: string
  tipo: "entrada" | "salida" | "ajuste"
  cantidad: number
  saldo: number
  fecha: string
  concepto: string
  responsable?: string
}

export interface AjusteContable extends BaseEntity {
  fecha: string
  tipo: "ingreso" | "egreso"
  categoria: string
  monto: number
  descripcion: string
  referencia?: string
}

export interface RegistroPagoCampo extends BaseEntity {
  lote_id: number
  lote_codigo?: string
  productor_id: number
  productor_nombre?: string
  monto: number
  fecha_pago: string
  metodo_pago: "efectivo" | "transferencia" | "cheque"
  referencia?: string
  observaciones?: string
}

export interface VentaCliente extends BaseEntity {
  codigo: string
  cliente: string
  fecha_venta: string
  lote_id?: number
  cantidad: number
  precio_unitario: number
  total: number
  estado: "pendiente" | "pagado" | "cancelado"
  observaciones?: string
}

export interface CostoFijo extends BaseEntity {
  categoria: string
  descripcion: string
  monto: number
  frecuencia: "diario" | "semanal" | "mensual" | "anual"
  fecha_inicio: string
  fecha_fin?: string
  activo: boolean
}

export interface ControlRentabilidad extends BaseEntity {
  periodo: string
  ingresos_totales: number
  costos_totales: number
  ganancia_neta: number
  margen_porcentaje: number
  observaciones?: string
}

export interface Adelanto extends BaseEntity {
  productor_id: number
  productor_nombre?: string
  monto: number
  fecha: string
  concepto?: string
  lote_id?: number
  pagado: boolean
}

export interface Proceso extends BaseEntity {
  codigo: string
  nombre: string
  descripcion?: string
  estado: "activo" | "inactivo"
  fecha_inicio?: string
  fecha_fin?: string
}

export interface Categoria extends BaseEntity {
  nombre: string
  descripcion?: string
  tipo: string
  activo: boolean
}

export interface Enfermedad extends BaseEntity {
  nombre: string
  descripcion?: string
  sintomas?: string
  tratamiento?: string
  gravedad: "leve" | "moderada" | "grave"
}

export interface Liquidacion extends BaseEntity {
  lote_id: number
  productor_id: number
  fecha_liquidacion: string
  peso_total: number
  precio_unitario: number
  total_bruto: number
  descuentos: number
  adelantos: number
  total_neto: number
  estado: "pendiente" | "pagado"
}

export interface PreLiquidacion extends BaseEntity {
  lote_id: number
  productor_id: number
  fecha_evaluacion: string
  peso_evaluado: number
  precio_estimado: number
  total_estimado: number
  observaciones?: string
}

export interface Comprobante extends BaseEntity {
  tipo: "boleta" | "factura"
  numero: string
  fecha: string
  cliente: string
  monto: number
  estado: "emitido" | "anulado"
}

export interface Subproceso extends BaseEntity {
  proceso_id: number
  nombre: string
  descripcion?: string
  orden: number
  activo: boolean
}

export interface Particion extends BaseEntity {
  lote_id: number
  subproceso_id: number
  cantidad: number
  fecha: string
  responsable_id?: number
}

export interface SaldoKardex extends BaseEntity {
  lote_id: number
  saldo_actual: number
  ultima_actualizacion: string
}

// Response types
export interface ApiResponse<T> {
  data: T
  message?: string
  success: boolean
}

export interface PaginatedResponse<T> {
  data: T[]
  total: number
  page: number
  limit: number
}
[V0_FILE]typescript:file="lib/services/empleados-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Empleado, ApiResponse } from "@/lib/types"

export class EmpleadosService {
  async getAll(): Promise<Empleado[]> {
    const response = await ApiService.get<ApiResponse<Empleado[]>>(API_ENDPOINTS.EMPLEADOS)
    return response.data
  }

async getById(id: number): Promise<Empleado> {
    const response = await ApiService.get<ApiResponse<Empleado>>(API_ENDPOINTS.EMPLEADOS_BY_ID(id))
    return response.data
  }

async create(data: Omit<Empleado, "id" | "created_at" | "updated_at">): Promise<Empleado> {
    const response = await ApiService.post<ApiResponse<Empleado>>(API_ENDPOINTS.EMPLEADOS, data)
    return response.data
  }

async update(id: number, data: Partial<Omit<Empleado, "id" | "created_at" | "updated_at">>): Promise<Empleado> {
    const response = await ApiService.put<ApiResponse<Empleado>>(API_ENDPOINTS.EMPLEADOS_BY_ID(id), data)
    return response.data
  }

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.EMPLEADOS_BY_ID(id))
  }

async getEmpleadosActivos(): Promise<Empleado[]> {
    const empleados = await this.getAll()
    return empleados.filter((e) => e.activo)
  }
}

export const empleadosService = new EmpleadosService()
[V0_FILE]typescript:file="lib/services/pesos-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Peso, ApiResponse } from "@/lib/types"

export class PesosService {
  async getAll(): Promise<Peso[]> {
    const response = await ApiService.get<ApiResponse<Peso[]>>(API_ENDPOINTS.PESOS)
    return response.data
  }

async getById(id: number): Promise<Peso> {
    const response = await ApiService.get<ApiResponse<Peso>>(API_ENDPOINTS.PESOS_BY_ID(id))
    return response.data
  }

async create(data: Omit<Peso, "id" | "created_at" | "updated_at">): Promise<Peso> {
    const response = await ApiService.post<ApiResponse<Peso>>(API_ENDPOINTS.PESOS, data)
    return response.data
  }

async update(id: number, data: Partial<Omit<Peso, "id" | "created_at" | "updated_at">>): Promise<Peso> {
    const response = await ApiService.put<ApiResponse<Peso>>(API_ENDPOINTS.PESOS_BY_ID(id), data)
    return response.data
  }

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.PESOS_BY_ID(id))
  }

async getPesosByLote(loteId: number): Promise<Peso[]> {
    const pesos = await this.getAll()
    return pesos.filter((p) => p.lote_id === loteId)
  }
}

export const pesosService = new PesosService()
[V0_FILE]typescript:file="lib/services/ajuste-contable-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { AjusteContable, ApiResponse } from "@/lib/types"

export const ajusteContableService = {
  async getAll(): Promise<AjusteContable[]> {
    const response = await ApiService.get<ApiResponse<AjusteContable[]>>(API_ENDPOINTS.AJUSTE_CONTABLE)
    return response.data
  },

async getById(id: number): Promise<AjusteContable> {
    const response = await ApiService.get<ApiResponse<AjusteContable>>(API_ENDPOINTS.AJUSTE_CONTABLE_BY_ID(id))
    return response.data
  },

async create(data: Omit<AjusteContable, "id" | "created_at" | "updated_at">): Promise<AjusteContable> {
    const response = await ApiService.post<ApiResponse<AjusteContable>>(API_ENDPOINTS.AJUSTE_CONTABLE, data)
    return response.data
  },

async update(
    id: number,
    data: Partial<Omit<AjusteContable, "id" | "created_at" | "updated_at">>,
  ): Promise<AjusteContable> {
    const response = await ApiService.put<ApiResponse<AjusteContable>>(API_ENDPOINTS.AJUSTE_CONTABLE_BY_ID(id), data)
    return response.data
  },

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.AJUSTE_CONTABLE_BY_ID(id))
  },

async getByFecha(fechaInicio: string, fechaFin: string): Promise<AjusteContable[]> {
    const ajustes = await this.getAll()
    return ajustes.filter((a) => a.fecha >= fechaInicio && a.fecha <= fechaFin)
  },

async getByTipo(tipo: string): Promise<AjusteContable[]> {
    const ajustes = await this.getAll()
    return ajustes.filter((a) => a.tipo === tipo)
  },
}
[V0_FILE]typescript:file="lib/services/pago-campo-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { RegistroPagoCampo, ApiResponse } from "@/lib/types"

export const pagoCampoService = {
  async getAll(): Promise<RegistroPagoCampo[]> {
    const response = await ApiService.get<ApiResponse<RegistroPagoCampo[]>>(API_ENDPOINTS.PAGO_CAMPO)
    return response.data
  },

async getById(id: number): Promise<RegistroPagoCampo> {
    const response = await ApiService.get<ApiResponse<RegistroPagoCampo>>(API_ENDPOINTS.PAGO_CAMPO_BY_ID(id))
    return response.data
  },

async create(data: Omit<RegistroPagoCampo, "id" | "created_at" | "updated_at">): Promise<RegistroPagoCampo> {
    const response = await ApiService.post<ApiResponse<RegistroPagoCampo>>(API_ENDPOINTS.PAGO_CAMPO, data)
    return response.data
  },

async update(
    id: number,
    data: Partial<Omit<RegistroPagoCampo, "id" | "created_at" | "updated_at">>,
  ): Promise<RegistroPagoCampo> {
    const response = await ApiService.put<ApiResponse<RegistroPagoCampo>>(API_ENDPOINTS.PAGO_CAMPO_BY_ID(id), data)
    return response.data
  },

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.PAGO_CAMPO_BY_ID(id))
  },

async getPagosByProductor(productorId: number): Promise<RegistroPagoCampo[]> {
    const pagos = await this.getAll()
    return pagos.filter((p) => p.productor_id === productorId)
  },

async getPagosByLote(loteId: number): Promise<RegistroPagoCampo[]> {
    const pagos = await this.getAll()
    return pagos.filter((p) => p.lote_id === loteId)
  },
}
[V0_FILE]typescript:file="lib/services/ventas-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { VentaCliente, ApiResponse } from "@/lib/types"

export const ventasService = {
  async getAll(): Promise<VentaCliente[]> {
    const response = await ApiService.get<ApiResponse<VentaCliente[]>>(API_ENDPOINTS.VENTAS)
    return response.data
  },

async getById(id: number): Promise<VentaCliente> {
    const response = await ApiService.get<ApiResponse<VentaCliente>>(API_ENDPOINTS.VENTAS_BY_ID(id))
    return response.data
  },

async create(data: Omit<VentaCliente, "id" | "created_at" | "updated_at">): Promise<VentaCliente> {
    const response = await ApiService.post<ApiResponse<VentaCliente>>(API_ENDPOINTS.VENTAS, data)
    return response.data
  },

async update(
    id: number,
    data: Partial<Omit<VentaCliente, "id" | "created_at" | "updated_at">>,
  ): Promise<VentaCliente> {
    const response = await ApiService.put<ApiResponse<VentaCliente>>(API_ENDPOINTS.VENTAS_BY_ID(id), data)
    return response.data
  },

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.VENTAS_BY_ID(id))
  },

async getVentasByEstado(estado: string): Promise<VentaCliente[]> {
    const ventas = await this.getAll()
    return ventas.filter((v) => v.estado === estado)
  },

async generarCodigoVenta(): Promise<string> {
    const ventas = await this.getAll()
    const año = new Date().getFullYear()
    const ventasDelAño = ventas.filter((v) => v.codigo.startsWith(`VTA-${año}`))
    const numero = ventasDelAño.length + 1
    return `VTA-${año}-${numero.toString().padStart(3, "0")}`
  },
}
[V0_FILE]typescript:file="lib/services/costos-fijos-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { CostoFijo, ApiResponse } from "@/lib/types"

export const costosFijosService = {
  async getAll(): Promise<CostoFijo[]> {
    const response = await ApiService.get<ApiResponse<CostoFijo[]>>(API_ENDPOINTS.COSTOS_FIJOS)
    return response.data
  },

async getById(id: number): Promise<CostoFijo> {
    const response = await ApiService.get<ApiResponse<CostoFijo>>(API_ENDPOINTS.COSTOS_FIJOS_BY_ID(id))
    return response.data
  },

async create(data: Omit<CostoFijo, "id" | "created_at" | "updated_at">): Promise<CostoFijo> {
    const response = await ApiService.post<ApiResponse<CostoFijo>>(API_ENDPOINTS.COSTOS_FIJOS, data)
    return response.data
  },

async update(id: number, data: Partial<Omit<CostoFijo, "id" | "created_at" | "updated_at">>): Promise<CostoFijo> {
    const response = await ApiService.put<ApiResponse<CostoFijo>>(API_ENDPOINTS.COSTOS_FIJOS_BY_ID(id), data)
    return response.data
  },

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.COSTOS_FIJOS_BY_ID(id))
  },

async getCostosActivos(): Promise<CostoFijo[]> {
    const costos = await this.getAll()
    return costos.filter((c) => c.activo)
  },
}
[V0_FILE]typescript:file="lib/services/rentabilidad-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { ControlRentabilidad, ApiResponse } from "@/lib/types"

export const rentabilidadService = {
  async getAll(): Promise<ControlRentabilidad[]> {
    const response = await ApiService.get<ApiResponse<ControlRentabilidad[]>>(API_ENDPOINTS.RENTABILIDAD)
    return response.data
  },

async getById(id: number): Promise<ControlRentabilidad> {
    const response = await ApiService.get<ApiResponse<ControlRentabilidad>>(API_ENDPOINTS.RENTABILIDAD_BY_ID(id))
    return response.data
  },

async create(data: Omit<ControlRentabilidad, "id" | "created_at" | "updated_at">): Promise<ControlRentabilidad> {
    const response = await ApiService.post<ApiResponse<ControlRentabilidad>>(API_ENDPOINTS.RENTABILIDAD, data)
    return response.data
  },

async update(
    id: number,
    data: Partial<Omit<ControlRentabilidad, "id" | "created_at" | "updated_at">>,
  ): Promise<ControlRentabilidad> {
    const response = await ApiService.put<ApiResponse<ControlRentabilidad>>(API_ENDPOINTS.RENTABILIDAD_BY_ID(id), data)
    return response.data
  },

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.RENTABILIDAD_BY_ID(id))
  },

async getByPeriodo(periodo: string): Promise<ControlRentabilidad | null> {
    const rentabilidad = await this.getAll()
    return rentabilidad.find((r) => r.periodo === periodo) || null
  },
}
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Backend API Configuration
NEXT_PUBLIC_API_URL=https://sayariq.great-site.net/backend

# Add any other environment variables needed
[V0_FILE]typescript:file="components/gestion-lotes.tsx" isQuickEdit="true" 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Loader2, Plus, AlertCircle, Eye, Search, X } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { lotesService } from "@/lib/services/lotes-service"
import { useApi } from "@/lib/hooks/use-api"
import { usePersonas } from "@/lib/hooks/use-personas"
import type { Lote, Persona } from "@/lib/types"
import { format } from "date-fns"
import { es } from "date-fns/locale"

/**
 * Devuelve 0 si el valor no es un número finito.
 * Si es un número válido lo formatea con la cantidad de decimales indicada.
 */
function safeNumber(value: number | undefined | null, decimals = 2): string {
  return Number.isFinite(value as number)
    ? (value as number).toFixed(decimals)
    : "0".padEnd(decimals ? decimals + 2 : 1, "0")
}

export function GestionLotes() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("todos")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [isDetalleOpen, setIsDetalleOpen] = useState(false)
  const [formData, setFormData] = useState({
    codigo: "",
    productor_id: 0,
    producto: "",
    variedad: "",
    fecha_recepcion: format(new Date(), "yyyy-MM-dd"),
    numero_jabas: 0,
    peso_bruto: 0,
    precio_kg: 0,
    observaciones: "",
  })
  const [searchTerm, setSearchTerm] = useState("")
  const [filteredLotes, setFilteredLotes] = useState<Lote[]>([])

const [productorBusqueda, setProductorBusqueda] = useState("")
  const [mostrarResultados, setMostrarResultados] = useState(false)
  const [productorSeleccionado, setProductorSeleccionado] = useState<Persona | null>(null)

// Cargar lotes usando el nuevo sistema API
  const {
    data: lotes,
    loading: loadingLotes,
    error: errorLotes,
    create: createLote,
    refresh: refreshLotes,
  } = useApi(lotesService, { initialLoad: true })

// Cargar productores
  const { data: productores, loading: loadingProductores } = usePersonas(true)

// Filtrar lotes según la pestaña activa
  useEffect(() => {
    if (lotes.length > 0) {
      let filtered = [...lotes]

// Filtrar por término de búsqueda
      if (searchTerm) {
        filtered = filtered.filter(
          (lote) =>
            lote.codigo.toLowerCase().includes(searchTerm.toLowerCase()) ||
            lote.producto.toLowerCase().includes(searchTerm.toLowerCase()) ||
            lote.variedad?.toLowerCase().includes(searchTerm.toLowerCase()),
        )
      }

// Filtrar por estado
      if (activeTab !== "todos") {
        filtered = filtered.filter((lote) => lote.estado === activeTab)
      }

setFilteredLotes(filtered)
    } else {
      setFilteredLotes([])
    }
  }, [lotes, activeTab, searchTerm])

// Filtrar productores basado en la búsqueda
  const productoresFiltrados = productores
    .filter((p) => p.roles?.includes("productor"))
    .filter((p) => {
      const searchTerm = productorBusqueda.toLowerCase()
      return (
        p.nombre.toLowerCase().includes(searchTerm) ||
        p.apellidos?.toLowerCase().includes(searchTerm) ||
        p.numero_documento.includes(searchTerm) ||
        `${p.nombre} ${p.apellidos}`.toLowerCase().includes(searchTerm)
      )
    })
    .slice(0, 5) // Limitar a 5 resultados

const seleccionarProductor = (productor: Persona) => {
    setProductorSeleccionado(productor)
    setFormData((prev) => ({ ...prev, productor_id: productor.id }))
    setProductorBusqueda(`${productor.nombre} ${productor.apellidos}`)
    setMostrarResultados(false)
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]:
        name === "numero_jabas" || name === "peso_bruto" || name === "precio_kg"
          ? Number.parseFloat(value) || 0
          : value,
    }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      if (!productorSeleccionado) {
        toast({
          title: "Error",
          description: "Debe seleccionar un productor",
          variant: "destructive",
        })
        return
      }

if (!formData.producto) {
        toast({
          title: "Error",
          description: "Debe ingresar un producto",
          variant: "destructive",
        })
        return
      }

if (formData.numero_jabas <= 0) {
        toast({
          title: "Error",
          description: "El número de jabas debe ser mayor a 0",
          variant: "destructive",
        })
        return
      }

await createLote({
        codigo: formData.codigo,
        productor_id: productorSeleccionado.id,
        producto: formData.producto,
        variedad: formData.variedad,
        fecha_recepcion: formData.fecha_recepcion,
        numero_jabas: formData.numero_jabas,
        peso_bruto: formData.peso_bruto,
        peso_neto: formData.peso_bruto, // Inicialmente igual al bruto
        precio_kg: formData.precio_kg,
        estado: "pendiente",
        observaciones: formData.observaciones,
      } as Omit<Lote, "id" | "created_at" | "updated_at">)

toast({
        title: "Lote creado",
        description: `El lote ${formData.codigo} ha sido creado exitosamente`,
      })

setIsDialogOpen(false)
      setFormData({
        codigo: "",
        productor_id: 0,
        producto: "",
        variedad: "",
        fecha_recepcion: format(new Date(), "yyyy-MM-dd"),
        numero_jabas: 0,
        peso_bruto: 0,
        precio_kg: 0,
        observaciones: "",
      })
      setProductorSeleccionado(null)
      setProductorBusqueda("")
    } catch (error) {
      console.error("Error al crear lote:", error)
      toast({
        title: "Error",
        description: "No se pudo crear el lote. Intente nuevamente.",
        variant: "destructive",
      })
    }
  }

const verDetalle = (lote: Lote) => {
    setSelectedLote(lote)
    setIsDetalleOpen(true)
  }

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "pendiente":
        return <Badge className="bg-green-500">Disponible</Badge>
      case "proceso":
        return <Badge className="bg-yellow-500">En Proceso</Badge>
      case "completado":
        return <Badge className="bg-blue-500">Completado</Badge>
      case "liquidado":
        return <Badge className="bg-gray-500">Liquidado</Badge>
      default:
        return <Badge className="bg-gray-500">{estado}</Badge>
    }
  }

const formatDate = (dateString: string) => {
    try {
      return format(new Date(dateString), "dd/MM/yyyy", { locale: es })
    } catch (error) {
      return dateString
    }
  }

if (errorLotes) {
    return (
      <div className="flex flex-col items-center justify-center h-64">
        <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
        <h3 className="text-xl font-semibold mb-2">Error al cargar los lotes</h3>
        <p className="text-gray-600 mb-4">{errorLotes}</p>
        <Button onClick={refreshLotes}>Reintentar</Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Gestión de Lotes</h2>
          <p className="text-muted-foreground">Administre los lotes de productos recibidos</p>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nuevo Lote
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Registrar Nuevo Lote</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="codigo">Código de Lote</Label>
                <Input id="codigo" name="codigo" value={formData.codigo} onChange={handleInputChange} required />
              </div>

<div className="space-y-2">
                <Label htmlFor="productorBusqueda">Proveedor *</Label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                  <Input
                    id="productorBusqueda"
                    value={productorBusqueda}
                    onChange={(e) => {
                      setProductorBusqueda(e.target.value)
                      setMostrarResultados(true)
                    }}
                    onFocus={() => setMostrarResultados(true)}
                    className="pl-10"
                    placeholder="Buscar proveedor..."
                    autoComplete="off"
                  />
                  {mostrarResultados && productorBusqueda && (
                    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto">
                      {productoresFiltrados.length > 0 ? (
                        productoresFiltrados.map((productor) => (
                          <div
                            key={productor.id}
                            className="px-4 py-2 hover:bg-gray-50 cursor-pointer"
                            onClick={() => seleccionarProductor(productor)}
                          >
                            <div className="font-medium">
                              {productor.nombre} {productor.apellidos}
                            </div>
                            <div className="text-sm text-gray-500">{productor.numero_documento}</div>
                          </div>
                        ))
                      ) : (
                        <div className="px-4 py-3 text-gray-500 text-center">No se encontraron proveedores</div>
                      )}
                    </div>
                  )}
                </div>
                {productorSeleccionado && (
                  <div className="p-3 bg-green-50 border border-green-200 rounded-md">
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="font-medium text-green-800">
                          {productorSeleccionado.nombre} {productorSeleccionado.apellidos}
                        </div>
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          setProductorSeleccionado(null)
                          setFormData((prev) => ({ ...prev, productor_id: 0 }))
                          setProductorBusqueda("")
                        }}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )}
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="producto">Producto</Label>
                  <Select
                    name="producto"
                    value={formData.producto}
                    onValueChange={(value) => handleSelectChange("producto", value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="jengibre">Jengibre</SelectItem>
                      <SelectItem value="curcuma">Cúrcuma</SelectItem>
                      <SelectItem value="kion">Kion</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="variedad">Variedad</Label>
                  <Input id="variedad" name="variedad" value={formData.variedad} onChange={handleInputChange} />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="fecha_recepcion">Fecha de Recepción</Label>
                <Input
                  id="fecha_recepcion"
                  name="fecha_recepcion"
                  type="date"
                  value={formData.fecha_recepcion}
                  onChange={handleInputChange}
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="numero_jabas">Número de Jabas</Label>
                  <Input
                    id="numero_jabas"
                    name="numero_jabas"
                    type="number"
                    min="1"
                    value={formData.numero_jabas || ""}
                    onChange={handleInputChange}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="peso_bruto">Peso Bruto (kg)</Label>
                  <Input
                    id="peso_bruto"
                    name="peso_bruto"
                    type="number"
                    step="0.01"
                    min="0"
                    value={formData.peso_bruto || ""}
                    onChange={handleInputChange}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="precio_kg">Precio por KG (opcional)</Label>
                <Input
                  id="precio_kg"
                  name="precio_kg"
                  type="number"
                  step="0.01"
                  min="0"
                  value={formData.precio_kg || ""}
                  onChange={handleInputChange}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="observaciones">Observaciones</Label>
                <Textarea
                  id="observaciones"
                  name="observaciones"
                  value={formData.observaciones}
                  onChange={handleInputChange}
                  rows={3}
                />
              </div>

<div className="flex justify-end space-x-2 pt-4">
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Guardar Lote</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>

<div className="space-y-4">
        <div className="flex justify-between">
          <Tabs defaultValue="todos" value={activeTab} onValueChange={setActiveTab} className="w-[400px]">
            <TabsList>
              <TabsTrigger value="todos">Todos</TabsTrigger>
              <TabsTrigger value="pendiente">Pendientes</TabsTrigger>
              <TabsTrigger value="proceso">En Proceso</TabsTrigger>
              <TabsTrigger value="completado">Completados</TabsTrigger>
              <TabsTrigger value="liquidado">Liquidados</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="w-[300px]">
            <Input
              placeholder="Buscar por código, producto..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>

<Card>
          <CardHeader className="pb-3">
            <CardTitle>Lotes Registrados</CardTitle>
            <CardDescription>
              {filteredLotes.length} {filteredLotes.length === 1 ? "lote encontrado" : "lotes encontrados"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Código</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Jabas</TableHead>
                  <TableHead>Peso</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredLotes.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-4">
                      No hay lotes registrados
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredLotes.map((lote) => (
                    <TableRow key={lote.id}>
                      <TableCell className="font-medium">{lote.codigo}</TableCell>
                      <TableCell>
                        {lote.producto} {lote.variedad ? `(${lote.variedad})` : ""}
                      </TableCell>
                      <TableCell>{formatDate(lote.fecha_recepcion)}</TableCell>
                      <TableCell>{lote.numero_jabas}</TableCell>
                      <TableCell>{safeNumber(lote.peso_neto, 1)} kg</TableCell>
                      <TableCell>{getEstadoBadge(lote.estado)}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="icon" onClick={() => verDetalle(lote)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>

{/* Dialog de Detalle del Lote */}
      <Dialog open={isDetalleOpen} onOpenChange={setIsDetalleOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Detalle del Lote</DialogTitle>
          </DialogHeader>
          {selectedLote && (
            <div className="space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Código:</span>
                  <span className="font-medium">{selectedLote.codigo}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Producto:</span>
                  <span className="font-medium">
                    {selectedLote.producto} {selectedLote.variedad ? `(${selectedLote.variedad})` : ""}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Fecha de Recepción:</span>
                  <span className="font-medium">{formatDate(selectedLote.fecha_recepcion)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Jabas:</span>
                  <span className="font-medium">{selectedLote.numero_jabas}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Peso Neto:</span>
                  <span className="font-medium">{safeNumber(selectedLote.peso_neto, 2)} kg</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Estado:</span>
                  <span>{getEstadoBadge(selectedLote.estado)}</span>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="lib/hooks/use-api.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

interface UseApiOptions {
  initialLoad?: boolean
}

interface ApiService<T> {
  getAll: () => Promise<T[]>
  getById?: (id: number) => Promise<T>
  create?: (data: Omit<T, "id" | "created_at" | "updated_at">) => Promise<T>
  update?: (id: number, data: Partial<Omit<T, "id" | "created_at" | "updated_at">>) => Promise<T>
  delete?: (id: number) => Promise<void>
}

export function useApi<T extends { id: number }>(service: ApiService<T>, options: UseApiOptions = {}) {
  const { initialLoad = true } = options
  const [data, setData] = useState<T[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const loadData = async () => {
    console.log("[v0] useApi: Starting loadData", {
      serviceName: service.constructor.name,
      initialLoad,
    })

setLoading(true)
    setError(null)

try {
      console.log("[v0] useApi: Calling service.getAll()")
      const result = await service.getAll()
      console.log("[v0] useApi: Data loaded successfully", {
        count: result?.length || 0,
        hasData: !!result,
      })
      setData(result)
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error desconocido"
      console.error("[v0] useApi: Error loading data", {
        error: errorMessage,
        errorType: err instanceof Error ? err.constructor.name : typeof err,
        stack: err instanceof Error ? err.stack : undefined,
      })
      setError(errorMessage)
      setData([])
    } finally {
      setLoading(false)
    }
  }

const create = async (item: Omit<T, "id" | "created_at" | "updated_at">) => {
    if (!service.create) throw new Error("Create method not implemented")

setLoading(true)
    setError(null)
    try {
      const newItem = await service.create(item)
      setData((prev) => [newItem, ...prev])
      return newItem
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al crear"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const update = async (id: number, updates: Partial<Omit<T, "id" | "created_at" | "updated_at">>) => {
    if (!service.update) throw new Error("Update method not implemented")

setLoading(true)
    setError(null)
    try {
      const updatedItem = await service.update(id, updates)
      setData((prev) => prev.map((item) => (item.id === id ? updatedItem : item)))
      return updatedItem
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al actualizar"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const remove = async (id: number) => {
    if (!service.delete) throw new Error("Delete method not implemented")

setLoading(true)
    setError(null)
    try {
      await service.delete(id)
      setData((prev) => prev.filter((item) => item.id !== id))
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al eliminar"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const refresh = () => loadData()

useEffect(() => {
    if (initialLoad) {
      console.log("[v0] useApi: useEffect triggered, loading data")
      loadData()
    }
  }, [initialLoad])

return {
    data,
    loading,
    error,
    create,
    update,
    remove,
    refresh,
    loadData,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-personas.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { personasService } from "@/lib/services/personas-service"
import type { Persona } from "@/lib/types"

export function usePersonas(initialLoad = true) {
  const [data, setData] = useState<Persona[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const loadData = async () => {
    console.log("[v0] usePersonas: Starting loadData")

setLoading(true)
    setError(null)

try {
      console.log("[v0] usePersonas: Calling personasService.getAll()")
      const result = await personasService.getAll()
      console.log("[v0] usePersonas: Data loaded successfully", {
        count: result?.length || 0,
      })
      setData(result || [])
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error desconocido"
      console.error("[v0] usePersonas: Error loading personas", {
        error: errorMessage,
        errorType: err instanceof Error ? err.constructor.name : typeof err,
      })
      setError(errorMessage)
      setData([])
    } finally {
      setLoading(false)
    }
  }

const create = async (persona: Omit<Persona, "id" | "created_at" | "updated_at">) => {
    setLoading(true)
    setError(null)
    try {
      const newPersona = await personasService.create(persona)
      if (newPersona) {
        setData((prev) => [newPersona, ...prev])
        return newPersona
      }
      throw new Error("No se pudo crear la persona")
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al crear persona"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const update = async (id: number, updates: Partial<Persona>) => {
    setLoading(true)
    setError(null)
    try {
      const updatedPersona = await personasService.update(id, updates)
      if (updatedPersona) {
        setData((prev) => prev.map((p) => (p.id === id ? updatedPersona : p)))
        return updatedPersona
      }
      throw new Error("No se pudo actualizar la persona")
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al actualizar persona"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const remove = async (id: number) => {
    setLoading(true)
    setError(null)
    try {
      await personasService.delete(id)
      setData((prev) => prev.filter((p) => p.id !== id))
      return true
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Error al eliminar persona"
      setError(errorMessage)
      throw err
    } finally {
      setLoading(false)
    }
  }

const refresh = () => loadData()

useEffect(() => {
    if (initialLoad) {
      console.log("[v0] usePersonas: useEffect triggered, scheduling load")
      const timer = setTimeout(() => {
        loadData()
      }, 300)
      return () => clearTimeout(timer)
    }
  }, [initialLoad])

return {
    data,
    loading,
    error,
    create,
    update,
    remove,
    refresh,
    loadData,
  }
}
[V0_FILE]typescript:file="components/dashboard-overview.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { useAdelantos } from "@/lib/hooks/use-adelantos"
import { usePersonas } from "@/lib/hooks/use-personas"
import {
  DollarSign,
  Package,
  Clock,
  TrendingUp,
  Users,
  AlertTriangle,
  CheckCircle,
  Truck,
  BarChart3,
} from "lucide-react"

export function DashboardOverview() {
  const [estadisticas, setEstadisticas] = useState({
    totalAdelantosPendientes: 0,
    lotesEnAlmacen: 0,
    lotesEnProceso: 0,
    enviosPendientes: 0,
    productoresConDeuda: 0,
    diasPromedioAlmacen: 0,
    rendimientoPromedio: 0,
    jabasProcesadasHoy: 0,
    horasTrabajadasHoy: 0,
    eficienciaPromedio: 0,
  })

// Cargar datos usando el nuevo sistema API
  const { data: lotes, error: lotesError, loading: lotesLoading } = useApi(lotesService, { initialLoad: true })
  const { data: adelantos, error: adelantosError } = useAdelantos(true)
  const { data: personas, error: personasError } = usePersonas(true)

useEffect(() => {
    console.log("[v0] Dashboard: Data state", {
      lotes: { count: lotes.length, loading: lotesLoading, error: lotesError },
      adelantos: { count: adelantos.length, error: adelantosError },
      personas: { count: personas.length, error: personasError },
    })
  }, [lotes, adelantos, personas, lotesLoading, lotesError, adelantosError, personasError])

useEffect(() => {
    if (lotes.length > 0 || adelantos.length > 0) {
      calcularEstadisticas()
    }
  }, [lotes, adelantos, personas])

const calcularEstadisticas = () => {
    // Adelantos pendientes
    const totalAdelantosPendientes = adelantos
      .filter((a) => a.estado === "pendiente")
      .reduce((sum, a) => sum + a.monto_original, 0)

// Lotes en almacén (disponibles)
    const lotesEnAlmacen = lotes.filter((l) => l.estado === "pendiente").length

// Lotes en proceso
    const lotesEnProceso = lotes.filter((l) => l.estado === "proceso").length

// Envíos pendientes (completados)
    const enviosPendientes = lotes.filter((l) => l.estado === "completado").length

// Productores con deuda
    const productoresConDeuda = new Set(adelantos.filter((a) => a.estado === "pendiente").map((a) => a.productor_id))
      .size

// Días promedio en almacén (simulado por ahora)
    const diasPromedioAlmacen = 3.5

// Simulación de datos de producción
    const jabasProcesadasHoy = Math.floor(Math.random() * 500) + 200
    const horasTrabajadasHoy = Math.floor(Math.random() * 80) + 40
    const eficienciaPromedio = horasTrabajadasHoy > 0 ? jabasProcesadasHoy / horasTrabajadasHoy : 0

setEstadisticas({
      totalAdelantosPendientes,
      lotesEnAlmacen,
      lotesEnProceso,
      enviosPendientes,
      productoresConDeuda,
      diasPromedioAlmacen,
      rendimientoPromedio: 85,
      jabasProcesadasHoy,
      horasTrabajadasHoy,
      eficienciaPromedio,
    })
  }

const getAlertaAlmacen = () => {
    if (estadisticas.diasPromedioAlmacen > 8) {
      return { tipo: "critico", mensaje: "Productos cerca del límite de almacenamiento" }
    } else if (estadisticas.diasPromedioAlmacen > 5) {
      return { tipo: "advertencia", mensaje: "Monitorear tiempo en almacén" }
    }
    return { tipo: "normal", mensaje: "Tiempo de almacenamiento óptimo" }
  }

const alertaAlmacen = getAlertaAlmacen()

return (
    <div className="space-y-6">
      {/* Header del Dashboard */}
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Dashboard Operativo</h1>
          <p className="text-muted-foreground">Visión global de la operación en tiempo real</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="text-xs">
            Actualizado: {new Date().toLocaleTimeString()}
          </Badge>
        </div>
      </div>

{(lotesError || adelantosError || personasError) && (
        <Card className="border-red-500 bg-red-50 dark:bg-red-950">
          <CardContent className="p-4">
            <div className="flex items-start gap-2">
              <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <h3 className="font-semibold text-red-900 dark:text-red-100">Error al cargar datos</h3>
                <div className="text-sm text-red-800 dark:text-red-200 space-y-1 mt-2">
                  {lotesError && <p>Lotes: {lotesError}</p>}
                  {adelantosError && <p>Adelantos: {adelantosError}</p>}
                  {personasError && <p>Personas: {personasError}</p>}
                </div>
                <p className="text-xs text-red-700 dark:text-red-300 mt-2">
                  Por favor, revisa la consola del navegador (F12) para más detalles sobre el error de conexión.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Métricas Principales */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Adelantos Pendientes */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <DollarSign className="h-5 w-5 text-red-500" />
              <div className="flex-1">
                <p className="text-sm text-muted-foreground">Adelantos Pendientes</p>
                <p className="text-2xl font-bold text-red-600">
                  S/ {estadisticas.totalAdelantosPendientes.toLocaleString()}
                </p>
                <p className="text-xs text-muted-foreground">
                  {estadisticas.productoresConDeuda} productores con deuda
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Lotes en Almacén */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Package className="h-5 w-5 text-blue-500" />
              <div className="flex-1">
                <p className="text-sm text-muted-foreground">Lotes Almacenados</p>
                <p className="text-2xl font-bold text-blue-600">{estadisticas.lotesEnAlmacen}</p>
                <p className="text-xs text-muted-foreground">
                  Promedio: {estadisticas.diasPromedioAlmacen.toFixed(1)} días
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Procesos Activos */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Clock className="h-5 w-5 text-yellow-500" />
              <div className="flex-1">
                <p className="text-sm text-muted-foreground">Procesos Activos</p>
                <p className="text-2xl font-bold text-yellow-600">{estadisticas.lotesEnProceso}</p>
                <p className="text-xs text-muted-foreground">{estadisticas.enviosPendientes} envíos pendientes</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Eficiencia Diaria */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <TrendingUp className="h-5 w-5 text-green-500" />
              <div className="flex-1">
                <p className="text-sm text-muted-foreground">Eficiencia Hoy</p>
                <p className="text-2xl font-bold text-green-600">{estadisticas.eficienciaPromedio.toFixed(1)} j/h</p>
                <p className="text-xs text-muted-foreground">
                  {estadisticas.jabasProcesadasHoy} jabas / {estadisticas.horasTrabajadasHoy}h
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Alertas y Estado del Almacén */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Alerta de Almacén */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              {alertaAlmacen.tipo === "critico" && <AlertTriangle className="h-5 w-5 text-red-500" />}
              {alertaAlmacen.tipo === "advertencia" && <Clock className="h-5 w-5 text-yellow-500" />}
              {alertaAlmacen.tipo === "normal" && <CheckCircle className="h-5 w-5 text-green-500" />}
              Estado del Almacén
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <p
                className={`text-sm ${
                  alertaAlmacen.tipo === "critico"
                    ? "text-red-600"
                    : alertaAlmacen.tipo === "advertencia"
                      ? "text-yellow-600"
                      : "text-green-600"
                }`}
              >
                {alertaAlmacen.mensaje}
              </p>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Tiempo promedio:</span>
                  <span className="font-medium">{estadisticas.diasPromedioAlmacen.toFixed(1)} días</span>
                </div>
                <Progress value={(estadisticas.diasPromedioAlmacen / 10) * 100} className="h-2" />
                <p className="text-xs text-muted-foreground">
                  Límite recomendado: 10 días en bruto, 2 días post-lavado
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Progreso de Procesos */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-purple-500" />
              Progreso de Procesos
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[
                { nombre: "Limpieza", progreso: 85, jabas: 120 },
                { nombre: "Secado", progreso: 70, jabas: 95 },
                { nombre: "Selección", progreso: 60, jabas: 80 },
                { nombre: "Empaquetado", progreso: 45, jabas: 60 },
              ].map((proceso) => (
                <div key={proceso.nombre} className="space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>{proceso.nombre}</span>
                    <span className="font-medium">{proceso.jabas} jabas</span>
                  </div>
                  <Progress value={proceso.progreso} className="h-2" />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Comparativa Productividad */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <Users className="h-5 w-5 text-orange-500" />
              Productividad Hoy
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center">
                  <p className="text-2xl font-bold text-blue-600">{estadisticas.jabasProcesadasHoy}</p>
                  <p className="text-xs text-muted-foreground">Jabas Procesadas</p>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold text-green-600">{estadisticas.horasTrabajadasHoy}</p>
                  <p className="text-xs text-muted-foreground">Horas Trabajadas</p>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Eficiencia:</span>
                  <span className="font-medium">{estadisticas.eficienciaPromedio.toFixed(1)} jabas/hora</span>
                </div>
                <Progress value={(estadisticas.eficienciaPromedio / 10) * 100} className="h-2" />
                <p className="text-xs text-muted-foreground">Meta: 8-10 jabas por hora</p>
              </div>

<div className="pt-2 border-t">
                <div className="flex justify-between text-sm">
                  <span>Rendimiento promedio:</span>
                  <span className="font-medium text-green-600">{estadisticas.rendimientoPromedio}%</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Accesos Rápidos */}
      <Card>
        <CardHeader>
          <CardTitle>Acciones Rápidas</CardTitle>
          <CardDescription>Operaciones frecuentes del día a día</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="flex flex-col items-center p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">
              <Package className="h-8 w-8 text-blue-500 mb-2" />
              <span className="text-sm font-medium">Registrar Lote</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">
              <DollarSign className="h-8 w-8 text-red-500 mb-2" />
              <span className="text-sm font-medium">Nuevo Adelanto</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">
              <Truck className="h-8 w-8 text-green-500 mb-2" />
              <span className="text-sm font-medium">Asignar Envío</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">
              <BarChart3 className="h-8 w-8 text-purple-500 mb-2" />
              <span className="text-sm font-medium">Ver Reportes</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/lotes-service.ts" isQuickEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Lote } from "@/lib/types"

export class LotesService {
  async getAll(): Promise<Lote[]> {
    console.log("[v0] LotesService: getAll() called")
    const response = await ApiService.get<Lote[]>(API_ENDPOINTS.LOTES)
    console.log("[v0] LotesService: Response received", {
      isArray: Array.isArray(response),
      count: Array.isArray(response) ? response.length : 0,
    })
    return response
  }

async getById(id: number): Promise<Lote> {
    const response = await ApiService.get<Lote>(API_ENDPOINTS.LOTES_BY_ID(id))
    return response
  }

async create(data: Omit<Lote, "id" | "created_at" | "updated_at">): Promise<Lote> {
    const response = await ApiService.post<Lote>(API_ENDPOINTS.LOTES, data)
    return response
  }

async update(id: number, data: Partial<Omit<Lote, "id" | "created_at" | "updated_at">>): Promise<Lote> {
    const response = await ApiService.put<Lote>(API_ENDPOINTS.LOTES_BY_ID(id), data)
    return response
  }

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.LOTES_BY_ID(id))
  }

async getLotesDisponibles(): Promise<Lote[]> {
    const lotes = await this.getAll()
    return lotes.filter((l) => l.estado !== "completado" && l.peso_neto > 0)
  }

async getLotesByProductor(productorId: number): Promise<Lote[]> {
    const lotes = await this.getAll()
    return lotes.filter((l) => l.productor_id === productorId)
  }

async getLotesByEstado(estado: string): Promise<Lote[]> {
    const lotes = await this.getAll()
    return lotes.filter((l) => l.estado === estado)
  }

async generarCodigoLote(): Promise<string> {
    const lotes = await this.getAll()
    const año = new Date().getFullYear()
    const lotesDelAño = lotes.filter((l) => l.codigo.startsWith(`LOT-${año}`))
    const numero = lotesDelAño.length + 1
    return `LOT-${año}-${numero.toString().padStart(3, "0")}`
  }
}

export const lotesService = new LotesService()
[V0_FILE]typescript:file="lib/services/personas-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Persona } from "@/lib/types"

class PersonasService {
  private collectionId = "personas"

async getAll(): Promise<Persona[]> {
    console.log("[v0] PersonasService: getAll() called")
    const response = await ApiService.get<Persona[]>(API_ENDPOINTS.PERSONAS)
    console.log("[v0] PersonasService: Response received", {
      isArray: Array.isArray(response),
      count: Array.isArray(response) ? response.length : 0,
    })
    return response
  }

async obtenerPersonas(): Promise<Persona[]> {
    try {
      return this.getAll()
    } catch (error) {
      console.error("Error al obtener personas:", error)
      return []
    }
  }

async getById(id: number): Promise<Persona> {
    const response = await ApiService.get<Persona>(API_ENDPOINTS.PERSONAS_BY_ID(id))
    return response
  }

async obtenerPersonaPorId(id: string): Promise<Persona | null> {
    try {
      const personas = await this.getAll()
      return personas.find((p) => p.$id === id) || null
    } catch (error) {
      console.error("Error al obtener persona por ID:", error)
      return null
    }
  }

async create(data: Omit<Persona, "id" | "created_at" | "updated_at">): Promise<Persona> {
    const response = await ApiService.post<Persona>(API_ENDPOINTS.PERSONAS, data)
    return response
  }

async crearPersona(persona: Omit<Persona, "$id" | "$createdAt" | "$updatedAt">): Promise<Persona | null> {
    try {
      return this.create(persona)
    } catch (error) {
      console.error("Error al crear persona:", error)
      return null
    }
  }

async update(id: number, data: Partial<Omit<Persona, "id" | "created_at" | "updated_at">>): Promise<Persona> {
    const response = await ApiService.put<Persona>(API_ENDPOINTS.PERSONAS_BY_ID(id), data)
    return response
  }

async actualizarPersona(id: string, updates: Partial<Persona>): Promise<Persona | null> {
    try {
      const persona = await this.getById(Number(id))
      const personaActualizada = { ...persona, ...updates, $updatedAt: new Date().toISOString() }
      return this.update(Number(id), personaActualizada)
    } catch (error) {
      console.error("Error al actualizar persona:", error)
      return null
    }
  }

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.PERSONAS_BY_ID(id))
  }

async eliminarPersona(id: string): Promise<boolean> {
    try {
      await this.delete(Number(id))
      return true
    } catch (error) {
      console.error("Error al eliminar persona:", error)
      return false
    }
  }

async getByTipo(tipo: string): Promise<Persona[]> {
    const personas = await this.getAll()
    return personas.filter((p) => p.tipo === tipo)
  }

async getProductores(): Promise<Persona[]> {
    return this.getByTipo("productor")
  }

async getEmpleados(): Promise<Persona[]> {
    return this.getByTipo("empleado")
  }

async getProveedores(): Promise<Persona[]> {
    return this.getByTipo("proveedor")
  }

private getMockPersonas(): Persona[] {
    return [
      {
        $id: "prod_001",
        $createdAt: "2024-01-01T00:00:00Z",
        $updatedAt: "2024-01-01T00:00:00Z",
        nombres: "Juan Carlos",
        apellidos: "Pérez González",
        documento_identidad: "12345678",
        tipo_documento: "DNI",
        telefono: "987654321",
        email: "juan.perez@email.com",
        direccion: "Av. Los Productores 123, Lima",
        fecha_nacimiento: "1980-05-15",
        tipo: "productor",
        activo: true,
        roles: ["productor"],
        fecha_registro: "2024-01-01",
        observaciones: "Productor principal de café orgánico",
      },
      {
        $id: "prod_002",
        $createdAt: "2024-01-02T00:00:00Z",
        $updatedAt: "2024-01-02T00:00:00Z",
        nombres: "María Elena",
        apellidos: "García Rodríguez",
        documento_identidad: "87654321",
        tipo_documento: "DNI",
        telefono: "912345678",
        email: "maria.garcia@email.com",
        direccion: "Jr. Las Flores 456, Cusco",
        fecha_nacimiento: "1975-08-22",
        tipo: "productor",
        activo: true,
        roles: ["productor"],
        fecha_registro: "2024-01-02",
        observaciones: "Especialista en cacao fino",
      },
      {
        $id: "prod_003",
        $createdAt: "2024-01-03T00:00:00Z",
        $updatedAt: "2024-01-03T00:00:00Z",
        nombres: "Carlos Alberto",
        apellidos: "López Mendoza",
        documento_identidad: "11223344",
        tipo_documento: "DNI",
        telefono: "998877665",
        email: "carlos.lopez@email.com",
        direccion: "Calle Los Andes 789, Arequipa",
        fecha_nacimiento: "1982-12-10",
        tipo: "productor",
        activo: true,
        roles: ["productor"],
        fecha_registro: "2024-01-03",
        observaciones: "Productor de quinua orgánica",
      },
      {
        $id: "emp_001",
        $createdAt: "2024-01-01T00:00:00Z",
        $updatedAt: "2024-01-01T00:00:00Z",
        nombres: "Ana Sofía",
        apellidos: "Martínez Silva",
        documento_identidad: "55667788",
        tipo_documento: "DNI",
        telefono: "955443322",
        email: "ana.martinez@empresa.com",
        direccion: "Av. Industrial 100, Lima",
        fecha_nacimiento: "1985-03-18",
        tipo: "empleado",
        activo: true,
        roles: ["supervisor", "control_calidad"],
        fecha_registro: "2024-01-01",
        observaciones: "Supervisora de control de calidad",
      },
    ]
  }
}

export const personasService = new PersonasService()
[V0_FILE]typescript:file="lib/services/api-service.ts" isQuickEdit="true" isMerged="true"
import { API_CONFIG } from "@/lib/config/api"

export class ApiError extends Error {
  constructor(
    message: string,
    public status?: number,
    public data?: unknown,
  ) {
    super(message)
    this.name = "ApiError"
  }
}

export class ApiService {
  private static async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
    const url = `${API_CONFIG.BASE_URL}${endpoint}`

console.log("[v0] API Request:", {
      method: options.method || "GET",
      url,
      endpoint,
      baseURL: API_CONFIG.BASE_URL,
    })

try {
      const response = await fetch(url, {
        ...options,
        headers: {
          ...API_CONFIG.HEADERS,
          ...options.headers,
        },
        signal: AbortSignal.timeout(API_CONFIG.TIMEOUT),
      })

console.log("[v0] API Response:", {
        url,
        status: response.status,
        ok: response.ok,
      })

if (!response.ok) {
        const errorData = await response.json().catch(() => null)
        console.error("[v0] API Error Response:", {
          url,
          status: response.status,
          errorData,
        })
        throw new ApiError(errorData?.message || `HTTP error! status: ${response.status}`, response.status, errorData)
      }

const data = await response.json()
      console.log("[v0] API Success:", {
        url,
        dataType: typeof data,
        isArray: Array.isArray(data),
        hasDataProperty: data && typeof data === "object" && "data" in data,
      })

// Si es un array directo, devolverlo como está
      // Si tiene propiedad 'data', devolver solo la data
      // Si es otro objeto, devolverlo completo
      if (Array.isArray(data)) {
        console.log("[v0] Backend returned array directly, wrapping in ApiResponse format")
        return data as T
      }

if (data && typeof data === "object" && "data" in data) {
        console.log("[v0] Backend returned ApiResponse format with data property")
        return data as T
      }

console.log("[v0] Backend returned object, returning as is")
      return data as T
    } catch (error) {
      console.error("[v0] API Request Failed:", {
        url,
        error: error instanceof Error ? error.message : String(error),
        errorType: error instanceof Error ? error.constructor.name : typeof error,
      })

if (error instanceof ApiError) {
        throw error
      }

if (error instanceof Error) {
        throw new ApiError(error.message)
      }

throw new ApiError("Unknown error occurred")
    }
  }

static async get<T>(endpoint: string): Promise<T> {
    return this.request<T>(endpoint, { method: "GET" })
  }

static async post<T>(endpoint: string, data: unknown): Promise<T> {
    return this.request<T>(endpoint, {
      method: "POST",
      body: JSON.stringify(data),
    })
  }

static async put<T>(endpoint: string, data: unknown): Promise<T> {
    return this.request<T>(endpoint, {
      method: "PUT",
      body: JSON.stringify(data),
    })
  }

static async delete<T>(endpoint: string): Promise<T> {
    return this.request<T>(endpoint, { method: "DELETE" })
  }
}
[V0_FILE]typescript:file="app/api/proxy/[...path]/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

const BACKEND_URL = "https://citeapurimac.org/backend"

export async function GET(request: NextRequest, { params }: { params: { path: string[] } }) {
  try {
    const path = params.path.join("/")
    const searchParams = request.nextUrl.searchParams.toString()
    const url = `${BACKEND_URL}/${path}${searchParams ? `?${searchParams}` : ""}`

console.log("[v0] Proxy GET:", url)

const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })

const data = await response.json()
    console.log("[v0] Proxy Response:", {
      status: response.status,
      dataLength: Array.isArray(data) ? data.length : "not array",
    })

return NextResponse.json(data, { status: response.status })
  } catch (error) {
    console.error("[v0] Proxy Error:", error)
    return NextResponse.json(
      { error: "Error al conectar con el backend", details: error instanceof Error ? error.message : "Unknown error" },
      { status: 500 },
    )
  }
}

export async function POST(request: NextRequest, { params }: { params: { path: string[] } }) {
  try {
    const path = params.path.join("/")
    const url = `${BACKEND_URL}/${path}`
    const body = await request.json()

console.log("[v0] Proxy POST:", url, body)

const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    })

const data = await response.json()
    console.log("[v0] Proxy Response:", { status: response.status })

export async function PUT(request: NextRequest, { params }: { params: { path: string[] } }) {
  try {
    const path = params.path.join("/")
    const url = `${BACKEND_URL}/${path}`
    const body = await request.json()

console.log("[v0] Proxy PUT:", url, body)

const response = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    })

const data = await response.json()
    console.log("[v0] Proxy Response:", { status: response.status })

export async function DELETE(request: NextRequest, { params }: { params: { path: string[] } }) {
  try {
    const path = params.path.join("/")
    const url = `${BACKEND_URL}/${path}`

console.log("[v0] Proxy DELETE:", url)

const response = await fetch(url, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    })

const data = await response.json()
    console.log("[v0] Proxy Response:", { status: response.status })

import type React from "react"

import { useState, useEffect } from "react"
import { Card } 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 { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { X, User, Building, Phone, MapPin, CreditCard, Loader2 } from "lucide-react"
import { usePersonas } from "@/lib/hooks/use-personas"
import type { Persona } from "@/lib/types"
import { useToast } from "@/components/ui/use-toast"

interface PersonaFormProps {
  onClose: () => void
  persona?: Persona | null
}

interface PersonaFormData {
  nombres: string
  apellidos: string
  tipo_documento: string
  numero_documento: string
  ruc: string
  razon_social: string
  telefono: string
  email: string
  direccion: string
  distrito: string
  provincia: string
  departamento: string
  roles: string[]
  banco: string
  numero_cuenta: string
  cci: string
  observaciones: string
}

const rolesDisponibles = [
  { id: "productor", label: "Productor", color: "bg-green-500/10 text-green-500" },
  { id: "comprador", label: "Comprador", color: "bg-blue-500/10 text-blue-500" },
  { id: "jornalero", label: "Jornalero", color: "bg-orange-500/10 text-orange-500" },
  { id: "transportista", label: "Transportista", color: "bg-purple-500/10 text-purple-500" },
  { id: "supervisor", label: "Supervisor", color: "bg-red-500/10 text-red-500" },
  { id: "control_calidad", label: "Control Calidad", color: "bg-indigo-500/10 text-indigo-500" },
]

export function PersonasForm({ onClose, persona }: PersonaFormProps) {
  const { create, update } = usePersonas(false)
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formData, setFormData] = useState<PersonaFormData>({
    nombres: "",
    apellidos: "",
    tipo_documento: "DNI",
    numero_documento: "",
    ruc: "",
    razon_social: "",
    telefono: "",
    email: "",
    direccion: "",
    distrito: "",
    provincia: "",
    departamento: "",
    roles: [],
    banco: "",
    numero_cuenta: "",
    cci: "",
    observaciones: "",
  })

useEffect(() => {
    if (persona) {
      const nombreParts = (persona.nombres || persona.nombre_completo || "").split(" ")
      const nombres = nombreParts.slice(0, -1).join(" ") || nombreParts[0] || ""
      const apellidos = nombreParts.length > 1 ? nombreParts[nombreParts.length - 1] : ""

setFormData({
        nombres: nombres,
        apellidos: apellidos,
        tipo_documento: persona.tipo_documento || "DNI",
        numero_documento: persona.numero_documento || persona.documento_identidad || "",
        ruc: persona.ruc || "",
        razon_social: persona.razon_social || "",
        telefono: persona.telefono || "",
        email: persona.email || "",
        direccion: persona.direccion || "",
        distrito: persona.distrito || "",
        provincia: persona.provincia || "",
        departamento: persona.departamento || "",
        roles: persona.roles || [],
        banco: persona.banco || "",
        numero_cuenta: persona.numero_cuenta || persona.cuenta_bancaria || "",
        cci: persona.cci || "",
        observaciones: persona.observaciones || "",
      })
    }
  }, [persona])

const handleRoleToggle = (roleId: string) => {
    setFormData((prev) => ({
      ...prev,
      roles: prev.roles.includes(roleId) ? prev.roles.filter((r) => r !== roleId) : [...prev.roles, roleId],
    }))
  }

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

if (!formData.nombres.trim() || !formData.apellidos.trim()) {
      toast({
        title: "Error",
        description: "Los nombres y apellidos son requeridos",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      if (persona) {
        await update(persona.id, formData)
        toast({
          title: "Éxito",
          description: "Persona actualizada correctamente",
        })
      } else {
        await create(formData as Omit<Persona, "id" | "created_at" | "updated_at">)
        toast({
          title: "Éxito",
          description: "Persona registrada correctamente",
        })
      }
      onClose()
    } catch (error) {
      console.error("Error al guardar persona:", error)
      toast({
        title: "Error",
        description: "No se pudo guardar la persona. Intente nuevamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <User className="h-5 w-5" />
              <h2 className="text-xl font-semibold">{persona ? "Editar Persona" : "Registrar Nueva Persona"}</h2>
            </div>
            <Button variant="ghost" size="icon" onClick={onClose} disabled={isSubmitting}>
              <X className="h-4 w-4" />
            </Button>
          </div>

<form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-4">
              <h3 className="text-lg font-medium flex items-center gap-2">
                <User className="h-4 w-4" />
                Información Personal
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="nombres">Nombres *</Label>
                  <Input
                    id="nombres"
                    value={formData.nombres}
                    onChange={(e) => setFormData((prev) => ({ ...prev, nombres: e.target.value }))}
                    required
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="apellidos">Apellidos *</Label>
                  <Input
                    id="apellidos"
                    value={formData.apellidos}
                    onChange={(e) => setFormData((prev) => ({ ...prev, apellidos: e.target.value }))}
                    required
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="tipo_documento">Tipo de Documento</Label>
                  <select
                    id="tipo_documento"
                    className="w-full p-2 border rounded-md bg-background"
                    value={formData.tipo_documento}
                    onChange={(e) => setFormData((prev) => ({ ...prev, tipo_documento: e.target.value }))}
                    disabled={isSubmitting}
                  >
                    <option value="DNI">DNI</option>
                    <option value="CE">Carné de Extranjería</option>
                    <option value="Pasaporte">Pasaporte</option>
                  </select>
                </div>
                <div>
                  <Label htmlFor="numero_documento">Número de Documento *</Label>
                  <Input
                    id="numero_documento"
                    value={formData.numero_documento}
                    onChange={(e) => setFormData((prev) => ({ ...prev, numero_documento: e.target.value }))}
                    required
                    disabled={isSubmitting}
                  />
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium flex items-center gap-2">
                <Building className="h-4 w-4" />
                Información Empresarial
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="ruc">RUC</Label>
                  <Input
                    id="ruc"
                    value={formData.ruc}
                    onChange={(e) => setFormData((prev) => ({ ...prev, ruc: e.target.value }))}
                    placeholder="20123456789"
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="razon_social">Razón Social</Label>
                  <Input
                    id="razon_social"
                    value={formData.razon_social}
                    onChange={(e) => setFormData((prev) => ({ ...prev, razon_social: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium flex items-center gap-2">
                <Phone className="h-4 w-4" />
                Información de Contacto
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="telefono">Teléfono *</Label>
                  <Input
                    id="telefono"
                    value={formData.telefono}
                    onChange={(e) => setFormData((prev) => ({ ...prev, telefono: e.target.value }))}
                    required
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                Dirección
              </h3>
              <div className="space-y-4">
                <div>
                  <Label htmlFor="direccion">Dirección Completa</Label>
                  <Input
                    id="direccion"
                    value={formData.direccion}
                    onChange={(e) => setFormData((prev) => ({ ...prev, direccion: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="distrito">Distrito</Label>
                    <Input
                      id="distrito"
                      value={formData.distrito}
                      onChange={(e) => setFormData((prev) => ({ ...prev, distrito: e.target.value }))}
                      disabled={isSubmitting}
                    />
                  </div>
                  <div>
                    <Label htmlFor="provincia">Provincia</Label>
                    <Input
                      id="provincia"
                      value={formData.provincia}
                      onChange={(e) => setFormData((prev) => ({ ...prev, provincia: e.target.value }))}
                      disabled={isSubmitting}
                    />
                  </div>
                  <div>
                    <Label htmlFor="departamento">Departamento</Label>
                    <Input
                      id="departamento"
                      value={formData.departamento}
                      onChange={(e) => setFormData((prev) => ({ ...prev, departamento: e.target.value }))}
                      disabled={isSubmitting}
                    />
                  </div>
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium">Roles en el Sistema</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {rolesDisponibles.map((rol) => (
                  <div key={rol.id} className="flex items-center space-x-2">
                    <Checkbox
                      id={rol.id}
                      checked={formData.roles.includes(rol.id)}
                      onCheckedChange={() => handleRoleToggle(rol.id)}
                      disabled={isSubmitting}
                    />
                    <Label htmlFor={rol.id} className="cursor-pointer">
                      <Badge className={rol.color}>{rol.label}</Badge>
                    </Label>
                  </div>
                ))}
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium flex items-center gap-2">
                <CreditCard className="h-4 w-4" />
                Información Bancaria
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="banco">Banco</Label>
                  <Input
                    id="banco"
                    value={formData.banco}
                    onChange={(e) => setFormData((prev) => ({ ...prev, banco: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="numero_cuenta">Número de Cuenta</Label>
                  <Input
                    id="numero_cuenta"
                    value={formData.numero_cuenta}
                    onChange={(e) => setFormData((prev) => ({ ...prev, numero_cuenta: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
                <div>
                  <Label htmlFor="cci">CCI</Label>
                  <Input
                    id="cci"
                    value={formData.cci}
                    onChange={(e) => setFormData((prev) => ({ ...prev, cci: e.target.value }))}
                    disabled={isSubmitting}
                  />
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-lg font-medium">Observaciones</h3>
              <Textarea
                value={formData.observaciones}
                onChange={(e) => setFormData((prev) => ({ ...prev, observaciones: e.target.value }))}
                placeholder="Información adicional relevante..."
                rows={3}
                disabled={isSubmitting}
              />
            </div>

<div className="flex justify-end gap-4 pt-6 border-t">
              <Button type="button" variant="outline" onClick={onClose} disabled={isSubmitting}>
                Cancelar
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
                {persona ? "Actualizar Persona" : "Registrar Persona"}
              </Button>
            </div>
          </form>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/personas-management.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { PersonasForm } from "@/components/personas-form"
import { Search, Plus, User, Edit, Trash2, Phone, MapPin, Building, AlertCircle, Loader2 } from 'lucide-react'
import { usePersonas } from "@/lib/hooks/use-personas"
import type { Persona } from "@/lib/types"
import { useToast } from "@/components/ui/use-toast"

interface DisplayPersona extends Persona {
  nombre?: string
  apellidos?: string
}

const rolesConfig = {
  productor: { label: "Productor", color: "bg-green-100 text-green-800" },
  comprador: { label: "Comprador", color: "bg-blue-100 text-blue-800" },
  jornalero: { label: "Jornalero", color: "bg-orange-100 text-orange-800" },
  transportista: { label: "Transportista", color: "bg-purple-100 text-purple-800" },
  supervisor: { label: "Supervisor", color: "bg-red-100 text-red-800" },
  control_calidad: { label: "Control Calidad", color: "bg-indigo-100 text-indigo-800" },
}

export function PersonasManagement() {
  const { data: personas, loading, error, remove: removePersona, refresh } = usePersonas(true)
  const { toast } = useToast()
  const [busqueda, setBusqueda] = useState("")
  const [mostrarFormulario, setMostrarFormulario] = useState(false)
  const [personaEditando, setPersonaEditando] = useState<DisplayPersona | null>(null)

const personasFiltradas = (personas as DisplayPersona[]).filter((persona) => {
    const nombreCompleto = persona.nombre_completo || `${persona.nombres || ""} ${persona.apellidos || ""}`.trim()
    return (
      nombreCompleto.toLowerCase().includes(busqueda.toLowerCase()) ||
      (persona.numero_documento || persona.documento_identidad || "").includes(busqueda)
    )
  })

const handleEliminar = async (id: number | string) => {
    try {
      await removePersona(id as number)
      toast({
        title: "Éxito",
        description: "Persona eliminada correctamente",
      })
    } catch (error) {
      console.error("Error al eliminar persona:", error)
      toast({
        title: "Error",
        description: "No se pudo eliminar la persona",
        variant: "destructive",
      })
    }
  }

const editarPersona = (persona: DisplayPersona) => {
    setPersonaEditando(persona)
    setMostrarFormulario(true)
  }

const handleFormClose = () => {
    setMostrarFormulario(false)
    setPersonaEditando(null)
    refresh()
  }

if (loading && personas.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2 text-lg">Cargando personas...</span>
      </div>
    )
  }

if (error) {
    return (
      <div className="flex flex-col items-center justify-center h-64">
        <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
        <h3 className="text-xl font-semibold mb-2">Error al cargar personas</h3>
        <p className="text-gray-600 mb-4">{error}</p>
        <Button onClick={refresh}>Reintentar</Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Gestión de Personas</h1>
          <p className="text-gray-600">Administra el registro de personas del sistema</p>
        </div>
        <Button onClick={() => setMostrarFormulario(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Nueva Persona
        </Button>
      </div>

{/* Estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <User className="h-8 w-8 text-blue-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Personas</p>
                <p className="text-2xl font-bold">{personas.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <Building className="h-8 w-8 text-green-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Productores</p>
                <p className="text-2xl font-bold">
                  {(personas as DisplayPersona[]).filter((p) => p.roles?.includes("productor")).length}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <Phone className="h-8 w-8 text-orange-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Jornaleros</p>
                <p className="text-2xl font-bold">
                  {(personas as DisplayPersona[]).filter((p) => p.roles?.includes("jornalero")).length}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <MapPin className="h-8 w-8 text-purple-500" />
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Transportistas</p>
                <p className="text-2xl font-bold">
                  {(personas as DisplayPersona[]).filter((p) => p.roles?.includes("transportista")).length}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="flex space-x-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por nombre, apellidos o documento..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Tabla de personas */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Personas ({personasFiltradas.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nombre Completo</TableHead>
                <TableHead>Documento</TableHead>
                <TableHead>Teléfono</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Roles</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {personasFiltradas.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center py-4">
                    No hay personas registradas
                  </TableCell>
                </TableRow>
              ) : (
                personasFiltradas.map((persona) => {
                  const nombreCompleto =
                    persona.nombre_completo || `${persona.nombres || ""} ${persona.apellidos || ""}`.trim()
                  const documento = persona.numero_documento || persona.documento_identidad || "-"
                  const tipoDocumento = persona.tipo_documento || "DNI"

return (
                    <TableRow key={persona.id}>
                      <TableCell className="font-medium">{nombreCompleto}</TableCell>
                      <TableCell>
                        <div>
                          <span className="text-sm text-gray-500">{tipoDocumento}:</span>
                          <br />
                          <span className="font-mono">{documento}</span>
                        </div>
                      </TableCell>
                      <TableCell>{persona.telefono || "-"}</TableCell>
                      <TableCell>{persona.email || "-"}</TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {(persona.roles || []).map((rol) => (
                            <Badge key={rol} className={rolesConfig[rol as keyof typeof rolesConfig]?.color}>
                              {rolesConfig[rol as keyof typeof rolesConfig]?.label || rol}
                            </Badge>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="default">{persona.estado || "activo"}</Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex gap-2">
                          <Button size="sm" variant="outline" onClick={() => editarPersona(persona)}>
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleEliminar(persona.id)}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  )
                })
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Modal de formulario */}
      {mostrarFormulario && <PersonasForm persona={personaEditando} onClose={handleFormClose} />}
    </div>
  )
}
[V0_FILE]php:file="backend/controllers/PersonasController.php" isMerged="true"
<?php
class PersonasController {
    private $conn;
    private $table = "personas";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'productores') {
                    $this->getProductores();
                } else if ($action === 'clientes') {
                    $this->getClientes();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                if ($action === 'search') {
                    $this->search();
                } else {
                    $this->create();
                }
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT * FROM " . $this->table . " ORDER BY created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getProductores() {
        $query = "SELECT * FROM " . $this->table . " WHERE tipo_persona = 'productor' AND estado = 'activo' ORDER BY nombre_completo";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getClientes() {
        $query = "SELECT * FROM " . $this->table . " WHERE tipo_persona = 'cliente' AND estado = 'activo' ORDER BY nombre_completo";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function search() {
        $data = json_decode(file_get_contents("php://input"));
        $search = $data->search ?? '';
        
        $query = "SELECT * FROM " . $this->table . " WHERE 
                  nombre_completo LIKE :search OR 
                  documento_identidad LIKE :search 
                  ORDER BY nombre_completo LIMIT 20";
        $stmt = $this->conn->prepare($query);
        $searchParam = "%{$search}%";
        $stmt->bindParam(':search', $searchParam);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        // Combine nombres and apellidos into nombre_completo
        $nombreCompleto = trim(($data->nombres ?? '') . ' ' . ($data->apellidos ?? ''));
        
        // Map roles array to tipo_persona (use first role or default)
        $tipoPersona = 'cliente'; // default
        if (!empty($data->roles) && is_array($data->roles)) {
            $roles = $data->roles;
            if (in_array('productor', $roles)) $tipoPersona = 'productor';
            elseif (in_array('empleado', $roles)) $tipoPersona = 'empleado';
            elseif (in_array('supervisor', $roles)) $tipoPersona = 'empleado';
        }
        
        $query = "INSERT INTO " . $this->table . " 
                  (nombre_completo, documento_identidad, tipo_documento, telefono, email, 
                   direccion, tipo_persona, cuenta_bancaria, banco, estado) 
                  VALUES (:nombre, :documento, :tipo_doc, :telefono, :email, 
                          :direccion, :tipo_persona, :cuenta, :banco, :estado)";
        
        $stmt = $this->conn->prepare($query);
        
        // Store values in variables before binding (PHP requires references)
        $nombre = $nombreCompleto;
        $documento = $data->numero_documento ?? '';
        $tipoDoc = $data->tipo_documento ?? 'DNI';
        $telefono = $data->telefono ?? '';
        $email = $data->email ?? '';
        $direccion = $data->direccion ?? '';
        $cuenta = $data->numero_cuenta ?? '';
        $banco = $data->banco ?? '';
        $estado = 'activo';
        
        $stmt->bindParam(':nombre', $nombre);
        $stmt->bindParam(':documento', $documento);
        $stmt->bindParam(':tipo_doc', $tipoDoc);
        $stmt->bindParam(':telefono', $telefono);
        $stmt->bindParam(':email', $email);
        $stmt->bindParam(':direccion', $direccion);
        $stmt->bindParam(':tipo_persona', $tipoPersona);
        $stmt->bindParam(':cuenta', $cuenta);
        $stmt->bindParam(':banco', $banco);
        $stmt->bindParam(':estado', $estado);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Persona creada", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear persona"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $nombreCompleto = trim(($data->nombres ?? '') . ' ' . ($data->apellidos ?? ''));
        
        // Map roles array to tipo_persona
        $tipoPersona = 'cliente';
        if (!empty($data->roles) && is_array($data->roles)) {
            $roles = $data->roles;
            if (in_array('productor', $roles)) $tipoPersona = 'productor';
            elseif (in_array('empleado', $roles)) $tipoPersona = 'empleado';
            elseif (in_array('supervisor', $roles)) $tipoPersona = 'empleado';
        }
        
        $nombre = $nombreCompleto;
        $documento = $data->numero_documento ?? '';
        $tipoDoc = $data->tipo_documento ?? 'DNI';
        $telefono = $data->telefono ?? '';
        $email = $data->email ?? '';
        $direccion = $data->direccion ?? '';
        $cuenta = $data->numero_cuenta ?? '';
        $banco = $data->banco ?? '';
        
        $query = "UPDATE " . $this->table . " SET 
                  nombre_completo = :nombre,
                  documento_identidad = :documento,
                  tipo_documento = :tipo_doc,
                  telefono = :telefono,
                  email = :email,
                  direccion = :direccion,
                  tipo_persona = :tipo_persona,
                  cuenta_bancaria = :cuenta,
                  banco = :banco
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':nombre', $nombre);
        $stmt->bindParam(':documento', $documento);
        $stmt->bindParam(':tipo_doc', $tipoDoc);
        $stmt->bindParam(':telefono', $telefono);
        $stmt->bindParam(':email', $email);
        $stmt->bindParam(':direccion', $direccion);
        $stmt->bindParam(':tipo_persona', $tipoPersona);
        $stmt->bindParam(':cuenta', $cuenta);
        $stmt->bindParam(':banco', $banco);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Persona actualizada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar persona"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Persona eliminada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar persona"]);
        }
    }
}
[V0_FILE]typescriptreact:file="components/ingreso-lotes-mejorado.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Search, Plus, Package, Calculator, DollarSign, Scale, Eye, Info, CheckCircle } from "lucide-react"

import { usePersonas } from "@/lib/hooks/use-personas"
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"

// Configuración de productos específicos
const productosConfig = {
  "jengibre-comun": {
    nombre: "Jengibre Común",
    categorias: ["Exportación", "Industrial", "Jugo"],
    icono: "🫚",
  },
  "jengibre-chino": {
    nombre: "Jengibre Chino",
    categorias: ["Chino"],
    icono: "🇨🇳",
  },
  curcuma: {
    nombre: "Cúrcuma",
    categorias: ["Cúrcuma"],
    icono: "🟡",
  },
}

export default function IngresoLotesMejorado() {
  // Estados para el formulario
  const [searchTerm, setSearchTerm] = useState("")
  const [showResults, setShowResults] = useState(false)
  const [selectedProveedor, setSelectedProveedor] = useState<any>(null)
  const [showNewProveedorForm, setShowNewProveedorForm] = useState(false)
  const [newProveedor, setNewProveedor] = useState({
    nombres: "",
    apellidos: "",
    documento: "",
    telefono: "",
    direccion: "",
    tipo: "",
  })

// Estados para los datos del lote
  const [formData, setFormData] = useState({
    producto: "",
    categoria: "",
    numeroJabas: "",
    pesoBrutoTotal: "",
    precioKg: "",
    modalidad: "",
    origen: "",
    transportista: "",
    placa: "",
    observaciones: "",
  })

const { data: proveedores, loading: loadingProveedores } = usePersonas()
  const { data: lotes, loading: loadingLotes, create: createLote } = useApi(lotesService, { initialLoad: true })

// Filtrar proveedores basado en la búsqueda
  const filteredProveedores = useMemo(() => {
    if (!searchTerm.trim()) return []

const filtered = (Array.isArray(proveedores) ? proveedores : []).filter(
      (proveedor) =>
        proveedor.nombre_completo?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        proveedor.documento_identidad?.includes(searchTerm),
    )

return filtered.slice(0, 5)
  }, [searchTerm, proveedores])

// Obtener categorías disponibles según el producto seleccionado
  const categoriasDisponibles = useMemo(() => {
    if (!formData.producto) return []
    return productosConfig[formData.producto as keyof typeof productosConfig]?.categorias || []
  }, [formData.producto])

// Cálculos automáticos
  const calculations = useMemo(() => {
    const jabas = Number.parseFloat(formData.numeroJabas) || 0
    const peso = Number.parseFloat(formData.pesoBrutoTotal) || 0
    const precio = Number.parseFloat(formData.precioKg) || 0

const pesoPromedioPorJaba = jabas > 0 ? peso / jabas : 0
    const valorTotal = peso * precio
    const valorPorJaba = jabas > 0 ? valorTotal / jabas : 0

return {
      pesoPromedioPorJaba: pesoPromedioPorJaba.toFixed(2),
      valorTotal: valorTotal.toFixed(2),
      valorPorJaba: valorPorJaba.toFixed(2),
    }
  }, [formData.numeroJabas, formData.pesoBrutoTotal, formData.precioKg])

// Manejar selección de proveedor
  const handleSelectProveedor = (proveedor: any) => {
    setSelectedProveedor(proveedor)
    setSearchTerm(proveedor.nombre_completo || "")
    setShowResults(false)
  }

// Manejar cambios en el formulario
  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => {
      const newData = { ...prev, [field]: value }

// Si cambia el producto, resetear la categoría
      if (field === "producto") {
        newData.categoria = ""
      }

return newData
    })
  }

// Registrar nuevo lote
  const handleSubmitLote = async () => {
    if (
      !selectedProveedor ||
      !formData.producto ||
      !formData.categoria ||
      !formData.numeroJabas ||
      !formData.pesoBrutoTotal
    ) {
      alert("Por favor complete todos los campos obligatorios")
      return
    }

try {
      await createLote({
        codigo: formData.numeroJabas.toString(),
        productor_id: selectedProveedor.id,
        producto: formData.producto,
        categoria: formData.categoria,
        numero_jabas: Number.parseInt(formData.numeroJabas),
        peso_bruto: Number.parseFloat(formData.pesoBrutoTotal),
        peso_neto: Number.parseFloat(formData.pesoBrutoTotal),
        precio_kg: Number.parseFloat(formData.precioKg) || 0,
        fecha_recepcion: new Date().toISOString().split("T")[0],
        estado: "pendiente",
        observaciones: formData.observaciones,
      })

alert("Lote registrado exitosamente")

// Limpiar formulario
      setFormData({
        producto: "",
        categoria: "",
        numeroJabas: "",
        pesoBrutoTotal: "",
        precioKg: "",
        modalidad: "",
        origen: "",
        transportista: "",
        placa: "",
        observaciones: "",
      })
      setSelectedProveedor(null)
      setSearchTerm("")
    } catch (error) {
      console.error("Error al registrar lote:", error)
      alert("Error al registrar el lote")
    }
  }

// Crear nuevo proveedor
  const handleCreateProveedor = async () => {
    // Implementación para crear nuevo proveedor
  }

// Obtener nombre del producto para mostrar
  const getProductoNombre = (productoKey: string) => {
    return productosConfig[productoKey as keyof typeof productosConfig]?.nombre || productoKey
  }

// Obtener icono del producto
  const getProductoIcono = (productoKey: string) => {
    return productosConfig[productoKey as keyof typeof productosConfig]?.icono || "📦"
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Ingreso de Lotes Mejorado</h1>
          <p className="text-gray-600 mt-1">Sistema especializado para jengibre y cúrcuma con cálculos automáticos</p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-2xl">🫚</span>
          <span className="text-2xl">🟡</span>
          <Calculator className="h-8 w-8 text-blue-600" />
        </div>
      </div>

<Tabs defaultValue="nuevo-lote" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="nuevo-lote" className="flex items-center gap-2">
            <Plus className="h-4 w-4" />
            Nuevo Lote
          </TabsTrigger>
          <TabsTrigger value="lista-lotes" className="flex items-center gap-2">
            <Package className="h-4 w-4" />
            Lista de Lotes
          </TabsTrigger>
        </TabsList>

<TabsContent value="nuevo-lote" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Formulario Principal */}
            <div className="space-y-6">
              {/* Búsqueda de Proveedor */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Search className="h-5 w-5" />
                    Búsqueda de Proveedor
                  </CardTitle>
                  <CardDescription>Busque por nombre, apellido o documento</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="🔍 Buscar proveedor..."
                      value={searchTerm}
                      onChange={(e) => {
                        setSearchTerm(e.target.value)
                        setShowResults(e.target.value.length > 0)
                      }}
                      className="pl-10"
                    />
                  </div>

{/* Resultados de búsqueda */}
                  {showResults && filteredProveedores.length > 0 && (
                    <div className="border rounded-lg bg-white shadow-sm max-h-48 overflow-y-auto">
                      {filteredProveedores.map((proveedor) => (
                        <div
                          key={proveedor.id}
                          className="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
                          onClick={() => handleSelectProveedor(proveedor)}
                        >
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="font-medium">{proveedor.nombre_completo}</p>
                              <p className="text-sm text-gray-500">
                                📄 Doc: {proveedor.documento_identidad} • 📞 {proveedor.telefono}
                              </p>
                            </div>
                            <Badge variant="outline">{proveedor.tipo_persona || "Persona"}</Badge>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

{selectedProveedor && (
                    <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <CheckCircle className="h-4 w-4 text-green-600" />
                        <span className="font-medium text-green-800">Proveedor Seleccionado</span>
                      </div>
                      <p className="text-sm font-medium">✅ {selectedProveedor.nombre_completo}</p>
                      <p className="text-xs text-gray-600">
                        📄 Doc: {selectedProveedor.documento_identidad} | 📞 Tel: {selectedProveedor.telefono}
                      </p>
                    </div>
                  )}

{/* Opción para crear nuevo proveedor */}
                  {showResults && filteredProveedores.length === 0 && searchTerm.length > 0 && (
                    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                      <p className="text-sm text-blue-800 mb-2">No se encontraron proveedores</p>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setShowNewProveedorForm(true)}
                        className="text-blue-600 border-blue-300"
                      >
                        <Plus className="h-4 w-4 mr-1" />
                        Crear Nuevo Proveedor
                      </Button>
                    </div>
                  )}
                </CardContent>
              </Card>

{/* Información del Lote */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Package className="h-5 w-5" />
                    Información del Lote
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="producto">Producto *</Label>
                      <Select value={formData.producto} onValueChange={(value) => handleInputChange("producto", value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar producto" />
                        </SelectTrigger>
                        <SelectContent>
                          {Object.entries(productosConfig).map(([key, config]) => (
                            <SelectItem key={key} value={key}>
                              {config.icono} {config.nombre}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="categoria">Categoría *</Label>
                      <Select
                        value={formData.categoria}
                        onValueChange={(value) => handleInputChange("categoria", value)}
                        disabled={!formData.producto}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar categoría" />
                        </SelectTrigger>
                        <SelectContent>
                          {categoriasDisponibles.map((categoria) => (
                            <SelectItem key={categoria} value={categoria}>
                              {categoria}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="modalidad">Modalidad *</Label>
                      <Select
                        value={formData.modalidad}
                        onValueChange={(value) => handleInputChange("modalidad", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar modalidad" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Carga Cerrada">💰 Carga Cerrada</SelectItem>
                          <SelectItem value="Por Proceso">⏳ Por Proceso</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="precioKg">Precio por Kg (S/)</Label>
                      <Input
                        id="precioKg"
                        type="number"
                        step="0.01"
                        placeholder="0.00"
                        value={formData.precioKg}
                        onChange={(e) => handleInputChange("precioKg", e.target.value)}
                        disabled={formData.modalidad === "Por Proceso"}
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="numeroJabas">Número de Jabas *</Label>
                      <Input
                        id="numeroJabas"
                        type="number"
                        placeholder="0"
                        value={formData.numeroJabas}
                        onChange={(e) => handleInputChange("numeroJabas", e.target.value)}
                        className="border-blue-200 focus:border-blue-400"
                      />
                    </div>
                    <div>
                      <Label htmlFor="pesoBrutoTotal">Peso Bruto Total (kg) *</Label>
                      <Input
                        id="pesoBrutoTotal"
                        type="number"
                        step="0.01"
                        placeholder="0.00"
                        value={formData.pesoBrutoTotal}
                        onChange={(e) => handleInputChange("pesoBrutoTotal", e.target.value)}
                        className="border-blue-200 focus:border-blue-400"
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="origen">Origen/Procedencia</Label>
                      <Input
                        id="origen"
                        placeholder="Ej: Fundo San José, Tingo María"
                        value={formData.origen}
                        onChange={(e) => handleInputChange("origen", e.target.value)}
                      />
                    </div>
                    <div>
                      <Label htmlFor="transportista">Transportista</Label>
                      <Input
                        id="transportista"
                        placeholder="Nombre del transportista"
                        value={formData.transportista}
                        onChange={(e) => handleInputChange("transportista", e.target.value)}
                      />
                    </div>
                  </div>

<div>
                    <Label htmlFor="placa">Placa del Vehículo</Label>
                    <Input
                      id="placa"
                      placeholder="ABC-123"
                      value={formData.placa}
                      onChange={(e) => handleInputChange("placa", e.target.value.toUpperCase())}
                    />
                  </div>

<div>
                    <Label htmlFor="observaciones">Observaciones</Label>
                    <Textarea
                      id="observaciones"
                      placeholder="Observaciones adicionales sobre el lote..."
                      value={formData.observaciones}
                      onChange={(e) => handleInputChange("observaciones", e.target.value)}
                      rows={3}
                    />
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Panel de Cálculos */}
            <div className="space-y-6">
              <Card className="bg-gradient-to-br from-blue-50 to-indigo-100 border-blue-200">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-blue-800">
                    <Calculator className="h-5 w-5" />🧮 Cálculos Automáticos
                  </CardTitle>
                  <CardDescription className="text-blue-600">Valores calculados en tiempo real</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Datos Base */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-white p-3 rounded-lg border">
                      <div className="flex items-center gap-2 mb-1">
                        <Package className="h-4 w-4 text-gray-600" />
                        <span className="text-sm font-medium text-gray-600">📦 Número de Jabas</span>
                      </div>
                      <p className="text-2xl font-bold text-gray-900">{formData.numeroJabas || "0"}</p>
                    </div>
                    <div className="bg-white p-3 rounded-lg border">
                      <div className="flex items-center gap-2 mb-1">
                        <Scale className="h-4 w-4 text-gray-600" />
                        <span className="text-sm font-medium text-gray-600">⚖️ Peso Bruto Total</span>
                      </div>
                      <p className="text-2xl font-bold text-gray-900">{formData.pesoBrutoTotal || "0"} kg</p>
                    </div>
                  </div>

{/* Peso Promedio por Jaba */}
                  <div className="bg-white p-4 rounded-lg border">
                    <div className="flex items-center gap-2 mb-2">
                      <Calculator className="h-4 w-4 text-blue-600" />
                      <span className="text-sm font-medium text-blue-600">📏 Peso Promedio por Jaba</span>
                    </div>
                    <p className="text-xl font-bold text-blue-800">{calculations.pesoPromedioPorJaba} kg</p>
                    <p className="text-xs text-gray-500 mt-1">
                      {formData.pesoBrutoTotal && formData.numeroJabas
                        ? `${formData.pesoBrutoTotal} kg ÷ ${formData.numeroJabas} jabas`
                        : "Ingrese peso y número de jabas"}
                    </p>
                  </div>

{/* Cálculos Financieros para Carga Cerrada */}
                  {formData.modalidad === "Carga Cerrada" && (
                    <>
                      <div className="bg-white p-4 rounded-lg border">
                        <div className="flex items-center gap-2 mb-2">
                          <DollarSign className="h-4 w-4 text-green-600" />
                          <span className="text-sm font-medium text-green-600">💵 Precio por Kilogramo</span>
                        </div>
                        <p className="text-xl font-bold text-green-800">S/ {formData.precioKg || "0.00"}</p>
                      </div>

<div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg border border-green-200">
                        <div className="flex items-center gap-2 mb-2">
                          <Calculator className="h-4 w-4 text-green-600" />
                          <span className="text-sm font-medium text-green-600">💎 Valor Total del Lote</span>
                        </div>
                        <p className="text-3xl font-bold text-green-800">S/ {calculations.valorTotal}</p>
                        <p className="text-xs text-gray-600 mt-1">
                          {formData.pesoBrutoTotal && formData.precioKg
                            ? `${formData.pesoBrutoTotal} kg × S/ ${formData.precioKg}`
                            : "Ingrese peso y precio"}
                        </p>
                      </div>

<div className="bg-white p-4 rounded-lg border">
                        <div className="flex items-center gap-2 mb-2">
                          <Package className="h-4 w-4 text-purple-600" />
                          <span className="text-sm font-medium text-purple-600">📦 Valor por Jaba</span>
                        </div>
                        <p className="text-xl font-bold text-purple-800">S/ {calculations.valorPorJaba}</p>
                        <p className="text-xs text-gray-500 mt-1">
                          {calculations.valorTotal !== "0.00" && formData.numeroJabas
                            ? `S/ ${calculations.valorTotal} ÷ ${formData.numeroJabas} jabas`
                            : "Calculado automáticamente"}
                        </p>
                      </div>

{/* Resumen Final */}
                      <div className="bg-gradient-to-r from-blue-100 to-green-100 p-4 rounded-lg border border-blue-200">
                        <h4 className="font-bold text-blue-800 mb-3 flex items-center gap-2">📊 Resumen del Lote</h4>
                        <div className="grid grid-cols-3 gap-4 text-sm">
                          <div className="text-center">
                            <div className="text-2xl font-bold text-blue-600">{formData.numeroJabas || "0"}</div>
                            <div className="text-gray-600">Jabas</div>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-green-600">{formData.pesoBrutoTotal || "0"}</div>
                            <div className="text-gray-600">Kg Total</div>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-purple-600">S/ {calculations.valorTotal}</div>
                            <div className="text-gray-600">Valor Total</div>
                          </div>
                        </div>
                      </div>
                    </>
                  )}

{/* Alerta para modalidad Por Proceso */}
                  {formData.modalidad === "Por Proceso" && (
                    <Alert>
                      <Info className="h-4 w-4" />
                      <AlertDescription>
                        ⏳ Para modalidad "Por Proceso", el valor se calculará después del procesamiento según los
                        rendimientos obtenidos en cada categoría.
                      </AlertDescription>
                    </Alert>
                  )}

{/* Información del producto seleccionado */}
                  {formData.producto && (
                    <div className="bg-white p-4 rounded-lg border border-orange-200">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-lg">{getProductoIcono(formData.producto)}</span>
                        <span className="font-medium text-orange-800">{getProductoNombre(formData.producto)}</span>
                        {formData.categoria && (
                          <Badge variant="outline" className="text-orange-600 border-orange-300">
                            {formData.categoria}
                          </Badge>
                        )}
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>

{/* Botón de registro */}
              <Button
                onClick={handleSubmitLote}
                className="w-full h-12 text-lg bg-green-600 hover:bg-green-700"
                disabled={
                  !selectedProveedor ||
                  !formData.producto ||
                  !formData.categoria ||
                  !formData.numeroJabas ||
                  !formData.pesoBrutoTotal
                }
              >
                <Plus className="h-5 w-5 mr-2" />
                Registrar Lote
              </Button>
            </div>
          </div>
        </TabsContent>

<TabsContent value="lista-lotes">
          <Card>
            <CardHeader>
              <CardTitle>Lotes Registrados</CardTitle>
              <CardDescription>Lista completa de lotes de jengibre y cúrcuma ingresados al sistema</CardDescription>
            </CardHeader>
            <CardContent>
              {loadingLotes ? (
                <div className="text-center py-4">Cargando lotes...</div>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>ID</TableHead>
                      <TableHead>Proveedor</TableHead>
                      <TableHead>Producto</TableHead>
                      <TableHead>Categoría</TableHead>
                      <TableHead>Jabas</TableHead>
                      <TableHead>Peso (kg)</TableHead>
                      <TableHead>Precio/kg</TableHead>
                      <TableHead>Total</TableHead>
                      <TableHead>Modalidad</TableHead>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {lotes.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={12} className="text-center py-4">
                          No hay lotes registrados
                        </TableCell>
                      </TableRow>
                    ) : (
                      lotes.map((lote) => (
                        <TableRow key={lote.id}>
                          <TableCell className="font-medium">{lote.id}</TableCell>
                          <TableCell>{lote.proveedor}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <span>{getProductoIcono(lote.producto)}</span>
                              <span>{getProductoNombre(lote.producto)}</span>
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant="outline">{lote.categoria}</Badge>
                          </TableCell>
                          <TableCell className="text-center">{lote.numero_jabas}</TableCell>
                          <TableCell className="text-right">{lote.peso_bruto} kg</TableCell>
                          <TableCell className="text-right">S/ {lote.precio_kg.toFixed(2)}</TableCell>
                          <TableCell className="font-medium text-right">
                            {lote.modalidad === "Carga Cerrada" ? (
                              <span className="text-green-600">S/ {(lote.peso_bruto * lote.precio_kg).toFixed(2)}</span>
                            ) : (
                              <span className="text-gray-500">Por calcular</span>
                            )}
                          </TableCell>
                          <TableCell>
                            <Badge variant={lote.modalidad === "Carga Cerrada" ? "default" : "secondary"}>
                              {lote.modalidad}
                            </Badge>
                          </TableCell>
                          <TableCell>{lote.fecha_recepcion}</TableCell>
                          <TableCell>
                            <Badge variant={lote.estado === "pendiente" ? "default" : "secondary"}>{lote.estado}</Badge>
                          </TableCell>
                          <TableCell>
                            <Dialog>
                              <DialogTrigger asChild>
                                <Button variant="outline" size="sm">
                                  <Eye className="h-4 w-4" />
                                </Button>
                              </DialogTrigger>
                              <DialogContent className="max-w-2xl">
                                <DialogHeader>
                                  <DialogTitle>Detalle del Lote {lote.id}</DialogTitle>
                                  <DialogDescription>Información completa del lote registrado</DialogDescription>
                                </DialogHeader>
                                <div className="space-y-4">
                                  <div className="grid grid-cols-2 gap-4">
                                    <div>
                                      <Label>Proveedor</Label>
                                      <p className="font-medium">{lote.proveedor}</p>
                                    </div>
                                    <div>
                                      <Label>Producto</Label>
                                      <p className="font-medium flex items-center gap-2">
                                        <span>{getProductoIcono(lote.producto)}</span>
                                        {getProductoNombre(lote.producto)} - {lote.categoria}
                                      </p>
                                    </div>
                                  </div>
                                  <div className="grid grid-cols-3 gap-4">
                                    <div>
                                      <Label>Jabas</Label>
                                      <p className="font-medium">{lote.numero_jabas}</p>
                                    </div>
                                    <div>
                                      <Label>Peso Total</Label>
                                      <p className="font-medium">{lote.peso_bruto} kg</p>
                                    </div>
                                    <div>
                                      <Label>Peso/Jaba</Label>
                                      <p className="font-medium">
                                        {(lote.peso_bruto / lote.numero_jabas).toFixed(2)} kg
                                      </p>
                                    </div>
                                  </div>
                                  {lote.modalidad === "Carga Cerrada" && (
                                    <div className="grid grid-cols-3 gap-4">
                                      <div>
                                        <Label>Precio por kg</Label>
                                        <p className="font-medium">S/ {lote.precio_kg.toFixed(2)}</p>
                                      </div>
                                      <div>
                                        <Label>Valor Total</Label>
                                        <p className="font-bold text-green-600">
                                          S/ {(lote.peso_bruto * lote.precio_kg).toFixed(2)}
                                        </p>
                                      </div>
                                      <div>
                                        <Label>Valor por Jaba</Label>
                                        <p className="font-medium">
                                          S/ {((lote.peso_bruto * lote.precio_kg) / lote.numero_jabas).toFixed(2)}
                                        </p>
                                      </div>
                                    </div>
                                  )}
                                </div>
                              </DialogContent>
                            </Dialog>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Modal para crear nuevo proveedor */}
      <Dialog open={showNewProveedorForm} onOpenChange={setShowNewProveedorForm}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>➕ Crear Nuevo Proveedor</DialogTitle>
            <DialogDescription>Complete la información del nuevo proveedor</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="nombres">Nombres *</Label>
                <Input
                  id="nombres"
                  value={newProveedor.nombres}
                  onChange={(e) => setNewProveedor((prev) => ({ ...prev, nombres: e.target.value }))}
                  placeholder="Nombres del proveedor"
                  className="border-green-200 focus:border-green-400"
                />
              </div>
              <div>
                <Label htmlFor="apellidos">Apellidos *</Label>
                <Input
                  id="apellidos"
                  value={newProveedor.apellidos}
                  onChange={(e) => setNewProveedor((prev) => ({ ...prev, apellidos: e.target.value }))}
                  placeholder="Apellidos del proveedor"
                  className="border-green-200 focus:border-green-400"
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="documento">Documento *</Label>
                <Input
                  id="documento"
                  value={newProveedor.documento}
                  onChange={(e) => setNewProveedor((prev) => ({ ...prev, documento: e.target.value }))}
                  placeholder="DNI o documento"
                  className="border-green-200 focus:border-green-400"
                />
              </div>
              <div>
                <Label htmlFor="telefono">Teléfono *</Label>
                <Input
                  id="telefono"
                  value={newProveedor.telefono}
                  onChange={(e) => setNewProveedor((prev) => ({ ...prev, telefono: e.target.value }))}
                  placeholder="Número de teléfono"
                  className="border-green-200 focus:border-green-400"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="direccion">Dirección</Label>
              <Input
                id="direccion"
                value={newProveedor.direccion}
                onChange={(e) => setNewProveedor((prev) => ({ ...prev, direccion: e.target.value }))}
                placeholder="Dirección completa"
                className="border-green-200 focus:border-green-400"
              />
            </div>
            <div>
              <Label htmlFor="tipo">Tipo</Label>
              <Select
                value={newProveedor.tipo}
                onValueChange={(value) => setNewProveedor((prev) => ({ ...prev, tipo: value }))}
              >
                <SelectTrigger className="border-green-200 focus:border-green-400">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Productor">👨‍🌾 Productor</SelectItem>
                  <SelectItem value="Acopiador">📦 Acopiador</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex gap-2 pt-4">
              <Button onClick={handleCreateProveedor} className="flex-1 bg-green-600 hover:bg-green-700">
                <Plus className="h-4 w-4 mr-2" />
                Crear Proveedor
              </Button>
              <Button variant="outline" onClick={() => setShowNewProveedorForm(false)}>
                Cancelar
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]php:file="backend/controllers/VentasClientesController.php" isMerged="true"
<?php
class VentasClientesController {
    private $conn;
    private $table = "ventas_clientes";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'pendientes') {
                    $this->getPendientes();
                } else if ($action === 'resumen') {
                    $this->getResumen();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT vc.*, p.nombre_completo as cliente_nombre, p.telefono, p.email,
                  (SELECT SUM(monto) FROM pagos_venta WHERE venta_id = vc.id) as pagado
                  FROM " . $this->table . " vc
                  LEFT JOIN personas p ON vc.cliente_id = p.id
                  ORDER BY vc.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT vc.*, p.nombre_completo as cliente_nombre, p.documento_identidad,
                  p.telefono, p.email, p.direccion
                  FROM " . $this->table . " vc
                  LEFT JOIN personas p ON vc.cliente_id = p.id
                  WHERE vc.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getPendientes() {
        $query = "SELECT vc.*, p.nombre_completo as cliente_nombre,
                  (SELECT SUM(monto) FROM pagos_venta WHERE venta_id = vc.id) as pagado,
                  (vc.total - COALESCE((SELECT SUM(monto) FROM pagos_venta WHERE venta_id = vc.id), 0)) as saldo
                  FROM " . $this->table . " vc
                  LEFT JOIN personas p ON vc.cliente_id = p.id
                  WHERE vc.estado IN ('pendiente', 'parcial')
                  ORDER BY vc.fecha_venta DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getResumen() {
        $query = "SELECT 
                  COUNT(*) as total_ventas,
                  SUM(CASE WHEN estado = 'pagado' THEN 1 ELSE 0 END) as ventas_pagadas,
                  SUM(CASE WHEN estado IN ('pendiente', 'parcial') THEN 1 ELSE 0 END) as ventas_pendientes,
                  SUM(total) as total_ventas_monto,
                  SUM(COALESCE((SELECT SUM(monto) FROM pagos_venta WHERE venta_id = vc.id), 0)) as total_pagado,
                  SUM(total - COALESCE((SELECT SUM(monto) FROM pagos_venta WHERE venta_id = vc.id), 0)) as total_por_cobrar
                  FROM " . $this->table . " vc";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $clienteId = $data->cliente_id ?? null;
        $fechaVenta = $data->fecha_venta ?? date('Y-m-d');
        $cantidad = $data->cantidad ?? 0;
        $precioUnitario = $data->precio_unitario ?? 0;
        $total = $cantidad * $precioUnitario;
        $estado = 'pendiente';
        $descripcion = $data->descripcion ?? '';
        
        $query = "INSERT INTO " . $this->table . " 
                  (cliente_id, fecha_venta, cantidad, precio_unitario, total, estado, descripcion)
                  VALUES (:cliente_id, :fecha_venta, :cantidad, :precio_unitario, :total, :estado, :descripcion)";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':cliente_id', $clienteId);
        $stmt->bindParam(':fecha_venta', $fechaVenta);
        $stmt->bindParam(':cantidad', $cantidad);
        $stmt->bindParam(':precio_unitario', $precioUnitario);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':descripcion', $descripcion);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Venta creada", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear venta"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $clienteId = $data->cliente_id ?? null;
        $cantidad = $data->cantidad ?? 0;
        $precioUnitario = $data->precio_unitario ?? 0;
        $total = $cantidad * $precioUnitario;
        $estado = $data->estado ?? 'pendiente';
        $descripcion = $data->descripcion ?? '';
        
        $query = "UPDATE " . $this->table . " SET 
                  cliente_id = :cliente_id,
                  cantidad = :cantidad,
                  precio_unitario = :precio_unitario,
                  total = :total,
                  estado = :estado,
                  descripcion = :descripcion
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':cliente_id', $clienteId);
        $stmt->bindParam(':cantidad', $cantidad);
        $stmt->bindParam(':precio_unitario', $precioUnitario);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':descripcion', $descripcion);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Venta actualizada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar venta"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Venta eliminada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar venta"]);
        }
    }
}
[V0_FILE]php:file="backend/controllers/ControlRentabilidadController.php" isMerged="true"
<?php
class ControlRentabilidadController {
    private $conn;
    private $table = "control_rentabilidad";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'periodo') {
                    $this->getByPeriodo();
                } else if ($action === 'comparativa') {
                    $this->getComparativa();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->calcularRentabilidad();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT * FROM " . $this->table . " ORDER BY periodo DESC LIMIT 12";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getByPeriodo() {
        $data = json_decode(file_get_contents("php://input"));
        $periodo = $data->periodo ?? date('Y-m');
        
        $query = "SELECT * FROM " . $this->table . " WHERE periodo = :periodo";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':periodo', $periodo);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getComparativa() {
        $query = "SELECT periodo, ingresos_totales, costos_totales, ganancia_neta, margen_porcentaje
                  FROM " . $this->table . " 
                  ORDER BY periodo DESC LIMIT 6";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function calcularRentabilidad() {
        $data = json_decode(file_get_contents("php://input"));
        $periodo = $data->periodo ?? date('Y-m');
        
        // Calculate ingresos from ventas
        $queryIngresos = "SELECT COALESCE(SUM(total), 0) as total FROM ventas_clientes 
                         WHERE DATE_FORMAT(fecha_venta, '%Y-%m') = :periodo";
        $stmtIngresos = $this->conn->prepare($queryIngresos);
        $stmtIngresos->bindParam(':periodo', $periodo);
        $stmtIngresos->execute();
        $ingresos = $stmtIngresos->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
        
        // Calculate costos from costos_fijos + liquidaciones
        $queryCostos = "SELECT COALESCE(SUM(monto), 0) as total FROM costos_fijos 
                       WHERE DATE_FORMAT(fecha_inicio, '%Y-%m') <= :periodo 
                       AND (fecha_fin IS NULL OR DATE_FORMAT(fecha_fin, '%Y-%m') >= :periodo)";
        $stmtCostos = $this->conn->prepare($queryCostos);
        $stmtCostos->bindParam(':periodo', $periodo);
        $stmtCostos->execute();
        $costosFijos = $stmtCostos->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
        
        // Add liquidation costs
        $queryCostosVar = "SELECT COALESCE(SUM(total_neto), 0) as total FROM liquidaciones 
                          WHERE DATE_FORMAT(fecha_liquidacion, '%Y-%m') = :periodo";
        $stmtCostosVar = $this->conn->prepare($queryCostosVar);
        $stmtCostosVar->bindParam(':periodo', $periodo);
        $stmtCostosVar->execute();
        $costosVariables = $stmtCostosVar->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
        
        $costosTotales = $costosFijos + $costosVariables;
        $gananciaNeta = $ingresos - $costosTotales;
        $margenPorcentaje = $ingresos > 0 ? ($gananciaNeta / $ingresos) * 100 : 0;
        
        $query = "INSERT INTO " . $this->table . " 
                  (periodo, ingresos_totales, costos_totales, ganancia_neta, margen_porcentaje)
                  VALUES (:periodo, :ingresos, :costos, :ganancia, :margen)
                  ON DUPLICATE KEY UPDATE
                  ingresos_totales = :ingresos,
                  costos_totales = :costos,
                  ganancia_neta = :ganancia,
                  margen_porcentaje = :margen";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':periodo', $periodo);
        $stmt->bindParam(':ingresos', $ingresos);
        $stmt->bindParam(':costos', $costosTotales);
        $stmt->bindParam(':ganancia', $gananciaNeta);
        $stmt->bindParam(':margen', $margenPorcentaje);
        
        if($stmt->execute()) {
            echo json_encode([
                "message" => "Rentabilidad calculada",
                "periodo" => $periodo,
                "ingresos_totales" => $ingresos,
                "costos_totales" => $costosTotales,
                "ganancia_neta" => $gananciaNeta,
                "margen_porcentaje" => $margenPorcentaje
            ]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al calcular rentabilidad"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $periodo = $data->periodo ?? date('Y-m');
        $ingresos = $data->ingresos_totales ?? 0;
        $costos = $data->costos_totales ?? 0;
        $ganancia = $ingresos - $costos;
        $margen = $ingresos > 0 ? ($ganancia / $ingresos) * 100 : 0;
        
        $query = "UPDATE " . $this->table . " SET 
                  ingresos_totales = :ingresos,
                  costos_totales = :costos,
                  ganancia_neta = :ganancia,
                  margen_porcentaje = :margen
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':ingresos', $ingresos);
        $stmt->bindParam(':costos', $costos);
        $stmt->bindParam(':ganancia', $ganancia);
        $stmt->bindParam(':margen', $margen);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Rentabilidad actualizada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Registro eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar"]);
        }
    }
}
[V0_FILE]typescriptreact:file="app/ventas-clientes/page.tsx" isMerged="true"
import { VentasClientes } from "@/components/ventas-clientes"

export const metadata = {
  title: "Ventas a Clientes",
  description: "Gestión de ventas y cobros a clientes",
}

export default function Page() {
  return <VentasClientes />
}
[V0_FILE]typescriptreact:file="app/control-rentabilidad/page.tsx" isMerged="true"
import { ControlRentabilidadModule } from "@/components/control-rentabilidad-module"

export const metadata = {
  title: "Control de Rentabilidad",
  description: "Análisis de rentabilidad del negocio",
}

export default function Page() {
  return <ControlRentabilidadModule />
}
[V0_FILE]typescriptreact:file="app/costos-fijos/page.tsx" isMerged="true"
import { CostosFijosModule } from "@/components/costos-fijos-module"

export const metadata = {
  title: "Costos Fijos",
  description: "Gestión de costos operativos fijos",
}

export default function Page() {
  return <CostosFijosModule />
}
[V0_FILE]php:file="backend/controllers/CostosFijosController.php" isQuickEdit="true" isMerged="true"
<?php
require_once 'BaseController.php';

class CostosFijosController extends BaseController {
    public function index() {
        $stmt = $this->db->query("
            SELECT * FROM costos_fijos 
            ORDER BY created_at DESC
        ");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

public function show($id) {
        $stmt = $this->db->prepare("SELECT * FROM costos_fijos WHERE id = ?");
        $stmt->execute([$id]);
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

public function create($data) {
        $stmt = $this->db->prepare("
            INSERT INTO costos_fijos (
                concepto, categoria, monto, periodo
            ) VALUES (?, ?, ?, ?)
        ");
        
        $result = $stmt->execute([
            $data['concepto'],
            $data['categoria'],
            $data['monto'],
            $data['periodo'] ?? 'mensual'
        ]);

return $result ? $this->db->lastInsertId() : false;
    }

public function update($id, $data) {
        $fields = [];
        $values = [];

foreach ($data as $key => $value) {
            if ($key !== 'id') {
                $fields[] = "$key = ?";
                $values[] = $value;
            }
        }

$values[] = $id;
        $sql = "UPDATE costos_fijos SET " . implode(', ', $fields) . " WHERE id = ?";
        $stmt = $this->db->prepare($sql);
        return $stmt->execute($values);
    }

public function delete($id) {
        $stmt = $this->db->prepare("DELETE FROM costos_fijos WHERE id = ?");
        return $stmt->execute([$id]);
    }

public function getTotalMensual() {
        $stmt = $this->db->query("
            SELECT SUM(monto) as total FROM costos_fijos WHERE periodo = 'mensual'
        ");
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }

public function getPorCategoria() {
        $stmt = $this->db->query("
            SELECT categoria, SUM(monto) as total_categoria, COUNT(*) as cantidad
            FROM costos_fijos 
            WHERE activo = 1
            GROUP BY categoria
            ORDER BY total_categoria DESC
        ");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

public function getTotalActivo() {
        $hoy = date('Y-m-d');
        $stmt = $this->db->prepare("
            SELECT SUM(monto) as total FROM costos_fijos 
            WHERE activo = 1 
            AND fecha_inicio <= ? 
            AND (fecha_fin IS NULL OR fecha_fin >= ?)
        ");
        $stmt->execute([$hoy, $hoy]);
        return $stmt->fetch(PDO::FETCH_ASSOC);
    }
}
[V0_FILE]typescriptreact:file="components/costos-fijos-module.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip, BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts"
import { Plus, Trash2, Edit, AlertCircle, Loader2 } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { API_ENDPOINTS } from "@/lib/config/api"
import { ApiService } from "@/lib/services/api-service"

interface CostoFijo {
  id: number
  categoria: string
  descripcion: string
  monto: number
  frecuencia: "diario" | "semanal" | "mensual" | "anual"
  fecha_inicio: string
  fecha_fin?: string
  activo: boolean
}

const costosService = {
  getAll: async () => {
    const response = await ApiService.get<CostoFijo[]>(API_ENDPOINTS.COSTOS_FIJOS)
    return Array.isArray(response) ? response : response?.data || []
  },
  create: async (data: any) => {
    return await ApiService.post<any>(API_ENDPOINTS.COSTOS_FIJOS, data)
  },
  update: async (id: number, data: any) => {
    return await ApiService.put<any>(API_ENDPOINTS.COSTOS_FIJOS_BY_ID(id), data)
  },
  delete: async (id: number) => {
    await ApiService.delete(API_ENDPOINTS.COSTOS_FIJOS_BY_ID(id))
  },
}

const CATEGORIAS_COLORES = {
  Infraestructura: "#8884d8",
  "Servicios Básicos": "#82ca9d",
  Personal: "#ffc658",
  Equipos: "#ff7c7c",
  Mantenimiento: "#8dd1e1",
  Otros: "#d084d0",
}

export function CostosFijosModule() {
  const { data: costos, loading, error, refresh, remove } = useApi(costosService)
  const [filtroCategoria, setFiltroCategoria] = useState("")

const costosActivos = (costos as CostoFijo[]).filter((c) => c.activo)
  const costosFiltrados = filtroCategoria
    ? costosActivos.filter((c) => c.categoria === filtroCategoria)
    : costosActivos

const totalMensual = costosFiltrados
    .filter((c) => c.frecuencia === "mensual")
    .reduce((sum, c) => sum + c.monto, 0)

const datosGrafico = Object.entries(
    costosActivos.reduce(
      (acc, c) => {
        acc[c.categoria] = (acc[c.categoria] || 0) + c.monto
        return acc
      },
      {} as Record<string, number>
    )
  ).map(([categoria, monto]) => ({
    name: categoria,
    value: monto,
  }))

const categorias = Array.from(new Set(costosActivos.map((c) => c.categoria)))

if (loading && costos.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2">Cargando costos fijos...</span>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold">Costos Fijos</h1>
          <p className="text-gray-600">Gestión de costos operativos</p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Nuevo Costo
        </Button>
      </div>

<Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <p className="text-sm text-gray-600 mb-2">Total Mensual</p>
              <p className="text-2xl font-bold">${totalMensual.toFixed(2)}</p>
            </div>
            <div>
              <p className="text-sm text-gray-600 mb-2">Cantidad de Costos</p>
              <p className="text-2xl font-bold">{costosFiltrados.length}</p>
            </div>
            <div>
              <p className="text-sm text-gray-600 mb-2">Categorías Activas</p>
              <p className="text-2xl font-bold">{categorias.length}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Distribución por Categoría</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={datosGrafico}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={({ name, value }) => `${name}: $${value.toFixed(0)}`}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {datosGrafico.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={CATEGORIAS_COLORES[entry.name as keyof typeof CATEGORIAS_COLORES] || "#999"} />
                ))}
              </Pie>
              <Tooltip formatter={(value) => `$${value.toFixed(2)}`} />
            </PieChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Filtrar por Categoría</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Button
              variant={filtroCategoria === "" ? "default" : "outline"}
              onClick={() => setFiltroCategoria("")}
            >
              Todas
            </Button>
            {categorias.map((cat) => (
              <Button
                key={cat}
                variant={filtroCategoria === cat ? "default" : "outline"}
                onClick={() => setFiltroCategoria(cat)}
              >
                {cat}
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Listado de Costos ({costosFiltrados.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Categoría</TableHead>
                <TableHead>Descripción</TableHead>
                <TableHead>Monto</TableHead>
                <TableHead>Frecuencia</TableHead>
                <TableHead>Fecha Inicio</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {costosFiltrados.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    No hay costos fijos registrados
                  </TableCell>
                </TableRow>
              ) : (
                costosFiltrados.map((costo) => (
                  <TableRow key={costo.id}>
                    <TableCell>
                      <Badge variant="secondary">{costo.categoria}</Badge>
                    </TableCell>
                    <TableCell>{costo.descripcion}</TableCell>
                    <TableCell className="font-bold">${costo.monto.toFixed(2)}</TableCell>
                    <TableCell>{costo.frecuencia}</TableCell>
                    <TableCell>{new Date(costo.fecha_inicio).toLocaleDateString()}</TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline">
                          <Edit className="h-3 w-3" />
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          className="text-red-600"
                          onClick={() => remove(costo.id)}
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/clasificacion-productos.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Plus, Calculator, Package, Save } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { kardexService } from "@/lib/services/kardex-service"
import type { Lote } from "@/lib/types"

interface ClasificacionData {
  exportable: number
  industrial: number
  descarte: number
}

export function ClasificacionProductos() {
  const { data: lotes } = useApi(lotesService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [clasificacion, setClasificacion] = useState<ClasificacionData>({
    exportable: 0,
    industrial: 0,
    descarte: 0,
  })

const totalClasificado = clasificacion.exportable + clasificacion.industrial + clasificacion.descarte
  const isValid = selectedLote && totalClasificado <= selectedLote.peso_bruto

const handleInputChange = (key: keyof ClasificacionData, value: number) => {
    setClasificacion((prev) => ({ ...prev, [key]: value }))
  }

const handleSaveClasificacion = async () => {
    if (!selectedLote || !isValid) return

try {
      await kardexService.registrarMovimiento({
        lote_id: selectedLote.id,
        tipo: "ajuste",
        cantidad: totalClasificado,
        fecha: new Date().toISOString().split("T")[0],
        concepto: `Clasificación: Exp ${clasificacion.exportable}kg, Ind ${clasificacion.industrial}kg, Desc ${clasificacion.descarte}kg`,
      })

await lotesService.update(selectedLote.id, {
        estado: "proceso",
      })

setIsDialogOpen(false)
      setSelectedLote(null)
      setClasificacion({ exportable: 0, industrial: 0, descarte: 0 })
    } catch (error) {
      console.error("Error al guardar clasificación:", error)
    }
  }

const lotesParaClasificar = (lotes as Lote[]).filter(
    (l) => l.estado === "pendiente" || l.estado === "proceso"
  )

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Clasificación de Productos</h2>
          <p className="text-muted-foreground">Clasifique los productos por categoría</p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nueva Clasificación
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Lotes Disponibles para Clasificar</CardTitle>
          <CardDescription>{lotesParaClasificar.length} lotes pendientes</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Código</TableHead>
                <TableHead>Productor</TableHead>
                <TableHead>Peso Bruto</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {lotesParaClasificar.map((lote) => (
                <TableRow key={lote.id}>
                  <TableCell className="font-medium">{lote.codigo}</TableCell>
                  <TableCell>{lote.productor_nombre || "N/A"}</TableCell>
                  <TableCell>{lote.peso_bruto} kg</TableCell>
                  <TableCell>
                    <Badge variant={lote.estado === "pendiente" ? "default" : "secondary"}>{lote.estado}</Badge>
                  </TableCell>
                  <TableCell>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => {
                        setSelectedLote(lote)
                        setIsDialogOpen(true)
                      }}
                    >
                      Clasificar
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Package className="h-5 w-5" />
              Clasificar Lote
            </DialogTitle>
          </DialogHeader>

{selectedLote && (
            <div className="space-y-6">
              <div className="bg-blue-50 p-4 rounded-lg">
                <p className="text-sm text-muted-foreground">Código Lote</p>
                <p className="font-semibold">{selectedLote.codigo}</p>
                <p className="text-sm text-muted-foreground mt-2">Peso Bruto Total</p>
                <p className="font-semibold">{selectedLote.peso_bruto} kg</p>
              </div>

<div className="space-y-4">
                <div>
                  <Label>Exportable (kg) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={clasificacion.exportable}
                    onChange={(e) => handleInputChange("exportable", Number(e.target.value))}
                  />
                </div>
                <div>
                  <Label>Industrial (kg) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={clasificacion.industrial}
                    onChange={(e) => handleInputChange("industrial", Number(e.target.value))}
                  />
                </div>
                <div>
                  <Label>Descarte (kg) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={clasificacion.descarte}
                    onChange={(e) => handleInputChange("descarte", Number(e.target.value))}
                  />
                </div>
              </div>

<Card className="bg-gray-50">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-muted-foreground">Total Clasificado:</span>
                    <span className="font-semibold">{totalClasificado.toFixed(2)} kg</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Diferencia:</span>
                    <span className={`font-semibold ${totalClasificado <= selectedLote.peso_bruto ? "text-green-600" : "text-red-600"}`}>
                      {(selectedLote.peso_bruto - totalClasificado).toFixed(2)} kg
                    </span>
                  </div>
                </CardContent>
              </Card>

<div className="flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => {
                    setIsDialogOpen(false)
                    setSelectedLote(null)
                  }}
                >
                  Cancelar
                </Button>
                <Button
                  onClick={handleSaveClasificacion}
                  disabled={!isValid}
                  className="flex-1"
                >
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Clasificación
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/kardex-view.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
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"
import { kardexService } from "@/lib/services/kardex-service"
import type { MovimientoKardex } from "@/lib/types"

export function KardexView() {
  const [movimientos, setMovimientos] = useState<MovimientoKardex[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const cargarMovimientos = async () => {
      try {
        const data = await kardexService.obtenerTodosLosMovimientos()
        setMovimientos(data)
      } catch (error) {
        console.error("Error al cargar kardex:", error)
      } finally {
        setLoading(false)
      }
    }

cargarMovimientos()
  }, [])

const getBadgeVariant = (tipo: string) => {
    switch (tipo) {
      case "entrada":
        return "default"
      case "salida":
        return "destructive"
      case "ajuste":
        return "secondary"
      default:
        return "outline"
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Kardex - Inventario de Lotes</CardTitle>
        <CardDescription>Histórico completo de movimientos de inventario</CardDescription>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="text-center py-4 text-muted-foreground">Cargando kardex...</div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Fecha</TableHead>
                <TableHead>Lote</TableHead>
                <TableHead>Tipo Movimiento</TableHead>
                <TableHead>Concepto</TableHead>
                <TableHead>Cantidad (kg)</TableHead>
                <TableHead>Saldo (kg)</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {movimientos.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4 text-muted-foreground">
                    No hay movimientos registrados
                  </TableCell>
                </TableRow>
              ) : (
                movimientos.map((mov) => (
                  <TableRow key={mov.id}>
                    <TableCell>{new Date(mov.fecha).toLocaleDateString()}</TableCell>
                    <TableCell className="font-medium">{mov.lote_codigo}</TableCell>
                    <TableCell>
                      <Badge variant={getBadgeVariant(mov.tipo)}>{mov.tipo}</Badge>
                    </TableCell>
                    <TableCell>{mov.concepto}</TableCell>
                    <TableCell className="text-right">{mov.cantidad.toFixed(2)}</TableCell>
                    <TableCell className="text-right font-semibold">{mov.saldo.toFixed(2)}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/liquidacion-integrada.tsx" isMerged="true"
"use client"

import { useState, useMemo } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
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 { Alert, AlertDescription } from "@/components/ui/alert"
import { Plus, Calculator, DollarSign, AlertCircle } from 'lucide-react'
import { usePersonas } from "@/lib/hooks/use-personas"
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { liquidacionesService } from "@/lib/services/liquidaciones-service"
import { adelantosService } from "@/lib/services/adelantos-service"
import type { Lote, Persona } from "@/lib/types"

export function LiquidacionIntegrada() {
  const { data: personas } = usePersonas()
  const { data: lotes } = useApi(lotesService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedProductor, setSelectedProductor] = useState<Persona | null>(null)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [precioUnitario, setPrecioUnitario] = useState(0)
  const [otrosDescuentos, setOtrosDescuentos] = useState(0)
  const [adelantosPendientes, setAdelantosPendientes] = useState<any[]>([])

const handleSelectProductor = async (productor: Persona) => {
    setSelectedProductor(productor)
    setSelectedLote(null)

const adelantos = await adelantosService.obtenerAdelantosPendientes(productor.id)
    setAdelantosPendientes(adelantos)
  }

const lotesDelProductor = useMemo(() => {
    if (!selectedProductor) return []
    return (lotes as Lote[]).filter(
      (l) => l.productor_id === selectedProductor.id && (l.estado === "proceso" || l.estado === "completado")
    )
  }, [selectedProductor, lotes])

const handleGenerateLiquidacion = async () => {
    if (!selectedLote || !selectedProductor || !precioUnitario) return

try {
      const valorBruto = selectedLote.peso_neto * precioUnitario
      const resultado = await liquidacionesService.criarLiquidacion({
        lote_id: selectedLote.id,
        lote_codigo: selectedLote.codigo,
        productor_id: selectedProductor.id,
        productor_nombre: selectedProductor.nombre_completo || "",
        valor_bruto: valorBruto,
        otros_descuentos: otrosDescuentos,
      })

// Close dialog and reset
      setIsDialogOpen(false)
      setSelectedProductor(null)
      setSelectedLote(null)
      setPrecioUnitario(0)
      setOtrosDescuentos(0)
    } catch (error) {
      console.error("Error generando liquidación:", error)
    }
  }

const productoresConLotes = (personas as Persona[]).filter((p) =>
    (lotes as Lote[]).some((l) => l.productor_id === p.id)
  )

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Liquidación de Lotes</h2>
          <p className="text-muted-foreground">Calcule y genere liquidaciones con descuentos automáticos</p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nueva Liquidación
        </Button>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Calculator className="h-5 w-5" />
              Generar Liquidación
            </DialogTitle>
          </DialogHeader>

<div className="space-y-6">
            <div className="space-y-2">
              <Label>Productor *</Label>
              <Select
                value={selectedProductor?.id.toString() || ""}
                onValueChange={(id) => {
                  const prod = productoresConLotes.find((p) => p.id.toString() === id)
                  if (prod) handleSelectProductor(prod)
                }}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar productor" />
                </SelectTrigger>
                <SelectContent>
                  {productoresConLotes.map((p) => (
                    <SelectItem key={p.id} value={p.id.toString()}>
                      {p.nombre_completo} - {p.documento_identidad}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{adelantosPendientes.length > 0 && (
              <Alert>
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>
                  Este productor tiene {adelantosPendientes.length} adelanto(s) pendiente(s) que será(n) descontado(s)
                  automáticamente
                </AlertDescription>
              </Alert>
            )}

{selectedProductor && (
              <>
                <div className="space-y-2">
                  <Label>Lote a Liquidar *</Label>
                  <Select
                    value={selectedLote?.id.toString() || ""}
                    onValueChange={(id) => {
                      const lote = lotesDelProductor.find((l) => l.id.toString() === id)
                      setSelectedLote(lote || null)
                    }}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar lote" />
                    </SelectTrigger>
                    <SelectContent>
                      {lotesDelProductor.map((lote) => (
                        <SelectItem key={lote.id} value={lote.id.toString()}>
                          {lote.codigo} - {lote.peso_neto} kg
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

{selectedLote && (
                  <>
                    <Card className="bg-blue-50">
                      <CardContent className="pt-6">
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <span className="text-muted-foreground">Peso Neto:</span>
                            <span className="font-semibold">{selectedLote.peso_neto} kg</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-muted-foreground">Precio Unitario:</span>
                            <span className="font-semibold">S/ {precioUnitario.toFixed(2)}</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

<div className="space-y-2">
                      <Label>Precio por Kg (S/) *</Label>
                      <Input
                        type="number"
                        step="0.01"
                        value={precioUnitario}
                        onChange={(e) => setPrecioUnitario(Number(e.target.value))}
                      />
                    </div>

<div className="space-y-2">
                      <Label>Otros Descuentos (S/)</Label>
                      <Input
                        type="number"
                        step="0.01"
                        value={otrosDescuentos}
                        onChange={(e) => setOtrosDescuentos(Number(e.target.value))}
                      />
                    </div>

<Card className="bg-green-50 border-green-200">
                      <CardContent className="pt-6">
                        <div className="space-y-2 text-sm">
                          <div className="flex justify-between font-semibold">
                            <span>Valor Bruto:</span>
                            <span>S/ {(selectedLote.peso_neto * precioUnitario).toFixed(2)}</span>
                          </div>
                          {adelantosPendientes.length > 0 && (
                            <div className="flex justify-between text-red-600">
                              <span>Descuento Adelantos:</span>
                              <span>
                                S/ {adelantosPendientes.reduce((sum, a) => sum + a.saldo_pendiente, 0).toFixed(2)}
                              </span>
                            </div>
                          )}
                          {otrosDescuentos > 0 && (
                            <div className="flex justify-between text-red-600">
                              <span>Otros Descuentos:</span>
                              <span>S/ {otrosDescuentos.toFixed(2)}</span>
                            </div>
                          )}
                          <div className="border-t border-green-200 pt-2 flex justify-between font-bold text-lg">
                            <span>Valor Neto:</span>
                            <span>
                              S/{" "}
                              {(
                                selectedLote.peso_neto * precioUnitario -
                                adelantosPendientes.reduce((sum, a) => sum + a.saldo_pendiente, 0) -
                                otrosDescuentos
                              ).toFixed(2)}
                            </span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

<Button onClick={handleGenerateLiquidacion} className="w-full">
                      <DollarSign className="mr-2 h-4 w-4" />
                      Generar Liquidación
                    </Button>
                  </>
                )}
              </>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pagos-productores.tsx" isMerged="true"
"use client"

import { useState, useMemo } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Plus, CreditCard, DollarSign, AlertCircle, CheckCircle } from 'lucide-react'
import { usePersonas } from "@/lib/hooks/use-personas"
import { useApi } from "@/lib/hooks/use-api"
import type { Persona } from "@/lib/types"

export function PagosProductores() {
  const { data: personas } = usePersonas()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedProductor, setSelectedProductor] = useState<Persona | null>(null)
  const [pagos, setPagos] = useState<any[]>([])
  const [formData, setFormData] = useState({
    monto: 0,
    metodoPago: "transferencia",
    referencia: "",
    observaciones: "",
  })

const productoresConDeuda = (personas as Persona[]).filter((p) => p.tipo === "productor" || p.roles?.includes("productor"))

const saldoPendiente = useMemo(() => {
    if (!selectedProductor) return 0
    // This would come from database in real scenario
    return Math.random() * 10000
  }, [selectedProductor])

const handleRegistrarPago = async () => {
    if (!selectedProductor || formData.monto <= 0) return

if (formData.monto > saldoPendiente) {
      alert("El monto del pago no puede exceder el saldo pendiente")
      return
    }

try {
      const nuevoPago = {
        id: Date.now(),
        productor_id: selectedProductor.id,
        productor_nombre: selectedProductor.nombre_completo,
        monto: formData.monto,
        fecha: new Date().toISOString().split("T")[0],
        metodo: formData.metodoPago,
        referencia: formData.referencia,
        estado: "realizado",
      }

setPagos([...pagos, nuevoPago])

// Reset form
      setFormData({ monto: 0, metodoPago: "transferencia", referencia: "", observaciones: "" })
      setIsDialogOpen(false)
      setSelectedProductor(null)
    } catch (error) {
      console.error("Error al registrar pago:", error)
    }
  }

const estadoSaldo = saldoPendiente > 0 ? "pendiente" : "cancelado"

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Pagos a Productores</h2>
          <p className="text-muted-foreground">Registre y controle los pagos realizados</p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Registrar Pago
        </Button>
      </div>

<div className="grid grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total Productores</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{productoresConDeuda.length}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Pagos Realizados</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">{pagos.length}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total Pagado</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">S/ {pagos.reduce((sum, p) => sum + p.monto, 0).toFixed(2)}</p>
          </CardContent>
        </Card>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <CreditCard className="h-5 w-5" />
              Registrar Pago a Productor
            </DialogTitle>
          </DialogHeader>

<div className="space-y-6">
            <div className="space-y-2">
              <Label>Productor *</Label>
              <Select
                value={selectedProductor?.id.toString() || ""}
                onValueChange={(id) => {
                  const prod = productoresConDeuda.find((p) => p.id.toString() === id)
                  setSelectedProductor(prod || null)
                }}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar productor" />
                </SelectTrigger>
                <SelectContent>
                  {productoresConDeuda.map((p) => (
                    <SelectItem key={p.id} value={p.id.toString()}>
                      {p.nombre_completo}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{selectedProductor && (
              <>
                {saldoPendiente > 0 && (
                  <Alert>
                    <AlertCircle className="h-4 w-4" />
                    <AlertTitle>Saldo Pendiente</AlertTitle>
                    <AlertDescription>S/ {saldoPendiente.toFixed(2)}</AlertDescription>
                  </Alert>
                )}

<div className="space-y-2">
                  <Label>Monto a Pagar (S/) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.monto || ""}
                    onChange={(e) => setFormData({ ...formData, monto: Number(e.target.value) })}
                  />
                </div>

<div className="space-y-2">
                  <Label>Método de Pago *</Label>
                  <Select value={formData.metodoPago} onValueChange={(v) => setFormData({ ...formData, metodoPago: v })}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="transferencia">Transferencia Bancaria</SelectItem>
                      <SelectItem value="efectivo">Efectivo</SelectItem>
                      <SelectItem value="cheque">Cheque</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label>Referencia (Nro. Comprobante)</Label>
                  <Input
                    value={formData.referencia}
                    onChange={(e) => setFormData({ ...formData, referencia: e.target.value })}
                  />
                </div>

<div className="space-y-2">
                  <Label>Observaciones</Label>
                  <Textarea
                    value={formData.observaciones}
                    onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                    rows={2}
                  />
                </div>

<div className="flex gap-2">
                  <Button variant="outline" onClick={() => setIsDialogOpen(false)} className="flex-1">
                    Cancelar
                  </Button>
                  <Button onClick={handleRegistrarPago} className="flex-1">
                    <CheckCircle className="mr-2 h-4 w-4" />
                    Registrar Pago
                  </Button>
                </div>
              </>
            )}
          </div>
        </DialogContent>
      </Dialog>

<Card>
        <CardHeader>
          <CardTitle>Historial de Pagos</CardTitle>
          <CardDescription>{pagos.length} pagos registrados</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Productor</TableHead>
                <TableHead>Fecha</TableHead>
                <TableHead>Monto</TableHead>
                <TableHead>Método</TableHead>
                <TableHead>Estado</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pagos.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-4 text-muted-foreground">
                    No hay pagos registrados
                  </TableCell>
                </TableRow>
              ) : (
                pagos.map((pago) => (
                  <TableRow key={pago.id}>
                    <TableCell className="font-medium">{pago.productor_nombre}</TableCell>
                    <TableCell>{pago.fecha}</TableCell>
                    <TableCell className="font-semibold">S/ {pago.monto.toFixed(2)}</TableCell>
                    <TableCell>{pago.metodo}</TableCell>
                    <TableCell>
                      <Badge className="bg-green-600">{pago.estado}</Badge>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/facturacion-integrada.tsx" isMerged="true"
"use client"

import { useState, useMemo } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Plus, FileText, AlertTriangle, TrendingDown } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { kardexService } from "@/lib/services/kardex-service"
import type { Lote, MovimientoKardex } from "@/lib/types"

export function FacturacionIntegrada() {
  const { data: lotes } = useApi(lotesService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [movimientos, setMovimientos] = useState<MovimientoKardex[]>([])
  const [diferencias, setDiferencias] = useState<any[]>([])
  const [formData, setFormData] = useState({
    cantidad: 0,
    cliente: "",
    precioVenta: 0,
  })

const lotesDisponibles = (lotes as Lote[]).filter((l) => l.estado === "completado" || l.estado === "liquidado")

const handleSelectLote = async (lote: Lote) => {
    setSelectedLote(lote)
    try {
      const movs = await kardexService.obtenerMovimientosLote(lote.id)
      setMovimientos(movs)

const entradas = movs.filter((m) => m.tipo === "entrada").reduce((sum, m) => sum + m.cantidad, 0)
      const salidas = movs.filter((m) => m.tipo === "salida").reduce((sum, m) => sum + m.cantidad, 0)
      const diferencia = lote.peso_bruto - (entradas - salidas)

if (Math.abs(diferencia) > 0.01) {
        setDiferencias([{ lote_id: lote.id, diferencia, tipo: diferencia > 0 ? "falta" : "exceso" }])
      }
    } catch (error) {
      console.error("Error cargando movimientos:", error)
    }
  }

const handleGenerarFactura = () => {
    if (!selectedLote || formData.cantidad <= 0) return

const ultimoSaldo = movimientos.length > 0 ? movimientos[0].saldo : 0
    if (formData.cantidad > ultimoSaldo) {
      alert(`Cantidad solicitada (${formData.cantidad} kg) excede saldo disponible (${ultimoSaldo} kg)`)
      return
    }

// Aquí se generaría la factura real conectada a la BD
    console.log("Factura generada:", {
      lote: selectedLote.codigo,
      cliente: formData.cliente,
      cantidad: formData.cantidad,
      total: formData.cantidad * formData.precioVenta,
    })

setIsDialogOpen(false)
    setSelectedLote(null)
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Facturación y Ventas</h2>
          <p className="text-muted-foreground">Gestione facturas y controle diferencias de inventario</p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nueva Factura
        </Button>
      </div>

{diferencias.length > 0 && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertTitle>Diferencias Detectadas</AlertTitle>
          <AlertDescription>
            Se detectaron {diferencias.length} diferencia(s) de inventario que requieren atención
          </AlertDescription>
        </Alert>
      )}

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Generar Factura
            </DialogTitle>
          </DialogHeader>

<div className="space-y-6">
            <div className="space-y-2">
              <Label>Lote *</Label>
              <div className="space-y-2 max-h-40 overflow-y-auto border rounded p-2">
                {lotesDisponibles.map((lote) => (
                  <button
                    key={lote.id}
                    onClick={() => handleSelectLote(lote)}
                    className={`w-full text-left p-3 rounded border-2 transition ${
                      selectedLote?.id === lote.id
                        ? "border-blue-500 bg-blue-50"
                        : "border-gray-200 hover:border-gray-300"
                    }`}
                  >
                    <p className="font-medium">{lote.codigo}</p>
                    <p className="text-sm text-gray-600">{lote.peso_bruto} kg | Productor: {lote.productor_nombre}</p>
                  </button>
                ))}
              </div>
            </div>

{selectedLote && (
              <>
                <Card className="bg-blue-50">
                  <CardContent className="pt-6">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Peso Inicial:</span>
                        <span className="font-semibold">{selectedLote.peso_bruto} kg</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Saldo Disponible:</span>
                        <span className="font-semibold">
                          {movimientos.length > 0 ? movimientos[0].saldo : selectedLote.peso_bruto} kg
                        </span>
                      </div>
                      {diferencias.length > 0 && (
                        <div className="flex justify-between text-red-600">
                          <span>Diferencia Detectada:</span>
                          <span className="font-semibold">{diferencias[0].diferencia.toFixed(2)} kg</span>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>

<div className="space-y-2">
                  <Label>Cliente *</Label>
                  <Input
                    value={formData.cliente}
                    onChange={(e) => setFormData({ ...formData, cliente: e.target.value })}
                  />
                </div>

<div className="space-y-2">
                  <Label>Cantidad a Vender (kg) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.cantidad || ""}
                    onChange={(e) => setFormData({ ...formData, cantidad: Number(e.target.value) })}
                  />
                </div>

<div className="space-y-2">
                  <Label>Precio por Kg (S/) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={formData.precioVenta || ""}
                    onChange={(e) => setFormData({ ...formData, precioVenta: Number(e.target.value) })}
                  />
                </div>

<Card className="bg-green-50">
                  <CardContent className="pt-6">
                    <div className="flex justify-between text-lg font-bold">
                      <span>Total Factura:</span>
                      <span>S/ {(formData.cantidad * formData.precioVenta).toFixed(2)}</span>
                    </div>
                  </CardContent>
                </Card>

<Button onClick={handleGenerarFactura} className="w-full">
                  <FileText className="mr-2 h-4 w-4" />
                  Generar Factura
                </Button>
              </>
            )}
          </div>
        </DialogContent>
      </Dialog>

{diferencias.length > 0 && (
        <Card className="border-red-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-red-600">
              <TrendingDown className="h-5 w-5" />
              Diferencias de Inventario
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Lote</TableHead>
                  <TableHead>Diferencia (kg)</TableHead>
                  <TableHead>Tipo</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {diferencias.map((diff) => (
                  <TableRow key={diff.lote_id}>
                    <TableCell>{selectedLote?.codigo}</TableCell>
                    <TableCell className="font-semibold">{diff.diferencia.toFixed(2)}</TableCell>
                    <TableCell>
                      <Badge variant={diff.tipo === "falta" ? "destructive" : "secondary"}>
                        {diff.tipo === "falta" ? "Falta Material" : "Exceso Material"}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/validations/business-validations.ts" isMerged="true"
"use client"

/**
 * Validaciones críticas del flujo de negocio
 * Implementa todas las reglas de negocio documentadas en el documento de requisitos
 */

import type { Lote, Persona, Adelanto } from "@/lib/types"

export interface ValidationResult {
  isValid: boolean
  errors: string[]
  warnings: string[]
}

// ============================================================================
// VALIDACIONES DE INGRESO DE MATERIA PRIMA
// ============================================================================

export function validarIngresoMateriaPrima(lote: {
  peso_bruto: number
  peso_neto?: number
  num_jabas: number
  productor_id?: number
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

if (lote.peso_bruto <= 0) {
    errors.push("Peso bruto debe ser mayor a 0 kg")
  }

if (lote.num_jabas <= 0) {
    errors.push("Número de jabas debe ser mayor a 0")
  }

if (!lote.productor_id) {
    errors.push("Productor es requerido")
  }

if (lote.peso_neto && lote.peso_neto < 0) {
    errors.push("Peso neto no puede ser negativo")
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES DE CLASIFICACIÓN
// ============================================================================

export function validarClasificacion(clasificacion: {
  peso_bruto: number
  exportable: number
  industrial: number
  descarte: number
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

const totalClasificado = clasificacion.exportable + clasificacion.industrial + clasificacion.descarte

if (totalClasificado > clasificacion.peso_bruto) {
    errors.push(
      `Peso clasificado (${totalClasificado} kg) no puede exceder peso bruto (${clasificacion.peso_bruto} kg)`
    )
  }

const diferencia = clasificacion.peso_bruto - totalClasificado
  if (diferencia > 0 && diferencia > clasificacion.peso_bruto * 0.05) {
    // Alert if loss > 5%
    warnings.push(
      `Merma detectada: ${diferencia.toFixed(2)} kg (${((diferencia / clasificacion.peso_bruto) * 100).toFixed(1)}% de pérdida)`
    )
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES DE LIQUIDACIÓN
// ============================================================================

export function validarLiquidacion(liquidacion: {
  productor_id: number
  peso_neto: number
  precio_unitario: number
  adelantos_totales: number
  otros_descuentos: number
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

if (liquidacion.peso_neto <= 0) {
    errors.push("Peso neto debe ser mayor a 0")
  }

if (liquidacion.precio_unitario <= 0) {
    errors.push("Precio unitario debe ser mayor a 0")
  }

const valorBruto = liquidacion.peso_neto * liquidacion.precio_unitario
  const descuentosTotales = liquidacion.adelantos_totales + liquidacion.otros_descuentos

if (liquidacion.adelantos_totales > valorBruto) {
    warnings.push(
      `Adelantos (S/ ${liquidacion.adelantos_totales.toFixed(2)}) exceden valor bruto (S/ ${valorBruto.toFixed(2)}). Saldo será negativo.`
    )
  }

// This would be checked against the database in real scenario
  // if (!productor.cuenta_bancaria) {
  //   errors.push('Productor debe tener datos bancarios registrados antes de liquidar')
  // }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES DE PAGOS
// ============================================================================

export function validarPago(pago: {
  monto: number
  saldo_pendiente: number
  metodo_pago: string
  referencia?: string
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

if (pago.monto <= 0) {
    errors.push("Monto del pago debe ser mayor a 0")
  }

if (pago.monto > pago.saldo_pendiente) {
    errors.push(
      `Monto del pago (S/ ${pago.monto.toFixed(2)}) no puede exceder saldo pendiente (S/ ${pago.saldo_pendiente.toFixed(2)})`
    )
  }

if (pago.metodo_pago === "transferencia" && !pago.referencia) {
    warnings.push("Se recomienda registrar el número de transferencia como referencia")
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES DE FACTURACIÓN
// ============================================================================

export function validarFactura(factura: {
  cantidad_venta: number
  saldo_inventario: number
  precio_venta: number
  cliente: string
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

if (factura.cantidad_venta <= 0) {
    errors.push("Cantidad a vender debe ser mayor a 0")
  }

if (factura.cantidad_venta > factura.saldo_inventario) {
    errors.push(
      `Cantidad solicitada (${factura.cantidad_venta} kg) excede saldo disponible (${factura.saldo_inventario} kg)`
    )
  }

if (factura.precio_venta <= 0) {
    errors.push("Precio de venta debe ser mayor a 0")
  }

if (!factura.cliente || factura.cliente.trim().length === 0) {
    errors.push("Cliente es requerido")
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES DE GUÍA DE REMISIÓN
// ============================================================================

export function validarGuiaRemision(guia: {
  numero_guia: string
  guias_existentes: string[]
  fecha_emision: string
  fecha_ingreso: string
}): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

if (guia.guias_existentes.includes(guia.numero_guia)) {
    errors.push(`N° Guía ${guia.numero_guia} ya existe en el sistema`)
  }

if (new Date(guia.fecha_emision) < new Date(guia.fecha_ingreso)) {
    errors.push("Fecha de emisión no puede ser anterior a fecha de ingreso")
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// VALIDACIONES GLOBALES DEL FLUJO
// ============================================================================

export function validarFlujoContinuo(paso: string, contexto: any): ValidationResult {
  const errors: string[] = []
  const warnings: string[] = []

switch (paso) {
    case "ingreso_a_clasificacion":
      if (!["pendiente", "proceso"].includes(contexto.lote_estado)) {
        errors.push(`Lote debe estar en estado pendiente o proceso, no ${contexto.lote_estado}`)
      }
      break

case "clasificacion_a_liquidacion":
      if (contexto.lote_estado !== "proceso" && contexto.lote_estado !== "completado") {
        errors.push("Lote debe estar clasificado antes de liquidar")
      }
      break

case "liquidacion_a_pago":
      if (!contexto.productor_banco || !contexto.productor_cuenta) {
        warnings.push("Productor no tiene datos bancarios. Se requiere antes de pagar")
      }
      break

case "pago_a_factura":
      if (contexto.diferencia_inventario > contexto.lote_peso_bruto * 0.01) {
        errors.push(
          `Diferencia de inventario detectada (${contexto.diferencia_inventario.toFixed(2)} kg). Requiere ajuste antes de facturar.`
        )
      }
      break
  }

return {
    isValid: errors.length === 0,
    errors,
    warnings,
  }
}

// ============================================================================
// UTILIDAD: VALIDAR Y REPORTAR
// ============================================================================

export function validarYReportar(
  validationResult: ValidationResult,
  contexto: string
): { procedeOk: boolean; mensaje: string } {
  if (validationResult.isValid && validationResult.warnings.length === 0) {
    return { procedeOk: true, mensaje: "Validación exitosa" }
  }

let mensaje = `Validación en ${contexto}:\n`

if (validationResult.errors.length > 0) {
    mensaje += "\n❌ ERRORES:\n"
    validationResult.errors.forEach((e) => {
      mensaje += `  - ${e}\n`
    })
  }

if (validationResult.warnings.length > 0) {
    mensaje += "\n⚠️ ADVERTENCIAS:\n"
    validationResult.warnings.forEach((w) => {
      mensaje += `  - ${w}\n`
    })
  }

return {
    procedeOk: validationResult.errors.length === 0,
    mensaje,
  }
}
[V0_FILE]typescriptreact:file="components/business-flow-status.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { CheckCircle2, AlertCircle, Clock, XCircle } from 'lucide-react'

interface FlowStep {
  name: string
  status: "completed" | "in-progress" | "pending" | "error"
  count?: number
}

export function BusinessFlowStatus({
  steps,
}: {
  steps: FlowStep[]
}) {
  const completedCount = steps.filter((s) => s.status === "completed").length
  const totalCount = steps.length
  const progress = (completedCount / totalCount) * 100

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle2 className="h-5 w-5 text-green-600" />
      case "in-progress":
        return <Clock className="h-5 w-5 text-blue-600" />
      case "pending":
        return <AlertCircle className="h-5 w-5 text-yellow-600" />
      case "error":
        return <XCircle className="h-5 w-5 text-red-600" />
      default:
        return null
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge className="bg-green-600">Completado</Badge>
      case "in-progress":
        return <Badge className="bg-blue-600">En proceso</Badge>
      case "pending":
        return <Badge className="bg-yellow-600">Pendiente</Badge>
      case "error":
        return <Badge className="bg-red-600">Error</Badge>
      default:
        return null
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Estado del Flujo de Negocio</CardTitle>
        <CardDescription>Progreso del procesamiento</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div>
          <div className="flex justify-between mb-2">
            <span className="text-sm font-medium">Progreso General</span>
            <span className="text-sm text-muted-foreground">
              {completedCount} de {totalCount}
            </span>
          </div>
          <Progress value={progress} className="h-2" />
        </div>

<div className="space-y-3">
          {steps.map((step, idx) => (
            <div key={idx} className="flex items-center gap-4">
              {getStatusIcon(step.status)}
              <div className="flex-1">
                <p className="font-medium">{step.name}</p>
                {step.count !== undefined && <p className="text-sm text-muted-foreground">{step.count} registros</p>}
              </div>
              {getStatusBadge(step.status)}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]php:file="backend/controllers/VentasController.php" isMerged="true"
<?php
class VentasController {
    private $conn;
    private $table = "ventas";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'por-pedido') {
                    $this->getByPedido();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT v.*, p.numero_pedido, pc.nombre_completo as cliente_nombre
                  FROM " . $this->table . " v
                  LEFT JOIN pedidos p ON v.pedido_id = p.id
                  LEFT JOIN personas pc ON p.cliente_id = pc.id
                  ORDER BY v.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT v.*, p.numero_pedido, p.kg_neto, pc.nombre_completo as cliente_nombre,
                  pc.cuenta_bancaria, pc.banco
                  FROM " . $this->table . " v
                  LEFT JOIN pedidos p ON v.pedido_id = p.id
                  LEFT JOIN personas pc ON p.cliente_id = pc.id
                  WHERE v.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getByPedido() {
        $data = json_decode(file_get_contents("php://input"));
        $pedidoId = $data->pedido_id ?? null;
        
        if (!$pedidoId) {
            http_response_code(400);
            echo json_encode(["message" => "pedido_id requerido"]);
            return;
        }
        
        $query = "SELECT v.* FROM " . $this->table . " v
                  WHERE v.pedido_id = :pedido_id
                  ORDER BY v.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':pedido_id', $pedidoId);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (pedido_id, producto, categoria, kg, precio, total, fecha_venta, observaciones) 
                  VALUES (:pedido, :prod, :cat, :kg, :precio, :total, :fecha, :obs)";
        
        $stmt = $this->conn->prepare($query);
        
        $pedido = $data->pedido_id ?? null;
        $prod = $data->producto ?? '';
        $cat = $data->categoria ?? '';
        $kg = $data->kg ?? 0;
        $precio = $data->precio ?? 0;
        $total = $kg * $precio;
        $fecha = $data->fecha_venta ?? date('Y-m-d');
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':pedido', $pedido);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':cat', $cat);
        $stmt->bindParam(':kg', $kg);
        $stmt->bindParam(':precio', $precio);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Venta creada", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear venta"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "UPDATE " . $this->table . " SET 
                  pedido_id = :pedido,
                  producto = :prod,
                  categoria = :cat,
                  kg = :kg,
                  precio = :precio,
                  total = :total,
                  fecha_venta = :fecha,
                  observaciones = :obs
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        
        $pedido = $data->pedido_id ?? null;
        $prod = $data->producto ?? '';
        $cat = $data->categoria ?? '';
        $kg = $data->kg ?? 0;
        $precio = $data->precio ?? 0;
        $total = $kg * $precio;
        $fecha = $data->fecha_venta ?? date('Y-m-d');
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':pedido', $pedido);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':cat', $cat);
        $stmt->bindParam(':kg', $kg);
        $stmt->bindParam(':precio', $precio);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Venta actualizada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar venta"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Venta eliminada"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar venta"]);
        }
    }
}
?>
[V0_FILE]php:file="backend/controllers/PedidosController.php" isMerged="true"
<?php
class PedidosController {
    private $conn;
    private $table = "pedidos";

public function __construct($db) {
        $this->conn = $db;
    }

public function handleRequest($method, $id, $action) {
        switch($method) {
            case 'GET':
                if ($id) {
                    $this->getOne($id);
                } else if ($action === 'por-cliente') {
                    $this->getByCliente();
                } else {
                    $this->getAll();
                }
                break;
            case 'POST':
                $this->create();
                break;
            case 'PUT':
                $this->update($id);
                break;
            case 'DELETE':
                $this->delete($id);
                break;
        }
    }

public function getAll() {
        $query = "SELECT p.*, c.nombre_completo as cliente_nombre
                  FROM " . $this->table . " p
                  LEFT JOIN personas c ON p.cliente_id = c.id
                  ORDER BY p.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getOne($id) {
        $query = "SELECT p.*, c.nombre_completo as cliente_nombre,
                  c.documento_identidad, c.telefono, c.email
                  FROM " . $this->table . " p
                  LEFT JOIN personas c ON p.cliente_id = c.id
                  WHERE p.id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function getByCliente() {
        $data = json_decode(file_get_contents("php://input"));
        $clienteId = $data->cliente_id ?? null;
        
        if (!$clienteId) {
            http_response_code(400);
            echo json_encode(["message" => "cliente_id requerido"]);
            return;
        }
        
        $query = "SELECT p.* FROM " . $this->table . " p
                  WHERE p.cliente_id = :cliente_id
                  ORDER BY p.created_at DESC";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':cliente_id', $clienteId);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);
    }

public function create() {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "INSERT INTO " . $this->table . " 
                  (numero_pedido, cliente_id, producto, categoria, kg_bruto, porcentaje_humedad, 
                   kg_neto, precio, total, fecha_pedido, estado, observaciones) 
                  VALUES (:numero, :cliente, :prod, :cat, :kg_bruto, :humedad, :kg_neto, 
                          :precio, :total, :fecha, :estado, :obs)";
        
        $stmt = $this->conn->prepare($query);
        
        $numero = $data->numero_pedido ?? 'PED-' . date('Ymd-His');
        $cliente = $data->cliente_id ?? null;
        $prod = $data->producto ?? '';
        $cat = $data->categoria ?? '';
        $kgBruto = $data->kg_bruto ?? 0;
        $humedad = $data->porcentaje_humedad ?? 0;
        $kgNeto = $data->kg_neto ?? $kgBruto;
        $precio = $data->precio ?? 0;
        $total = $kgNeto * $precio;
        $fecha = $data->fecha_pedido ?? date('Y-m-d');
        $estado = $data->estado ?? 'pendiente';
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':numero', $numero);
        $stmt->bindParam(':cliente', $cliente);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':cat', $cat);
        $stmt->bindParam(':kg_bruto', $kgBruto);
        $stmt->bindParam(':humedad', $humedad);
        $stmt->bindParam(':kg_neto', $kgNeto);
        $stmt->bindParam(':precio', $precio);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            http_response_code(201);
            echo json_encode(["message" => "Pedido creado", "id" => $this->conn->lastInsertId()]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al crear pedido"]);
        }
    }

public function update($id) {
        $data = json_decode(file_get_contents("php://input"));
        
        $query = "UPDATE " . $this->table . " SET 
                  numero_pedido = :numero,
                  cliente_id = :cliente,
                  producto = :prod,
                  categoria = :cat,
                  kg_bruto = :kg_bruto,
                  porcentaje_humedad = :humedad,
                  kg_neto = :kg_neto,
                  precio = :precio,
                  total = :total,
                  fecha_pedido = :fecha,
                  estado = :estado,
                  observaciones = :obs
                  WHERE id = :id";
        
        $stmt = $this->conn->prepare($query);
        
        $numero = $data->numero_pedido ?? '';
        $cliente = $data->cliente_id ?? null;
        $prod = $data->producto ?? '';
        $cat = $data->categoria ?? '';
        $kgBruto = $data->kg_bruto ?? 0;
        $humedad = $data->porcentaje_humedad ?? 0;
        $kgNeto = $data->kg_neto ?? $kgBruto;
        $precio = $data->precio ?? 0;
        $total = $kgNeto * $precio;
        $fecha = $data->fecha_pedido ?? date('Y-m-d');
        $estado = $data->estado ?? 'pendiente';
        $obs = $data->observaciones ?? '';
        
        $stmt->bindParam(':id', $id);
        $stmt->bindParam(':numero', $numero);
        $stmt->bindParam(':cliente', $cliente);
        $stmt->bindParam(':prod', $prod);
        $stmt->bindParam(':cat', $cat);
        $stmt->bindParam(':kg_bruto', $kgBruto);
        $stmt->bindParam(':humedad', $humedad);
        $stmt->bindParam(':kg_neto', $kgNeto);
        $stmt->bindParam(':precio', $precio);
        $stmt->bindParam(':total', $total);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->bindParam(':estado', $estado);
        $stmt->bindParam(':obs', $obs);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Pedido actualizado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al actualizar pedido"]);
        }
    }

public function delete($id) {
        $query = "DELETE FROM " . $this->table . " WHERE id = :id";
        $stmt = $this->conn->prepare($query);
        $stmt->bindParam(':id', $id);
        
        if($stmt->execute()) {
            echo json_encode(["message" => "Pedido eliminado"]);
        } else {
            http_response_code(500);
            echo json_encode(["message" => "Error al eliminar pedido"]);
        }
    }
}
?>
[V0_FILE]typescriptreact:file="components/evaluacion-liquidacion.tsx" isQuickEdit="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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Search, User, Phone, MapPin, Calendar, Package, DollarSign, TrendingUp, Eye, Calculator, FileText, ChevronDown, Check, Loader2 } from 'lucide-react'
import { cn } from "@/lib/utils"
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { personasService } from "@/lib/services/personas-service"
import { liquidacionesService, type Liquidacion } from "@/lib/services/liquidaciones-service"
import type { Lote, Persona } from "@/lib/types"

export function EvaluacionLiquidacion() {
  const [selectedProveedor, setSelectedProveedor] = useState<Persona | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [open, setOpen] = useState(false)
  const [filteredProveedores, setFilteredProveedores] = useState<Persona[]>([])
  const [liquidacionesProveedor, setLiquidacionesProveedor] = useState<Liquidacion[]>([])

const { data: proveedores, loading: loadingProveedores } = useApi(personasService, { initialLoad: true })
  const { data: liquidaciones, loading: loadingLiquidaciones } = useApi(liquidacionesService, { initialLoad: true })
  const { data: lotes } = useApi(lotesService, { initialLoad: true })

useEffect(() => {
    const filtered = (proveedores as Persona[])
      .filter(
        (p) =>
          p.nombres?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.apellidos?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.dni?.includes(searchTerm) ||
          p.telefono?.includes(searchTerm),
      )
      .slice(0, 10)
    setFilteredProveedores(filtered)
  }, [searchTerm, proveedores])

useEffect(() => {
    if (selectedProveedor) {
      const liquidacionesDel = (liquidaciones as Liquidacion[]).filter(
        (l) => l.productor_id === selectedProveedor.id,
      )
      setLiquidacionesProveedor(liquidacionesDel)
    }
  }, [selectedProveedor, liquidaciones])

const stats = {
    totalProveedoresPendientes: (liquidaciones as Liquidacion[]).filter((l) => l.estado === "pendiente").length,
    totalMontosPendientes: (liquidaciones as Liquidacion[]).reduce(
      (sum, l) => sum + (l.estado === "pendiente" ? (l.valor_neto || 0) : 0),
      0,
    ),
    totalLiquidaciones: (liquidaciones as Liquidacion[]).length,
    totalMontoLiquidado: (liquidaciones as Liquidacion[]).reduce((sum, l) => sum + (l.valor_bruto || 0), 0),
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Evaluación de Liquidación</h1>
          <p className="text-muted-foreground">Gestiona las liquidaciones de productores</p>
        </div>
      </div>

{/* Stats */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Liquidaciones Pendientes</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalProveedoresPendientes}</div>
            <p className="text-xs text-muted-foreground">Por procesar</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Monto Total Pendiente</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">S/ {stats.totalMontosPendientes.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">Por liquidar</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Liquidaciones</CardTitle>
            <Calculator className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalLiquidaciones}</div>
            <p className="text-xs text-muted-foreground">Registradas</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Monto Liquidado</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">S/ {stats.totalMontoLiquidado.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">Total procesado</p>
          </CardContent>
        </Card>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* Selector de Proveedor */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Search className="h-5 w-5" />
              Seleccionar Productor
            </CardTitle>
            <CardDescription>Busca un productor para ver sus liquidaciones</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {loadingProveedores ? (
              <div className="flex items-center justify-center py-8">
                <Loader2 className="h-4 w-4 animate-spin mr-2" />
                Cargando proveedores...
              </div>
            ) : (
              <>
                <div className="space-y-2">
                  <Label>Buscar Productor</Label>
                  <Popover open={open} onOpenChange={setOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={open}
                        className="w-full justify-between bg-transparent"
                      >
                        {selectedProveedor
                          ? `${selectedProveedor.nombres} ${selectedProveedor.apellidos}`
                          : "Seleccionar productor..."}
                        <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-full p-0">
                      <Command>
                        <CommandInput
                          placeholder="Buscar por nombre o documento..."
                          value={searchTerm}
                          onValueChange={setSearchTerm}
                        />
                        <CommandEmpty>No se encontraron productores.</CommandEmpty>
                        <CommandList>
                          <CommandGroup>
                            {filteredProveedores.map((proveedor) => (
                              <CommandItem
                                key={proveedor.id}
                                value={proveedor.id.toString()}
                                onSelect={() => {
                                  setSelectedProveedor(proveedor)
                                  setOpen(false)
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedProveedor?.id === proveedor.id ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                <div className="flex-1">
                                  <div className="font-medium">
                                    {proveedor.nombres} {proveedor.apellidos}
                                  </div>
                                  <div className="text-sm text-muted-foreground">
                                    {proveedor.dni} • {proveedor.telefono}
                                  </div>
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

{selectedProveedor && (
                  <div className="space-y-3 p-4 bg-muted/50 rounded-lg">
                    <h4 className="font-semibold">
                      {selectedProveedor.nombres} {selectedProveedor.apellidos}
                    </h4>
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-muted-foreground">Documento</span>
                        <p className="font-medium">{selectedProveedor.dni}</p>
                      </div>
                      <div>
                        <span className="text-muted-foreground">Teléfono</span>
                        <p className="font-medium">{selectedProveedor.telefono}</p>
                      </div>
                      <div>
                        <span className="text-muted-foreground">Dirección</span>
                        <p className="font-medium truncate">{selectedProveedor.direccion || "N/A"}</p>
                      </div>
                      <div>
                        <span className="text-muted-foreground">Cuenta</span>
                        <p className="font-medium">{selectedProveedor.cuenta_bancaria || "N/A"}</p>
                      </div>
                    </div>
                  </div>
                )}
              </>
            )}
          </CardContent>
        </Card>

{/* Resumen de Productores */}
        <Card>
          <CardHeader>
            <CardTitle>Resumen de Productores</CardTitle>
            <CardDescription>Vista general de todos los productores</CardDescription>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[400px]">
              <div className="space-y-3">
                {loadingProveedores ? (
                  <div className="text-center py-8 text-muted-foreground">Cargando...</div>
                ) : (proveedores as Persona[]).length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground">No hay productores</div>
                ) : (
                  (proveedores as Persona[]).map((proveedor) => {
                    const liquidacionesDel = (liquidaciones as Liquidacion[]).filter(
                      (l) => l.productor_id === proveedor.id,
                    )
                    const totalPendiente = liquidacionesDel
                      .filter((l) => l.estado === "pendiente")
                      .reduce((sum, l) => sum + (l.valor_neto || 0), 0)

return (
                      <div
                        key={proveedor.id}
                        className={cn(
                          "p-3 rounded-lg border cursor-pointer transition-colors hover:bg-muted/50",
                          selectedProveedor?.id === proveedor.id && "bg-primary/10 border-primary",
                        )}
                        onClick={() => setSelectedProveedor(proveedor)}
                      >
                        <div className="font-medium">
                          {proveedor.nombres} {proveedor.apellidos}
                        </div>
                        <div className="grid grid-cols-3 gap-2 text-sm text-muted-foreground mt-2">
                          <div>
                            <div className="font-medium text-foreground">{liquidacionesDel.length}</div>
                            <div>Liquidaciones</div>
                          </div>
                          <div>
                            <div className="font-medium text-foreground">S/ {totalPendiente.toLocaleString()}</div>
                            <div>Pendiente</div>
                          </div>
                        </div>
                      </div>
                    )
                  })
                )}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      </div>

{/* Liquidaciones del Productor */}
      <Card>
        <CardHeader>
          <CardTitle>Liquidaciones Registradas</CardTitle>
          <CardDescription>
            {selectedProveedor
              ? `Liquidaciones de ${selectedProveedor.nombres} ${selectedProveedor.apellidos}`
              : "Selecciona un productor para ver sus liquidaciones"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {loadingLiquidaciones ? (
            <div className="text-center py-8">
              <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
              Cargando liquidaciones...
            </div>
          ) : liquidacionesProveedor.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              {selectedProveedor ? "No hay liquidaciones para este productor" : "Selecciona un productor"}
            </div>
          ) : (
            <div className="space-y-3">
              {liquidacionesProveedor.map((liquidacion) => (
                <div key={liquidacion.id} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <div className="font-medium">{liquidacion.numero_liquidacion}</div>
                      <Badge variant={liquidacion.estado === "pendiente" ? "destructive" : "default"}>
                        {liquidacion.estado.toUpperCase()}
                      </Badge>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {liquidacion.fecha_liquidacion} • Lote: {liquidacion.lote_codigo}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-semibold">S/ {(liquidacion.valor_bruto || 0).toLocaleString()}</div>
                    <div className="text-sm text-muted-foreground">Total</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

{/* Acciones */}
      {selectedProveedor && (
        <Card>
          <CardHeader>
            <CardTitle>Acciones de Liquidación</CardTitle>
            <CardDescription>Procesa la liquidación del productor seleccionado</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-4">
              <Button className="flex-1">
                <Calculator className="mr-2 h-4 w-4" />
                Crear Liquidación
              </Button>
              <Button variant="outline" className="flex-1 bg-transparent">
                <FileText className="mr-2 h-4 w-4" />
                Ver Detalle
              </Button>
              <Button variant="outline">
                <Eye className="mr-2 h-4 w-4" />
                Vista Previa
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/registro-pago-campo.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Search, Loader2 } from 'lucide-react'
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { useApi } from "@/lib/hooks/use-api"
import { liquidacionesService, type Liquidacion } from "@/lib/services/liquidaciones-service"
import { pagoCampoService } from "@/lib/services/pago-campo-service"
import { personasService } from "@/lib/services/personas-service"
import type { Persona, RegistroPagoCampo } from "@/lib/types"

interface LiquidacionConDetalles extends Liquidacion {
  productor_nombre?: string
}

export function RegistroPagoCampo() {
  const { toast } = useToast()
  const [busqueda, setBusqueda] = useState("")
  const [selectedLiquidacion, setSelectedLiquidacion] = useState<LiquidacionConDetalles | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [formPago, setFormPago] = useState({
    fechaPago: new Date().toISOString().split("T")[0],
    monto: "",
    datosBancarios: "",
    observaciones: "",
  })
  const [registrando, setRegistrando] = useState(false)

const { data: liquidaciones, loading: loadingLiquidaciones, refresh: refreshLiquidaciones } = useApi(liquidacionesService, { initialLoad: true })
  const { data: personas } = useApi(personasService, { initialLoad: true })

const liquidacionesConDetalles: LiquidacionConDetalles[] = (liquidaciones as Liquidacion[]).map((liq) => {
    const productor = (personas as Persona[]).find((p) => p.id === liq.productor_id)
    return {
      ...liq,
      productor_nombre: productor ? `${productor.nombres} ${productor.apellidos}` : liq.productor_nombre || "Desconocido",
    }
  })

// Filtrar liquidaciones pendientes
  const liquidacionesPendientes = liquidacionesConDetalles.filter((l) => l.estado === "pendiente")

const liquidacionesFiltradas = liquidacionesPendientes.filter(
    (liq) =>
      liq.id.toString().includes(busqueda) ||
      liq.productor_nombre?.toLowerCase().includes(busqueda.toLowerCase()) ||
      liq.lote_codigo?.includes(busqueda),
  )

const getEstadoBadge = (estado: string) => {
    const variants = {
      pendiente: "secondary",
      cancelado: "default",
      deficit: "destructive",
    }
    return <Badge variant={variants[estado as keyof typeof variants] as any}>{estado.toUpperCase()}</Badge>
  }

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

if (!selectedLiquidacion) return

const monto = Number.parseFloat(formPago.monto)
    if (isNaN(monto) || monto <= 0) {
      toast({
        title: "Error",
        description: "Ingresa un monto válido",
        variant: "destructive",
      })
      return
    }

if (monto > (selectedLiquidacion.valor_neto || 0)) {
      toast({
        title: "Error",
        description: `El monto no puede exceder S/ ${(selectedLiquidacion.valor_neto || 0).toFixed(2)}`,
        variant: "destructive",
      })
      return
    }

setRegistrando(true)
    try {
      const nuevoPago: Omit<RegistroPagoCampo, "id" | "created_at" | "updated_at"> = {
        lote_id: selectedLiquidacion.lote_id,
        lote_codigo: selectedLiquidacion.lote_codigo,
        productor_id: selectedLiquidacion.productor_id,
        productor_nombre: selectedLiquidacion.productor_nombre,
        monto,
        fecha_pago: formPago.fechaPago,
        metodo_pago: "transferencia",
        referencia: formPago.datosBancarios,
        observaciones: formPago.observaciones,
      }

await pagoCampoService.create(nuevoPago)

toast({
        title: "Éxito",
        description: `Pago de S/ ${monto.toFixed(2)} registrado correctamente`,
      })

setIsDialogOpen(false)
      setSelectedLiquidacion(null)
      setFormPago({
        fechaPago: new Date().toISOString().split("T")[0],
        monto: "",
        datosBancarios: "",
        observaciones: "",
      })

refreshLiquidaciones()
    } catch (error) {
      console.error("Error al registrar pago:", error)
      toast({
        title: "Error",
        description: "No se pudo registrar el pago",
        variant: "destructive",
      })
    } finally {
      setRegistrando(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold">Registro Pago-campo</h2>
          <p className="text-muted-foreground">Gestión de pagos a productores por lotes liquidados</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle>Liquidaciones Pendientes de Pago</CardTitle>
            <div className="relative w-96">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por ID, lote o productor..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {loadingLiquidaciones ? (
            <div className="text-center py-8">
              <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
              Cargando liquidaciones...
            </div>
          ) : liquidacionesFiltradas.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              {liquidacionesPendientes.length === 0 ? "No hay liquidaciones pendientes" : "No se encontraron resultados"}
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>Número</TableHead>
                  <TableHead>Lote</TableHead>
                  <TableHead>Productor</TableHead>
                  <TableHead>Fecha</TableHead>
                  <TableHead className="text-right">Total Liquidación</TableHead>
                  <TableHead className="text-right">Descuentos</TableHead>
                  <TableHead className="text-right">Neto</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {liquidacionesFiltradas.map((liq) => (
                  <TableRow key={liq.id}>
                    <TableCell className="font-medium">{liq.id}</TableCell>
                    <TableCell>{liq.numero_liquidacion}</TableCell>
                    <TableCell>{liq.lote_codigo}</TableCell>
                    <TableCell>{liq.productor_nombre}</TableCell>
                    <TableCell>{liq.fecha_liquidacion}</TableCell>
                    <TableCell className="text-right font-medium">
                      S/. {(liq.valor_bruto || 0).toFixed(2)}
                    </TableCell>
                    <TableCell className="text-right">S/. {(liq.descuentos_adelantos || 0).toFixed(2)}</TableCell>
                    <TableCell className="text-right font-bold text-green-600">
                      S/. {(liq.valor_neto || 0).toFixed(2)}
                    </TableCell>
                    <TableCell>{getEstadoBadge(liq.estado)}</TableCell>
                    <TableCell>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => {
                          setSelectedLiquidacion(liq)
                          setIsDialogOpen(true)
                        }}
                      >
                        Pagar
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

{/* Dialog para registrar pago */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>REGISTRO DE PAGO</DialogTitle>
          </DialogHeader>
          {selectedLiquidacion && (
            <form onSubmit={handleRegistrarPago} className="space-y-6">
              <Card className="bg-blue-50">
                <CardHeader>
                  <CardTitle className="text-lg">Información de la Liquidación</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label className="text-sm text-muted-foreground">PRODUCTOR</Label>
                      <div className="font-medium">{selectedLiquidacion.productor_nombre}</div>
                    </div>
                    <div>
                      <Label className="text-sm text-muted-foreground">LOTE</Label>
                      <div className="font-medium">{selectedLiquidacion.lote_codigo}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<div className="grid grid-cols-2 gap-4">
                <Card>
                  <CardContent className="pt-6">
                    <Label className="text-sm text-muted-foreground">VALOR BRUTO</Label>
                    <div className="text-2xl font-bold text-green-600">
                      S/. {(selectedLiquidacion.valor_bruto || 0).toFixed(2)}
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <Label className="text-sm text-muted-foreground">DESCUENTOS</Label>
                    <div className="text-2xl font-bold">S/. {(selectedLiquidacion.descuentos_adelantos || 0).toFixed(2)}</div>
                  </CardContent>
                </Card>
              </div>

<div className="space-y-4">
                <div>
                  <Label>FECHA DE PAGO *</Label>
                  <Input
                    type="date"
                    value={formPago.fechaPago}
                    onChange={(e) => setFormPago({ ...formPago, fechaPago: e.target.value })}
                    required
                  />
                </div>

<div>
                  <Label>MONTO A PAGAR (máx. S/. {(selectedLiquidacion.valor_neto || 0).toFixed(2)}) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    placeholder="0.00"
                    value={formPago.monto}
                    onChange={(e) => setFormPago({ ...formPago, monto: e.target.value })}
                    required
                  />
                </div>

<div>
                  <Label>DATOS BANCARIOS</Label>
                  <Input
                    placeholder="Número de transferencia, cheque, etc."
                    value={formPago.datosBancarios}
                    onChange={(e) => setFormPago({ ...formPago, datosBancarios: e.target.value })}
                  />
                </div>

<div>
                  <Label>OBSERVACIONES</Label>
                  <Textarea
                    placeholder="Observaciones adicionales..."
                    value={formPago.observaciones}
                    onChange={(e) => setFormPago({ ...formPago, observaciones: e.target.value })}
                    rows={3}
                  />
                </div>

<Card className="bg-green-50">
                  <CardContent className="pt-6">
                    <Label className="text-sm text-muted-foreground">VALOR NETO</Label>
                    <div className="text-xl font-bold text-green-600">
                      S/. {(selectedLiquidacion.valor_neto || 0).toFixed(2)}
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={registrando}>
                  {registrando && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  Registrar Pago
                </Button>
              </div>
            </form>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/registro-venta.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } 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 { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Loader2 } from 'lucide-react'
import { useToast } from "@/components/ui/use-toast"
import { useApi } from "@/lib/hooks/use-api"
import { kardexService } from "@/lib/services/kardex-service"
import { ventasService } from "@/lib/services/ventas-service"
import type { MovimientoKardex } from "@/lib/types"

interface KardexAgregado {
  categoria: string
  pesoTotal: number
  pesoDisponible: number
}

export function RegistroVenta() {
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    producto: "",
    categoria: "exportable",
    kg: "",
    precio: "",
    cliente: "",
    observaciones: "",
  })
  const [registrando, setRegistrando] = useState(false)

const { data: kardexData, loading: loadingKardex, refresh: refreshKardex } = useApi(kardexService, { initialLoad: true })

// Aggregate movements by category
  const kardexAgregado: KardexAgregado[] = []
  ;(kardexData as MovimientoKardex[]).forEach((movimiento) => {
    let cat = kardexAgregado.find((k) => k.categoria === movimiento.concepto)
    if (!cat) {
      cat = {
        categoria: movimiento.concepto || "Sin categoría",
        pesoTotal: 0,
        pesoDisponible: 0,
      }
      kardexAgregado.push(cat)
    }
    if (movimiento.tipo === "entrada") {
      cat.pesoTotal += movimiento.cantidad
      cat.pesoDisponible += movimiento.cantidad
    } else if (movimiento.tipo === "salida") {
      cat.pesoDisponible -= movimiento.cantidad
    }
  })

const totalKg = Number.parseFloat(formData.kg) || 0
  const precioUnitario = Number.parseFloat(formData.precio) || 0
  const total = totalKg * precioUnitario

const kardexSeleccionado = kardexAgregado.find((k) => k.categoria === formData.categoria)
  const pesoDisponible = kardexSeleccionado?.pesoDisponible || 0

const isFormValid =
    formData.producto &&
    formData.categoria &&
    totalKg > 0 &&
    precioUnitario > 0 &&
    formData.cliente &&
    totalKg <= pesoDisponible

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

if (!isFormValid) {
      toast({
        title: "Error",
        description: "Verifica que todos los campos sean válidos y haya peso disponible",
        variant: "destructive",
      })
      return
    }

setRegistrando(true)
    try {
      const codigoVenta = `VTA-${new Date().getFullYear()}-${Date.now().toString().slice(-6)}`

await ventasService.create({
        codigo: codigoVenta,
        cliente: formData.cliente,
        fecha_venta: new Date().toISOString().split("T")[0],
        cantidad: totalKg,
        precio_unitario: precioUnitario,
        total,
        estado: "pendiente",
        observaciones: formData.observaciones,
      })

toast({
        title: "Éxito",
        description: `Venta registrada: ${codigoVenta}`,
      })

setFormData({
        producto: "",
        categoria: "exportable",
        kg: "",
        precio: "",
        cliente: "",
        observaciones: "",
      })

refreshKardex()
    } catch (error) {
      console.error("Error al registrar venta:", error)
      toast({
        title: "Error",
        description: "No se pudo registrar la venta",
        variant: "destructive",
      })
    } finally {
      setRegistrando(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold">Registro Venta</h2>
          <p className="text-muted-foreground">Registrar ventas de productos a clientes</p>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Formulario de venta */}
        <Card>
          <CardHeader>
            <CardTitle>NUEVA VENTA</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <Label>CLIENTE *</Label>
                <Input
                  placeholder="Nombre del cliente"
                  value={formData.cliente}
                  onChange={(e) => setFormData({ ...formData, cliente: e.target.value })}
                  required
                />
              </div>

<div>
                <Label>PRODUCTO VENDIDO *</Label>
                <Input
                  placeholder="Nombre del producto"
                  value={formData.producto}
                  onChange={(e) => setFormData({ ...formData, producto: e.target.value })}
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>KG *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    placeholder="0.00"
                    value={formData.kg}
                    onChange={(e) => setFormData({ ...formData, kg: e.target.value })}
                    max={pesoDisponible}
                    required
                  />
                  <p className="text-xs text-muted-foreground mt-1">Disponible: {pesoDisponible.toFixed(2)} kg</p>
                </div>
                <div>
                  <Label>PRECIO (S/./kg) *</Label>
                  <Input
                    type="number"
                    step="0.01"
                    placeholder="0.00"
                    value={formData.precio}
                    onChange={(e) => setFormData({ ...formData, precio: e.target.value })}
                    required
                  />
                </div>
              </div>

<div>
                <Label>CATEGORÍA *</Label>
                <Select value={formData.categoria} onValueChange={(val) => setFormData({ ...formData, categoria: val })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="exportable">Exportable</SelectItem>
                    <SelectItem value="industrial">Industrial</SelectItem>
                    <SelectItem value="descarte">Descarte</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label>OBSERVACIONES</Label>
                <Textarea
                  placeholder="Observaciones..."
                  value={formData.observaciones}
                  onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                  rows={3}
                />
              </div>

<div className="pt-4 border-t">
                <div className="flex justify-between items-center mb-4">
                  <span className="font-medium">TOTAL</span>
                  <span className="text-2xl font-bold text-green-600">S/. {total.toFixed(2)}</span>
                </div>
              </div>

<Button type="submit" className="w-full" size="lg" disabled={!isFormValid || registrando}>
                {registrando && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Registrar Venta
              </Button>
            </form>
          </CardContent>
        </Card>

{/* Kardex */}
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>KARDEX</CardTitle>
            </CardHeader>
            <CardContent>
              {loadingKardex ? (
                <div className="text-center py-8">
                  <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
                  Cargando kardex...
                </div>
              ) : kardexAgregado.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">No hay movimientos en kardex</div>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>CATEGORÍA</TableHead>
                      <TableHead className="text-right">PESO TOTAL</TableHead>
                      <TableHead className="text-right">PESO DISPONIBLE</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {kardexAgregado.map((item, index) => (
                      <TableRow key={index}>
                        <TableCell className="font-medium">{item.categoria}</TableCell>
                        <TableCell className="text-right">{item.pesoTotal.toFixed(2)}</TableCell>
                        <TableCell className="text-right font-bold text-green-600">
                          {item.pesoDisponible.toFixed(2)}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/numero-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"

export interface NumeroGenerado {
  tipo: "lote" | "guia" | "liquidacion" | "factura"
  numero: string
  secuencial: number
}

export class NumeroService {
  // Generar número de lote: LOTE-AAAA-XXX
  async generarNumeroLote(): Promise<string> {
    try {
      const response = await ApiService.post<NumeroGenerado>(
        `${API_ENDPOINTS.BASE}/numeros/lote`,
        {}
      )
      return response.numero
    } catch (error) {
      // Fallback local si el backend no tiene el endpoint
      const year = new Date().getFullYear()
      const timestamp = Date.now()
      const random = Math.floor(Math.random() * 1000)
      return `LOTE-${year}-${String(timestamp).slice(-3)}${String(random).slice(0, 1)}`
    }
  }

// Generar número de guía: GI-XXX-AAAA
  async generarNumeroGuia(): Promise<string> {
    try {
      const response = await ApiService.post<NumeroGenerado>(
        `${API_ENDPOINTS.BASE}/numeros/guia`,
        {}
      )
      return response.numero
    } catch (error) {
      const year = new Date().getFullYear()
      const timestamp = Date.now()
      const random = Math.floor(Math.random() * 1000)
      return `GI-${String(random).slice(-3)}-${year}`
    }
  }

// Generar número de liquidación: LIQ-XXX-AAAA
  async generarNumeroLiquidacion(): Promise<string> {
    try {
      const response = await ApiService.post<NumeroGenerado>(
        `${API_ENDPOINTS.BASE}/numeros/liquidacion`,
        {}
      )
      return response.numero
    } catch (error) {
      const year = new Date().getFullYear()
      const timestamp = Date.now()
      const random = Math.floor(Math.random() * 1000)
      return `LIQ-${String(random).slice(-3)}-${year}`
    }
  }

// Generar número de factura: FACT-XXX-AAAA
  async generarNumeroFactura(): Promise<string> {
    try {
      const response = await ApiService.post<NumeroGenerado>(
        `${API_ENDPOINTS.BASE}/numeros/factura`,
        {}
      )
      return response.numero
    } catch (error) {
      const year = new Date().getFullYear()
      const timestamp = Date.now()
      const random = Math.floor(Math.random() * 1000)
      return `FACT-${String(random).slice(-3)}-${year}`
    }
  }
}

export const numeroService = new NumeroService()
[V0_FILE]typescript:file="lib/services/kardex-automatico-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"

export interface KardexMovimiento {
  lote_id: number
  tipo_movimiento: "ingreso" | "salida"
  categoria: "exportable" | "industrial" | "descarte"
  peso: number
  fecha_movimiento: string
  referencia: string
  saldo_categoria: number
}

export class KardexAutomaticoService {
  // Registrar ingreso automático cuando se clasifican pesos
  async registrarIngresoAutomatico(
    lote_id: number,
    datos: {
      peso_exportable: number
      peso_industrial: number
      peso_descarte: number
      fecha: string
    }
  ): Promise<void> {
    try {
      await ApiService.post(`${API_ENDPOINTS.BASE}/kardex/ingreso-automatico`, {
        lote_id,
        ...datos,
      })
    } catch (error) {
      console.error("[v0] Error registrando ingreso automático al kardex:", error)
      throw error
    }
  }

// Registrar salida automática cuando se vende
  async registrarSalidaAutomatica(
    lote_id: number,
    categoria: "exportable" | "industrial" | "descarte",
    peso: number,
    referencia: string,
    fecha: string
  ): Promise<void> {
    try {
      await ApiService.post(`${API_ENDPOINTS.BASE}/kardex/salida-automatica`, {
        lote_id,
        categoria,
        peso,
        referencia,
        fecha,
      })
    } catch (error) {
      console.error("[v0] Error registrando salida automática del kardex:", error)
      throw error
    }
  }

// Obtener saldo disponible por categoría para un lote
  async obtenerSaldoDisponible(lote_id: number): Promise<{
    exportable: number
    industrial: number
    descarte: number
  }> {
    try {
      const response = await ApiService.get<{
        exportable: number
        industrial: number
        descarte: number
      }>(`${API_ENDPOINTS.BASE}/kardex/saldo/${lote_id}`)
      return response
    } catch (error) {
      console.error("[v0] Error obteniendo saldo disponible:", error)
      return { exportable: 0, industrial: 0, descarte: 0 }
    }
  }
}

export const kardexAutomaticoService = new KardexAutomaticoService()
[V0_FILE]typescript:file="lib/services/descuentos-service.ts" isMerged="true"
export interface ConfiguracionDescuentos {
  jabas_precio: number
  flete_porcentaje: number
  recibo_egreso_porcentaje: number
  cosecha_porcentaje: number
  costo_procesamiento_porcentaje: number
}

// Configuración de descuentos según el negocio
export const DESCUENTOS_CONFIG: ConfiguracionDescuentos = {
  jabas_precio: 5.0, // Precio fijo por jaba
  flete_porcentaje: 2.0, // 2% del total
  recibo_egreso_porcentaje: 1.0, // 1% del total
  cosecha_porcentaje: 1.5, // 1.5% del total
  costo_procesamiento_porcentaje: 3.0, // 3% del total
}

export class DescuentosService {
  // Calcular descuentos totales
  calcularDescuentosTotales(
    peso_total: number,
    numero_jabas: number,
    monto_bruto: number,
    config: Partial<ConfiguracionDescuentos> = {}
  ): {
    descuento_jabas: number
    descuento_flete: number
    descuento_recibo_egreso: number
    descuento_cosecha: number
    descuento_procesamiento: number
    total_descuentos: number
    monto_neto: number
  } {
    const cfg = { ...DESCUENTOS_CONFIG, ...config }

const descuento_jabas = numero_jabas * cfg.jabas_precio
    const descuento_flete = monto_bruto * (cfg.flete_porcentaje / 100)
    const descuento_recibo_egreso = monto_bruto * (cfg.recibo_egreso_porcentaje / 100)
    const descuento_cosecha = monto_bruto * (cfg.cosecha_porcentaje / 100)
    const descuento_procesamiento = monto_bruto * (cfg.costo_procesamiento_porcentaje / 100)

const total_descuentos =
      descuento_jabas +
      descuento_flete +
      descuento_recibo_egreso +
      descuento_cosecha +
      descuento_procesamiento

return {
      descuento_jabas,
      descuento_flete,
      descuento_recibo_egreso,
      descuento_cosecha,
      descuento_procesamiento,
      total_descuentos,
      monto_neto: Math.max(0, monto_bruto - total_descuentos),
    }
  }

// Aplicar descuentos a ajustes contables
  aplicarDescuentos(
    monto_bruto: number,
    numero_jabas: number,
    config: Partial<ConfiguracionDescuentos> = {}
  ): number {
    const descuentos = this.calcularDescuentosTotales(0, numero_jabas, monto_bruto, config)
    return descuentos.monto_neto
  }
}

export const descuentosService = new DescuentosService()
[V0_FILE]typescriptreact:file="components/ingreso-lotes-completo.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Plus, Search, CheckCircle, AlertCircle, Loader2 } from 'lucide-react'

import { useApi } from "@/lib/hooks/use-api"
import { usePersonas } from "@/lib/hooks/use-personas"
import { lotesService } from "@/lib/services/lotes-service"
import { numeroService } from "@/lib/services/numero-service"
import { kardexAutomaticoService } from "@/lib/services/kardex-automatico-service"

export default function IngresoLotesCompleto() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedProducer, setSelectedProducer] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [numeroLoteGenerado, setNumeroLoteGenerado] = useState("")
  const [numeroGuiaGenerado, setNumeroGuiaGenerado] = useState("")

const [formData, setFormData] = useState({
    producto: "Espárragos Verdes",
    peso_inicial: "",
    numero_jabas: "",
    observaciones: "",
  })

const { data: productores } = usePersonas()
  const { data: lotes, create: createLote } = useApi(lotesService, { initialLoad: true })

const filteredProductores = (Array.isArray(productores) ? productores : [])
    .filter((p) =>
      p.nombre_completo?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      p.documento_identidad?.includes(searchTerm)
    )
    .slice(0, 5)

const handleGenerarNumeros = async () => {
    setLoading(true)
    try {
      const lote = await numeroService.generarNumeroLote()
      const guia = await numeroService.generarNumeroGuia()
      setNumeroLoteGenerado(lote)
      setNumeroGuiaGenerado(guia)
      console.log("[v0] Números generados:", { lote, guia })
    } catch (error) {
      console.error("[v0] Error generando números:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async () => {
    if (!selectedProducer || !formData.peso_inicial || !formData.numero_jabas) {
      alert("Por favor complete todos los campos obligatorios")
      return
    }

if (!numeroLoteGenerado || !numeroGuiaGenerado) {
      alert("Debe generar los números de lote y guía primero")
      return
    }

setLoading(true)
    try {
      // Crear el lote
      const nuevoLote = await createLote({
        numero_lote: numeroLoteGenerado,
        guia_ingreso: numeroGuiaGenerado,
        productor_id: selectedProducer.id,
        producto: formData.producto,
        fecha_ingreso: new Date().toISOString().split("T")[0],
        peso_inicial: Number.parseFloat(formData.peso_inicial),
        numero_jabas: Number.parseInt(formData.numero_jabas),
        estado: "pendiente",
        observaciones: formData.observaciones,
      })

alert(`Lote registrado exitosamente!\nN° Lote: ${numeroLoteGenerado}\nN° Guía: ${numeroGuiaGenerado}`)

// Limpiar formulario
      setFormData({
        producto: "Espárragos Verdes",
        peso_inicial: "",
        numero_jabas: "",
        observaciones: "",
      })
      setSelectedProducer(null)
      setSearchTerm("")
      setNumeroLoteGenerado("")
      setNumeroGuiaGenerado("")
    } catch (error) {
      console.error("[v0] Error:", error)
      alert("Error al registrar el lote")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Ingreso de Materia Prima</h1>
        <p className="text-gray-600 mt-1">Registro de lotes con números auto-generados y kardex automático</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Search className="h-5 w-5" />
                Seleccionar Productor
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="relative">
                <Input
                  placeholder="Buscar por nombre o documento..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>

{filteredProductores.length > 0 && (
                <div className="border rounded-lg max-h-48 overflow-y-auto">
                  {filteredProductores.map((p) => (
                    <div
                      key={p.id}
                      className="p-3 hover:bg-gray-100 cursor-pointer border-b"
                      onClick={() => {
                        setSelectedProducer(p)
                        setSearchTerm(p.nombre_completo)
                      }}
                    >
                      <p className="font-medium">{p.nombre_completo}</p>
                      <p className="text-sm text-gray-600">{p.documento_identidad}</p>
                    </div>
                  ))}
                </div>
              )}

{selectedProducer && (
                <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span className="font-medium">Productor seleccionado</span>
                  </div>
                  <p className="text-sm font-medium">{selectedProducer.nombre_completo}</p>
                </div>
              )}
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Información del Lote</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label>Producto</Label>
                <Select value={formData.producto} onValueChange={(v) => setFormData({ ...formData, producto: v })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Espárragos Verdes">Espárragos Verdes</SelectItem>
                    <SelectItem value="Espárragos Blancos">Espárragos Blancos</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label>Peso Inicial (kg) *</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={formData.peso_inicial}
                  onChange={(e) => setFormData({ ...formData, peso_inicial: e.target.value })}
                  placeholder="0.00"
                />
              </div>

<div>
                <Label>Número de Jabas *</Label>
                <Input
                  type="number"
                  value={formData.numero_jabas}
                  onChange={(e) => setFormData({ ...formData, numero_jabas: e.target.value })}
                  placeholder="0"
                />
              </div>

<div>
                <Label>Observaciones</Label>
                <Textarea
                  value={formData.observaciones}
                  onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                  placeholder="Observaciones del lote..."
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          <Card className="bg-blue-50 border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertCircle className="h-5 w-5 text-blue-600" />
                Generación de Números
              </CardTitle>
              <CardDescription>Auto-incremento del sistema SAYARIQ</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {numeroLoteGenerado && (
                <div className="p-4 bg-white rounded-lg border-2 border-green-500">
                  <p className="text-sm text-gray-600 mb-1">N° Lote</p>
                  <p className="text-2xl font-bold text-green-600">{numeroLoteGenerado}</p>
                </div>
              )}

{numeroGuiaGenerado && (
                <div className="p-4 bg-white rounded-lg border-2 border-green-500">
                  <p className="text-sm text-gray-600 mb-1">N° Guía de Ingreso</p>
                  <p className="text-2xl font-bold text-green-600">{numeroGuiaGenerado}</p>
                </div>
              )}

{!numeroLoteGenerado && (
                <Button
                  onClick={handleGenerarNumeros}
                  disabled={loading}
                  className="w-full bg-blue-600 hover:bg-blue-700"
                >
                  {loading ? (
                    <>
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                      Generando...
                    </>
                  ) : (
                    <>
                      <Plus className="h-4 w-4 mr-2" />
                      Generar Números de Lote y Guía
                    </>
                  )}
                </Button>
              )}

{numeroLoteGenerado && (
                <Button
                  onClick={handleSubmit}
                  disabled={loading}
                  className="w-full h-12 text-lg bg-green-600 hover:bg-green-700"
                >
                  {loading ? (
                    <>
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                      Registrando...
                    </>
                  ) : (
                    <>
                      <CheckCircle className="h-4 w-4 mr-2" />
                      Registrar Lote Completo
                    </>
                  )}
                </Button>
              )}

{numeroLoteGenerado && (
                <Alert className="bg-green-100 border-green-300">
                  <CheckCircle className="h-4 w-4 text-green-600" />
                  <AlertDescription className="text-green-800">
                    Números generados correctamente. El kardex se actualizará automáticamente al clasificar.
                  </AlertDescription>
                </Alert>
              )}
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Últimos Lotes Ingresados</CardTitle>
            </CardHeader>
            <CardContent>
              {lotes.length === 0 ? (
                <p className="text-gray-500 text-center py-4">No hay lotes registrados</p>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>N° Lote</TableHead>
                      <TableHead>Guía</TableHead>
                      <TableHead>Productor</TableHead>
                      <TableHead>Peso</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {lotes.slice(0, 5).map((lote) => (
                      <TableRow key={lote.id}>
                        <TableCell className="font-medium">{lote.numero_lote}</TableCell>
                        <TableCell>{lote.guia_ingreso}</TableCell>
                        <TableCell className="text-sm">{lote.productor_id}</TableCell>
                        <TableCell>{lote.peso_inicial} kg</TableCell>
                        <TableCell>
                          <Badge variant={lote.estado === "pendiente" ? "default" : "secondary"}>
                            {lote.estado}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/clasificacion-completa.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Plus, Calculator, Package, Save, AlertCircle, CheckCircle, Loader2 } from 'lucide-react'

import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { pesosService } from "@/lib/services/pesos-service"
import { ajusteContableService } from "@/lib/services/ajuste-contable-service"
import { kardexAutomaticoService } from "@/lib/services/kardex-automatico-service"
import { descuentosService } from "@/lib/services/descuentos-service"
import type { Lote } from "@/lib/types"

interface ClasificacionFormData {
  peso_exportable: number
  peso_industrial: number
  peso_descarte: number
  precio_exportable: number
  precio_industrial: number
  precio_descarte: number
}

export function ClasificacionCompleta() {
  const { data: lotes, refresh } = useApi(lotesService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedLote, setSelectedLote] = useState<Lote | null>(null)
  const [loading, setLoading] = useState(false)
  const [clasificacion, setClasificacion] = useState<ClasificacionFormData>({
    peso_exportable: 0,
    peso_industrial: 0,
    peso_descarte: 0,
    precio_exportable: 8.5,
    precio_industrial: 4.2,
    precio_descarte: 1.5,
  })

const totalPeso =
    clasificacion.peso_exportable +
    clasificacion.peso_industrial +
    clasificacion.peso_descarte

// Calcular montos brutos por categoría
  const montoExportable = clasificacion.peso_exportable * clasificacion.precio_exportable
  const montoIndustrial = clasificacion.peso_industrial * clasificacion.precio_industrial
  const montoDescarte = clasificacion.peso_descarte * clasificacion.precio_descarte
  const montoBruto = montoExportable + montoIndustrial + montoDescarte

// Calcular descuentos
  const descuentos = descuentosService.calcularDescuentosTotales(
    totalPeso,
    selectedLote?.numero_jabas || 0,
    montoBruto
  )

const isValid = selectedLote && totalPeso <= selectedLote.peso_inicial

const handleInputChange = (key: keyof ClasificacionFormData, value: number) => {
    setClasificacion((prev) => ({ ...prev, [key]: value }))
  }

const handleSaveClasificacion = async () => {
    if (!selectedLote || !isValid) return

setLoading(true)
    try {
      // 1. Registrar pesos del lote
      await pesosService.create({
        lote_id: selectedLote.id,
        fecha_pesado: new Date().toISOString().split("T")[0],
        peso_bruto: selectedLote.peso_inicial,
        peso_exportable: clasificacion.peso_exportable,
        peso_industrial: clasificacion.peso_industrial,
        peso_descarte: clasificacion.peso_descarte,
        observaciones: `Clasificación realizada - Exportable: ${clasificacion.peso_exportable}kg, Industrial: ${clasificacion.peso_industrial}kg, Descarte: ${clasificacion.peso_descarte}kg`,
      })

// 2. Registrar ingreso automático en kardex
      await kardexAutomaticoService.registrarIngresoAutomatico(
        selectedLote.id,
        {
          peso_exportable: clasificacion.peso_exportable,
          peso_industrial: clasificacion.peso_industrial,
          peso_descarte: clasificacion.peso_descarte,
          fecha: new Date().toISOString().split("T")[0],
        }
      )

// 3. Crear ajuste contable con descuentos aplicados
      await ajusteContableService.create({
        lote_id: selectedLote.id,
        tipo_ajuste: "por_proceso",
        peso_exportable: clasificacion.peso_exportable,
        precio_exportable: clasificacion.precio_exportable,
        monto_exportable: montoExportable,
        peso_industrial: clasificacion.peso_industrial,
        precio_industrial: clasificacion.precio_industrial,
        monto_industrial: montoIndustrial,
        peso_descarte: clasificacion.peso_descarte,
        precio_descarte: clasificacion.precio_descarte,
        monto_descarte: montoDescarte,
        total_proceso: descuentos.monto_neto,
        peso_ingreso: selectedLote.peso_inicial,
        precio_kg: montoBruto / selectedLote.peso_inicial,
        total_carga: montoBruto,
        fecha_liquidacion: new Date().toISOString().split("T")[0],
        serie: "B001",
        numero_liquidacion: "",
        observaciones: `Clasificación completada - Descuentos: Jabas S/${descuentos.descuento_jabas.toFixed(2)}, Flete S/${descuentos.descuento_flete.toFixed(2)}, Recibo S/${descuentos.descuento_recibo_egreso.toFixed(2)}, Cosecha S/${descuentos.descuento_cosecha.toFixed(2)}, Procesamiento S/${descuentos.descuento_procesamiento.toFixed(2)}`,
        estado: "pendiente",
      })

// 4. Actualizar estado del lote a "clasificado"
      await lotesService.update(selectedLote.id, {
        estado: "proceso",
        peso_neto: totalPeso,
      })

alert("Clasificación guardada exitosamente!\nKardex actualizado automáticamente.")

setIsDialogOpen(false)
      setSelectedLote(null)
      setClasificacion({
        peso_exportable: 0,
        peso_industrial: 0,
        peso_descarte: 0,
        precio_exportable: 8.5,
        precio_industrial: 4.2,
        precio_descarte: 1.5,
      })

await refresh()
    } catch (error) {
      console.error("[v0] Error al guardar clasificación:", error)
      alert("Error al guardar la clasificación")
    } finally {
      setLoading(false)
    }
  }

const lotesParaClasificar = (lotes as Lote[]).filter(
    (l) => l.estado === "pendiente" || l.estado === "proceso"
  )

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Clasificación de Productos</h2>
          <p className="text-muted-foreground">
            Clasificación automática con cálculo de descuentos y actualización de kardex
          </p>
        </div>
        <Button onClick={() => setIsDialogOpen(true)} size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nueva Clasificación
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Lotes Disponibles para Clasificar</CardTitle>
          <CardDescription>{lotesParaClasificar.length} lotes pendientes de clasificación</CardDescription>
        </CardHeader>
        <CardContent>
          {lotesParaClasificar.length === 0 ? (
            <p className="text-muted-foreground text-center py-4">No hay lotes para clasificar</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>N° Lote</TableHead>
                  <TableHead>N° Guía</TableHead>
                  <TableHead>Peso Inicial</TableHead>
                  <TableHead>Jabas</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {lotesParaClasificar.map((lote) => (
                  <TableRow key={lote.id}>
                    <TableCell className="font-medium">{lote.numero_lote}</TableCell>
                    <TableCell>{lote.guia_ingreso}</TableCell>
                    <TableCell>{lote.peso_inicial} kg</TableCell>
                    <TableCell>{lote.numero_jabas}</TableCell>
                    <TableCell>
                      <Badge variant={lote.estado === "pendiente" ? "default" : "secondary"}>
                        {lote.estado}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => {
                          setSelectedLote(lote)
                          setIsDialogOpen(true)
                        }}
                      >
                        Clasificar
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Package className="h-5 w-5" />
              Clasificar Lote - {selectedLote?.numero_lote}
            </DialogTitle>
          </DialogHeader>

{selectedLote && (
            <Tabs defaultValue="clasificacion" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="clasificacion">Clasificación</TabsTrigger>
                <TabsTrigger value="resumen">Resumen Financiero</TabsTrigger>
              </TabsList>

<TabsContent value="clasificacion" className="space-y-6">
                <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">N° Lote</p>
                      <p className="font-semibold">{selectedLote.numero_lote}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Peso Inicial</p>
                      <p className="font-semibold">{selectedLote.peso_inicial} kg</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">N° Jabas</p>
                      <p className="font-semibold">{selectedLote.numero_jabas}</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <div>
                    <h3 className="font-semibold mb-4 flex items-center gap-2">
                      <Package className="h-4 w-4" />
                      Pesos por Categoría
                    </h3>
                    <div className="grid grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label>Exportable (kg)</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.peso_exportable}
                          onChange={(e) =>
                            handleInputChange("peso_exportable", Number(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Industrial (kg)</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.peso_industrial}
                          onChange={(e) =>
                            handleInputChange("peso_industrial", Number(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Descarte (kg)</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.peso_descarte}
                          onChange={(e) =>
                            handleInputChange("peso_descarte", Number(e.target.value))
                          }
                        />
                      </div>
                    </div>
                  </div>

<div>
                    <h3 className="font-semibold mb-4 flex items-center gap-2">
                      <Calculator className="h-4 w-4" />
                      Precios por Categoría (S/ kg)
                    </h3>
                    <div className="grid grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label>Precio Exportable</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.precio_exportable}
                          onChange={(e) =>
                            handleInputChange("precio_exportable", Number(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Precio Industrial</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.precio_industrial}
                          onChange={(e) =>
                            handleInputChange("precio_industrial", Number(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Precio Descarte</Label>
                        <Input
                          type="number"
                          step="0.01"
                          value={clasificacion.precio_descarte}
                          onChange={(e) =>
                            handleInputChange("precio_descarte", Number(e.target.value))
                          }
                        />
                      </div>
                    </div>
                  </div>

<Card className="bg-amber-50 border-amber-200">
                    <CardContent className="pt-6">
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span>Total Peso Clasificado:</span>
                          <span className="font-semibold">{totalPeso.toFixed(2)} kg</span>
                        </div>
                        <div
                          className={`flex justify-between ${
                            isValid ? "text-green-600" : "text-red-600"
                          }`}
                        >
                          <span>Diferencia:</span>
                          <span className="font-semibold">
                            {(selectedLote.peso_inicial - totalPeso).toFixed(2)} kg
                          </span>
                        </div>
                        {!isValid && (
                          <Alert className="mt-2 bg-red-50 border-red-300">
                            <AlertCircle className="h-4 w-4 text-red-600" />
                            <AlertDescription className="text-red-800">
                              El total clasificado excede el peso inicial
                            </AlertDescription>
                          </Alert>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

<TabsContent value="resumen" className="space-y-6">
                <div className="space-y-4">
                  <div className="grid grid-cols-3 gap-4">
                    <Card>
                      <CardContent className="pt-6">
                        <p className="text-sm text-muted-foreground mb-1">Monto Exportable</p>
                        <p className="text-2xl font-bold text-green-600">
                          S/ {montoExportable.toFixed(2)}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                          {clasificacion.peso_exportable} kg × S/{clasificacion.precio_exportable}
                        </p>
                      </CardContent>
                    </Card>

<Card>
                      <CardContent className="pt-6">
                        <p className="text-sm text-muted-foreground mb-1">Monto Industrial</p>
                        <p className="text-2xl font-bold text-blue-600">
                          S/ {montoIndustrial.toFixed(2)}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                          {clasificacion.peso_industrial} kg × S/{clasificacion.precio_industrial}
                        </p>
                      </CardContent>
                    </Card>

<Card>
                      <CardContent className="pt-6">
                        <p className="text-sm text-muted-foreground mb-1">Monto Descarte</p>
                        <p className="text-2xl font-bold text-gray-600">
                          S/ {montoDescarte.toFixed(2)}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                          {clasificacion.peso_descarte} kg × S/{clasificacion.precio_descarte}
                        </p>
                      </CardContent>
                    </Card>
                  </div>

<Card className="bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Monto Bruto</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-3xl font-bold text-orange-600">S/ {montoBruto.toFixed(2)}</p>
                    </CardContent>
                  </Card>

<Card className="bg-red-50 border-red-200">
                    <CardHeader>
                      <CardTitle className="text-lg">Descuentos Aplicados</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm">Descuento Jabas:</span>
                        <span className="font-semibold">
                          -S/ {descuentos.descuento_jabas.toFixed(2)}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Descuento Flete (2%):</span>
                        <span className="font-semibold">
                          -S/ {descuentos.descuento_flete.toFixed(2)}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Descuento Recibo Egreso (1%):</span>
                        <span className="font-semibold">
                          -S/ {descuentos.descuento_recibo_egreso.toFixed(2)}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Descuento Cosecha (1.5%):</span>
                        <span className="font-semibold">
                          -S/ {descuentos.descuento_cosecha.toFixed(2)}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Descuento Procesamiento (3%):</span>
                        <span className="font-semibold">
                          -S/ {descuentos.descuento_procesamiento.toFixed(2)}
                        </span>
                      </div>
                      <div className="border-t pt-2 mt-2 flex justify-between font-bold">
                        <span>Total Descuentos:</span>
                        <span className="text-red-600">
                          -S/ {descuentos.total_descuentos.toFixed(2)}
                        </span>
                      </div>
                    </CardContent>
                  </Card>

<Card className="bg-green-50 border-green-200">
                    <CardHeader>
                      <CardTitle className="text-lg flex items-center gap-2">
                        <CheckCircle className="h-5 w-5 text-green-600" />
                        Monto Neto (para Liquidación)
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-4xl font-bold text-green-600">
                        S/ {descuentos.monto_neto.toFixed(2)}
                      </p>
                    </CardContent>
                  </Card>

<Alert className="bg-blue-50 border-blue-300">
                    <AlertCircle className="h-4 w-4 text-blue-600" />
                    <AlertDescription className="text-blue-800">
                      El kardex se actualizará automáticamente con: Exportable {clasificacion.peso_exportable} kg,
                      Industrial {clasificacion.peso_industrial} kg, Descarte {clasificacion.peso_descarte} kg
                    </AlertDescription>
                  </Alert>
                </div>
              </TabsContent>
            </Tabs>
          )}

<div className="flex gap-2 mt-6">
            <Button
              variant="outline"
              onClick={() => {
                setIsDialogOpen(false)
                setSelectedLote(null)
              }}
            >
              Cancelar
            </Button>
            <Button
              onClick={handleSaveClasificacion}
              disabled={!isValid || loading}
              className="flex-1"
            >
              {loading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Guardando...
                </>
              ) : (
                <>
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Clasificación
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/liquidacion-completa.tsx" isMerged="true"
"use client"

import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { ajusteContableService } from "@/lib/services/ajuste-contable-service"
import { adelantosService } from "@/lib/services/adelantos-service"
import { numeroService } from "@/lib/services/numero-service"
import type { Lote } from "@/lib/types"

interface LiquidacionData {
  lote_id: number
  productor_id: number
  monto_bruto: number
  adelantos_aplicados: number
  monto_neto: number
  estado: "pendiente" | "cancelado" | "deficit"
  numero_liquidacion: string
}

export function LiquidacionCompleta() {
  const { data: lotes } = useApi(lotesService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedLote, setSelectedLote] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [numeroLiquidacion, setNumeroLiquidacion] = useState("")
  const [adelantosSeleccionados, setAdelantosSeleccionados] = useState<number[]>([])
  const [adelantos, setAdelantos] = useState<any[]>([])
  const [ajusteContable, setAjusteContable] = useState<any>(null)

const cargarDatos = async (lote: Lote) => {
    try {
      // Cargar ajuste contable
      const ajustes = await ajusteContableService.getAll()
      const ajuste = ajustes.find((a) => a.lote_id === lote.id)
      setAjusteContable(ajuste)

// Cargar adelantos del productor
      const todos = await adelantosService.getByProductor(lote.productor_id)
      setAdelantos(todos)

// Generar número de liquidación
      const numero = await numeroService.generarNumeroLiquidacion()
      setNumeroLiquidacion(numero)
    } catch (error) {
      console.error("[v0] Error cargando datos:", error)
    }
  }

const handleSelectLote = async (lote: Lote) => {
    setSelectedLote(lote)
    await cargarDatos(lote)
    setIsDialogOpen(true)
  }

// Calcular totales
  const totalAdelantosSeleccionados = adelantos
    .filter((a) => adelantosSeleccionados.includes(a.id))
    .reduce((sum, a) => sum + a.monto, 0)

const montoBruto = ajusteContable?.total_proceso || 0
  const montoNeto = Math.max(0, montoBruto - totalAdelantosSeleccionados)
  const estado: "pendiente" | "cancelado" | "deficit" =
    montoNeto === 0 ? "cancelado" : montoNeto < 0 ? "deficit" : "pendiente"

const lotesParaLiquidar = (lotes as Lote[]).filter((l) => l.estado === "proceso")

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Liquidación de Lotes</h2>
          <p className="text-muted-foreground">
            Cálculo automático con múltiples adelantos y control de déficit
          </p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Lotes Listos para Liquidar</CardTitle>
          <CardDescription>
            {lotesParaLiquidar.length} lotes clasificados listos para liquidación
          </CardDescription>
        </CardHeader>
        <CardContent>
          {lotesParaLiquidar.length === 0 ? (
            <p className="text-muted-foreground text-center py-4">
              No hay lotes clasificados para liquidar
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>N° Lote</TableHead>
                  <TableHead>Productor</TableHead>
                  <TableHead>Peso Neto</TableHead>
                  <TableHead>Monto Bruto</TableHead>
                  <TableHead>Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {lotesParaLiquidar.map((lote) => (
                  <TableRow key={lote.id}>
                    <TableCell className="font-medium">{lote.numero_lote}</TableCell>
                    <TableCell>{lote.productor_id}</TableCell>
                    <TableCell>{lote.peso_neto} kg</TableCell>
                    <TableCell className="text-green-600 font-semibold">S/ 0.00</TableCell>
                    <TableCell>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleSelectLote(lote)}
                      >
                        <Eye className="h-4 w-4 mr-1" />
                        Liquidar
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <DollarSign className="h-5 w-5" />
              Liquidación - {selectedLote?.numero_lote}
            </DialogTitle>
          </DialogHeader>

{selectedLote && ajusteContable && (
            <div className="space-y-6">
              {/* Información del Lote */}
              <Card className="bg-blue-50 border-blue-200">
                <CardContent className="pt-6">
                  <div className="grid grid-cols-4 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">N° Lote</p>
                      <p className="font-semibold">{selectedLote.numero_lote}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">N° Liquidación</p>
                      <p className="font-semibold">{numeroLiquidacion}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Peso Neto</p>
                      <p className="font-semibold">{selectedLote.peso_neto} kg</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Jabas</p>
                      <p className="font-semibold">{selectedLote.numero_jabas}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Resumen de Montos */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <DollarSign className="h-4 w-4" />
                    Resumen Financiero
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-3 bg-green-50 rounded-lg">
                      <p className="text-sm text-muted-foreground">Exportable</p>
                      <p className="text-xl font-bold text-green-600">
                        S/ {ajusteContable.monto_exportable?.toFixed(2) || "0.00"}
                      </p>
                      <p className="text-xs text-gray-500">
                        {ajusteContable.peso_exportable} kg × S/{ajusteContable.precio_exportable}
                      </p>
                    </div>
                    <div className="p-3 bg-blue-50 rounded-lg">
                      <p className="text-sm text-muted-foreground">Industrial</p>
                      <p className="text-xl font-bold text-blue-600">
                        S/ {ajusteContable.monto_industrial?.toFixed(2) || "0.00"}
                      </p>
                      <p className="text-xs text-gray-500">
                        {ajusteContable.peso_industrial} kg × S/{ajusteContable.precio_industrial}
                      </p>
                    </div>
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <p className="text-sm text-muted-foreground">Descarte</p>
                      <p className="text-xl font-bold text-gray-600">
                        S/ {ajusteContable.monto_descarte?.toFixed(2) || "0.00"}
                      </p>
                      <p className="text-xs text-gray-500">
                        {ajusteContable.peso_descarte} kg × S/{ajusteContable.precio_descarte}
                      </p>
                    </div>
                    <div className="p-3 bg-orange-50 rounded-lg border-2 border-orange-300">
                      <p className="text-sm text-muted-foreground">Monto Bruto</p>
                      <p className="text-2xl font-bold text-orange-600">
                        S/ {montoBruto.toFixed(2)}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Adelantos */}
              <Card>
                <CardHeader>
                  <CardTitle>Adelantos del Productor</CardTitle>
                  <CardDescription>
                    {adelantos.length} adelanto(s) disponible(s) - Seleccione cuáles aplicar
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {adelantos.length === 0 ? (
                    <p className="text-muted-foreground text-center py-4">
                      Sin adelantos registrados
                    </p>
                  ) : (
                    <div className="space-y-2">
                      {adelantos.map((adelanto) => (
                        <div
                          key={adelanto.id}
                          className="flex items-center gap-3 p-3 border rounded-lg hover:bg-gray-50"
                        >
                          <input
                            type="checkbox"
                            checked={adelantosSeleccionados.includes(adelanto.id)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                setAdelantosSeleccionados([
                                  ...adelantosSeleccionados,
                                  adelanto.id,
                                ])
                              } else {
                                setAdelantosSeleccionados(
                                  adelantosSeleccionados.filter((id) => id !== adelanto.id)
                                )
                              }
                            }}
                            className="w-4 h-4"
                          />
                          <div className="flex-1">
                            <p className="font-medium">{adelanto.motivo}</p>
                            <p className="text-sm text-gray-600">
                              Fecha: {adelanto.fecha_adelanto} - Estado: {adelanto.estado}
                            </p>
                          </div>
                          <div className="text-right">
                            <p className="font-bold text-lg">S/ {adelanto.monto.toFixed(2)}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>

{/* Cálculo Final */}
              <Card className={estado === "cancelado" ? "bg-green-50 border-green-200" : "bg-red-50 border-red-200"}>
                <CardContent className="pt-6 space-y-4">
                  <div className="flex justify-between">
                    <span className="font-semibold">Monto Bruto:</span>
                    <span className="text-lg font-bold">S/ {montoBruto.toFixed(2)}</span>
                  </div>

<div className="border-t pt-3">
                    <div className="flex justify-between mb-2">
                      <span>Menos: Adelantos Seleccionados</span>
                      <span className="font-semibold">
                        -S/ {totalAdelantosSeleccionados.toFixed(2)}
                      </span>
                    </div>
                  </div>

<div className="border-t pt-3 flex justify-between items-center">
                    <span className="text-lg font-bold">
                      {estado === "deficit" ? "Déficit a Cobrar:" : "Monto a Pagar:"}
                    </span>
                    <span
                      className={`text-2xl font-bold ${
                        estado === "cancelado"
                          ? "text-green-600"
                          : estado === "deficit"
                            ? "text-red-600"
                            : "text-blue-600"
                      }`}
                    >
                      S/ {Math.abs(montoNeto).toFixed(2)}
                    </span>
                  </div>

<Badge
                    className="w-full justify-center py-2 text-base"
                    variant={estado === "cancelado" ? "default" : "destructive"}
                  >
                    {estado === "cancelado"
                      ? "CANCELADO - Sin saldo pendiente"
                      : estado === "deficit"
                        ? "DÉFICIT - Productor debe"
                        : "PENDIENTE DE PAGO"}
                  </Badge>

{estado === "deficit" && (
                    <Alert className="bg-red-100 border-red-400">
                      <AlertCircle className="h-4 w-4 text-red-600" />
                      <AlertDescription className="text-red-800">
                        El productor tiene un déficit de S/ {Math.abs(montoNeto).toFixed(2)} que
                        debe cubrir con futuros adelantos.
                      </AlertDescription>
                    </Alert>
                  )}
                </CardContent>
              </Card>

<div className="flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => setIsDialogOpen(false)}
                >
                  Cancelar
                </Button>
                <Button className="flex-1 bg-green-600 hover:bg-green-700">
                  {loading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Guardando...
                    </>
                  ) : (
                    <>
                      <CheckCircle className="mr-2 h-4 w-4" />
                      Guardar Liquidación
                    </>
                  )}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/libro-banco-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"

export interface LibroBancoEntry {
  id?: number
  fecha: string
  operacion: string
  de_quien: string
  a_quien: string
  motivo: string
  rubro: "campo" | "economico" | "ventas"
  tipo_operacion: "adelanto" | "venta" | "pago" | "impuesto" | "otros"
  numero_operacion: string
  comprobante: string
  deudor: number
  acreedor: number
  estado: "cancelado" | "pendiente"
  agricultor?: string
  created_at?: string
}

export class LibroBancoService {
  async getAll(): Promise<LibroBancoEntry[]> {
    const response = await ApiService.get<LibroBancoEntry[]>(API_ENDPOINTS.BANCO)
    return response
  }

async create(data: Omit<LibroBancoEntry, "id" | "created_at">): Promise<LibroBancoEntry> {
    const response = await ApiService.post<LibroBancoEntry>(
      API_ENDPOINTS.BANCO,
      data
    )
    return response
  }

// Registrar pago automático en Libro Banco
  async registrarPagoAutomatico(
    productor_nombre: string,
    monto: number,
    referencia: string,
    fecha: string
  ): Promise<LibroBancoEntry> {
    return this.create({
      fecha,
      operacion: "Pago a productor",
      de_quien: "SAYARIQ SYSTEM",
      a_quien: productor_nombre,
      motivo: referencia,
      rubro: "campo",
      tipo_operacion: "pago",
      numero_operacion: `PAGO-${Date.now()}`,
      comprobante: "",
      deudor: monto,
      acreedor: 0,
      estado: "pendiente",
      agricultor: productor_nombre,
    })
  }

// Registrar venta automática en Libro Banco
  async registrarVentaAutomatica(
    cliente_nombre: string,
    monto: number,
    referencia: string,
    fecha: string
  ): Promise<LibroBancoEntry> {
    return this.create({
      fecha,
      operacion: "Venta de espárragos",
      de_quien: cliente_nombre,
      a_quien: "SAYARIQ SYSTEM",
      motivo: referencia,
      rubro: "ventas",
      tipo_operacion: "venta",
      numero_operacion: `VENTA-${Date.now()}`,
      comprobante: "",
      deudor: 0,
      acreedor: monto,
      estado: "cancelado",
    })
  }

// Registrar adelanto automático en Libro Banco
  async registrarAdelantoAutomatico(
    productor_nombre: string,
    monto: number,
    fecha: string
  ): Promise<LibroBancoEntry> {
    return this.create({
      fecha,
      operacion: "Adelanto a productor",
      de_quien: "SAYARIQ SYSTEM",
      a_quien: productor_nombre,
      motivo: "Adelanto para cosecha",
      rubro: "campo",
      tipo_operacion: "adelanto",
      numero_operacion: `ADELANTO-${Date.now()}`,
      comprobante: "",
      deudor: monto,
      acreedor: 0,
      estado: "cancelado",
      agricultor: productor_nombre,
    })
  }
}

export const libroBancoService = new LibroBancoService()
[V0_FILE]typescript:file="lib/services/pago-campo-completo-service.ts" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import { libroBancoService } from "./libro-banco-service"

export interface PagoCampoCompleto {
  id?: number
  lote_id: number
  productor_id: number
  numero_liquidacion: string
  monto_liquidacion: number
  adelantos_aplicados: number
  monto_neto: number
  monto_pagado: number
  saldo_pendiente: number
  estado: "pendiente" | "cancelado" | "deficit"
  fecha_pago: string
  comprobante: string
  observaciones: string
  created_at?: string
  updated_at?: string
}

export class PagoCampoCompletoService {
  async getAll(): Promise<PagoCampoCompleto[]> {
    const response = await ApiService.get<PagoCampoCompleto[]>(API_ENDPOINTS.PAGO_CAMPO)
    return response
  }

async create(data: Omit<PagoCampoCompleto, "id" | "created_at" | "updated_at">): Promise<PagoCampoCompleto> {
    const response = await ApiService.post<PagoCampoCompleto>(
      API_ENDPOINTS.PAGO_CAMPO,
      data
    )
    return response
  }

async update(
    id: number,
    data: Partial<Omit<PagoCampoCompleto, "id" | "created_at" | "updated_at">>
  ): Promise<PagoCampoCompleto> {
    const response = await ApiService.put<PagoCampoCompleto>(
      API_ENDPOINTS.PAGO_CAMPO_BY_ID(id),
      data
    )
    return response
  }

// Registrar pago con actualización automática a Libro Banco
  async registrarPagoConLibroBanco(
    pago: Omit<PagoCampoCompleto, "id" | "created_at" | "updated_at">,
    productor_nombre: string
  ): Promise<{
    pago: PagoCampoCompleto
    libroBanco: any
  }> {
    // Crear pago
    const pagoCr = await this.create(pago)

// Registrar en Libro Banco automáticamente
    const libroBanco = await libroBancoService.registrarPagoAutomatico(
      productor_nombre,
      pago.monto_pagado,
      `Liquidación ${pago.numero_liquidacion}`,
      pago.fecha_pago
    )

return { pago: pagoCr, libroBanco }
  }
}

export const pagoCampoCompletoService = new PagoCampoCompletoService()
[V0_FILE]typescriptreact:file="components/ventas-integrada.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Plus, AlertCircle, CheckCircle, Loader2 } from 'lucide-react'

import { useApi } from "@/lib/hooks/use-api"
import { pedidosService } from "@/lib/services/pedidos-service"
import { kardexAutomaticoService } from "@/lib/services/kardex-automatico-service"
import { libroBancoService } from "@/lib/services/libro-banco-service"
import { numeroService } from "@/lib/services/numero-service"
import type { Pedido } from "@/lib/types"

interface VentaData {
  pedido_id: number
  kg_vendido: number
  precio_unitario: number
}

export function VentasIntegrada() {
  const { data: pedidos, refresh } = useApi(pedidosService, { initialLoad: true })
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [selectedPedido, setSelectedPedido] = useState<Pedido | null>(null)
  const [loading, setLoading] = useState(false)
  const [numeroFactura, setNumeroFactura] = useState("")
  const [ventaData, setVentaData] = useState<VentaData>({
    pedido_id: 0,
    kg_vendido: 0,
    precio_unitario: 0,
  })

const handleSelectPedido = async (pedido: Pedido) => {
    setSelectedPedido(pedido)
    setVentaData({
      pedido_id: pedido.id,
      kg_vendido: pedido.kg_neto || 0,
      precio_unitario: pedido.precio || 0,
    })

// Generar número de factura
    const numero = await numeroService.generarNumeroFactura()
    setNumeroFactura(numero)

setIsDialogOpen(true)
  }

const montoTotal = ventaData.kg_vendido * ventaData.precio_unitario

const handleGuardarVenta = async () => {
    if (!selectedPedido) return

setLoading(true)
    try {
      const fecha = new Date().toISOString().split("T")[0]

// 1. Registrar salida automática en kardex
      const lote_id = selectedPedido.lote_id || 1 // Obtener del pedido
      await kardexAutomaticoService.registrarSalidaAutomatica(
        lote_id,
        "exportable", // Asumir categoría exportable
        ventaData.kg_vendido,
        numeroFactura,
        fecha
      )

// 2. Registrar venta automática en Libro Banco
      await libroBancoService.registrarVentaAutomatica(
        selectedPedido.cliente_nombre || "Cliente",
        montoTotal,
        numeroFactura,
        fecha
      )

// 3. Actualizar estado del pedido
      await pedidosService.update(selectedPedido.id, {
        estado: "completado",
      })

alert(
        `Venta registrada exitosamente!\nN° Factura: ${numeroFactura}\nKardex y Libro Banco actualizados automáticamente.`
      )

setIsDialogOpen(false)
      setSelectedPedido(null)
      setNumeroFactura("")
      setVentaData({ pedido_id: 0, kg_vendido: 0, precio_unitario: 0 })

await refresh()
    } catch (error) {
      console.error("[v0] Error registrando venta:", error)
      alert("Error al registrar la venta")
    } finally {
      setLoading(false)
    }
  }

const pedidosPendientes = (pedidos as Pedido[]).filter(
    (p) => p.estado === "pendiente" || p.estado === "proceso"
  )

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">Ventas</h2>
          <p className="text-muted-foreground">
            Registro de ventas con kardex automático y libro banco
          </p>
        </div>
        <Button size="lg">
          <Plus className="mr-2 h-5 w-5" />
          Nueva Venta
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Pedidos Pendientes</CardTitle>
          <CardDescription>{pedidosPendientes.length} pedidos listos para vender</CardDescription>
        </CardHeader>
        <CardContent>
          {pedidosPendientes.length === 0 ? (
            <p className="text-muted-foreground text-center py-4">No hay pedidos pendientes</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>N° Pedido</TableHead>
                  <TableHead>Cliente</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead>Kg Neto</TableHead>
                  <TableHead>Precio</TableHead>
                  <TableHead>Total</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead>Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pedidosPendientes.map((pedido) => (
                  <TableRow key={pedido.id}>
                    <TableCell className="font-medium">{pedido.numero_pedido}</TableCell>
                    <TableCell>{pedido.cliente_nombre}</TableCell>
                    <TableCell>{pedido.producto}</TableCell>
                    <TableCell>{pedido.kg_neto} kg</TableCell>
                    <TableCell>S/ {pedido.precio?.toFixed(2) || "0.00"}</TableCell>
                    <TableCell className="text-green-600 font-semibold">
                      S/ {((pedido.kg_neto || 0) * (pedido.precio || 0)).toFixed(2)}
                    </TableCell>
                    <TableCell>
                      <Badge variant={pedido.estado === "pendiente" ? "default" : "secondary"}>
                        {pedido.estado}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleSelectPedido(pedido)}
                      >
                        Vender
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>
              Registrar Venta - {selectedPedido?.numero_pedido}
            </DialogTitle>
          </DialogHeader>

{selectedPedido && (
            <div className="space-y-6">
              <Card className="bg-blue-50 border-blue-200">
                <CardContent className="pt-6">
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">N° Factura</p>
                      <p className="font-semibold text-lg">{numeroFactura}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Cliente</p>
                      <p className="font-semibold">{selectedPedido.cliente_nombre}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Fecha</p>
                      <p className="font-semibold">{new Date().toISOString().split("T")[0]}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<div className="space-y-4">
                <div>
                  <Label>Kg Disponible para Vender</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={ventaData.kg_vendido}
                    onChange={(e) =>
                      setVentaData({
                        ...ventaData,
                        kg_vendido: Number(e.target.value),
                      })
                    }
                  />
                </div>

<div>
                  <Label>Precio Unitario (S/ kg)</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={ventaData.precio_unitario}
                    onChange={(e) =>
                      setVentaData({
                        ...ventaData,
                        precio_unitario: Number(e.target.value),
                      })
                    }
                  />
                </div>
              </div>

<Card className="bg-green-50 border-green-200">
                <CardContent className="pt-6">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span>Kg Vendidos:</span>
                      <span className="font-semibold">{ventaData.kg_vendido} kg</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Precio Unitario:</span>
                      <span className="font-semibold">S/ {ventaData.precio_unitario.toFixed(2)}</span>
                    </div>
                    <div className="border-t pt-2 flex justify-between text-lg font-bold">
                      <span>Monto Total:</span>
                      <span className="text-green-600">S/ {montoTotal.toFixed(2)}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Alert className="bg-blue-50 border-blue-300">
                <AlertCircle className="h-4 w-4 text-blue-600" />
                <AlertDescription className="text-blue-800">
                  Se registrará automáticamente: Kardex (salida {ventaData.kg_vendido} kg),
                  Factura #{numeroFactura}, Libro Banco (ingreso S/ {montoTotal.toFixed(2)})
                </AlertDescription>
              </Alert>

<div className="flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => setIsDialogOpen(false)}
                >
                  Cancelar
                </Button>
                <Button
                  onClick={handleGuardarVenta}
                  disabled={loading}
                  className="flex-1 bg-green-600 hover:bg-green-700"
                >
                  {loading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Procesando...
                    </>
                  ) : (
                    <>
                      <CheckCircle className="mr-2 h-4 w-4" />
                      Registrar Venta
                    </>
                  )}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-reportes.tsx" isMerged="true"
"use client"

import { useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart, LineChart, PieChart, TrendingUp, DollarSign, Package, Users } from 'lucide-react'

import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { libroBancoService } from "@/lib/services/libro-banco-service"
import { liquidacionesService } from "@/lib/services/liquidaciones-service"

export function DashboardReportes() {
  const { data: lotes } = useApi(lotesService, { initialLoad: true })
  const { data: libroBanco } = useApi(libroBancoService, { initialLoad: true })
  const { data: liquidaciones } = useApi(liquidacionesService, { initialLoad: true })

// Cálculos agregados
  const stats = useMemo(() => {
    const lotesTotal = Array.isArray(lotes) ? lotes.length : 0
    const lotesCompletados = Array.isArray(lotes) ? lotes.filter((l) => l.estado === "liquidado").length : 0
    const pesoTotal = Array.isArray(lotes)
      ? lotes.reduce((sum, l) => sum + (l.peso_inicial || 0), 0)
      : 0

const ingresos = Array.isArray(libroBanco)
      ? libroBanco
          .filter((e) => e.tipo_operacion === "venta")
          .reduce((sum, e) => sum + (e.acreedor || 0), 0)
      : 0

const egresos = Array.isArray(libroBanco)
      ? libroBanco
          .filter((e) => e.tipo_operacion === "pago")
          .reduce((sum, e) => sum + (e.deudor || 0), 0)
      : 0

const montoLiquidaciones = Array.isArray(liquidaciones)
      ? liquidaciones.reduce((sum, l) => sum + (l.monto_total || 0), 0)
      : 0

return {
      lotesTotal,
      lotesCompletados,
      pesoTotal: pesoTotal.toFixed(2),
      ingresos: ingresos.toFixed(2),
      egresos: egresos.toFixed(2),
      balance: (ingresos - egresos).toFixed(2),
      montoLiquidaciones: montoLiquidaciones.toFixed(2),
    }
  }, [lotes, libroBanco, liquidaciones])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Dashboard de Reportes</h1>
        <p className="text-muted-foreground mt-1">Resumen financiero y operativo del negocio</p>
      </div>

{/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Lotes</CardTitle>
            <Package className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.lotesTotal}</div>
            <p className="text-xs text-muted-foreground">
              {stats.lotesCompletados} completados
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Peso Total</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.pesoTotal} kg</div>
            <p className="text-xs text-muted-foreground">Ingresado al proceso</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ingresos</CardTitle>
            <DollarSign className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">S/ {stats.ingresos}</div>
            <p className="text-xs text-muted-foreground">Por ventas</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Balance</CardTitle>
            <BarChart className="h-4 w-4 text-purple-600" />
          </CardHeader>
          <CardContent>
            <div className={`text-2xl font-bold ${Number(stats.balance) >= 0 ? "text-green-600" : "text-red-600"}`}>
              S/ {stats.balance}
            </div>
            <p className="text-xs text-muted-foreground">Ingresos - Egresos</p>
          </CardContent>
        </Card>
      </div>

{/* Reportes */}
      <Tabs defaultValue="operativo" className="space-y-4">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="operativo">Operativo</TabsTrigger>
          <TabsTrigger value="financiero">Financiero</TabsTrigger>
          <TabsTrigger value="libro-banco">Libro Banco</TabsTrigger>
        </TabsList>

{/* Reporte Operativo */}
        <TabsContent value="operativo" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Estado de Lotes</CardTitle>
              <CardDescription>Distribución de lotes por estado</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Estado</TableHead>
                    <TableHead>Cantidad</TableHead>
                    <TableHead>Porcentaje</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {["pendiente", "proceso", "liquidado", "cancelado"].map((estado) => {
                    const cantidad = Array.isArray(lotes)
                      ? lotes.filter((l) => l.estado === estado).length
                      : 0
                    const porcentaje = stats.lotesTotal > 0 ? ((cantidad / stats.lotesTotal) * 100).toFixed(1) : 0

return (
                      <TableRow key={estado}>
                        <TableCell>
                          <Badge>{estado}</Badge>
                        </TableCell>
                        <TableCell className="font-semibold">{cantidad}</TableCell>
                        <TableCell>{porcentaje}%</TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

{/* Reporte Financiero */}
        <TabsContent value="financiero" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="bg-green-50 border-green-200">
              <CardHeader>
                <CardTitle className="text-lg">Ingresos por Ventas</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold text-green-600">S/ {stats.ingresos}</p>
              </CardContent>
            </Card>

<Card className="bg-red-50 border-red-200">
              <CardHeader>
                <CardTitle className="text-lg">Egresos por Pagos</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold text-red-600">S/ {stats.egresos}</p>
              </CardContent>
            </Card>

<Card className={`${Number(stats.balance) >= 0 ? "bg-green-50 border-green-200" : "bg-red-50 border-red-200"}`}>
              <CardHeader>
                <CardTitle className="text-lg">Balance Neto</CardTitle>
              </CardHeader>
              <CardContent>
                <p
                  className={`text-3xl font-bold ${Number(stats.balance) >= 0 ? "text-green-600" : "text-red-600"}`}
                >
                  S/ {stats.balance}
                </p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Reporte Libro Banco */}
        <TabsContent value="libro-banco" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Últimas Operaciones</CardTitle>
              <CardDescription>Últimas 10 operaciones en Libro Banco</CardDescription>
            </CardHeader>
            <CardContent>
              {Array.isArray(libroBanco) && libroBanco.length > 0 ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Operación</TableHead>
                      <TableHead>De / A Quien</TableHead>
                      <TableHead>Deudor</TableHead>
                      <TableHead>Acreedor</TableHead>
                      <TableHead>Estado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {libroBanco.slice(0, 10).map((entry, idx) => (
                      <TableRow key={idx}>
                        <TableCell className="text-sm">{entry.fecha}</TableCell>
                        <TableCell className="text-sm">{entry.operacion}</TableCell>
                        <TableCell className="text-sm">
                          {entry.de_quien} / {entry.a_quien}
                        </TableCell>
                        <TableCell className="text-right">
                          {entry.deudor > 0 ? `S/ ${entry.deudor.toFixed(2)}` : "-"}
                        </TableCell>
                        <TableCell className="text-right">
                          {entry.acreedor > 0 ? `S/ ${entry.acreedor.toFixed(2)}` : "-"}
                        </TableCell>
                        <TableCell>
                          <Badge variant={entry.estado === "cancelado" ? "default" : "secondary"}>
                            {entry.estado}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <p className="text-muted-foreground text-center py-4">No hay operaciones registradas</p>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ventas-clientes.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Search, Plus, DollarSign, TrendingUp, AlertCircle, Loader2 } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { API_ENDPOINTS } from "@/lib/config/api"
import { ApiService } from "@/lib/services/api-service"

interface VentaCliente {
  id: number
  cliente_id: number
  cliente_nombre: string
  fecha_venta: string
  cantidad: number
  precio_unitario: number
  total: number
  estado: "pendiente" | "pagado" | "cancelado"
  pagado?: number
  telefono?: string
  email?: string
}

const ventasService = {
  getAll: async () => {
    const response = await ApiService.get<VentaCliente[]>(API_ENDPOINTS.VENTAS)
    return Array.isArray(response) ? response : Array.isArray(response?.data) ? response.data : []
  },
  create: async (data: any) => {
    const response = await ApiService.post<any>(API_ENDPOINTS.VENTAS, data)
    return response
  },
  update: async (id: number, data: any) => {
    const response = await ApiService.put<any>(API_ENDPOINTS.VENTAS, data)
    return response
  },
  delete: async (id: number) => {
    await ApiService.delete(API_ENDPOINTS.VENTAS)
  },
}

export function VentasClientes() {
  const { data: ventas, loading, error, refresh } = useApi(ventasService)
  const [busqueda, setBusqueda] = useState("")

const ventasArray = Array.isArray(ventas) ? ventas : []
  
  const ventasFiltradas = ventasArray.filter((v) =>
    v.cliente_nombre?.toLowerCase().includes(busqueda.toLowerCase()) ||
    v.email?.toLowerCase().includes(busqueda.toLowerCase())
  )

const totalVentas = ventasFiltradas.reduce((sum, v) => sum + (Number(v.total) || 0), 0)
  const totalPagado = ventasFiltradas.reduce((sum, v) => sum + (Number(v.pagado) || 0), 0)
  const pendientePago = totalVentas - totalPagado

const safeTotal = (value) => {
    const num = Number(value);
    return Number.isFinite(num) ? num : 0;
  };

if (loading && ventasArray.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2">Cargando ventas...</span>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold">Ventas a Clientes</h1>
          <p className="text-gray-600">Control de ventas y cobros</p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Nueva Venta
        </Button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <DollarSign className="h-8 w-8 text-blue-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Total Ventas</p>
                <p className="text-2xl font-bold">${safeTotal(totalVentas).toFixed(2)}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <TrendingUp className="h-8 w-8 text-green-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Pagado</p>
                <p className="text-2xl font-bold">${safeTotal(totalPagado).toFixed(2)}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <AlertCircle className="h-8 w-8 text-red-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Por Cobrar</p>
                <p className="text-2xl font-bold">${safeTotal(pendientePago).toFixed(2)}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="p-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Buscar por cliente..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Listado de Ventas ({ventasFiltradas.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Cliente</TableHead>
                <TableHead>Fecha</TableHead>
                <TableHead>Cantidad</TableHead>
                <TableHead>Precio Unit.</TableHead>
                <TableHead>Total</TableHead>
                <TableHead>Pagado</TableHead>
                <TableHead>Saldo</TableHead>
                <TableHead>Estado</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {ventasFiltradas.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-4">
                    No hay ventas registradas
                  </TableCell>
                </TableRow>
              ) : (
                ventasFiltradas.map((venta) => (
                  <TableRow key={venta.id}>
                    <TableCell>{venta.cliente_nombre}</TableCell>
                    <TableCell>{new Date(venta.fecha_venta).toLocaleDateString()}</TableCell>
                    <TableCell>{venta.cantidad}</TableCell>
                    <TableCell>${safeTotal(venta.precio_unitario).toFixed(2)}</TableCell>
                    <TableCell>${safeTotal(venta.total).toFixed(2)}</TableCell>
                    <TableCell>${safeTotal(venta.pagado || 0).toFixed(2)}</TableCell>
                    <TableCell>${safeTotal(safeTotal(venta.total) - safeTotal(venta.pagado || 0)).toFixed(2)}</TableCell>
                    <TableCell>
                      <Badge
                        variant={venta.estado === "pagado" ? "default" : "secondary"}
                      >
                        {venta.estado}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/config/api.ts" isQuickEdit="true" isMerged="true"
export const API_CONFIG = {
  BASE_URL: "/api/proxy",
  TIMEOUT: 30000,
  HEADERS: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
} as const

export const API_ENDPOINTS = {
  // Lotes
  LOTES: "/lotes",
  LOTES_BY_ID: (id: string | number) => `/lotes/${id}`,

// Personas
  PERSONAS: "/personas",
  PERSONAS_BY_ID: (id: string | number) => `/personas/${id}`,

// Empleados
  EMPLEADOS: "/empleados",
  EMPLEADOS_BY_ID: (id: string | number) => `/empleados/${id}`,

// Pedidos
  PEDIDOS: "/pedidos",
  PEDIDOS_BY_ID: (id: string | number) => `/pedidos/${id}`,

// Pesos
  PESOS: "/pesos",
  PESOS_BY_ID: (id: string | number) => `/pesos/${id}`,

// Banco
  BANCO: "/banco",
  BANCO_BY_ID: (id: string | number) => `/banco/${id}`,

// Kardex
  KARDEX: "/kardex",
  KARDEX_BY_ID: (id: string | number) => `/kardex/${id}`,

// Ajuste Contable
  AJUSTE_CONTABLE: "/ajuste-contable",
  AJUSTE_CONTABLE_BY_ID: (id: string | number) => `/ajuste-contable/${id}`,

// Pago Campo
  PAGO_CAMPO: "/pago-campo",
  PAGO_CAMPO_BY_ID: (id: string | number) => `/pago-campo/${id}`,

// Ventas
  VENTAS: "/ventas",
  VENTAS_BY_ID: (id: string | number) => `/ventas/${id}`,

// Costos Fijos
  COSTOS_FIJOS: "/costos-fijos",
  COSTOS_FIJOS_BY_ID: (id: string | number) => `/costos-fijos/${id}`,

// Rentabilidad
  RENTABILIDAD: "/rentabilidad",
  RENTABILIDAD_BY_ID: (id: string | number) => `/rentabilidad/${id}`,

// Adelantos
  ADELANTOS: "/adelantos",
  ADELANTOS_BY_ID: (id: string | number) => `/adelantos/${id}`,

// Liquidaciones
  LIQUIDACIONES: "/liquidaciones",
  LIQUIDACIONES_BY_ID: (id: string | number) => `/liquidaciones/${id}`,
} as const
[V0_FILE]typescript:file="lib/services/adelantos-service.ts" isQuickEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"

export interface Adelanto {
  id: number
  productor_id: number
  productor_nombre: string
  monto_original: number
  monto_descontado: number
  saldo_pendiente: number
  fecha_adelanto: string
  concepto: string
  estado: "pendiente" | "descontado-parcial" | "descontado-total"
  descuentos: DescuentoAdelanto[]
  created_at?: string
  updated_at?: string
}

export interface DescuentoAdelanto {
  lote_id: number
  lote_codigo: string
  fecha_descuento: string
  monto_descontado: number
}

export interface NuevoAdelanto {
  productor_id: number
  productor_nombre: string
  monto_original: number
  concepto: string
  fecha_adelanto: string
}

class AdelantosService {
  async getAll(): Promise<Adelanto[]> {
    try {
      console.log("[v0] AdelantosService: getAll() called")
      const response = await ApiService.get<Adelanto[]>(API_ENDPOINTS.ADELANTOS)
      console.log("[v0] AdelantosService: Adelantos obtenidos", {
        count: Array.isArray(response) ? response.length : 0,
      })
      return Array.isArray(response) ? response : []
    } catch (error) {
      console.error("[v0] Error al obtener adelantos:", error)
      return []
    }
  }

async obtenerAdelantos(): Promise<Adelanto[]> {
    try {
      console.log("[v0] AdelantosService: Obteniendo adelantos del backend")
      const response = await ApiService.get<Adelanto[]>(`${API_ENDPOINTS.ADELANTOS}`)
      console.log("[v0] AdelantosService: Adelantos obtenidos", {
        count: Array.isArray(response) ? response.length : 0,
      })
      return Array.isArray(response) ? response : []
    } catch (error) {
      console.error("[v0] Error al obtener adelantos:", error)
      return []
    }
  }

async obtenerAdelantosPorProductor(productorId: number): Promise<Adelanto[]> {
    try {
      console.log("[v0] AdelantosService: Obteniendo adelantos del productor", { productorId })
      const adelantos = await this.obtenerAdelantos()
      return adelantos.filter((a) => a.productor_id === productorId)
    } catch (error) {
      console.error("[v0] Error al obtener adelantos por productor:", error)
      return []
    }
  }

async obtenerAdelantosPendientes(productorId: number): Promise<Adelanto[]> {
    try {
      console.log("[v0] AdelantosService: Obteniendo adelantos pendientes", { productorId })
      const adelantos = await this.obtenerAdelantosPorProductor(productorId)
      return adelantos
        .filter((a) => a.estado !== "descontado-total")
        .sort((a, b) => new Date(a.fecha_adelanto).getTime() - new Date(b.fecha_adelanto).getTime())
    } catch (error) {
      console.error("[v0] Error al obtener adelantos pendientes:", error)
      return []
    }
  }

async crearAdelanto(adelanto: NuevoAdelanto): Promise<Adelanto | null> {
    try {
      console.log("[v0] AdelantosService: Creando nuevo adelanto", adelanto)
      const response = await ApiService.post<Adelanto>(`${API_ENDPOINTS.ADELANTOS}`, adelanto)
      console.log("[v0] AdelantosService: Adelanto creado exitosamente", response)
      return response || null
    } catch (error) {
      console.error("[v0] Error al crear adelanto:", error)
      return null
    }
  }

async descontarAdelanto(
    adelantoId: number,
    loteId: number,
    loteCodigo: string,
    montoDescuento: number,
  ): Promise<boolean> {
    try {
      console.log("[v0] AdelantosService: Descontando adelanto", {
        adelantoId,
        loteId,
        montoDescuento,
      })
      const response = await ApiService.put<Adelanto>(
        `${API_ENDPOINTS.ADELANTOS}/${adelantoId}`,
        {
          estado: "descontado-parcial",
          saldo_pendiente: 0,
          descuentos: [
            {
              lote_id: loteId,
              lote_codigo: loteCodigo,
              fecha_descuento: new Date().toISOString(),
              monto_descontado: montoDescuento,
            },
          ],
        }
      )
      console.log("[v0] AdelantosService: Descuento aplicado", response)
      return !!response
    } catch (error) {
      console.error("[v0] Error al descontar adelanto:", error)
      return false
    }
  }

async calcularSaldoProductor(productorId: number): Promise<{
    total_adelantos: number
    total_descontado: number
    saldo_pendiente: number
    adelantos_activos: number
  }> {
    try {
      const adelantos = await this.obtenerAdelantosPorProductor(productorId)

const total_adelantos = adelantos.reduce((sum, a) => sum + a.monto_original, 0)
      const total_descontado = adelantos.reduce((sum, a) => sum + a.monto_descontado, 0)
      const saldo_pendiente = adelantos.reduce((sum, a) => sum + a.saldo_pendiente, 0)
      const adelantos_activos = adelantos.filter((a) => a.estado !== "descontado-total").length

console.log("[v0] AdelantosService: Saldo calculado", {
        productorId,
        total_adelantos,
        total_descontado,
        saldo_pendiente,
        adelantos_activos,
      })

return {
        total_adelantos,
        total_descontado,
        saldo_pendiente,
        adelantos_activos,
      }
    } catch (error) {
      console.error("[v0] Error al calcular saldo del productor:", error)
      return {
        total_adelantos: 0,
        total_descontado: 0,
        saldo_pendiente: 0,
        adelantos_activos: 0,
      }
    }
  }

async procesarDescuentosAutomaticos(
    productorId: number,
    loteId: number,
    loteCodigo: string,
    valorLote: number,
  ): Promise<{
    descuentos_aplicados: DescuentoAdelanto[]
    monto_total_descontado: number
    saldo_final: number
  }> {
    try {
      console.log("[v0] AdelantosService: Procesando descuentos automáticos", {
        productorId,
        loteId,
        valorLote,
      })

const adelantosPendientes = await this.obtenerAdelantosPendientes(productorId)

let montoRestante = valorLote
      const descuentosAplicados: DescuentoAdelanto[] = []
      let montoTotalDescontado = 0

// Descontar adelantos en orden FIFO
      for (const adelanto of adelantosPendientes) {
        if (montoRestante <= 0) break

const montoADescontar = Math.min(montoRestante, adelanto.saldo_pendiente)

if (montoADescontar > 0) {
          await this.descontarAdelanto(adelanto.id, loteId, loteCodigo, montoADescontar)

descuentosAplicados.push({
            lote_id: loteId,
            lote_codigo: loteCodigo,
            fecha_descuento: new Date().toISOString(),
            monto_descontado: montoADescontar,
          })

montoTotalDescontado += montoADescontar
          montoRestante -= montoADescontar
        }
      }

const saldoFinal = montoRestante

console.log("[v0] AdelantosService: Descuentos procesados", {
        descuentos_aplicados: descuentosAplicados.length,
        monto_total_descontado: montoTotalDescontado,
        saldo_final: saldoFinal,
      })

return {
        descuentos_aplicados: descuentosAplicados,
        monto_total_descontado: montoTotalDescontado,
        saldo_final: saldoFinal,
      }
    } catch (error) {
      console.error("[v0] Error al procesar descuentos automáticos:", error)
      return {
        descuentos_aplicados: [],
        monto_total_descontado: 0,
        saldo_final: valorLote,
      }
    }
  }
}

export const adelantosService = new AdelantosService()
[V0_FILE]typescriptreact:file="components/control-rentabilidad-module.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
import { TrendingUp, TrendingDown, DollarSign, AlertCircle, Loader2 } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { API_ENDPOINTS } from "@/lib/config/api"
import { ApiService } from "@/lib/services/api-service"

interface ControlRentabilidad {
  id: number
  periodo: string
  ingresos_totales: number
  costos_totales: number
  ganancia_neta: number
  margen_porcentaje: number
}

class RentabilidadService {
  async getAll(): Promise<ControlRentabilidad[]> {
    const response = await ApiService.get<ControlRentabilidad[]>(API_ENDPOINTS.RENTABILIDAD)
    return Array.isArray(response) ? response : response?.data || []
  }
}

const rentabilidadService = new RentabilidadService()

export function ControlRentabilidadModule() {
  const { data: rentabilidades, loading, error, refresh } = useApi(rentabilidadService)

if (loading && rentabilidades.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2">Cargando rentabilidad...</span>
      </div>
    )
  }

const datosGrafico = (rentabilidades as ControlRentabilidad[])
    .sort((a, b) => a.periodo.localeCompare(b.periodo))
    .map((r) => ({
      periodo: r.periodo,
      ingresos: r.ingresos_totales,
      costos: r.costos_totales,
      ganancia: r.ganancia_neta,
      margen: r.margen_porcentaje,
    }))

const ultimoMes = (rentabilidades as ControlRentabilidad[])[0] || {}
  const margenPromedio =
    rentabilidades.length > 0
      ? rentabilidades.reduce((sum, r) => sum + r.margen_porcentaje, 0) / rentabilidades.length
      : 0

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold">Control de Rentabilidad</h1>
          <p className="text-gray-600">Análisis de ingresos, costos y márgenes</p>
        </div>
        <Button onClick={refresh}>Actualizar</Button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <DollarSign className="h-8 w-8 text-green-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Ingresos Mes Actual</p>
                <p className="text-2xl font-bold">${ultimoMes.ingresos_totales?.toFixed(2) || "0.00"}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <TrendingDown className="h-8 w-8 text-red-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Costos Mes Actual</p>
                <p className="text-2xl font-bold">${ultimoMes.costos_totales?.toFixed(2) || "0.00"}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center">
              <TrendingUp className="h-8 w-8 text-blue-500" />
              <div className="ml-4">
                <p className="text-sm text-gray-600">Ganancia Mes Actual</p>
                <p className="text-2xl font-bold">${ultimoMes.ganancia_neta?.toFixed(2) || "0.00"}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Margen de Rentabilidad Promedio: {margenPromedio.toFixed(2)}%</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={datosGrafico}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="periodo" />
              <YAxis yAxisId="left" />
              <YAxis yAxisId="right" orientation="right" />
              <Tooltip />
              <Legend />
              <Line yAxisId="left" type="monotone" dataKey="margen" stroke="#8884d8" name="Margen %" />
              <Line yAxisId="right" type="monotone" dataKey="ganancia" stroke="#82ca9d" name="Ganancia" />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Comparativa Ingresos vs Costos</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={datosGrafico}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="periodo" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="ingresos" fill="#82ca9d" name="Ingresos" />
              <Bar dataKey="costos" fill="#ffc658" name="Costos" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]php:file="backend/controllers/AdelantosController.php" isMerged="true"
<?php
require_once '../models/Adelanto.php';

class AdelantosController extends BaseController {
    private $adelantoModel;

public function __construct($db) {
        parent::__construct($db);
        $this->adelantoModel = new Adelanto($db);
    }

public function get($id = null) {
        try {
            if ($id) {
                logMessage('DEBUG', 'AdelantosController: GET by ID', ['id' => $id]);
                $result = $this->adelantoModel->getById($id);
                if (!$result) {
                    http_response_code(404);
                    return jsonResponse([
                        'success' => false,
                        'error' => 'Not Found',
                        'message' => "Adelanto no encontrado con ID: {$id}"
                    ], 404);
                }
                return jsonResponse($result);
            } else {
                logMessage('DEBUG', 'AdelantosController: GET all adelantos');
                $result = $this->adelantoModel->getAll();
                return jsonResponse($result);
            }
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en GET adelantos', ['error' => $e->getMessage()]);
            http_response_code(500);
            return jsonResponse([
                'success' => false,
                'error' => 'Server Error',
                'message' => $e->getMessage()
            ], 500);
        }
    }

public function post() {
        try {
            logMessage('DEBUG', 'AdelantosController: POST - Crear nuevo adelanto');
            
            $data = $this->getRequestData();
            
            // Validar campos requeridos
            if (empty($data['productor_id']) || empty($data['monto_original']) || empty($data['concepto'])) {
                http_response_code(400);
                return jsonResponse([
                    'success' => false,
                    'error' => 'Validation Error',
                    'message' => 'productor_id, monto_original, y concepto son requeridos'
                ], 400);
            }

$adelanto = $this->adelantoModel->create([
                'productor_id' => $data['productor_id'],
                'productor_nombre' => $data['productor_nombre'] ?? '',
                'monto_original' => $data['monto_original'],
                'monto_descontado' => 0,
                'saldo_pendiente' => $data['monto_original'],
                'concepto' => $data['concepto'],
                'fecha_adelanto' => $data['fecha_adelanto'] ?? date('Y-m-d'),
                'estado' => 'pendiente'
            ]);

logMessage('INFO', 'Adelanto creado exitosamente', ['id' => $adelanto['id']]);
            http_response_code(201);
            return jsonResponse($adelanto);
        } catch (Exception $e) {
            logMessage('ERROR', 'Error al crear adelanto', ['error' => $e->getMessage()]);
            http_response_code(500);
            return jsonResponse([
                'success' => false,
                'error' => 'Server Error',
                'message' => $e->getMessage()
            ], 500);
        }
    }

public function put($id = null) {
        try {
            if (!$id) {
                http_response_code(400);
                return jsonResponse([
                    'success' => false,
                    'error' => 'Bad Request',
                    'message' => 'ID es requerido para actualizar'
                ], 400);
            }

logMessage('DEBUG', 'AdelantosController: PUT - Actualizar adelanto', ['id' => $id]);
            
            $data = $this->getRequestData();
            
            $adelanto = $this->adelantoModel->update($id, $data);
            
            if (!$adelanto) {
                http_response_code(404);
                return jsonResponse([
                    'success' => false,
                    'error' => 'Not Found',
                    'message' => "Adelanto no encontrado con ID: {$id}"
                ], 404);
            }

logMessage('INFO', 'Adelanto actualizado exitosamente', ['id' => $id]);
            return jsonResponse($adelanto);
        } catch (Exception $e) {
            logMessage('ERROR', 'Error al actualizar adelanto', ['error' => $e->getMessage()]);
            http_response_code(500);
            return jsonResponse([
                'success' => false,
                'error' => 'Server Error',
                'message' => $e->getMessage()
            ], 500);
        }
    }

public function delete($id = null) {
        try {
            if (!$id) {
                http_response_code(400);
                return jsonResponse([
                    'success' => false,
                    'error' => 'Bad Request',
                    'message' => 'ID es requerido para eliminar'
                ], 400);
            }

logMessage('DEBUG', 'AdelantosController: DELETE', ['id' => $id]);
            
            $result = $this->adelantoModel->delete($id);
            
            if (!$result) {
                http_response_code(404);
                return jsonResponse([
                    'success' => false,
                    'error' => 'Not Found',
                    'message' => "Adelanto no encontrado con ID: {$id}"
                ], 404);
            }

logMessage('INFO', 'Adelanto eliminado exitosamente', ['id' => $id]);
            return jsonResponse([
                'success' => true,
                'message' => 'Adelanto eliminado exitosamente'
            ]);
        } catch (Exception $e) {
            logMessage('ERROR', 'Error al eliminar adelanto', ['error' => $e->getMessage()]);
            http_response_code(500);
            return jsonResponse([
                'success' => false,
                'error' => 'Server Error',
                'message' => $e->getMessage()
            ], 500);
        }
    }
}
?>
[V0_FILE]php:file="backend/models/Adelanto.php" isMerged="true"
<?php
class Adelanto {
    private $db;
    private $table = 'adelantos';

public function __construct($db) {
        $this->db = $db;
    }

public function getAll() {
        try {
            logMessage('DEBUG', 'Adelanto Model: getAll');
            
            $query = "SELECT * FROM {$this->table} ORDER BY fecha_adelanto DESC";
            $stmt = $this->db->prepare($query);
            $stmt->execute();
            
            $result = $stmt->fetchAll();
            logMessage('DEBUG', 'Adelanto Model: getAll resultado', ['count' => count($result)]);
            
            return $result;
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en Adelanto getAll', ['error' => $e->getMessage()]);
            throw $e;
        }
    }

public function getById($id) {
        try {
            logMessage('DEBUG', 'Adelanto Model: getById', ['id' => $id]);
            
            $query = "SELECT * FROM {$this->table} WHERE id = :id";
            $stmt = $this->db->prepare($query);
            $stmt->bindParam(':id', $id);
            $stmt->execute();
            
            $result = $stmt->fetch();
            return $result;
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en Adelanto getById', ['error' => $e->getMessage()]);
            throw $e;
        }
    }

public function create($data) {
        try {
            logMessage('DEBUG', 'Adelanto Model: create', $data);
            
            $query = "INSERT INTO {$this->table} 
                    (productor_id, productor_nombre, monto_original, monto_descontado, 
                     saldo_pendiente, concepto, fecha_adelanto, estado, created_at, updated_at)
                    VALUES (:productor_id, :productor_nombre, :monto_original, :monto_descontado,
                            :saldo_pendiente, :concepto, :fecha_adelanto, :estado, NOW(), NOW())";
            
            $stmt = $this->db->prepare($query);
            
            $stmt->bindParam(':productor_id', $data['productor_id']);
            $stmt->bindParam(':productor_nombre', $data['productor_nombre']);
            $stmt->bindParam(':monto_original', $data['monto_original']);
            $stmt->bindParam(':monto_descontado', $data['monto_descontado']);
            $stmt->bindParam(':saldo_pendiente', $data['saldo_pendiente']);
            $stmt->bindParam(':concepto', $data['concepto']);
            $stmt->bindParam(':fecha_adelanto', $data['fecha_adelanto']);
            $stmt->bindParam(':estado', $data['estado']);
            
            if ($stmt->execute()) {
                $id = $this->db->lastInsertId();
                logMessage('INFO', 'Adelanto creado', ['id' => $id]);
                return $this->getById($id);
            }
            
            throw new Exception('No se pudo crear el adelanto');
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en Adelanto create', ['error' => $e->getMessage()]);
            throw $e;
        }
    }

public function update($id, $data) {
        try {
            logMessage('DEBUG', 'Adelanto Model: update', ['id' => $id, 'data' => $data]);
            
            $updates = [];
            $params = [':id' => $id];
            
            if (isset($data['monto_descontado'])) {
                $updates[] = "monto_descontado = :monto_descontado";
                $params[':monto_descontado'] = $data['monto_descontado'];
            }
            
            if (isset($data['saldo_pendiente'])) {
                $updates[] = "saldo_pendiente = :saldo_pendiente";
                $params[':saldo_pendiente'] = $data['saldo_pendiente'];
            }
            
            if (isset($data['estado'])) {
                $updates[] = "estado = :estado";
                $params[':estado'] = $data['estado'];
            }
            
            if (isset($data['concepto'])) {
                $updates[] = "concepto = :concepto";
                $params[':concepto'] = $data['concepto'];
            }
            
            if (empty($updates)) {
                return $this->getById($id);
            }
            
            $updates[] = "updated_at = NOW()";
            $query = "UPDATE {$this->table} SET " . implode(", ", $updates) . " WHERE id = :id";
            
            $stmt = $this->db->prepare($query);
            
            foreach ($params as $key => $value) {
                $stmt->bindParam($key, $value);
            }
            
            if ($stmt->execute()) {
                logMessage('INFO', 'Adelanto actualizado', ['id' => $id]);
                return $this->getById($id);
            }
            
            throw new Exception('No se pudo actualizar el adelanto');
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en Adelanto update', ['error' => $e->getMessage()]);
            throw $e;
        }
    }

public function delete($id) {
        try {
            logMessage('DEBUG', 'Adelanto Model: delete', ['id' => $id]);
            
            $query = "DELETE FROM {$this->table} WHERE id = :id";
            $stmt = $this->db->prepare($query);
            $stmt->bindParam(':id', $id);
            
            if ($stmt->execute()) {
                logMessage('INFO', 'Adelanto eliminado', ['id' => $id]);
                return true;
            }
            
            return false;
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en Adelanto delete', ['error' => $e->getMessage()]);
            throw $e;
        }
    }

public function getByProductor($productorId) {
        try {
            $query = "SELECT * FROM {$this->table} WHERE productor_id = :productor_id ORDER BY fecha_adelanto DESC";
            $stmt = $this->db->prepare($query);
            $stmt->bindParam(':productor_id', $productorId);
            $stmt->execute();
            
            return $stmt->fetchAll();
        } catch (Exception $e) {
            logMessage('ERROR', 'Error en getByProductor', ['error' => $e->getMessage()]);
            throw $e;
        }
    }
}
?>
[V0_FILE]php:file="backend/routes/api.php" isEdit="true" isQuickEdit="true" isMerged="true"
<?php
require_once '../config/database.php';
require_once '../controllers/BaseController.php';
require_once '../controllers/PersonasController.php';
require_once '../controllers/LotesController.php';
require_once '../controllers/PesosController.php';
require_once '../controllers/AjusteContableController.php';
require_once '../controllers/PagoCampoController.php';
require_once '../controllers/PedidosController.php';
require_once '../controllers/KardexController.php';
require_once '../controllers/VentasController.php';
require_once '../controllers/BancoController.php';
require_once '../controllers/CostosFijosController.php';
require_once '../controllers/EmpleadosController.php';
require_once '../controllers/RentabilidadController.php';
require_once '../controllers/AdelantosController.php'; // Added AdelantosController

try {
    $database = new Database();
    $db = $database->getConnection();
    
    if (!$db) {
        throw new Exception('No se pudo establecer conexión con la base de datos');
    }
    
    $request_method = $_SERVER["REQUEST_METHOD"];
    $request_uri = $_SERVER['REQUEST_URI'];

// Remove query string and base path
    $path = parse_url($request_uri, PHP_URL_PATH);
    $path = str_replace('/backend/public/index.php', '', $path);
    $path = str_replace('/backend', '', $path);
    $path = str_replace('/api', '', $path);
    $path = trim($path, '/');

logMessage('DEBUG', 'Procesando ruta', [
        'path' => $path,
        'method' => $request_method,
        'uri' => $request_uri
    ]);

// Parse route
    $segments = explode('/', $path);
    $resource = $segments[0] ?? '';
    $id = $segments[1] ?? null;
    $action = $segments[2] ?? null;

// Route to controllers
    $controller = null;

switch($resource) {
        case 'personas':
            $controller = new PersonasController($db);
            break;
        case 'lotes':
            $controller = new LotesController($db);
            break;
        case 'pesos':
            $controller = new PesosController($db);
            break;
        case 'ajustes-contables':
            $controller = new AjusteContableController($db);
            break;
        case 'pagos-campo':
            $controller = new PagoCampoController($db);
            break;
        case 'pedidos':
            $controller = new PedidosController($db);
            break;
        case 'kardex':
            $controller = new KardexController($db);
            break;
        case 'ventas':
            $controller = new VentasController($db);
            break;
        case 'banco':
            $controller = new BancoController($db);
            break;
        case 'costos-fijos':
            $controller = new CostosFijosController($db);
            break;
        case 'empleados':
            $controller = new EmpleadosController($db);
            break;
        case 'rentabilidad':
            $controller = new RentabilidadController($db);
            break;
        case 'adelantos': // Added adelantos route
            $controller = new AdelantosController($db);
            break;
        default:
            http_response_code(404);
            jsonResponse([
                'success' => false,
                'error' => 'Resource Not Found',
                'message' => "Recurso no encontrado: {$resource}",
                'path' => $path,
                'available_resources' => [
                    'personas', 'lotes', 'pesos', 'ajustes-contables',
                    'pagos-campo', 'pedidos', 'kardex', 'ventas',
                    'banco', 'costos-fijos', 'empleados', 'rentabilidad', 'adelantos' // Added adelantos
                ],
                'timestamp' => date('Y-m-d H:i:s')
            ], 404);
            exit();
    }

// Handle request
    if ($controller) {
        $controller->handleRequest($request_method, $id, $action);
    }
    
} catch (Exception $e) {
    logMessage('ERROR', 'Error en API', [
        'message' => $e->getMessage(),
        'file' => $e->getFile(),
        'line' => $e->getLine()
    ]);
    
    jsonResponse([
        'success' => false,
        'error' => 'API Error',
        'message' => $e->getMessage(),
        'file' => $e->getFile(),
        'line' => $e->getLine(),
        'trace' => DEBUG_MODE ? $e->getTraceAsString() : null,
        'timestamp' => date('Y-m-d H:i:s')
    ], 500);
}
?>
[V0_FILE]sql:file="backend/migrations/create_adelantos_table.sql" isMerged="true"
-- Create adelantos table if not exists
CREATE TABLE IF NOT EXISTS adelantos (
    id INT PRIMARY KEY AUTO_INCREMENT,
    productor_id INT NOT NULL,
    productor_nombre VARCHAR(255),
    monto_original DECIMAL(10, 2) NOT NULL DEFAULT 0,
    monto_descontado DECIMAL(10, 2) NOT NULL DEFAULT 0,
    saldo_pendiente DECIMAL(10, 2) NOT NULL DEFAULT 0,
    concepto TEXT,
    fecha_adelanto DATE,
    estado ENUM('pendiente', 'descontado-parcial', 'descontado-total') DEFAULT 'pendiente',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (productor_id) REFERENCES personas(id),
    INDEX idx_productor (productor_id),
    INDEX idx_estado (estado),
    INDEX idx_fecha (fecha_adelanto)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
[V0_FILE]typescriptreact:file="lib/services/deudas-proveedores-service.ts" isEdit="true" isMerged="true"
import { ApiService } from "./api-service"

export interface ProveedorDeuda {
  id: number
  nombre: string
  documento: string
  telefono: string
  saldoActual: number
  limitCredito: number
  creditoDisponible: number
  adelantosPendientes: number
  totalAdelantosDescontados: number
  ultimoMovimiento: string
  estado: "activo" | "suspendido" | "bloqueado"
  movimientos?: any[]
  estadisticas?: any
}

export interface MovimientoFinanciero {
  id: number
  proveedor_id: number
  fecha: string
  tipo: "adelanto" | "descuento" | "ajuste_positivo" | "ajuste_negativo" | "liquidacion"
  monto: number
  descripcion: string
  referencia?: string
  responsable: string
  estado: "pendiente" | "aplicado" | "cancelado"
}

export class DeudasProveedoresService {
  async getAll(): Promise<ProveedorDeuda[]> {
    console.log("[v0] DeudasProveedoresService: getAll() called")
    const response = await ApiService.get<ProveedorDeuda[]>("/api/proxy/deudas-proveedores")
    return Array.isArray(response) ? response : Array.isArray(response?.data) ? response.data : []
  }

async getById(id: number): Promise<ProveedorDeuda> {
    const response = await ApiService.get<ProveedorDeuda>(`/api/proxy/deudas-proveedores/${id}`)
    return response
  }

async registrarAdelanto(proveedorId: number, monto: number, descripcion: string) {
    const response = await ApiService.post("/api/proxy/deudas-proveedores/adelanto", {
      proveedor_id: proveedorId,
      monto,
      descripcion,
      fecha: new Date().toISOString().split("T")[0],
    })
    return response
  }

async registrarAjuste(proveedorId: number, monto: number, tipo: string, descripcion: string) {
    const response = await ApiService.post("/api/proxy/deudas-proveedores/ajuste", {
      proveedor_id: proveedorId,
      monto,
      tipo,
      descripcion,
      fecha: new Date().toISOString().split("T")[0],
    })
    return response
  }

async getMovimientos(proveedorId: number): Promise<MovimientoFinanciero[]> {
    const response = await ApiService.get<MovimientoFinanciero[]>(
      `/api/proxy/deudas-proveedores/${proveedorId}/movimientos`
    )
    return Array.isArray(response) ? response : Array.isArray(response?.data) ? response.data : []
  }
}

export const deudasProveedoresService = new DeudasProveedoresService()
[V0_FILE]typescriptreact:file="lib/services/personal-subprocesos-service.ts" isEdit="true" isMerged="true"
import { ApiService } from "./api-service"

export interface PlanificacionPersonal {
  id: number
  pedidoId: string
  codigoLote: string
  fechaPlanificacion: string
  operaciones: any[]
  estado: "planificado" | "en-proceso" | "completado" | "cancelado"
  totalPersonal: number
  personalDisponible: number
}

export interface PersonalDisponible {
  id: number
  nombre: string
  genero: "hombre" | "mujer"
  especialidad: string[]
  disponible: boolean
}

export class PersonalSubprocesosService {
  async getPlanificaciones(): Promise<PlanificacionPersonal[]> {
    console.log("[v0] PersonalSubprocesosService: getPlanificaciones() called")
    const response = await ApiService.get<PlanificacionPersonal[]>("/api/proxy/planificaciones-personal")
    return Array.isArray(response) ? response : Array.isArray(response?.data) ? response.data : []
  }

async getPersonalDisponible(): Promise<PersonalDisponible[]> {
    const response = await ApiService.get<PersonalDisponible[]>("/api/proxy/personal-disponible")
    return Array.isArray(response) ? response : Array.isArray(response?.data) ? response.data : []
  }

async crearPlanificacion(data: Partial<PlanificacionPersonal>) {
    const response = await ApiService.post<PlanificacionPersonal>("/api/proxy/planificaciones-personal", data)
    return response
  }

async actualizarPlanificacion(id: number, data: Partial<PlanificacionPersonal>) {
    const response = await ApiService.put<PlanificacionPersonal>("/api/proxy/planificaciones-personal", data)
    return response
  }

async eliminarPlanificacion(id: number) {
    await ApiService.delete(`/api/proxy/planificaciones-personal/${id}`)
  }
}

export const personalSubprocesosService = new PersonalSubprocesosService()
[V0_FILE]typescriptreact:file="lib/hooks/use-deudas-proveedores.ts" isEdit="true" isMerged="true"
import { useState, useEffect } from "react"
import { deudasProveedoresService, type ProveedorDeuda } from "@/lib/services/deudas-proveedores-service"
import { useToast } from "@/components/ui/use-toast"

export function useDeudasProveedores() {
  const { toast } = useToast()
  const [data, setData] = useState<ProveedorDeuda[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const loadData = async () => {
    setLoading(true)
    setError(null)
    try {
      console.log("[v0] useDeudasProveedores: Loading data...")
      const response = await deudasProveedoresService.getAll()
      console.log("[v0] useDeudasProveedores: Data loaded", { count: response.length })
      setData(response)
    } catch (err: any) {
      const message = err.message || "Error loading deudas"
      console.error("[v0] useDeudasProveedores: Error", { message })
      setError(message)
      toast({
        title: "Error",
        description: message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

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

return {
    data,
    loading,
    error,
    refresh: loadData,
  }
}
[V0_FILE]typescriptreact:file="lib/hooks/use-personal-subprocesos.ts" isEdit="true" isMerged="true"
import { useState, useEffect } from "react"
import { personalSubprocesosService, type PlanificacionPersonal, type PersonalDisponible } from "@/lib/services/personal-subprocesos-service"
import { useToast } from "@/components/ui/use-toast"

export function usePersonalSubprocesos() {
  const { toast } = useToast()
  const [planificaciones, setPlanificaciones] = useState<PlanificacionPersonal[]>([])
  const [personalDisponible, setPersonalDisponible] = useState<PersonalDisponible[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const loadData = async () => {
    setLoading(true)
    setError(null)
    try {
      console.log("[v0] usePersonalSubprocesos: Loading data...")
      const [planificacionesData, personalData] = await Promise.all([
        personalSubprocesosService.getPlanificaciones(),
        personalSubprocesosService.getPersonalDisponible(),
      ])
      console.log("[v0] usePersonalSubprocesos: Data loaded", { 
        planificaciones: planificacionesData.length, 
        personal: personalData.length 
      })
      setPlanificaciones(planificacionesData)
      setPersonalDisponible(personalData)
    } catch (err: any) {
      const message = err.message || "Error loading data"
      console.error("[v0] usePersonalSubprocesos: Error", { message })
      setError(message)
      toast({
        title: "Error",
        description: message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

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

return {
    planificaciones,
    personalDisponible,
    loading,
    error,
    refresh: loadData,
  }
}
[V0_FILE]typescriptreact:file="components/gestion-deudas-proveedores.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Banknote, TrendingUp, Users, CreditCard, Plus, FileText, Edit3, Loader2, AlertCircle } from 'lucide-react'
import { useDeudasProveedores } from "@/lib/hooks/use-deudas-proveedores"
import { ProveedorDeuda } from "@/types/proveedor-deuda" // Assuming ProveedorDeuda type is defined somewhere

export function GestionDeudasProveedores() {
  const { data: proveedores, loading, error, refresh } = useDeudasProveedores()
  const [proveedorSeleccionado, setProveedorSeleccionado] = useState<ProveedorDeuda | null>(null)
  const [mostrarDialogoAdelanto, setMostrarDialogoAdelanto] = useState(false)
  const [mostrarDialogoAjuste, setMostrarDialogoAjuste] = useState(false)
  const [nuevoAdelanto, setNuevoAdelanto] = useState({ monto: 0, descripcion: "" })
  const [nuevoAjuste, setNuevoAjuste] = useState({ tipo: "positivo", monto: 0, descripcion: "" })

if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2">Cargando proveedores...</span>
      </div>
    )
  }

if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
          <p className="text-destructive mb-4">{error}</p>
          <Button onClick={refresh}>Reintentar</Button>
        </div>
      </div>
    )
  }

const registrarAdelanto = () => {
    if (proveedorSeleccionado && nuevoAdelanto.monto > 0) {
      alert("Adelanto registrado exitosamente (integración con API próxima)")
      setMostrarDialogoAdelanto(false)
      setNuevoAdelanto({ monto: 0, descripcion: "" })
    }
  }

const registrarAjuste = () => {
    if (proveedorSeleccionado && nuevoAjuste.monto > 0) {
      alert("Ajuste registrado exitosamente (integración con API próxima)")
      setMostrarDialogoAjuste(false)
      setNuevoAjuste({ tipo: "positivo", monto: 0, descripcion: "" })
    }
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Gestión de Deudas de Proveedores</h1>
          <p className="text-gray-600 mt-2">Sistema unificado de adelantos, estado de cuenta y gestión financiera</p>
        </div>
        <Badge variant="outline" className="text-lg px-4 py-2">
          <Banknote className="w-4 h-4 mr-2" />
          Módulo Financiero
        </Badge>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Lista de Proveedores */}
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="w-5 h-5" />
              Proveedores ({proveedores.length})
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {proveedores.length === 0 ? (
              <p className="text-gray-500 text-sm">No hay proveedores registrados</p>
            ) : (
              proveedores.map((proveedor) => (
                <div
                  key={proveedor.id}
                  className={`p-3 rounded-lg border cursor-pointer transition-colors ${
                    proveedorSeleccionado?.id === proveedor.id
                      ? "border-blue-500 bg-blue-50"
                      : "border-gray-200 hover:border-gray-300"
                  }`}
                  onClick={() => setProveedorSeleccionado(proveedor)}
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-medium">{proveedor.nombre}</div>
                      <div className="text-sm text-gray-500">{proveedor.documento}</div>
                    </div>
                    <div className="text-right">
                      <div className={`font-semibold ${proveedor.saldoActual >= 0 ? "text-green-600" : "text-red-600"}`}>
                        S/ {proveedor.saldoActual.toFixed(2)}
                      </div>
                      <Badge
                        variant={
                          proveedor.estado === "activo"
                            ? "default"
                            : proveedor.estado === "suspendido"
                              ? "secondary"
                              : "destructive"
                        }
                        className="text-xs"
                      >
                        {proveedor.estado}
                      </Badge>
                    </div>
                  </div>
                  <div className="mt-2">
                    <Progress value={(proveedor.creditoDisponible / proveedor.limitCredito) * 100} className="h-2" />
                    <div className="text-xs text-gray-500 mt-1">
                      Crédito: S/ {proveedor.creditoDisponible.toFixed(2)} / S/ {proveedor.limitCredito.toFixed(2)}
                    </div>
                  </div>
                </div>
              ))
            )}
          </CardContent>
        </Card>

{/* Detalle del Proveedor */}
        <div className="lg:col-span-2 space-y-6">
          {proveedorSeleccionado ? (
            <>
              {/* Resumen Financiero */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    <span className="flex items-center gap-2">
                      <CreditCard className="w-5 h-5" />
                      {proveedorSeleccionado.nombre}
                    </span>
                    <div className="flex gap-2">
                      <Dialog open={mostrarDialogoAdelanto} onOpenChange={setMostrarDialogoAdelanto}>
                        <DialogTrigger asChild>
                          <Button size="sm">
                            <Plus className="w-4 h-4 mr-2" />
                            Adelanto
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Registrar Adelanto</DialogTitle>
                            <DialogDescription>
                              Crédito disponible: S/ {proveedorSeleccionado.creditoDisponible.toFixed(2)}
                            </DialogDescription>
                          </DialogHeader>
                          <div className="space-y-4">
                            <div>
                              <Label htmlFor="monto-adelanto">Monto</Label>
                              <Input
                                id="monto-adelanto"
                                type="number"
                                step="0.01"
                                value={nuevoAdelanto.monto}
                                onChange={(e) =>
                                  setNuevoAdelanto({
                                    ...nuevoAdelanto,
                                    monto: Number.parseFloat(e.target.value) || 0,
                                  })
                                }
                              />
                            </div>
                            <div>
                              <Label htmlFor="descripcion-adelanto">Descripción</Label>
                              <Textarea
                                id="descripcion-adelanto"
                                value={nuevoAdelanto.descripcion}
                                onChange={(e) =>
                                  setNuevoAdelanto({
                                    ...nuevoAdelanto,
                                    descripcion: e.target.value,
                                  })
                                }
                              />
                            </div>
                          </div>
                          <DialogFooter>
                            <Button variant="outline" onClick={() => setMostrarDialogoAdelanto(false)}>
                              Cancelar
                            </Button>
                            <Button onClick={registrarAdelanto}>Registrar Adelanto</Button>
                          </DialogFooter>
                        </DialogContent>
                      </Dialog>

<Dialog open={mostrarDialogoAjuste} onOpenChange={setMostrarDialogoAjuste}>
                        <DialogTrigger asChild>
                          <Button variant="outline" size="sm">
                            <Edit3 className="w-4 h-4 mr-2" />
                            Ajuste
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Registrar Ajuste Manual</DialogTitle>
                            <DialogDescription>Realizar ajustes positivos o negativos al saldo</DialogDescription>
                          </DialogHeader>
                          <div className="space-y-4">
                            <div>
                              <Label htmlFor="tipo-ajuste">Tipo de Ajuste</Label>
                              <Select
                                value={nuevoAjuste.tipo}
                                onValueChange={(value) =>
                                  setNuevoAjuste({
                                    ...nuevoAjuste,
                                    tipo: value as "positivo" | "negativo",
                                  })
                                }
                              >
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="positivo">Ajuste Positivo (+)</SelectItem>
                                  <SelectItem value="negativo">Ajuste Negativo (-)</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div>
                              <Label htmlFor="monto-ajuste">Monto</Label>
                              <Input
                                id="monto-ajuste"
                                type="number"
                                step="0.01"
                                value={nuevoAjuste.monto}
                                onChange={(e) =>
                                  setNuevoAjuste({
                                    ...nuevoAjuste,
                                    monto: Number.parseFloat(e.target.value) || 0,
                                  })
                                }
                              />
                            </div>
                            <div>
                              <Label htmlFor="descripcion-ajuste">Justificación</Label>
                              <Textarea
                                id="descripcion-ajuste"
                                value={nuevoAjuste.descripcion}
                                onChange={(e) =>
                                  setNuevoAjuste({
                                    ...nuevoAjuste,
                                    descripcion: e.target.value,
                                  })
                                }
                                placeholder="Justificación del ajuste..."
                              />
                            </div>
                          </div>
                          <DialogFooter>
                            <Button variant="outline" onClick={() => setMostrarDialogoAjuste(false)}>
                              Cancelar
                            </Button>
                            <Button onClick={registrarAjuste}>Registrar Ajuste</Button>
                          </DialogFooter>
                        </DialogContent>
                      </Dialog>
                    </div>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="text-center p-3 bg-blue-50 rounded-lg">
                      <div
                        className={`text-xl font-bold ${
                          proveedorSeleccionado.saldoActual >= 0 ? "text-green-600" : "text-red-600"
                        }`}
                      >
                        S/ {proveedorSeleccionado.saldoActual.toFixed(2)}
                      </div>
                      <div className="text-sm text-gray-600">Saldo Actual</div>
                    </div>
                    <div className="text-center p-3 bg-orange-50 rounded-lg">
                      <div className="text-xl font-bold text-orange-600">
                        S/ {proveedorSeleccionado.adelantosPendientes.toFixed(2)}
                      </div>
                      <div className="text-sm text-gray-600">Adelantos Pendientes</div>
                    </div>
                    <div className="text-center p-3 bg-green-50 rounded-lg">
                      <div className="text-xl font-bold text-green-600">
                        S/ {proveedorSeleccionado.creditoDisponible.toFixed(2)}
                      </div>
                      <div className="text-sm text-gray-600">Crédito Disponible</div>
                    </div>
                    <div className="text-center p-3 bg-gray-50 rounded-lg">
                      <div className="text-xl font-bold text-gray-600">
                        S/ {proveedorSeleccionado.totalAdelantosDescontados.toFixed(2)}
                      </div>
                      <div className="text-sm text-gray-600">Total Descontado</div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Tabs defaultValue="movimientos" className="space-y-4">
                <TabsList>
                  <TabsTrigger value="movimientos">Movimientos</TabsTrigger>
                  <TabsTrigger value="estadisticas">Estadísticas</TabsTrigger>
                </TabsList>

<TabsContent value="movimientos">
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <FileText className="w-5 h-5" />
                        Historial de Movimientos
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Fecha</TableHead>
                            <TableHead>Tipo</TableHead>
                            <TableHead>Descripción</TableHead>
                            <TableHead>Monto</TableHead>
                            <TableHead>Estado</TableHead>
                            <TableHead>Responsable</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {proveedorSeleccionado.movimientos.map((movimiento) => (
                            <TableRow key={movimiento.id}>
                              <TableCell>{movimiento.fecha}</TableCell>
                              <TableCell>
                                <Badge
                                  variant={
                                    movimiento.tipo === "adelanto"
                                      ? "default"
                                      : movimiento.tipo === "descuento"
                                        ? "secondary"
                                        : movimiento.tipo === "ajuste_positivo"
                                          ? "outline"
                                          : "destructive"
                                  }
                                >
                                  {movimiento.tipo.replace("_", " ")}
                                </Badge>
                              </TableCell>
                              <TableCell>{movimiento.descripcion}</TableCell>
                              <TableCell className={movimiento.monto >= 0 ? "text-green-600" : "text-red-600"}>
                                S/ {Math.abs(movimiento.monto).toFixed(2)}
                                {movimiento.monto >= 0 ? " (+)" : " (-)"}
                              </TableCell>
                              <TableCell>
                                <Badge
                                  variant={
                                    movimiento.estado === "aplicado"
                                      ? "default"
                                      : movimiento.estado === "pendiente"
                                        ? "secondary"
                                        : "destructive"
                                  }
                                >
                                  {movimiento.estado}
                                </Badge>
                              </TableCell>
                              <TableCell>{movimiento.responsable}</TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </CardContent>
                  </Card>
                </TabsContent>

<TabsContent value="estadisticas">
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <TrendingUp className="w-5 h-5" />
                        Estadísticas de Producción
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div className="text-center p-4 border rounded-lg">
                          <div className="text-2xl font-bold text-blue-600">
                            {proveedorSeleccionado.estadisticas.totalKgEntregados.toLocaleString()}
                          </div>
                          <div className="text-sm text-gray-600">kg Entregados</div>
                        </div>
                        <div className="text-center p-4 border rounded-lg">
                          <div className="text-2xl font-bold text-green-600">
                            {proveedorSeleccionado.estadisticas.totalLiquidaciones}
                          </div>
                          <div className="text-sm text-gray-600">Liquidaciones</div>
                        </div>
                        <div className="text-center p-4 border rounded-lg">
                          <div className="text-2xl font-bold text-purple-600">
                            {proveedorSeleccionado.estadisticas.promedioCalidad.toFixed(1)}%
                          </div>
                          <div className="text-sm text-gray-600">Calidad Promedio</div>
                        </div>
                        <div className="text-center p-4 border rounded-lg">
                          <div className="text-2xl font-bold text-orange-600">
                            {proveedorSeleccionado.estadisticas.frecuenciaEntregas.toFixed(1)}
                          </div>
                          <div className="text-sm text-gray-600">Entregas/Mes</div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>
              </Tabs>
            </>
          ) : (
            <Card>
              <CardContent className="flex items-center justify-center h-64">
                <div className="text-center text-gray-500">
                  <Users className="w-12 h-12 mx-auto mb-4 opacity-50" />
                  <p>Selecciona un proveedor para ver su información detallada</p>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/gestion-personal-subprocesos.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Search, Plus, Users, Trash2, RefreshCw, User, UserPlus, Edit, Check, X, Loader2, AlertCircle } from 'lucide-react'
import { usePersonalSubprocesos } from "@/lib/hooks/use-personal-subprocesos"

// Tipos de datos
interface AsignacionPersonal {
  operacion: string
  hombres: number
  mujeres: number
  horaInicio: string
  horaFin: string
  personalReutilizable: boolean
  personalAsignado: string[]
}

interface PlanificacionActiva {
  id: string
  pedidoId: string
  codigoPedido: string
  codigoLote: string
  fechaPlanificacion: string
  operaciones: AsignacionPersonal[]
  estado: "planificado" | "en-proceso" | "completado" | "cancelado"
  totalPersonal: number
  personalDisponible: number
}

interface PersonalDisponible {
  id: string
  nombre: string
  genero: "hombre" | "mujer"
  especialidad: string[]
  disponible: boolean
}

export function GestionPersonalSubprocesos() {
  const { planificaciones, personalDisponible, loading, error, refresh } = usePersonalSubprocesos()
  const [busqueda, setBusqueda] = useState("")

const planificacionesFiltradas = planificaciones.filter(
    (plan) =>
      plan.codigoPedido?.toLowerCase().includes(busqueda.toLowerCase()) ||
      plan.codigoLote?.toLowerCase().includes(busqueda.toLowerCase()),
  )

const getEstadoBadge = (estado: string) => {
    switch (estado) {
      case "planificado":
        return <Badge variant="outline">Planificado</Badge>
      case "en-proceso":
        return <Badge className="bg-blue-100 text-blue-800 border-blue-200">En Proceso</Badge>
      case "completado":
        return <Badge className="bg-green-100 text-green-800 border-green-200">Completado</Badge>
      case "cancelado":
        return <Badge className="bg-red-100 text-red-800 border-red-200">Cancelado</Badge>
      default:
        return <Badge variant="secondary">{estado}</Badge>
    }
  }

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold">Gestión de Personal - Subprocesos</h2>
          <p className="text-sm text-gray-600">Planificación de personal por operaciones con reutilización</p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Nueva Planificación
        </Button>
      </div>

{/* Filtros */}
      <div className="flex space-x-3">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            placeholder="Buscar por pedido o lote..."
            value={busqueda}
            onChange={(e) => setBusqueda(e.target.value)}
            className="pl-10"
          />
        </div>
      </div>

{/* Tabla de planificaciones activas */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-lg">Planificaciones Activas ({planificacionesFiltradas.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Pedido</TableHead>
                <TableHead>Lote</TableHead>
                <TableHead>Fecha</TableHead>
                <TableHead>Operaciones</TableHead>
                <TableHead>Personal Total</TableHead>
                <TableHead>Personal Único</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {planificacionesFiltradas.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-4">
                    No hay planificaciones registradas
                  </TableCell>
                </TableRow>
              ) : (
                planificacionesFiltradas.map((planificacion) => (
                  <TableRow key={planificacion.id}>
                    <TableCell className="font-medium">{planificacion.codigoPedido}</TableCell>
                    <TableCell>{planificacion.codigoLote}</TableCell>
                    <TableCell>{planificacion.fechaPlanificacion}</TableCell>
                    <TableCell>
                      <span className="text-sm">{planificacion.operaciones?.length || 0} ops</span>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-1">
                        <Users className="h-4 w-4 text-blue-500" />
                        <span className="font-medium">{planificacion.totalPersonal}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span className="font-medium">{planificacion.personalDisponible}</span>
                    </TableCell>
                    <TableCell>{getEstadoBadge(planificacion.estado)}</TableCell>
                    <TableCell>
                      <div className="flex gap-1">
                        <Button size="sm" variant="outline">
                          <Edit className="h-3 w-3" />
                        </Button>
                        <Button size="sm" variant="outline" className="text-red-600 hover:text-red-700">
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Personal Disponible Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="text-sm">Personal Disponible ({personalDisponible.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            {personalDisponible.map((persona) => (
              <Badge key={persona.id} variant="outline" className="text-xs">
                {persona.nombre}
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/kardex-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { MovimientoKardex, SaldoKardex, ApiResponse } from "@/lib/types"

export const kardexService = {
  async getAll() {
    return this.obtenerTodosLosMovimientos()
  },

async registrarMovimiento(datos: Omit<MovimientoKardex, "id" | "created_at" | "updated_at" | "saldo">) {
    try {
      const response = await ApiService.post<ApiResponse<MovimientoKardex>>(API_ENDPOINTS.KARDEX, datos)
      return response.data
    } catch (error) {
      console.error("Error al registrar movimiento kardex:", error)
      throw error
    }
  },

async obtenerMovimientosLote(loteId: number) {
    try {
      const response = await ApiService.get<ApiResponse<MovimientoKardex[]>>(API_ENDPOINTS.KARDEX)
      const movimientos = response.data.filter((m) => m.lote_id === loteId)
      return movimientos.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
    } catch (error) {
      console.error("Error al obtener movimientos:", error)
      throw error
    }
  },

async obtenerSaldoLote(loteId: number): Promise<SaldoKardex> {
    try {
      const movimientos = await this.obtenerMovimientosLote(loteId)

if (movimientos.length === 0) {
        return {
          id: 0,
          lote_id: loteId,
          saldo_actual: 0,
          ultima_actualizacion: new Date().toISOString(),
        }
      }

const ultimoMovimiento = movimientos[0]
      return {
        id: 0,
        lote_id: loteId,
        saldo_actual: ultimoMovimiento.saldo,
        ultima_actualizacion: ultimoMovimiento.fecha,
      }
    } catch (error) {
      console.error("Error al obtener saldo:", error)
      return {
        id: 0,
        lote_id: loteId,
        saldo_actual: 0,
        ultima_actualizacion: new Date().toISOString(),
      }
    }
  },

async obtenerTodosLosMovimientos() {
    try {
      const response = await ApiService.get<ApiResponse<MovimientoKardex[]>>(API_ENDPOINTS.KARDEX)
      return response.data.sort((a, b) => new Date(b.fecha).getTime() - new Date(a.fecha).getTime())
    } catch (error) {
      console.error("Error al obtener todos los movimientos:", error)
      return []
    }
  },
}
[V0_FILE]typescriptreact:file="app/almacen/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Warehouse, Clock, AlertTriangle, Package, Search, Calendar, Scale, Plus, CheckCircle2, Circle, DollarSign, X, Calculator, User } from 'lucide-react'
import { useApi } from "@/lib/hooks/use-api"
import { lotesService } from "@/lib/services/lotes-service"
import { usePersonas } from "@/lib/hooks/use-personas"
import type { Lote } from "@/lib/types/index"

type EstadoLiquidacion = "recibido" | "procesado" | "liquidado" | "pagado"

function calcularDiasDesdeFecha(fechaIngreso: string): number {
  try {
    const fecha = new Date(fechaIngreso)
    const hoy = new Date()
    const diff = hoy.getTime() - fecha.getTime()
    return Math.floor(diff / (1000 * 60 * 60 * 24))
  } catch {
    return 0
  }
}

function getEstadoFrescura(diasDesdeCosecha: number): "optimo" | "proximo-a-vencer" | "en-riesgo" {
  if (diasDesdeCosecha <= 5) return "optimo"
  if (diasDesdeCosecha <= 10) return "proximo-a-vencer"
  return "en-riesgo"
}

function mapearEstadoLiquidacion(estadoLote: string): EstadoLiquidacion {
  switch (estadoLote) {
    case "pendiente":
      return "recibido"
    case "proceso":
      return "procesado"
    case "completado":
    case "liquidado":
      return "liquidado"
    case "entregado":
      return "pagado"
    default:
      return "recibido"
  }
}

export default function AlmacenPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filtroEstado, setFiltroEstado] = useState("todos")
  const [mostrarFormulario, setMostrarFormulario] = useState(false)
  
  const [proveedorBusqueda, setProveedorBusqueda] = useState("")
  const [mostrarResultadosProveedor, setMostrarResultadosProveedor] = useState(false)
  const [proveedorSeleccionado, setProveedorSeleccionado] = useState<any>(null)
  
  const [formData, setFormData] = useState({
    productor_id: "",
    producto: "jengibre",
    peso_bruto: "",
    num_jabas: "",
    tara_promedio: "",
    tipo_compra: "directa",
    precio_fijo: "",
    transportista: "",
    placa: "",
    observaciones: "",
  })

const { data: lotes, loading: loadingLotes, refresh: refreshLotes } = useApi(lotesService, { initialLoad: true })
  const { data: personas, loading: loadingPersonas } = usePersonas()

const productores = useMemo(() => {
    if (!Array.isArray(personas) || personas.length === 0) return []
    console.log("[v0] Total personas loaded:", personas.length)
    const prods = personas.filter((p) => p.tipo === "productor" || p.tipo === "Productor")
    console.log("[v0] Productores filtered:", prods.length, prods.map(p => ({ nombre: `${p.nombres} ${p.apellidos}`, tipo: p.tipo })))
    return prods
  }, [personas])

const proveedoresFiltrados = useMemo(() => {
    if (!proveedorBusqueda.trim()) return []
    const searchLower = proveedorBusqueda.toLowerCase()
    
    const filtered = productores.filter((p) => {
      const nombreCompleto = `${p.nombres || ''} ${p.apellidos || ''}`.toLowerCase()
      const dni = (p.dni || '').toLowerCase()
      const telefono = (p.telefono || '').toLowerCase()
      const matchNombre = nombreCompleto.includes(searchLower)
      const matchDni = dni.includes(searchLower)
      const matchTelefono = telefono.includes(searchLower)
      return matchNombre || matchDni || matchTelefono
    }).slice(0, 5)
    
    console.log("[v0] Provider search:", { searchTerm: proveedorBusqueda, totalProductores: productores.length, filtered: filtered.length })
    return filtered
  }, [proveedorBusqueda, productores])

const calculations = useMemo(() => {
    const jabas = Number.parseFloat(formData.num_jabas) || 0
    const peso = Number.parseFloat(formData.peso_bruto) || 0
    const tara = Number.parseFloat(formData.tara_promedio) || 0

const pesoPromedioPorJaba = jabas > 0 ? peso / jabas : 0
    const taraTotal = tara * jabas
    const pesoNeto = peso - taraTotal

return {
      pesoPromedioPorJaba: pesoPromedioPorJaba.toFixed(2),
      taraTotal: taraTotal.toFixed(2),
      pesoNeto: Math.max(0, pesoNeto).toFixed(2),
    }
  }, [formData.num_jabas, formData.peso_bruto, formData.tara_promedio])

const precioTotal = useMemo(() => {
    if (formData.tipo_compra === "cerrada" && formData.precio_fijo) {
      const pesoNeto = Number(calculations.pesoNeto) || 0
      const precioUnitario = Number(formData.precio_fijo) || 0
      return (pesoNeto * precioUnitario).toFixed(2)
    }
    return "0.00"
  }, [formData.tipo_compra, formData.precio_fijo, calculations.pesoNeto])

const lotesAlmacen = useMemo(() => {
    if (!Array.isArray(lotes)) return []
    
    return lotes.map((lote) => {
      // Backend sends: productor_nombre, numero_lote
      const proveedor = lote.productor_nombre || "Sin proveedor"
      const codigo = lote.numero_lote || lote.codigo || `LOTE-${lote.id}`
      const diasDesdeCosecha = calcularDiasDesdeFecha(lote.fecha_ingreso)
      const estado = getEstadoFrescura(diasDesdeCosecha)
      const estadoLiquidacion = mapearEstadoLiquidacion(lote.estado)
      
      return {
        id: String(lote.id),
        codigo,
        producto: lote.producto || "jengibre",
        proveedor,
        fechaIngreso: lote.fecha_ingreso,
        diasDesdeCosecha,
        numeroJabas: Number(lote.numero_jabas || lote.num_jabas || 0),
        jabasCompletas: Number(lote.numero_jabas || lote.num_jabas || 0),
        pesoTotal: Number(lote.peso_neto || lote.peso_inicial || lote.peso_bruto || 0),
        estado,
        estadoLiquidacion,
        proximaAccion: lote.estado === "pendiente" ? "sin-asignar" : 
                      lote.estado === "proceso" ? "en-proceso" : 
                      lote.estado === "completado" || lote.estado === "liquidado" ? "finalizado-envio" : "asignado-lote",
        loteOriginal: lote,
      }
    })
  }, [lotes])

const lotesFiltrados = lotesAlmacen.filter((lote) => {
    const coincideBusqueda =
      (lote.codigo || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
      (lote.proveedor || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
      (lote.producto || "").toLowerCase().includes(searchTerm.toLowerCase())

const coincideEstado = filtroEstado === "todos" || lote.estado === filtroEstado

return coincideBusqueda && coincideEstado
  })

const getFrescuraSemaforo = (diasDesdeCosecha: number) => {
    if (diasDesdeCosecha <= 5) {
      return <Circle className="h-4 w-4 text-green-500 fill-current" />
    } else if (diasDesdeCosecha <= 10) {
      return <Circle className="h-4 w-4 text-yellow-500 fill-current" />
    } else {
      return <Circle className="h-4 w-4 text-red-500 fill-current" />
    }
  }

const getEstadoLiquidacionBadge = (estado: EstadoLiquidacion) => {
    const config = {
      recibido: { text: "Recibido", color: "text-blue-600", bgColor: "bg-blue-50", icon: Package },
      procesado: { text: "Procesado", color: "text-yellow-600", bgColor: "bg-yellow-50", icon: Clock },
      liquidado: { text: "Liquidado", color: "text-orange-600", bgColor: "bg-orange-50", icon: DollarSign },
      pagado: { text: "Pagado", color: "text-green-600", bgColor: "bg-green-50", icon: CheckCircle2 },
    }

const { text, color, bgColor, icon: Icon } = config[estado]
    return (
      <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${bgColor}`}>
        <Icon className={`h-4 w-4 ${color}`} />
        <span className={`text-sm font-medium ${color}`}>{text}</span>
      </div>
    )
  }

const getProximaAccionTexto = (accion: string) => {
    const labels = {
      "sin-asignar": { text: "Sin Asignar", color: "text-red-600", bgColor: "bg-red-50", circle: "text-red-500" },
      "asignado-lote": {
        text: "Asignado a Lote",
        color: "text-yellow-600",
        bgColor: "bg-yellow-50",
        circle: "text-yellow-500",
      },
      "en-proceso": { text: "En Proceso", color: "text-blue-600", bgColor: "bg-blue-50", circle: "text-blue-500" },
      "finalizado-envio": {
        text: "Finalizado para Envío",
        color: "text-green-600",
        bgColor: "bg-green-50",
        circle: "text-green-500" },
    }

const config = labels[accion as keyof typeof labels] || labels["sin-asignar"]
    return (
      <div className="flex items-center gap-2">
        <Circle className={`h-3 w-3 fill-current ${config.circle}`} />
        <span className={`text-sm font-medium ${config.color}`}>{config.text}</span>
      </div>
    )
  }

const getDiasColor = (diasDesdeCosecha: number) => {
    if (diasDesdeCosecha > 10) return "text-red-600 font-bold"
    if (diasDesdeCosecha > 5) return "text-yellow-600 font-medium"
    return "text-green-600"
  }

const getEstadoTexto = (estado: string) => {
    const labels = {
      optimo: { text: "Óptimo", color: "text-green-600", bgColor: "bg-green-50" },
      "proximo-a-vencer": { text: "Próximo a Vencer", color: "text-yellow-600", bgColor: "bg-yellow-50" },
      "en-riesgo": { text: "En Riesgo", color: "text-red-600", bgColor: "bg-red-50" },
    }

const config = labels[estado as keyof typeof labels] || labels.optimo
    return (
      <span className={`px-2 py-1 rounded-full text-xs font-medium ${config.bgColor} ${config.color}`}>
        {config.text}
      </span>
    )
  }

const handleLiquidar = async (lote: any) => {
    try {
      await lotesService.update(Number(lote.id), { estado: "completado" })
      refreshLotes()
      alert(`Lote ${lote.codigo} liquidado correctamente`)
    } catch (error) {
      console.error("[v0] Error al liquidar lote:", error)
      alert("Error al liquidar el lote")
    }
  }

const seleccionarProveedor = (proveedor: any) => {
    setProveedorSeleccionado(proveedor)
    setFormData({ ...formData, productor_id: String(proveedor.id) })
    setProveedorBusqueda(`${proveedor.nombres || ''} ${proveedor.apellidos || ''}`)
    setMostrarResultadosProveedor(false)
  }

const handleSubmitIngreso = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!proveedorSeleccionado) {
      alert("Debe seleccionar un proveedor")
      return
    }

try {
      const codigo = await lotesService.generarCodigoLote()
      const pesoNeto = Number(calculations.pesoNeto)
      
      const nuevoLote = {
        codigo,
        productor_id: Number(formData.productor_id),
        peso_bruto: Number(formData.peso_bruto),
        peso_neto: pesoNeto,
        tara: Number(calculations.taraTotal),
        num_jabas: Number(formData.num_jabas),
        fecha_ingreso: new Date().toISOString().split('T')[0],
        estado: "pendiente" as const,
        observaciones: formData.observaciones,
        tipo_compra: formData.tipo_compra,
        precio_unitario: formData.tipo_compra === "cerrada" ? Number(formData.precio_fijo) : undefined,
        precio_total: formData.tipo_compra === "cerrada" ? Number(precioTotal) : undefined,
      }

console.log("[v0] Creating lote:", nuevoLote)
      await lotesService.create(nuevoLote)
      
      // Reset form
      setFormData({
        productor_id: "",
        producto: "jengibre",
        peso_bruto: "",
        num_jabas: "",
        tara_promedio: "",
        tipo_compra: "directa",
        precio_fijo: "",
        transportista: "",
        placa: "",
        observaciones: "",
      })
      setProveedorSeleccionado(null)
      setProveedorBusqueda("")
      setMostrarFormulario(false)
      refreshLotes()
      alert(`Ingreso registrado correctamente. Código: ${codigo}`)
    } catch (error) {
      console.error("[v0] Error al registrar ingreso:", error)
      alert("Error al registrar el ingreso")
    }
  }

const lotesCriticos = lotesAlmacen.filter(
    (lote) => lote.proximaAccion === "sin-asignar" && lote.diasDesdeCosecha > 10,
  )

const lotesConAlertas = lotesAlmacen.filter((lote) => lote.proximaAccion === "sin-asignar")

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Warehouse className="h-8 w-8 text-primary" />
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Control de Almacén</h1>
            <p className="text-gray-600">Gestión de lotes y control de materia prima</p>
          </div>
        </div>
        <Button onClick={() => setMostrarFormulario(!mostrarFormulario)}>
          <Plus className="mr-2 h-4 w-4" />
          {mostrarFormulario ? "Cancelar" : "Nuevo Ingreso Materia Prima"}
        </Button>
      </div>

{mostrarFormulario && (
        <Card className="sayariq-card border-primary">
          <CardHeader>
            <CardTitle>Nuevo Ingreso de Materia Prima</CardTitle>
            <CardDescription>Registre la recepción de materia prima del productor</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmitIngreso} className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Left Column - Form Data */}
                <div className="lg:col-span-2 space-y-4">
                  {/* Provider Search with Lupa */}
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 text-lg">
                        <Search className="h-5 w-5" />
                        Búsqueda de Proveedor
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 z-10" />
                        <Input
                          value={proveedorBusqueda}
                          onChange={(e) => {
                            setProveedorBusqueda(e.target.value)
                            setMostrarResultadosProveedor(true)
                            if (!e.target.value) setProveedorSeleccionado(null)
                          }}
                          onFocus={() => setMostrarResultadosProveedor(true)}
                          className="pl-10"
                          placeholder="🔍 Buscar proveedor por nombre, DNI o teléfono..."
                          disabled={loadingPersonas}
                        />
                        {mostrarResultadosProveedor && proveedorBusqueda && (
                          <div className="absolute z-20 w-full mt-1 bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
                            {proveedoresFiltrados.length > 0 ? (
                              <>
                                {proveedoresFiltrados.map((proveedor) => (
                                  <div
                                    key={proveedor.id}
                                    className="px-4 py-3 hover:bg-blue-50 cursor-pointer border-b last:border-b-0"
                                    onClick={() => seleccionarProveedor(proveedor)}
                                  >
                                    <div className="font-medium">{proveedor.nombres} {proveedor.apellidos}</div>
                                    <div className="text-sm text-gray-500">
                                      DNI: {proveedor.dni || 'N/A'} • Tel: {proveedor.telefono || 'N/A'}
                                    </div>
                                  </div>
                                ))}
                              </>
                            ) : (
                              <div className="px-4 py-6 text-center text-gray-500">
                                No se encontraron proveedores
                              </div>
                            )}
                          </div>
                        )}
                      </div>

{proveedorSeleccionado && (
                        <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                          <div className="flex items-center justify-between">
                            <div>
                              <div className="font-medium text-green-800 flex items-center gap-2">
                                <CheckCircle2 className="h-4 w-4" />
                                {proveedorSeleccionado.nombres} {proveedorSeleccionado.apellidos}
                              </div>
                              <div className="text-sm text-green-600 mt-1">
                                DNI: {proveedorSeleccionado.dni || 'N/A'} • Tel: {proveedorSeleccionado.telefono || 'N/A'}
                              </div>
                            </div>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => {
                                setProveedorSeleccionado(null)
                                setFormData({ ...formData, productor_id: "" })
                                setProveedorBusqueda("")
                              }}
                            >
                              <X className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      )}
                    </CardContent>
                  </Card>

{/* Batch Information */}
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 text-lg">
                        <Package className="h-5 w-5" />
                        Información del Lote
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="producto">Producto *</Label>
                          <Select
                            value={formData.producto}
                            onValueChange={(value) => setFormData({ ...formData, producto: value })}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="jengibre">🫚 Jengibre</SelectItem>
                              <SelectItem value="curcuma">🟡 Cúrcuma</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="tipo_compra">Tipo de Compra *</Label>
                          <Select
                            value={formData.tipo_compra}
                            onValueChange={(value) => setFormData({ ...formData, tipo_compra: value })}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="directa">💰 Compra Directa (clasificar después)</SelectItem>
                              <SelectItem value="cerrada">📦 Carga Cerrada (precio fijo)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

<div className="grid grid-cols-3 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="num_jabas">Número de Jabas *</Label>
                          <Input
                            id="num_jabas"
                            type="number"
                            placeholder="0"
                            value={formData.num_jabas}
                            onChange={(e) => setFormData({ ...formData, num_jabas: e.target.value })}
                            required
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="peso_bruto">Peso Bruto (kg) *</Label>
                          <Input
                            id="peso_bruto"
                            type="number"
                            step="0.01"
                            placeholder="0.00"
                            value={formData.peso_bruto}
                            onChange={(e) => setFormData({ ...formData, peso_bruto: e.target.value })}
                            required
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="tara_promedio">Tara Promedio (kg/jaba)</Label>
                          <Input
                            id="tara_promedio"
                            type="number"
                            step="0.01"
                            placeholder="0.00"
                            value={formData.tara_promedio}
                            onChange={(e) => setFormData({ ...formData, tara_promedio: e.target.value })}
                          />
                        </div>
                      </div>

{formData.tipo_compra === "cerrada" && (
                        <div className="space-y-2">
                          <Label htmlFor="precio_fijo">Precio Fijo (S/. por kg) *</Label>
                          <Input
                            id="precio_fijo"
                            type="number"
                            step="0.01"
                            placeholder="0.00"
                            value={formData.precio_fijo}
                            onChange={(e) => setFormData({ ...formData, precio_fijo: e.target.value })}
                            required={formData.tipo_compra === "cerrada"}
                          />
                        </div>
                      )}

<div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="transportista">Transportista</Label>
                          <Input
                            id="transportista"
                            placeholder="Nombre del transportista"
                            value={formData.transportista}
                            onChange={(e) => setFormData({ ...formData, transportista: e.target.value })}
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="placa">Placa del Vehículo</Label>
                          <Input
                            id="placa"
                            placeholder="ABC-123"
                            value={formData.placa}
                            onChange={(e) => setFormData({ ...formData, placa: e.target.value.toUpperCase() })}
                          />
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="observaciones">Observaciones</Label>
                        <Textarea
                          id="observaciones"
                          placeholder="Notas adicionales sobre el ingreso..."
                          value={formData.observaciones}
                          onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                          rows={3}
                        />
                      </div>
                    </CardContent>
                  </Card>
                </div>

{/* Right Column - Calculations */}
                <div className="space-y-4">
                  <Card className="bg-gradient-to-br from-blue-50 to-indigo-50">
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 text-base">
                        <Calculator className="h-4 w-4" />
                        Cálculos Automáticos
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <div className="bg-white p-3 rounded-lg border">
                        <div className="flex items-center gap-2 mb-1">
                          <Package className="h-3 w-3 text-gray-600" />
                          <span className="text-xs font-medium text-gray-600">Número de Jabas</span>
                        </div>
                        <p className="text-xl font-bold">{formData.num_jabas || "0"}</p>
                      </div>

<div className="bg-white p-3 rounded-lg border">
                        <div className="flex items-center gap-2 mb-1">
                          <Scale className="h-3 w-3 text-gray-600" />
                          <span className="text-xs font-medium text-gray-600">Peso Bruto Total</span>
                        </div>
                        <p className="text-xl font-bold">{formData.peso_bruto || "0"} kg</p>
                      </div>

<div className="bg-white p-3 rounded-lg border border-blue-200">
                        <div className="flex items-center gap-2 mb-1">
                          <Calculator className="h-3 w-3 text-blue-600" />
                          <span className="text-xs font-medium text-blue-600">Peso por Jaba</span>
                        </div>
                        <p className="text-xl font-bold text-blue-800">{calculations.pesoPromedioPorJaba} kg</p>
                      </div>

<div className="bg-white p-3 rounded-lg border border-amber-200">
                        <div className="flex items-center gap-2 mb-1">
                          <Scale className="h-3 w-3 text-amber-600" />
                          <span className="text-xs font-medium text-amber-600">Tara Total</span>
                        </div>
                        <p className="text-xl font-bold text-amber-800">{calculations.taraTotal} kg</p>
                      </div>

<div className="bg-white p-3 rounded-lg border border-green-200">
                        <div className="flex items-center gap-2 mb-1">
                          <Scale className="h-3 w-3 text-green-600" />
                          <span className="text-xs font-medium text-green-600">Peso Neto</span>
                        </div>
                        <p className="text-xl font-bold text-green-800">{calculations.pesoNeto} kg</p>
                      </div>

{formData.tipo_compra === "cerrada" && formData.precio_fijo && (
                        <div className="bg-white p-3 rounded-lg border border-purple-200">
                          <div className="flex items-center gap-2 mb-1">
                            <DollarSign className="h-3 w-3 text-purple-600" />
                            <span className="text-xs font-medium text-purple-600">Precio Total</span>
                          </div>
                          <p className="text-xl font-bold text-purple-800">S/. {precioTotal}</p>
                          <p className="text-xs text-gray-500 mt-1">
                            {calculations.pesoNeto} kg × S/. {formData.precio_fijo}/kg
                          </p>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                  
                  {proveedorSeleccionado && (
                    <Card className="bg-gradient-to-br from-green-50 to-emerald-50">
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-base">
                          <User className="h-4 w-4" />
                          Proveedor Seleccionado
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-2 text-sm">
                        <div>
                          <span className="text-gray-600">Nombre:</span>
                          <p className="font-medium">{proveedorSeleccionado.nombres} {proveedorSeleccionado.apellidos}</p>
                        </div>
                        <div>
                          <span className="text-gray-600">DNI:</span>
                          <p className="font-medium">{proveedorSeleccionado.dni || 'N/A'}</p>
                        </div>
                        <div>
                          <span className="text-gray-600">Teléfono:</span>
                          <p className="font-medium">{proveedorSeleccionado.telefono || 'N/A'}</p>
                        </div>
                      </CardContent>
                    </Card>
                  )}
                </div>
              </div>

<div className="flex gap-3 justify-end pt-4 border-t">
                <Button type="button" variant="outline" onClick={() => setMostrarFormulario(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={!proveedorSeleccionado}>
                  Registrar Ingreso
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

{/* Estadísticas Generales */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="sayariq-card">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <Package className="h-5 w-5 text-blue-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Total Lotes</p>
                <p className="text-2xl font-bold text-gray-900">{lotesAlmacen.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="sayariq-card">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                <AlertTriangle className="h-5 w-5 text-red-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Lotes Críticos</p>
                <p className="text-2xl font-bold text-red-600">{lotesCriticos.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="sayariq-card">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                <Clock className="h-5 w-5 text-orange-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Sin Asignar</p>
                <p className="text-2xl font-bold text-orange-600">{lotesConAlertas.length}</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="sayariq-card">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <Scale className="h-5 w-5 text-green-600" />
              </div>
              <div>
                <p className="text-sm text-gray-600">Peso Total</p>
                <p className="text-2xl font-bold text-green-600">
                  {(lotesAlmacen.reduce((sum, lote) => sum + (Number(lote.pesoTotal) || 0), 0)).toFixed(0)} kg
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Alertas Críticas */}
      {lotesCriticos.length > 0 && (
        <Card className="sayariq-card border-red-200 bg-red-50">
          <CardHeader>
            <CardTitle className="text-red-700 flex items-center gap-2">
              <AlertTriangle className="h-5 w-5" />
              Alertas Críticas - Lotes Sin Asignar con Más de 10 Días desde Ingreso
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {lotesCriticos.map((lote) => (
                <div
                  key={lote.id}
                  className="flex flex-col sm:flex-row sm:items-center justify-between p-4 bg-white rounded-lg border-l-4 border-red-500 gap-3"
                >
                  <div>
                    <span className="font-bold">{lote.codigo}</span> - {lote.proveedor}
                    <div className="text-sm text-gray-600">
                      {lote.diasDesdeCosecha} días desde ingreso - Estado: {lote.estadoLiquidacion}
                    </div>
                  </div>
                  <div className="text-right">
                    {getProximaAccionTexto(lote.proximaAccion)}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

{/* Tabla de Control de Lotes */}
      <Card className="sayariq-card">
        <CardHeader>
          <CardTitle>Control de Lotes en Almacén</CardTitle>
          <CardDescription>
            {loadingLotes ? "Cargando..." : `${lotesFiltrados.length} lotes encontrados`}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {loadingLotes ? (
            <div className="text-center py-8 text-gray-500">
              <Package className="h-12 w-12 text-gray-300 mx-auto mb-4 animate-pulse" />
              <p>Cargando lotes...</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="sayariq-table">
                <thead>
                  <tr>
                    <th>Código</th>
                    <th>Proveedor</th>
                    <th>Producto</th>
                    <th>Días desde Ingreso</th>
                    <th>Jabas</th>
                    <th>Peso (kg)</th>
                    <th>Estado (Frescura)</th>
                    <th>Estado Liquidación</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {lotesFiltrados.map((lote) => (
                    <tr key={lote.id} className="hover:bg-gray-50">
                      <td className="font-medium">{lote.codigo}</td>
                      <td>{lote.proveedor}</td>
                      <td className="capitalize">{lote.producto}</td>
                      <td>
                        <div className="flex items-center gap-2">
                          <Calendar className="h-4 w-4 text-gray-400" />
                          <span className={
                            lote.diasDesdeCosecha > 10 ? "text-red-600 font-bold" :
                            lote.diasDesdeCosecha > 5 ? "text-yellow-600 font-medium" :
                            "text-green-600"
                          }>{lote.diasDesdeCosecha} días</span>
                        </div>
                      </td>
                      <td>
                        <div className="text-sm">
                          <div className="font-medium">{lote.jabasCompletas}/{lote.numeroJabas}</div>
                          <div className="text-gray-500 text-xs">completas/total</div>
                        </div>
                      </td>
                      <td>
                        <div className="font-medium">{(Number(lote.pesoTotal) || 0).toFixed(2)}</div>
                      </td>
                      <td>
                        <div className="flex items-center gap-2">
                          {getFrescuraSemaforo(lote.diasDesdeCosecha)}
                          {getEstadoTexto(lote.estado)}
                        </div>
                      </td>
                      <td>{getEstadoLiquidacionBadge(lote.estadoLiquidacion)}</td>
                      <td>
                        {lote.estadoLiquidacion === "procesado" && (
                          <Button
                            variant="default"
                            size="sm"
                            onClick={() => handleLiquidar(lote)}
                            className="bg-green-600 hover:bg-green-700"
                          >
                            <DollarSign className="h-4 w-4 mr-1" />
                            Liquidar
                          </Button>
                        )}
                        {lote.estadoLiquidacion === "recibido" && (
                          <span className="text-xs text-gray-500">Pendiente clasificar</span>
                        )}
                        {lote.estadoLiquidacion === "liquidado" && (
                          <span className="text-xs text-orange-600">Pendiente pago</span>
                        )}
                        {lote.estadoLiquidacion === "pagado" && (
                          <CheckCircle2 className="h-5 w-5 text-green-600" />
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

{!loadingLotes && lotesFiltrados.length === 0 && (
            <div className="text-center py-8">
              <Warehouse className="h-12 w-12 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500">No se encontraron lotes en almacén</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/hooks/use-pedidos-pro.ts" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useApi } from "./use-api"
import { pedidosService } from "@/lib/services/pedidos-service"

export function usePedidosPro() {
  const { data, loading, error, refresh } = useApi(pedidosService, { initialLoad: true })
  const [actionLoading, setActionLoading] = useState(false)

const create = async (pedidoData: any) => {
    setActionLoading(true)
    try {
      const newPedido = await pedidosService.create(pedidoData)
      await refresh()
      return newPedido
    } catch (err) {
      console.error("[v0] Error creating pedido:", err)
      throw err
    } finally {
      setActionLoading(false)
    }
  }

const update = async (id: number, updates: any) => {
    setActionLoading(true)
    try {
      const updatedPedido = await pedidosService.update(id, updates)
      await refresh()
      return updatedPedido
    } catch (err) {
      console.error("[v0] Error updating pedido:", err)
      throw err
    } finally {
      setActionLoading(false)
    }
  }

const remove = async (id: number) => {
    setActionLoading(true)
    try {
      await pedidosService.delete(id)
      await refresh()
      return true
    } catch (err) {
      console.error("[v0] Error deleting pedido:", err)
      throw err
    } finally {
      setActionLoading(false)
    }
  }

return {
    data: Array.isArray(data) ? data : [],
    loading: loading || actionLoading,
    error,
    refresh,
    create,
    update,
    remove,
  }
}
[V0_FILE]typescriptreact:file="components/gestion-pedidos-pro.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Search, Filter, Package, Calendar, DollarSign, User, Clock, CheckCircle, Settings, Truck, Target, Scale, Tag, Droplets, Box, Award, MessageSquare, PackageOpen, Loader2, AlertCircle, Plus, X } from 'lucide-react'
import { usePedidosPro } from "@/lib/hooks/use-pedidos-pro"

// Función para calcular días de antigüedad
const calcularDiasAntiguedad = (fechaIngreso: string) => {
  const hoy = new Date()
  const fecha = new Date(fechaIngreso)
  const diferencia = Math.floor((hoy.getTime() - fecha.getTime()) / (1000 * 60 * 60 * 24))
  return diferencia
}

// Función para obtener estado de antigüedad
const getEstadoAntiguedad = (dias: number) => {
  if (dias <= 3) return { label: "Fresco", color: "bg-green-100 text-green-800" }
  if (dias <= 7) return { label: "Medio", color: "bg-yellow-100 text-yellow-800" }
  if (dias <= 14) return { label: "Antiguo", color: "bg-orange-100 text-orange-800" }
  return { label: "Crítico", color: "bg-red-100 text-red-800" }
}

const estadoColors = {
  pendiente: "bg-yellow-100 text-yellow-800 border-yellow-200",
  confirmado: "bg-blue-100 text-blue-800 border-blue-200",
  en_proceso: "bg-orange-100 text-orange-800 border-orange-200",
  completado: "bg-green-100 text-green-800 border-green-200",
  cancelado: "bg-red-100 text-red-800 border-red-200",
}

const prioridadColors = {
  alta: "bg-red-100 text-red-800",
  media: "bg-yellow-100 text-yellow-800",
  baja: "bg-green-100 text-green-800",
}

export function GestionPedidosPro() {
  const { data: pedidosData, loading, error, refresh, create, update, remove } = usePedidosPro()
  
  console.log("[v0] GestionPedidosPro: pedidosData", pedidosData)
  console.log("[v0] GestionPedidosPro: loading", loading)
  console.log("[v0] GestionPedidosPro: error", error)
  
  const pedidos = Array.isArray(pedidosData) ? pedidosData : []
  const [filtroEstado, setFiltroEstado] = useState("todos")
  const [busqueda, setBusqueda] = useState("")
  const [modalAsignar, setModalAsignar] = useState(false)
  const [modalNuevoPedido, setModalNuevoPedido] = useState(false)
  const [pedidoSeleccionado, setPedidoSeleccionado] = useState<any>(null)
  const [asignaciones, setAsignaciones] = useState({})
  const [comentariosLotes, setComentariosLotes] = useState({})

const [formNuevoPedido, setFormNuevoPedido] = useState({
    cliente: "",
    producto: "jengibre",
    categoria: "",
    presentacion: "",
    cantidad: "",
    peso_requerido: "",
    precio_unitario: "",
    fecha_entrega: "",
    prioridad: "media",
    observaciones: "",
  })

const pedidosFiltrados = pedidos.filter((pedido) => {
    const matchEstado = filtroEstado === "todos" || pedido.estado === filtroEstado
    const matchBusqueda =
      pedido.cliente.toLowerCase().includes(busqueda.toLowerCase()) ||
      pedido.id.toString().toLowerCase().includes(busqueda.toLowerCase()) ||
      pedido.producto.toLowerCase().includes(busqueda.toLowerCase())
    return matchEstado && matchBusqueda
  })

const estadisticas = {
    total: pedidos.length,
    pendientes: pedidos.filter((p) => p.estado === "pendiente").length,
    confirmados: pedidos.filter((p) => p.estado === "confirmado").length,
    enProceso: pedidos.filter((p) => p.estado === "en_proceso").length,
    completados: pedidos.filter((p) => p.estado === "completado").length,
  }

const handleAsignarLotes = () => {
    if (!pedidoSeleccionado) return

const lotesAsignados = Object.entries(asignaciones)
      .filter(([_, jabas]) => jabas > 0)
      .map(([loteId, jabas]) => {
        const lote = pedidosData.find((p) => p.lotesDisponibles.some((l) => l.id === loteId))
        return {
          loteId,
          jabas: Number.parseInt(jabas),
          peso: Number.parseInt(jabas) * lote.pesoPromedio,
          comentario: comentariosLotes[loteId] || "",
        }
      })

const pesoTotal = lotesAsignados.reduce((sum, asig) => sum + asig.peso, 0)

setPedidos(
      pedidos.map((p) =>
        p.id === pedidoSeleccionado.id ? { ...p, lotesAsignados, pesoTotal, estado: "en_proceso" } : p,
      ),
    )

setModalAsignar(false)
    setPedidoSeleccionado(null)
    setAsignaciones({})
    setComentariosLotes({})
  }

const abrirModalAsignar = (pedido) => {
    setPedidoSeleccionado(pedido)
    setModalAsignar(true)
    // Inicializar asignaciones existentes
    const asignacionesExistentes = {}
    const comentariosExistentes = {}
    pedido.lotesAsignados.forEach((asig) => {
      asignacionesExistentes[asig.loteId] = asig.jabas
      comentariosExistentes[asig.loteId] = asig.comentario || ""
    })
    setAsignaciones(asignacionesExistentes)
    setComentariosLotes(comentariosExistentes)
  }

// Obtener lotes disponibles ordenados por FIFO (más antiguos primero)
  const getLotesDisponiblesOrdenados = () => {
    if (!pedidoSeleccionado) return []

return pedidosData
      .filter(
        (pedido) =>
          pedido.producto === pedidoSeleccionado.producto &&
          pedido.presentacion === pedidoSeleccionado.presentacion,
      )
      .flatMap((p) => p.lotesDisponibles)
      .sort((a, b) => new Date(a.fechaIngreso).getTime() - new Date(b.fechaIngreso).getTime()) // FIFO: más antiguos primero
  }

const handleCrearPedido = async (e: React.FormEvent) => {
    e.preventDefault()
    
    try {
      const nuevoPedido = {
        cliente: formNuevoPedido.cliente,
        producto: formNuevoPedido.producto,
        categoria: formNuevoPedido.categoria || "exportacion",
        presentacion: formNuevoPedido.presentacion || "lavado-seco",
        cantidad: Number(formNuevoPedido.cantidad),
        peso_requerido: Number(formNuevoPedido.peso_requerido),
        precio_unitario: Number(formNuevoPedido.precio_unitario),
        fecha_entrega: formNuevoPedido.fecha_entrega,
        prioridad: formNuevoPedido.prioridad as "alta" | "media" | "baja",
        estado: "pendiente" as const,
        observaciones: formNuevoPedido.observaciones,
      }

console.log("[v0] Creating pedido:", nuevoPedido)
      await create(nuevoPedido)
      
      // Reset form
      setFormNuevoPedido({
        cliente: "",
        producto: "jengibre",
        categoria: "",
        presentacion: "",
        cantidad: "",
        peso_requerido: "",
        precio_unitario: "",
        fecha_entrega: "",
        prioridad: "media",
        observaciones: "",
      })
      setModalNuevoPedido(false)
      refresh()
      alert("Pedido creado correctamente")
    } catch (error) {
      console.error("[v0] Error al crear pedido:", error)
      alert("Error al crear el pedido")
    }
  }

const handleEliminarPedido = async (id: number) => {
    if (!confirm("¿Está seguro de eliminar este pedido?")) return
    
    try {
      await remove(id)
      refresh()
      alert("Pedido eliminado correctamente")
    } catch (error) {
      console.error("[v0] Error al eliminar pedido:", error)
      alert("Error al eliminar el pedido")
    }
  }

const handleActualizarEstado = async (id: number, nuevoEstado: string) => {
    try {
      await update(id, { estado: nuevoEstado })
      refresh()
      alert(`Estado actualizado a: ${nuevoEstado}`)
    } catch (error) {
      console.error("[v0] Error al actualizar estado:", error)
      alert("Error al actualizar el estado")
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Gestión de Pedidos Pro</h1>
          <p className="text-gray-600">Sistema avanzado de pedidos con asignación de lotes</p>
        </div>
        <Button onClick={() => setModalNuevoPedido(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Nuevo Pedido
        </Button>
      </div>

{/* Estadísticas */}
      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Total</p>
                <p className="text-2xl font-bold">{estadisticas.total}</p>
              </div>
              <Package className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Pendientes</p>
                <p className="text-2xl font-bold text-yellow-600">{estadisticas.pendientes}</p>
              </div>
              <Clock className="h-8 w-8 text-yellow-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Confirmados</p>
                <p className="text-2xl font-bold text-blue-600">{estadisticas.confirmados}</p>
              </div>
              <CheckCircle className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">En Proceso</p>
                <p className="text-2xl font-bold text-orange-600">{estadisticas.enProceso}</p>
              </div>
              <Settings className="h-8 w-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Completados</p>
                <p className="text-2xl font-bold text-green-600">{estadisticas.completados}</p>
              </div>
              <Target className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Buscar por cliente, ID o producto..."
                  value={busqueda}
                  onChange={(e) => setBusqueda(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={filtroEstado} onValueChange={setFiltroEstado}>
              <SelectTrigger className="w-full sm:w-48">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los estados</SelectItem>
                <SelectItem value="pendiente">Pendientes</SelectItem>
                <SelectItem value="confirmado">Confirmados</SelectItem>
                <SelectItem value="en_proceso">En Proceso</SelectItem>
                <SelectItem value="completado">Completados</SelectItem>
                <SelectItem value="cancelado">Cancelados</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Lista de Pedidos */}
      <div className="space-y-4">
        {pedidosFiltrados.length === 0 ? (
          <Card>
            <CardContent className="flex items-center justify-center h-40">
              <p className="text-gray-500">No hay pedidos que coincidan con los filtros</p>
            </CardContent>
          </Card>
        ) : (
          pedidosFiltrados.map((pedido) => (
            <Card key={pedido.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                  <div className="flex-1 space-y-3">
                    <div className="flex items-center gap-3">
                      <h3 className="text-lg font-semibold text-gray-900">PED-{pedido.id}</h3>
                      <Badge className={estadoColors[pedido.estado]}>
                        {pedido.estado.replace("_", " ").toUpperCase()}
                      </Badge>
                      <Badge className={prioridadColors[pedido.prioridad]}>{pedido.prioridad.toUpperCase()}</Badge>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
                      <div className="flex items-center gap-2">
                        <User className="h-4 w-4 text-gray-400" />
                        <span className="font-medium">{pedido.cliente}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Package className="h-4 w-4 text-gray-400" />
                        <span>{pedido.producto} - {pedido.categoria}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Calendar className="h-4 w-4 text-gray-400" />
                        <span>Entrega: {pedido.fechaEntrega}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <DollarSign className="h-4 w-4 text-gray-400" />
                        <span className="font-medium">
                          {pedido.moneda} {pedido.total.toFixed(2)}
                        </span>
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm text-gray-600">
                      <div className="flex items-center gap-2">
                        <Droplets className="h-4 w-4" />
                        <span>
                          {pedido.presentacion} - {pedido.humedad}% humedad
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Box className="h-4 w-4" />
                        <span>{pedido.empaque}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Scale className="h-4 w-4" />
                        <span>{pedido.calibre || "Sin calibrar"}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Tag className="h-4 w-4" />
                        <span>{pedido.etiquetado || "Sin etiqueta"}</span>
                      </div>
                    </div>

{pedido.lotesAsignados.length > 0 && (
                      <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex items-center gap-2 mb-2">
                          <PackageOpen className="h-4 w-4 text-green-600" />
                          <span className="font-medium text-green-800">Lotes Asignados:</span>
                        </div>
                        <div className="space-y-2">
                          {pedido.lotesAsignados.map((asig, idx) => (
                            <div key={idx} className="flex justify-between items-start">
                              <div className="flex-1">
                                <span className="font-medium">{asig.loteId}:</span>
                                <span className="ml-2">
                                  {asig.jabas} jabas ({asig.peso.toFixed(1)} kg)
                                </span>
                                {asig.comentario && (
                                  <div className="flex items-center gap-1 mt-1 text-xs text-gray-600">
                                    <MessageSquare className="h-3 w-3" />
                                    <span>{asig.comentario}</span>
                                  </div>
                                )}
                              </div>
                            </div>
                          ))}
                        </div>
                        <div className="mt-2 pt-2 border-t border-green-300">
                          <div className="flex justify-between font-medium text-green-800">
                            <span>Peso Total:</span>
                            <span>{pedido.pesoTotal.toFixed(1)} kg</span>
                          </div>
                        </div>
                      </div>
                    )}

{pedido.certificaciones.length > 0 && (
                      <div className="flex items-center gap-2">
                        <Award className="h-4 w-4 text-blue-500" />
                        <div className="flex gap-1">
                          {pedido.certificaciones.map((cert, idx) => (
                            <Badge key={idx} variant="outline" className="text-xs">
                              {cert}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

<div className="flex flex-col sm:flex-row gap-2">
                    {(pedido.estado === "confirmado" || pedido.estado === "en_proceso") && (
                      <Button
                        size="sm"
                        className="bg-green-600 hover:bg-green-700"
                        onClick={() => abrirModalAsignar(pedido)}
                      >
                        <Truck className="h-4 w-4 mr-1" />
                        Asignar
                      </Button>
                    )}
                    {pedido.estado === "pendiente" && (
                      <>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleActualizarEstado(pedido.id, "confirmado")}
                        >
                          <CheckCircle className="h-4 w-4 mr-1" />
                          Confirmar
                        </Button>
                        <Button
                          size="sm"
                          variant="destructive"
                          onClick={() => handleEliminarPedido(pedido.id)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

{/* Modal de Asignación de Lotes */}
      <Dialog open={modalAsignar} onOpenChange={setModalAsignar}>
        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-green-700">Asignar Lotes al Pedido</DialogTitle>
            <DialogDescription>
              {pedidoSeleccionado && (
                <div className="flex items-center gap-4 mt-2">
                  <span>
                    Pedido: PED-{pedidoSeleccionado.id} - {pedidoSeleccionado.cliente}
                  </span>
                  <div className="flex items-center gap-2 text-lg font-bold text-blue-600">
                    <Scale className="h-5 w-5" />
                    <span>Peso requerido: {pedidoSeleccionado.pesoRequerido} kg</span>
                  </div>
                  <div className="flex items-center gap-2 text-lg font-bold text-green-600">
                    <span>{pedidoSeleccionado.producto === "Jengibre" ? "🫚" : "🟡"}</span>
                    <span>Producto: {pedidoSeleccionado.producto}</span>
                  </div>
                </div>
              )}
            </DialogDescription>
          </DialogHeader>

{pedidoSeleccionado && (
            <div className="space-y-6">
              {/* Información del Pedido */}
              <Card className="bg-blue-50 border-blue-200">
                <CardContent className="p-4">
                  <h4 className="font-medium text-blue-800 mb-2">Especificaciones del Pedido</h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div>
                      <span className="text-gray-600">Producto:</span>
                      <p className="font-medium">{pedidoSeleccionado.producto}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Categoría:</span>
                      <p className="font-medium">{pedidoSeleccionado.categoria}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Presentación:</span>
                      <p className="font-medium">{pedidoSeleccionado.presentacion}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Humedad:</span>
                      <p className="font-medium">{pedidoSeleccionado.humedad}%</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Cantidad:</span>
                      <p className="font-medium">{pedidoSeleccionado.cantidad} jabas</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Empaque:</span>
                      <p className="font-medium">{pedidoSeleccionado.empaque}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Calibre:</span>
                      <p className="font-medium">{pedidoSeleccionado.calibre || "Sin especificar"}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Entrega:</span>
                      <p className="font-medium">{pedidoSeleccionado.fechaEntrega}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Lotes Disponibles - Ordenados por FIFO */}
              <div>
                <h4 className="font-medium text-gray-900 mb-4">
                  Lotes Disponibles (ordenados por antigüedad - más antiguos primero)
                </h4>
                <div className="space-y-3">
                  {getLotesDisponiblesOrdenados().map((lote) => {
                    const diasAntiguedad = calcularDiasAntiguedad(lote.fechaIngreso)
                    const estadoAntiguedad = getEstadoAntiguedad(diasAntiguedad)

return (
                      <Card key={lote.id} className="border-2 hover:border-green-300 transition-colors">
                        <CardContent className="p-4">
                          <div className="flex items-center justify-between">
                            <div className="flex-1 grid grid-cols-1 md:grid-cols-8 gap-4">
                              <div>
                                <span className="text-sm text-gray-600">Lote</span>
                                <p className="font-medium">{lote.id}</p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Proveedor</span>
                                <p className="font-medium">{lote.proveedor}</p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Fecha Ingreso</span>
                                <p className="font-medium">{lote.fechaIngreso}</p>
                                <p className="text-xs text-gray-500">{diasAntiguedad} días</p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Producto</span>
                                <p className="font-medium">
                                  {lote.producto === "Jengibre" ? "🫚" : "🟡"} {lote.producto}
                                </p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Antigüedad</span>
                                <Badge className={estadoAntiguedad.color}>{estadoAntiguedad.label}</Badge>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Humedad</span>
                                <p className="font-medium">{lote.humedad}%</p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Disponibles</span>
                                <p className="font-medium text-green-600">
                                  {lote.jabasDisponibles}/{lote.jabasTotal}
                                </p>
                              </div>
                              <div>
                                <span className="text-sm text-gray-600">Peso/Jaba</span>
                                <p className="font-medium">{lote.pesoPromedio} kg</p>
                              </div>
                            </div>
                            <div className="ml-4 w-40 space-y-2">
                              <div>
                                <Label htmlFor={`asignar-${lote.id}`} className="text-sm">
                                  Jabas a asignar
                                </Label>
                                <Input
                                  id={`asignar-${lote.id}`}
                                  type="number"
                                  min="0"
                                  max={lote.jabasDisponibles}
                                  value={asignaciones[lote.id] || 0}
                                  onChange={(e) =>
                                    setAsignaciones({
                                      ...asignaciones,
                                      [lote.id]: Number.parseInt(e.target.value) || 0,
                                    })
                                  }
                                  className="mt-1"
                                />
                              </div>
                              <div>
                                <Label htmlFor={`comentario-${lote.id}`} className="text-sm">
                                  Comentario
                                </Label>
                                <Textarea
                                  id={`comentario-${lote.id}`}
                                  placeholder="Comentario opcional..."
                                  value={comentariosLotes[lote.id] || ""}
                                  onChange={(e) =>
                                    setComentariosLotes({
                                      ...comentariosLotes,
                                      [lote.id]: e.target.value,
                                    })
                                  }
                                  className="mt-1"
                                  rows={2}
                                />
                              </div>
                            </div>
                          </div>
                          {asignaciones[lote.id] > 0 && (
                            <div className="mt-3 p-2 bg-green-50 border border-green-200 rounded text-sm">
                              <div className="flex justify-between">
                                <span>Peso asignado:</span>
                                <span className="font-medium">
                                  {(asignaciones[lote.id] * lote.pesoPromedio).toFixed(1)} kg
                                </span>
                              </div>
                            </div>
                          )}
                        </CardContent>
                      </Card>
                    )
                  })}
                </div>
              </div>

{/* Resumen de Asignación */}
              {Object.values(asignaciones).some((jabas) => jabas > 0) && (
                <Card className="bg-green-50 border-green-200">
                  <CardContent className="p-4">
                    <h4 className="font-medium text-green-800 mb-3">Resumen de Asignación</h4>
                    <div className="space-y-2">
                      {Object.entries(asignaciones)
                        .filter(([_, jabas]) => jabas > 0)
                        .map(([loteId, jabas]) => {
                          const lote = pedidosData.find((p) => p.lotesDisponibles.some((l) => l.id === loteId))
                          return (
                            <div key={loteId} className="flex justify-between text-sm">
                              <span>
                                {loteId} ({lote.proveedor}):
                              </span>
                              <span className="font-medium">
                                {jabas} jabas = {(jabas * lote.pesoPromedio).toFixed(1)} kg
                              </span>
                            </div>
                          )
                        })}
                    </div>
                    <Separator className="my-3" />
                    <div className="flex justify-between font-medium text-green-800">
                      <span>Total Asignado:</span>
                      <span>
                        {Object.entries(asignaciones)
                          .filter(([_, jabas]) => jabas > 0)
                          .reduce((sum, [loteId, jabas]) => {
                            const lote = pedidosData.find((p) => p.lotesDisponibles.some((l) => l.id === loteId))
                            return sum + jabas * lote.pesoPromedio
                          }, 0)
                          .toFixed(1)}{" "}
                        kg
                      </span>
                    </div>
                    <div className="flex justify-between text-sm text-gray-600 mt-1">
                      <span>Jabas totales:</span>
                      <span>{Object.values(asignaciones).reduce((sum, jabas) => sum + jabas, 0)} jabas</span>
                    </div>
                    <div className="flex justify-between text-sm text-gray-600 mt-1">
                      <span>Peso requerido:</span>
                      <span>{pedidoSeleccionado.pesoRequerido} kg</span>
                    </div>
                  </CardContent>
                </Card>
              )}

<div className="flex justify-end gap-2 pt-4 border-t">
                <Button variant="outline" onClick={() => setModalAsignar(false)}>
                  Cancelar
                </Button>
                <Button
                  onClick={handleAsignarLotes}
                  className="bg-green-600 hover:bg-green-700"
                  disabled={!Object.values(asignaciones).some((jabas) => jabas > 0)}
                >
                  Confirmar Asignación
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

{/* Modal for creating new pedido */}
      <Dialog open={modalNuevoPedido} onOpenChange={setModalNuevoPedido}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Crear Nuevo Pedido</DialogTitle>
            <DialogDescription>Ingrese los datos del pedido</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleCrearPedido} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="cliente">Cliente *</Label>
                <Input
                  id="cliente"
                  value={formNuevoPedido.cliente}
                  onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, cliente: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="producto">Producto *</Label>
                <Select
                  value={formNuevoPedido.producto}
                  onValueChange={(value) => setFormNuevoPedido({ ...formNuevoPedido, producto: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="jengibre">Jengibre</SelectItem>
                    <SelectItem value="curcuma">Cúrcuma</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="cantidad">Cantidad (jabas) *</Label>
                <Input
                  id="cantidad"
                  type="number"
                  value={formNuevoPedido.cantidad}
                  onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, cantidad: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="peso_requerido">Peso Requerido (kg) *</Label>
                <Input
                  id="peso_requerido"
                  type="number"
                  step="0.01"
                  value={formNuevoPedido.peso_requerido}
                  onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, peso_requerido: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="precio_unitario">Precio Unitario (S/./kg) *</Label>
                <Input
                  id="precio_unitario"
                  type="number"
                  step="0.01"
                  value={formNuevoPedido.precio_unitario}
                  onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, precio_unitario: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="fecha_entrega">Fecha de Entrega *</Label>
                <Input
                  id="fecha_entrega"
                  type="date"
                  value={formNuevoPedido.fecha_entrega}
                  onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, fecha_entrega: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="prioridad">Prioridad</Label>
                <Select
                  value={formNuevoPedido.prioridad}
                  onValueChange={(value) => setFormNuevoPedido({ ...formNuevoPedido, prioridad: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="baja">Baja</SelectItem>
                    <SelectItem value="media">Media</SelectItem>
                    <SelectItem value="alta">Alta</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="observaciones">Observaciones</Label>
              <Textarea
                id="observaciones"
                value={formNuevoPedido.observaciones}
                onChange={(e) => setFormNuevoPedido({ ...formNuevoPedido, observaciones: e.target.value })}
                rows={3}
              />
            </div>
            <div className="flex justify-end gap-2 pt-4">
              <Button type="button" variant="outline" onClick={() => setModalNuevoPedido(false)}>
                Cancelar
              </Button>
              <Button type="submit">
                Crear Pedido
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/pedidos-service.ts" isEdit="true" isQuickEdit="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Pedido, ApiResponse } from "@/lib/types"

export class PedidosService {
  async getAll(): Promise<Pedido[]> {
    console.log("[v0] PedidosService: getAll() called")
    console.log("[v0] PedidosService: endpoint", API_ENDPOINTS.PEDIDOS)
    
    try {
      const response = await ApiService.get<ApiResponse<Pedido[]>>(API_ENDPOINTS.PEDIDOS)
      console.log("[v0] PedidosService: response received", response)
      return response.data
    } catch (error) {
      console.error("[v0] PedidosService: error fetching pedidos", error)
      throw error
    }
  }

async getById(id: number): Promise<Pedido> {
    const response = await ApiService.get<ApiResponse<Pedido>>(API_ENDPOINTS.PEDIDOS_BY_ID(id))
    return response.data
  }

async create(data: Omit<Pedido, "id" | "created_at" | "updated_at">): Promise<Pedido> {
    const response = await ApiService.post<ApiResponse<Pedido>>(API_ENDPOINTS.PEDIDOS, data)
    return response.data
  }

async update(id: number, data: Partial<Omit<Pedido, "id" | "created_at" | "updated_at">>): Promise<Pedido> {
    const response = await ApiService.put<ApiResponse<Pedido>>(API_ENDPOINTS.PEDIDOS_BY_ID(id), data)
    return response.data
  }

async delete(id: number): Promise<void> {
    await ApiService.delete(API_ENDPOINTS.PEDIDOS_BY_ID(id))
  }

async getPedidosActivos(): Promise<Pedido[]> {
    const pedidos = await this.getAll()
    return pedidos.filter((p) => p.estado !== "completado" && p.estado !== "cancelado")
  }

async getPedidosByEstado(estado: string): Promise<Pedido[]> {
    const pedidos = await this.getAll()
    return pedidos.filter((p) => p.estado === estado)
  }

async generarCodigoPedido(): Promise<string> {
    const pedidos = await this.getAll()
    const año = new Date().getFullYear()
    const pedidosDelAño = pedidos.filter((p) => p.codigo.startsWith(`PED-${año}`))
    const numero = pedidosDelAño.length + 1
    return `PED-${año}-${numero.toString().padStart(3, "0")}`
  }
}

export const pedidosService = new PedidosService()121:T150300,[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

return (
    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 20.5 90.2% 48.2%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 20.5 90.2% 48.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[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 { cva, type VariantProps } from "class-variance-authority"

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

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"