Merge branch 'main' into B2B-30

app/(marketing)/page.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { MedReportLogo } from '@/components/med-report-title';
+import { MedReportLogo } from '@/components/med-report-logo';
 import { ArrowRightIcon } from 'lucide-react';
 
 import { CtaButton, Hero } from '@kit/ui/marketing';
@@ -49,7 +49,7 @@ function MainCallToActionButton() {
       </CtaButton>
 
       <CtaButton variant={'link'}>
-        <Link href={'/register-company'}>
+        <Link href={'/company-offer'}>
           <Trans i18nKey={'account:createCompanyAccount'} />
         </Link>
       </CtaButton>

app/(public)/company-offer/page.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { MedReportLogo } from '@/components/med-report-logo';
+import { SubmitButton } from '@/components/ui/submit-button';
+import { sendCompanyOfferEmail } from '@/lib/services/mailer.service';
+import { CompanySubmitData } from '@/lib/types/company';
+import { companyOfferSchema } from '@/lib/validations/company-offer.schema';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { FormItem } from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { Trans } from '@kit/ui/trans';
+
+export default function CompanyOffer() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, isSubmitting },
+  } = useForm({
+    resolver: zodResolver(companyOfferSchema),
+    mode: 'onChange',
+  });
+  const language = useTranslation().i18n.language;
+
+  const onSubmit = async (data: CompanySubmitData) => {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== undefined) formData.append(key, value);
+    });
+
+    try {
+      sendCompanyOfferEmail(data, language)
+        .then(() => router.push('/company-offer/success'))
+        .catch((error) => alert('error: ' + error));
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        console.warn('Server validation error: ' + err.message);
+      }
+      console.warn('Server validation error: ', err);
+    }
+  };
+
+  return (
+    <div className="border-border flex max-w-5xl flex-row overflow-hidden rounded-3xl border">
+      <div className="flex w-1/2 flex-col px-12 py-14 text-center">
+        <MedReportLogo />
+        <h1 className="pt-8">
+          <Trans i18nKey={'account:requestCompanyAccount:title'} />
+        </h1>
+        <p className="text-muted-foreground pt-2 text-sm">
+          <Trans i18nKey={'account:requestCompanyAccount:description'} />
+        </p>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          noValidate
+          className="flex flex-col gap-6 px-6 pt-8 text-left"
+        >
+          <FormItem>
+            <Label>
+              <Trans i18nKey={'common:formField:companyName'} />
+            </Label>
+            <Input {...register('companyName')} />
+          </FormItem>
+          <FormItem>
+            <Label>
+              <Trans i18nKey={'common:formField:contactPerson'} />
+            </Label>
+            <Input {...register('contactPerson')} />
+          </FormItem>
+          <FormItem>
+            <Label>
+              <Trans i18nKey={'common:formField:email'} />
+            </Label>
+            <Input type="email" {...register('email')}></Input>
+          </FormItem>
+          <FormItem>
+            <Label>
+              <Trans i18nKey={'common:formField:phone'} />
+            </Label>
+            <Input type="tel" {...register('phone')} />
+          </FormItem>
+          <SubmitButton
+            disabled={!isValid || isSubmitting}
+            pendingText="Saatmine..."
+            type="submit"
+          >
+            <Trans i18nKey={'account:requestCompanyAccount:button'} />
+          </SubmitButton>
+        </form>
+      </div>
+      <div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat"></div>
+    </div>
+  );
+}

app/(public)/company-offer/success/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { SuccessNotification } from '@/packages/features/notifications/src/components';
+
+export default function CompanyRegistrationSuccess() {
+  return (
+    <SuccessNotification
+      titleKey="account:requestCompanyAccount:successTitle"
+      descriptionKey="account:requestCompanyAccount:successDescription"
+      buttonProps={{
+        buttonTitleKey: 'account:requestCompanyAccount:successButton',
+        href: '/',
+      }}
+    />
+  );
+}

