90:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/38t7_sa142ds_.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1jkz0lyy8bl73.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/38t7_sa142ds_.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1jkz0lyy8bl73.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_Gzt6vkPnHR6Kzhv9m49LZX53UTY9"],"SWRDataProvider"] 92:T1a7c2,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { LoginForm } from "@/components/login-form" export default function Home() { return (

Piria Digital

Panel de Administración

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle } from "lucide-react" export function LoginForm() { const router = useRouter() const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Simulación de autenticación setTimeout(() => { if (username === "admin" && password === "admin") { router.push("/admin/dashboard") } else { setError("Usuario o contraseña incorrectos") setIsLoading(false) } }, 1000) } return ( Iniciar Sesión ) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" import type React from "react" import { Sidebar } from "@/components/sidebar" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isMerged="true" import { DashboardCards } from "@/components/dashboard/dashboard-cards" import { DashboardChart } from "@/components/dashboard/dashboard-chart" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function DashboardPage() { return (

Dashboard

Resumen general de la empresa

Resumen Financiero Visualización de ingresos, egresos, caja y mensualidad activa

) } [V0_FILE]typescriptreact:file="components/dashboard/dashboard-cards.tsx" isMerged="true" "use client" import type React from "react" 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 { DollarSign, TrendingDown, Wallet, Calendar, Pencil, Check } from "lucide-react" type CardData = { title: string value: string icon: React.ElementType description: string } export function DashboardCards() { const [isEditing, setIsEditing] = useState(null) const [cardData, setCardData] = useState([ { title: "Ingreso Total", value: "$120,000", icon: DollarSign, description: "Ingresos acumulados", }, { title: "Egreso Total", value: "$45,000", icon: TrendingDown, description: "Gastos acumulados", }, { title: "Saldo en Caja", value: "$75,000", icon: Wallet, description: "Balance actual", }, { title: "Ingreso Mensual Activo", value: "$15,000", icon: Calendar, description: "Ingresos recurrentes", }, ]) const [editValue, setEditValue] = useState("") const handleEdit = (index: number) => { setIsEditing(index) setEditValue(cardData[index].value) } const handleSave = (index: number) => { const newCardData = [...cardData] newCardData[index].value = editValue setCardData(newCardData) setIsEditing(null) } return (

{cardData.map((card, index) => ( {card.title}

{isEditing === index ? (

setEditValue(e.target.value)} className="h-8 w-24" />

) : ( <>

{card.value}

)}

{card.description}

))}

) } [V0_FILE]typescriptreact:file="components/dashboard/dashboard-chart.tsx" isMerged="true" "use client" import { useState } from "react" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" 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" export function DashboardChart() { const [chartData, setChartData] = useState([ { name: "Ene", ingresos: 12000, egresos: 4500, caja: 7500, mensual: 15000, }, { name: "Feb", ingresos: 14000, egresos: 5000, caja: 9000, mensual: 15000, }, { name: "Mar", ingresos: 15000, egresos: 5500, caja: 9500, mensual: 15000, }, { name: "Abr", ingresos: 16000, egresos: 6000, caja: 10000, mensual: 16000, }, { name: "May", ingresos: 18000, egresos: 6500, caja: 11500, mensual: 16000, }, { name: "Jun", ingresos: 20000, egresos: 7000, caja: 13000, mensual: 16000, }, ]) const [selectedMonth, setSelectedMonth] = useState(null) const [editData, setEditData] = useState({ ingresos: 0, egresos: 0, caja: 0, mensual: 0, }) const [isDialogOpen, setIsDialogOpen] = useState(false) const handleEdit = (index: number) => { setSelectedMonth(index) setEditData({ ingresos: chartData[index].ingresos, egresos: chartData[index].egresos, caja: chartData[index].caja, mensual: chartData[index].mensual, }) setIsDialogOpen(true) } const handleSave = () => { if (selectedMonth !== null) { const newChartData = [...chartData] newChartData[selectedMonth] = { ...newChartData[selectedMonth], ...editData, } setChartData(newChartData) setIsDialogOpen(false) } } return (

{chartData.map((month, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/admin/clientes/page.tsx" isMerged="true" import { ClientesTable } from "@/components/clientes/clientes-table" import { ClientesHeader } from "@/components/clientes/clientes-header" export default function ClientesPage() { return (

Gestión de Clientes

Administra la información de tus clientes

) } [V0_FILE]typescriptreact:file="app/admin/clientes/[id]/page.tsx" isMerged="true" import { ClienteDetail } from "@/components/clientes/cliente-detail" export default function ClienteDetailPage({ params }: { params: { id: string } }) { return (

Detalle de Cliente

Información completa del cliente

) } [V0_FILE]typescriptreact:file="app/admin/gastos/page.tsx" isMerged="true" import { GastosHeader } from "@/components/gastos/gastos-header" import { GastosTable } from "@/components/gastos/gastos-table" export default function GastosPage() { return (

Gestión de Gastos

Administra los egresos de la agencia

) } [V0_FILE]typescriptreact:file="components/gastos/gastos-header.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { GastoForm } from "./gasto-form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" export function GastosHeader() { const [isDialogOpen, setIsDialogOpen] = useState(false) return (

Mes

Categoría

) } [V0_FILE]typescriptreact:file="components/gastos/gasto-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" interface GastoFormProps { gasto?: any onSuccess: () => void } export function GastoForm({ gasto, onSuccess }: GastoFormProps) { const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulación de guardado setTimeout(() => { setIsLoading(false) onSuccess() }, 1000) } return (

Categoría

Descripción

</div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="monto">Monto</Label>
          <Input id="monto" type="number" defaultValue={gasto?.monto || ""} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="fecha">Fecha</Label>
          <Input
            id="fecha"
            type="date"
            defaultValue={gasto?.fecha || new Date().toISOString().split("T")[0]}
            required
          />
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="responsable">Responsable (opcional)</Label>
        <Input id="responsable" defaultValue={gasto?.responsable || ""} />
      </div>

<div className="flex justify-end">
        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Guardando..." : "Guardar Gasto"}
        </Button>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="components/gastos/gastos-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { GastoForm } from "./gasto-form"
import { Badge } from "@/components/ui/badge"
import { Edit, Trash2 } from "lucide-react"

// Datos de ejemplo
const gastosData = [
  {
    id: 1,
    categoria: "servicios",
    categoriaLabel: "Servicios",
    descripcion: "Alquiler de oficina",
    monto: 80000,
    fecha: "2023-11-05",
    responsable: "María González",
  },
  {
    id: 2,
    categoria: "sueldos",
    categoriaLabel: "Sueldos",
    descripcion: "Pago a diseñador freelance",
    monto: 45000,
    fecha: "2023-11-10",
    responsable: "Juan Pérez",
  },
  {
    id: 3,
    categoria: "software",
    categoriaLabel: "Software",
    descripcion: "Suscripción Adobe Creative Cloud",
    monto: 15000,
    fecha: "2023-11-15",
    responsable: "",
  },
  {
    id: 4,
    categoria: "impuestos",
    categoriaLabel: "Impuestos",
    descripcion: "Pago de IVA",
    monto: 35000,
    fecha: "2023-11-20",
    responsable: "María González",
  },
  {
    id: 5,
    categoria: "otros",
    categoriaLabel: "Otros",
    descripcion: "Insumos de oficina",
    monto: 5000,
    fecha: "2023-11-25",
    responsable: "Carlos Rodríguez",
  },
]

export function GastosTable() {
  const [gastos, setGastos] = useState(gastosData)
  const [selectedGasto, setSelectedGasto] = useState<any>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

const handleEdit = (gasto: any) => {
    setSelectedGasto(gasto)
    setIsDialogOpen(true)
  }

const handleDelete = (id: number) => {
    if (window.confirm("¿Estás seguro de que deseas eliminar este gasto?")) {
      setGastos(gastos.filter((gasto) => gasto.id !== id))
    }
  }

const formatDate = (dateString: string) => {
    if (!dateString) return "-"
    const date = new Date(dateString)
    return date.toLocaleDateString("es-AR")
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("es-AR", {
      style: "currency",
      currency: "ARS",
    }).format(value)
  }

const getCategoriaLabel = (categoria: string) => {
    const categorias: Record<string, string> = {
      servicios: "Servicios",
      sueldos: "Sueldos",
      impuestos: "Impuestos",
      software: "Software",
      otros: "Otros",
    }
    return categorias[categoria] || categoria
  }

const getCategoriaColor = (categoria: string) => {
    const colores: Record<string, string> = {
      servicios: "default",
      sueldos: "secondary",
      impuestos: "destructive",
      software: "blue",
      otros: "orange",
    }
    return colores[categoria] || "default"
  }

return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Categoría</TableHead>
              <TableHead>Descripción</TableHead>
              <TableHead>Monto</TableHead>
              <TableHead className="hidden md:table-cell">Fecha</TableHead>
              <TableHead className="hidden lg:table-cell">Responsable</TableHead>
              <TableHead className="text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {gastos.map((gasto) => (
              <TableRow key={gasto.id}>
                <TableCell>
                  <Badge variant={getCategoriaColor(gasto.categoria) as any}>{gasto.categoriaLabel}</Badge>
                </TableCell>
                <TableCell className="font-medium">{gasto.descripcion}</TableCell>
                <TableCell>{formatCurrency(gasto.monto)}</TableCell>
                <TableCell className="hidden md:table-cell">{formatDate(gasto.fecha)}</TableCell>
                <TableCell className="hidden lg:table-cell">{gasto.responsable || "-"}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button variant="ghost" size="icon" onClick={() => handleEdit(gasto)}>
                      <Edit className="h-4 w-4" />
                      <span className="sr-only">Editar</span>
                    </Button>
                    <Button variant="ghost" size="icon" onClick={() => handleDelete(gasto.id)}>
                      <Trash2 className="h-4 w-4" />
                      <span className="sr-only">Eliminar</span>
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Editar Gasto</DialogTitle>
          </DialogHeader>
          <GastoForm gasto={selectedGasto} onSuccess={() => setIsDialogOpen(false)} />
        </DialogContent>
      </Dialog>
    </>
  )
}

[V0_FILE]typescriptreact:file="app/admin/reportes/page.tsx" isMerged="true"
export default function ReportesPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Reportes</h1>
        <p className="text-muted-foreground">Visualiza reportes y estadísticas de la agencia</p>
      </div>

<div className="rounded-md border p-8 text-center">
        <h2 className="text-xl font-semibold mb-2">Módulo en Desarrollo</h2>
        <p className="text-muted-foreground">Esta sección estará disponible próximamente.</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/configuracion/page.tsx" isMerged="true"
export default function ConfiguracionPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Configuración</h1>
        <p className="text-muted-foreground">Administra la configuración de la aplicación</p>
      </div>

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

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { PlusCircle } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ClienteForm } from "./cliente-form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export function ClientesHeader() {
  const [isDialogOpen, setIsDialogOpen] = useState(false)

