From b53a276540869347a6bd7a98d05dd4741aa81f93 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 3 Jul 2025 16:35:04 +0300
Subject: [PATCH] feat(service-select): share services list for all enhance
 service card display with duration formatting and improve layout

---
 .../orders/order-form/service-select.tsx      | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/orders/order-form/service-select.tsx b/apps/web/components/orders/order-form/service-select.tsx
index 87f9783..5c4ecd9 100644
--- a/apps/web/components/orders/order-form/service-select.tsx
+++ b/apps/web/components/orders/order-form/service-select.tsx
@@ -5,19 +5,10 @@ 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';
+import { formatTime } from '@repo/utils/datetime-format';
 
 export function ServiceSelect() {
-  const masterId = useOrderStore((store) => store.masterId);
-
-  const { data: { services } = {} } = useServicesQuery({
-    filters: {
-      master: {
-        documentId: {
-          eq: masterId,
-        },
-      },
-    },
-  });
+  const { data: { services } = {} } = useServicesQuery({});
 
   if (!services?.length) return <DataNotFound title="Услуги не найдены" />;
 
@@ -28,7 +19,7 @@ export function ServiceSelect() {
   );
 }
 
-function ServiceCard({ documentId, name }: Readonly<ServiceFieldsFragment>) {
+function ServiceCard({ documentId, duration, name }: Readonly<ServiceFieldsFragment>) {
   const serviceId = useOrderStore((store) => store.serviceId);
   const setServiceId = useOrderStore((store) => store.setServiceId);
 
@@ -53,9 +44,23 @@ function ServiceCard({ documentId, name }: Readonly<ServiceFieldsFragment>) {
         type="radio"
         value={documentId}
       />
-      <div className="flex flex-col gap-2">
-        {name}
-        {/* <span className={cn('text-xs font-normal', 'text-muted-foreground')} /> */}
+      <div className="flex w-full items-center justify-between gap-2">
+        <span className="text-base font-semibold text-foreground">{name}</span>
+        <span
+          className={cn(
+            'inline-flex items-center gap-1 px-4 p-2 rounded-full bg-secondary dark:bg-background text-primary text-xs font-medium',
+          )}
+        >
+          <svg
+            className="size-4 opacity-70"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M8 1.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13ZM2.5 8a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0Zm6-2.75a.5.5 0 0 0-1 0v3c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H8.5V5.25Z" />
+          </svg>
+          {formatTime(duration).user()}
+        </span>
       </div>
     </label>
   );