add fields to tto order view

app/home/(user)/_components/order/order-details.tsx

@@ -1,27 +1,63 @@
 import { formatDate } from 'date-fns';
 
+import { Database } from '@kit/supabase/database';
 import { Trans } from '@kit/ui/trans';
 
 export default function OrderDetails({
   order,
 }: {
-  order: { id: string; created_at: string | Date };
+  order: {
+    id: string;
+    created_at: string | Date;
+    location: Pick<
+      Database['medreport']['Tables']['connected_online_locations']['Row'],
+      'name' | 'address'
+    > | null;
+    serviceProvider: Pick<
+      Database['medreport']['Tables']['connected_online_providers']['Row'],
+      'email' | 'phone_number' | 'name'
+    > | null;
+  };
 }) {
+  const { id, created_at, location, serviceProvider } = order;
+
   return (
     <div className="flex flex-col gap-y-2">
       <div>
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
         </span>
-        <span className="break-all">{order.id}</span>
+        <span className="break-all">{id}</span>
       </div>
 
       <div>
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderDate" />:{' '}
         </span>
-        <span>{formatDate(order.created_at, 'dd.MM.yyyy HH:mm')}</span>
+        <span>{formatDate(created_at, 'dd.MM.yyyy HH:mm')}</span>
       </div>
+      {(location?.name || location?.address) && (
+        <div>
+          <span className="font-bold">
+            <Trans i18nKey="cart:orderConfirmed.location" />:{' '}
+          </span>
+          <span>
+            {location.name || location.address}{' '}
+            {location?.name ? location.address : ''}
+          </span>
+        </div>
+      )}
+
+      {serviceProvider && (
+        <div className="flex flex-col">
+          <span className="font-bold">
+            <Trans i18nKey="cart:orderConfirmed.serviceProvider" />:{' '}
+          </span>
+          <span>{serviceProvider.name}</span>
+          <span>{serviceProvider.phone_number}</span>
+          <span>{serviceProvider.email}</span>
+        </div>
+      )}
     </div>
   );
 }