108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_SFKdCkRiAB8",null],["b_h0fjca44Kvx",null],["b_DaQOWLNhHpI",null],["b_AmmUAAXybxE",null],["b_Ck9XuAs7Vru",null],["b_Cn12vrMWXFl",null],["b_HQkXCwonsEu",null]] 10e:[["b_SFKdCkRiAB8",{"templateVersionId":null,"templateCanonId":null}],["b_h0fjca44Kvx",{"templateVersionId":null,"templateCanonId":null}],["b_DaQOWLNhHpI",{"templateVersionId":null,"templateCanonId":null}],["b_AmmUAAXybxE",{"templateVersionId":null,"templateCanonId":null}],["b_Ck9XuAs7Vru",{"templateVersionId":null,"templateCanonId":null}],["b_Cn12vrMWXFl",{"templateVersionId":null,"templateCanonId":null}],["b_HQkXCwonsEu",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["QYGQNDeL7qW","$D2025-11-19T22:08:02.872Z"],["b_09dRsHIqQEI","$D2025-11-19T22:14:18.487Z"],["b_7zKwj3gMdZh","$D2025-11-19T22:20:44.007Z"],["b_92gRzIWDlL7","$D2025-11-19T22:21:03.940Z"],["b_XnaoMv2cd3u","$D2025-11-19T22:21:27.710Z"],["b_HvekFZS11vC","$D2025-11-19T22:33:33.931Z"],["b_uRV092e8yDF","$D2025-11-19T22:34:13.447Z"],["b_TMrhKQMuedL","$D2025-11-19T22:43:37.868Z"],["b_9hUaXDJaHem","$D2025-11-19T22:44:25.763Z"],["b_nWeBCPopxnP","$D2025-11-19T22:45:54.971Z"],["b_ZSZlitz4NkF","$D2025-11-19T22:46:36.635Z"],["b_Afr9MZBGUI3","$D2025-11-19T23:03:46.532Z"],["b_3WKzXPynmWL","$D2025-11-19T23:04:09.284Z"],["b_qrbORb25iPM","$D2025-11-19T23:06:13.629Z"],["b_SFKdCkRiAB8","$D2025-11-19T23:17:14.213Z"],["b_h0fjca44Kvx","$D2025-11-19T23:18:57.767Z"],["b_DaQOWLNhHpI","$D2025-11-19T23:20:10.222Z"],["b_AmmUAAXybxE","$D2025-11-21T04:22:23.636Z"],["b_Ck9XuAs7Vru","$D2025-11-21T04:22:49.609Z"],["b_Cn12vrMWXFl","$D2025-11-21T04:24:31.556Z"],["b_HQkXCwonsEu","$D2025-11-23T22:16:49.678Z"]] 110:[["b_SFKdCkRiAB8",false],["b_h0fjca44Kvx",false],["b_DaQOWLNhHpI",false],["b_AmmUAAXybxE",false],["b_Ck9XuAs7Vru",false],["b_Cn12vrMWXFl",false],["b_HQkXCwonsEu",false]] 111:[["b_SFKdCkRiAB8","$undefined"],["b_h0fjca44Kvx","$undefined"],["b_DaQOWLNhHpI","$undefined"],["b_AmmUAAXybxE","$undefined"],["b_Ck9XuAs7Vru","$undefined"],["b_Cn12vrMWXFl","$undefined"],["b_HQkXCwonsEu","$undefined"]] 112:[["b_SFKdCkRiAB8",null],["b_h0fjca44Kvx",null],["b_DaQOWLNhHpI",null],["b_AmmUAAXybxE",null],["b_Ck9XuAs7Vru",null],["b_Cn12vrMWXFl",null],["b_HQkXCwonsEu",null]] 113:[["b_SFKdCkRiAB8",true],["b_h0fjca44Kvx",true],["b_DaQOWLNhHpI",true],["b_AmmUAAXybxE",true],["b_Ck9XuAs7Vru",true],["b_Cn12vrMWXFl",true],["b_HQkXCwonsEu",true]] 114:[["b_SFKdCkRiAB8",true],["b_h0fjca44Kvx",true],["b_DaQOWLNhHpI",true],["b_AmmUAAXybxE",true],["b_Ck9XuAs7Vru",true],["b_Cn12vrMWXFl",true],["b_HQkXCwonsEu",true]] 115:[] 116:T46f,El usuario quiere que cree un nuevo módulo de gestión de pedidos desde cero, con: 1. CRUD completo usando la API real de https://citeapurimac.org/backend/pedidos 2. Una lupa/buscador de clientes desde el backend para seleccionarlos al crear o modificar pedidos 3. Que lo agregue al sidebar 4. Que use todos los datos de la estructura que me mostró en los archivos adjuntos Los datos muestran que los pedidos tienen esta estructura: - id - numero_pedido - cliente_id - producto - categoria - kg_bruto - porcentaje_humedad - kg_neto - precio - total - fecha_pedido - estado - observaciones - created_at - updated_at - cliente_nombre Necesito: 1. Verificar el sidebar actual y agregar el nuevo módulo 2. Crear un servicio de pedidos si no existe o actualizarlo 3. Crear un componente completamente nuevo con: - Tabla de pedidos mostrando datos reales - Formulario para crear/editar - Búsqueda de clientes con lupa - CRUD completo (Create, Read, Update, Delete) - Filtros y búsqueda 4. Crear la página nueva 5. Actualizar el tipo Pedido en types/index.ts Voy a buscar primero el sidebar y ver la estructura actual.117:T45c,sabes funciono de lo mejor, lo mejor era tener el endpoind y darle uso completo de crut completo como lo acabas de hacer para pedidos, osea que ahora lo hagas para planificacion operativa, pero creo que no existe en el backend soporte para todos asi que mejor que pasare lo que existe y que aun no esta implementado, para que le crees un codulo completo con crut en reemplazo de los que ya se manejan en el sidebar, poque la mayoria de los del sidebar no funcionan correctamente, si tengo disponibles estos, entonces cual deveria hcer{ "success": false, "error": "Resource Not Found", "message": "Recurso no encontrado: p", "path": "p", "available_resources": [ "personas", "lotes", "pesos", "ajustes-contables", "pagos-campo", "pedidos", "kardex", "ventas", "banco", "costos-fijos", "empleados", "rentabilidad", "adelantos" ], "timestamp": "2025-11-20 16:21:33" }, mira puedes hacer libro banco de acuerdo al negocio con el api crut completo https://citeapurimac.org/backend/banco 118:T40c,Perfecto, el usuario quiere que cree un módulo completo de "Libro Banco" usando la API de `https://citeapurimac.org/backend/banco` con CRUD completo, similar a como hice con Pedidos. Del archivo adjunto veo que los datos del banco tienen esta estructura: - id, fecha, operacion, de_quien, a_quien, motivo, rubro, tipo_operacion, numero_operacion, comprobante, deudor, acreedor, estado, agricultor, created_at Voy a crear: 1. Un servicio nuevo `lib/services/banco-service.ts` 2. Un componente nuevo `components/libro-banco.tsx` con CRUD completo 3. Una nueva página `app/libro-banco/page.tsx` 4. Actualizar el sidebar para agregar la nueva opción 5. Actualizar los tipos en `lib/types/index.ts` El componente debe tener: - Lista completa de movimientos bancarios - Búsqueda de personas (agricultor/productor) con lupa - CRUD completo (crear, editar, eliminar) - Filtros por rubro, tipo_operacion, estado - Cálculo automático de saldo (acreedor - deudor) - Estadísticas en tiempo real Voy a leerlos archivos necesarios primero.119:T495,El usuario me está diciendo que el módulo de personal está dando errores porque: 1. No existe la API `/api/proxy/planificaciones-personal` en el backend 2. No existe la API `/api/proxy/personal-disponible` en el backend 3. Los recursos disponibles en el backend son: personas, lotes, pesos, ajustes-contables, pagos-campo, pedidos, kardex, ventas, banco, costos-fijos, empleados, rentabilidad, adelantos El error muestra que las URLs están mal formadas: `/api/proxy/api/proxy/...` - hay un doble `/api/proxy`. Además, el segundo attachment muestra datos de kardex (movimientos de inventario), que es una API que SÍ existe según la lista de recursos disponibles. Según la lista de recursos disponibles, la API correcta para personal debería ser `/empleados`, no `planificaciones-personal` ni `personal-disponible`. Debo: 1. Eliminar o reemplazar el módulo de "Planificación Operativa - Personal" que no tiene backend 2. Usar la API de `empleados` que sí existe para crear un módulo de gestión de empleados con CRUD completo 3. Verificar que las rutas no tengan el doble `/api/proxy` Déjame buscar los archivos relacionados con personal/empleados primero.11a:T16c5b2,[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" isEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { TransaccionBanco } from "@/lib/types"

