order-card: add colors
This commit is contained in:
parent
e861e6e917
commit
f6154d5fc2
@ -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];
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user