From 2510e0bcaef1b87927e8f0fe72510d5ab5b06598 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 23 May 2025 16:48:20 +0300
Subject: [PATCH] move order-card & time-range to @/components/shared

---
 .../web/components/orders/components/index.ts |  1 -
 .../orders/components/order-card.tsx          |  1 -
 apps/web/components/orders/orders-list.tsx    |  2 +-
 .../schedule/components/slot-card.tsx         |  4 ++--
 .../schedule/components/slot-time.tsx         |  5 ++--
 .../schedule/components/time-range.tsx        | 24 -------------------
 .../components/schedule/slot-orders-list.tsx  |  2 +-
 apps/web/components/schedule/types/index.tsx  |  2 --
 .../components => shared}/order-card.tsx      |  4 ++--
 apps/web/components/shared/time-range.tsx     | 18 ++++++++++++++
 10 files changed, 27 insertions(+), 36 deletions(-)
 delete mode 100644 apps/web/components/orders/components/order-card.tsx
 rename apps/web/components/{schedule/components => shared}/order-card.tsx (93%)
 create mode 100644 apps/web/components/shared/time-range.tsx

diff --git a/apps/web/components/orders/components/index.ts b/apps/web/components/orders/components/index.ts
index fb40a54..6b7f476 100644
--- a/apps/web/components/orders/components/index.ts
+++ b/apps/web/components/orders/components/index.ts
@@ -2,7 +2,6 @@ export * from './back-button';
 export * from './contacts-grid';
 export * from './datetime-select';
 export * from './next-button';
-export * from './order-card';
 export * from './result';
 export * from './service-select';
 export * from './submit-button';
diff --git a/apps/web/components/orders/components/order-card.tsx b/apps/web/components/orders/components/order-card.tsx
deleted file mode 100644
index 2ddd970..0000000
--- a/apps/web/components/orders/components/order-card.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { OrderCard } from '@/components/schedule/components/order-card';
diff --git a/apps/web/components/orders/orders-list.tsx b/apps/web/components/orders/orders-list.tsx
index 0344f5e..3906867 100644
--- a/apps/web/components/orders/orders-list.tsx
+++ b/apps/web/components/orders/orders-list.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
-import { OrderCard } from './components/order-card';
+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';
diff --git a/apps/web/components/schedule/components/slot-card.tsx b/apps/web/components/schedule/components/slot-card.tsx
index da76edb..97f07c0 100644
--- a/apps/web/components/schedule/components/slot-card.tsx
+++ b/apps/web/components/schedule/components/slot-card.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
-import { ReadonlyTimeRange } from './time-range';
+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';
@@ -31,7 +31,7 @@ export function SlotCard(props: Readonly<SlotFieldsFragment>) {
     <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 {...props} />
+          <ReadonlyTimeRange timeEnd={props.time_end} timeStart={props.time_start} />
           <span
             className={cn(
               'text-xs font-normal',
diff --git a/apps/web/components/schedule/components/slot-time.tsx b/apps/web/components/schedule/components/slot-time.tsx
index 42ef831..4006960 100644
--- a/apps/web/components/schedule/components/slot-time.tsx
+++ b/apps/web/components/schedule/components/slot-time.tsx
@@ -2,7 +2,8 @@
 'use client';
 
 import { type SlotComponentProps } from '../types';
-import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
+import { EditableTimeRangeForm } from './time-range';
+import { 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';
@@ -57,7 +58,7 @@ function SlotTimeReadonly({ documentId }: 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}
diff --git a/apps/web/components/schedule/components/time-range.tsx b/apps/web/components/schedule/components/time-range.tsx
index 5bc6699..3ab64c9 100644
--- a/apps/web/components/schedule/components/time-range.tsx
+++ b/apps/web/components/schedule/components/time-range.tsx
@@ -1,10 +1,6 @@
 'use client';
-
-import { type OrderTimeRange } from '../types';
 import { useScheduleStore } from '@/stores/schedule';
-import { formatTime } from '@repo/graphql/utils/datetime-format';
 import { Input } from '@repo/ui/components/ui/input';
-import { cn } from '@repo/ui/lib/utils';
 import { type FormEvent, type PropsWithChildren } from 'react';
 
 type EditableTimeRangeProps = {
@@ -12,11 +8,6 @@ type EditableTimeRangeProps = {
   readonly onSubmit: (event: FormEvent) => void;
 };
 
-type TimeRangeProps = OrderTimeRange & {
-  readonly className?: string;
-  readonly delimiter?: boolean;
-};
-
 export function EditableTimeRangeForm({
   children,
   disabled = false,
@@ -55,18 +46,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">{time_start ? formatTime(time_start).user() : 'xx:xx'}</span>
-      {delimiter && ' - '}
-      <span className="tracking-wider">{time_end ? formatTime(time_end).user() : 'xx:xx'}</span>
-    </div>
-  );
-}
diff --git a/apps/web/components/schedule/slot-orders-list.tsx b/apps/web/components/schedule/slot-orders-list.tsx
index 61d01f7..7880ddd 100644
--- a/apps/web/components/schedule/slot-orders-list.tsx
+++ b/apps/web/components/schedule/slot-orders-list.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { OrderCard } from './components/order-card';
+import { OrderCard } from '../shared/order-card';
 import { type SlotComponentProps } from './types';
 import { useSlotQuery } from '@/hooks/api/slots';
 
diff --git a/apps/web/components/schedule/types/index.tsx b/apps/web/components/schedule/types/index.tsx
index e177b89..842cbd4 100644
--- a/apps/web/components/schedule/types/index.tsx
+++ b/apps/web/components/schedule/types/index.tsx
@@ -2,6 +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 OrderTimeRange = Pick<GQL.OrderFieldsFragment, 'time_end' | 'time_start'>;
-export type Slot = NonNullable<GQL.GetSlotQuery['slot']>;
 export type SlotComponentProps = Pick<GQL.SlotFieldsFragment, 'documentId'>;
diff --git a/apps/web/components/schedule/components/order-card.tsx b/apps/web/components/shared/order-card.tsx
similarity index 93%
rename from apps/web/components/schedule/components/order-card.tsx
rename to apps/web/components/shared/order-card.tsx
index 346832a..2227033 100644
--- a/apps/web/components/schedule/components/order-card.tsx
+++ b/apps/web/components/shared/order-card.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
-import { type OrderClient, type OrderComponentProps } from '../types';
+import { type OrderClient, type OrderComponentProps } from '../schedule/types';
 import { ReadonlyTimeRange } from './time-range';
 import { useOrderQuery } from '@/hooks/api/orders';
 import { Enum_Order_State } from '@repo/graphql/types';
@@ -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> */}
diff --git a/apps/web/components/shared/time-range.tsx b/apps/web/components/shared/time-range.tsx
new file mode 100644
index 0000000..be11032
--- /dev/null
+++ b/apps/web/components/shared/time-range.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>
+  );
+}