Merge branch 'main' into B2B-30

2025-07-01 23:27:59 +03:00
parent a2245126a5 297dd7c221
commit 27978f16de
95 changed files with 2343 additions and 2297 deletions
--- a/app/home/(user)/_components/dashboard.tsx
+++ b/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>
+    </>
+  );
+}
--- a/app/home/(user)/_components/home-menu-navigation.tsx
+++ b/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>
  );
--- a/app/home/(user)/_components/home-sidebar.tsx
+++ b/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>
  );
 }
--- a/app/home/(user)/billing/_lib/server/user-billing.service.ts
+++ b/app/home/(user)/billing/_lib/server/user-billing.service.ts
@@ -2,6 +2,7 @@ import 'server-only';

 import { SupabaseClient } from '@supabase/supabase-js';

+import { Database } from '@/packages/supabase/src/database.types';
 import { z } from 'zod';

 import { createAccountsApi } from '@kit/accounts/api';
@@ -13,7 +14,6 @@ import { requireUser } from '@kit/supabase/require-user';
 import appConfig from '~/config/app.config';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
-import { Database } from '~/lib/database.types';

 import { PersonalAccountCheckoutSchema } from '../schema/personal-account-checkout.schema';

--- a/app/home/(user)/layout.tsx
+++ b/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>
  );
--- a/app/home/(user)/page.tsx
+++ b/app/home/(user)/page.tsx
@@ -3,10 +3,12 @@ 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';
 import { use } from 'react';
 import { loadUserWorkspace } from './_lib/server/load-user-workspace';
+import { PageBody } from '@kit/ui/page';

 export const generateMetadata = async () => {
  const i18n = await createI18nServerInstance();
@@ -23,16 +25,12 @@ function UserHomePage() {
    <>
      <HomeLayoutPageHeader
        title={<Trans i18nKey={'common:routes.home'} />}
-        description={<Trans i18nKey={'common:homeTabDescription'} />}
+        description={<></>}
      />
-      {tempVisibleAccounts.length && (
-        <>
-          Member of companies:
-          <pre>{JSON.stringify(tempVisibleAccounts, null, 2)}</pre>
-        </>
-      )}
-

+      <PageBody>
+        <Dashboard />
+      </PageBody>
    </>
  );
 }
--- a/app/home/[account]/billing/_lib/server/team-billing.service.ts
+++ b/app/home/[account]/billing/_lib/server/team-billing.service.ts
@@ -2,6 +2,7 @@ import 'server-only';

 import { SupabaseClient } from '@supabase/supabase-js';

+import { Database } from '@/packages/supabase/src/database.types';
 import { z } from 'zod';

 import { LineItemSchema } from '@kit/billing';
@@ -14,7 +15,6 @@ import { createTeamAccountsApi } from '@kit/team-accounts/api';
 import appConfig from '~/config/app.config';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
-import { Database } from '~/lib/database.types';

 import { TeamCheckoutSchema } from '../schema/team-billing.schema';

--- a/app/home/[account]/members/_lib/server/members-page.loader.ts
+++ b/app/home/[account]/members/_lib/server/members-page.loader.ts
@@ -2,8 +2,9 @@ import 'server-only';

 import { SupabaseClient } from '@supabase/supabase-js';

+import { Database } from '@/packages/supabase/src/database.types';
+
 import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
-import { Database } from '~/lib/database.types';

 /**
 * Load data for the members page