app/(public)/register-company/page.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { MedReportLogo } from "@/components/med-report-title";
-import React from "react";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useForm } from "react-hook-form";
-import { companySchema } from "@/lib/validations/companySchema";
-import { CompanySubmitData } from "@/lib/types/company";
-import { submitCompanyRegistration } from "@/lib/services/register-company.service";
-import { useRouter } from "next/navigation";
-import { Label } from "@kit/ui/label";
-import { Input } from "@kit/ui/input";
-import { SubmitButton } from "@/components/ui/submit-button";
-import { FormItem } from "@kit/ui/form";
-import { Trans } from "@kit/ui/trans";
-
-export default function RegisterCompany() {
-  const router = useRouter();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid, isSubmitting },
-  } = useForm({
-    resolver: yupResolver(companySchema),
-    mode: "onChange",
-  });
-
-  async function onSubmit(data: CompanySubmitData) {
-    const formData = new FormData();
-    Object.entries(data).forEach(([key, value]) => {
-      if (value !== undefined) formData.append(key, value);
-    });
-
-    try {
-      await submitCompanyRegistration(formData);
-      router.push("/register-company/success");
-    } catch (err: unknown) {
-      if (err instanceof Error) {
-        alert("Server validation error: " + err.message);
-      }
-      alert("Server validation error");
-    }
-  }
-
-  return (
-    <div className="flex flex-row border rounded-3xl border-border max-w-5xl  overflow-hidden">
-      <div className="flex flex-col text-center py-14 px-12 w-1/2">
-        <MedReportLogo />
-        <h1 className="pt-8">Ettevõtte andmed</h1>
-        <p className="pt-2 text-muted-foreground text-sm">
-          Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
-          kasutada kavatsed.
-        </p>
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          noValidate
-          className="flex gap-6 flex-col text-left pt-8 px-6"
-        >
-          <FormItem>
-            <Label>Ettevõtte nimi</Label>
-            <Input {...register("companyName")} />
-          </FormItem>
-          <FormItem>
-            <Label>Kontaktisik</Label>
-            <Input {...register("contactPerson")} />
-          </FormItem>
-          <FormItem>
-            <Label>E-mail</Label>
-            <Input type="email" {...register("email")}></Input>
-          </FormItem>
-          <FormItem>
-            <Label>Telefon</Label>
-            <Input type="tel" {...register("phone")} />
-          </FormItem>
-          <SubmitButton
-            disabled={!isValid || isSubmitting}
-            pendingText="Saatmine..."
-            type="submit"
-            formAction={submitCompanyRegistration}
-          >
-            <Trans i18nKey={'account:requestCompanyAccount'} />
-          </SubmitButton>
-        </form>
-      </div>
-      <div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat">
-      </div>
-    </div>
-  );
-}

app/(public)/register-company/success/page.tsx

@@ -1,26 +0,0 @@
-import { MedReportLogo } from "@/components/med-report-title";
-import { Button } from "@kit/ui/button";
-import Image from "next/image";
-import Link from "next/link";
-
-export default function CompanyRegistrationSuccess() {
-  return (
-    <div className="pt-2 px-16 pb-12 border rounded-3xl border-border">
-      <MedReportLogo />
-      <div className="flex flex-col items-center px-4">
-        <Image
-          src="/assets/success.png"
-          alt="Success"
-          className="pt-6 pb-8"
-          width={326}
-          height={195}
-        />
-        <h1 className="pb-2">Päring edukalt saadetud!</h1>
-        <p className=" text-muted-foreground text-sm">Saadame teile esimesel võimalusel vastuse</p>
-      </div>
-      <Button className="w-full mt-8">
-        <Link href="/">Tagasi kodulehele</Link>
-      </Button>
-    </div>
-  );
-}

app/(public)/sign-in/page.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
+
+import Link from 'next/link';
+
 import { Button } from '@kit/ui/button';
