MED-140: ui fixes (#69)

* MED-140: ui fixes * make accountid optional in hook
2025-09-02 12:14:24 +03:00
parent 3498406a0c
commit 9d62a2d86f
13 changed files with 142 additions and 64 deletions
--- a/app/home/(user)/_components/dashboard-cards.tsx
+++ b/app/home/(user)/_components/dashboard-cards.tsx
@@ -1,30 +1,28 @@
-import { Trans } from '@kit/ui/trans';
-import {
-  Card,
-  CardHeader,
-  CardDescription,
-  CardFooter,
-} from '@kit/ui/card';
-
 import Link from 'next/link';
-import { Button } from '@kit/ui/button';
+
 import { ChevronRight, HeartPulse } from 'lucide-react';

+import { Button } from '@kit/ui/button';
+import { Card, CardDescription, CardFooter, CardHeader } from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+
 export default function DashboardCards() {
  return (
-    <div className='flex gap-4 lg:px-4'>
+    <div className="flex gap-4 lg:px-4">
      <Card
        variant="gradient-success"
-        className="flex flex-col justify-between"
+        className="xs:w-1/2 sm:w-auto flex w-full flex-col justify-between"
      >
        <CardHeader className="flex-row">
          <div
-            className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
+            className={
+              'bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white'
+            }
          >
            <HeartPulse className="size-4 fill-green-500" />
          </div>
-          <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
-            <Link href='/home/order-analysis'>
+          <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
+            <Link href="/home/order-analysis">
              <Button size="icon" variant="outline" className="px-2 text-black">
                <ChevronRight className="size-4 stroke-2" />
              </Button>
@@ -33,10 +31,10 @@ export default function DashboardCards() {
        </CardHeader>
        <CardFooter className="flex flex-col items-start gap-2">
          <h5>
-            <Trans i18nKey='dashboard:heroCard.orderAnalysis.title' />
+            <Trans i18nKey="dashboard:heroCard.orderAnalysis.title" />
          </h5>
          <CardDescription className="text-primary">
-            <Trans i18nKey='dashboard:heroCard.orderAnalysis.description' />
+            <Trans i18nKey="dashboard:heroCard.orderAnalysis.description" />
          </CardDescription>
        </CardFooter>
      </Card>
--- a/app/home/(user)/_components/dashboard.tsx
+++ b/app/home/(user)/_components/dashboard.tsx
@@ -166,7 +166,7 @@ export default function Dashboard({

  return (
    <>
-      <div className="grid auto-rows-fr grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
+      <div className="xs:grid-cols-2 grid auto-rows-fr gap-3 sm:grid-cols-4 lg:grid-cols-5">
        {cards({
          gender: params?.gender,
          age: params?.age,
@@ -233,8 +233,11 @@ export default function Dashboard({
              index,
            ) => {
              return (
-                <div className="flex justify-between" key={index}>
-                  <div className="mr-4 flex flex-row items-center gap-4">
+                <div
+                  className="flex w-full justify-between gap-3 overflow-scroll"
+                  key={index}
+                >
+                  <div className="mr-4 flex min-w-fit flex-row items-center gap-4">
                    <div
                      className={cn(
                        'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
@@ -243,7 +246,7 @@ export default function Dashboard({
                    >
                      {icon}
                    </div>
-                    <div>
+                    <div className="min-w-fit">
                      <div className="inline-flex items-center gap-1 align-baseline text-sm font-medium">
                        {title}
                        <InfoTooltip content={tooltipContent} />
@@ -253,16 +256,24 @@ export default function Dashboard({
                      </p>
                    </div>
                  </div>
-                  <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4">
+                  <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4 min-w-fit">
                    <p className="text-sm font-medium"> {price}</p>
                    {href ? (
                      <Link href={href}>
-                        <Button size="sm" variant="secondary">
+                        <Button
+                          size="sm"
+                          variant="secondary"
+                          className="w-full min-w-fit"
+                        >
                          {buttonText}
                        </Button>
                      </Link>
                    ) : (
-                      <Button size="sm" variant="secondary">
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="w-full min-w-fit"
+                      >
                        {buttonText}
                      </Button>
                    )}
--- a/app/home/(user)/_components/home-mobile-navigation.tsx
+++ b/app/home/(user)/_components/home-mobile-navigation.tsx
@@ -1,12 +1,16 @@
 'use client';

+import { useMemo } from 'react';
+
 import Link from 'next/link';

 import { StoreCart } from '@medusajs/types';
-import { LogOut, Menu, ShoppingCart } from 'lucide-react';
+import { Cross, LogOut, Menu, Shield, ShoppingCart } from 'lucide-react';

+import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
+import { ApplicationRoleEnum } from '@kit/accounts/types/accounts';
 import {
-  featureFlagsConfig,
+  pathsConfig,
  personalAccountNavigationConfig,
 } from '@kit/shared/config';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
@@ -15,7 +19,6 @@ import {
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
-  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
@@ -23,14 +26,16 @@ import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';

 // home imports
-import { HomeAccountSelector } from '../_components/home-account-selector';
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';

 export function HomeMobileNavigation(props: {
  workspace: UserWorkspace;
  cart: StoreCart | null;
 }) {
+  const user = props.workspace.user;
+
  const signOut = useSignOut();
+  const { data: personalAccountData } = usePersonalAccountData(user.id);

  const Links = personalAccountNavigationConfig.routes.map((item, index) => {
    if ('children' in item) {
@@ -51,7 +56,29 @@ export function HomeMobileNavigation(props: {
    }
  });

-  const cartQuantityTotal = props.cart?.items?.reduce((acc, item) => acc + item.quantity, 0) ?? 0;
+  const hasTotpFactor = useMemo(() => {
+    const factors = user?.factors ?? [];
+    return factors.some(
+      (factor) => factor.factor_type === 'totp' && factor.status === 'verified',
+    );
+  }, [user?.factors]);
+
+  const isSuperAdmin = useMemo(() => {
+    const hasAdminRole =
+      personalAccountData?.application_role === ApplicationRoleEnum.SuperAdmin;
+
+    return hasAdminRole && hasTotpFactor;
+  }, [user, personalAccountData, hasTotpFactor]);
+
+  const isDoctor = useMemo(() => {
+    const hasDoctorRole =
+      personalAccountData?.application_role === ApplicationRoleEnum.Doctor;
+
+    return hasDoctorRole && hasTotpFactor;
+  }, [user, personalAccountData, hasTotpFactor]);
+
+  const cartQuantityTotal =
+    props.cart?.items?.reduce((acc, item) => acc + item.quantity, 0) ?? 0;
  const hasCartItems = cartQuantityTotal > 0;

  return (
@@ -61,22 +88,6 @@ export function HomeMobileNavigation(props: {
      </DropdownMenuTrigger>

      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
-        <If condition={featureFlagsConfig.enableTeamAccounts}>
-          <DropdownMenuGroup>
-            <DropdownMenuLabel>
-              <Trans i18nKey={'common:yourAccounts'} />
-            </DropdownMenuLabel>
-
-            <HomeAccountSelector
-              userId={props.workspace.user.id}
-              accounts={props.workspace.accounts}
-              collisionPadding={0}
-            />
-          </DropdownMenuGroup>
-
-          <DropdownMenuSeparator />
-        </If>
-
        <If condition={props.cart && hasCartItems}>
          <DropdownMenuGroup>
            <DropdownLink
@@ -91,6 +102,41 @@ export function HomeMobileNavigation(props: {

        <DropdownMenuGroup>{Links}</DropdownMenuGroup>

+        <If condition={isSuperAdmin}>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem asChild>
+            <Link
+              className={
+                's-full flex cursor-pointer items-center space-x-2 text-yellow-700 dark:text-yellow-500'
+              }
+              href={pathsConfig.app.admin}
+            >
+              <Shield className={'h-5'} />
+
+              <span>Super Admin</span>
+            </Link>
+          </DropdownMenuItem>
+        </If>
+
+        <If condition={isDoctor}>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem asChild>
+            <Link
+              className={
+                'flex h-full cursor-pointer items-center space-x-2 text-yellow-700 dark:text-yellow-500'
+              }
+              href={pathsConfig.app.doctor}
+            >
+              <Cross className={'h-5'} />
+
+              <span>
+                <Trans i18nKey="common:doctor" />
+              </span>
+            </Link>
+          </DropdownMenuItem>
+        </If>
        <DropdownMenuSeparator />

        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
--- a/app/home/(user)/_components/order-analyses-cards.tsx
+++ b/app/home/(user)/_components/order-analyses-cards.tsx
@@ -52,7 +52,7 @@ export default function OrderAnalysesCards({
  }

  return (
-    <div className="grid grid-cols-3 gap-6 mt-4">
+    <div className="grid 2xs:grid-cols-3 gap-6 mt-4">
      {analyses.map(({
        title,
        variant,