33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
'use client';
|
||
|
||
import { DaySlotAddForm } from './day-slot-add-form';
|
||
import { SlotCard } from './slot-card';
|
||
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 } = useMasterSlotsQuery({
|
||
filters: {
|
||
date: { eq: formatDate(selectedDate).db() },
|
||
master: { documentId: { eq: customer?.documentId } },
|
||
},
|
||
});
|
||
|
||
if (isLoading) return <LoadingSpinner />;
|
||
|
||
return (
|
||
<div className="flex flex-col space-y-2 px-4">
|
||
<h1 className="font-bold">Слоты</h1>
|
||
{slots?.map((slot) => slot && <SlotCard key={slot.documentId} {...slot} />)}
|
||
<DaySlotAddForm />
|
||
</div>
|
||
);
|
||
}
|