108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import {
|
|
Button, Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemFooter,
|
|
ItemTitle
|
|
} from "@repo/shadcn-ui/components";
|
|
import {
|
|
EyeIcon,
|
|
RefreshCwIcon,
|
|
UserPlusIcon
|
|
} from "lucide-react";
|
|
import { CustomerSummary } from "../../schemas";
|
|
|
|
interface CustomerCardProps {
|
|
customer: CustomerSummary;
|
|
|
|
onViewCustomer?: () => void;
|
|
onChangeCustomer?: () => void;
|
|
onAddNewCustomer?: () => void;
|
|
|
|
className?: string;
|
|
}
|
|
|
|
export const CustomerCard = ({
|
|
customer,
|
|
onViewCustomer,
|
|
onChangeCustomer,
|
|
onAddNewCustomer,
|
|
className,
|
|
}: CustomerCardProps) => {
|
|
const hasAddress =
|
|
customer.street ||
|
|
customer.street2 ||
|
|
customer.city ||
|
|
customer.postal_code ||
|
|
customer.province ||
|
|
customer.country;
|
|
|
|
return (
|
|
<Item variant="outline" className={className}>
|
|
<ItemContent>
|
|
<ItemTitle className='flex gap-2 w-full justify-between'>
|
|
<span className='grow'>{customer.name}</span>
|
|
<Button
|
|
type='button'
|
|
variant='ghost'
|
|
size='sm'
|
|
className='cursor-pointer'
|
|
onClick={onViewCustomer}
|
|
>
|
|
<EyeIcon className='size-4 text-muted-foreground' />
|
|
<span className='sr-only'>Ver ficha completa</span>
|
|
</Button>
|
|
</ItemTitle>
|
|
<ItemDescription className='text-sm text-muted-foreground'>
|
|
{customer.tin && (<span>{customer.tin}</span>)}
|
|
{/* Dirección con mejor estructura */}
|
|
{hasAddress && (
|
|
<div className='x'>
|
|
|
|
{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>
|
|
|
|
)}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
<ItemFooter>
|
|
<div className='flex flex-wrap gap-2'>
|
|
<Button
|
|
type="button"
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onChangeCustomer}
|
|
className='flex-1 min-w-36 gap-2 cursor-pointer'
|
|
>
|
|
<RefreshCwIcon className='size-4' />
|
|
<span className='text-sm text-muted-foreground'>
|
|
Cambiar de cliente
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onAddNewCustomer}
|
|
className='flex-1 min-w-36 gap-2 cursor-pointer'
|
|
>
|
|
<UserPlusIcon className='size-4' />
|
|
<span className='text-sm text-muted-foreground'>
|
|
Nuevo cliente
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</ItemFooter>
|
|
</Item>
|
|
);
|
|
};
|