-import Link from "next/link";
-import React from "react";
 
 export default async function SignIn() {
   return (
@@ -15,7 +17,7 @@ export default async function SignIn() {
         <Link href="/">ID-Kaart</Link>
       </Button>
       <Button variant="outline">
-        <Link href="/register-company">Loo ettevõtte konto</Link>
+        <Link href="/company-offer">Loo ettevõtte konto</Link>
       </Button>
     </div>
   );

app/auth/confirm/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

app/auth/password-reset/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

app/auth/sign-in/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

app/auth/sign-in/page.tsx

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { register } from 'module';
+
 import { SignInMethodsContainer } from '@kit/auth/sign-in';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
@@ -26,7 +28,8 @@ export const generateMetadata = async () => {
 };
 
 async function SignInPage({ searchParams }: SignInPageProps) {
-  const { invite_token: inviteToken, next = '' } = await searchParams;
+  const { invite_token: inviteToken, next = pathsConfig.app.home } =
+    await searchParams;
 
   const signUpPath =
     pathsConfig.auth.signUp +
@@ -36,6 +39,7 @@ async function SignInPage({ searchParams }: SignInPageProps) {
     callback: pathsConfig.auth.callback,
     returnPath: next ?? pathsConfig.app.home,
     joinTeam: pathsConfig.app.joinTeam,
+    updateAccount: pathsConfig.auth.updateAccount,
   };
 
   return (

app/auth/sign-up/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

app/auth/sign-up/page.tsx

@@ -27,6 +27,7 @@ interface Props {
 const paths = {
   callback: pathsConfig.auth.callback,
   appHome: pathsConfig.app.home,
+  updateAccount: pathsConfig.auth.updateAccount,
 };
 
 async function SignUpPage({ searchParams }: Props) {

app/auth/update-account/layout.tsx

@@ -0,0 +1,11 @@
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+async function SiteLayout(props: React.PropsWithChildren) {
+  return (
+    <div className={'flex min-h-[100vh] flex-col items-center justify-center'}>
+      {props.children}
+    </div>
+  );
+}
+
+export default withI18n(SiteLayout);

app/auth/update-account/page.tsx

@@ -0,0 +1,43 @@
+import { redirect } from 'next/navigation';
+
+import { BackButton } from '@/components/back-button';
+import { MedReportLogo } from '@/components/med-report-logo';
+import pathsConfig from '@/config/paths.config';
+import { signOutAction } from '@/lib/actions/sign-out';
+import { UpdateAccountForm } from '@/packages/features/auth/src/components/update-account-form';
+import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
+
+import { Trans } from '@kit/ui/trans';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+async function UpdateAccount() {
+  const client = getSupabaseServerClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
+
+  if (!user) {
+    redirect(pathsConfig.auth.signIn);
+  }
+
+  return (
+    <div className="border-border flex max-w-5xl flex-row overflow-hidden rounded-3xl border">
+      <div className="relative flex w-1/2 min-w-md flex-col px-12 pt-7 pb-22 text-center">
+        <BackButton onBack={signOutAction} />
+        <MedReportLogo />
+        <h1 className="pt-8">
+          <Trans i18nKey={'account:updateAccount:title'} />
+        </h1>
+        <p className="text-muted-foreground pt-1 text-sm">
+          <Trans i18nKey={'account:updateAccount:description'} />
+        </p>
+        <UpdateAccountForm user={user} />
+      </div>
+      <div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat"></div>
+    </div>
+  );
+}
+
+export default withI18n(UpdateAccount);

app/auth/update-account/success/page.tsx

@@ -0,0 +1,17 @@
+import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
+
+import { UpdateAccountSuccessNotification } from '@kit/notifications/components';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+async function UpdateAccountSuccess() {
+  const client = getSupabaseServerClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
+
+  return <UpdateAccountSuccessNotification userId={user?.id} />;
+}
+
+export default withI18n(UpdateAccountSuccess);

app/auth/verify/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

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>
   );
 }

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';
 

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

@@ -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>
     </>
   );
 }

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';
 

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