75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { ReadonlyTimeRange } from './time-range/readonly';
|
|
import { type Enum_Order_State } from '@repo/graphql/types';
|
|
import type * as GQL from '@repo/graphql/types';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
|
|
import { Badge } from '@repo/ui/components/ui/badge';
|
|
import Link from 'next/link';
|
|
|
|
type OrderClient = NonNullable<OrderComponentProps>['client'];
|
|
type OrderComponentProps = GQL.OrderFieldsFragment;
|
|
|
|
export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps>) {
|
|
const services = order?.services.map((service) => service?.name).join(', ');
|
|
|
|
return (
|
|
<Link href={`/orders/${documentId}`} rel="noopener noreferrer">
|
|
<div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-4">
|
|
<ClientAvatar client={order.client} />
|
|
<div className="flex flex-col">
|
|
<ReadonlyTimeRange timeEnd={order?.time_end} timeStart={order?.time_start} />
|
|
<span className="truncate text-xs text-muted-foreground">{services}</span>
|
|
</div>
|
|
{/* <span className="text-xs text-foreground">{clientName}</span> */}
|
|
</div>
|
|
</div>
|
|
{order?.state && (
|
|
<Badge className={getBadgeStyles(order.state)}>{getBadgeText(order.state)}</Badge>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function ClientAvatar({ client }: { readonly client: OrderClient }) {
|
|
if (!client) return null;
|
|
|
|
return (
|
|
<Avatar>
|
|
<AvatarImage alt={client.name} src={client.photoUrl || ''} />
|
|
<AvatarFallback>{client.name.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
const MAP_BADGE_TEXT: Record<Enum_Order_State, string> = {
|
|
approved: 'Подтверждено',
|
|
cancelled: 'Отменено',
|
|
cancelling: 'Отменяется',
|
|
completed: 'Завершено',
|
|
created: 'Создано',
|
|
scheduled: 'Запланировано',
|
|
};
|
|
|
|
const MAP_BADGE_STYLES: Record<Enum_Order_State, string> = {
|
|
approved: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100',
|
|
cancelled: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100',
|
|
cancelling: 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-100',
|
|
completed: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100',
|
|
created: '',
|
|
scheduled: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-100',
|
|
};
|
|
|
|
function getBadgeStyles(state: Enum_Order_State) {
|
|
if (!state) return '';
|
|
return MAP_BADGE_STYLES[state];
|
|
}
|
|
|
|
function getBadgeText(state: Enum_Order_State) {
|
|
if (!state) return '';
|
|
return MAP_BADGE_TEXT[state];
|
|
}
|