extend slot card information

apps/web/components/schedule/time-slots/components/slot-card.tsx

@@ -1,34 +1,63 @@
+/* eslint-disable canonical/id-match */
 'use client';
 import { type SlotProps } from '../../types';
 import { ContextProvider } from '../context';
 import { ReadonlyTimeRange } from './time-pair';
 import { useSlotQuery } from '@/hooks/slots';
 import { withContext } from '@/utils/context';
+import { Enum_Slot_State } from '@repo/graphql/types';
 import { Badge } from '@repo/ui/components/ui/badge';
+import { cn } from '@repo/ui/lib/utils';
 import Link from 'next/link';
 
+const MAP_BADGE_TEXT: Record<Enum_Slot_State, string> = {
+  closed: 'Закрыто',
+  open: 'Открыто',
+  reserved: 'Зарезервировано',
+};
+
+function getBadgeText(state: Enum_Slot_State) {
+  if (!state) return '';
+
+  return MAP_BADGE_TEXT[state];
+}
+
 export const SlotCard = withContext(ContextProvider)(function (props: Readonly<SlotProps>) {
   const { documentId } = props;
 
-  const { data: slotData } = useSlotQuery({ documentId });
-  if (!slotData?.slot) return null;
+  const { data } = useSlotQuery({ documentId });
+  if (!data?.slot) return null;
 
-  const ordersNumber = slotData.slot.orders?.length;
+  const ordersNumber = data.slot.orders?.length;
   const hasOrders = Boolean(ordersNumber);
 
+  const isOpened = data?.slot?.state === Enum_Slot_State.Open;
+  const isClosed = data?.slot?.state === Enum_Slot_State.Closed;
+
   return (
     <Link href={`/profile/schedule/slot/${documentId}`} rel="noopener noreferrer">
       <div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
-        <ReadonlyTimeRange {...slotData.slot} />
-        <div>
-          {hasOrders ? (
-            <Badge variant="success">Есть записи</Badge>
-          ) : (
-            <Badge className="bg-transparent text-xs font-normal text-muted-foreground">
-              Свободно
-            </Badge>
-          )}
+        <div className="flex flex-col gap-2">
+          <ReadonlyTimeRange {...data.slot} />
+          <span
+            className={cn(
+              'text-xs font-normal',
+              hasOrders ? 'font-bold text-foreground' : 'text-muted-foreground',
+            )}
+          >
+            {hasOrders ? 'Есть записи' : 'Свободно'}
+          </span>
         </div>
+        {data.slot.state && (
+          <Badge
+            className={cn(
+              isOpened ? 'bg-green-100 text-green-500 dark:bg-green-700 dark:text-green-100' : '',
+              isClosed ? 'bg-red-100 text-red-500 dark:bg-red-700 dark:text-red-100' : '',
+            )}
+          >
+            {getBadgeText(data.slot.state)}
+          </Badge>
+        )}
       </div>
     </Link>
   );

packages/ui/src/components/ui/badge.tsx

@@ -16,8 +16,6 @@ const badgeVariants = cva(
         outline: 'text-foreground',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        success: 'border-transparent bg-success text-success-foreground hover:bg-success/80',
-        warning: 'border-transparent bg-warning text-warning-foreground hover:bg-warning/80',
       },
     },
   },

packages/ui/src/globals.css

@@ -30,10 +30,6 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --warning: 31 96% 53%;
-    --warning-foreground: 0 0% 98%;
-    --success: 100 77% 44%;
-    --success-foreground: 0 0% 98%;
   }
 
   .dark {
@@ -62,10 +58,6 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --warning: 31 96% 53%;
-    --warning-foreground: 0 0% 98%;
-    --success: 100 77% 33%;
-    --success-foreground: 0 0% 98%;
   }
 }
 

packages/ui/tailwind.config.ts

@@ -65,14 +65,6 @@ const config = {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))',
         },
-        success: {
-          DEFAULT: 'hsl(var(--success))',
-          foreground: 'hsl(var(--success-foreground))',
-        },
-        warning: {
-          DEFAULT: 'hsl(var(--warning))',
-          foreground: 'hsl(var(--warning-foreground))',
-        },
       },
       keyframes: {
         'accordion-down': {