ccfc65ca9b
* refactor(profile): comment out change role feature * refactor(orders): update OrderServices and ServiceSelect components to utilize ServiceCard, and enhance service fields with duration in GraphQL types * refactor(schedule): implement forbidden order states to disable editing slots with active orders * fix(deploy): update SSH configuration to use dynamic port from secrets for improved flexibility * refactor(api/orders): simplify order creation logic by removing unnecessary validations and improving error handling * refactor(contact-row): replace role display logic with useIsMaster hook for improved clarity * refactor(profile/orders-list): update header text from "Общие записи" to "Недавние записи" for better clarity gql: GetOrders add sort slot.date:desc * refactor(profile/orders-list): enhance OrderCard component by adding avatarSource prop based on user role * feat(order-form): implement date selection with event highlighting and monthly view for available time slots * refactor(i18n/config): update timeZone from 'Europe/Amsterdam' to 'Europe/Moscow' * refactor(order-form/datetime-select): enhance date selection logic to include slot availability check * refactor(datetime-format): integrate dayjs timezone support with default Moscow timezone for date and time formatting * fix(contact-row): replace useIsMaster hook with isCustomerMaster utility for role display logic * refactor(service-card): replace formatTime with getMinutes for duration display * refactor(order-datetime): update date and time handling to use datetime_start and datetime_end for improved consistency * refactor(profile): streamline profile and slot pages by integrating session user retrieval and updating booking logic with BookButton component * fix(navigation): append query parameter to bottom-nav links and enhance back navigation logic in success page
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}
|
|
/>
|
|
);
|
|
}
|