From de7cdefcd59fa51a1ccd078bdbf71add61730d43 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Mon, 8 Sep 2025 18:35:52 +0300
Subject: [PATCH] feat(contacts): add DataNotFound component for empty states
 in contacts and services grids

- Integrated DataNotFound component to display a message when no contacts or services are found in the respective grids.
- Enhanced loading state handling in ServicesSelect and ScheduleCalendar components to improve user experience during data fetching.
---
 .../components/orders/order-form/contacts-grid.tsx  | 13 ++++++++++---
 .../orders/order-form/services-select.tsx           |  5 ++++-
 apps/web/components/schedule/calendar.tsx           |  3 ++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/orders/order-form/contacts-grid.tsx b/apps/web/components/orders/order-form/contacts-grid.tsx
index 90c627b..0bc8498 100644
--- a/apps/web/components/orders/order-form/contacts-grid.tsx
+++ b/apps/web/components/orders/order-form/contacts-grid.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
+import { DataNotFound } from '@/components/shared/alert';
 import { CardSectionHeader } from '@/components/ui';
 import { ContactsContextProvider } from '@/context/contacts';
 import { useCustomerContacts } from '@/hooks/api/contacts';
@@ -104,11 +105,15 @@ export const MastersGrid = withContext(ContactsContextProvider)(function () {
 
   if (isLoading) return <LoadingSpinner />;
 
+  const mastersContacts = (customer ? [{ ...customer, name: 'Я' }] : []).concat(
+    contacts.filter((contact) => contact.role === Enum_Customer_Role.Master),
+  );
+
+  if (!mastersContacts.length) return <DataNotFound title="Контакты не найдены" />;
+
   return (
     <ContactsGridBase
-      contacts={(customer ? [{ ...customer, name: 'Я' }] : []).concat(
-        contacts.filter((contact) => contact.role === Enum_Customer_Role.Master),
-      )}
+      contacts={mastersContacts}
       onSelect={(contactId) => setMasterId(contactId)}
       selected={masterId}
       title="Выбор мастера"
@@ -127,6 +132,8 @@ export const ClientsGrid = withContext(ContactsContextProvider)(function () {
 
   if (isLoading) return <LoadingSpinner />;
 
+  if (!contacts.length) return <DataNotFound title="Контакты не найдены" />;
+
   return (
     <ContactsGridBase
       contacts={contacts}
diff --git a/apps/web/components/orders/order-form/services-select.tsx b/apps/web/components/orders/order-form/services-select.tsx
index 853e5c4..5a026f3 100644
--- a/apps/web/components/orders/order-form/services-select.tsx
+++ b/apps/web/components/orders/order-form/services-select.tsx
@@ -6,12 +6,13 @@ import { ServiceCard } from '@/components/shared/service-card';
 import { useServicesQuery } from '@/hooks/api/services';
 import { useOrderStore } from '@/stores/order';
 import { type ServiceFieldsFragment } from '@repo/graphql/types';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { cn } from '@repo/ui/lib/utils';
 
 export function ServicesSelect() {
   const masterId = useOrderStore((store) => store.masterId);
 
-  const { data: { services } = {} } = useServicesQuery({
+  const { data: { services } = {}, isLoading } = useServicesQuery({
     filters: {
       active: {
         eq: true,
@@ -24,6 +25,8 @@ export function ServicesSelect() {
     },
   });
 
+  if (isLoading) return <LoadingSpinner />;
+
   if (!services?.length) return <DataNotFound title="Услуги не найдены" />;
 
   return (
diff --git a/apps/web/components/schedule/calendar.tsx b/apps/web/components/schedule/calendar.tsx
index 44cacf6..3eb7861 100644
--- a/apps/web/components/schedule/calendar.tsx
+++ b/apps/web/components/schedule/calendar.tsx
@@ -24,7 +24,7 @@ export function ScheduleCalendar() {
 
   const { endOfMonth, startOfMonth } = getDateUTCRange(currentMonthDate).month();
 
-  const { data: { slots } = {} } = useSlotsQuery({
+  const { data: { slots } = {}, isLoading } = useSlotsQuery({
     filters: {
       datetime_start: {
         gte: startOfMonth,
@@ -41,6 +41,7 @@ export function ScheduleCalendar() {
   return (
     <Calendar
       className="bg-background"
+      disabled={isLoading}
       // disabled={(date) => {
       //   return dayjs().isAfter(dayjs(date), 'day');
       // }}