move order-card & time-range to @/components/shared

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';

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

@@ -1 +0,0 @@
-export { OrderCard } from '@/components/schedule/components/order-card';

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';

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',

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}

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>
-  );
-}

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';
 

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'>;

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> */}

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>
+  );
+}