k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(MED-122): update analysis packages page, pageheader

Browse Source
This commit is contained in:
Karli
2025-07-10 11:34:08 +03:00
parent 0af3823148
commit bbcf0b6d83
23 changed files with 382 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/home/(user)/(dashboard)/booking/page.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import { HomeLayoutPageHeader } from '../../_components/home-page-header';
import OrderCards from '../../_components/order-cards';
export const generateMetadata = async () => {
const i18n = await createI18nServerInstance();
const title = i18n.t('booking:title');
return {
title,
};
};
function BookingPage() {
return (
<>
<HomeLayoutPageHeader
title={<Trans i18nKey={'booking:title'} />}
description={<Trans i18nKey={'booking:description'} />}
/>
<PageBody>
<OrderCards />
</PageBody>
</>
);
}
export default withI18n(BookingPage);

67
app/home/(user)/(dashboard)/order-analysis-package/page.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Scale } from 'lucide-react';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import { Button } from '@kit/ui/button';
import SelectAnalysisPackages, { IAnalysisPackage } from '@/components/select-analysis-packages';
import { PageBody } from '@kit/ui/page';
import ComparePackagesModal from '../../_components/compare-packages-modal';
export const generateMetadata = async () => {
const i18n = await createI18nServerInstance();
const title = i18n.t('order-analysis-package:title');
return {
title,
};
};
const dummyCards = [
{
titleKey: 'product:standard.label',
price: 40,
nrOfAnalyses: 4,
tagColor: 'bg-cyan',
descriptionKey: 'marketing:standard.description',
},
{
titleKey: 'product:standardPlus.label',
price: 85,
nrOfAnalyses: 10,
tagColor: 'bg-warning',
descriptionKey: 'product:standardPlus.description',
},
{
titleKey: 'product:premium.label',
price: 140,
nrOfAnalyses: '12+',
tagColor: 'bg-purple',
descriptionKey: 'product:premium.description',
},
] satisfies IAnalysisPackage[];
async function OrderAnalysisPackagePage() {
const { t } = await createI18nServerInstance();
return (
<PageBody>
<div className="space-y-3 text-center">
<h3>{t('marketing:selectPackage')}</h3>
<ComparePackagesModal
triggerElement={
<Button variant="secondary" className="gap-2">
{t('marketing:comparePackages')}
<Scale className="size-4 stroke-[1.5px]" />
</Button>
}
/>
</div>
<SelectAnalysisPackages analysisPackages={dummyCards} />
</PageBody>
);
}
export default withI18n(OrderAnalysisPackagePage);

49
app/home/(user)/(dashboard)/page.tsx
View File