return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
        <div className="space-y-2">
          <Label htmlFor="estado">Estado</Label>
          <Select defaultValue="todos">
            <SelectTrigger id="estado">
              <SelectValue placeholder="Seleccionar estado" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="activo">Activo</SelectItem>
              <SelectItem value="inactivo">Inactivo</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="servicio">Servicio</Label>
          <Select defaultValue="todos">
            <SelectTrigger id="servicio">
              <SelectValue placeholder="Seleccionar servicio" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="marketing">Marketing Digital</SelectItem>
              <SelectItem value="desarrollo">Desarrollo Web</SelectItem>
              <SelectItem value="diseno">Diseño Gráfico</SelectItem>
              <SelectItem value="seo">SEO</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="pago">Estado de Pago</Label>
          <Select defaultValue="todos">
            <SelectTrigger id="pago">
              <SelectValue placeholder="Estado de pago" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="proximos">Pagos Próximos</SelectItem>
              <SelectItem value="demorados">Pagos Demorados</SelectItem>
              <SelectItem value="aldia">Al Día</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogTrigger asChild>
          <Button>
            <PlusCircle className="mr-2 h-4 w-4" />
            Agregar Cliente
          </Button>
        </DialogTrigger>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Agregar Nuevo Cliente</DialogTitle>
          </DialogHeader>
          <ClienteForm onSuccess={() => setIsDialogOpen(false)} />
        </DialogContent>
      </Dialog>
    </div>
  )
}

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

import Link from "next/link"
import { usePathname } from "next/navigation"
import { BarChart3, Users, DollarSign, FileText, Settings, LogOut, UserCircle } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const menuItems = [
  {
    title: "Dashboard",
    href: "/admin/dashboard",
    icon: BarChart3,
  },
  {
    title: "Clientes",
    href: "/admin/clientes",
    icon: Users,
  },
  {
    title: "Personal",
    href: "/admin/personal",
    icon: UserCircle,
  },
  {
    title: "Gastos",
    href: "/admin/gastos",
    icon: DollarSign,
  },
  {
    title: "Reportes",
    href: "/admin/reportes",
    icon: FileText,
  },
  {
    title: "Configuración",
    href: "/admin/configuracion",
    icon: Settings,
  },
]

export function Sidebar() {
  const pathname = usePathname()

return (
    <div className="flex h-screen w-64 flex-col border-r bg-white">
      <div className="flex h-14 items-center border-b px-4">
        <h2 className="text-lg font-semibold">Piria Digital</h2>
      </div>
      <div className="flex-1 overflow-auto py-2">
        <nav className="grid gap-1 px-2">
          {menuItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium",
                pathname === item.href
                  ? "bg-gray-100 text-gray-900"
                  : "text-gray-500 hover:bg-gray-100 hover:text-gray-900",
              )}
            >
              <item.icon className="h-5 w-5" />
              {item.title}
            </Link>
          ))}
        </nav>
      </div>
      <div className="border-t p-4">
        <Button variant="outline" className="w-full justify-start" asChild>
          <Link href="/">
            <LogOut className="mr-2 h-4 w-4" />
            Cerrar Sesión
          </Link>
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/personal/page.tsx" isMerged="true"
import { PersonalHeader } from "@/components/personal/personal-header"
import { PersonalTable } from "@/components/personal/personal-table"
import { PersonalDashboard } from "@/components/personal/personal-dashboard"

export default function PersonalPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Gestión de Personal</h1>
        <p className="text-muted-foreground">Administra y visualiza el rendimiento de tu equipo</p>
      </div>

<PersonalHeader />
      <PersonalTable />
      <PersonalDashboard />
    </div>
  )
}

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

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { PlusCircle } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ColaboradorForm } from "./colaborador-form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export function PersonalHeader() {
  const [isDialogOpen, setIsDialogOpen] = useState(false)

return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="colaborador">Colaborador</Label>
          <Select defaultValue="todos">
            <SelectTrigger id="colaborador">
              <SelectValue placeholder="Seleccionar colaborador" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="ana">Ana Martínez</SelectItem>
              <SelectItem value="luis">Luis Gómez</SelectItem>
              <SelectItem value="sofia">Sofía Rodríguez</SelectItem>
              <SelectItem value="diego">Diego Fernández</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="servicio">Tipo de Servicio</Label>
          <Select defaultValue="todos">
            <SelectTrigger id="servicio">
              <SelectValue placeholder="Seleccionar servicio" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              <SelectItem value="marketing">Marketing Digital</SelectItem>
              <SelectItem value="desarrollo">Desarrollo Web</SelectItem>
              <SelectItem value="diseno">Diseño Gráfico</SelectItem>
              <SelectItem value="seo">SEO</SelectItem>
              <SelectItem value="cm">Community Management</SelectItem>
              <SelectItem value="paid">Paid Media</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogTrigger asChild>
          <Button>
            <PlusCircle className="mr-2 h-4 w-4" />
            Agregar Colaborador
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Agregar Nuevo Colaborador</DialogTitle>
          </DialogHeader>
          <ColaboradorForm onSuccess={() => setIsDialogOpen(false)} />
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/personal/colaborador-form.tsx" isMerged="true"
"use client"

