import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; import { Container, Row, Col, Card, Button, Spinner } from 'react-bootstrap'; import { useLoading } from '../../../LoadingContext'; import ClientSearchInput from './Components/ClientSearchInput'; import ClientDetailPanel from './Components/ClientDetailPanel'; import { Users, Search } from 'lucide-react'; import { useClienteDashboardData } from './hooks/useClienteDashboardData'; import './Dashboard.css'; export default function Dashboard() { const { clientes, selectedCliente, loading, setSelectedCliente, handleSearch, refreshSelectedCliente } = useClienteDashboardData(); // Contexto de carga global (para operaciones pesadas) const { showLoading, hideLoading } = useLoading(); // Al seleccionar un cliente de la lista const handleSelectCliente = async (cliente: any) => { setSelectedCliente(cliente); await refreshSelectedCliente(cliente.CodCli).catch(() => null); }; const handleBackToResults = () => { setSelectedCliente(null); }; return (
{/* Área de Búsqueda */} {!selectedCliente && (
)} {/* Resultados de Búsqueda */} {!selectedCliente && (
{loading ? (

Buscando clientes...

) : clientes.length > 0 ? ( {clientes.map((cli) => ( handleSelectCliente(cli)} >
{cli.RazSocCli}
CIF: {cli.NumCifCli}
{cli.EmaCli || 'Sin email'}
 ))} ) : ( // Empty State
Busca un cliente para comenzar

Ingresa el nombre o CIF del cliente

)}
)} {/* Detalle del Cliente Seleccionado */} {selectedCliente && (
Gestión de Clientes y Suministros
)}
); }