58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
'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 { getDateUTCRange } from '@repo/utils/datetime-format';
|
|
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 { endOfMonth, startOfMonth } = getDateUTCRange(currentMonthDate).month();
|
|
|
|
const { data: { slots } = {} } = useSlotsQuery({
|
|
filters: {
|
|
datetime_start: {
|
|
gte: startOfMonth,
|
|
lte: endOfMonth,
|
|
},
|
|
master: {
|
|
documentId: {
|
|
eq: customer?.documentId,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Calendar
|
|
className="bg-background"
|
|
disabled={(date) => {
|
|
return dayjs().isAfter(dayjs(date), 'day');
|
|
}}
|
|
mode="single"
|
|
modifiers={{
|
|
hasEvent: (date) => {
|
|
return slots?.some((slot) => dayjs(slot?.datetime_start).isSame(date, 'day')) || false;
|
|
},
|
|
}}
|
|
modifiersClassNames={{
|
|
hasEvent: 'border-primary border-2 rounded-xl',
|
|
}}
|
|
onMonthChange={(date) => setCurrentMonthDate(date)}
|
|
onSelect={(date) => {
|
|
if (date) setSelectedDate(date);
|
|
}}
|
|
selected={selectedDate}
|
|
/>
|
|
);
|
|
}
|