import type React from "react"

interface ColaboradorFormProps {
  colaborador?: any
  onSuccess: () => void
}

export function ColaboradorForm({ colaborador, onSuccess }: ColaboradorFormProps) {
  const [isLoading, setIsLoading] = useState(false)

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

// Simulación de guardado
    setTimeout(() => {
      setIsLoading(false)
      onSuccess()
    }, 1000)
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4 py-4">
      <div className="space-y-2">
        <Label htmlFor="nombre">Nombre Completo</Label>
        <Input id="nombre" defaultValue={colaborador?.nombre || ""} required />
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" defaultValue={colaborador?.email || ""} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="telefono">Teléfono</Label>
          <Input id="telefono" defaultValue={colaborador?.telefono || ""} required />
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="sueldo">Sueldo Mensual</Label>
        <Input id="sueldo" type="number" defaultValue={colaborador?.sueldo || ""} required />
      </div>

<div className="space-y-2">
        <Label htmlFor="especialidad">Especialidad</Label>
        <Input id="especialidad" defaultValue={colaborador?.especialidad || ""} required />
      </div>

<div className="space-y-2">
        <Label htmlFor="notas">Notas Adicionales</Label>
        <Textarea id="notas" defaultValue={colaborador?.notas || ""} rows={3} />
      </div>

<div className="flex justify-end">
        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Guardando..." : "Guardar Colaborador"}
        </Button>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="components/personal/personal-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ColaboradorForm } from "./colaborador-form"
import { Badge } from "@/components/ui/badge"
import { Edit, ExternalLink } from "lucide-react"
import { Input } from "@/components/ui/input"

// Datos de ejemplo
const colaboradoresData = [
  {
    id: 1,
    nombre: "Ana Martínez",
    email: "ana@piriadigital.com",
    telefono: "+54 11 1234-5678",
    especialidad: "Marketing Digital",
    sueldo: 120000,
    servicios: [
      { cliente: "Empresa A", tipo: "Marketing Digital", valor: 50000 },
      { cliente: "Empresa B", tipo: "Community Management", valor: 35000 },
      { cliente: "Empresa C", tipo: "Paid Media", valor: 40000 },
    ],
  },
  {
    id: 2,
    nombre: "Luis Gómez",
    email: "luis@piriadigital.com",
    telefono: "+54 11 2345-6789",
    especialidad: "Desarrollo Web",
    sueldo: 150000,
    servicios: [
      { cliente: "Empresa B", tipo: "Desarrollo Web", valor: 75000 },
      { cliente: "Empresa D", tipo: "Desarrollo Web", valor: 80000 },
    ],
  },
  {
    id: 3,
    nombre: "Sofía Rodríguez",
    email: "sofia@piriadigital.com",
    telefono: "+54 11 3456-7890",
    especialidad: "Diseño Gráfico",
    sueldo: 100000,
    servicios: [
      { cliente: "Empresa A", tipo: "Diseño Gráfico", valor: 40000 },
      { cliente: "Empresa C", tipo: "Diseño Gráfico", valor: 35000 },
      { cliente: "Empresa E", tipo: "Diseño Gráfico", valor: 30000 },
    ],
  },
  {
    id: 4,
    nombre: "Diego Fernández",
    email: "diego@piriadigital.com",
    telefono: "+54 11 4567-8901",
    especialidad: "SEO",
    sueldo: 110000,
    servicios: [
      { cliente: "Empresa B", tipo: "SEO", valor: 45000 },
      { cliente: "Empresa D", tipo: "SEO", valor: 50000 },
    ],
  },
]

export function PersonalTable() {
  const router = useRouter()
  const [colaboradores, setColaboradores] = useState(colaboradoresData)
  const [selectedColaborador, setSelectedColaborador] = useState<any>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingSueldoId, setEditingSueldoId] = useState<number | null>(null)
  const [editingSueldo, setEditingSueldo] = useState("")

const handleEdit = (colaborador: any) => {
    setSelectedColaborador(colaborador)
    setIsDialogOpen(true)
  }

const handleRowClick = (id: number) => {
    router.push(`/admin/personal/${id}`)
  }

const handleEditSueldo = (id: number, sueldo: number) => {
    setEditingSueldoId(id)
    setEditingSueldo(sueldo.toString())
  }

const handleSaveSueldo = (id: number) => {
    const updatedColaboradores = colaboradores.map((colaborador) => {
      if (colaborador.id === id) {
        return { ...colaborador, sueldo: Number.parseInt(editingSueldo) }
      }
      return colaborador
    })
    setColaboradores(updatedColaboradores)
    setEditingSueldoId(null)
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("es-AR", {
      style: "currency",
      currency: "ARS",
    }).format(value)
  }

const calcularTotalGenerado = (servicios: any[]) => {
    return servicios.reduce((total, servicio) => total + servicio.valor, 0)
  }

const calcularUtilidad = (totalGenerado: number, sueldo: number) => {
    return totalGenerado - sueldo
  }

return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Colaborador</TableHead>
              <TableHead>Servicios Asignados</TableHead>
              <TableHead className="text-center">Cantidad</TableHead>
              <TableHead>Sueldo Mensual</TableHead>
              <TableHead>Total Generado</TableHead>
              <TableHead>Utilidad</TableHead>
              <TableHead className="text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {colaboradores.map((colaborador) => {
              const totalGenerado = calcularTotalGenerado(colaborador.servicios)
              const utilidad = calcularUtilidad(totalGenerado, colaborador.sueldo)

return (
                <TableRow
                  key={colaborador.id}
                  className="cursor-pointer"
                  onClick={() => handleRowClick(colaborador.id)}
                >
                  <TableCell className="font-medium">{colaborador.nombre}</TableCell>
                  <TableCell>
                    <div className="max-h-20 overflow-auto">
                      {colaborador.servicios.map((servicio, index) => (
                        <div key={index} className="mb-1 text-sm">
                          <Badge variant="outline" className="mr-1">
                            {servicio.tipo}
                          </Badge>
                          {servicio.cliente}
                        </div>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell className="text-center">{colaborador.servicios.length}</TableCell>
                  <TableCell>
                    {editingSueldoId === colaborador.id ? (
                      <div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
                        <Input
                          value={editingSueldo}
                          onChange={(e) => setEditingSueldo(e.target.value)}
                          className="h-8 w-24"
                        />
                        <Button size="sm" variant="ghost" onClick={() => handleSaveSueldo(colaborador.id)}>
                          Guardar
                        </Button>
                      </div>
                    ) : (
                      <div
                        className="flex items-center space-x-2"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleEditSueldo(colaborador.id, colaborador.sueldo)
                        }}
                      >
                        {formatCurrency(colaborador.sueldo)}
                        <Button size="sm" variant="ghost">
                          <Edit className="h-3 w-3" />
                        </Button>
                      </div>
                    )}
                  </TableCell>
                  <TableCell>{formatCurrency(totalGenerado)}</TableCell>
                  <TableCell>
                    <span className={utilidad < 0 ? "text-red-500" : "text-green-500"}>{formatCurrency(utilidad)}</span>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2" onClick={(e) => e.stopPropagation()}>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleEdit(colaborador)
                        }}
                      >
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Editar</span>
                      </Button>
                      <Button variant="ghost" size="icon" asChild>
                        <a href={`/admin/personal/${colaborador.id}`} target="_blank" rel="noreferrer">
                          <ExternalLink className="h-4 w-4" />
                          <span className="sr-only">Ver detalle</span>
                        </a>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Editar Colaborador</DialogTitle>
          </DialogHeader>
          <ColaboradorForm colaborador={selectedColaborador} onSuccess={() => setIsDialogOpen(false)} />
        </DialogContent>
      </Dialog>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/personal/personal-dashboard.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
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 {
  Bar,
  BarChart,
  Line,
  LineChart,
  Pie,
  PieChart,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"

// Datos de ejemplo
const colaboradoresData = [
  {
    id: 1,
    nombre: "Ana Martínez",
    sueldo: 120000,
    servicios: [
      { cliente: "Empresa A", tipo: "Marketing Digital", valor: 50000 },
      { cliente: "Empresa B", tipo: "Community Management", valor: 35000 },
      { cliente: "Empresa C", tipo: "Paid Media", valor: 40000 },
    ],
  },
  {
    id: 2,
    nombre: "Luis Gómez",
    sueldo: 150000,
    servicios: [
      { cliente: "Empresa B", tipo: "Desarrollo Web", valor: 75000 },
      { cliente: "Empresa D", tipo: "Desarrollo Web", valor: 80000 },
    ],
  },
  {
    id: 3,
    nombre: "Sofía Rodríguez",
    sueldo: 100000,
    servicios: [
      { cliente: "Empresa A", tipo: "Diseño Gráfico", valor: 40000 },
      { cliente: "Empresa C", tipo: "Diseño Gráfico", valor: 35000 },
      { cliente: "Empresa E", tipo: "Diseño Gráfico", valor: 30000 },
    ],
  },
  {
    id: 4,
    nombre: "Diego Fernández",
    sueldo: 110000,
    servicios: [
      { cliente: "Empresa B", tipo: "SEO", valor: 45000 },
      { cliente: "Empresa D", tipo: "SEO", valor: 50000 },
    ],
  },
]

// Colores para los gráficos
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"]

export function PersonalDashboard() {
  const [selectedColaborador, setSelectedColaborador] = useState("todos")

// Preparar datos para los gráficos
  const prepararDatosBarras = () => {
    if (selectedColaborador === "todos") {
      return colaboradoresData.map((col) => ({
        nombre: col.nombre,
        cantidad: col.servicios.length,
        total: col.servicios.reduce((sum, s) => sum + s.valor, 0),
        sueldo: col.sueldo,
      }))
    } else {
      const col = colaboradoresData.find((c) => c.id.toString() === selectedColaborador)
      if (!col) return []
      return [
        {
          nombre: col.nombre,
          cantidad: col.servicios.length,
          total: col.servicios.reduce((sum, s) => sum + s.valor, 0),
          sueldo: col.sueldo,
        },
      ]
    }
  }

const prepararDatosPie = () => {
    if (selectedColaborador === "todos") {
      // Agrupar todos los servicios por tipo
      const serviciosPorTipo: Record<string, number> = {}
      colaboradoresData.forEach((col) => {
        col.servicios.forEach((serv) => {
          if (serviciosPorTipo[serv.tipo]) {
            serviciosPorTipo[serv.tipo] += 1
          } else {
            serviciosPorTipo[serv.tipo] = 1
          }
        })
      })

return Object.entries(serviciosPorTipo).map(([name, value]) => ({ name, value }))
    } else {
      const col = colaboradoresData.find((c) => c.id.toString() === selectedColaborador)
      if (!col) return []

const serviciosPorTipo: Record<string, number> = {}
      col.servicios.forEach((serv) => {
        if (serviciosPorTipo[serv.tipo]) {
          serviciosPorTipo[serv.tipo] += 1
        } else {
          serviciosPorTipo[serv.tipo] = 1
        }
      })

return Object.entries(serviciosPorTipo).map(([name, value]) => ({ name, value }))
    }
  }

const datosBarras = prepararDatosBarras()
  const datosPie = prepararDatosPie()

return (
    <Card>
      <CardHeader>
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
          <div>
            <CardTitle>Dashboard de Rendimiento</CardTitle>
            <CardDescription>Análisis visual del rendimiento de colaboradores</CardDescription>
          </div>
          <div className="mt-4 sm:mt-0 w-full sm:w-64">
            <Select value={selectedColaborador} onValueChange={setSelectedColaborador}>
              <SelectTrigger>
                <SelectValue placeholder="Seleccionar colaborador" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los colaboradores</SelectItem>
                {colaboradoresData.map((col) => (
                  <SelectItem key={col.id} value={col.id.toString()}>
                    {col.nombre}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="barras">
          <TabsList className="mb-4">
            <TabsTrigger value="barras">Servicios y Generación</TabsTrigger>
            <TabsTrigger value="pie">Distribución por Tipo</TabsTrigger>
            <TabsTrigger value="comparativa">Comparativa</TabsTrigger>
          </TabsList>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {datosBarras.map((dato, index) => (
                <Card key={index} className={dato.total < dato.sueldo ? "border-red-300" : "border-green-300"}>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">{dato.nombre}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span>Servicios:</span>
                        <span className="font-medium">{dato.cantidad}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Genera:</span>
                        <span className="font-medium">${dato.total.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Sueldo:</span>
                        <span className="font-medium">${dato.sueldo.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Utilidad:</span>
                        <span className={`font-medium ${dato.total < dato.sueldo ? "text-red-500" : "text-green-500"}`}>
                          ${(dato.total - dato.sueldo).toLocaleString()}
                        </span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="pie">
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={datosPie}
                    cx="50%"
                    cy="50%"
                    labelLine={true}
                    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    outerRadius={150}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {datosPie.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(value) => [`${value} servicios`, "Cantidad"]} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>

<TabsContent value="comparativa">
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={datosBarras} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="nombre" angle={-45} textAnchor="end" height={70} />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="total" name="Total Generado ($)" stroke="#82ca9d" />
                  <Line type="monotone" dataKey="sueldo" name="Sueldo Mensual ($)" stroke="#ff8042" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/admin/personal/[id]/page.tsx" isMerged="true"
import { ColaboradorDetail } from "@/components/personal/colaborador-detail"

export default function ColaboradorDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Detalle de Colaborador</h1>
        <p className="text-muted-foreground">Información completa y rendimiento del colaborador</p>
      </div>

<ColaboradorDetail id={params.id} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/personal/colaborador-detail.tsx" isMerged="true"
"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 { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { ArrowLeft, Mail, Phone, Save, Edit } from "lucide-react"
import Link from "next/link"
import { Bar, BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"

// Datos de ejemplo para evolución
const evolucionData = [
  { mes: "Ene", servicios: 2, total: 85000 },
  { mes: "Feb", servicios: 2, total: 85000 },
  { mes: "Mar", servicios: 3, total: 125000 },
  { mes: "Abr", servicios: 3, total: 125000 },
  { mes: "May", servicios: 3, total: 125000 },
  { mes: "Jun", servicios: 3, total: 125000 },
]

export function ColaboradorDetail({ id }: { id: string }) {
  const [colaborador, setColaborador] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isEditing, setIsEditing] = useState(false)
  const [editedColaborador, setEditedColaborador] = useState<any>(null)
  const [evolucion, setEvolucion] = useState(evolucionData)
  const [editingEvolucion, setEditingEvolucion] = useState(false)
  const [editedEvolucion, setEditedEvolucion] = useState(evolucionData)

useEffect(() => {
    // Simulación de carga de datos
    setTimeout(() => {
      // Buscar colaborador por ID en los datos de ejemplo
      const colaboradorData = {
        id: 1,
        nombre: "Ana Martínez",
        email: "ana@piriadigital.com",
        telefono: "+54 11 1234-5678",
        especialidad: "Marketing Digital",
        sueldo: 120000,
        notas: "Especialista en redes sociales y campañas de marketing digital.",
        servicios: [
          { cliente: "Empresa A", tipo: "Marketing Digital", valor: 50000 },
          { cliente: "Empresa B", tipo: "Community Management", valor: 35000 },
          { cliente: "Empresa C", tipo: "Paid Media", valor: 40000 },
        ],
      }

setColaborador(colaboradorData)
      setEditedColaborador(colaboradorData)
      setIsLoading(false)
    }, 1000)
  }, [id])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { id, value } = e.target
    setEditedColaborador({ ...editedColaborador, [id]: value })
  }

const handleSave = () => {
    setColaborador(editedColaborador)
    setIsEditing(false)
  }

const handleEvolucionChange = (index: number, field: string, value: string) => {
    const newEvolucion = [...editedEvolucion]
    newEvolucion[index] = {
      ...newEvolucion[index],
      [field]: field === "mes" ? value : Number.parseInt(value),
    }
    setEditedEvolucion(newEvolucion)
  }

const handleSaveEvolucion = () => {
    setEvolucion(editedEvolucion)
    setEditingEvolucion(false)
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("es-AR", {
      style: "currency",
      currency: "ARS",
    }).format(value)
  }

const calcularTotalGenerado = (servicios: any[]) => {
    return servicios.reduce((total, servicio) => total + servicio.valor, 0)
  }

const calcularUtilidad = (totalGenerado: number, sueldo: number) => {
    return totalGenerado - sueldo
  }

if (isLoading) {
    return <div>Cargando información del colaborador...</div>
  }

const totalGenerado = calcularTotalGenerado(colaborador.servicios)
  const utilidad = calcularUtilidad(totalGenerado, colaborador.sueldo)

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="outline" asChild>
          <Link href="/admin/personal">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Volver a Personal
          </Link>
        </Button>
        {isEditing ? (
          <Button onClick={handleSave}>
            <Save className="mr-2 h-4 w-4" />
            Guardar Cambios
          </Button>
        ) : (
          <Button onClick={() => setIsEditing(true)}>Editar Información</Button>
        )}
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              Información Personal
              <Badge variant="outline">{colaborador.especialidad}</Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input id="nombre" value={editedColaborador.nombre} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" value={editedColaborador.email} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono</Label>
                  <Input id="telefono" value={editedColaborador.telefono} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="especialidad">Especialidad</Label>
                  <Input id="especialidad" value={editedColaborador.especialidad} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="notas">Notas</Label>
                  <Textarea id="notas" value={editedColaborador.notas} onChange={handleInputChange} rows={3} />
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Nombre</p>
                  <p>{colaborador.nombre}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Email</p>
                  <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <a href={`mailto:${colaborador.email}`} className="text-blue-600 hover:underline">
                      {colaborador.email}
                    </a>
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Teléfono</p>
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <a href={`tel:${colaborador.telefono}`} className="text-blue-600 hover:underline">
                      {colaborador.telefono}
                    </a>
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Notas</p>
                  <p className="text-sm text-muted-foreground">{colaborador.notas || "Sin notas"}</p>
                </div>
              </>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Información Financiera</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="sueldo">Sueldo Mensual</Label>
                  <Input id="sueldo" type="number" value={editedColaborador.sueldo} onChange={handleInputChange} />
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Sueldo Mensual</p>
                  <p>{formatCurrency(colaborador.sueldo)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Total Generado</p>
                  <p>{formatCurrency(totalGenerado)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Utilidad Neta</p>
                  <p className={utilidad < 0 ? "text-red-500" : "text-green-500"}>{formatCurrency(utilidad)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Cantidad de Servicios</p>
                  <p>{colaborador.servicios.length}</p>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Servicios Asignados</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Cliente</TableHead>
                <TableHead>Tipo de Servicio</TableHead>
                <TableHead className="text-right">Valor</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {colaborador.servicios.map((servicio: any, index: number) => (
                <TableRow key={index}>
                  <TableCell className="font-medium">{servicio.cliente}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{servicio.tipo}</Badge>
                  </TableCell>
                  <TableCell className="text-right">{formatCurrency(servicio.valor)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            Evolución Mensual
            {editingEvolucion ? (
              <Button size="sm" onClick={handleSaveEvolucion}>
                <Save className="mr-2 h-4 w-4" />
                Guardar
              </Button>
            ) : (
              <Button size="sm" variant="outline" onClick={() => setEditingEvolucion(true)}>
                <Edit className="mr-2 h-4 w-4" />
                Editar
              </Button>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="mb-6">
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={evolucion} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="mes" />
                  <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
                  <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
                  <Tooltip />
                  <Legend />
                  <Bar yAxisId="left" dataKey="servicios" name="Cantidad de Servicios" fill="#8884d8" />
                  <Bar yAxisId="right" dataKey="total" name="Total Generado ($)" fill="#82ca9d" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

{editingEvolucion && (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Mes</TableHead>
                    <TableHead>Servicios</TableHead>
                    <TableHead>Total ($)</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {editedEvolucion.map((item, index) => (
                    <TableRow key={index}>
                      <TableCell>
                        <Input
                          value={item.mes}
                          onChange={(e) => handleEvolucionChange(index, "mes", e.target.value)}
                          className="h-8 w-16"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          value={item.servicios}
                          onChange={(e) => handleEvolucionChange(index, "servicios", e.target.value)}
                          className="h-8 w-20"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          value={item.total}
                          onChange={(e) => handleEvolucionChange(index, "total", e.target.value)}
                          className="h-8 w-24"
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/clientes/cliente-detail.tsx" isEdit="true" isQuickEdit="true"
"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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
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 { ArrowLeft, Mail, Phone, LinkIcon, ExternalLink, Save } from "lucide-react"
import Link from "next/link"

// Datos de ejemplo para pagos
const pagosData = [
  { id: 1, fecha: "2023-11-10", monto: 50000, estado: "pagado" },
  { id: 2, fecha: "2023-10-10", monto: 50000, estado: "pagado" },
  { id: 3, fecha: "2023-09-10", monto: 45000, estado: "pagado" },
  { id: 4, fecha: "2023-08-10", monto: 45000, estado: "pagado" },
  { id: 5, fecha: "2023-07-10", monto: 45000, estado: "pagado" },
  { id: 6, fecha: "2023-06-10", monto: 40000, estado: "pagado" },
]

// Datos de ejemplo para aumentos
const aumentosData = [
  { id: 1, fecha: "2023-10-15", porcentaje: 11.11, montoAnterior: 45000, montoNuevo: 50000 },
  { id: 2, fecha: "2023-07-15", porcentaje: 12.5, montoAnterior: 40000, montoNuevo: 45000 },
  { id: 3, fecha: "2023-04-15", porcentaje: 14.29, montoAnterior: 35000, montoNuevo: 40000 },
]

// Datos de ejemplo para colaboradores
const colaboradoresData = [
  { id: 1, nombre: "Ana Martínez" },
  { id: 2, nombre: "Luis Gómez" },
  { id: 3, nombre: "Sofía Rodríguez" },
  { id: 4, nombre: "Diego Fernández" },
]

// Datos de ejemplo para servicios del cliente
const serviciosClienteData = [
  {
    id: 1,
    tipo: "Marketing Digital",
    descripcion: "Gestión de redes sociales y campañas digitales",
    valor: 50000,
    colaboradorId: 1,
  },
  {
    id: 2,
    tipo: "Diseño Gráfico",
    descripcion: "Diseño de piezas gráficas para redes sociales",
    valor: 30000,
    colaboradorId: 3,
  },
  {
    id: 3,
    tipo: "SEO",
    descripcion: "Optimización para motores de búsqueda",
    valor: 40000,
    colaboradorId: null,
  },
]

export function ClienteDetail({ id }: { id: string }) {
  const [cliente, setCliente] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isEditing, setIsEditing] = useState(false)
  const [editedCliente, setEditedCliente] = useState<any>(null)
  const [servicios, setServicios] = useState(serviciosClienteData)

useEffect(() => {
    // Simulación de carga de datos
    setTimeout(() => {
      // Buscar cliente por ID en los datos de ejemplo
      const clienteData = {
        id: 1,
        nombre: "Juan Pérez",
        empresa: "Empresa A",
        email: "juan@empresaa.com",
        telefono: "+54 11 1234-5678",
        redes: "https://linkedin.com/in/juanperez",
        drive: "https://drive.google.com/folder/123",
        servicio: "marketing",
        servicioLabel: "Marketing Digital",
        valor: 50000,
        ultimoAumento: "2023-10-15",
        proximoAumento: "2024-01-15",
        diaPago: 10,
        fechaInicio: "2023-01-15",
        estado: "activo",
        notas: "Cliente desde enero 2023. Muy conforme con el servicio.",
        // Nuevos campos para facturación
        cuitCuil: "20-12345678-9",
        condicionFiscal: "monotributo",
      }

setCliente(clienteData)
      setEditedCliente(clienteData)
      setIsLoading(false)
    }, 1000)
  }, [id])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { id, value } = e.target
    setEditedCliente({ ...editedCliente, [id]: value })
  }

const handleSelectChange = (id: string, value: string) => {
    setEditedCliente({ ...editedCliente, [id]: value })
  }

const handleSave = () => {
    setCliente(editedCliente)
    setIsEditing(false)
  }

const handleColaboradorChange = (servicioId: number, colaboradorId: string) => {
    const updatedServicios = servicios.map((servicio) => {
      if (servicio.id === servicioId) {
        return {
          ...servicio,
          colaboradorId: colaboradorId === "null" ? null : Number.parseInt(colaboradorId),
        }
      }
      return servicio
    })
    setServicios(updatedServicios)
  }

const formatDate = (dateString: string) => {
    if (!dateString) return "-"
    const date = new Date(dateString)
    return date.toLocaleDateString("es-AR")
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("es-AR", {
      style: "currency",
      currency: "ARS",
    }).format(value)
  }

const getPaymentStatus = (diaPago: number) => {
    const today = new Date()
    const currentDay = today.getDate()

// Si el día de pago ya pasó este mes
    if (currentDay > diaPago) {
      const daysLate = currentDay - diaPago
      if (daysLate > 4) {
        return { status: "late", text: "Pago demorado", color: "text-red-600" }
      } else {
        return { status: "pending", text: "Pago pendiente", color: "text-yellow-600" }
      }
    }

// Si el día de pago es hoy o en los próximos 3 días
    if (diaPago - currentDay <= 3 && diaPago - currentDay >= 0) {
      return { status: "soon", text: "Pago próximo", color: "text-orange-600" }
    }

return { status: "normal", text: "Al día", color: "text-green-600" }
  }

if (isLoading) {
    return <div>Cargando información del cliente...</div>
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="outline" asChild>
          <Link href="/admin/clientes">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Volver a Clientes
          </Link>
        </Button>
        {isEditing ? (
          <Button onClick={handleSave}>
            <Save className="mr-2 h-4 w-4" />
            Guardar Cambios
          </Button>
        ) : (
          <Button onClick={() => setIsEditing(true)}>Editar Información</Button>
        )}
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              Información de Contacto
              <Badge variant={cliente.estado === "activo" ? "default" : "secondary"}>
                {cliente.estado === "activo" ? "Activo" : "Inactivo"}
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input id="nombre" value={editedCliente.nombre} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="empresa">Empresa</Label>
                  <Input id="empresa" value={editedCliente.empresa} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" value={editedCliente.email} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono</Label>
                  <Input id="telefono" value={editedCliente.telefono} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="estado">Estado</Label>
                  <Select value={editedCliente.estado} onValueChange={(value) => handleSelectChange("estado", value)}>
                    <SelectTrigger id="estado">
                      <SelectValue placeholder="Seleccionar estado" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="activo">Activo</SelectItem>
                      <SelectItem value="inactivo">Inactivo</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Nombre</p>
                  <p>{cliente.nombre}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Empresa</p>
                  <p>{cliente.empresa}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Email</p>
                  <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <a href={`mailto:${cliente.email}`} className="text-blue-600 hover:underline">
                      {cliente.email}
                    </a>
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Teléfono</p>
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <a href={`tel:${cliente.telefono}`} className="text-blue-600 hover:underline">
                      {cliente.telefono}
                    </a>
                  </div>
                </div>
              </>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Enlaces y Recursos</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="redes">Link a Redes</Label>
                  <Input id="redes" value={editedCliente.redes} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="drive">Link a Carpeta en Drive</Label>
                  <Input id="drive" value={editedCliente.drive} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="notas">Notas</Label>
                  <Textarea id="notas" value={editedCliente.notas} onChange={handleInputChange} rows={4} />
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Redes Sociales</p>
                  <div className="flex items-center gap-2">
                    <LinkIcon className="h-4 w-4 text-muted-foreground" />
                    <a
                      href={cliente.redes}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-1 text-blue-600 hover:underline"
                    >
                      LinkedIn <ExternalLink className="h-3 w-3" />
                    </a>
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Carpeta en Drive</p>
                  <div className="flex items-center gap-2">
                    <LinkIcon className="h-4 w-4 text-muted-foreground" />
                    <a
                      href={cliente.drive}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-1 text-blue-600 hover:underline"
                    >
                      Ver carpeta <ExternalLink className="h-3 w-3" />
                    </a>
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Notas</p>
                  <p className="text-sm text-muted-foreground">{cliente.notas || "Sin notas"}</p>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Información del Servicio</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="servicio">Servicio Vigente</Label>
                  <Select
                    value={editedCliente.servicio}
                    onValueChange={(value) => handleSelectChange("servicio", value)}
                  >
                    <SelectTrigger id="servicio">
                      <SelectValue placeholder="Seleccionar servicio" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="marketing">Marketing Digital</SelectItem>
                      <SelectItem value="desarrollo">Desarrollo Web</SelectItem>
                      <SelectItem value="diseno">Diseño Gráfico</SelectItem>
                      <SelectItem value="seo">SEO</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="valor">Valor del Servicio</Label>
                  <Input id="valor" type="number" value={editedCliente.valor} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="diaPago">Día de Pago</Label>
                  <Input
                    id="diaPago"
                    type="number"
                    min="1"
                    max="31"
                    value={editedCliente.diaPago}
                    onChange={handleInputChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fechaInicio">Fecha de Inicio</Label>
                  <Input id="fechaInicio" type="date" value={editedCliente.fechaInicio} onChange={handleInputChange} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ultimoAumento">Último Aumento</Label>
                  <Input
                    id="ultimoAumento"
                    type="date"
                    value={editedCliente.ultimoAumento}
                    onChange={handleInputChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="proximoAumento">Próximo Aumento</Label>
                  <Input
                    id="proximoAumento"
                    type="date"
                    value={editedCliente.proximoAumento}
                    onChange={handleInputChange}
                  />
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Servicio Vigente</p>
                  <p>{cliente.servicioLabel}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Valor del Servicio</p>
                  <p>{formatCurrency(cliente.valor)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Día de Pago</p>
                  <div className="flex items-center gap-2">
                    <p>{cliente.diaPago}</p>
                    {!isEditing && (
                      <Badge
                        variant={
                          getPaymentStatus(cliente.diaPago).status === "late"
                            ? "destructive"
                            : getPaymentStatus(cliente.diaPago).status === "soon"
                              ? "outline"
                              : "default"
                        }
                        className={getPaymentStatus(cliente.diaPago).color}
                      >
                        {getPaymentStatus(cliente.diaPago).text}
                      </Badge>
                    )}
                  </div>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Fecha de Inicio</p>
                  <p>{formatDate(cliente.fechaInicio)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Último Aumento</p>
                  <p>{formatDate(cliente.ultimoAumento)}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Próximo Aumento</p>
                  <p>{formatDate(cliente.proximoAumento)}</p>
                </div>
              </>
            )}
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Información de Facturación</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 md:grid-cols-2">
            {isEditing ? (
              <>
                <div className="space-y-2">
                  <Label htmlFor="cuitCuil">CUIT/CUIL</Label>
                  <Input
                    id="cuitCuil"
                    value={editedCliente.cuitCuil || ""}
                    onChange={handleInputChange}
                    placeholder="20-12345678-9"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="condicionFiscal">Condición Fiscal</Label>
                  <Select
                    value={editedCliente.condicionFiscal || ""}
                    onValueChange={(value) => handleSelectChange("condicionFiscal", value)}
                  >
                    <SelectTrigger id="condicionFiscal">
                      <SelectValue placeholder="Seleccionar condición fiscal" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="responsable_inscripto">Responsable Inscripto</SelectItem>
                      <SelectItem value="monotributo">Monotributista</SelectItem>
                      <SelectItem value="consumidor_final">Consumidor Final</SelectItem>
                      <SelectItem value="exento">Exento</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1">
                  <p className="text-sm font-medium">CUIT/CUIL</p>
                  <p>{cliente.cuitCuil || "No especificado"}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium">Condición Fiscal</p>
                  <p>
                    {cliente.condicionFiscal === "responsable_inscripto" && "Responsable Inscripto"}
                    {cliente.condicionFiscal === "monotributo" && "Monotributista"}
                    {cliente.condicionFiscal === "consumidor_final" && "Consumidor Final"}
                    {cliente.condicionFiscal === "exento" && "Exento"}
                    {!cliente.condicionFiscal && "No especificado"}
                  </p>
                </div>
              </>
            )}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Servicios y Colaboradores Asignados</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Tipo de Servicio</TableHead>
                <TableHead>Descripción</TableHead>
                <TableHead>Valor</TableHead>
                <TableHead>Colaborador Asignado</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {servicios.map((servicio) => (
                <TableRow key={servicio.id}>
                  <TableCell>
                    <Badge variant="outline">{servicio.tipo}</Badge>
                  </TableCell>
                  <TableCell>{servicio.descripcion}</TableCell>
                  <TableCell>{formatCurrency(servicio.valor)}</TableCell>
                  <TableCell>
                    <Select
                      value={servicio.colaboradorId?.toString() || "null"}
                      onValueChange={(value) => handleColaboradorChange(servicio.id, value)}
                    >
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Seleccionar colaborador" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="null">Sin asignar</SelectItem>
                        {colaboradoresData.map((colaborador) => (
                          <SelectItem key={colaborador.id} value={colaborador.id.toString()}>
                            {colaborador.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

<Tabs defaultValue="pagos">
        <TabsList>
          <TabsTrigger value="pagos">Historial de Pagos</TabsTrigger>
          <TabsTrigger value="aumentos">Historial de Aumentos</TabsTrigger>
        </TabsList>
        <TabsContent value="pagos" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fecha</TableHead>
                    <TableHead>Monto</TableHead>
                    <TableHead>Estado</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {pagosData.map((pago) => (
                    <TableRow key={pago.id}>
                      <TableCell>{formatDate(pago.fecha)}</TableCell>
                      <TableCell>{formatCurrency(pago.monto)}</TableCell>
                      <TableCell>
                        <Badge variant={pago.estado === "pagado" ? "default" : "destructive"}>
                          {pago.estado === "pagado" ? "Pagado" : "Pendiente"}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="aumentos" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fecha</TableHead>
                    <TableHead>Porcentaje</TableHead>
                    <TableHead>Monto Anterior</TableHead>
                    <TableHead>Monto Nuevo</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {aumentosData.map((aumento) => (
                    <TableRow key={aumento.id}>
                      <TableCell>{formatDate(aumento.fecha)}</TableCell>
                      <TableCell>{aumento.porcentaje}%</TableCell>
                      <TableCell>{formatCurrency(aumento.montoAnterior)}</TableCell>
                      <TableCell>{formatCurrency(aumento.montoNuevo)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/clientes/cliente-form.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

interface ClienteFormProps {
  cliente?: any
  onSuccess: () => void
}

export function ClienteForm({ cliente, onSuccess }: ClienteFormProps) {
  const [isLoading, setIsLoading] = useState(false)

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

// Simulación de guardado
    setTimeout(() => {
      setIsLoading(false)
      onSuccess()
    }, 1000)
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4 py-4">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="nombre">Nombre del Cliente</Label>
          <Input id="nombre" defaultValue={cliente?.nombre || ""} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="empresa">Empresa</Label>
          <Input id="empresa" defaultValue={cliente?.empresa || ""} required />
        </div>
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" defaultValue={cliente?.email || ""} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="telefono">Teléfono</Label>
          <Input id="telefono" defaultValue={cliente?.telefono || ""} required />
        </div>
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="redes">Link a Redes</Label>
          <Input id="redes" defaultValue={cliente?.redes || ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="drive">Link a Carpeta en Drive</Label>
          <Input id="drive" defaultValue={cliente?.drive || ""} />
        </div>
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="servicio">Servicio Vigente</Label>
          <Select defaultValue={cliente?.servicio || "marketing"}>
            <SelectTrigger id="servicio">
              <SelectValue placeholder="Seleccionar servicio" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="marketing">Marketing Digital</SelectItem>
              <SelectItem value="desarrollo">Desarrollo Web</SelectItem>
              <SelectItem value="diseno">Diseño Gráfico</SelectItem>
              <SelectItem value="seo">SEO</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="valor">Valor del Servicio</Label>
          <Input id="valor" type="number" defaultValue={cliente?.valor || ""} required />
        </div>
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="space-y-2">
          <Label htmlFor="ultimoAumento">Último Aumento</Label>
          <Input id="ultimoAumento" type="date" defaultValue={cliente?.ultimoAumento || ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="proximoAumento">Próximo Aumento</Label>
          <Input id="proximoAumento" type="date" defaultValue={cliente?.proximoAumento || ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="diaPago">Día de Pago</Label>
          <Input id="diaPago" type="number" min="1" max="31" defaultValue={cliente?.diaPago || ""} required />
        </div>
      </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="fechaInicio">Fecha de Inicio</Label>
          <Input id="fechaInicio" type="date" defaultValue={cliente?.fechaInicio || ""} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="estado">Estado</Label>
          <Select defaultValue={cliente?.estado || "activo"}>
            <SelectTrigger id="estado">
              <SelectValue placeholder="Seleccionar estado" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="activo">Activo</SelectItem>
              <SelectItem value="inactivo">Inactivo</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="space-y-4 py-2">
        <h3 className="text-lg font-medium">Información de Facturación</h3>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="cuitCuil">CUIT/CUIL</Label>
            <Input id="cuitCuil" defaultValue={cliente?.cuitCuil || ""} placeholder="20-12345678-9" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="condicionFiscal">Condición Fiscal</Label>
            <Select defaultValue={cliente?.condicionFiscal || ""}>
              <SelectTrigger id="condicionFiscal">
                <SelectValue placeholder="Seleccionar condición fiscal" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="responsable_inscripto">Responsable Inscripto</SelectItem>
                <SelectItem value="monotributo">Monotributista</SelectItem>
                <SelectItem value="consumidor_final">Consumidor Final</SelectItem>
                <SelectItem value="exento">Exento</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="notas">Notas Adicionales</Label>
        <Textarea id="notas" defaultValue={cliente?.notas || ""} rows={3} />
      </div>

<div className="flex justify-end">
        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Guardando..." : "Guardar Cliente"}
        </Button>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="components/clientes/clientes-table.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ClienteForm } from "./cliente-form"
import { Badge } from "@/components/ui/badge"
import { Edit, ExternalLink } from "lucide-react"

// Datos de ejemplo
const clientesData = [
  {
    id: 1,
    nombre: "Juan Pérez",
    empresa: "Empresa A",
    email: "juan@empresaa.com",
    telefono: "+54 11 1234-5678",
    redes: "https://linkedin.com/in/juanperez",
    drive: "https://drive.google.com/folder/123",
    servicio: "marketing",
    servicioLabel: "Marketing Digital",
    valor: 50000,
    ultimoAumento: "2023-10-15",
    proximoAumento: "2024-01-15",
    diaPago: 10,
    fechaInicio: "2023-01-15",
    estado: "activo",
    condicionFiscal: "responsable_inscripto",
  },
  {
    id: 2,
    nombre: "María González",
    empresa: "Empresa B",
    email: "maria@empresab.com",
    telefono: "+54 11 2345-6789",
    redes: "https://linkedin.com/in/mariagonzalez",
    drive: "https://drive.google.com/folder/456",
    servicio: "desarrollo",
    servicioLabel: "Desarrollo Web",
    valor: 75000,
    ultimoAumento: "2023-11-20",
    proximoAumento: "2024-02-20",
    diaPago: 15,
    fechaInicio: "2023-02-20",
    estado: "activo",
    condicionFiscal: "monotributo",
  },
  {
    id: 3,
    nombre: "Carlos Rodríguez",
    empresa: "Empresa C",
    email: "carlos@empresac.com",
    telefono: "+54 11 3456-7890",
    redes: "https://linkedin.com/in/carlosrodriguez",
    drive: "https://drive.google.com/folder/789",
    servicio: "diseno",
    servicioLabel: "Diseño Gráfico",
    valor: 40000,
    ultimoAumento: "2023-09-05",
    proximoAumento: "2023-12-05",
    diaPago: 5,
    fechaInicio: "2023-03-05",
    estado: "inactivo",
    condicionFiscal: "consumidor_final",
  },
]

export function ClientesTable() {
  const router = useRouter()
  const [clientes, setClientes] = useState(clientesData)
  const [selectedCliente, setSelectedCliente] = useState<any>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

const handleEdit = (cliente: any) => {
    setSelectedCliente(cliente)
    setIsDialogOpen(true)
  }

const handleRowClick = (id: number) => {
    router.push(`/admin/clientes/${id}`)
  }

const formatDate = (dateString: string) => {
    if (!dateString) return "-"
    const date = new Date(dateString)
    return date.toLocaleDateString("es-AR")
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("es-AR", {
      style: "currency",
      currency: "ARS",
    }).format(value)
  }

const getServicioLabel = (servicio: string) => {
    const servicios: Record<string, string> = {
      marketing: "Marketing Digital",
      desarrollo: "Desarrollo Web",
      diseno: "Diseño Gráfico",
      seo: "SEO",
    }
    return servicios[servicio] || servicio
  }

const getPaymentStatus = (diaPago: number) => {
    const today = new Date()
    const currentDay = today.getDate()
    const currentMonth = today.getMonth()
    const currentYear = today.getFullYear()

// Si el día de pago ya pasó este mes
    if (currentDay > diaPago) {
      const daysLate = currentDay - diaPago
      if (daysLate > 4) {
        return "late" // Más de 4 días de retraso
      } else {
        return "pending" // Menos de 4 días de retraso
      }
    }

// Si el día de pago es hoy o en los próximos 3 días
    if (diaPago - currentDay <= 3 && diaPago - currentDay >= 0) {
      return "soon" // Próximo a pagar
    }

return "normal" // Pago normal, no próximo ni retrasado
  }

return (
    <>
      <div className="flex flex-wrap gap-4 mb-4">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded bg-orange-50 border border-orange-200"></div>
          <span className="text-sm">Pago próximo (dentro de 3 días)</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded bg-red-50 border border-red-200"></div>
          <span className="text-sm">Pago demorado (más de 4 días)</span>
        </div>
      </div>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Nombre</TableHead>
              <TableHead>Empresa</TableHead>
              <TableHead>Servicio</TableHead>
              <TableHead className="hidden md:table-cell">Valor</TableHead>
              <TableHead className="hidden md:table-cell">Día de Pago</TableHead>
              <TableHead className="hidden lg:table-cell">Próx. Aumento</TableHead>
              <TableHead>Condición Fiscal</TableHead>
              <TableHead>Estado</TableHead>
              <TableHead className="text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {clientes.map((cliente) => {
              const paymentStatus = getPaymentStatus(cliente.diaPago)
              return (
                <TableRow
                  key={cliente.id}
                  className={`cursor-pointer ${
                    paymentStatus === "late"
                      ? "bg-red-50 hover:bg-red-100"
                      : paymentStatus === "soon"
                        ? "bg-orange-50 hover:bg-orange-100"
                        : ""
                  }`}
                  onClick={() => handleRowClick(cliente.id)}
                >
                  <TableCell className="font-medium">{cliente.nombre}</TableCell>
                  <TableCell>{cliente.empresa}</TableCell>
                  <TableCell>{cliente.servicioLabel}</TableCell>
                  <TableCell className="hidden md:table-cell">{formatCurrency(cliente.valor)}</TableCell>
                  <TableCell
                    className={`hidden md:table-cell ${
                      paymentStatus === "late"
                        ? "text-red-600 font-medium"
                        : paymentStatus === "soon"
                          ? "text-orange-600 font-medium"
                          : ""
                    }`}
                  >
                    {cliente.diaPago}
                    {paymentStatus === "late" && " (Demorado)"}
                    {paymentStatus === "soon" && " (Próximo)"}
                  </TableCell>
                  <TableCell className="hidden lg:table-cell">{formatDate(cliente.proximoAumento)}</TableCell>
                  <TableCell>
                    {cliente.condicionFiscal === "responsable_inscripto" && "Resp. Inscripto"}
                    {cliente.condicionFiscal === "monotributo" && "Monotributo"}
                    {cliente.condicionFiscal === "consumidor_final" && "Cons. Final"}
                    {cliente.condicionFiscal === "exento" && "Exento"}
                    {!cliente.condicionFiscal && "-"}
                  </TableCell>
                  <TableCell>
                    <Badge variant={cliente.estado === "activo" ? "default" : "secondary"}>
                      {cliente.estado === "activo" ? "Activo" : "Inactivo"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2" onClick={(e) => e.stopPropagation()}>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleEdit(cliente)
                        }}
                      >
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Editar</span>
                      </Button>
                      <Button variant="ghost" size="icon" asChild>
                        <a href={`/admin/clientes/${cliente.id}`} target="_blank" rel="noreferrer">
                          <ExternalLink className="h-4 w-4" />
                          <span className="sr-only">Ver detalle</span>
                        </a>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Editar Cliente</DialogTitle>
          </DialogHeader>
          <ClienteForm cliente={selectedCliente} onSuccess={() => setIsDialogOpen(false)} />
        </DialogContent>
      </Dialog>
    </>
  )
}
89:["$","$L90",null,{"chatId":"MyeYIAcHuLg","children":["$","$L91",null,{"data":{"@\"active-block\",\"MyeYIAcHuLg\",":{"id":"b_5GCZPejtcSa","messageId":"xSKAmIQPK8BtDOtSBobykF5oRqKV0uQO","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"piria-admin","type":"code-project","project":"piria-admin"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"MyeYIAcHuLg\",":false,"":null},"children":"$L93"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This