B2B-36: add personal dashboard (#20)

* B2B-36: add dashboard cards

* B2B-36: add dashboard cards

* card variants, some improvements, gen db types

* add menus to home page

* update db types

* remove unnecessary card variant

---------

Co-authored-by: Helena <helena@Helenas-MacBook-Pro.local>

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,65 +1,43 @@
-import {
-  BorderedNavigationMenu,
-  BorderedNavigationMenuItem,
-} from '@kit/ui/bordered-navigation-menu';
-import { If } from '@kit/ui/if';
+import { ShoppingCart } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+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 featuresFlagConfig from '~/config/feature-flags.config';
-import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { Search } from '~/components/ui/search';
 
+import { SIDEBAR_WIDTH } from '../../../../packages/ui/src/shadcn/constants';
 // home imports
-import { HomeAccountSelector } from '../_components/home-account-selector';
 import { UserNotifications } from '../_components/user-notifications';
 import { type UserWorkspace } from '../_lib/server/load-user-workspace';
 
 export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
-  const { workspace, user, accounts } = props.workspace;
-
-  const routes = personalAccountNavigationConfig.routes.reduce<
-    Array<{
-      path: string;
-      label: string;
-      Icon?: React.ReactNode;
-      end?: boolean | ((path: string) => boolean);
-    }>
-  >((acc, item) => {
-    if ('children' in item) {
-      return [...acc, ...item.children];
-    }
-
-    if ('divider' in item) {
-      return acc;
-    }
-
-    return [...acc, item];
-  }, []);
+  const { workspace, user } = 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 />
-
-        <BorderedNavigationMenu>
-          {routes.map((route) => (
-            <BorderedNavigationMenuItem {...route} key={route.path} />
-          ))}
-        </BorderedNavigationMenu>
       </div>
+      <Search
+        className="flex grow"
+        startElement={<Trans i18nKey="common:search" values={{ end: '...' }} />}
+      />
 
-      <div className={'flex justify-end space-x-2.5'}>
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="outline">
+          <ShoppingCart className="stroke-[1.5px]" />
+          <Trans i18nKey="common:shoppingCart" /> (0)
+        </Button>
         <UserNotifications userId={user.id} />
 
-        <If condition={featuresFlagConfig.enableTeamAccounts}>
-          <HomeAccountSelector userId={user.id} accounts={accounts} />
-        </If>
-
         <div>
           <ProfileAccountDropdownContainer
             user={user}
             account={workspace}
-            showProfileName={false}
+            showProfileName
           />
         </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>
   );
 }

app/home/(user)/layout.tsx

@@ -39,7 +39,7 @@ function SidebarLayout({ children }: React.PropsWithChildren) {
       <SidebarProvider defaultOpen={state.open}>
         <Page style={'sidebar'}>
           <PageNavigation>
-            <HomeSidebar workspace={workspace} />
+            <HomeSidebar />
           </PageNavigation>
 
           <PageMobileNavigation className={'flex items-center justify-between'}>
@@ -58,8 +58,8 @@ function HeaderLayout({ children }: React.PropsWithChildren) {
 
   return (
     <UserWorkspaceContextProvider value={workspace}>
-      <Page style={'header'}>
-        <PageNavigation>
+      <Page style={'header'} >
+        <PageNavigation >
           <HomeMenuNavigation workspace={workspace} />
         </PageNavigation>
 
@@ -67,7 +67,14 @@ function HeaderLayout({ children }: React.PropsWithChildren) {
           <MobileNavigation workspace={workspace} />
         </PageMobileNavigation>
 
-        {children}
+        <SidebarProvider defaultOpen>
+          <Page style={'sidebar'}>
+            <PageNavigation>
+              <HomeSidebar />
+            </PageNavigation>
+            {children}
+          </Page>
+        </SidebarProvider>
       </Page>
     </UserWorkspaceContextProvider>
   );

app/home/(user)/page.tsx

@@ -4,6 +4,7 @@ import { Trans } from '@kit/ui/trans';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import Dashboard from './_components/dashboard';
 // local imports
 import { HomeLayoutPageHeader } from './_components/home-page-header';
 
@@ -21,10 +22,12 @@ function UserHomePage() {
     <>
       <HomeLayoutPageHeader
         title={<Trans i18nKey={'common:routes.home'} />}
-        description={<Trans i18nKey={'common:homeTabDescription'} />}
+        description={<></>}
       />
 
-      <PageBody></PageBody>
+      <PageBody>
+        <Dashboard />
+      </PageBody>
     </>
   );
 }