export const bancoService = {
  async getAll() {
    try {
      const response = await ApiService.get<TransaccionBanco[]>(API_ENDPOINTS.BANCO)
      console.log("[v0] Banco - Transacciones obtenidas:", response)

// Transform backend data to frontend format
      return response.map((item: any) => ({
        id: item.id || 0,
        fecha: item.fecha || "",
        operacion: item.operacion || "",
        de_quien: item.de_quien || "",
        a_quien: item.a_quien || "",
        motivo: item.motivo || "",
        rubro: item.rubro || "",
        tipo_operacion: item.tipo_operacion || "",
        numero_operacion: item.numero_operacion || "",
        comprobante: item.comprobante || "",
        deudor: item.deudor || "0.00",
        acreedor: item.acreedor || "0.00",
        estado: item.estado || "pendiente",
        agricultor: item.agricultor || null,
        created_at: item.created_at,
      })) as TransaccionBanco[]
    } catch (error) {
      console.error("[v0] Error al obtener transacciones:", error)
      throw error
    }
  },

async create(data: Omit<TransaccionBanco, "id" | "created_at" | "updated_at">) {
    try {
      console.log("[v0] Banco - Creando transacción:", data)
      const response = await ApiService.post<TransaccionBanco>(API_ENDPOINTS.BANCO, data)
      console.log("[v0] Banco - Transacción creada:", response)
      return response
    } catch (error) {
      console.error("[v0] Error al crear transacción:", error)
      throw error
    }
  },

async update(id: number, data: Partial<TransaccionBanco>) {
    try {
      console.log("[v0] Banco - Actualizando transacción:", id, data)
      const response = await ApiService.put<TransaccionBanco>(API_ENDPOINTS.BANCO_BY_ID(id), data)
      console.log("[v0] Banco - Transacción actualizada:", response)
      return response
    } catch (error) {
      console.error("[v0] Error al actualizar transacción:", error)
      throw error
    }
  },

async delete(id: number) {
    try {
      console.log("[v0] Banco - Eliminando transacción:", id)
      await ApiService.delete(API_ENDPOINTS.BANCO_BY_ID(id))
      console.log("[v0] Banco - Transacción eliminada")
    } catch (error) {
      console.error("[v0] Error al eliminar transacción:", error)
      throw error
    }
  },

async updateEstado(id: number, estado: string) {
    try {
      return await this.update(id, { estado: estado as any })
    } catch (error) {
      console.error("[v0] Error al actualizar estado:", 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="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/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/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]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" 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" 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" 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" 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" 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" 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" 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" 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" 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]typescript:file="lib/hooks/use-pedidos-pro.ts" 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" isQuickEdit="true" isMerged="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/personas-service.ts" isEdit="true" isQuickEdit="true" 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<any[]>(API_ENDPOINTS.PERSONAS)
    console.log("[v0] PersonasService: Response received", {
      isArray: Array.isArray(response),
      count: Array.isArray(response) ? response.length : 0,
      sampleData: Array.isArray(response) && response.length > 0 ? response[0] : null
    })
    
    if (Array.isArray(response)) {
      return response.map(persona => {
        // Backend sends: tipo_persona, nombre_completo, documento_identidad
        // We need: tipo, roles, nombres, apellidos, dni
        const tipo = persona.tipo_persona || persona.tipo || ""
        const roles = persona.roles || (tipo ? [tipo] : [])
        
        console.log("[v0] Transforming persona:", { 
          id: persona.id, 
          tipo_persona: persona.tipo_persona,
          tipo_calculated: tipo,
          roles_calculated: roles 
        })
        
        return {
          ...persona,
          tipo,  // Map tipo_persona to tipo
          roles, // Create roles array from tipo_persona
          // Ensure these fields exist for backward compatibility
          dni: persona.dni || persona.documento_identidad || persona.numero_documento,
          nombres: persona.nombres || persona.nombre_completo?.split(' ')[0] || "",
          apellidos: persona.apellidos || persona.nombre_completo?.split(' ').slice(1).join(' ') || "",
        } as Persona
      })
    }
    
    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="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)
    console.log("[v0] First persona sample:", personas[0])
    
    const prods = personas.filter((p) => {
      const tipo = (p.tipo || "").toLowerCase()
      const tipoPersona = (p.tipo_persona || "").toLowerCase()
      const rolesMatch = p.roles?.some((r: string) => r.toLowerCase() === "productor")
      
      const isProductor = tipo === "productor" || tipoPersona === "productor" || rolesMatch
      
      if (isProductor) {
        console.log("[v0] Found productor:", { 
          nombre: p.nombre_completo || `${p.nombres} ${p.apellidos}`,
          tipo: p.tipo,
          tipo_persona: p.tipo_persona,
          roles: p.roles 
        })
      }
      
      return isProductor
    })
    
    console.log("[v0] Productores filtered:", prods.length)
    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 || p.numero_documento || p.documento_identidad || '').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 = {
        numero_lote: codigo, // Backend expects numero_lote
        guia_ingreso: `GI-${Date.now()}`, // Generate unique guia_ingreso
        productor_id: Number(formData.productor_id),
        producto: formData.producto,
        fecha_ingreso: new Date().toISOString().split('T')[0],
        peso_inicial: Number(formData.peso_bruto),
        peso_neto: pesoNeto,
        numero_jabas: Number(formData.num_jabas),
        estado: "pendiente" as const,
        observaciones: formData.observaciones || "",
      }

console.log("[v0] Creating lote with data:", 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)
      const errorMessage = error instanceof Error ? error.message : "Error desconocido"
      alert(`Error al registrar el ingreso: ${errorMessage}`)
    }
  }

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 || proveedor.numero_documento || proveedor.documento_identidad || '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 || proveedorSeleccionado.numero_documento || proveedorSeleccionado.documento_identidad || '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 || proveedorSeleccionado.numero_documento || proveedorSeleccionado.documento_identidad || '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="components/personas-management.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 { 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()
    const documento = persona.numero_documento || persona.documento_identidad || persona.dni || ""
    return (
      nombreCompleto.toLowerCase().includes(busqueda.toLowerCase()) ||
      documento.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 || persona.dni || "-"
                  const tipoDocumento = persona.tipo_documento || "DNI"
                  
                  const displayRoles = persona.roles && persona.roles.length > 0 
                    ? persona.roles 
                    : persona.tipo 
                    ? [persona.tipo] 
                    : []

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">
                          {displayRoles.length > 0 ? (
                            displayRoles.map((rol) => (
                              <Badge key={rol} className={rolesConfig[rol as keyof typeof rolesConfig]?.color || "bg-gray-100 text-gray-800"}>
                                {rolesConfig[rol as keyof typeof rolesConfig]?.label || rol}
                              </Badge>
                            ))
                          ) : (
                            <Badge className="bg-gray-100 text-gray-800">Sin 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]typescriptreact:file="app/gestion-pedidos/page.tsx" isEdit="true" isMerged="true"
import { GestionPedidos } from "@/components/gestion-pedidos"

export default function GestionPedidosPage() {
  return (
    <div className="container mx-auto p-6">
      <GestionPedidos />
    </div>
  )
}
[V0_FILE]typescript:file="lib/services/lotes-service.ts" isEdit="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) => {
      const codigo = l.codigo || l.numero_lote || ""
      return typeof codigo === 'string' && 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]typescriptreact:file="components/gestion-pedidos.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Search,
  Filter,
  Package,
  Clock,
  Target,
  Loader2,
  AlertCircle,
  Plus,
  Edit,
  Trash2,
  CheckCircle,
} from "lucide-react"
import { usePedidosPro } from "@/lib/hooks/use-pedidos-pro"
import { usePersonas } from "@/lib/hooks/use-personas"

const estadoColors = {
  pendiente: "bg-yellow-100 text-yellow-800 border-yellow-200",
  proceso: "bg-blue-100 text-blue-800 border-blue-200",
  completado: "bg-green-100 text-green-800 border-green-200",
  cancelado: "bg-red-100 text-red-800 border-red-200",
}

export function GestionPedidos() {
  const { data: pedidos, loading, error, refresh, create, update, remove } = usePedidosPro()
  const { data: personas } = usePersonas()

const [filtroEstado, setFiltroEstado] = useState("todos")
  const [busqueda, setBusqueda] = useState("")
  const [modalNuevoPedido, setModalNuevoPedido] = useState(false)
  const [modalEditarPedido, setModalEditarPedido] = useState(false)
  const [pedidoEditando, setPedidoEditando] = useState<any>(null)
  const [searchClienteTerm, setSearchClienteTerm] = useState("")

const [formPedido, setFormPedido] = useState({
    cliente_id: "",
    producto: "jengibre",
    categoria: "exportacion",
    kg_bruto: "",
    kg_neto: "",
    porcentaje_humedad: "",
    precio: "",
    fecha_pedido: new Date().toISOString().split("T")[0],
    observaciones: "",
  })

const clientes =
    personas?.filter((p) => {
      const tipo = (p.tipo || "").toLowerCase()
      const tipoPersona = (p.tipo_persona || "").toLowerCase()
      const roles = p.roles || []
      return tipo === "cliente" || tipoPersona === "cliente" || roles.some((r) => r.toLowerCase() === "cliente")
    }) || []

const clientesFiltrados = clientes.filter((c) => {
    const searchLower = searchClienteTerm.toLowerCase()
    const nombre = c.nombre_completo || `${c.nombres} ${c.apellidos}` || ""
    const dni = c.dni || c.documento_identidad || c.numero_documento || ""
    return nombre.toLowerCase().includes(searchLower) || dni.includes(searchLower)
  })

const pedidosFiltrados = pedidos.filter((pedido) => {
    const matchEstado = filtroEstado === "todos" || pedido.estado === filtroEstado
    const searchLower = busqueda.toLowerCase()
    const matchBusqueda =
      (pedido.cliente || "").toLowerCase().includes(searchLower) ||
      (pedido.numero_pedido || "").toLowerCase().includes(searchLower) ||
      (pedido.producto || "").toLowerCase().includes(searchLower)
    return matchEstado && matchBusqueda
  })

const estadisticas = {
    total: pedidos.length,
    pendientes: pedidos.filter((p) => p.estado === "pendiente").length,
    proceso: pedidos.filter((p) => p.estado === "proceso").length,
    completados: pedidos.filter((p) => p.estado === "completado").length,
  }

useEffect(() => {
    if (formPedido.kg_bruto && formPedido.porcentaje_humedad) {
      const bruto = Number(formPedido.kg_bruto)
      const humedad = Number(formPedido.porcentaje_humedad)
      const neto = bruto * (1 - humedad / 100)
      setFormPedido((prev) => ({ ...prev, kg_neto: neto.toFixed(2) }))
    }
  }, [formPedido.kg_bruto, formPedido.porcentaje_humedad])

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

if (!formPedido.cliente_id) {
      alert("Debe seleccionar un cliente")
      return
    }

try {
      const kg_neto = Number(formPedido.kg_neto) || 0
      const precio = Number(formPedido.precio) || 0

const nuevoPedido = {
        cliente_id: Number(formPedido.cliente_id),
        producto: formPedido.producto,
        categoria: formPedido.categoria,
        kg_bruto: Number(formPedido.kg_bruto) || 0,
        kg_neto: kg_neto,
        porcentaje_humedad: Number(formPedido.porcentaje_humedad) || 0,
        precio: precio,
        total: kg_neto * precio,
        fecha_pedido: formPedido.fecha_pedido,
        estado: "pendiente" as const,
        observaciones: formPedido.observaciones,
      }

console.log("[v0] Creating pedido:", nuevoPedido)
      await create(nuevoPedido)

resetForm()
      setModalNuevoPedido(false)
      refresh()
      alert("Pedido creado correctamente")
    } catch (error) {
      console.error("[v0] Error al crear pedido:", error)
      alert("Error al crear el pedido. Verifique los datos e intente nuevamente.")
    }
  }

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

if (!pedidoEditando) return

try {
      const kg_neto = Number(formPedido.kg_neto) || 0
      const precio = Number(formPedido.precio) || 0

const datosActualizados = {
        cliente_id: Number(formPedido.cliente_id),
        producto: formPedido.producto,
        categoria: formPedido.categoria,
        kg_bruto: Number(formPedido.kg_bruto) || 0,
        kg_neto: kg_neto,
        porcentaje_humedad: Number(formPedido.porcentaje_humedad) || 0,
        precio: precio,
        total: kg_neto * precio,
        fecha_pedido: formPedido.fecha_pedido,
        observaciones: formPedido.observaciones,
      }

console.log("[v0] Updating pedido:", pedidoEditando.id, datosActualizados)
      await update(pedidoEditando.id, datosActualizados)

setModalEditarPedido(false)
      setPedidoEditando(null)
      resetForm()
      refresh()
      alert("Pedido actualizado correctamente")
    } catch (error) {
      console.error("[v0] Error al actualizar pedido:", error)
      alert("Error al actualizar el pedido. Verifique los datos e intente nuevamente.")
    }
  }

