ccfc65ca9b
* refactor(profile): comment out change role feature * refactor(orders): update OrderServices and ServiceSelect components to utilize ServiceCard, and enhance service fields with duration in GraphQL types * refactor(schedule): implement forbidden order states to disable editing slots with active orders * fix(deploy): update SSH configuration to use dynamic port from secrets for improved flexibility * refactor(api/orders): simplify order creation logic by removing unnecessary validations and improving error handling * refactor(contact-row): replace role display logic with useIsMaster hook for improved clarity * refactor(profile/orders-list): update header text from "Общие записи" to "Недавние записи" for better clarity gql: GetOrders add sort slot.date:desc * refactor(profile/orders-list): enhance OrderCard component by adding avatarSource prop based on user role * feat(order-form): implement date selection with event highlighting and monthly view for available time slots * refactor(i18n/config): update timeZone from 'Europe/Amsterdam' to 'Europe/Moscow' * refactor(order-form/datetime-select): enhance date selection logic to include slot availability check * refactor(datetime-format): integrate dayjs timezone support with default Moscow timezone for date and time formatting * fix(contact-row): replace useIsMaster hook with isCustomerMaster utility for role display logic * refactor(service-card): replace formatTime with getMinutes for duration display * refactor(order-datetime): update date and time handling to use datetime_start and datetime_end for improved consistency * refactor(profile): streamline profile and slot pages by integrating session user retrieval and updating booking logic with BookButton component * fix(navigation): append query parameter to bottom-nav links and enhance back navigation logic in success page
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { ReadonlyTimeRange } from './time-range/readonly';
|
|
import { getBadge } from '@/components/shared/status';
|
|
import type * as GQL from '@repo/graphql/types';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
|
|
import { formatDate } from '@repo/utils/datetime-format';
|
|
import Link from 'next/link';
|
|
|
|
type OrderComponentProps = GQL.OrderFieldsFragment & {
|
|
avatarSource?: 'client' | 'master';
|
|
showDate?: boolean;
|
|
};
|
|
|
|
type OrderCustomer = GQL.CustomerFieldsFragment;
|
|
|
|
export function OrderCard({
|
|
avatarSource,
|
|
documentId,
|
|
showDate,
|
|
...order
|
|
}: Readonly<OrderComponentProps>) {
|
|
const services = order?.services.map((service) => service?.name).join(', ');
|
|
const customer = avatarSource === 'master' ? order?.slot?.master : order?.client;
|
|
|
|
return (
|
|
<Link href={`/orders/${documentId}`} rel="noopener noreferrer">
|
|
<div className="relative flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
|
|
{order.order_number && (
|
|
<span className="absolute left-1.5 top-1.5 z-10 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 flex-col">
|
|
<div className="flex items-center gap-4">
|
|
{customer && <CustomerAvatar customer={customer} />}
|
|
<div className="flex 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>
|
|
{order?.state && getBadge(order.state)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function CustomerAvatar({ customer }: { readonly customer: OrderCustomer }) {
|
|
if (!customer) return null;
|
|
|
|
return (
|
|
<Avatar>
|
|
<AvatarImage alt={customer.name} src={customer.photoUrl || ''} />
|
|
<AvatarFallback>{customer.name.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|