zapishis-client/apps/web/components/shared/order-card.tsx

'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>
  );
}