import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; import { Container, Row, Col } from 'react-bootstrap'; import { useLoading } from '../../../LoadingContext'; import ClientSearchInput from './Components/ClientSearchInput'; import ClientDetailPanel from './Components/ClientDetailPanel'; import CardSectionStatus from './Components/CardSectionStatus'; import { Users, Search, ArrowLeft, Building2 } from 'lucide-react'; import { useClienteDashboardData } from './hooks/useClienteDashboardData'; import './Dashboard.css'; export default function Dashboard() { const { clientes, selectedCliente, loading, detailLoading, detailError, setSelectedCliente, handleSearch, refreshSelectedCliente, retryDetalle, } = useClienteDashboardData(); const { showLoading, hideLoading } = useLoading(); const handleSelectCliente = async (cliente: any) => { setSelectedCliente(cliente); await refreshSelectedCliente(cliente.CodCli); }; const handleBackToResults = () => { setSelectedCliente(null); }; return (
{/* Área de Búsqueda */} {!selectedCliente && (
Directorio Centralizado

Gestión de Clientes y Suministros

Localiza rápidamente cualquier cliente para consultar o gestionar contratos, suministros, bancos y documentación.

)} {/* Resultados de Búsqueda */} {!selectedCliente && (
{loading ? (

Buscando clientes...

) : clientes.length > 0 ? ( {clientes.map((cli) => (
handleSelectCliente(cli)} style={{ cursor: 'pointer' }} >

{cli.RazSocCli}

{cli.NumCifCli} • {cli.EmaCli || 'Sin email'}
))} ) : (

Encuentra o selecciona un cliente

Escribe al menos 3 caracteres de la razón social, nombre o CIF para consultar su ficha técnica.

)}
)} {/* Detalle del Cliente Seleccionado */} {selectedCliente && (
Ficha Integral de Cliente
)}
); }