refactor(orders-list): replace HorizontalCalendar with Calendar component and update date selection logic for improved clarity and functionality

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

@@ -3,7 +3,7 @@
 import { useCustomerQuery, useIsMaster } from '@/hooks/api/customers';
 import { useOrdersQuery } from '@/hooks/api/orders';
 import { useDateTimeStore } from '@/stores/datetime';
-import { HorizontalCalendar } from '@repo/ui/components/ui/horizontal-calendar';
+import { Calendar } from '@repo/ui/components/ui/calendar';
 import dayjs from 'dayjs';
 import { sift } from 'radashi';
 import { useMemo, useState } from 'react';
@@ -15,26 +15,32 @@ export function DateSelect() {
 
   const [currentMonthDate, setCurrentMonthDate] = useState(new Date());
 
-  const { data: { orders } = { orders: [] } } = useOrdersQuery({
-    filters: {
-      client: {
-        documentId: {
-          eq: isMaster ? undefined : customer?.documentId,
-        },
-      },
-      slot: {
-        datetime_start: {
-          gte: dayjs(currentMonthDate).startOf('month').toISOString(),
-          lte: dayjs(currentMonthDate).endOf('month').toISOString(),
-        },
-        master: {
+  const clientId = isMaster ? undefined : customer?.documentId;
+  const masterId = isMaster ? customer?.documentId : undefined;
+
+  const { data: { orders } = { orders: [] } } = useOrdersQuery(
+    {
+      filters: {
+        client: {
           documentId: {
-            eq: isMaster ? customer?.documentId : undefined,
+            eq: clientId,
+          },
+        },
+        slot: {
+          datetime_start: {
+            gte: dayjs(currentMonthDate).startOf('month').toISOString(),
+            lte: dayjs(currentMonthDate).endOf('month').toISOString(),
+          },
+          master: {
+            documentId: {
+              eq: masterId,
+            },
           },
         },
       },
     },
-  });
+    Boolean(clientId) || Boolean(masterId),
+  );
 
   const daysWithOrders = useMemo(() => {
     return sift(
@@ -50,11 +56,19 @@ export function DateSelect() {
   const selectedDate = useDateTimeStore((store) => store.date);
 
   return (
-    <HorizontalCalendar
-      daysWithOrders={daysWithOrders}
-      onDateChange={setSelectedDate}
-      onMonthChange={(date) => setCurrentMonthDate(date)}
-      selectedDate={selectedDate}
+    <Calendar
+      className="bg-background"
+      disabled={(date) => {
+        return !daysWithOrders?.some((day) => dayjs(day).isSame(date, 'day'));
+      }}
+      mode="single"
+      onMonthChange={(month) => {
+        if (month) setCurrentMonthDate(month);
+      }}
+      onSelect={(date) => {
+        if (date) setSelectedDate(date);
+      }}
+      selected={selectedDate}
     />
   );
 }

apps/web/components/orders/orders-list/index.tsx

@@ -18,10 +18,12 @@ export function ClientsOrdersList() {
     {
       filters: {
         slot: {
-          datetime_start: {
-            gte: startOfDay,
-            lt: endOfDay,
-          },
+          datetime_start: selectedDate
+            ? {
+                gte: startOfDay,
+                lt: endOfDay,
+              }
+            : undefined,
           master: {
             documentId: {
               eq: isMaster ? customer?.documentId : undefined,
@@ -29,8 +31,11 @@ export function ClientsOrdersList() {
           },
         },
       },
+      pagination: {
+        limit: selectedDate ? undefined : 10,
+      },
     },
-    Boolean(customer?.documentId) && Boolean(selectedDate) && isMaster,
+    Boolean(customer?.documentId) && isMaster,
   );
 
   if (!orders?.length || isLoading || !isMaster) return null;
@@ -38,7 +43,7 @@ export function ClientsOrdersList() {
   return (
     <div className="flex flex-col space-y-2">
       <h1 className="font-bold">Записи клиентов</h1>
-      {orders?.map((order) => order && <OrderCard key={order.documentId} {...order} />)}
+      {orders?.map((order) => order && <OrderCard key={order.documentId} showDate {...order} />)}
     </div>
   );
 }
@@ -58,14 +63,19 @@ export function OrdersList() {
           },
         },
         slot: {
-          datetime_start: {
-            gte: startOfDay,
-            lt: endOfDay,
-          },
+          datetime_start: selectedDate
+            ? {
+                gte: startOfDay,
+                lt: endOfDay,
+              }
+            : undefined,
         },
       },
+      pagination: {
+        limit: selectedDate ? undefined : 10,
+      },
     },
-    Boolean(customer?.documentId) && Boolean(selectedDate),
+    Boolean(customer?.documentId),
   );
 
   if (!orders?.length || isLoading) return null;
@@ -74,7 +84,8 @@ export function OrdersList() {
     <div className="flex flex-col space-y-2">
       <h1 className="font-bold">Ваши записи</h1>
       {orders?.map(
-        (order) => order && <OrderCard avatarSource="master" key={order.documentId} {...order} />,
+        (order) =>
+          order && <OrderCard avatarSource="master" key={order.documentId} showDate {...order} />,
       )}
     </div>
   );

apps/web/components/schedule/day-slots-list/day-slot-add-form.tsx

@@ -22,7 +22,7 @@ export const DaySlotAddForm = withContext(ScheduleStoreProvider)(function () {
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
-    if (startTime && endTime) {
+    if (selectedDate && startTime && endTime) {
       const datetimeStart = combineDateAndTimeToUTC(selectedDate, startTime);
       const datetimeEnd = combineDateAndTimeToUTC(selectedDate, endTime);
       addSlot({

apps/web/stores/lib/slices/datetime-slice.ts

@@ -1,14 +1,14 @@
 import { type StateCreator } from 'zustand';
 
 export type DateTimeSlice = {
-  date: Date;
+  date: Date | undefined;
   setDate: (date: Date) => void;
   setTime: (time: null | string) => void;
   time: null | string;
 };
 
 export const createDateTimeSlice: StateCreator<DateTimeSlice> = (set) => ({
-  date: new Date(),
+  date: undefined,
   setDate: (date) => set({ date }),
   setTime: (time) => set({ time }),
   time: null,