highlight days with slots in schedule calendar

apps/web/actions/api/slots.ts

@@ -37,6 +37,12 @@ export async function getSlots(...variables: Parameters<SlotsService['getSlots']
   return service.getSlots(...variables);
 }
 
+export async function getSlotsOrders(...variables: Parameters<SlotsService['getSlotsOrders']>) {
+  const service = await getService();
+
+  return service.getSlotsOrders(...variables);
+}
+
 export async function updateSlot(...variables: Parameters<SlotsService['updateSlot']>) {
   const service = await getService();
 

apps/web/components/schedule/calendar.tsx

@@ -1,13 +1,34 @@
 'use client';
 
+import { useCustomerQuery } from '@/hooks/api/customers';
+import { useSlotsQuery } from '@/hooks/api/slots';
 import { useDateTimeStore } from '@/stores/datetime';
 import { Calendar } from '@repo/ui/components/ui/calendar';
 import dayjs from 'dayjs';
+import { useState } from 'react';
 
 export function ScheduleCalendar() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
   const selectedDate = useDateTimeStore((store) => store.date);
   const setSelectedDate = useDateTimeStore((store) => store.setDate);
 
+  const [currentMonthDate, setCurrentMonthDate] = useState(new Date());
+
+  const { data: { slots } = {} } = useSlotsQuery({
+    filters: {
+      date: {
+        gte: dayjs(currentMonthDate).startOf('month').format('YYYY-MM-DD'),
+        lte: dayjs(currentMonthDate).endOf('month').format('YYYY-MM-DD'),
+      },
+      master: {
+        documentId: {
+          eq: customer?.documentId,
+        },
+      },
+    },
+  });
+
   return (
     <Calendar
       className="bg-background"
@@ -15,6 +36,15 @@ export function ScheduleCalendar() {
         return dayjs().isAfter(dayjs(date), 'day');
       }}
       mode="single"
+      modifiers={{
+        hasEvent: (date) => {
+          return slots?.some((slot) => dayjs(slot?.date).isSame(date, 'day')) || false;
+        },
+      }}
+      modifiersClassNames={{
+        hasEvent: 'border-primary border-2 rounded-xl',
+      }}
+      onMonthChange={(date) => setCurrentMonthDate(date)}
       onSelect={(date) => {
         if (date) setSelectedDate(date);
       }}

apps/web/components/schedule/day-slots-list/index.tsx

@@ -2,16 +2,22 @@
 
 import { DaySlotAddForm } from './day-slot-add-form';
 import { SlotCard } from './slot-card';
-import { useSlotsQuery } from '@/hooks/api/slots';
+import { useCustomerQuery } from '@/hooks/api/customers';
+import { useMasterSlotsQuery } from '@/hooks/api/slots';
 import { useDateTimeStore } from '@/stores/datetime';
 import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { formatDate } from '@repo/utils/datetime-format';
 
 export function DaySlotsList() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
   const selectedDate = useDateTimeStore((store) => store.date);
 
-  const { data: { slots } = {}, isLoading } = useSlotsQuery({
-    filters: { date: { eq: formatDate(selectedDate).db() } },
+  const { data: { slots } = {}, isLoading } = useMasterSlotsQuery({
+    filters: {
+      date: { eq: formatDate(selectedDate).db() },
+      master: { documentId: { eq: customer?.documentId } },
+    },
   });
 
   if (isLoading) return <LoadingSpinner />;

apps/web/hooks/api/slots.ts

@@ -7,15 +7,20 @@ import {
   getAvailableTimeSlots,
   getSlot,
   getSlots,
+  getSlotsOrders,
   updateSlot,
 } from '@/actions/api/slots';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 
-export const useSlotsQuery = (variables: Parameters<typeof getSlots>[0]) => {
-  const { data: { customer } = {} } = useCustomerQuery();
+type UseMasterSlotsVariables = {
+  filters: Required<
+    Pick<NonNullable<Parameters<typeof getSlots>[0]['filters']>, 'date' | 'master'>
+  >;
+};
 
-  const masterId = variables.filters?.master?.documentId?.eq || customer?.documentId;
+export const useMasterSlotsQuery = (variables: UseMasterSlotsVariables) => {
+  const masterId = variables.filters?.master?.documentId?.eq;
   const date = variables.filters?.date?.eq;
 
   return useQuery({
@@ -24,6 +29,13 @@ export const useSlotsQuery = (variables: Parameters<typeof getSlots>[0]) => {
   });
 };
 
+export const useSlotsQuery = (variables: Parameters<typeof getSlots>[0]) => {
+  return useQuery({
+    queryFn: () => getSlots(variables),
+    queryKey: ['slots', variables],
+  });
+};
+
 export const useSlotQuery = (variables: Parameters<typeof getSlot>[0]) => {
   const { documentId } = variables;
 
@@ -33,6 +45,13 @@ export const useSlotQuery = (variables: Parameters<typeof getSlot>[0]) => {
   });
 };
 
+export const useSlotsOrdersQuery = (variables: Parameters<typeof getSlotsOrders>[0]) => {
+  return useQuery({
+    queryFn: () => getSlotsOrders(variables),
+    queryKey: ['slots-orders', variables],
+  });
+};
+
 export const useAvailableTimeSlotsQuery = (
   ...variables: Parameters<typeof getAvailableTimeSlots>
 ) => {

packages/graphql/api/slots.ts

@@ -132,6 +132,17 @@ export class SlotsService extends BaseService {
     return result.data;
   }
 
+  async getSlotsOrders(variables: VariablesOf<typeof GQL.GetSlotsOrdersDocument>) {
+    const { query } = await getClientWithToken();
+
+    const result = await query({
+      query: GQL.GetSlotsOrdersDocument,
+      variables,
+    });
+
+    return result.data;
+  }
+
   async updateSlot(variables: VariablesOf<typeof GQL.UpdateSlotDocument>) {
     const { mutate } = await getClientWithToken();