order-card: add colors

This commit is contained in:
vchikalkin 2025-06-24 12:42:13 +03:00
parent e861e6e917
commit f6154d5fc2

View File

@ -1,21 +1,16 @@
/* eslint-disable canonical/id-match */
'use client';
import { ReadonlyTimeRange } from './time-range/readonly';
import { Enum_Order_State } from '@repo/graphql/types';
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 { cn } from '@repo/ui/lib/utils';
import Link from 'next/link';
type OrderClient = NonNullable<OrderComponentProps>['client'];
type OrderComponentProps = GQL.OrderFieldsFragment;
export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps>) {
const isCompleted = order?.state === Enum_Order_State.Completed;
const isCancelled = order?.state === Enum_Order_State.Cancelled;
const services = order?.services.map((service) => service?.name).join(', ');
return (
@ -32,16 +27,7 @@ export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps
</div>
</div>
{order?.state && (
<Badge
className={cn(
isCompleted
? 'bg-green-100 text-green-500 dark:bg-green-700 dark:text-green-100'
: '',
isCancelled ? 'bg-red-100 text-red-500 dark:bg-red-700 dark:text-red-100' : '',
)}
>
{getBadgeText(order?.state)}
</Badge>
<Badge className={getBadgeStyles(order.state)}>{getBadgeText(order.state)}</Badge>
)}
</div>
</Link>
@ -62,13 +48,27 @@ function ClientAvatar({ client }: { readonly client: OrderClient }) {
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];
}