Merge branch 'main' into B2B-30

app/home/(user)/_components/dashboard.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { InfoTooltip } from '@/components/ui/info-tooltip';
+import { toTitleCase } from '@/lib/utils';
+import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
+import {
+  Activity,
+  ChevronRight,
+  Clock9,
+  Droplets,
+  LineChart,
+  Pill,
+  Scale,
+  TrendingUp,
+  User,
+} from 'lucide-react';
+
+import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
+import { useUserWorkspace } from '@kit/accounts/hooks/use-user-workspace';
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardProps,
+} from '@kit/ui/card';
+import { PageDescription } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
+const dummyCards = [
+  {
+    title: 'dashboard:gender',
+    description: 'dashboard:male',
+    icon: <User />,
+    iconBg: 'bg-success',
+  },
+  {
+    title: 'dashboard:age',
+    description: '43',
+    icon: <Clock9 />,
+    iconBg: 'bg-success',
+  },
+  {
+    title: 'dashboard:height',
+    description: '183',
+    icon: <RulerHorizontalIcon className="size-4" />,
+    iconBg: 'bg-success',
+  },
+  {
+    title: 'dashboard:weight',
+    description: '92kg',
+    icon: <Scale />,
+    iconBg: 'bg-warning',
+  },
+  {
+    title: 'dashboard:bmi',
+    description: '27.5',
+    icon: <TrendingUp />,
+    iconBg: 'bg-warning',
+  },
+  {
+    title: 'dashboard:bloodPressure',
+    description: '160/98',
+    icon: <Activity />,
+    iconBg: 'bg-warning',
+  },
+  {
+    title: 'dashboard:cholesterol',
+    description: '5',
+    icon: <BlendingModeIcon className="size-4" />,
+    iconBg: 'bg-destructive',
+  },
+  {
+    title: 'dashboard:ldlCholesterol',
+    description: '3,6',
+    icon: <Pill />,
+    iconBg: 'bg-warning',
+  },
+  {
+    title: 'Score 2',
+    description: 'Normis',
+    icon: <LineChart />,
+    iconBg: 'bg-success',
+  },
+  {
+    title: 'dashboard:smoking',
+    description: 'dashboard:respondToQuestion',
+    descriptionColor: 'text-primary',
+    icon: (
+      <Button size="icon" variant="outline" className="px-2 text-black">
+        <ChevronRight className="size-4 stroke-2" />
+      </Button>
+    ),
+    cardVariant: 'gradient-success' as CardProps['variant'],
+  },
+];
+
+const dummyRecommendations = [
+  {
+    icon: <BlendingModeIcon className="size-4" />,
+    color: 'bg-cyan/10 text-cyan',
+    title: 'Kolesterooli kontroll',
+    description: 'HDL-kolestrool',
+    tooltipContent: 'Selgitus',
+    price: '20,00 €',
+    buttonText: 'Telli',
+  },
+  {
+    icon: <BlendingModeIcon className="size-4" />,
+    color: 'bg-primary/10 text-primary',
+    title: 'Kolesterooli kontroll',
+    tooltipContent: 'Selgitus',
+    description: 'LDL-Kolesterool',
+    buttonText: 'Broneeri',
+  },
+  {
+    icon: <Droplets />,
+    color: 'bg-destructive/10 text-destructive',
+    title: 'Vererõhu kontroll',
+    tooltipContent: 'Selgitus',
+    description: 'Score-Risk 2',
+    price: '20,00 €',
+    buttonText: 'Telli',
+  },
+];
+
+export default function Dashboard() {
+  const userWorkspace = useUserWorkspace();
+  const account = usePersonalAccountData(userWorkspace.user.id);
+
+  return (
+    <>
+      <div>
+        <h4>
+          <Trans i18nKey={'common:welcome'} />
+          {account?.data?.name ? `, ${toTitleCase(account.data.name)}` : ''}
+        </h4>
+        <PageDescription>
+          <Trans i18nKey={'dashboard:recentlyCheckedDescription'} />:
+        </PageDescription>
+      </div>
+      <div className="grid auto-rows-fr grid-cols-5 gap-3">
+        {dummyCards.map(
+          ({
+            title,
+            description,
+            icon,
+            iconBg,
+            cardVariant,
+            descriptionColor,
+          }) => (
+            <Card
+              key={title}
+              variant={cardVariant}
+              className="flex flex-col justify-between"
+            >
+              <CardHeader className="items-end-safe">
+                <div
+                  className={cn(
+                    'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
+                    iconBg,
+                  )}
+                >
+                  {icon}
+                </div>
+              </CardHeader>
+              <CardFooter className="flex flex-col items-start">
+                <h5>
+                  <Trans i18nKey={title} />
+                </h5>
+                <CardDescription className={descriptionColor}>
+                  <Trans i18nKey={description} />
+                </CardDescription>
+              </CardFooter>
+            </Card>
+          ),
+        )}
+      </div>
+      <Card>
+        <CardHeader className="items-start">
+          <h4>
+            <Trans i18nKey="dashboard:recommendedForYou" />
+          </h4>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {dummyRecommendations.map(
+            (
+              {
+                icon,
+                color,
+                title,
+                description,
+                tooltipContent,
+                price,
+                buttonText,
+              },
+              index,
+            ) => {
+              return (
+                <div className="flex justify-between" key={index}>
+                  <div className="flex flex-row items-center gap-4">
+                    <div
+                      className={cn(
+                        'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
+                        color,
+                      )}
+                    >
+                      {icon}
+                    </div>
+                    <div>
+                      <div className="inline-flex items-center gap-1 align-baseline text-sm font-medium">
+                        {title}
+                        <InfoTooltip content={tooltipContent} />
+                      </div>
+                      <p className="text-muted-foreground text-sm">
+                        {description}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4">
+                    <p className="text-sm font-medium"> {price}</p>
+                    <Button size="sm" variant="secondary">
+                      {buttonText}
+                    </Button>
+                  </div>
+                </div>
+              );
+            },
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+}

app/home/(user)/_components/home-menu-navigation.tsx

@@ -1,7 +1,12 @@
+
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
 import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
-import { Trans } from '@kit/ui/trans';
+import { Search } from '~/components/ui/search';
 
+import { SIDEBAR_WIDTH } from '../../../../packages/ui/src/shadcn/constants';
 // home imports
 import { UserNotifications } from '../_components/user-notifications';
 import { type UserWorkspace } from '../_lib/server/load-user-workspace';
@@ -10,31 +15,33 @@ import { ShoppingCart } from 'lucide-react';
 
 export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
   const { workspace, user, accounts } = props.workspace;
+
   return (
-    <div className={'flex w-full flex-1 justify-between'}>
-      <div className={'flex items-center space-x-8'}>
+    <div className={'flex w-full flex-1 items-center justify-between gap-3'}>
+      <div className={cn('flex items-center', `w-[${SIDEBAR_WIDTH}]`)}>
         <AppLogo />
 
       </div>
-      {/* searbar */}
-      <div className={'flex justify-end space-x-2.5  gap-2 items-center'}>
-        {/* TODO: implement account budget */}
-        <Button className='relative px-4 py-2 h-10 border-1 mr-0 cursor-pointer' variant={'ghost'}>
-          <span className='flex items-center text-nowrap'>€ 231,89</span>
-        </Button>
-        {/* TODO: implement cart */}
-        <Button className='relative px-4 py-2 h-10 border-1 mr-0 cursor-pointer gap-2' variant={'ghost'}>
-          <ShoppingCart size={16} /> 
+      <Search
+        className="flex grow"
+        startElement={<Trans i18nKey="common:search" values={{ end: '...' }} />}
+      />
 
-          <Trans i18nKey="billing:cart.label" values={{ items: 0 }}/>
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="ghost">
+          <ShoppingCart className="stroke-[1.5px]" />
+          <Trans i18nKey="common:shoppingCart" /> (0)
         </Button>
         <UserNotifications userId={user.id} />
-        <ProfileAccountDropdownContainer
-          user={user}
-          account={workspace}
-          accounts={accounts}
-          showProfileName={true}
-        />
+
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={workspace}
+            showProfileName
+            accounts={accounts}
+          />
+        </div>
       </div>
     </div>
   );

app/home/(user)/_components/home-sidebar.tsx

@@ -1,61 +1,29 @@
-import { If } from '@kit/ui/if';
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
   SidebarNavigation,
 } from '@kit/ui/shadcn-sidebar';
-import { cn } from '@kit/ui/utils';
+import { Trans } from '@kit/ui/trans';
 
-import { AppLogo } from '~/components/app-logo';
-import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
-import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
-import { UserNotifications } from '~/home/(user)/_components/user-notifications';
 
-// home imports
-import type { UserWorkspace } from '../_lib/server/load-user-workspace';
-import { HomeAccountSelector } from './home-account-selector';
-
-interface HomeSidebarProps {
-  workspace: UserWorkspace;
-}
-
-export function HomeSidebar(props: HomeSidebarProps) {
-  const { workspace, user, accounts } = props.workspace;
+export function HomeSidebar() {
   const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
 
   return (
     <Sidebar collapsible={collapsible}>
-      <SidebarHeader className={'h-16 justify-center'}>
-        <div className={'flex items-center justify-between gap-x-3'}>
-          <If
-            condition={featuresFlagConfig.enableTeamAccounts}
-            fallback={
-              <AppLogo
-                className={cn(
-                  'p-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
-                )}
-              />
-            }
-          >
-            <HomeAccountSelector userId={user.id} accounts={accounts} />
-          </If>
-
-          <div className={'group-data-[minimized=true]:hidden'}>
-            <UserNotifications userId={user.id} />
-          </div>
+      <SidebarHeader className="h-24 justify-center">
+        <div className="mt-24 flex items-center">
+          <h5>
+            <Trans i18nKey="common:myActions" />
+          </h5>
         </div>
       </SidebarHeader>
 
       <SidebarContent>
         <SidebarNavigation config={personalAccountNavigationConfig} />
       </SidebarContent>
-
-      <SidebarFooter>
-        <ProfileAccountDropdownContainer user={user} account={workspace} />
-      </SidebarFooter>
     </Sidebar>
   );
 }