From 3e60745a92840f03530eb8205312113ec7ddc478 Mon Sep 17 00:00:00 2001
From: Danel Kungla <danel@mountbirch.com>
Date: Thu, 9 Oct 2025 17:47:59 +0300
Subject: [PATCH] improve mobile view for my orders remove otp requirement from
 doctor

---
 .../_components/cart/mobile-cart-items.tsx    |  10 +-
 .../cart/mobile-cart-service-items.tsx        |  14 +-
 ...bile-cart-row.tsx => mobile-table-row.tsx} |  11 +-
 .../(user)/_components/orders/order-block.tsx |   2 +-
 .../_components/orders/order-items-table.tsx  | 187 +++++++++++-------
 .../components/personal-account-dropdown.tsx  |   4 +-
 .../20251009174500_remove_otp_from_doctor.sql |  15 ++
 7 files changed, 154 insertions(+), 89 deletions(-)
 rename app/home/(user)/_components/cart/{mobile-cart-row.tsx => mobile-table-row.tsx} (68%)
 create mode 100644 supabase/migrations/20251009174500_remove_otp_from_doctor.sql

diff --git a/app/home/(user)/_components/cart/mobile-cart-items.tsx b/app/home/(user)/_components/cart/mobile-cart-items.tsx
index 9b21f86..0c26780 100644
--- a/app/home/(user)/_components/cart/mobile-cart-items.tsx
+++ b/app/home/(user)/_components/cart/mobile-cart-items.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Table, TableBody } from '@kit/ui/shadcn/table';
 
