highlight days in horizontal calendar

apps/web/components/orders/orders-list/date-select.tsx

@@ -1,10 +1,51 @@
+/* eslint-disable canonical/id-match */
 'use client';
+
+import { useCustomerQuery } from '@/hooks/api/customers';
+import { useOrdersQuery } from '@/hooks/api/orders';
 import { useDateTimeStore } from '@/stores/datetime';
+import { Enum_Customer_Role } from '@repo/graphql/types';
 import { HorizontalCalendar } from '@repo/ui/components/ui/horizontal-calendar';
+import dayjs from 'dayjs';
+import { useState } from 'react';
 
 export function DateSelect() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
+  const isMaster = customer?.role === Enum_Customer_Role.Master;
+
+  const [currentMonthDate, setCurrentMonthDate] = useState(new Date());
+
+  const { data: { orders } = {} } = useOrdersQuery({
+    filters: {
+      client: {
+        documentId: {
+          eq: isMaster ? undefined : customer?.documentId,
+        },
+      },
+      slot: {
+        date: {
+          gte: dayjs(currentMonthDate).startOf('month').format('YYYY-MM-DD'),
+          lte: dayjs(currentMonthDate).endOf('month').format('YYYY-MM-DD'),
+        },
+        master: {
+          documentId: {
+            eq: isMaster ? customer?.documentId : undefined,
+          },
+        },
+      },
+    },
+  });
+
   const setSelectedDate = useDateTimeStore((store) => store.setDate);
   const selectedDate = useDateTimeStore((store) => store.date);
 
-  return <HorizontalCalendar onDateChange={setSelectedDate} selectedDate={selectedDate} />;
+  return (
+    <HorizontalCalendar
+      daysWithOrders={orders?.map((order) => new Date(order?.slot?.date))}
+      onDateChange={setSelectedDate}
+      onMonthChange={(date) => setCurrentMonthDate(date)}
+      selectedDate={selectedDate}
+    />
+  );
 }

packages/ui/src/components/ui/horizontal-calendar.tsx

@@ -16,13 +16,17 @@ import { useMemo, useRef, useState } from 'react';
 
 type HorizontalCalendarProps = {
   readonly className?: string;
+  readonly daysWithOrders?: Date[];
   readonly onDateChange: (date: Date) => void;
+  readonly onMonthChange?: (date: Date) => void;
   readonly selectedDate: Date;
 };
 
 export function HorizontalCalendar({
   className,
+  daysWithOrders,
   onDateChange,
+  onMonthChange,
   selectedDate,
 }: HorizontalCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -49,12 +53,14 @@ export function HorizontalCalendar({
     const newDate = addMonths(currentMonthDate, -1);
     setCurrentMonthDate(newDate);
     setTimeout(scrollToStart, 0);
+    onMonthChange?.(newDate);
   };
 
   const scrollNext = () => {
     const newDate = addMonths(currentMonthDate, 1);
     setCurrentMonthDate(newDate);
     setTimeout(scrollToStart, 0);
+    onMonthChange?.(newDate);
   };
 
   return (
@@ -80,25 +86,32 @@ export function HorizontalCalendar({
 
       <div className="relative">
         <div className="scrollbar-hide flex snap-x overflow-x-auto pb-2" ref={scrollRef}>
-          {dates.map((date) => (
-            <div
-              className="shrink-0 snap-start px-1 first:pl-0 last:pr-0"
-              data-date={date.toISOString()}
-              key={date.toISOString()}
-            >
-              <Button
-                className={cn(
-                  'w-14 flex-col h-auto py-2 px-0',
-                  isSameDay(date, selectedDate) && 'bg-primary text-primary-foreground',
-                )}
-                onClick={() => onDateChange(date)}
-                variant={isSameDay(date, selectedDate) ? 'default' : 'outline'}
+          {dates.map((date) => {
+            const hasOrders = daysWithOrders?.some((orderDate) => isSameDay(orderDate, date));
+
+            return (
+              <div
+                className="shrink-0 snap-start px-1 first:pl-0 last:pr-0"
+                data-date={date.toISOString()}
+                key={date.toISOString()}
               >
-                <span className="text-xs font-normal">{format(date, 'EEE', { locale: ru })}</span>
-                <span className="text-lg">{format(date, 'd')}</span>
-              </Button>
-            </div>
-          ))}
+                <Button
+                  className={cn(
+                    'w-14 flex-col h-auto py-2 px-0 relative',
+                    isSameDay(date, selectedDate) && 'bg-primary text-primary-foreground',
+                  )}
+                  onClick={() => onDateChange(date)}
+                  variant={isSameDay(date, selectedDate) ? 'default' : 'outline'}
+                >
+                  <span className="text-xs font-normal">{format(date, 'EEE', { locale: ru })}</span>
+                  <span className="text-lg">{format(date, 'd')}</span>
+                  {hasOrders && (
+                    <span className="absolute bottom-0 right-1 text-xs font-normal">•</span>
+                  )}
+                </Button>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>