@@ -1,15 +1,14 @@
import { use } from 'react';
import { redirect } from 'next/navigation';
import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import { PageBody, PageHeader } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';
import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
import { toTitleCase } from '@/lib/utils';
import Dashboard from '../_components/dashboard';
// local imports
import { HomeLayoutPageHeader } from '../_components/home-page-header';
import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
export const generateMetadata = async () => {
const i18n = await createI18nServerInstance();
@@ -20,15 +19,24 @@ export const generateMetadata = async () => {
};
};
function UserHomePage() {
const { tempVisibleAccounts } = use(loadUserWorkspace());
async function UserHomePage() {
const account = await getAccount();
if (!account) {
redirect('/');
}
return (
<>
<HomeLayoutPageHeader
title={<Trans i18nKey={'common:routes.home'} />}
description={<></>}
<PageHeader title={
<>
<Trans i18nKey={'common:welcome'} />
{account.name ? `, ${toTitleCase(account.name)}` : ''}
</>
}
description={
<Trans i18nKey={'dashboard:recentlyCheckedDescription'} />
}
/>
<PageBody>
<Dashboard />
</PageBody>
@@ -36,4 +44,21 @@ function UserHomePage() {
);
}
async function getAccount() {
const client = getSupabaseServerClient();
const {
data: { user },
} = await client.auth.getUser();
const accountResponse = await client
.schema('medreport')
.from('accounts')
.select('name')
.eq('primary_owner_user_id', user!.id)
.single();
return accountResponse.data;
}
export default withI18n(UserHomePage);

35
app/home/(user)/_components/dashboard.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import Link from 'next/link';
import { InfoTooltip } from '@/components/ui/info-tooltip';
import { toTitleCase } from '@/lib/utils';
import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
import {
Activity,
@@ -15,8 +15,6 @@ import {
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,
@@ -26,7 +24,6 @@ import {
CardHeader,
CardProps,
} from '@kit/ui/card';
import { PageDescription } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils';
@@ -107,6 +104,7 @@ const dummyRecommendations = [
tooltipContent: 'Selgitus',
price: '20,00 €',
buttonText: 'Telli',
href: '/home/booking',
},
{
icon: <BlendingModeIcon className="size-4" />,
@@ -115,6 +113,7 @@ const dummyRecommendations = [
tooltipContent: 'Selgitus',
description: 'LDL-Kolesterool',
buttonText: 'Broneeri',
href: '/home/booking',
},
{
icon: <Droplets />,
@@ -124,24 +123,13 @@ const dummyRecommendations = [
description: 'Score-Risk 2',
price: '20,00 €',
buttonText: 'Telli',
href: '/home/booking',
},
];
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(
({
@@ -196,6 +184,7 @@ export default function Dashboard() {
tooltipContent,
price,
buttonText,
href,
},
index,
) => {
@@ -222,9 +211,17 @@ export default function Dashboard() {
</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>
{href ? (
<Link href={href}>
<Button size="sm" variant="secondary">
{buttonText}
</Button>
</Link>
) : (
<Button size="sm" variant="secondary">
{buttonText}
</Button>
)}
</div>
</div>
);

2
app/home/(user)/_components/home-page-header.tsx
View File

@@ -7,6 +7,6 @@ export function HomeLayoutPageHeader(
}>,
) {
return (
<PageHeader description={props.description}>{props.children}</PageHeader>
<PageHeader description={props.description} title={props.title}>{props.children}</PageHeader>
);
}

77
app/home/(user)/_components/order-cards.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client";
import { ChevronRight, HeartPulse } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@kit/ui/button';
import {
Card,
CardHeader,
CardDescription,
CardProps,
CardFooter,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { cn } from '@/lib/utils';
const dummyCards = [
{
title: 'booking:analysisPackages.title',
description: 'booking:analysisPackages.description',
descriptionColor: 'text-primary',
icon: (
<Link href={'/home/order-analysis-package'}>
<Button size="icon" variant="outline" className="px-2 text-black">
<ChevronRight className="size-4 stroke-2" />
</Button>
</Link>
),
cardVariant: 'gradient-success' as CardProps['variant'],
iconBg: 'bg-warning',
},
];
export default function OrderCards() {
return (
<div className="grid grid-cols-3 gap-6 mt-4">
{dummyCards.map(({
title,
description,
icon,
cardVariant,
descriptionColor,
iconBg,
}) => (
<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 gap-2">
<div
className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
>
<HeartPulse className="size-4 fill-green-500" />
</div>
<h5>
<Trans i18nKey={title} />
</h5>
<CardDescription className={descriptionColor}>
<Trans i18nKey={description} />
</CardDescription>
</CardFooter>
</Card>
))}
</div>
);
}

97
app/select-package/page.tsx
View File

@@ -1,24 +1,15 @@
import Image from 'next/image';
import Link from 'next/link';
import { CaretRightIcon } from '@radix-ui/react-icons';
import { Scale } from 'lucide-react';
import { Button } from '@kit/ui/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
} from '@kit/ui/card';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import SelectAnalysisPackages from '@/components/select-analysis-packages';
import { MedReportLogo } from '../../components/med-report-logo';
import { PackageHeader } from '../../components/package-header';
import { ButtonTooltip } from '../../components/ui/button-tooltip';
import pathsConfig from '../../config/paths.config';
import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';
@@ -30,34 +21,8 @@ export const generateMetadata = async () => {
};
};
const dummyCards = [
{
titleKey: 'product:standard.label',
price: 40,
nrOfAnalyses: 4,
tagColor: 'bg-cyan',
descriptionKey: 'marketing:standard.description',
},
{
titleKey: 'product:standardPlus.label',
price: 85,
nrOfAnalyses: 10,
tagColor: 'bg-warning',
descriptionKey: 'product:standardPlus.description',
},
{
titleKey: 'product:premium.label',
price: 140,
nrOfAnalyses: '12+',
tagColor: 'bg-purple',
descriptionKey: 'product:premium.description',
},
];
async function SelectPackagePage() {
const { t, language } = await createI18nServerInstance();
const { t } = await createI18nServerInstance();
return (
<div className="container mx-auto my-24 flex flex-col items-center space-y-12">
@@ -73,57 +38,13 @@ async function SelectPackagePage() {
}
/>
</div>
<div className="grid grid-cols-3 gap-6">
{dummyCards.map(
(
{ titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
index,
) => {
return (
<Card key={index}>
<CardHeader className="relative">
<ButtonTooltip
content="Content pending"
className="absolute top-5 right-5 z-10"
/>
<Image
src="/assets/card-image.png"
alt="background"
width={326}
height={195}
className="max-h-48 w-full opacity-10"
/>
</CardHeader>
<CardContent className="space-y-1 text-center">
<PackageHeader
title={t(titleKey)}
tagColor={tagColor}
analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
language={language}
price={price}
/>
<CardDescription>{t(descriptionKey)}</CardDescription>
</CardContent>
<CardFooter>
<Button className="w-full">
{t('marketing:selectThisPackage')}
</Button>
</CardFooter>
</Card>
);
},
)}
<div className="col-span-3 grid grid-cols-subgrid">
<div className="col-start-2 justify-self-center-safe">
<Link href={pathsConfig.app.home}>
<Button variant="secondary" className="align-center">
{t('marketing:notInterestedInAudit')}{' '}
<CaretRightIcon className="size-4" />
</Button>
</Link>
</div>
</div>
</div>
<SelectAnalysisPackages />
<Link href={pathsConfig.app.home}>
<Button variant="secondary" className="align-center">
{t('marketing:notInterestedInAudit')}{' '}
<CaretRightIcon className="size-4" />
</Button>
</Link>
</div>
);
}

80
components/select-analysis-packages.tsx Normal file
View File

@@ -0,0 +1,80 @@
'use client';
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import { Button } from '@kit/ui/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { PackageHeader } from './package-header';
import { ButtonTooltip } from './ui/button-tooltip';
export interface IAnalysisPackage {
titleKey: string;
price: number;
nrOfAnalyses: number | string;
tagColor: string;
descriptionKey: string;
}
export default function SelectAnalysisPackages({ analysisPackages }: { analysisPackages: IAnalysisPackage[] }) {
const {
t,
i18n: { language },
} = useTranslation();
return (
<div className="grid grid-cols-3 gap-6">
{analysisPackages.length > 0 ? analysisPackages.map(
(
{ titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
index,
) => {
return (
<Card key={index}>
<CardHeader className="relative">
<ButtonTooltip
content="Content pending"
className="absolute top-5 right-5 z-10"
/>
<Image
src="/assets/card-image.png"
alt="background"
width={326}
height={195}
className="max-h-48 w-full opacity-10"
/>
</CardHeader>
<CardContent className="space-y-1 text-center">
<PackageHeader
title={t(titleKey)}
tagColor={tagColor}
analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
language={language}
price={price}
/>
<CardDescription>{t(descriptionKey)}</CardDescription>
</CardContent>
<CardFooter>
<Button className="w-full">
<Trans i18nKey='order-analysis-package:selectThisPackage' />
</Button>
</CardFooter>
</Card>
);
},
) : (
<h4>
<Trans i18nKey='order-analysis-package:noPackagesAvailable' />
</h4>
)}
</div>
);
}

4
config/paths.config.ts
View File

@@ -57,11 +57,11 @@ const pathsConfig = PathsSchema.parse({
accountBillingReturn: `/home/[account]/billing/return`,
joinTeam: '/join',
selectPackage: '/select-package',
booking: '/home/booking',
orderAnalysisPackage: '/home/order-analysis-package',
// these routes are added as placeholders and can be changed when the pages are added
booking: '/booking',
myOrders: '/my-orders',
analysisResults: '/analysis-results',
orderAnalysisPackage: '/order-analysis-package',
orderAnalysis: '/order-analysis',
orderHealthAnalysis: '/order-health-analysis',
},

2
lib/i18n/i18n.settings.ts
View File

@@ -34,6 +34,8 @@ export const defaultI18nNamespaces = [
'marketing',
'dashboard',
'product',
'booking',
'order-analysis-package',
];
/**

1
packages/features/auth/src/components/password-sign-up-form.tsx
View File

@@ -76,7 +76,6 @@ export function PasswordSignUpForm({
data-test={'personal-code-input'}
required
type="text"
placeholder={t('personalCodePlaceholder')}
{...field}
/>
</FormControl>

14
packages/ui/src/makerkit/page.tsx
View File

@@ -133,13 +133,13 @@ export function PageDescription(props: React.PropsWithChildren) {
export function PageTitle(props: React.PropsWithChildren) {
return (
<h1
<h4
className={
'font-heading text-base leading-none font-bold tracking-tight dark:text-white'
'font-heading leading-none font-bold tracking-tight dark:text-white'
}
>
{props.children}
</h1>
</h4>
);
}
@@ -167,6 +167,10 @@ export function PageHeader({
)}
>
<div className={'flex flex-col gap-y-2'}>
<If condition={title}>
<PageTitle>{title}</PageTitle>
</If>
<div className="flex items-center gap-x-2.5">
{displaySidebarTrigger ? (
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground hidden h-4.5 w-4.5 cursor-pointer lg:inline-flex" />
@@ -183,10 +187,6 @@ export function PageHeader({
<PageDescription>{description}</PageDescription>
</If>
</div>
<If condition={title}>
<PageTitle>{title}</PageTitle>
</If>
</div>
{children}

8
public/locales/en/booking.json Normal file
View File

@@ -0,0 +1,8 @@
{
"title": "Select service",
"description": "Select the appropriate service or package according to your health needs or goals.",
"analysisPackages": {
"title": "Analysis packages",
"description": "Get to know the personal analysis packages and order"
}
}

3
public/locales/en/marketing.json
View File

@@ -37,8 +37,5 @@
"footerDescription": "Here you can add a description about your company or product",
"copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
"heroSubtitle": "A simple, convenient, and quick overview of your health condition",
"selectPackage": "Select package",
"selectThisPackage": "Select this package",
"comparePackages": "Compare packages",
"notInterestedInAudit": "Currently not interested in a health audit"
}

7
public/locales/en/order-analysis-package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"title": "Select analysis package",
"noPackagesAvailable": "No packages available",
"selectThisPackage": "Select this package",
"selectPackage": "Select package",
"comparePackages": "Compare packages"
}

8
public/locales/et/booking.json Normal file
View File

@@ -0,0 +1,8 @@
{
"title": "Vali teenus",
"description": "Vali sobiv teenus või pakett vastavalt oma tervisemurele või -eesmärgile.",
"analysisPackages": {
"title": "Analüüside paketid",
"description": "Tutvu personaalsete analüüsi pakettidega ja telli"
}
}

2
public/locales/et/common.json
View File

@@ -61,7 +61,7 @@
"search": "Otsi{{end}}",
"myActions": "Minu toimingud",
"healthPackageComparison": {
"label": "Tervisepakketide võrdlus",
"label": "Tervisepakettide võrdlus",
"description": "Alljärgnevalt on antud eelinfo (sugu, vanus ja kehamassiindeksi) põhjal tehtud personalne terviseauditi valik. Tabelis on võimalik soovitatud terviseuuringute paketile lisada üksikuid uuringuid juurde."
},
"routes": {

3
public/locales/et/marketing.json
View File

@@ -37,8 +37,5 @@
"footerDescription": "Here you can add a description about your company or product",
"copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
"heroSubtitle": "Lihtne, mugav ja kiire ülevaade oma tervisest",
"selectPackage": "Vali pakett",
"selectThisPackage": "Vali see pakett",
"comparePackages": "Võrdle pakette",
"notInterestedInAudit": "Ei soovi hetkel terviseauditit"
}

7
public/locales/et/order-analysis-package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"title": "Vali analüüsi pakett",
"noPackagesAvailable": "Teenuste loetelu ei leitud, proovi hiljem uuesti",
"selectThisPackage": "Vali see pakett",
"selectPackage": "Vali pakett",
"comparePackages": "Võrdle pakette"
}

8
public/locales/ru/booking.json Normal file
View File

@@ -0,0 +1,8 @@
{
"title": "Select service",
"description": "Select the appropriate service or package according to your health needs or goals.",
"analysisPackages": {
"title": "Analysis packages",
"description": "Get to know the personal analysis packages and order"
}
}

3
public/locales/ru/marketing.json
View File

@@ -37,8 +37,5 @@
"footerDescription": "Here you can add a description about your company or product",
"copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
"heroSubtitle": "A simple, convenient, and quick overview of your health condition",
"selectPackage": "Select package",
"selectThisPackage": "Select this package",
"comparePackages": "Compare packages",
"notInterestedInAudit": "Currently not interested in a health audit"
}

7
public/locales/ru/order-analysis-package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"title": "Select analysis package",
"noPackagesAvailable": "No packages available",
"selectThisPackage": "Select this package",
"selectPackage": "Select package",
"comparePackages": "Compare packages"
}

4
styles/globals.css
View File

@@ -89,4 +89,8 @@
.lucide {
@apply size-4;
}
button {
cursor: pointer;
}
}