4139aa918d
- Changed UserAvatar size from 'xl' to 'lg' in PersonCard for better alignment with design. - Adjusted UserAvatar size from 'sm' to 'xs' in OrderCard to ensure uniformity in avatar presentation. - Updated sizeClasses in UserAvatar component to reflect the new 'xs' size, enhancing responsiveness.
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { ReadonlyTimeRange } from './time-range/readonly';
|
|
import { UserAvatar } from './user-avatar';
|
|
import { getBadge } from '@/components/shared/status';
|
|
import { useCustomerQuery } from '@/hooks/api/customers';
|
|
import type * as GQL from '@repo/graphql/types';
|
|
import { formatDate } from '@repo/utils/datetime-format';
|
|
import Link from 'next/link';
|
|
|
|
type OrderComponentProps = GQL.OrderFieldsFragment & {
|
|
showDate?: boolean;
|
|
};
|
|
|
|
export function OrderCard({ documentId, showDate, ...order }: Readonly<OrderComponentProps>) {
|
|
const services = order?.services.map((service) => service?.name).join(', ');
|
|
const { data: { customer } = {} } = useCustomerQuery();
|
|
|
|
const client = order?.client;
|
|
const master = order?.slot?.master;
|
|
|
|
const avatarSource = client?.documentId === customer?.documentId ? master : client;
|
|
|
|
return (
|
|
<Link href={`/orders/${documentId}`} rel="noopener noreferrer">
|
|
<div className="relative flex items-center justify-between rounded-2xl bg-background p-2 px-6 dark:bg-primary/5">
|
|
{order.order_number && (
|
|
<span className="absolute left-1.5 top-1.5 flex size-5 items-center justify-center rounded-full border bg-background text-xs font-semibold text-muted-foreground shadow">
|
|
{order.order_number}
|
|
</span>
|
|
)}
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<div className="flex items-center gap-4">
|
|
{avatarSource && <UserAvatar {...avatarSource} size="xs" />}
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<ReadonlyTimeRange
|
|
datetimeEnd={order?.datetime_end}
|
|
datetimeStart={order?.datetime_start}
|
|
/>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
{showDate && order?.slot?.datetime_start
|
|
? `${formatDate(order?.slot?.datetime_start).user('DD.MM.YYYY')} • `
|
|
: ''}
|
|
{services}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="ml-2 shrink-0">{order?.state && getBadge(order.state)}</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|