const handleEliminarPedido = async (id: number) => {
    if (!confirm("¿Está seguro de eliminar este pedido? Esta acción no se puede deshacer.")) return

try {
      console.log("[v0] Deleting pedido:", id)
      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 {
      console.log("[v0] Updating estado:", id, nuevoEstado)
      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")
    }
  }

const abrirModalEditar = (pedido: any) => {
    setPedidoEditando(pedido)
    setFormPedido({
      cliente_id: String(pedido.cliente_id),
      producto: pedido.producto || "jengibre",
      categoria: pedido.categoria || "exportacion",
      kg_bruto: String(pedido.kg_bruto || 0),
      kg_neto: String(pedido.kg_neto || 0),
      porcentaje_humedad: String(pedido.porcentaje_humedad || 0),
      precio: String(pedido.precio || 0),
      fecha_pedido: pedido.fecha_pedido,
      observaciones: pedido.observaciones || "",
    })
    setModalEditarPedido(true)
  }

const resetForm = () => {
    setFormPedido({
      cliente_id: "",
      producto: "jengibre",
      categoria: "exportacion",
      kg_bruto: "",
      kg_neto: "",
      porcentaje_humedad: "",
      precio: "",
      fecha_pedido: new Date().toISOString().split("T")[0],
      observaciones: "",
    })
    setSearchClienteTerm("")
  }

return (
    <div className="space-y-6">
      <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</h1>
          <p className="text-gray-600">Administración completa de pedidos de clientes</p>
        </div>
        <Button onClick={() => setModalNuevoPedido(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Nuevo Pedido
        </Button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Total Pedidos</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">En Proceso</p>
                <p className="text-2xl font-bold text-blue-600">{estadisticas.proceso}</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">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>

<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, número 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</SelectItem>
                <SelectItem value="pendiente">Pendientes</SelectItem>
                <SelectItem value="proceso">En Proceso</SelectItem>
                <SelectItem value="completado">Completados</SelectItem>
                <SelectItem value="cancelado">Cancelados</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Número</TableHead>
                  <TableHead>Cliente</TableHead>
                  <TableHead>Producto</TableHead>
                  <TableHead>Categoría</TableHead>
                  <TableHead className="text-right">Kg Neto</TableHead>
                  <TableHead className="text-right">Precio</TableHead>
                  <TableHead className="text-right">Total</TableHead>
                  <TableHead>Fecha</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pedidosFiltrados.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={10} className="text-center py-8 text-gray-500">
                      No hay pedidos que coincidan con los filtros
                    </TableCell>
                  </TableRow>
                ) : (
                  pedidosFiltrados.map((pedido) => (
                    <TableRow key={pedido.id}>
                      <TableCell className="font-medium">{pedido.numero_pedido || `PED-${pedido.id}`}</TableCell>
                      <TableCell>{pedido.cliente || pedido.cliente_nombre || `Cliente ${pedido.cliente_id}`}</TableCell>
                      <TableCell className="capitalize">{pedido.producto}</TableCell>
                      <TableCell className="capitalize">{pedido.categoria}</TableCell>
                      <TableCell className="text-right">{Number(pedido.kg_neto).toFixed(2)} kg</TableCell>
                      <TableCell className="text-right">S/. {Number(pedido.precio).toFixed(2)}</TableCell>
                      <TableCell className="text-right font-medium">S/. {Number(pedido.total).toFixed(2)}</TableCell>
                      <TableCell>{pedido.fecha_pedido}</TableCell>
                      <TableCell>
                        <Badge className={estadoColors[pedido.estado]}>{pedido.estado}</Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-1">
                          {pedido.estado === "pendiente" && (
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => handleActualizarEstado(pedido.id, "proceso")}
                              title="Marcar como En Proceso"
                            >
                              <CheckCircle className="h-4 w-4 text-blue-600" />
                            </Button>
                          )}
                          {pedido.estado === "proceso" && (
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => handleActualizarEstado(pedido.id, "completado")}
                              title="Marcar como Completado"
                            >
                              <CheckCircle className="h-4 w-4 text-green-600" />
                            </Button>
                          )}
                          <Button size="sm" variant="ghost" onClick={() => abrirModalEditar(pedido)} title="Editar">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => handleEliminarPedido(pedido.id)}
                            title="Eliminar"
                          >
                            <Trash2 className="h-4 w-4 text-red-600" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

<Dialog
        open={modalNuevoPedido}
        onOpenChange={(open) => {
          setModalNuevoPedido(open)
          if (!open) resetForm()
        }}
      >
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Crear Nuevo Pedido</DialogTitle>
            <DialogDescription>Complete 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 col-span-2">
                <Label htmlFor="cliente_id">Cliente *</Label>
                <div className="space-y-2">
                  <Input
                    placeholder="Buscar cliente por nombre o DNI..."
                    value={searchClienteTerm}
                    onChange={(e) => setSearchClienteTerm(e.target.value)}
                  />
                  <Select
                    value={formPedido.cliente_id}
                    onValueChange={(value) => setFormPedido({ ...formPedido, cliente_id: value })}
                    required
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccione un cliente" />
                    </SelectTrigger>
                    <SelectContent>
                      {clientesFiltrados.length === 0 ? (
                        <div className="p-2 text-sm text-gray-500">No hay clientes disponibles</div>
                      ) : (
                        clientesFiltrados.map((cliente) => (
                          <SelectItem key={cliente.id} value={String(cliente.id)}>
                            {cliente.nombre_completo || `${cliente.nombres} ${cliente.apellidos}`} -{" "}
                            {cliente.dni || cliente.documento_identidad || cliente.numero_documento}
                          </SelectItem>
                        ))
                      )}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="producto">Producto *</Label>
                <Select
                  value={formPedido.producto}
                  onValueChange={(value) => setFormPedido({ ...formPedido, 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="categoria">Categoría *</Label>
                <Select
                  value={formPedido.categoria}
                  onValueChange={(value) => setFormPedido({ ...formPedido, categoria: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="exportacion">Exportación</SelectItem>
                    <SelectItem value="industrial">Industrial</SelectItem>
                    <SelectItem value="descarte">Descarte</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="kg_bruto">Peso Bruto (kg) *</Label>
                <Input
                  id="kg_bruto"
                  type="number"
                  step="0.01"
                  value={formPedido.kg_bruto}
                  onChange={(e) => setFormPedido({ ...formPedido, kg_bruto: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="porcentaje_humedad">Humedad (%)</Label>
                <Input
                  id="porcentaje_humedad"
                  type="number"
                  step="0.01"
                  value={formPedido.porcentaje_humedad}
                  onChange={(e) => setFormPedido({ ...formPedido, porcentaje_humedad: e.target.value })}
                  placeholder="Ej: 12.5"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="kg_neto">Peso Neto (kg) *</Label>
                <Input
                  id="kg_neto"
                  type="number"
                  step="0.01"
                  value={formPedido.kg_neto}
                  onChange={(e) => setFormPedido({ ...formPedido, kg_neto: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="precio">Precio (S/./kg) *</Label>
                <Input
                  id="precio"
                  type="number"
                  step="0.01"
                  value={formPedido.precio}
                  onChange={(e) => setFormPedido({ ...formPedido, precio: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="fecha_pedido">Fecha de Pedido *</Label>
                <Input
                  id="fecha_pedido"
                  type="date"
                  value={formPedido.fecha_pedido}
                  onChange={(e) => setFormPedido({ ...formPedido, fecha_pedido: e.target.value })}
                  required
                />
              </div>
              {formPedido.kg_neto && formPedido.precio && (
                <div className="col-span-2 p-3 bg-gray-50 rounded-lg">
                  <p className="text-sm text-gray-600">
                    Total:{" "}
                    <span className="text-xl font-bold text-gray-900">
                      S/. {(Number(formPedido.kg_neto) * Number(formPedido.precio)).toFixed(2)}
                    </span>
                  </p>
                </div>
              )}
            </div>
            <div className="space-y-2">
              <Label htmlFor="observaciones">Observaciones</Label>
              <Textarea
                id="observaciones"
                value={formPedido.observaciones}
                onChange={(e) => setFormPedido({ ...formPedido, observaciones: e.target.value })}
                rows={3}
                placeholder="Notas adicionales sobre el pedido..."
              />
            </div>
            <div className="flex justify-end gap-2 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => {
                  setModalNuevoPedido(false)
                  resetForm()
                }}
              >
                Cancelar
              </Button>
              <Button type="submit">Crear Pedido</Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

<Dialog
        open={modalEditarPedido}
        onOpenChange={(open) => {
          setModalEditarPedido(open)
          if (!open) {
            setPedidoEditando(null)
            resetForm()
          }
        }}
      >
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Editar Pedido</DialogTitle>
            <DialogDescription>Modifique los datos del pedido</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleEditarPedido} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2 col-span-2">
                <Label htmlFor="cliente_id_edit">Cliente *</Label>
                <Select
                  value={formPedido.cliente_id}
                  onValueChange={(value) => setFormPedido({ ...formPedido, cliente_id: value })}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccione un cliente" />
                  </SelectTrigger>
                  <SelectContent>
                    {clientes.map((cliente) => (
                      <SelectItem key={cliente.id} value={String(cliente.id)}>
                        {cliente.nombre_completo || `${cliente.nombres} ${cliente.apellidos}`}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="producto_edit">Producto *</Label>
                <Select
                  value={formPedido.producto}
                  onValueChange={(value) => setFormPedido({ ...formPedido, 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="categoria_edit">Categoría *</Label>
                <Select
                  value={formPedido.categoria}
                  onValueChange={(value) => setFormPedido({ ...formPedido, categoria: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="exportacion">Exportación</SelectItem>
                    <SelectItem value="industrial">Industrial</SelectItem>
                    <SelectItem value="descarte">Descarte</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="kg_bruto_edit">Peso Bruto (kg) *</Label>
                <Input
                  id="kg_bruto_edit"
                  type="number"
                  step="0.01"
                  value={formPedido.kg_bruto}
                  onChange={(e) => setFormPedido({ ...formPedido, kg_bruto: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="porcentaje_humedad_edit">Humedad (%)</Label>
                <Input
                  id="porcentaje_humedad_edit"
                  type="number"
                  step="0.01"
                  value={formPedido.porcentaje_humedad}
                  onChange={(e) => setFormPedido({ ...formPedido, porcentaje_humedad: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="kg_neto_edit">Peso Neto (kg) *</Label>
                <Input
                  id="kg_neto_edit"
                  type="number"
                  step="0.01"
                  value={formPedido.kg_neto}
                  onChange={(e) => setFormPedido({ ...formPedido, kg_neto: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="precio_edit">Precio (S/./kg) *</Label>
                <Input
                  id="precio_edit"
                  type="number"
                  step="0.01"
                  value={formPedido.precio}
                  onChange={(e) => setFormPedido({ ...formPedido, precio: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="fecha_pedido_edit">Fecha de Pedido *</Label>
                <Input
                  id="fecha_pedido_edit"
                  type="date"
                  value={formPedido.fecha_pedido}
                  onChange={(e) => setFormPedido({ ...formPedido, fecha_pedido: e.target.value })}
                  required
                />
              </div>
              {formPedido.kg_neto && formPedido.precio && (
                <div className="col-span-2 p-3 bg-gray-50 rounded-lg">
                  <p className="text-sm text-gray-600">
                    Total:{" "}
                    <span className="text-xl font-bold text-gray-900">
                      S/. {(Number(formPedido.kg_neto) * Number(formPedido.precio)).toFixed(2)}
                    </span>
                  </p>
                </div>
              )}
            </div>
            <div className="space-y-2">
              <Label htmlFor="observaciones_edit">Observaciones</Label>
              <Textarea
                id="observaciones_edit"
                value={formPedido.observaciones}
                onChange={(e) => setFormPedido({ ...formPedido, observaciones: e.target.value })}
                rows={3}
              />
            </div>
            <div className="flex justify-end gap-2 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => {
                  setModalEditarPedido(false)
                  setPedidoEditando(null)
                  resetForm()
                }}
              >
                Cancelar
              </Button>
              <Button type="submit">Guardar Cambios</Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pedidos-crud.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Search, Plus, Edit, Trash2, Check, ChevronsUpDown } from "lucide-react"
import { pedidosService } from "@/lib/services/pedidos-service"
import { personasService } from "@/lib/services/personas-service"
import type { Pedido, Persona } from "@/lib/types"
import { cn } from "@/lib/utils"

export function PedidosCrud() {
  const [pedidos, setPedidos] = useState<Pedido[]>([])
  const [clientes, setClientes] = useState<Persona[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterEstado, setFilterEstado] = useState<string>("todos")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingPedido, setEditingPedido] = useState<Pedido | null>(null)
  const [openClienteCombo, setOpenClienteCombo] = useState(false)

const [formData, setFormData] = useState({
    numero_pedido: "",
    cliente_id: 0,
    producto: "",
    categoria: "",
    kg_bruto: "",
    porcentaje_humedad: "",
    kg_neto: "",
    precio: "",
    total: "",
    fecha_pedido: new Date().toISOString().split("T")[0],
    estado: "pendiente" as Pedido["estado"],
    observaciones: "",
  })

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

useEffect(() => {
    const kgBruto = Number.parseFloat(formData.kg_bruto) || 0
    const porcentajeHumedad = Number.parseFloat(formData.porcentaje_humedad) || 0
    const precio = Number.parseFloat(formData.precio) || 0

const kgNeto = kgBruto * (1 - porcentajeHumedad / 100)
    const total = kgNeto * precio

setFormData((prev) => ({
      ...prev,
      kg_neto: kgNeto > 0 ? kgNeto.toFixed(2) : "",
      total: total > 0 ? total.toFixed(2) : "",
    }))
  }, [formData.kg_bruto, formData.porcentaje_humedad, formData.precio])

const loadData = async () => {
    try {
      setLoading(true)
      console.log("[v0] Loading pedidos and clientes...")
      const [pedidosData, personasData] = await Promise.all([pedidosService.getAll(), personasService.getAll()])

console.log("[v0] Pedidos loaded:", pedidosData.length)
      console.log("[v0] Personas loaded:", personasData.length)

setPedidos(pedidosData)

const clientesFiltered = personasData.filter(
        (p) =>
          p.tipo === "cliente" ||
          p.tipo_persona?.toLowerCase() === "cliente" ||
          (p.roles && p.roles.some((r) => r.toLowerCase().includes("cliente"))),
      )
      console.log("[v0] Clientes filtered:", clientesFiltered.length)
      setClientes(clientesFiltered)
    } catch (error) {
      console.error("[v0] Error loading data:", error)
    } finally {
      setLoading(false)
    }
  }

const handleCreate = () => {
    setEditingPedido(null)
    setFormData({
      numero_pedido: `PED-${new Date().getFullYear()}-${String(pedidos.length + 1).padStart(3, "0")}`,
      cliente_id: 0,
      producto: "",
      categoria: "",
      kg_bruto: "",
      porcentaje_humedad: "2.5",
      kg_neto: "",
      precio: "",
      total: "",
      fecha_pedido: new Date().toISOString().split("T")[0],
      estado: "pendiente",
      observaciones: "",
    })
    setIsDialogOpen(true)
  }

const handleEdit = (pedido: Pedido) => {
    setEditingPedido(pedido)
    setFormData({
      numero_pedido: pedido.numero_pedido || pedido.codigo || "",
      cliente_id: pedido.cliente_id,
      producto: pedido.producto,
      categoria: pedido.categoria || "",
      kg_bruto: String(pedido.kg_bruto),
      porcentaje_humedad: String(pedido.porcentaje_humedad || 0),
      kg_neto: String(pedido.kg_neto),
      precio: String(pedido.precio),
      total: String(pedido.total),
      fecha_pedido: pedido.fecha_pedido,
      estado: pedido.estado,
      observaciones: pedido.observaciones || "",
    })
    setIsDialogOpen(true)
  }

const handleDelete = async (id: number) => {
    if (!confirm("¿Estás seguro de eliminar este pedido?")) return

try {
      console.log("[v0] Deleting pedido:", id)
      await pedidosService.delete(id)
      await loadData()
    } catch (error) {
      console.error("[v0] Error deleting pedido:", error)
      alert("Error al eliminar el pedido")
    }
  }

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

if (!formData.cliente_id || formData.cliente_id === 0) {
      alert("Por favor selecciona un cliente")
      return
    }

try {
      const pedidoData = {
        numero_pedido: formData.numero_pedido,
        cliente_id: formData.cliente_id,
        producto: formData.producto,
        categoria: formData.categoria,
        kg_bruto: Number.parseFloat(formData.kg_bruto),
        porcentaje_humedad: Number.parseFloat(formData.porcentaje_humedad),
        kg_neto: Number.parseFloat(formData.kg_neto),
        precio: Number.parseFloat(formData.precio),
        total: Number.parseFloat(formData.total),
        fecha_pedido: formData.fecha_pedido,
        estado: formData.estado,
        observaciones: formData.observaciones,
      }

if (editingPedido) {
        console.log("[v0] Updating pedido:", editingPedido.id)
        await pedidosService.update(editingPedido.id, pedidoData)
      } else {
        console.log("[v0] Creating new pedido")
        await pedidosService.create(pedidoData)
      }

setIsDialogOpen(false)
      await loadData()
    } catch (error) {
      console.error("[v0] Error saving pedido:", error)
      alert("Error al guardar el pedido")
    }
  }

const handleEstadoChange = async (pedidoId: number, newEstado: Pedido["estado"]) => {
    try {
      console.log("[v0] Changing pedido estado:", { pedidoId, newEstado })
      await pedidosService.updateEstado(pedidoId, newEstado)
      await loadData()
    } catch (error) {
      console.error("[v0] Error updating estado:", error)
      alert("Error al actualizar el estado")
    }
  }

const filteredPedidos = pedidos.filter((pedido) => {
    const matchesSearch =
      pedido.numero_pedido?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      pedido.codigo?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      pedido.cliente_nombre?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      pedido.producto?.toLowerCase().includes(searchQuery.toLowerCase())

const matchesEstado = filterEstado === "todos" || pedido.estado === filterEstado

return matchesSearch && matchesEstado
  })

const estadoBadgeVariant = (estado: string) => {
    switch (estado) {
      case "completado":
        return "default"
      case "proceso":
        return "secondary"
      case "pendiente":
        return "outline"
      case "cancelado":
        return "destructive"
      default:
        return "outline"
    }
  }

const stats = {
    total: pedidos.length,
    pendiente: pedidos.filter((p) => p.estado === "pendiente").length,
    proceso: pedidos.filter((p) => p.estado === "proceso").length,
    completado: pedidos.filter((p) => p.estado === "completado").length,
    totalVentas: pedidos.reduce((sum, p) => sum + (p.total || 0), 0),
  }

const selectedCliente = clientes.find((c) => c.id === formData.cliente_id)

if (loading) {
    return <div className="flex items-center justify-center h-96">Cargando pedidos...</div>
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Gestión de Pedidos</h1>
          <p className="text-muted-foreground">Administra los pedidos de productos</p>
        </div>
        <Button onClick={handleCreate}>
          <Plus className="mr-2 h-4 w-4" />
          Nuevo Pedido
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-5">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Total Pedidos</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Pendientes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-yellow-600">{stats.pendiente}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">En Proceso</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{stats.proceso}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Completados</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{stats.completado}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Total Ventas</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">S/ {stats.totalVentas.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

<div className="flex gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar por número, cliente o producto..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-8"
          />
        </div>
        <Select value={filterEstado} onValueChange={setFilterEstado}>
          <SelectTrigger className="w-[200px]">
            <SelectValue placeholder="Filtrar por estado" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="todos">Todos los estados</SelectItem>
            <SelectItem value="pendiente">Pendiente</SelectItem>
            <SelectItem value="proceso">En Proceso</SelectItem>
            <SelectItem value="completado">Completado</SelectItem>
            <SelectItem value="cancelado">Cancelado</SelectItem>
          </SelectContent>
        </Select>
      </div>

<Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>N° Pedido</TableHead>
                <TableHead>Cliente</TableHead>
                <TableHead>Producto</TableHead>
                <TableHead>Categoría</TableHead>
                <TableHead className="text-right">Kg Bruto</TableHead>
                <TableHead className="text-right">Kg Neto</TableHead>
                <TableHead className="text-right">Precio</TableHead>
                <TableHead className="text-right">Total</TableHead>
                <TableHead>Fecha</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredPedidos.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={11} className="text-center text-muted-foreground py-8">
                    No se encontraron pedidos
                  </TableCell>
                </TableRow>
              ) : (
                filteredPedidos.map((pedido) => (
                  <TableRow key={pedido.id}>
                    <TableCell className="font-medium">{pedido.numero_pedido || pedido.codigo}</TableCell>
                    <TableCell>{pedido.cliente_nombre || `Cliente #${pedido.cliente_id}`}</TableCell>
                    <TableCell>{pedido.producto}</TableCell>
                    <TableCell>{pedido.categoria}</TableCell>
                    <TableCell className="text-right">{pedido.kg_bruto.toFixed(2)}</TableCell>
                    <TableCell className="text-right">{pedido.kg_neto.toFixed(2)}</TableCell>
                    <TableCell className="text-right">S/ {pedido.precio.toFixed(2)}</TableCell>
                    <TableCell className="text-right">S/ {pedido.total.toFixed(2)}</TableCell>
                    <TableCell>{new Date(pedido.fecha_pedido).toLocaleDateString()}</TableCell>
                    <TableCell>
                      <Select
                        value={pedido.estado}
                        onValueChange={(value) => handleEstadoChange(pedido.id, value as Pedido["estado"])}
                      >
                        <SelectTrigger className="w-[130px]">
                          <Badge variant={estadoBadgeVariant(pedido.estado)}>{pedido.estado}</Badge>
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="pendiente">Pendiente</SelectItem>
                          <SelectItem value="proceso">En Proceso</SelectItem>
                          <SelectItem value="completado">Completado</SelectItem>
                          <SelectItem value="cancelado">Cancelado</SelectItem>
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button variant="ghost" size="icon" onClick={() => handleEdit(pedido)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDelete(pedido.id)}>
                          <Trash2 className="h-4 w-4 text-destructive" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingPedido ? "Editar Pedido" : "Nuevo Pedido"}</DialogTitle>
            <DialogDescription>
              {editingPedido ? "Modifica los datos del pedido" : "Completa la información del nuevo pedido"}
            </DialogDescription>
          </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="numero_pedido">Número de Pedido</Label>
                <Input
                  id="numero_pedido"
                  value={formData.numero_pedido}
                  onChange={(e) => setFormData({ ...formData, numero_pedido: e.target.value })}
                  required
                />
              </div>

<div className="space-y-2">
                <Label>Cliente</Label>
                <Popover open={openClienteCombo} onOpenChange={setOpenClienteCombo}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={openClienteCombo}
                      className="w-full justify-between bg-transparent"
                    >
                      {selectedCliente
                        ? `${selectedCliente.nombres} ${selectedCliente.apellidos}`
                        : "Buscar cliente..."}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-[400px] p-0">
                    <Command>
                      <CommandInput placeholder="Buscar cliente por nombre o DNI..." />
                      <CommandList>
                        <CommandEmpty>No se encontró ningún cliente.</CommandEmpty>
                        <CommandGroup>
                          {clientes.map((cliente) => (
                            <CommandItem
                              key={cliente.id}
                              value={`${cliente.nombres} ${cliente.apellidos} ${cliente.dni || cliente.documento_identidad || ""}`}
                              onSelect={() => {
                                setFormData({ ...formData, cliente_id: cliente.id })
                                setOpenClienteCombo(false)
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  formData.cliente_id === cliente.id ? "opacity-100" : "opacity-0",
                                )}
                              />
                              <div className="flex flex-col">
                                <span>
                                  {cliente.nombres} {cliente.apellidos}
                                </span>
                                <span className="text-xs text-muted-foreground">
                                  DNI: {cliente.dni || cliente.documento_identidad || "N/A"}
                                </span>
                              </div>
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="producto">Producto</Label>
                <Input
                  id="producto"
                  value={formData.producto}
                  onChange={(e) => setFormData({ ...formData, producto: e.target.value })}
                  placeholder="Ej: Espárragos Verdes"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="categoria">Categoría</Label>
                <Select
                  value={formData.categoria}
                  onValueChange={(value) => setFormData({ ...formData, categoria: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar categoría" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Premium">Premium</SelectItem>
                    <SelectItem value="Extra">Extra</SelectItem>
                    <SelectItem value="Standard">Standard</SelectItem>
                    <SelectItem value="Segunda">Segunda</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="kg_bruto">Kg Bruto</Label>
                <Input
                  id="kg_bruto"
                  type="number"
                  step="0.01"
                  value={formData.kg_bruto}
                  onChange={(e) => setFormData({ ...formData, kg_bruto: e.target.value })}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="porcentaje_humedad">% Humedad</Label>
                <Input
                  id="porcentaje_humedad"
                  type="number"
                  step="0.01"
                  value={formData.porcentaje_humedad}
                  onChange={(e) => setFormData({ ...formData, porcentaje_humedad: e.target.value })}
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="precio">Precio Unitario (S/)</Label>
                <Input
                  id="precio"
                  type="number"
                  step="0.01"
                  value={formData.precio}
                  onChange={(e) => setFormData({ ...formData, precio: e.target.value })}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="total">Total (S/)</Label>
                <Input id="total" type="number" step="0.01" value={formData.total} readOnly className="bg-muted" />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="fecha_pedido">Fecha del Pedido</Label>
                <Input
                  id="fecha_pedido"
                  type="date"
                  value={formData.fecha_pedido}
                  onChange={(e) => setFormData({ ...formData, fecha_pedido: e.target.value })}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="estado">Estado</Label>
                <Select
                  value={formData.estado}
                  onValueChange={(value) => setFormData({ ...formData, estado: value as Pedido["estado"] })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pendiente">Pendiente</SelectItem>
                    <SelectItem value="proceso">En Proceso</SelectItem>
                    <SelectItem value="completado">Completado</SelectItem>
                    <SelectItem value="cancelado">Cancelado</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="observaciones">Observaciones</Label>
              <Textarea
                id="observaciones"
                value={formData.observaciones}
                onChange={(e) => setFormData({ ...formData, observaciones: e.target.value })}
                rows={3}
                placeholder="Información adicional sobre el pedido..."
              />
            </div>

<DialogFooter>
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Cancelar
              </Button>
              <Button type="submit">{editingPedido ? "Actualizar" : "Crear"} Pedido</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pedidos-crud/page.tsx" isMerged="true"
"use client"

import { PedidosCrud } from "@/components/pedidos-crud"

export default function PedidosCrudPage() {
  return <PedidosCrud />
}
[V0_FILE]typescript:file="lib/services/pedidos-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { ApiService } from "./api-service"
import { API_ENDPOINTS } from "@/lib/config/api"
import type { Pedido } from "@/lib/types"

export class PedidosService {
  async getAll(): Promise<Pedido[]> {
    console.log("[v0] PedidosService.getAll() - Fetching from API")

try {
      const response = await ApiService.get<any[]>(API_ENDPOINTS.PEDIDOS)
      console.log("[v0] PedidosService.getAll() - Raw response:", response)

if (!Array.isArray(response)) {
        console.warn("[v0] PedidosService.getAll() - Response is not an array:", response)
        return []
      }

const transformed = response.map((pedido) => ({
        id: pedido.id,
        numero_pedido: pedido.numero_pedido || `PED-${pedido.id}`,
        codigo: pedido.numero_pedido || `PED-${pedido.id}`,
        cliente_id: Number(pedido.cliente_id),
        cliente: pedido.cliente_nombre || `Cliente ${pedido.cliente_id}`,
        cliente_nombre: pedido.cliente_nombre,
        producto: pedido.producto || "jengibre",
        categoria: pedido.categoria || "exportacion",
        kg_bruto: Number(pedido.kg_bruto) || 0,
        porcentaje_humedad: Number(pedido.porcentaje_humedad) || 0,
        kg_neto: Number(pedido.kg_neto) || 0,
        precio: Number(pedido.precio) || 0,
        total: Number(pedido.total) || 0,
        fecha_pedido: pedido.fecha_pedido,
        estado: pedido.estado || "pendiente",
        observaciones: pedido.observaciones || "",
        created_at: pedido.created_at,
        updated_at: pedido.updated_at,
      }))

console.log("[v0] PedidosService.getAll() - Transformed pedidos:", transformed.length)
      return transformed
    } catch (error) {
      console.error("[v0] PedidosService.getAll() - Error:", error)
      throw error
    }
  }

async getById(id: number): Promise<Pedido> {
    const response = await ApiService.get<any>(API_ENDPOINTS.PEDIDOS_BY_ID(id))
    return {
      id: response.id,
      numero_pedido: response.numero_pedido || `PED-${response.id}`,
      codigo: response.numero_pedido || response.codigo || `PED-${response.id}`,
      cliente_id: Number(response.cliente_id),
      cliente: response.cliente_nombre || `Cliente ${response.cliente_id}`,
      cliente_nombre: response.cliente_nombre,
      producto: response.producto || "jengibre",
      categoria: response.categoria || "exportacion",
      kg_bruto: Number(response.kg_bruto) || 0,
      porcentaje_humedad: Number(response.porcentaje_humedad) || 0,
      kg_neto: Number(response.kg_neto) || 0,
      precio: Number(response.precio),
      total: Number(response.total) || 0,
      fecha_pedido: response.fecha_pedido,
      estado: response.estado || "pendiente",
      observaciones: response.observaciones || "",
      created_at: response.created_at,
      updated_at: response.updated_at,
    }
  }

async create(data: Omit<Pedido, "id" | "created_at" | "updated_at">): Promise<Pedido> {
    const backendData = {
      numero_pedido: data.numero_pedido || data.codigo || `PED-${Date.now()}`,
      cliente_id: Number(data.cliente_id),
      producto: data.producto,
      categoria: data.categoria || "exportacion",
      kg_bruto: Number(data.kg_bruto) || 0,
      porcentaje_humedad: Number(data.porcentaje_humedad) || 0,
      kg_neto: Number(data.kg_neto) || 0,
      precio: Number(data.precio),
      total: Number(data.total) || Number(data.kg_neto) * Number(data.precio),
      fecha_pedido: data.fecha_pedido || new Date().toISOString().split("T")[0],
      estado: data.estado || "pendiente",
      observaciones: data.observaciones || "",
    }

console.log("[v0] PedidosService.create() - Backend data:", backendData)
    const response = await ApiService.post<any>(API_ENDPOINTS.PEDIDOS, backendData)
    console.log("[v0] PedidosService.create() - Response:", response)

return {
      id: response.id,
      numero_pedido: response.numero_pedido || backendData.numero_pedido,
      codigo: response.numero_pedido || backendData.numero_pedido,
      cliente_id: Number(response.cliente_id),
      cliente: response.cliente_nombre,
      producto: response.producto,
      categoria: response.categoria,
      kg_bruto: Number(response.kg_bruto),
      porcentaje_humedad: Number(response.porcentaje_humedad),
      kg_neto: Number(response.kg_neto),
      precio: Number(response.precio),
      total: Number(response.total),
      fecha_pedido: response.fecha_pedido,
      estado: response.estado,
      observaciones: response.observaciones,
      created_at: response.created_at,
      updated_at: response.updated_at,
    }
  }

async update(id: number, data: Partial<Omit<Pedido, "id" | "created_at" | "updated_at">>): Promise<Pedido> {
    const backendData: any = {}
    if (data.numero_pedido !== undefined) backendData.numero_pedido = data.numero_pedido
    if (data.cliente_id !== undefined) backendData.cliente_id = Number(data.cliente_id)
    if (data.producto !== undefined) backendData.producto = data.producto
    if (data.categoria !== undefined) backendData.categoria = data.categoria
    if (data.kg_bruto !== undefined) backendData.kg_bruto = Number(data.kg_bruto)
    if (data.porcentaje_humedad !== undefined) backendData.porcentaje_humedad = Number(data.porcentaje_humedad)
    if (data.kg_neto !== undefined) backendData.kg_neto = Number(data.kg_neto)
    if (data.precio !== undefined) backendData.precio = Number(data.precio)
    if (data.total !== undefined) backendData.total = Number(data.total)
    if (data.fecha_pedido !== undefined) backendData.fecha_pedido = data.fecha_pedido
    if (data.estado !== undefined) backendData.estado = data.estado
    if (data.observaciones !== undefined) backendData.observaciones = data.observaciones

// Calculate total if kg_neto and precio are both updated
    if (backendData.kg_neto && backendData.precio) {
      backendData.total = backendData.kg_neto * backendData.precio
    }

console.log("[v0] PedidosService.update() - Updating ID:", id, "with data:", backendData)
    const response = await ApiService.put<any>(API_ENDPOINTS.PEDIDOS_BY_ID(id), backendData)
    console.log("[v0] PedidosService.update() - Response:", response)

return {
      id: response.id || id,
      numero_pedido: response.numero_pedido || `PED-${id}`,
      codigo: response.numero_pedido || `PED-${id}`,
      cliente_id: Number(response.cliente_id),
      cliente: response.cliente_nombre,
      producto: response.producto,
      categoria: response.categoria,
      kg_bruto: Number(response.kg_bruto),
      porcentaje_humedad: Number(response.porcentaje_humedad),
      kg_neto: Number(response.kg_neto),
      precio: Number(response.precio),
      total: Number(response.total),
      fecha_pedido: response.fecha_pedido,
      estado: response.estado,
      observaciones: response.observaciones,
      created_at: response.created_at,
      updated_at: response.updated_at,
    }
  }

async delete(id: number): Promise<void> {
    console.log("[v0] PedidosService.delete() - Deleting ID:", id)
    await ApiService.delete(API_ENDPOINTS.PEDIDOS_BY_ID(id))
    console.log("[v0] PedidosService.delete() - Deleted successfully")
  }

async updateEstado(id: number, estado: Pedido["estado"]): Promise<Pedido> {
    console.log("[v0] PedidosService.updateEstado() - Updating estado for ID:", id, "to:", estado)
    return this.update(id, { estado })
  }

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) => {
      const codigo = p.codigo || p.numero_pedido || ""
      return typeof codigo === "string" && 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()
[V0_FILE]typescriptreact:file="components/libro-banco-crud.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useMemo } from "react"
import { bancoService } from "@/lib/services/banco-service"
import { personasService } from "@/lib/services/personas-service"
import type { TransaccionBanco, Persona } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import {
  Plus,
  Edit,
  Trash2,
  Search,
  TrendingUp,
  TrendingDown,
  DollarSign,
  CheckCircle2,
  Clock,
  XCircle,
  Check,
  ChevronsUpDown,
} from "lucide-react"
import { cn } from "@/lib/utils"

export function LibroBancoCrud() {
  const { toast } = useToast()
  const [transacciones, setTransacciones] = useState<TransaccionBanco[]>([])
  const [personas, setPersonas] = useState<Persona[]>([])
  const [loading, setLoading] = useState(true)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isEditing, setIsEditing] = useState(false)
  const [currentTransaccion, setCurrentTransaccion] = useState<TransaccionBanco | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [filterEstado, setFilterEstado] = useState<string>("todos")
  const [filterRubro, setFilterRubro] = useState<string>("todos")
  const [openAgricultorCombo, setOpenAgricultorCombo] = useState(false)
  const [agricultorSearch, setAgricultorSearch] = useState("")

// Form state
  const [formData, setFormData] = useState({
    fecha: new Date().toISOString().split("T")[0],
    operacion: "",
    de_quien: "",
    a_quien: "",
    motivo: "",
    rubro: "campo",
    tipo_operacion: "pago",
    numero_operacion: "",
    comprobante: "",
    deudor: "0.00",
    acreedor: "0.00",
    estado: "pendiente" as const,
    agricultor: "",
  })

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

const loadData = async () => {
    try {
      setLoading(true)
      const [transaccionesData, personasData] = await Promise.all([bancoService.getAll(), personasService.getAll()])
      console.log("[v0] Libro Banco - Datos cargados:", { transaccionesData, personasData })
      setTransacciones(transaccionesData)
      setPersonas(personasData)
    } catch (error) {
      console.error("[v0] Error al cargar datos:", error)
      toast({
        title: "Error",
        description: "No se pudieron cargar los datos del libro banco",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

// Filtrar agricultores (productores)
  const agricultores = useMemo(() => {
    return personas.filter((p) => {
      const esProductor =
        p.tipo === "productor" ||
        p.tipo_persona?.toLowerCase() === "productor" ||
        p.roles?.some((r) => r.toLowerCase() === "productor")

if (!esProductor) return false

if (!agricultorSearch) return true

const search = agricultorSearch.toLowerCase()
      const nombre = (p.nombre_completo || `${p.nombres} ${p.apellidos}`).toLowerCase()
      const dni = (p.dni || p.numero_documento || "").toLowerCase()

return nombre.includes(search) || dni.includes(search)
    })
  }, [personas, agricultorSearch])

const handleOpenDialog = (transaccion?: TransaccionBanco) => {
    if (transaccion) {
      setIsEditing(true)
      setCurrentTransaccion(transaccion)
      setFormData({
        fecha: transaccion.fecha,
        operacion: transaccion.operacion,
        de_quien: transaccion.de_quien,
        a_quien: transaccion.a_quien,
        motivo: transaccion.motivo,
        rubro: transaccion.rubro,
        tipo_operacion: transaccion.tipo_operacion,
        numero_operacion: transaccion.numero_operacion,
        comprobante: transaccion.comprobante,
        deudor: String(transaccion.deudor),
        acreedor: String(transaccion.acreedor),
        estado: transaccion.estado,
        agricultor: transaccion.agricultor || "",
      })
    } else {
      setIsEditing(false)
      setCurrentTransaccion(null)
      setFormData({
        fecha: new Date().toISOString().split("T")[0],
        operacion: "",
        de_quien: "",
        a_quien: "",
        motivo: "",
        rubro: "campo",
        tipo_operacion: "pago",
        numero_operacion: "",
        comprobante: "",
        deudor: "0.00",
        acreedor: "0.00",
        estado: "pendiente",
        agricultor: "",
      })
    }
    setIsDialogOpen(true)
  }

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

try {
      const dataToSend = {
        ...formData,
        deudor: Number.parseFloat(formData.deudor) || 0,
        acreedor: Number.parseFloat(formData.acreedor) || 0,
      }

if (isEditing && currentTransaccion) {
        await bancoService.update(currentTransaccion.id, dataToSend)
        toast({
          title: "Éxito",
          description: "Transacción actualizada correctamente",
        })
      } else {
        await bancoService.create(dataToSend)
        toast({
          title: "Éxito",
          description: "Transacción registrada correctamente",
        })
      }

setIsDialogOpen(false)
      loadData()
    } catch (error) {
      console.error("[v0] Error al guardar transacción:", error)
      toast({
        title: "Error",
        description: "No se pudo guardar la transacción",
        variant: "destructive",
      })
    }
  }

const handleDelete = async (id: number) => {
    if (!confirm("¿Está seguro de eliminar esta transacción?")) return

try {
      await bancoService.delete(id)
      toast({
        title: "Éxito",
        description: "Transacción eliminada correctamente",
      })
      loadData()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo eliminar la transacción",
        variant: "destructive",
      })
    }
  }

const handleChangeEstado = async (id: number, nuevoEstado: string) => {
    try {
      await bancoService.updateEstado(id, nuevoEstado)
      toast({
        title: "Éxito",
        description: "Estado actualizado correctamente",
      })
      loadData()
    } catch (error) {
      toast({
        title: "Error",
        description: "No se pudo actualizar el estado",
        variant: "destructive",
      })
    }
  }

// Filtrar transacciones
  const transaccionesFiltradas = useMemo(() => {
    return transacciones.filter((t) => {
      const matchSearch =
        !searchTerm ||
        t.operacion.toLowerCase().includes(searchTerm.toLowerCase()) ||
        t.de_quien.toLowerCase().includes(searchTerm.toLowerCase()) ||
        t.a_quien.toLowerCase().includes(searchTerm.toLowerCase()) ||
        t.numero_operacion.toLowerCase().includes(searchTerm.toLowerCase()) ||
        t.comprobante.toLowerCase().includes(searchTerm.toLowerCase())

const matchEstado = filterEstado === "todos" || t.estado === filterEstado
      const matchRubro = filterRubro === "todos" || t.rubro === filterRubro

return matchSearch && matchEstado && matchRubro
    })
  }, [transacciones, searchTerm, filterEstado, filterRubro])

// Calcular estadísticas
  const stats = useMemo(() => {
    const totalIngresos = transacciones.reduce((sum, t) => sum + Number.parseFloat(String(t.acreedor)), 0)
    const totalEgresos = transacciones.reduce((sum, t) => sum + Number.parseFloat(String(t.deudor)), 0)
    const saldo = totalIngresos - totalEgresos

return {
      totalIngresos,
      totalEgresos,
      saldo,
      totalTransacciones: transacciones.length,
    }
  }, [transacciones])

const getEstadoBadge = (estado: string) => {
    const variants = {
      pendiente: "default",
      proceso: "secondary",
      completado: "default",
      cancelado: "destructive",
    } as const

const icons = {
      pendiente: Clock,
      proceso: Clock,
      completado: CheckCircle2,
      cancelado: XCircle,
    }

const Icon = icons[estado as keyof typeof icons] || Clock

return (
      <Badge variant={variants[estado as keyof typeof variants] || "default"}>
        <Icon className="mr-1 h-3 w-3" />
        {estado}
      </Badge>
    )
  }

if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Cargando libro banco...</p>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Estadísticas */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Ingresos</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">S/. {stats.totalIngresos.toFixed(2)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Egresos</CardTitle>
            <TrendingDown className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">S/. {stats.totalEgresos.toFixed(2)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saldo</CardTitle>
            <DollarSign className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className={cn("text-2xl font-bold", stats.saldo >= 0 ? "text-blue-600" : "text-red-600")}>
              S/. {stats.saldo.toFixed(2)}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Operaciones</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalTransacciones}</div>
          </CardContent>
        </Card>
      </div>

{/* Filtros y acciones */}
      <Card>
        <CardHeader>
          <CardTitle>Libro Banco</CardTitle>
          <CardDescription>Gestión completa de transacciones bancarias</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-6">
            <div className="flex flex-1 gap-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 operación, persona, número..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-8"
                />
              </div>
              <Select value={filterEstado} onValueChange={setFilterEstado}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todos">Todos</SelectItem>
                  <SelectItem value="pendiente">Pendiente</SelectItem>
                  <SelectItem value="proceso">En Proceso</SelectItem>
                  <SelectItem value="completado">Completado</SelectItem>
                  <SelectItem value="cancelado">Cancelado</SelectItem>
                </SelectContent>
              </Select>
              <Select value={filterRubro} onValueChange={setFilterRubro}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Rubro" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todos">Todos</SelectItem>
                  <SelectItem value="campo">Campo</SelectItem>
                  <SelectItem value="ventas">Ventas</SelectItem>
                  <SelectItem value="gastos">Gastos</SelectItem>
                  <SelectItem value="otros">Otros</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Button onClick={() => handleOpenDialog()}>
              <Plus className="mr-2 h-4 w-4" />
              Nueva Transacción
            </Button>
          </div>

{/* Tabla */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fecha</TableHead>
                  <TableHead>N° Operación</TableHead>
                  <TableHead>Operación</TableHead>
                  <TableHead>De Quien</TableHead>
                  <TableHead>A Quien</TableHead>
                  <TableHead>Motivo</TableHead>
                  <TableHead>Rubro</TableHead>
                  <TableHead className="text-right">Debe</TableHead>
                  <TableHead className="text-right">Haber</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {transaccionesFiltradas.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={11} className="text-center text-muted-foreground">
                      No hay transacciones registradas
                    </TableCell>
                  </TableRow>
                ) : (
                  transaccionesFiltradas.map((transaccion) => (
                    <TableRow key={transaccion.id}>
                      <TableCell>{new Date(transaccion.fecha).toLocaleDateString()}</TableCell>
                      <TableCell className="font-mono text-sm">{transaccion.numero_operacion}</TableCell>
                      <TableCell>{transaccion.operacion}</TableCell>
                      <TableCell>{transaccion.de_quien}</TableCell>
                      <TableCell>{transaccion.a_quien}</TableCell>
                      <TableCell className="max-w-[200px] truncate">{transaccion.motivo}</TableCell>
                      <TableCell>
                        <Badge variant="outline">{transaccion.rubro}</Badge>
                      </TableCell>
                      <TableCell className="text-right font-medium text-red-600">
                        {Number.parseFloat(String(transaccion.deudor)) > 0
                          ? `S/. ${Number.parseFloat(String(transaccion.deudor)).toFixed(2)}`
                          : "-"}
                      </TableCell>
                      <TableCell className="text-right font-medium text-green-600">
                        {Number.parseFloat(String(transaccion.acreedor)) > 0
                          ? `S/. ${Number.parseFloat(String(transaccion.acreedor)).toFixed(2)}`
                          : "-"}
                      </TableCell>
                      <TableCell>
                        <Select
                          value={transaccion.estado}
                          onValueChange={(value) => handleChangeEstado(transaccion.id, value)}
                        >
                          <SelectTrigger className="w-[140px]">{getEstadoBadge(transaccion.estado)}</SelectTrigger>
                          <SelectContent>
                            <SelectItem value="pendiente">Pendiente</SelectItem>
                            <SelectItem value="proceso">En Proceso</SelectItem>
                            <SelectItem value="completado">Completado</SelectItem>
                            <SelectItem value="cancelado">Cancelado</SelectItem>
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(transaccion)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => handleDelete(transaccion.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Dialog para crear/editar */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{isEditing ? "Editar Transacción" : "Nueva Transacción"}</DialogTitle>
            <DialogDescription>Complete los datos de la transacción bancaria</DialogDescription>
          </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="numero_operacion">N° Operación *</Label>
                <Input
                  id="numero_operacion"
                  value={formData.numero_operacion}
                  onChange={(e) => setFormData({ ...formData, numero_operacion: e.target.value })}
                  placeholder="OP-001"
                  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: Pago a productor, Venta de producto, etc."
                required
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="de_quien">De Quien *</Label>
                <Input
                  id="de_quien"
                  value={formData.de_quien}
                  onChange={(e) => setFormData({ ...formData, de_quien: e.target.value })}
                  placeholder="Nombre de quien envía"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="a_quien">A Quien *</Label>
                <Input
                  id="a_quien"
                  value={formData.a_quien}
                  onChange={(e) => setFormData({ ...formData, a_quien: e.target.value })}
                  placeholder="Nombre de quien recibe"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="agricultor">Agricultor (Opcional)</Label>
              <Popover open={openAgricultorCombo} onOpenChange={setOpenAgricultorCombo}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={openAgricultorCombo}
                    className="w-full justify-between bg-transparent"
                  >
                    {formData.agricultor || "Seleccionar agricultor..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0">
                  <Command>
                    <CommandInput
                      placeholder="Buscar agricultor por nombre o DNI..."
                      value={agricultorSearch}
                      onValueChange={setAgricultorSearch}
                    />
                    <CommandList>
                      <CommandEmpty>No se encontraron agricultores.</CommandEmpty>
                      <CommandGroup>
                        <CommandItem
                          value=""
                          onSelect={() => {
                            setFormData({ ...formData, agricultor: "" })
                            setOpenAgricultorCombo(false)
                          }}
                        >
                          <Check
                            className={cn("mr-2 h-4 w-4", (!formData.agricultor && "opacity-100") || "opacity-0")}
                          />
                          (Ninguno)
                        </CommandItem>
                        {agricultores.map((agricultor) => {
                          const nombre = agricultor.nombre_completo || `${agricultor.nombres} ${agricultor.apellidos}`
                          const dni = agricultor.dni || agricultor.numero_documento || ""
                          return (
                            <CommandItem
                              key={agricultor.id}
                              value={nombre}
                              onSelect={() => {
                                setFormData({ ...formData, agricultor: nombre })
                                setOpenAgricultorCombo(false)
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  formData.agricultor === nombre ? "opacity-100" : "opacity-0",
                                )}
                              />
                              <div className="flex flex-col">
                                <span>{nombre}</span>
                                {dni && <span className="text-xs text-muted-foreground">DNI: {dni}</span>}
                              </div>
                            </CommandItem>
                          )
                        })}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

<div className="space-y-2">
              <Label htmlFor="motivo">Motivo *</Label>
              <Textarea
                id="motivo"
                value={formData.motivo}
                onChange={(e) => setFormData({ ...formData, motivo: e.target.value })}
                placeholder="Descripción del motivo de la transacción"
                required
              />
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="rubro">Rubro *</Label>
                <Select value={formData.rubro} onValueChange={(value) => setFormData({ ...formData, rubro: value })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="campo">Campo</SelectItem>
                    <SelectItem value="ventas">Ventas</SelectItem>
                    <SelectItem value="gastos">Gastos</SelectItem>
                    <SelectItem value="otros">Otros</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="tipo_operacion">Tipo Operación *</Label>
                <Select
                  value={formData.tipo_operacion}
                  onValueChange={(value) => setFormData({ ...formData, tipo_operacion: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pago">Pago</SelectItem>
                    <SelectItem value="adelanto">Adelanto</SelectItem>
                    <SelectItem value="venta">Venta</SelectItem>
                    <SelectItem value="compra">Compra</SelectItem>
                    <SelectItem value="transferencia">Transferencia</SelectItem>
                    <SelectItem value="otros">Otros</SelectItem>
                  </SelectContent>
                </Select>
              </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 })}
                  placeholder="COMP-001"
                  required
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="deudor">Debe (Egreso) *</Label>
                <Input
                  id="deudor"
                  type="number"
                  step="0.01"
                  value={formData.deudor}
                  onChange={(e) => setFormData({ ...formData, deudor: e.target.value, acreedor: "0.00" })}
                  placeholder="0.00"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="acreedor">Haber (Ingreso) *</Label>
                <Input
                  id="acreedor"
                  type="number"
                  step="0.01"
                  value={formData.acreedor}
                  onChange={(e) => setFormData({ ...formData, acreedor: e.target.value, deudor: "0.00" })}
                  placeholder="0.00"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="estado">Estado *</Label>
              <Select
                value={formData.estado}
                onValueChange={(value: any) => setFormData({ ...formData, estado: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pendiente">Pendiente</SelectItem>
                  <SelectItem value="proceso">En Proceso</SelectItem>
                  <SelectItem value="completado">Completado</SelectItem>
                  <SelectItem value="cancelado">Cancelado</SelectItem>
                </SelectContent>
              </Select>
            </div>

<DialogFooter>
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Cancelar
              </Button>
              <Button type="submit">{isEditing ? "Actualizar" : "Crear"} Transacción</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/libro-banco/page.tsx" isEdit="true" isMerged="true"
import { LibroBancoCrud } from "@/components/libro-banco-crud"

export default function LibroBancoPage() {
  return (
    <div className="container mx-auto py-6">
      <LibroBancoCrud />
    </div>
  )
}
[V0_FILE]typescript:file="lib/types/index.ts" isEdit="true" isQuickEdit="true"
export interface BaseEntity {
  id: number
  created_at?: string
  updated_at?: string
}

export interface Lote extends BaseEntity {
  codigo?: string
  numero_lote?: string // Added backend field name support
  productor_id: number
  productor_nombre?: string
  peso_bruto: number
  peso_neto: number
  peso_inicial?: number // Added alternative field name
  tara: number
  numero_jabas?: number // Added alternative field name
  num_jabas?: number
  fecha_ingreso: string
  producto?: string // Added product field
  estado: "pendiente" | "proceso" | "completado" | "entregado"
  precio_unitario?: number
  total?: number
  observaciones?: string
}

export interface Persona extends BaseEntity {
  tipo?: "productor" | "empleado" | "proveedor" | "cliente"
  tipo_persona?: string // Backend field name
  nombres: string
  apellidos: string
  nombre_completo?: string
  dni?: string
  numero_documento?: string
  documento_identidad?: string
  tipo_documento?: string
  telefono?: string
  direccion?: string
  email?: string
  banco?: string
  cuenta_bancaria?: string
  activo?: boolean
  roles?: string[]
  fecha_registro?: string
  fecha_nacimiento?: string
  observaciones?: string
  estado?: string
}

export interface Empleado extends BaseEntity {
  persona_id: number
  persona_nombre?: string
  nombres?: string
  apellidos?: string
  documento_identidad?: string
  dni?: string
  telefono?: string
  cargo: string
  area: "administrativo" | "campo" | "planta" | "ventas"
  sueldo?: number
  fecha_ingreso?: string
  fecha_salida?: string
  estado: "activo" | "inactivo"
  activo?: boolean
}

export interface Pedido extends BaseEntity {
  codigo?: string
  numero_pedido?: string
  cliente_id: number
  cliente?: string
  cliente_nombre?: string
  producto: string
  categoria?: string
  kg_bruto: number
  kg_neto: number
  porcentaje_humedad?: number
  precio: number
  total: number
  fecha_pedido: string
  fecha_entrega?: string
  estado: "pendiente" | "proceso" | "completado" | "cancelado"
  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
  operacion: string
  de_quien: string
  a_quien: string
  motivo: string
  rubro: string
  tipo_operacion: string
  numero_operacion: string
  comprobante: string
  deudor: string | number
  acreedor: string | number
  estado: "pendiente" | "proceso" | "cancelado" | "completado"
  agricultor?: string | null
}

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" isEdit="true"
import { ApiService } from "./api-service"
import type { Empleado } from "@/lib/types"

export class EmpleadosService {
  async getAll(): Promise<Empleado[]> {
    console.log("[v0] EmpleadosService: Fetching all empleados")
    const response = await ApiService.get<Empleado[]>("/api/proxy/empleados")
    console.log("[v0] EmpleadosService: Response", { count: Array.isArray(response) ? response.length : 0 })

// Transform data to match frontend format
    const empleados = Array.isArray(response) ? response : []
    return empleados.map((emp) => ({
      ...emp,
      activo: emp.estado === "activo",
      persona_nombre: emp.persona_nombre || `${emp.nombres || ""} ${emp.apellidos || ""}`.trim(),
    }))
  }

async getById(id: number): Promise<Empleado> {
    const response = await ApiService.get<Empleado>(`/api/proxy/empleados/${id}`)
    return response
  }

async create(data: Omit<Empleado, "id" | "created_at" | "updated_at">): Promise<Empleado> {
    console.log("[v0] EmpleadosService: Creating empleado", data)
    const payload = {
      ...data,
      estado: data.estado || "activo",
      fecha_ingreso: data.fecha_ingreso || new Date().toISOString().split("T")[0],
    }
    const response = await ApiService.post<Empleado>("/api/proxy/empleados", payload)
    return response
  }

async update(id: number, data: Partial<Empleado>): Promise<Empleado> {
    console.log("[v0] EmpleadosService: Updating empleado", { id, data })
    const response = await ApiService.put<Empleado>(`/api/proxy/empleados/${id}`, data)
    return response
  }

async delete(id: number): Promise<void> {
    console.log("[v0] EmpleadosService: Deleting empleado", { id })
    await ApiService.delete(`/api/proxy/empleados/${id}`)
  }

async updateEstado(id: number, estado: "activo" | "inactivo"): Promise<Empleado> {
    return this.update(id, { estado })
  }
}

export const empleadosService = new EmpleadosService()
[V0_FILE]typescriptreact:file="components/empleados-crud.tsx"
"use client"

import type React from "react"

import { useState, useEffect } 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, DialogFooter } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, Edit, Trash2, Loader2, AlertCircle, Users, UserCheck, UserX, DollarSign } from "lucide-react"
import { empleadosService } from "@/lib/services/empleados-service"
import { personasService } from "@/lib/services/personas-service"
import type { Empleado, Persona } from "@/lib/types"
import { useToast } from "@/components/ui/use-toast"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"

export function EmpleadosCrud() {
  const { toast } = useToast()
  const [empleados, setEmpleados] = useState<Empleado[]>([])
  const [personas, setPersonas] = useState<Persona[]>([])
  const [loading, setLoading] = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editingEmpleado, setEditingEmpleado] = useState<Empleado | null>(null)
  const [busqueda, setBusqueda] = useState("")
  const [filtroEstado, setFiltroEstado] = useState<string>("todos")
  const [filtroArea, setFiltroArea] = useState<string>("todos")
  const [openPersonaCombo, setOpenPersonaCombo] = useState(false)

// Form state
  const [formData, setFormData] = useState({
    persona_id: 0,
    cargo: "",
    area: "administrativo" as "administrativo" | "campo" | "planta" | "ventas",
    sueldo: 0,
    fecha_ingreso: new Date().toISOString().split("T")[0],
    fecha_salida: "",
    estado: "activo" as "activo" | "inactivo",
  })

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

const loadData = async () => {
    setLoading(true)
    try {
      const [empleadosData, personasData] = await Promise.all([empleadosService.getAll(), personasService.getAll()])
      console.log("[v0] EmpleadosCrud: Data loaded", {
        empleados: empleadosData.length,
        personas: personasData.length,
      })
      setEmpleados(empleadosData)
      setPersonas(personasData.filter((p) => p.tipo === "empleado" || p.tipo_persona === "empleado"))
    } catch (error: any) {
      console.error("[v0] EmpleadosCrud: Error loading data", error)
      toast({
        title: "Error",
        description: error.message || "Error al cargar datos",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

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

if (!formData.persona_id) {
      toast({
        title: "Error",
        description: "Debe seleccionar una persona",
        variant: "destructive",
      })
      return
    }

try {
      if (editingEmpleado) {
        await empleadosService.update(editingEmpleado.id, formData)
        toast({ title: "Éxito", description: "Empleado actualizado correctamente" })
      } else {
        await empleadosService.create(formData)
        toast({ title: "Éxito", description: "Empleado registrado correctamente" })
      }

setDialogOpen(false)
      resetForm()
      loadData()
    } catch (error: any) {
      console.error("[v0] EmpleadosCrud: Error submitting", error)
      toast({
        title: "Error",
        description: error.message || "Error al guardar empleado",
        variant: "destructive",
      })
    }
  }

const handleEdit = (empleado: Empleado) => {
    setEditingEmpleado(empleado)
    setFormData({
      persona_id: empleado.persona_id,
      cargo: empleado.cargo,
      area: empleado.area,
      sueldo: empleado.sueldo || 0,
      fecha_ingreso: empleado.fecha_ingreso || new Date().toISOString().split("T")[0],
      fecha_salida: empleado.fecha_salida || "",
      estado: empleado.estado,
    })
    setDialogOpen(true)
  }

const handleDelete = async (id: number) => {
    if (!confirm("¿Está seguro de eliminar este empleado?")) return

try {
      await empleadosService.delete(id)
      toast({ title: "Éxito", description: "Empleado eliminado correctamente" })
      loadData()
    } catch (error: any) {
      console.error("[v0] EmpleadosCrud: Error deleting", error)
      toast({
        title: "Error",
        description: error.message || "Error al eliminar empleado",
        variant: "destructive",
      })
    }
  }

const handleChangeEstado = async (id: number, estado: "activo" | "inactivo") => {
    try {
      await empleadosService.updateEstado(id, estado)
      toast({ title: "Éxito", description: "Estado actualizado correctamente" })
      loadData()
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Error al cambiar estado",
        variant: "destructive",
      })
    }
  }

const resetForm = () => {
    setEditingEmpleado(null)
    setFormData({
      persona_id: 0,
      cargo: "",
      area: "administrativo",
      sueldo: 0,
      fecha_ingreso: new Date().toISOString().split("T")[0],
      fecha_salida: "",
      estado: "activo",
    })
  }

const empleadosFiltrados = empleados.filter((emp) => {
    const matchesBusqueda =
      emp.persona_nombre?.toLowerCase().includes(busqueda.toLowerCase()) ||
      emp.cargo?.toLowerCase().includes(busqueda.toLowerCase()) ||
      emp.area?.toLowerCase().includes(busqueda.toLowerCase())

const matchesEstado = filtroEstado === "todos" || emp.estado === filtroEstado
    const matchesArea = filtroArea === "todos" || emp.area === filtroArea

return matchesBusqueda && matchesEstado && matchesArea
  })

const stats = {
    total: empleados.length,
    activos: empleados.filter((e) => e.estado === "activo").length,
    inactivos: empleados.filter((e) => e.estado === "inactivo").length,
    sueldoTotal: empleados.filter((e) => e.estado === "activo").reduce((sum, e) => sum + (e.sueldo || 0), 0),
  }

const getEstadoBadge = (estado: string) => {
    return estado === "activo" ? (
      <Badge className="bg-green-100 text-green-800 border-green-200">Activo</Badge>
    ) : (
      <Badge className="bg-red-100 text-red-800 border-red-200">Inactivo</Badge>
    )
  }

const getAreaBadge = (area: string) => {
    const colors = {
      administrativo: "bg-blue-100 text-blue-800 border-blue-200",
      campo: "bg-green-100 text-green-800 border-green-200",
      planta: "bg-purple-100 text-purple-800 border-purple-200",
      ventas: "bg-orange-100 text-orange-800 border-orange-200",
    }
    return <Badge className={colors[area as keyof typeof colors] || ""}>{area}</Badge>
  }

return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold">Gestión de Empleados</h2>
          <p className="text-sm text-muted-foreground">Administración completa de personal</p>
        </div>
        <Button
          onClick={() => {
            resetForm()
            setDialogOpen(true)
          }}
        >
          <Plus className="h-4 w-4 mr-2" />
          Nuevo Empleado
        </Button>
      </div>

{/* Statistics */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Empleados</p>
                <p className="text-2xl font-bold">{stats.total}</p>
              </div>
              <Users className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Activos</p>
                <p className="text-2xl font-bold text-green-600">{stats.activos}</p>
              </div>
              <UserCheck className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Inactivos</p>
                <p className="text-2xl font-bold text-red-600">{stats.inactivos}</p>
              </div>
              <UserX className="h-8 w-8 text-red-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Sueldos Totales</p>
                <p className="text-2xl font-bold">S/ {stats.sueldoTotal.toFixed(2)}</p>
              </div>
              <DollarSign className="h-8 w-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <div className="flex flex-wrap gap-3">
        <div className="relative flex-1 min-w-[200px]">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar por nombre, cargo o área..."
            value={busqueda}
            onChange={(e) => setBusqueda(e.target.value)}
            className="pl-10"
          />
        </div>

<Select value={filtroEstado} onValueChange={setFiltroEstado}>
          <SelectTrigger className="w-[150px]">
            <SelectValue placeholder="Estado" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="todos">Todos</SelectItem>
            <SelectItem value="activo">Activo</SelectItem>
            <SelectItem value="inactivo">Inactivo</SelectItem>
          </SelectContent>
        </Select>

<Select value={filtroArea} onValueChange={setFiltroArea}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Área" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="todos">Todas las áreas</SelectItem>
            <SelectItem value="administrativo">Administrativo</SelectItem>
            <SelectItem value="campo">Campo</SelectItem>
            <SelectItem value="planta">Planta</SelectItem>
            <SelectItem value="ventas">Ventas</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Table */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Empleados ({empleadosFiltrados.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Nombre Completo</TableHead>
                <TableHead>Cargo</TableHead>
                <TableHead>Área</TableHead>
                <TableHead>Sueldo</TableHead>
                <TableHead>Fecha Ingreso</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {empleadosFiltrados.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-8">
                    <AlertCircle className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
                    <p className="text-muted-foreground">No se encontraron empleados</p>
                  </TableCell>
                </TableRow>
              ) : (
                empleadosFiltrados.map((empleado) => (
                  <TableRow key={empleado.id}>
                    <TableCell className="font-medium">{empleado.id}</TableCell>
                    <TableCell>{empleado.persona_nombre}</TableCell>
                    <TableCell>{empleado.cargo}</TableCell>
                    <TableCell>{getAreaBadge(empleado.area)}</TableCell>
                    <TableCell>S/ {(empleado.sueldo || 0).toFixed(2)}</TableCell>
                    <TableCell>{empleado.fecha_ingreso}</TableCell>
                    <TableCell>
                      <Select
                        value={empleado.estado}
                        onValueChange={(value) => handleChangeEstado(empleado.id, value as "activo" | "inactivo")}
                      >
                        <SelectTrigger className="w-[120px]">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="activo">Activo</SelectItem>
                          <SelectItem value="inactivo">Inactivo</SelectItem>
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleEdit(empleado)}>
                          <Edit className="h-3 w-3" />
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          className="text-red-600 hover:text-red-700 bg-transparent"
                          onClick={() => handleDelete(empleado.id)}
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingEmpleado ? "Editar Empleado" : "Nuevo Empleado"}</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              {/* Persona Combobox */}
              <div className="col-span-2">
                <Label>Persona *</Label>
                <Popover open={openPersonaCombo} onOpenChange={setOpenPersonaCombo}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={openPersonaCombo}
                      className="w-full justify-between bg-transparent"
                    >
                      {formData.persona_id
                        ? personas.find((p) => p.id === formData.persona_id)?.nombre_completo ||
                          `${personas.find((p) => p.id === formData.persona_id)?.nombres} ${personas.find((p) => p.id === formData.persona_id)?.apellidos}`
                        : "Seleccionar persona..."}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput placeholder="Buscar persona..." />
                      <CommandList>
                        <CommandEmpty>No se encontraron personas.</CommandEmpty>
                        <CommandGroup>
                          {personas.map((persona) => (
                            <CommandItem
                              key={persona.id}
                              value={`${persona.nombre_completo || `${persona.nombres} ${persona.apellidos}`} ${persona.dni || persona.documento_identidad || ""}`}
                              onSelect={() => {
                                setFormData({ ...formData, persona_id: persona.id })
                                setOpenPersonaCombo(false)
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  formData.persona_id === persona.id ? "opacity-100" : "opacity-0",
                                )}
                              />
                              {persona.nombre_completo || `${persona.nombres} ${persona.apellidos}`}
                              {(persona.dni || persona.documento_identidad) && (
                                <span className="ml-2 text-xs text-muted-foreground">
                                  DNI: {persona.dni || persona.documento_identidad}
                                </span>
                              )}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

<div>
                <Label htmlFor="cargo">Cargo *</Label>
                <Input
                  id="cargo"
                  value={formData.cargo}
                  onChange={(e) => setFormData({ ...formData, cargo: e.target.value })}
                  required
                  placeholder="Ej: Gerente, Operario, etc."
                />
              </div>

<div>
                <Label htmlFor="area">Área *</Label>
                <Select
                  value={formData.area}
                  onValueChange={(value) => setFormData({ ...formData, area: value as any })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="administrativo">Administrativo</SelectItem>
                    <SelectItem value="campo">Campo</SelectItem>
                    <SelectItem value="planta">Planta</SelectItem>
                    <SelectItem value="ventas">Ventas</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="sueldo">Sueldo (S/)</Label>
                <Input
                  id="sueldo"
                  type="number"
                  step="0.01"
                  value={formData.sueldo}
                  onChange={(e) => setFormData({ ...formData, sueldo: Number.parseFloat(e.target.value) || 0 })}
                  placeholder="0.00"
                />
              </div>

<div>
                <Label htmlFor="fecha_ingreso">Fecha de Ingreso *</Label>
                <Input
                  id="fecha_ingreso"
                  type="date"
                  value={formData.fecha_ingreso}
                  onChange={(e) => setFormData({ ...formData, fecha_ingreso: e.target.value })}
                  required
                />
              </div>

<div>
                <Label htmlFor="fecha_salida">Fecha de Salida (opcional)</Label>
                <Input
                  id="fecha_salida"
                  type="date"
                  value={formData.fecha_salida}
                  onChange={(e) => setFormData({ ...formData, fecha_salida: e.target.value })}
                />
              </div>

<div>
                <Label htmlFor="estado">Estado *</Label>
                <Select
                  value={formData.estado}
                  onValueChange={(value) => setFormData({ ...formData, estado: value as any })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="activo">Activo</SelectItem>
                    <SelectItem value="inactivo">Inactivo</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<DialogFooter>
              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                Cancelar
              </Button>
              <Button type="submit">{editingEmpleado ? "Actualizar" : "Registrar"}</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/empleados/page.tsx"
import { EmpleadosCrud } from "@/components/empleados-crud"

export default function EmpleadosPage() {
  return (
    <div className="container mx-auto p-6">
      <EmpleadosCrud />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="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,
  ShoppingBag,
} 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: "Pedidos - CRUD",
        href: "/pedidos-crud",
        icon: ShoppingBag,
      },
    ],
  },
  {
    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,
      },
      {
        title: "Gestión de Empleados",
        href: "/empleados",
        icon: Users,
      },
    ],
  },
]

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>
  )
}11b:T16c5b2,[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"