remove components/common/spinner

* refactor customer api

* refactor slots api

* hooks/customers: use invalidateQueries

* refactor services api

* optimize hooks queryKey

* refactor orders api

* typo refactor hooks

* fix telegramId type (number)

* fix bot with new api

* rename customers masters & clients query

* fix useClientsQuery & useMastersQuery query

* new line after 'use client' & 'use server' directives

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

apps/bot/src/index.ts

@@ -3,12 +3,7 @@
 import { env as environment } from './config/env';
 import { commandsList, KEYBOARD_REMOVE, KEYBOARD_SHARE_PHONE, MESSAGE_NOT_MASTER } from './message';
 import { normalizePhoneNumber } from './utils/phone';
-import {
-  createOrUpdateUser,
-  getCustomer,
-  updateCustomerMaster,
-  updateCustomerProfile,
-} from '@repo/graphql/api';
+import { CustomersService } from '@repo/graphql/api/customers';
 import { Enum_Customer_Role } from '@repo/graphql/types';
 import { Telegraf } from 'telegraf';
 import { message } from 'telegraf/filters';
@@ -16,8 +11,10 @@ import { message } from 'telegraf/filters';
 const bot = new Telegraf(environment.BOT_TOKEN);
 
 bot.start(async (context) => {
-  const data = await getCustomer({ telegramId: context.from.id });
-  const customer = data?.data?.customers?.at(0);
+  const telegramId = context.from.id;
+
+  const customerService = new CustomersService({ telegramId });
+  const { customer } = await customerService.getCustomer({ telegramId });
 
   if (customer) {
     return context.reply(
@@ -34,8 +31,10 @@ bot.start(async (context) => {
 });
 
 bot.command('addcontact', async (context) => {
-  const data = await getCustomer({ telegramId: context.from.id });
-  const customer = data?.data?.customers?.at(0);
+  const telegramId = context.from.id;
+
+  const customerService = new CustomersService({ telegramId });
+  const { customer } = await customerService.getCustomer({ telegramId });
 
   if (!customer) {
     return context.reply(
@@ -52,8 +51,10 @@ bot.command('addcontact', async (context) => {
 });
 
 bot.command('becomemaster', async (context) => {
-  const data = await getCustomer({ telegramId: context.from.id });
-  const customer = data?.data?.customers?.at(0);
+  const telegramId = context.from.id;
+
+  const customerService = new CustomersService({ telegramId });
+  const { customer } = await customerService.getCustomer({ telegramId });
 
   if (!customer) {
     return context.reply('Сначала поделитесь своим номером телефона.', KEYBOARD_SHARE_PHONE);
@@ -63,10 +64,13 @@ bot.command('becomemaster', async (context) => {
     return context.reply('Вы уже являетесь мастером.');
   }
 
-  const response = await updateCustomerProfile({
-    data: { role: Enum_Customer_Role.Master },
-    documentId: customer.documentId,
-  }).catch((error) => {
+  const response = await customerService
+    .updateCustomer({
+      data: {
+        role: Enum_Customer_Role.Master,
+      },
+    })
+    .catch((error) => {
       context.reply('Произошла ошибка.\n' + error);
     });
 
@@ -76,8 +80,10 @@ bot.command('becomemaster', async (context) => {
 });
 
 bot.on(message('contact'), async (context) => {
-  const data = await getCustomer({ telegramId: context.from.id });
-  const customer = data?.data?.customers?.at(0);
+  const telegramId = context.from.id;
+
+  const customerService = new CustomersService({ telegramId });
+  const { customer } = await customerService.getCustomer({ telegramId });
 
   const isRegistration = !customer;
 
@@ -86,11 +92,13 @@ bot.on(message('contact'), async (context) => {
   const phone = normalizePhoneNumber(contact.phone_number);
 
   if (isRegistration) {
-    const response = await createOrUpdateUser({
+    const response = await customerService
+      .createCustomer({
         name,
         phone,
         telegramId: context.from.id,
-    }).catch((error) => {
+      })
+      .catch((error) => {
         context.reply('Произошла ошибка.\n' + error);
       });
 
@@ -107,12 +115,19 @@ bot.on(message('contact'), async (context) => {
     }
 
     try {
-      await createOrUpdateUser({ name, phone });
+      const createCustomerResult = await customerService.createCustomer({ name, phone });
 
-      await updateCustomerMaster({
-        masterId: customer.documentId,
-        operation: 'add',
-        phone,
+      const documentId = createCustomerResult?.createCustomer?.documentId;
+
+      if (!documentId) {
+        throw new Error('Customer not created');
+      }
+
+      const masters = [customer.documentId];
+
+      await customerService.addMasters({
+        data: { masters },
+        documentId,
       });
 
       return context.reply(

apps/web/actions/api/customers.ts

@@ -0,0 +1,42 @@
+'use server';
+
+import { useService } from './lib/service';
+import { CustomersService } from '@repo/graphql/api/customers';
+
+const getService = useService(CustomersService);
+
+export async function addMasters(...variables: Parameters<CustomersService['addMasters']>) {
+  const service = await getService();
+
+  return service.addMasters(...variables);
+}
+
+export async function createCustomer(...variables: Parameters<CustomersService['createCustomer']>) {
+  const service = await getService();
+
+  return service.createCustomer(...variables);
+}
+
+export async function getClients(...variables: Parameters<CustomersService['getClients']>) {
+  const service = await getService();
+
+  return service.getClients(...variables);
+}
+
+export async function getCustomer(...variables: Parameters<CustomersService['getCustomer']>) {
+  const service = await getService();
+
+  return service.getCustomer(...variables);
+}
+
+export async function getMasters(...variables: Parameters<CustomersService['getMasters']>) {
+  const service = await getService();
+
+  return service.getMasters(...variables);
+}
+
+export async function updateCustomer(...variables: Parameters<CustomersService['updateCustomer']>) {
+  const service = await getService();
+
+  return service.updateCustomer(...variables);
+}

apps/web/actions/api/lib/service.ts

@@ -0,0 +1,14 @@
+import { authOptions } from '@/config/auth';
+import { type BaseService } from '@repo/graphql/api/base';
+import { getServerSession } from 'next-auth';
+
+export function useService<T extends typeof BaseService>(service: T) {
+  return async function () {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.telegramId) throw new Error('Unauthorized');
+
+    const customer = { telegramId: session.user.telegramId };
+
+    return new service(customer) as InstanceType<T>;
+  };
+}

apps/web/actions/api/orders.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import { useService } from './lib/service';
+import { OrdersService } from '@repo/graphql/api/orders';
+
+const getServicesService = useService(OrdersService);
+
+export async function createOrder(...variables: Parameters<OrdersService['createOrder']>) {
+  const service = await getServicesService();
+
+  return service.createOrder(...variables);
+}
+
+export async function getOrder(...variables: Parameters<OrdersService['getOrder']>) {
+  const service = await getServicesService();
+
+  return service.getOrder(...variables);
+}
+
+export async function getOrders(...variables: Parameters<OrdersService['getOrders']>) {
+  const service = await getServicesService();
+
+  return service.getOrders(...variables);
+}

apps/web/actions/api/services.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import { useService } from './lib/service';
+import { ServicesService } from '@repo/graphql/api/services';
+
+const getServicesService = useService(ServicesService);
+
+export async function getService(...variables: Parameters<ServicesService['getService']>) {
+  const service = await getServicesService();
+
+  return service.getService(...variables);
+}
+
+export async function getServices(...variables: Parameters<ServicesService['getServices']>) {
+  const service = await getServicesService();
+
+  return service.getServices(...variables);
+}

apps/web/actions/api/slots.ts

@@ -0,0 +1,44 @@
+'use server';
+
+import { useService } from './lib/service';
+import { SlotsService } from '@repo/graphql/api/slots';
+
+const getService = useService(SlotsService);
+
+export async function createSlot(...variables: Parameters<SlotsService['createSlot']>) {
+  const service = await getService();
+
+  return service.createSlot(...variables);
+}
+
+export async function deleteSlot(...variables: Parameters<SlotsService['deleteSlot']>) {
+  const service = await getService();
+
+  return service.deleteSlot(...variables);
+}
+
+export async function getAvailableTimeSlots(
+  ...variables: Parameters<SlotsService['getAvailableTimeSlots']>
+) {
+  const service = await getService();
+
+  return service.getAvailableTimeSlots(...variables);
+}
+
+export async function getSlot(...variables: Parameters<SlotsService['getSlot']>) {
+  const service = await getService();
+
+  return service.getSlot(...variables);
+}
+
+export async function getSlots(...variables: Parameters<SlotsService['getSlots']>) {
+  const service = await getService();
+
+  return service.getSlots(...variables);
+}
+
+export async function updateSlot(...variables: Parameters<SlotsService['updateSlot']>) {
+  const service = await getService();
+
+  return service.updateSlot(...variables);
+}

apps/web/actions/contacts.ts

@@ -1,26 +0,0 @@
-'use server';
-import { authOptions } from '@/config/auth';
-import { getCustomerClients, getCustomerMasters } from '@repo/graphql/api';
-import { getServerSession } from 'next-auth/next';
-
-export async function getClients() {
-  const session = await getServerSession(authOptions);
-  if (!session) throw new Error('Missing session');
-
-  const { user } = session;
-
-  const response = await getCustomerClients({ telegramId: user?.telegramId });
-
-  return response.data?.customers?.at(0);
-}
-
-export async function getMasters() {
-  const session = await getServerSession(authOptions);
-  if (!session) throw new Error('Missing session');
-
-  const { user } = session;
-
-  const response = await getCustomerMasters({ telegramId: user?.telegramId });
-
-  return response.data?.customers?.at(0);
-}

apps/web/actions/orders.ts

@@ -1,4 +0,0 @@
-'use server';
-import * as api from '@repo/graphql/api';
-
-export const getOrder = api.getOrder;

apps/web/actions/profile.ts

@@ -1,34 +0,0 @@
-'use server';
-import { authOptions } from '@/config/auth';
-import { getCustomer, updateCustomerProfile } from '@repo/graphql/api';
-import { type CustomerInput, type GetCustomerQueryVariables } from '@repo/graphql/types';
-import { getServerSession } from 'next-auth/next';
-
-export async function getProfile(input?: GetCustomerQueryVariables) {
-  const session = await getServerSession(authOptions);
-  if (!session) throw new Error('Missing session');
-
-  const { user } = session;
-  const telegramId = input?.telegramId || user?.telegramId;
-
-  const { data } = await getCustomer({ telegramId });
-  const customer = data?.customers?.at(0);
-
-  return customer;
-}
-
-export async function updateProfile(input: CustomerInput) {
-  const session = await getServerSession(authOptions);
-  if (!session) throw new Error('Missing session');
-
-  const { user } = session;
-
-  const { data } = await getCustomer({ telegramId: user?.telegramId });
-  const customer = data.customers.at(0);
-  if (!customer) throw new Error('Customer not found');
-
-  await updateCustomerProfile({
-    data: input,
-    documentId: customer?.documentId,
-  });
-}

apps/web/actions/session.ts

@@ -0,0 +1,13 @@
+'use server';
+
+import { authOptions } from '@/config/auth';
+import { getServerSession } from 'next-auth/next';
+
+export async function getSessionUser() {
+  const session = await getServerSession(authOptions);
+  const user = session?.user;
+
+  if (!user?.telegramId) throw new Error('Missing session');
+
+  return user;
+}

apps/web/actions/slots.ts

@@ -1,60 +0,0 @@
-'use server';
-// eslint-disable-next-line sonarjs/no-internal-api-use
-import type * as ApolloTypes from '../../../packages/graphql/node_modules/@apollo/client/core';
-import { getProfile } from './profile';
-import { formatDate, formatTime } from '@/utils/date';
-import * as api from '@repo/graphql/api';
-import type * as GQL from '@repo/graphql/types';
-
-type AddSlotInput = Omit<GQL.CreateSlotMutationVariables['input'], 'master'>;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type FixTypescriptCringe = ApolloTypes.FetchResult;
-
-export async function addSlot(input: AddSlotInput) {
-  const customer = await getProfile();
-
-  return api.createSlot({
-    ...input,
-    date: formatDate(input.date).db(),
-    master: customer?.documentId,
-    time_end: formatTime(input.time_end).db(),
-    time_start: formatTime(input.time_start).db(),
-  });
-}
-
-export async function getSlots(input: GQL.GetSlotsQueryVariables) {
-  const customer = await getProfile();
-
-  if (!customer?.documentId) throw new Error('Customer not found');
-
-  return api.getSlots({
-    filters: {
-      ...input.filters,
-      master: {
-        documentId: {
-          eq: customer.documentId,
-        },
-      },
-    },
-  });
-}
-
-export async function updateSlot(input: GQL.UpdateSlotMutationVariables) {
-  const customer = await getProfile();
-
-  if (!customer?.documentId) throw new Error('Customer not found');
-
-  return api.updateSlot({
-    ...input,
-    data: {
-      ...input.data,
-      date: input.data?.date ? formatDate(input.data.date).db() : undefined,
-      time_end: input.data?.time_end ? formatTime(input.data.time_end).db() : undefined,
-      time_start: input.data?.time_start ? formatTime(input.data.time_start).db() : undefined,
-    },
-  });
-}
-
-export const getSlot = api.getSlot;
-export const deleteSlot = api.deleteSlot;

apps/web/app/(auth)/browser/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable promise/prefer-await-to-then */
 'use client';
+
 import { getTelegramUser } from '@/mocks/get-telegram-user';
 import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { signIn, useSession } from 'next-auth/react';
@@ -21,7 +22,7 @@ export default function Auth() {
         signIn('telegram', {
           callbackUrl: '/profile',
           redirect: false,
-          telegramId: String(user?.id),
+          telegramId: user?.id,
         });
       });
     }

apps/web/app/(auth)/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { useClientOnce } from '@/hooks/telegram';
 import { isTMA } from '@telegram-apps/sdk-react';
 import { redirect } from 'next/navigation';

apps/web/app/(auth)/telegram/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable promise/prefer-await-to-then */
 'use client';
+
 import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
 import { signIn, useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
@@ -28,7 +29,7 @@ function useAuth() {
       signIn('telegram', {
         callbackUrl: '/profile',
         redirect: false,
-        telegramId: String(initDataUser.id),
+        telegramId: initDataUser.id,
       }).then(() => redirect('/profile'));
     }
   }, [initDataUser?.id, status]);

apps/web/app/(main)/contacts/page.tsx

@@ -1,10 +1,10 @@
 import { ContactsFilter, ContactsList } from '@/components/contacts';
-import { ContactsFilterProvider } from '@/context/contacts-filter';
+import { ContactsContextProvider } from '@/context/contacts';
 import { Card } from '@repo/ui/components/ui/card';
 
 export default function ContactsPage() {
   return (
-    <ContactsFilterProvider>
+    <ContactsContextProvider>
       <Card>
         <div className="flex flex-row items-center justify-between space-x-4 p-4">
           <h1 className="font-bold">Контакты</h1>
@@ -14,6 +14,6 @@ export default function ContactsPage() {
           <ContactsList />
         </div>
       </Card>
-    </ContactsFilterProvider>
+    </ContactsContextProvider>
   );
 }

apps/web/app/(main)/orders/add/page.tsx

@@ -1,3 +1,14 @@
-export default function AddOrdersPage() {
-  return 'Add Orders';
+import { Container } from '@/components/layout';
+import { PageHeader } from '@/components/navigation';
+import { OrderForm } from '@/components/orders';
+
+export default async function AddOrdersPage() {
+  return (
+    <>
+      <PageHeader title="Новая запись" />
+      <Container className="px-0">
+        <OrderForm />
+      </Container>
+    </>
+  );
 }

apps/web/app/(main)/orders/page.tsx

@@ -1,3 +1,17 @@
-export default function OrdersPage() {
-  return 'Orders';
+import { Container } from '@/components/layout';
+import { ClientsOrdersList, OrdersList } from '@/components/orders';
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
+
+export default async function ProfilePage() {
+  const queryClient = new QueryClient();
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Container>
+        <div />
+        <ClientsOrdersList />
+        <OrdersList />
+      </Container>
+    </HydrationBoundary>
+  );
 }

apps/web/app/(main)/profile/[telegramId]/page.tsx

@@ -7,7 +7,7 @@ type Props = { params: Promise<{ telegramId: string }> };
 
 export default async function ProfilePage(props: Readonly<Props>) {
   const parameters = await props.params;
-  const { telegramId } = parameters;
+  const telegramId = Number.parseInt(parameters.telegramId, 10);
 
   const queryClient = new QueryClient();
 

apps/web/app/(main)/profile/schedule/layout.tsx

@@ -1,6 +1,6 @@
-import { ScheduleContextProvider } from '@/context/schedule';
+import { DateContextProvider } from '@/context/date';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
-  return <ScheduleContextProvider>{children}</ScheduleContextProvider>;
+  return <DateContextProvider>{children}</DateContextProvider>;
 }

apps/web/app/(main)/profile/schedule/slots/[documentId]/page.tsx

@@ -1,9 +1,10 @@
 import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
 import { SlotButtons, SlotDateTime, SlotOrdersList } from '@/components/schedule';
+import { type SlotComponentProps } from '@/components/schedule/types';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
-type Props = { params: Promise<{ documentId: string }> };
+type Props = { params: Promise<SlotComponentProps> };
 
 export default async function ProfilePage(props: Readonly<Props>) {
   const parameters = await props.params;

apps/web/components/auth/update-profile.tsx

@@ -1,18 +1,21 @@
 'use client';
-import { useProfileMutation } from '@/hooks/profile';
+
+import { useCustomerMutation } from '@/hooks/api/customers';
 import { initData, useSignal } from '@telegram-apps/sdk-react';
 import { useEffect, useState } from 'react';
 
 export function UpdateProfile() {
   const initDataUser = useSignal(initData.user);
-  const { mutate: updateProfile } = useProfileMutation({});
+  const { mutate: updateProfile } = useCustomerMutation();
   const [hasUpdated, setHasUpdated] = useState(false);
 
   useEffect(() => {
     if (!hasUpdated) {
       updateProfile({
+        data: {
           active: true,
           photoUrl: initDataUser?.photoUrl || undefined,
+        },
       });
       setHasUpdated(true);
     }

apps/web/components/common/spinner.tsx

@@ -1,9 +0,0 @@
-import { Loader2 } from 'lucide-react';
-
-export function LoadingSpinner() {
-  return (
-    <div className="flex h-full items-center justify-center">
-      <Loader2 className="size-8 animate-spin text-primary" />
-    </div>
-  );
-}

apps/web/components/contacts/contacts-list.tsx

@@ -1,8 +1,9 @@
 'use client';
-import { LoadingSpinner } from '../common/spinner';
-import { useCustomerContacts } from '@/hooks/contacts';
+
+import { useCustomerContacts } from '@/hooks/api/contacts';
 import * as GQL from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import Link from 'next/link';
 import { memo } from 'react';
 

apps/web/components/contacts/dropdown-filter.tsx

@@ -1,5 +1,6 @@
 'use client';
-import { ContactsFilterContext, type FilterType } from '@/context/contacts-filter';
+
+import { ContactsContext, type FilterType } from '@/context/contacts';
 import { Button } from '@repo/ui/components/ui/button';
 import {
   DropdownMenu,
@@ -17,7 +18,7 @@ const filterLabels: Record<FilterType, string> = {
 };
 
 export function ContactsFilter() {
-  const { filter, setFilter } = use(ContactsFilterContext);
+  const { filter, setFilter } = use(ContactsContext);
 
   return (
     <DropdownMenu>

apps/web/components/navigation/bottom-nav/index.tsx

@@ -1,5 +1,6 @@
 'use client';
-import { NavButton } from './components/nav-button';
+
+import { NavButton } from './nav-button';
 import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 

apps/web/components/navigation/bottom-nav/nav-button.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { Button } from '@repo/ui/components/ui/button';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

apps/web/components/navigation/header/back-button.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { ArrowLeft } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 

apps/web/components/navigation/header/index.tsx

@@ -1,5 +1,6 @@
 'use client';
-import { BackButton } from './components/back-button';
+
+import { BackButton } from './back-button';
 
 type Props = { title: string | undefined };
 

apps/web/components/orders/index.ts

@@ -0,0 +1,2 @@
+export * from './order-form';
+export * from './orders-list';

apps/web/components/orders/order-form/back-button.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useOrderCreate } from '@/hooks/api/orders';
+import { useOrderStore } from '@/stores/order';
+import { Button } from '@repo/ui/components/ui/button';
+
+export function BackButton() {
+  const step = useOrderStore((store) => store.step);
+  const previousStep = useOrderStore((store) => store.prevStep);
+
+  const { isPending } = useOrderCreate();
+
+  if (['master-select', 'success'].includes(step)) return null;
+
+  return (
+    <Button
+      className="w-full"
+      disabled={isPending}
+      onClick={previousStep}
+      type="button"
+      variant="ghost"
+    >
+      Назад
+    </Button>
+  );
+}

apps/web/components/orders/order-form/contacts-grid.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { CardSectionHeader } from '@/components/ui';
+import { ContactsContextProvider } from '@/context/contacts';
+import { useCustomerContacts } from '@/hooks/api/contacts';
+// eslint-disable-next-line import/extensions
+import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
+import { useOrderStore } from '@/stores/order';
+import { withContext } from '@/utils/context';
+import { type CustomerFieldsFragment } from '@repo/graphql/types';
+import { Card } from '@repo/ui/components/ui/card';
+import { Label } from '@repo/ui/components/ui/label';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
+import { cn } from '@repo/ui/lib/utils';
+import Image from 'next/image';
+import { useEffect } from 'react';
+
+type ContactsGridProps = {
+  readonly contacts: CustomerFieldsFragment[];
+  readonly onSelect: (contactId: null | string) => void;
+  readonly selected?: null | string;
+  readonly title: string;
+};
+
+export function ContactsGridBase({ contacts, onSelect, selected, title }: ContactsGridProps) {
+  return (
+    <Card className="p-4">
+      <div className="flex flex-col gap-4">
+        <CardSectionHeader title={title} />
+        <div className="grid max-h-screen grid-cols-4 gap-2 overflow-y-auto">
+          {contacts.map((contact) => {
+            if (!contact) return null;
+
+            const isCurrentUser = contact?.name === 'Я';
+
+            return (
+              <Label
+                className="flex cursor-pointer flex-col items-center"
+                key={contact?.documentId}
+              >
+                <input
+                  checked={selected === contact?.documentId}
+                  className="hidden"
+                  name="user"
+                  onChange={() => onSelect(contact?.documentId)}
+                  type="radio"
+                  value={contact?.documentId}
+                />
+                <div
+                  className={cn(
+                    'w-20 h-20 rounded-full border-2 transition-all duration-75',
+                    selected === contact?.documentId ? 'border-primary' : 'border-transparent',
+                  )}
+                >
+                  <div
+                    className={cn(
+                      'size-full rounded-full p-1',
+                      isCurrentUser
+                        ? 'bg-gradient-to-r from-purple-500 to-pink-500'
+                        : 'bg-transparent',
+                    )}
+                  >
+                    <Image
+                      alt={contact?.name}
+                      className="size-full rounded-full object-cover"
+                      height={80}
+                      src={contact?.photoUrl || AvatarPlaceholder}
+                      width={80}
+                    />
+                  </div>
+                </div>
+                <span
+                  className={cn(
+                    'mt-2 max-w-20 break-words text-center text-sm font-medium',
+                    isCurrentUser && 'font-bold',
+                  )}
+                >
+                  {contact?.name}
+                </span>
+              </Label>
+            );
+          })}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export const MastersGrid = withContext(ContactsContextProvider)(function () {
+  const { contacts, isLoading, setFilter } = useCustomerContacts();
+  const masterId = useOrderStore((store) => store.masterId);
+  const setMasterId = useOrderStore((store) => store.setMasterId);
+
+  useEffect(() => {
+    setFilter('masters');
+  }, [setFilter]);
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <ContactsGridBase
+      contacts={contacts}
+      onSelect={(contactId) => setMasterId(contactId)}
+      selected={masterId}
+      title="Мастера"
+    />
+  );
+});
+
+export const ClientsGrid = withContext(ContactsContextProvider)(function () {
+  const { contacts, isLoading, setFilter } = useCustomerContacts();
+  const clientId = useOrderStore((store) => store.clientId);
+  const setClientId = useOrderStore((store) => store.setClientId);
+
+  useEffect(() => {
+    setFilter('clients');
+  }, [setFilter]);
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <ContactsGridBase
+      contacts={contacts}
+      onSelect={(contactId) => setClientId(contactId)}
+      selected={clientId}
+      title="Клиенты"
+    />
+  );
+});

apps/web/components/orders/order-form/datetime-select.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useAvailableTimeSlotsQuery } from '@/hooks/api/slots';
+import { useOrderStore } from '@/stores/order';
+import { Button } from '@repo/ui/components/ui/button';
+import { Calendar } from '@repo/ui/components/ui/calendar';
+import dayjs from 'dayjs';
+
+export function DateSelect() {
+  const selectedDate = useOrderStore((store) => store.date);
+  const setDate = useOrderStore((store) => store.setDate);
+  const setTime = useOrderStore((store) => store.setTime);
+  const setSlot = useOrderStore((store) => store.setSlotId);
+
+  return (
+    <Calendar
+      className="bg-background"
+      disabled={(date) => {
+        return dayjs().isAfter(dayjs(date), 'day');
+      }}
+      mode="single"
+      onSelect={(date) => {
+        if (date) setDate(date);
+        setTime(null);
+        setSlot(null);
+      }}
+      selected={selectedDate}
+    />
+  );
+}
+
+export function DateTimeSelect() {
+  return (
+    <div className="space-y-4">
+      <DateSelect />
+      <TimeSelect />
+    </div>
+  );
+}
+
+export function TimeSelect() {
+  const masterId = useOrderStore((store) => store.masterId);
+  const date = useOrderStore((store) => store.date);
+  const serviceId = useOrderStore((store) => store.serviceId);
+
+  const { data: { times } = {}, isLoading } = useAvailableTimeSlotsQuery(
+    {
+      filters: {
+        date: {
+          eq: date,
+        },
+        master: {
+          documentId: {
+            eq: masterId,
+          },
+        },
+      },
+    },
+    {
+      service: {
+        documentId: {
+          eq: serviceId,
+        },
+      },
+    },
+  );
+
+  if (isLoading || !times) return null;
+
+  const morning = times.filter(({ time }) => getHour(time) < 12);
+  const afternoon = times?.filter(({ time }) => {
+    const hour = getHour(time);
+    return hour >= 12 && hour < 18;
+  });
+  const evening = times?.filter(({ time }) => getHour(time) >= 18);
+
+  return (
+    <div className="space-y-2">
+      <TimeSlotsButtons times={morning} title="Утро" />
+      <TimeSlotsButtons times={afternoon} title="День" />
+      <TimeSlotsButtons times={evening} title="Вечер" />
+    </div>
+  );
+}
+
+function getHour(time: string) {
+  const hour = time.split(':')[0];
+  if (hour) return Number.parseInt(hour, 10);
+
+  return -1;
+}
+
+function TimeSlotsButtons({
+  times,
+  title,
+}: Readonly<{ times: Array<{ slotId: string; time: string }>; title: string }>) {
+  const setTime = useOrderStore((store) => store.setTime);
+  const setSlot = useOrderStore((store) => store.setSlotId);
+
+  if (!times.length) return null;
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <div className="grid grid-cols-3 gap-2">
+        {times.map(({ slotId, time }) => (
+          <Button
+            className="mb-2"
+            key={time.toString()}
+            onClick={() => {
+              setTime(time);
+              setSlot(slotId);
+            }}
+            variant="outline"
+          >
+            {time}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/orders/order-form/index.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { BackButton } from './back-button';
+import { ClientsGrid, MastersGrid } from './contacts-grid';
+import { DateTimeSelect } from './datetime-select';
+import { NextButton } from './next-button';
+import { ErrorPage, SuccessPage } from './result';
+import { ServiceSelect } from './service-select';
+import { SubmitButton } from './submit-button';
+import { OrderStoreProvider, useInitOrderStore, useOrderStore } from '@/stores/order';
+import { withContext } from '@/utils/context';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
+import { type JSX } from 'react';
+
+const STEP_COMPONENTS: Record<string, JSX.Element> = {
+  'client-select': <ClientsGrid />,
+  'datetime-select': <DateTimeSelect />,
+  error: <ErrorPage />,
+  'master-select': <MastersGrid />,
+  'service-select': <ServiceSelect />,
+  success: <SuccessPage />,
+};
+
+function getStepComponent(step: string) {
+  return STEP_COMPONENTS[step] ?? null;
+}
+
+const BUTTON_COMPONENTS: Record<string, JSX.Element> = {
+  '': <NextButton />,
+  'datetime-select': <SubmitButton />,
+};
+
+function getButtonComponent(step: string) {
+  return BUTTON_COMPONENTS[step] ?? <NextButton />;
+}
+
+export const OrderForm = withContext(OrderStoreProvider)(function () {
+  useInitOrderStore();
+
+  const step = useOrderStore((store) => store.step);
+  if (step === 'loading') return <LoadingSpinner />;
+
+  return (
+    <div className="space-y-4 [&>*]:px-4">
+      {getStepComponent(step)}
+      <div className="space-y-2">
+        {getButtonComponent(step)}
+        <BackButton />
+      </div>
+    </div>
+  );
+});

apps/web/components/orders/order-form/next-button.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useOrderStore } from '@/stores/order';
+import { Button } from '@repo/ui/components/ui/button';
+
+export function NextButton() {
+  const { clientId, date, masterId, nextStep, serviceId, step, time } = useOrderStore(
+    (store) => store,
+  );
+
+  const isDisabled =
+    (step === 'master-select' && !masterId) ||
+    (step === 'client-select' && !clientId) ||
+    (step === 'service-select' && !serviceId) ||
+    (step === 'datetime-select' && (!date || !time));
+
+  return (
+    <Button className="w-full" disabled={isDisabled} onClick={nextStep} type="button">
+      Далее
+    </Button>
+  );
+}

apps/web/components/orders/order-form/result.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useOrderStore } from '@/stores/order';
+import { Button } from '@repo/ui/components/ui/button';
+import { Card, CardContent } from '@repo/ui/components/ui/card';
+import { AlertCircle, CheckCircle2, Home, RefreshCw } from 'lucide-react';
+import Link from 'next/link';
+
+export function ErrorPage() {
+  const setStep = useOrderStore((store) => store.setStep);
+
+  const handleRetry = () => {
+    setStep('datetime-select');
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm border-none bg-card text-card-foreground shadow-none">
+        <CardContent className="flex flex-col items-center space-y-5 py-8">
+          <div className="rounded-full bg-red-100 p-3 dark:bg-red-900">
+            <AlertCircle className="size-12 text-red-600 dark:text-red-400" />
+          </div>
+          <div className="space-y-2 text-center">
+            <h1 className="text-2xl font-bold">Ошибка!</h1>
+            <p className="text-muted-foreground">Произошла ошибка при выполнении операции.</p>
+          </div>
+          <Button className="w-full" onClick={handleRetry} variant="destructive">
+            <RefreshCw className="mr-2 size-4" />
+            Повторить
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function SuccessPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm border-none bg-card text-card-foreground shadow-none">
+        <CardContent className="flex flex-col items-center space-y-5 py-8">
+          <div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
+            <CheckCircle2 className="size-12 text-green-600 dark:text-green-400" />
+          </div>
+          <div className="space-y-2 text-center">
+            <h1 className="text-2xl font-bold">Готово!</h1>
+            <p className="text-muted-foreground">Запись успешно создана</p>
+          </div>
+          <Button asChild className="w-full">
+            <Link href="/">
+              <Home className="mr-2 size-4" />
+              На главный экран
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/components/orders/order-form/service-select.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useServicesQuery } from '@/hooks/api/services';
+import { useOrderStore } from '@/stores/order';
+import { type ServiceFieldsFragment } from '@repo/graphql/types';
+import { cn } from '@repo/ui/lib/utils';
+
+export function ServiceSelect() {
+  const masterId = useOrderStore((store) => store.masterId);
+
+  const { data: { services } = {} } = useServicesQuery({
+    filters: {
+      master: {
+        documentId: {
+          eq: masterId,
+        },
+      },
+    },
+  });
+
+  if (!services?.length) return null;
+
+  return (
+    <div>
+      {services.map((service) => service && <ServiceCard key={service.documentId} {...service} />)}
+    </div>
+  );
+}
+
+function ServiceCard({ documentId, name }: Readonly<ServiceFieldsFragment>) {
+  const serviceId = useOrderStore((store) => store.serviceId);
+  const setServiceId = useOrderStore((store) => store.setServiceId);
+
+  const selected = serviceId === documentId;
+
+  function handleOnSelect() {
+    setServiceId(documentId);
+  }
+
+  return (
+    <label
+      className={cn(
+        'flex items-center justify-between border-2 rounded-2xl bg-background p-4 px-6 cursor-pointer dark:bg-primary/5',
+        selected ? 'border-primary' : 'border-transparent',
+      )}
+    >
+      <input
+        checked={selected}
+        className="hidden"
+        name="service"
+        onChange={() => handleOnSelect()}
+        type="radio"
+        value={documentId}
+      />
+      <div className="flex flex-col gap-2">
+        {name}
+        {/* <span className={cn('text-xs font-normal', 'text-muted-foreground')} /> */}
+      </div>
+    </label>
+  );
+}

apps/web/components/orders/order-form/submit-button.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useOrderCreate } from '@/hooks/api/orders';
+import { useOrderStore } from '@/stores/order';
+import { Button } from '@repo/ui/components/ui/button';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
+import { useEffect } from 'react';
+
+export function SubmitButton() {
+  const { clientId, date, serviceId, setStep, slotId, time } = useOrderStore((store) => store);
+  const isDisabled = !clientId || !serviceId || !date || !time || !slotId;
+
+  const { isError, isPending, isSuccess, mutate: createOrder } = useOrderCreate();
+
+  const handleSubmit = () => {
+    if (isDisabled) return;
+
+    createOrder({
+      input: {
+        client: clientId,
+        date,
+        services: [serviceId],
+        slot: slotId,
+        time_start: time,
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (isSuccess) setStep('success');
+    if (isError) setStep('error');
+  }, [isError, isSuccess, setStep]);
+
+  return (
+    <Button
+      className="w-full"
+      disabled={isPending || isDisabled}
+      onClick={handleSubmit}
+      type="button"
+    >
+      {isPending ? <LoadingSpinner /> : 'Завершить'}
+    </Button>
+  );
+}

apps/web/components/orders/orders-list.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable canonical/id-match */
+'use client';
+
+import { OrderCard } from '@/components/shared/order-card';
+import { useCustomerQuery } from '@/hooks/api/customers';
+import { useOrdersQuery } from '@/hooks/api/orders';
+import { Enum_Customer_Role } from '@repo/graphql/types';
+
+export function ClientsOrdersList() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
+  const isMaster = customer?.role === Enum_Customer_Role.Master;
+
+  const { data: { orders } = {}, isLoading } = useOrdersQuery({
+    filters: {
+      slot: {
+        master: {
+          documentId: {
+            eq: isMaster ? customer?.documentId : undefined,
+          },
+        },
+      },
+    },
+  });
+
+  if (!orders?.length || isLoading) return null;
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <h1 className="font-bold">Записи клиентов</h1>
+      {orders?.map((order) => order && <OrderCard key={order.documentId} {...order} />)}
+    </div>
+  );
+}
+
+export function OrdersList() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
+  const { data: { orders } = {}, isLoading } = useOrdersQuery({
+    filters: {
+      client: {
+        documentId: {
+          eq: customer?.documentId,
+        },
+      },
+    },
+  });
+
+  if (!orders?.length || isLoading) return null;
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <h1 className="font-bold">Ваши записи</h1>
+      {orders?.map((order) => order && <OrderCard key={order.documentId} {...order} />)}
+    </div>
+  );
+}

apps/web/components/profile/components/index.ts

@@ -1,4 +0,0 @@
-export * from './card-header';
-export * from './checkbox-field';
-export * from './link-button';
-export * from './text-field';

apps/web/components/profile/data-card/checkbox-field.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable promise/prefer-await-to-then */
 'use client';
+
 import { Checkbox, type CheckboxProps } from '@repo/ui/components/ui/checkbox';
 import { useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';

apps/web/components/profile/data-card/index.tsx

@@ -1,14 +1,17 @@
 'use client';
-import { CheckboxWithText, DataField, ProfileCardHeader } from './components';
-import { type ProfileProps } from './types';
-import { useProfileMutation, useProfileQuery } from '@/hooks/profile';
+
+import { type ProfileProps } from '../types';
+import { CheckboxWithText } from './checkbox-field';
+import { DataField } from './text-field';
+import { CardSectionHeader } from '@/components/ui';
+import { useCustomerMutation, useCustomerQuery } from '@/hooks/api/customers';
 import { Enum_Customer_Role as Role } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
 import Link from 'next/link';
 
 export function ContactDataCard({ telegramId }: Readonly<ProfileProps>) {
-  const { data: customer } = useProfileQuery({ telegramId });
+  const { data: { customer } = {} } = useCustomerQuery({ telegramId });
 
   if (!customer) return null;
 
@@ -29,27 +32,31 @@ export function ContactDataCard({ telegramId }: Readonly<ProfileProps>) {
 }
 
 export function ProfileDataCard() {
-  const { data: customer } = useProfileQuery({});
-  const { mutate: updateProfile } = useProfileMutation({});
+  const { data: { customer } = {} } = useCustomerQuery();
+  const { mutate: updateCustomer } = useCustomerMutation();
 
   if (!customer) return null;
 
   return (
     <Card className="p-4">
       <div className="flex flex-col gap-4">
-        <ProfileCardHeader title="Ваши данные" />
+        <CardSectionHeader title="Ваши данные" />
         <DataField
           fieldName="name"
           id="name"
           label="Имя"
-          onChange={updateProfile}
+          onChange={({ name }) => updateCustomer({ data: { name } })}
           value={customer?.name ?? ''}
         />
         <DataField disabled id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
         <CheckboxWithText
           checked={customer.role !== 'client'}
           description="Разрешить другим пользователям записываться к вам"
-          onChange={(checked) => updateProfile({ role: checked ? Role.Master : Role.Client })}
+          onChange={(checked) =>
+            updateCustomer({
+              data: { role: checked ? Role.Master : Role.Client },
+            })
+          }
           text="Быть мастером"
         />
       </div>

apps/web/components/profile/data-card/text-field.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable promise/prefer-await-to-then */
 'use client';
+
 import { type CustomerInput } from '@repo/graphql/types';
 import { Input } from '@repo/ui/components/ui/input';
 import { Label } from '@repo/ui/components/ui/label';

apps/web/components/profile/links-card/index.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { LinkButton } from './components';
-import { type ProfileProps } from './types';
-import { useProfileQuery } from '@/hooks/profile';
+
+import { type ProfileProps } from '../types';
+import { LinkButton } from './link-button';
+import { useCustomerQuery } from '@/hooks/api/customers';
 import { Enum_Customer_Role } from '@repo/graphql/types';
 
 export function LinksCard({ telegramId }: Readonly<ProfileProps>) {
-  const { data: customer } = useProfileQuery({ telegramId });
+  const { data: { customer } = {} } = useCustomerQuery({ telegramId });
 
   const isMaster = customer?.role === Enum_Customer_Role.Master;
 

apps/web/components/profile/person-card.tsx

@@ -1,12 +1,13 @@
 'use client';
-import { LoadingSpinner } from '../common/spinner';
+
 import { type ProfileProps } from './types';
-import { useProfileQuery } from '@/hooks/profile';
+import { useCustomerQuery } from '@/hooks/api/customers';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Card } from '@repo/ui/components/ui/card';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 
 export function PersonCard({ telegramId }: Readonly<ProfileProps>) {
-  const { data: customer, isLoading } = useProfileQuery({ telegramId });
+  const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });
 
   if (isLoading || !customer)
     return (

apps/web/components/profile/types.tsx

@@ -1,3 +1,3 @@
 export type ProfileProps = {
-  readonly telegramId?: string;
+  readonly telegramId?: number;
 };

apps/web/components/schedule/calendar.tsx

@@ -1,11 +1,12 @@
 'use client';
-import { ScheduleContext } from '@/context/schedule';
+
+import { DateContext } from '@/context/date';
 import { Calendar } from '@repo/ui/components/ui/calendar';
 import dayjs from 'dayjs';
 import { use } from 'react';
 
 export function ScheduleCalendar() {
-  const { selectedDate, setSelectedDate } = use(ScheduleContext);
+  const { selectedDate, setSelectedDate } = use(DateContext);
 
   return (
     <Calendar

apps/web/components/schedule/context/index.tsx

@@ -1,45 +0,0 @@
-'use client';
-import {
-  createContext,
-  type Dispatch,
-  type PropsWithChildren,
-  type SetStateAction,
-  useMemo,
-  useState,
-} from 'react';
-
-export type ContextType = {
-  editMode: boolean;
-  endTime: string;
-  resetTime: () => void;
-  setEditMode: Dispatch<SetStateAction<boolean>>;
-  setEndTime: Dispatch<SetStateAction<string>>;
-  setStartTime: Dispatch<SetStateAction<string>>;
-  startTime: string;
-};
-export const ScheduleTimeContext = createContext<ContextType>({} as ContextType);
-
-export function ScheduleTimeContextProvider({ children }: Readonly<PropsWithChildren>) {
-  const [editMode, setEditMode] = useState(false);
-  const [startTime, setStartTime] = useState('');
-  const [endTime, setEndTime] = useState('');
-
-  function resetTime() {
-    setStartTime('');
-    setEndTime('');
-  }
-
-  const value = useMemo(() => {
-    return {
-      editMode,
-      endTime,
-      resetTime,
-      setEditMode,
-      setEndTime,
-      setStartTime,
-      startTime,
-    };
-  }, [editMode, endTime, setEditMode, startTime]);
-
-  return <ScheduleTimeContext value={value}>{children}</ScheduleTimeContext>;
-}

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

@@ -1,20 +0,0 @@
-'use client';
-import { SlotCard } from './components/slot-card';
-import { DaySlotAddForm } from './day-slot-add-form';
-import { LoadingSpinner } from '@/components/common/spinner';
-import { useSlots } from '@/hooks/slots';
-
-export function DaySlotsList() {
-  const { data, isLoading } = useSlots();
-  const slots = data?.data.slots;
-
-  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>
-  );
-}

apps/web/components/schedule/day-slots-list/day-slot-add-form.tsx

@@ -1,30 +1,31 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { EditableTimeRangeForm } from './components/time-range';
-import { ScheduleTimeContext, ScheduleTimeContextProvider } from './context';
-import { ScheduleContext } from '@/context/schedule';
-import { useSlotAdd } from '@/hooks/slots';
+
+import { EditableTimeRangeForm } from '@/components/shared/time-range';
+import { useSlotCreate } from '@/hooks/api/slots';
+import { ScheduleStoreProvider, useScheduleStore } from '@/stores/schedule';
 import { withContext } from '@/utils/context';
 import { Enum_Slot_State } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { PlusSquare } from 'lucide-react';
-import { type FormEvent, use } from 'react';
+import { type FormEvent } from 'react';
 
-export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function () {
-  const { endTime, resetTime, startTime } = use(ScheduleTimeContext);
+export const DaySlotAddForm = withContext(ScheduleStoreProvider)(function () {
+  const endTime = useScheduleStore((state) => state.endTime);
+  const resetTime = useScheduleStore((state) => state.resetTime);
+  const startTime = useScheduleStore((state) => state.startTime);
 
-  const { selectedDate } = use(ScheduleContext);
-
-  const { isPending, mutate: addSlot } = useSlotAdd();
+  const { isPending, mutate: addSlot } = useSlotCreate();
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     if (startTime && endTime) {
       addSlot({
-        date: selectedDate,
+        input: {
           state: Enum_Slot_State.Open,
           time_end: endTime,
           time_start: startTime,
+        },
       });
 
       resetTime();

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

@@ -0,0 +1,25 @@
+'use client';
+
+import { DaySlotAddForm } from './day-slot-add-form';
+import { SlotCard } from './slot-card';
+import { DateContext } from '@/context/date';
+import { useSlotsQuery } from '@/hooks/api/slots';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
+import { use } from 'react';
+
+export function DaySlotsList() {
+  const { selectedDate } = use(DateContext);
+  const { data: { slots } = {}, isLoading } = useSlotsQuery({
+    filters: { date: { eq: selectedDate } },
+  });
+
+  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>
+  );
+}

apps/web/components/schedule/day-slots-list/slot-card.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { type SlotComponentProps } from '../types';
-import { ReadonlyTimeRange } from './time-range';
-import { useSlotQuery } from '@/hooks/slots';
-import { Enum_Slot_State } from '@repo/graphql/types';
+
+import { ReadonlyTimeRange } from '@/components/shared/time-range';
+import { useSlotQuery } from '@/hooks/api/slots';
+import { Enum_Slot_State, type SlotFieldsFragment } from '@repo/graphql/types';
 import { Badge } from '@repo/ui/components/ui/badge';
 import { cn } from '@repo/ui/lib/utils';
 import Link from 'next/link';
@@ -15,26 +15,23 @@ const MAP_BADGE_TEXT: Record<Enum_Slot_State, string> = {
   reserved: 'Зарезервировано',
 };
 
-export function SlotCard(props: Readonly<SlotComponentProps>) {
+export function SlotCard(props: Readonly<SlotFieldsFragment>) {
   const pathname = usePathname();
   const { documentId } = props;
 
-  const { data } = useSlotQuery({ documentId });
-  const slot = data?.data?.slot;
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
 
-  if (!slot) return null;
-
-  const ordersNumber = slot.orders?.length;
+  const ordersNumber = slot?.orders?.length;
   const hasOrders = Boolean(ordersNumber);
 
-  const isOpened = slot?.state === Enum_Slot_State.Open;
-  const isClosed = slot?.state === Enum_Slot_State.Closed;
+  const isOpened = props?.state === Enum_Slot_State.Open;
+  const isClosed = props?.state === Enum_Slot_State.Closed;
 
   return (
-    <Link href={`${pathname}/slots/${documentId}`} rel="noopener noreferrer">
+    <Link href={`${pathname}/slots/${props.documentId}`} rel="noopener noreferrer">
       <div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
         <div className="flex flex-col">
-          <ReadonlyTimeRange {...slot} />
+          <ReadonlyTimeRange timeEnd={props.time_end} timeStart={props.time_start} />
           <span
             className={cn(
               'text-xs font-normal',
@@ -44,14 +41,14 @@ export function SlotCard(props: Readonly<SlotComponentProps>) {
             {hasOrders ? 'Есть записи' : 'Свободно'}
           </span>
         </div>
-        {slot.state && (
+        {props.state && (
           <Badge
             className={cn(
               isOpened ? 'bg-green-100 text-green-500 dark:bg-green-700 dark:text-green-100' : '',
               isClosed ? 'bg-red-100 text-red-500 dark:bg-red-700 dark:text-red-100' : '',
             )}
           >
-            {getBadgeText(slot.state)}
+            {getBadgeText(props.state)}
           </Badge>
         )}
       </div>

apps/web/components/schedule/index.ts

@@ -1,5 +1,4 @@
 export * from './calendar';
-export * from './day-slot-add-form';
 export * from './day-slots-list';
 export * from './slot-buttons';
 export * from './slot-datetime';

apps/web/components/schedule/slot-buttons.tsx

@@ -1,32 +1,33 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable canonical/id-match */
 'use client';
+
 import { type SlotComponentProps } from './types';
-import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/slots';
+import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/api/slots';
 import { Enum_Slot_State } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { useRouter } from 'next/navigation';
 
 export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
-  const { data } = useSlotQuery({ documentId });
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
+
   const { mutate: updateSlot } = useSlotMutation({ documentId });
+
   const { mutate: deleteSlot } = useSlotDelete({ documentId });
 
   const router = useRouter();
 
-  const slot = data?.data?.slot;
-
   if (!slot) return null;
 
   const isOpened = slot?.state === Enum_Slot_State.Open;
   const isClosed = slot?.state === Enum_Slot_State.Closed;
 
   function handleOpenSlot() {
-    return updateSlot({ data: { state: Enum_Slot_State.Open }, documentId });
+    return updateSlot({ data: { state: Enum_Slot_State.Open } });
   }
 
   function handleCloseSlot() {
-    return updateSlot({ data: { state: Enum_Slot_State.Closed }, documentId });
+    return updateSlot({ data: { state: Enum_Slot_State.Closed } });
   }
 
   function handleDeleteSlot() {

apps/web/components/schedule/slot-datetime.tsx

@@ -1,17 +0,0 @@
-'use client';
-import { SlotDate } from './components/slot-date';
-import { SlotTime } from './components/slot-time';
-import { ScheduleTimeContextProvider } from './context';
-import { type SlotComponentProps } from './types';
-import { withContext } from '@/utils/context';
-
-export const SlotDateTime = withContext(ScheduleTimeContextProvider)(function (
-  props: Readonly<SlotComponentProps>,
-) {
-  return (
-    <div className="flex flex-col">
-      <SlotDate {...props} />
-      <SlotTime {...props} />
-    </div>
-  );
-});

apps/web/components/schedule/slot-datetime/index.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { type SlotComponentProps } from '../types';
+import { SlotDate } from './slot-date';
+import { SlotTime } from './slot-time';
+import { ScheduleStoreProvider } from '@/stores/schedule';
+import { withContext } from '@/utils/context';
+
+export const SlotDateTime = withContext(ScheduleStoreProvider)(function (
+  props: Readonly<SlotComponentProps>,
+) {
+  return (
+    <div className="flex flex-col">
+      <SlotDate {...props} />
+      <SlotTime {...props} />
+    </div>
+  );
+});

apps/web/components/schedule/slot-datetime/slot-date.tsx

@@ -1,11 +1,11 @@
 'use client';
+
 import { type SlotComponentProps } from '../types';
-import { useSlotQuery } from '@/hooks/slots';
-import { formatDate } from '@/utils/date';
+import { useSlotQuery } from '@/hooks/api/slots';
+import { formatDate } from '@repo/graphql/utils/datetime-format';
 
 export function SlotDate({ documentId }: Readonly<SlotComponentProps>) {
-  const { data } = useSlotQuery({ documentId });
-  const slot = data?.data?.slot;
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
 
   if (!slot) return null;
 

apps/web/components/schedule/slot-datetime/slot-time.tsx

@@ -1,26 +1,26 @@
 /* eslint-disable react/jsx-no-bind */
 'use client';
-import { ScheduleTimeContext } from '../context';
+
 import { type SlotComponentProps } from '../types';
-import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
-import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
+import { EditableTimeRangeForm, ReadonlyTimeRange } from '@/components/shared/time-range';
+import { useSlotMutation, useSlotQuery } from '@/hooks/api/slots';
+import { useZustandStore } from '@/stores/schedule';
 import { Button } from '@repo/ui/components/ui/button';
 import { PencilLine } from 'lucide-react';
-import { use, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export function SlotTime(props: Readonly<SlotComponentProps>) {
-  const { editMode } = use(ScheduleTimeContext);
+  const editMode = useZustandStore((state) => state.editMode);
 
   return editMode ? <SlotTimeEditForm {...props} /> : <SlotTimeReadonly {...props} />;
 }
 
 function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
   const { editMode, endTime, resetTime, setEditMode, setEndTime, setStartTime, startTime } =
-    use(ScheduleTimeContext);
+    useZustandStore((state) => state);
   const { isPending: isMutationPending, mutate: updateSlot } = useSlotMutation({ documentId });
 
-  const { data, isPending: isQueryPending } = useSlotQuery({ documentId });
-  const slot = data?.data?.slot;
+  const { data: { slot } = {}, isPending: isQueryPending } = useSlotQuery({ documentId });
 
   const isPending = isMutationPending || isQueryPending;
 
@@ -32,7 +32,7 @@ function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
   }, [editMode, setEndTime, setStartTime, slot]);
 
   function handleSubmit() {
-    updateSlot({ data: { time_end: endTime, time_start: startTime }, documentId });
+    updateSlot({ data: { time_end: endTime, time_start: startTime } });
     resetTime();
     setEditMode(false);
   }
@@ -46,11 +46,10 @@ function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
   );
 }
 
-function SlotTimeReadonly(props: Readonly<SlotComponentProps>) {
-  const { setEditMode } = use(ScheduleTimeContext);
+function SlotTimeReadonly({ documentId }: Readonly<SlotComponentProps>) {
+  const setEditMode = useZustandStore((state) => state.setEditMode);
 
-  const { data } = useSlotQuery(props);
-  const slot = data?.data?.slot;
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
 
   if (!slot) return null;
 
@@ -58,7 +57,7 @@ function SlotTimeReadonly(props: Readonly<SlotComponentProps>) {
 
   return (
     <div className="flex items-center gap-2">
-      <ReadonlyTimeRange {...slot} className="text-3xl" />
+      <ReadonlyTimeRange className="text-3xl" timeEnd={slot.time_end} timeStart={slot.time_start} />
       <Button
         className="rounded-full text-xs"
         disabled={hasOrders}

apps/web/components/schedule/slot-orders-list.tsx

@@ -1,11 +1,11 @@
 'use client';
-import { OrderCard } from './components/order-card';
+
 import { type SlotComponentProps } from './types';
-import { useSlotQuery } from '@/hooks/slots';
+import { OrderCard } from '@/components/shared/order-card';
+import { useSlotQuery } from '@/hooks/api/slots';
 
 export function SlotOrdersList({ documentId }: Readonly<SlotComponentProps>) {
-  const { data } = useSlotQuery({ documentId });
-  const slot = data?.data?.slot;
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
 
   if (!slot) return null;
 

apps/web/components/schedule/types/index.tsx

@@ -2,5 +2,4 @@ import type * as GQL from '@repo/graphql/types';
 
 export type OrderClient = NonNullable<GQL.GetOrderQuery['order']>['client'];
 export type OrderComponentProps = Pick<GQL.OrderFieldsFragment, 'documentId'>;
-export type Slot = NonNullable<GQL.GetSlotQuery['slot']>;
 export type SlotComponentProps = Pick<GQL.SlotFieldsFragment, 'documentId'>;

apps/web/components/shared/order-card.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { type OrderClient, type OrderComponentProps } from '../types';
-import { ReadonlyTimeRange } from './time-range';
-import { useOrderQuery } from '@/hooks/orders';
+
+import { type OrderClient, type OrderComponentProps } from '../schedule/types';
+import { ReadonlyTimeRange } from './time-range/readonly';
+import { useOrderQuery } from '@/hooks/api/orders';
 import { Enum_Order_State } from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Badge } from '@repo/ui/components/ui/badge';
@@ -10,8 +11,7 @@ import { cn } from '@repo/ui/lib/utils';
 import Link from 'next/link';
 
 export function OrderCard({ documentId }: Readonly<OrderComponentProps>) {
-  const { data } = useOrderQuery({ documentId });
-  const order = data?.data?.order;
+  const { data: { order } = {} } = useOrderQuery({ documentId });
 
   if (!order) return null;
 
@@ -27,7 +27,7 @@ export function OrderCard({ documentId }: Readonly<OrderComponentProps>) {
           <div className="flex items-center gap-4">
             <ClientAvatar client={order.client} />
             <div className="flex flex-col">
-              <ReadonlyTimeRange time_end={order?.time_end} time_start={order?.time_start} />
+              <ReadonlyTimeRange timeEnd={order?.time_end} timeStart={order?.time_start} />
               <span className="truncate text-xs text-muted-foreground">{services}</span>
             </div>
             {/* <span className="text-xs text-foreground">{clientName}</span> */}

apps/web/components/shared/time-range/editable.tsx

@@ -1,28 +1,23 @@
 'use client';
-import { ScheduleTimeContext } from '../context';
-import { formatTime } from '@/utils/date';
+
+import { useScheduleStore } from '@/stores/schedule';
 import { Input } from '@repo/ui/components/ui/input';
-import { cn } from '@repo/ui/lib/utils';
-import { type FormEvent, type PropsWithChildren, use } from 'react';
+import { type FormEvent, type PropsWithChildren } from 'react';
 
 type EditableTimeRangeProps = {
   readonly disabled?: boolean;
   readonly onSubmit: (event: FormEvent) => void;
 };
 
-type TimeRangeProps = {
-  readonly className?: string;
-  readonly delimiter?: boolean;
-  readonly time_end: string;
-  readonly time_start: string;
-};
-
 export function EditableTimeRangeForm({
   children,
   disabled = false,
   onSubmit,
 }: PropsWithChildren<EditableTimeRangeProps>) {
-  const { endTime, setEndTime, setStartTime, startTime } = use(ScheduleTimeContext);
+  const endTime = useScheduleStore((state) => state.endTime);
+  const startTime = useScheduleStore((state) => state.startTime);
+  const setEndTime = useScheduleStore((state) => state.setEndTime);
+  const setStartTime = useScheduleStore((state) => state.setStartTime);
 
   return (
     <form className="flex flex-row items-center gap-2" onSubmit={onSubmit}>
@@ -52,18 +47,3 @@ export function EditableTimeRangeForm({
     </form>
   );
 }
-
-export function ReadonlyTimeRange({
-  className,
-  delimiter = true,
-  time_end,
-  time_start,
-}: Readonly<TimeRangeProps>) {
-  return (
-    <div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
-      <span className="tracking-wider">{formatTime(time_start).user()}</span>
-      {delimiter && ' - '}
-      <span className="tracking-wider">{formatTime(time_end).user()}</span>
-    </div>
-  );
-}

apps/web/components/shared/time-range/index.ts

@@ -0,0 +1,2 @@
+export * from './editable';
+export * from './readonly';

apps/web/components/shared/time-range/readonly.tsx

@@ -0,0 +1,18 @@
+import { formatTime } from '@repo/graphql/utils/datetime-format';
+import { cn } from '@repo/ui/lib/utils';
+
+type TimeRangeProps = {
+  readonly className?: string;
+  readonly timeEnd: null | string | undefined;
+  readonly timeStart: null | string | undefined;
+};
+
+export function ReadonlyTimeRange({ className, timeEnd, timeStart }: Readonly<TimeRangeProps>) {
+  return (
+    <div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
+      <span className="tracking-wider">{timeStart ? formatTime(timeStart).user() : 'xx:xx'}</span>
+      {' - '}
+      <span className="tracking-wider">{timeEnd ? formatTime(timeEnd).user() : 'xx:xx'}</span>
+    </div>
+  );
+}

apps/web/components/ui/card-header.tsx

@@ -2,7 +2,7 @@ type Props = {
   title: string;
 };
 
-export function ProfileCardHeader({ title }: Readonly<Props>) {
+export function CardSectionHeader({ title }: Readonly<Props>) {
   return (
     <div className="flex flex-row justify-between">
       <h1 className="font-bold text-primary">{title}</h1>

apps/web/components/ui/index.ts

@@ -0,0 +1 @@
+export * from './card-header';

apps/web/config/auth.ts

@@ -12,7 +12,7 @@ export const authOptions: AuthOptions = {
     },
     async session({ session, token }) {
       if (token?.id && session?.user) {
-        session.user.telegramId = token.id as string;
+        session.user.telegramId = token.id as number;
       }
 
       return session;

apps/web/context/contacts-filter.tsx

@@ -1,15 +0,0 @@
-'use client';
-import { createContext, useMemo, useState } from 'react';
-
-export type FilterType = 'all' | 'clients' | 'masters';
-type ContextType = { filter: FilterType; setFilter: (filter: FilterType) => void };
-
-export const ContactsFilterContext = createContext<ContextType>({} as ContextType);
-
-export function ContactsFilterProvider({ children }: { readonly children: React.ReactNode }) {
-  const [filter, setFilter] = useState<FilterType>('all');
-
-  const value = useMemo(() => ({ filter, setFilter }), [filter, setFilter]);
-
-  return <ContactsFilterContext value={value}>{children}</ContactsFilterContext>;
-}

apps/web/context/contacts.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { createContext, type PropsWithChildren, useMemo, useState } from 'react';
+
+export type FilterType = 'all' | 'clients' | 'masters';
+
+type ContextType = { filter: FilterType; setFilter: (filter: FilterType) => void };
+
+export const ContactsContext = createContext<ContextType>({} as ContextType);
+
+export function ContactsContextProvider({ children }: Readonly<PropsWithChildren>) {
+  const [filter, setFilter] = useState<FilterType>('all');
+
+  const value = useMemo(() => ({ filter, setFilter }), [filter, setFilter]);
+
+  return <ContactsContext value={value}>{children}</ContactsContext>;
+}

apps/web/context/date.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { createContext, useMemo, useState } from 'react';
 
 type ContextType = {
@@ -6,12 +7,12 @@ type ContextType = {
   setSelectedDate: (date: Date) => void;
 };
 
-export const ScheduleContext = createContext<ContextType>({} as ContextType);
+export const DateContext = createContext<ContextType>({} as ContextType);
 
-export function ScheduleContextProvider({ children }: { readonly children: React.ReactNode }) {
+export function DateContextProvider({ children }: { readonly children: React.ReactNode }) {
   const [selectedDate, setSelectedDate] = useState(new Date());
 
   const value = useMemo(() => ({ selectedDate, setSelectedDate }), [selectedDate]);
 
-  return <ScheduleContext value={value}>{children}</ScheduleContext>;
+  return <DateContext value={value}>{children}</DateContext>;
 }

apps/web/hooks/api/contacts/query.ts

@@ -0,0 +1,23 @@
+import { getClients, getMasters } from '@/actions/api/customers';
+import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+
+export const useClientsQuery = (props?: Parameters<typeof getClients>[0]) => {
+  const { data: session } = useSession();
+  const telegramId = props?.telegramId || session?.user?.telegramId;
+
+  return useQuery({
+    queryFn: () => getClients({ telegramId }),
+    queryKey: ['customer', 'telegramId', telegramId, 'clients'],
+  });
+};
+
+export const useMastersQuery = (props?: Parameters<typeof getMasters>[0]) => {
+  const { data: session } = useSession();
+  const telegramId = props?.telegramId || session?.user?.telegramId;
+
+  return useQuery({
+    queryFn: () => getMasters({ telegramId }),
+    queryKey: ['customer', 'telegramId', telegramId, 'masters'],
+  });
+};

apps/web/hooks/api/contacts/use-customer-contacts.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import { useClientsQuery, useMastersQuery } from './query';
+import { ContactsContext } from '@/context/contacts';
+import { sift } from 'radash';
+import { use, useEffect, useMemo } from 'react';
+
+export function useCustomerContacts() {
+  const { filter, setFilter } = use(ContactsContext);
+
+  const {
+    data: clientsData,
+    isLoading: isLoadingClients,
+    refetch: refetchClients,
+  } = useClientsQuery();
+
+  const {
+    data: mastersData,
+    isLoading: isLoadingMasters,
+    refetch: refetchMasters,
+  } = useMastersQuery();
+
+  const clients = clientsData?.customers?.at(0)?.clients || [];
+  const masters = mastersData?.customers?.at(0)?.masters || [];
+
+  const isLoading = isLoadingClients || isLoadingMasters;
+
+  useEffect(() => {
+    if (filter === 'clients') {
+      refetchClients();
+    } else if (filter === 'masters') {
+      refetchMasters();
+    } else {
+      refetchClients();
+      refetchMasters();
+    }
+  }, [filter, refetchClients, refetchMasters]);
+
+  const contacts = useMemo(() => {
+    if (filter === 'clients') return sift(clients);
+    if (filter === 'masters') return sift(masters);
+
+    return [...sift(clients), ...sift(masters)];
+  }, [clients, masters, filter]);
+
+  return { contacts, filter, isLoading, setFilter };
+}

apps/web/hooks/api/customers.ts

@@ -0,0 +1,35 @@
+'use client';
+
+import { getCustomer, updateCustomer } from '@/actions/api/customers';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+
+export const useCustomerQuery = (variables?: Parameters<typeof getCustomer>[0]) => {
+  const { data: session } = useSession();
+  const telegramId = variables?.telegramId || session?.user?.telegramId;
+
+  return useQuery({
+    enabled: Boolean(telegramId),
+    queryFn: () => getCustomer({ telegramId }),
+    queryKey: ['customer', telegramId],
+  });
+};
+
+export const useCustomerMutation = () => {
+  const { data: session } = useSession();
+  const telegramId = session?.user?.telegramId;
+  const queryClient = useQueryClient();
+
+  const handleOnSuccess = () => {
+    if (!telegramId) return;
+
+    queryClient.invalidateQueries({
+      queryKey: ['customer', telegramId],
+    });
+  };
+
+  return useMutation({
+    mutationFn: updateCustomer,
+    onSuccess: handleOnSuccess,
+  });
+};

apps/web/hooks/api/orders.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { createOrder, getOrder, getOrders } from '@/actions/api/orders';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+export const useOrderQuery = ({ documentId }: Parameters<typeof getOrder>[0]) =>
+  useQuery({
+    queryFn: () => getOrder({ documentId }),
+    queryKey: ['order', documentId],
+  });
+
+export const useOrderCreate = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createOrder,
+    mutationKey: ['order', 'create'],
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['orders'] });
+    },
+  });
+};
+
+export const useOrdersQuery = (variables: Parameters<typeof getOrders>[0]) =>
+  useQuery({
+    queryFn: () => getOrders(variables),
+    queryKey: ['orders', variables],
+    staleTime: 60 * 1_000,
+  });

apps/web/hooks/api/services.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { getService, getServices } from '@/actions/api/services';
+import { useQuery } from '@tanstack/react-query';
+
+export const useServicesQuery = (input: Parameters<typeof getServices>[0]) => {
+  return useQuery({
+    queryFn: () => getServices(input),
+    queryKey: ['services', input],
+  });
+};
+
+export const useServiceQuery = (input: Parameters<typeof getService>[0]) => {
+  return useQuery({
+    queryFn: () => getService(input),
+    queryKey: ['service', input.documentId],
+  });
+};

apps/web/hooks/api/slots.ts

@@ -0,0 +1,103 @@
+'use client';
+
+import { useCustomerQuery } from './customers';
+import {
+  createSlot,
+  deleteSlot,
+  getAvailableTimeSlots,
+  getSlot,
+  getSlots,
+  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();
+
+  const masterId = variables.filters?.master?.documentId?.eq || customer?.documentId;
+  const date = variables.filters?.date?.eq;
+
+  return useQuery({
+    queryFn: () => getSlots(variables),
+    queryKey: ['slots', masterId, dayjs(date).format('YYYY-MM-DD')],
+  });
+};
+
+export const useSlotQuery = (variables: Parameters<typeof getSlot>[0]) => {
+  const { documentId } = variables;
+
+  return useQuery({
+    queryFn: () => getSlot(variables),
+    queryKey: ['slot', documentId],
+  });
+};
+
+export const useAvailableTimeSlotsQuery = (
+  ...variables: Parameters<typeof getAvailableTimeSlots>
+) => {
+  return useQuery({
+    queryFn: () => getAvailableTimeSlots(...variables),
+    queryKey: ['available-time-slots', variables],
+    staleTime: 15 * 1_000,
+  });
+};
+
+export const useSlotMutation = ({
+  documentId,
+}: Pick<Parameters<typeof updateSlot>[0], 'documentId'>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ data }: Pick<Parameters<typeof updateSlot>[0], 'data'>) =>
+      updateSlot({ data, documentId }),
+    mutationKey: ['slot', 'update', documentId],
+    onSuccess: () => {
+      if (documentId) {
+        queryClient.invalidateQueries({
+          queryKey: ['slot', documentId],
+        });
+      }
+    },
+  });
+};
+
+export const useSlotCreate = () => {
+  const { data: { customer } = {} } = useCustomerQuery();
+  const masterId = customer?.documentId;
+
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createSlot,
+    mutationKey: ['slot', 'create'],
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['slots', masterId],
+      });
+    },
+  });
+};
+
+export const useSlotDelete = ({ documentId }: Parameters<typeof deleteSlot>[0]) => {
+  const { data: { slot } = {} } = useSlotQuery({ documentId });
+
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => deleteSlot({ documentId }),
+    mutationKey: ['slot', 'delete', documentId],
+    onSuccess: () => {
+      const date = slot?.date;
+      const masterId = slot?.master?.documentId;
+
+      queryClient.invalidateQueries({
+        queryKey: ['slots', masterId, dayjs(date).format('YYYY-MM-DD')],
+      });
+
+      queryClient.invalidateQueries({
+        queryKey: ['slot', documentId],
+      });
+    },
+  });
+};

apps/web/hooks/contacts/query.ts

@@ -1,8 +0,0 @@
-import { getClients, getMasters } from '@/actions/contacts';
-import { useQuery } from '@tanstack/react-query';
-
-export const useClientsQuery = () =>
-  useQuery({ queryFn: getClients, queryKey: ['contacts', 'clients', 'get'] });
-
-export const useMastersQuery = () =>
-  useQuery({ queryFn: getMasters, queryKey: ['contacts', 'masters', 'get'] });

apps/web/hooks/contacts/use-customer-contacts.ts

@@ -1,29 +0,0 @@
-'use client';
-import { useClientsQuery, useMastersQuery } from './query';
-import { ContactsFilterContext } from '@/context/contacts-filter';
-import { sift } from 'radash';
-import { use, useMemo } from 'react';
-
-export function useCustomerContacts() {
-  const { filter } = use(ContactsFilterContext);
-
-  const { data: clientsData, isLoading: isLoadingClients } = useClientsQuery();
-  const { data: mastersData, isLoading: isLoadingMasters } = useMastersQuery();
-
-  const clients = clientsData?.clients;
-  const masters = mastersData?.masters;
-  const isLoading = isLoadingClients || isLoadingMasters;
-
-  const contacts = useMemo(() => {
-    switch (filter) {
-      case 'clients':
-        return clients ? sift(clients) : [];
-      case 'masters':
-        return masters ? sift(masters) : [];
-      default:
-        return [...(clients ? sift(clients) : []), ...(masters ? sift(masters) : [])];
-    }
-  }, [clients, masters, filter]);
-
-  return { contacts, isLoading };
-}

apps/web/hooks/orders/index.ts

@@ -1,18 +0,0 @@
-'use client';
-import { getOrder } from '@/actions/orders';
-// eslint-disable-next-line sonarjs/no-internal-api-use
-import type * as ApolloTypes from '@repo/graphql/node_modules/@apollo/client/core';
-import { useQuery } from '@tanstack/react-query';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type FixTypescriptCringe = ApolloTypes.FetchResult;
-
-type Props = {
-  documentId: string;
-};
-
-export const useOrderQuery = ({ documentId }: Props) =>
-  useQuery({
-    queryFn: () => getOrder({ documentId }),
-    queryKey: ['orders', 'get', documentId],
-  });

apps/web/hooks/profile/index.ts

@@ -1,21 +0,0 @@
-'use client';
-import { getProfile, updateProfile } from '@/actions/profile';
-import { type ProfileProps } from '@/components/profile/types';
-import { useMutation, useQuery } from '@tanstack/react-query';
-
-export const useProfileQuery = ({ telegramId }: ProfileProps) => {
-  return useQuery({
-    queryFn: () => getProfile({ telegramId }),
-    queryKey: telegramId ? ['profile', 'telegramId', telegramId, 'get'] : ['profile', 'get'],
-  });
-};
-
-export const useProfileMutation = ({ telegramId }: ProfileProps) => {
-  const { refetch } = useProfileQuery({ telegramId });
-
-  return useMutation({
-    mutationFn: updateProfile,
-    mutationKey: ['profile', 'telegramId', telegramId, 'update'],
-    onSuccess: () => refetch(),
-  });
-};

apps/web/hooks/slots/index.ts

@@ -1,67 +0,0 @@
-'use client';
-import { addSlot, deleteSlot, getSlot, getSlots, updateSlot } from '@/actions/slots';
-import { ScheduleContext } from '@/context/schedule';
-import { formatDate } from '@/utils/date';
-// eslint-disable-next-line sonarjs/no-internal-api-use
-import type * as ApolloTypes from '@repo/graphql/node_modules/@apollo/client/core';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { use } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type FixTypescriptCringe = ApolloTypes.FetchResult;
-
-export const useSlots = () => {
-  const { selectedDate } = use(ScheduleContext);
-
-  return useQuery({
-    queryFn: () =>
-      getSlots({
-        filters: {
-          date: {
-            eq: formatDate(selectedDate).db(),
-          },
-        },
-      }),
-    queryKey: ['slots', 'list', selectedDate],
-  });
-};
-
-type Props = {
-  documentId: string;
-};
-
-export const useSlotQuery = ({ documentId }: Props) =>
-  useQuery({
-    queryFn: () => getSlot({ documentId }),
-    queryKey: ['slots', 'get', documentId],
-  });
-
-export const useSlotMutation = ({ documentId }: Props) => {
-  const { refetch } = useSlotQuery({ documentId });
-
-  return useMutation({
-    mutationFn: updateSlot,
-    mutationKey: ['slots', 'update', documentId],
-    onSuccess: () => refetch(),
-  });
-};
-
-export const useSlotAdd = () => {
-  const { refetch } = useSlots();
-
-  return useMutation({
-    mutationFn: addSlot,
-    mutationKey: ['slots', 'add'],
-    onSuccess: () => refetch(),
-  });
-};
-
-export const useSlotDelete = ({ documentId }: Props) => {
-  const { refetch } = useSlots();
-
-  return useMutation({
-    mutationFn: () => deleteSlot({ documentId }),
-    mutationKey: ['slots', 'delete', documentId],
-    onSuccess: () => refetch(),
-  });
-};

apps/web/mocks/get-telegram-user.ts

@@ -5,7 +5,7 @@ import { env } from '@/config/env';
 export async function getTelegramUser() {
   if (process.env.NODE_ENV !== 'production')
     return {
-      id: env.__DEV_TELEGRAM_ID,
+      id: Number.parseInt(env.__DEV_TELEGRAM_ID, 10),
     };
 
   return null;

apps/web/next.config.js

@@ -3,6 +3,9 @@ import createNextIntlPlugin from 'next-intl/plugin';
 const withNextIntl = createNextIntlPlugin('./utils/i18n/i18n.ts');
 
 const nextConfig = withNextIntl({
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   reactStrictMode: true,
   transpilePackages: ['@repo/ui'],
 });

apps/web/package.json

@@ -17,10 +17,10 @@
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.64.1",
     "@telegram-apps/sdk-react": "^2.0.19",
-    "dayjs": "^1.11.13",
+    "dayjs": "catalog:",
     "graphql": "catalog:",
     "lucide-react": "catalog:",
-    "next": "15.2.0",
+    "next": "15.3.0",
     "next-auth": "^4.24.11",
     "next-intl": "^3.26.0",
     "next-themes": "^0.4.4",
@@ -28,7 +28,8 @@
     "react": "catalog:",
     "react-dom": "catalog:",
     "use-debounce": "^10.0.4",
-    "zod": "catalog:"
+    "zod": "catalog:",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.1",

apps/web/providers/auth.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { SessionProvider } from 'next-auth/react';
 
 export function AuthProvider({ children }: { readonly children: React.ReactNode }) {

apps/web/providers/telegram.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/function-return-type */
 'use client';
+
 import { useClientOnce, useDidMount } from '@/hooks/telegram';
 import { setLocale } from '@/utils/i18n/locale';
 import { init } from '@/utils/telegram/init';

apps/web/providers/theme-provider.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { type ComponentProps, useEffect, useState } from 'react';
 

apps/web/stores/lib/slices/client-slice.ts

@@ -0,0 +1,11 @@
+import { type StateCreator } from 'zustand';
+
+export type ClientSlice = {
+  clientId: null | string;
+  setClientId: (id: null | string) => void;
+};
+
+export const createClientSlice: StateCreator<ClientSlice> = (set) => ({
+  clientId: null,
+  setClientId: (id) => set({ clientId: id }),
+});

apps/web/stores/lib/slices/datetime-slice.ts

@@ -0,0 +1,15 @@
+import { type StateCreator } from 'zustand';
+
+export type DateTimeSlice = {
+  date: Date;
+  setDate: (date: Date) => void;
+  setTime: (time: null | string) => void;
+  time: null | string;
+};
+
+export const createDateTimeSlice: StateCreator<DateTimeSlice> = (set) => ({
+  date: new Date(),
+  setDate: (date) => set({ date }),
+  setTime: (time) => set({ time }),
+  time: null,
+});

apps/web/stores/lib/slices/index.ts

@@ -0,0 +1,6 @@
+export * from './client-slice';
+export * from './datetime-slice';
+export * from './master-slice';
+export * from './service-slice';
+export * from './slot-slice';
+export * from './steps-slice';

apps/web/stores/lib/slices/master-slice.ts

@@ -0,0 +1,11 @@
+import { type StateCreator } from 'zustand';
+
+export type MasterSlice = {
+  masterId: null | string;
+  setMasterId: (id: null | string) => void;
+};
+
+export const createMasterSlice: StateCreator<MasterSlice> = (set) => ({
+  masterId: null,
+  setMasterId: (id) => set({ masterId: id }),
+});

apps/web/stores/lib/slices/service-slice.ts

@@ -0,0 +1,11 @@
+import { type StateCreator } from 'zustand';
+
+export type ServiceSlice = {
+  serviceId: null | string;
+  setServiceId: (id: null | string) => void;
+};
+
+export const createServiceSlice: StateCreator<ServiceSlice> = (set) => ({
+  serviceId: null,
+  setServiceId: (id) => set({ serviceId: id }),
+});

apps/web/stores/lib/slices/slot-slice.ts

@@ -0,0 +1,11 @@
+import { type StateCreator } from 'zustand';
+
+export type SlotSlice = {
+  setSlotId: (slot: null | string) => void;
+  slotId: null | string;
+};
+
+export const createSlotSlice: StateCreator<SlotSlice> = (set) => ({
+  setSlotId: (slot) => set({ slotId: slot }),
+  slotId: null,
+});

apps/web/stores/lib/slices/steps-slice.ts

@@ -0,0 +1,41 @@
+/* eslint-disable canonical/id-match */
+/* eslint-disable @typescript-eslint/naming-convention */
+import { type StateCreator } from 'zustand';
+
+export type Steps =
+  | 'client-select'
+  | 'datetime-select'
+  | 'error'
+  | 'loading'
+  | 'master-select'
+  | 'service-select'
+  | 'success';
+
+export type StepsSlice = {
+  _setStepSequence: (steps: Steps[]) => void;
+  _stepSequence: Steps[];
+  nextStep: () => void;
+  prevStep: () => void;
+  setStep: (step: Steps) => void;
+  step: Steps;
+};
+
+export const createStepsSlice: StateCreator<StepsSlice> = (set, get) => ({
+  _setStepSequence: (steps) => set({ _stepSequence: steps }),
+  _stepSequence: [],
+  nextStep: () => {
+    const { _stepSequence, step } = get();
+    const index = _stepSequence.indexOf(step);
+    const next = _stepSequence[index + 1];
+    if (next) set({ step: next });
+  },
+
+  prevStep: () => {
+    const { _stepSequence, step } = get();
+    const index = _stepSequence.indexOf(step);
+    const previous = _stepSequence[index - 1];
+    if (previous) set({ step: previous });
+  },
+  setStep: (step) => set({ step }),
+  step: 'loading',
+});

apps/web/stores/order/context.ts

@@ -0,0 +1,6 @@
+import { createOrderStore } from './store';
+import { createZustandStore } from '@/utils/zustand/context';
+
+const { Provider, useZustandStore } = createZustandStore(createOrderStore);
+
+export { Provider as OrderStoreProvider, useZustandStore as useOrderStore };

apps/web/stores/order/hooks.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable canonical/id-match */
+'use client';
+import { useOrderStore } from './context';
+import { type Steps } from './types';
+import { useCustomerQuery } from '@/hooks/api/customers';
+import { Enum_Customer_Role } from '@repo/graphql/types';
+import { useEffect } from 'react';
+
+const STEPS: Steps[] = [
+  'master-select',
+  'client-select',
+  'service-select',
+  'datetime-select',
+  'success',
+];
+export const MASTER_STEPS: Steps[] = STEPS.filter((step) => step !== 'master-select');
+export const CLIENT_STEPS: Steps[] = STEPS.filter((step) => step !== 'client-select');
+
+export function useInitOrderStore() {
+  const { data: { customer } = {} } = useCustomerQuery();
+
+  const setMasterId = useOrderStore((store) => store.setMasterId);
+  const setClientId = useOrderStore((store) => store.setClientId);
+  const setStep = useOrderStore((store) => store.setStep);
+  const setStepsSequence = useOrderStore((store) => store._setStepSequence);
+
+  useEffect(() => {
+    const role = customer?.role;
+
+    if (role === Enum_Customer_Role.Master && customer) {
+      setMasterId(customer?.documentId);
+    }
+
+    if (role === Enum_Customer_Role.Client && customer) {
+      setClientId(customer?.documentId);
+    }
+
+    const steps = role === Enum_Customer_Role.Master ? MASTER_STEPS : CLIENT_STEPS;
+    const initialStep = steps[0] as Steps;
+
+    setStepsSequence(steps);
+    setStep(initialStep);
+  }, [customer, setClientId, setMasterId, setStep, setStepsSequence]);
+}

apps/web/stores/order/index.tsx

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './hooks';