115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { Button, Separator } from "@repo/shadcn-ui/components";
|
|
import {
|
|
CreditCard,
|
|
EyeIcon,
|
|
MapPinHouseIcon,
|
|
RefreshCwIcon,
|
|
UserIcon,
|
|
UserPlusIcon,
|
|
} from "lucide-react";
|
|
import { CustomerSummary } from "../../schemas";
|
|
|
|
interface CustomerCardProps {
|
|
customer: CustomerSummary;
|
|
|
|
onViewCustomer?: () => void;
|
|
onChangeCustomer?: () => void;
|
|
onAddNewCustomer?: () => void;
|
|
}
|
|
|
|
export const CustomerCard = ({
|
|
customer,
|
|
onViewCustomer,
|
|
onChangeCustomer,
|
|
onAddNewCustomer,
|
|
}: CustomerCardProps) => {
|
|
const hasAddress =
|
|
customer.street ||
|
|
customer.street2 ||
|
|
customer.city ||
|
|
customer.postal_code ||
|
|
customer.province ||
|
|
customer.country;
|
|
|
|
return (
|
|
<section>
|
|
<div className='flex items-start gap-4'>
|
|
{/* Avatar mejorado con gradiente sutil */}
|
|
<div className='flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15'>
|
|
<UserIcon className='size-6 text-muted-foreground group-hover:text-primary' />
|
|
</div>
|
|
|
|
<div className='flex-1 min-w-0 '>
|
|
{/* Nombre del cliente */}
|
|
<h3 className='font-semibold text-foreground text-lg leading-tight mb-1 text-left text-balance'>
|
|
{customer.name}
|
|
</h3>
|
|
|
|
{/* NIF/CIF con icono */}
|
|
{customer.tin && (
|
|
<div className='flex items-center gap-2 text-sm text-muted-foreground mb-3'>
|
|
<CreditCard className='h-4 w-4 shrink-0' />
|
|
<span className='font-medium'>{customer.tin}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Separador si hay dirección */}
|
|
{hasAddress && <Separator className='my-3' />}
|
|
|
|
{/* Dirección con mejor estructura */}
|
|
{hasAddress && (
|
|
<div className='space-y-2'>
|
|
<div className='flex items-start gap-2 text-sm text-muted-foreground'>
|
|
<MapPinHouseIcon className='h-4 w-4 shrink-0 mt-0.5 text-primary/60' />
|
|
<div className='space-y-0.5 leading-relaxed flex-1 text-left'>
|
|
{customer.street && <div>{customer.street}</div>}
|
|
{customer.street2 && <div>{customer.street2}</div>}
|
|
<div className='flex flex-wrap gap-x-2'>
|
|
{customer.postal_code && <span>{customer.postal_code}</span>}
|
|
{customer.city && <span>{customer.city}</span>}
|
|
</div>
|
|
<div className='flex flex-wrap gap-x-2'>
|
|
{customer.province && <span>{customer.province}</span>}
|
|
{customer.country && <span>{customer.country}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className='my-4' />
|
|
<div className='flex flex-wrap gap-2'>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onViewCustomer}
|
|
className='flex-1 min-w-[140px] gap-2 bg-transparent'
|
|
>
|
|
<EyeIcon className='h-4 w-4' />
|
|
Ver ficha completa
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onChangeCustomer}
|
|
className='flex-1 min-w-[140px] gap-2 bg-transparent'
|
|
>
|
|
<RefreshCwIcon className='h-4 w-4' />
|
|
Cambiar cliente
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onAddNewCustomer}
|
|
className='flex-1 min-w-[140px] gap-2 bg-transparent'
|
|
>
|
|
<UserPlusIcon className='h-4 w-4' />
|
|
Nuevo cliente
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|