-import MobileCartRow from './mobile-cart-row';
+import MobileTableRow from './mobile-table-row';
 
 const MobileCartItems = ({
   item,
@@ -24,12 +24,12 @@ const MobileCartItems = ({
   return (
     <Table className="border-separate rounded-lg border p-2">
       <TableBody>
-        <MobileCartRow
+        <MobileTableRow
           titleKey={productColumnLabelKey}
           value={item.product_title}
         />
-        <MobileCartRow titleKey="cart:table.time" value={item.quantity} />
-        <MobileCartRow
+        <MobileTableRow titleKey="cart:table.time" value={item.quantity} />
+        <MobileTableRow
           titleKey="cart:table.price"
           value={formatCurrency({
             value: item.unit_price,
@@ -37,7 +37,7 @@ const MobileCartItems = ({
             locale: language,
           })}
         />
-        <MobileCartRow
+        <MobileTableRow
           titleKey="cart:table.total"
           value={
             item.total &&
diff --git a/app/home/(user)/_components/cart/mobile-cart-service-items.tsx b/app/home/(user)/_components/cart/mobile-cart-service-items.tsx
index d73b929..bc3de9e 100644
--- a/app/home/(user)/_components/cart/mobile-cart-service-items.tsx
+++ b/app/home/(user)/_components/cart/mobile-cart-service-items.tsx
@@ -8,7 +8,7 @@ import { Button } from '@kit/ui/shadcn/button';
 import { Table, TableBody, TableCell, TableRow } from '@kit/ui/shadcn/table';
 
 import CartItemDelete from './cart-item-delete';
-import MobileCartRow from './mobile-cart-row';
+import MobileTableRow from './mobile-table-row';
 import { EnrichedCartItem } from './types';
 
 const MobileCartServiceItems = ({
@@ -31,20 +31,20 @@ const MobileCartServiceItems = ({
   return (
     <Table className="border-separate rounded-lg border p-2">
       <TableBody>
-        <MobileCartRow
+        <MobileTableRow
           titleKey={productColumnLabelKey}
           value={item.product_title}
         />
-        <MobileCartRow
+        <MobileTableRow
           titleKey="cart:table.time"
           value={formatDateAndTime(item.reservation.startTime.toString())}
         />
-        <MobileCartRow
+        <MobileTableRow
           titleKey="cart:table.location"
           value={item.reservation.location?.address ?? '-'}
         />
-        <MobileCartRow titleKey="cart:table.quantity" value={item.quantity} />
-        <MobileCartRow
+        <MobileTableRow titleKey="cart:table.quantity" value={item.quantity} />
+        <MobileTableRow
           titleKey="cart:table.price"
           value={formatCurrency({
             value: item.unit_price,
@@ -52,7 +52,7 @@ const MobileCartServiceItems = ({
             locale: language,
           })}
         />
-        <MobileCartRow
+        <MobileTableRow
           titleKey="cart:table.total"
           value={
             item.total &&
diff --git a/app/home/(user)/_components/cart/mobile-cart-row.tsx b/app/home/(user)/_components/cart/mobile-table-row.tsx
similarity index 68%
rename from app/home/(user)/_components/cart/mobile-cart-row.tsx
rename to app/home/(user)/_components/cart/mobile-table-row.tsx
index 9e31234..2c4ed94 100644
--- a/app/home/(user)/_components/cart/mobile-cart-row.tsx
+++ b/app/home/(user)/_components/cart/mobile-table-row.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Trans } from '@kit/ui/makerkit/trans';
 import { TableCell, TableHead, TableRow } from '@kit/ui/shadcn/table';
 
-const MobileCartRow = ({
+const MobleTableRow = ({
   titleKey,
   value,
 }: {
@@ -16,14 +16,9 @@ const MobileCartRow = ({
     </TableHead>
 
     <TableCell className="p-0 text-right">
-      <p
-        className="txt-medium-plus text-ui-fg-base"
-        data-testid="product-title"
-      >
-        {value}
-      </p>
+      <p className="txt-medium-plus text-ui-fg-base">{value}</p>
     </TableCell>
   </TableRow>
 );
 
-export default MobileCartRow;
+export default MobleTableRow;
diff --git a/app/home/(user)/_components/orders/order-block.tsx b/app/home/(user)/_components/orders/order-block.tsx
index 5eef5cb..2185e4e 100644
--- a/app/home/(user)/_components/orders/order-block.tsx
+++ b/app/home/(user)/_components/orders/order-block.tsx
@@ -51,7 +51,7 @@ export default function OrderBlock({
           </Link>
         </div>
       )}
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col sm:gap-4">
         {analysisOrder && (
           <OrderItemsTable
             items={itemsAnalysisPackage}
diff --git a/app/home/(user)/_components/orders/order-items-table.tsx b/app/home/(user)/_components/orders/order-items-table.tsx
index 18a7889..ec9bbef 100644
--- a/app/home/(user)/_components/orders/order-items-table.tsx
+++ b/app/home/(user)/_components/orders/order-items-table.tsx
@@ -23,6 +23,7 @@ import { Trans } from '@kit/ui/trans';
 import type { Order } from '~/lib/types/order';
 
 import { cancelTtoBooking } from '../../_lib/server/actions';
+import MobileTableRow from '../cart/mobile-table-row';
 import { logAnalysisResultsNavigateAction } from './actions';
 
 export type OrderItemType = 'analysisOrder' | 'ttoService';
@@ -60,76 +61,130 @@ export default function OrderItemsTable({
   };
 
   return (
-    <Table className="border-separate rounded-lg border">
-      <TableHeader className="text-ui-fg-subtle txt-medium-plus">
-        <TableRow>
-          <TableHead className="px-6">
-            <Trans i18nKey={title} />
-          </TableHead>
-          <TableHead className="px-6">
-            <Trans i18nKey="orders:table.createdAt" />
-          </TableHead>
-          {order.location && (
+    <>
+      <Table className="border-separate rounded-lg border p-2 sm:hidden">
+        <TableBody>
+          {items
+            .sort((a, b) =>
+              (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
+            )
+            .map((orderItem) => (
+              <div key={`${orderItem.id}-mobile`}>
+                <MobileTableRow
+                  titleKey={title}
+                  value={orderItem.product_title || ''}
+                />
+                <MobileTableRow
+                  titleKey="orders:table.createdAt"
+                  value={formatDate(orderItem.created_at, 'dd.MM.yyyy HH:mm')}
+                />
+                {order.location && (
+                  <MobileTableRow
+                    titleKey="orders:table.location"
+                    value={order.location}
+                  />
+                )}
+                <MobileTableRow
+                  titleKey="orders:table.status"
+                  value={
+                    isPackage
+                      ? `orders:status.analysisPackageOrder.${order?.status ?? 'CONFIRMED'}`
+                      : `orders:status.${type}.${order?.status ?? 'CONFIRMED'}`
+                  }
+                />
+                <TableRow>
+                  <TableCell />
+                  <TableCell className="flex w-full items-center justify-end p-0 pt-2">
+                    <Button size="sm" onClick={openDetailedView}>
+                      <Trans i18nKey="analysis-results:view" />
+                    </Button>
+                    {isTtoservice && order.bookingCode && (
+                      <Button
+                        size="sm"
+                        className="bg-warning/90 hover:bg-warning"
+                        onClick={() => setIsConfirmOpen(true)}
+                      >
+                        <Trans i18nKey="analysis-results:cancel" />
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              </div>
+            ))}
+        </TableBody>
+      </Table>
+
+      <Table className="hidden border-separate rounded-lg border sm:block">
+        <TableHeader className="text-ui-fg-subtle txt-medium-plus">
+          <TableRow>
             <TableHead className="px-6">
-              <Trans i18nKey="orders:table.location" />
+              <Trans i18nKey={title} />
             </TableHead>
-          )}
-          <TableHead className="px-6">
-            <Trans i18nKey="orders:table.status" />
-          </TableHead>
-          {isAnalysisOrder && <TableHead className="px-6"></TableHead>}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {items
-          .sort((a, b) =>
-            (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
-          )
-          .map((orderItem) => (
-            <TableRow className="w-full" key={orderItem.id}>
-              <TableCell className="w-[100%] px-6 text-left">
-                <p className="txt-medium-plus text-ui-fg-base">
-                  {orderItem.product_title}
-                </p>
-              </TableCell>
-
-              <TableCell className="px-6 whitespace-nowrap">
-                {formatDate(orderItem.created_at, 'dd.MM.yyyy HH:mm')}
-              </TableCell>
-              {order.location && (
-                <TableCell className="min-w-[180px] px-6">
-                  {order.location}
+            <TableHead className="px-6">
+              <Trans i18nKey="orders:table.createdAt" />
+            </TableHead>
+            {order.location && (
+              <TableHead className="px-6">
+                <Trans i18nKey="orders:table.location" />
+              </TableHead>
+            )}
+            <TableHead className="px-6">
+              <Trans i18nKey="orders:table.status" />
+            </TableHead>
+            {isAnalysisOrder && <TableHead className="px-6"></TableHead>}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items
+            .sort((a, b) =>
+              (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
+            )
+            .map((orderItem) => (
+              <TableRow className="w-full" key={orderItem.id}>
+                <TableCell className="w-[100%] px-6 text-left">
+                  <p className="txt-medium-plus text-ui-fg-base">
+                    {orderItem.product_title}
+                  </p>
                 </TableCell>
-              )}
-              <TableCell className="min-w-[180px] px-6">
-                {isPackage ? (
-                  <Trans
-                    i18nKey={`orders:status.analysisPackageOrder.${order?.status ?? 'CONFIRMED'}`}
-                  />
-                ) : (
-                  <Trans
-                    i18nKey={`orders:status.${type}.${order?.status ?? 'CONFIRMED'}`}
-                  />
-                )}
-              </TableCell>
 
-              <TableCell className="px-6 text-right">
-                <Button size="sm" onClick={openDetailedView}>
-                  <Trans i18nKey="analysis-results:view" />
-                </Button>
-                {isTtoservice && order.bookingCode && (
-                  <Button
-                    size="sm"
-                    className="bg-warning/90 hover:bg-warning mt-2 w-full"
-                    onClick={() => setIsConfirmOpen(true)}
-                  >
-                    <Trans i18nKey="analysis-results:cancel" />
-                  </Button>
+                <TableCell className="px-6 whitespace-nowrap">
+                  {formatDate(orderItem.created_at, 'dd.MM.yyyy HH:mm')}
+                </TableCell>
+                {order.location && (
+                  <TableCell className="min-w-[180px] px-6">
+                    {order.location}
+                  </TableCell>
                 )}
-              </TableCell>
-            </TableRow>
-          ))}
-      </TableBody>
+                <TableCell className="min-w-[180px] px-6">
+                  {isPackage ? (
+                    <Trans
+                      i18nKey={`orders:status.analysisPackageOrder.${order?.status ?? 'CONFIRMED'}`}
+                    />
+                  ) : (
+                    <Trans
+                      i18nKey={`orders:status.${type}.${order?.status ?? 'CONFIRMED'}`}
+                    />
+                  )}
+                </TableCell>
+
+                <TableCell className="px-6 text-right">
+                  <Button size="sm" onClick={openDetailedView}>
+                    <Trans i18nKey="analysis-results:view" />
+                  </Button>
+                  {isTtoservice && order.bookingCode && (
+                    <Button
+                      size="sm"
+                      className="bg-warning/90 hover:bg-warning mt-2 w-full"
+                      onClick={() => setIsConfirmOpen(true)}
+                    >
+                      <Trans i18nKey="analysis-results:cancel" />
+                    </Button>
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
       {order?.bookingCode && order?.clinicId && (
         <ConfirmationModal
           isOpen={isConfirmOpen}
@@ -141,6 +196,6 @@ export default function OrderItemsTable({
           descriptionKey="orders:confirmBookingCancel.description"
         />
       )}
-    </Table>
+    </>
   );
 }
diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx
index 447a8a3..8fc2c8c 100644
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx
@@ -94,8 +94,8 @@ export function PersonalAccountDropdown({
     const hasDoctorRole =
       personalAccountData?.application_role === ApplicationRoleEnum.Doctor;
 
-    return hasDoctorRole && hasTotpFactor;
-  }, [personalAccountData, hasTotpFactor]);
+    return hasDoctorRole;
+  }, [personalAccountData]);
 
   return (
     <DropdownMenu>
diff --git a/supabase/migrations/20251009174500_remove_otp_from_doctor.sql b/supabase/migrations/20251009174500_remove_otp_from_doctor.sql
new file mode 100644
index 0000000..77bd8f6
--- /dev/null
+++ b/supabase/migrations/20251009174500_remove_otp_from_doctor.sql
@@ -0,0 +1,15 @@
+CREATE OR REPLACE FUNCTION medreport.is_doctor()
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+BEGIN
+  RETURN EXISTS (
+    SELECT 1 
+    FROM medreport.accounts 
+    WHERE primary_owner_user_id = auth.uid() 
+    AND application_role = 'doctor'
+  );
+END;
+$$;
+grant execute on function medreport.is_doctor() to authenticated;
\ No newline at end of file