feat(MED-97): update benefit stats view in dashboards

This commit is contained in:
2025-09-26 13:47:32 +03:00
parent fdc2e3e064
commit 1aeee0bc30
23 changed files with 518 additions and 374 deletions

View File

@@ -3,12 +3,33 @@ import Link from 'next/link';
import { ChevronRight, HeartPulse } from 'lucide-react';
import { Button } from '@kit/ui/button';
import { Card, CardDescription, CardFooter, CardHeader } from '@kit/ui/card';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { formatCurrency } from '@/packages/shared/src/utils';
import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
import { cn } from '@kit/ui/lib/utils';
import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
import { getAccountBalanceSummary } from '../_lib/server/balance-actions';
export default async function DashboardCards() {
const { language } = await createI18nServerInstance();
const { account } = await loadCurrentUserAccount();
const balanceSummary = account ? await getAccountBalanceSummary(account.id) : null;
export default function DashboardCards() {
return (
<div className="flex gap-4">
<div
className={cn(
'grid grid-cols-1 gap-4',
'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
)}>
<Card
variant="gradient-success"
className="xs:w-1/2 flex w-full flex-col justify-between sm:w-auto"
@@ -38,6 +59,34 @@ export default function DashboardCards() {
</CardDescription>
</CardFooter>
</Card>
<Card className="flex flex-col justify-center">
<CardHeader>
<CardTitle size="h5">
<Trans i18nKey="dashboard:heroCard.benefits.title" />
</CardTitle>
</CardHeader>
<CardContent>
<Figure>
{formatCurrency({
value: balanceSummary?.totalBalance || 0,
locale: language,
currencyCode: 'EUR',
})}
</Figure>
<CardDescription>
<Trans
i18nKey="dashboard:heroCard.benefits.validUntil"
values={{ date: '31.12.2025' }}
/>
</CardDescription>
</CardContent>
</Card>
</div>
);
}
function Figure(props: React.PropsWithChildren) {
return <div className={'text-3xl font-bold'}>{props.children}</div>;
}

View File

@@ -2,7 +2,6 @@
import Link from 'next/link';
import { Database } from '@/packages/supabase/src/database.types';
import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
import { isNil } from 'lodash';
import {
@@ -15,7 +14,7 @@ import {
User,
} from 'lucide-react';
import type { AccountWithParams } from '@kit/accounts/types/accounts';
import type { AccountWithParams, BmiThresholds } from '@kit/accounts/types/accounts';
import { pathsConfig } from '@kit/shared/config';
import { Button } from '@kit/ui/button';
import {
@@ -138,10 +137,7 @@ export default function Dashboard({
bmiThresholds,
}: {
account: AccountWithParams;
bmiThresholds: Omit<
Database['medreport']['Tables']['bmi_thresholds']['Row'],
'id'
>[];
bmiThresholds: Omit<BmiThresholds, 'id'>[];
}) {
const height = account.accountParams?.height || 0;
const weight = account.accountParams?.weight || 0;

View File

@@ -1,23 +1,14 @@
import React from 'react';
import { redirect } from 'next/navigation';
import { formatCurrency } from '@/packages/shared/src/utils';
import { Database } from '@/packages/supabase/src/database.types';
import { PiggyBankIcon, Settings } from 'lucide-react';
import { PiggyBankIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { createPath, pathsConfig } from '@kit/shared/config';
import { Card, CardTitle } from '@kit/ui/card';
import { cn } from '@kit/ui/lib/utils';
import { Button } from '@kit/ui/shadcn/button';
import { Trans } from '@kit/ui/trans';
interface TeamAccountBenefitStatisticsProps {
employeeCount: number;
accountSlug: string;
companyParams: Database['medreport']['Tables']['company_params']['Row'];
}
import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
return <Card className="p-4">{children}</Card>;
@@ -46,10 +37,10 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
};
const TeamAccountBenefitStatistics = ({
employeeCount,
accountSlug,
companyParams,
}: TeamAccountBenefitStatisticsProps) => {
accountBenefitStatistics,
}: {
accountBenefitStatistics: AccountBenefitStatistics;
}) => {
const {
i18n: { language },
} = useTranslation();
@@ -58,114 +49,64 @@ const TeamAccountBenefitStatistics = ({
<div className="flex h-full w-full flex-col gap-2 sm:flex-row">
<Card className="relative flex flex-row">
<div className="p-6">
<Button
onClick={() =>
redirect(createPath(pathsConfig.app.accountBilling, accountSlug))
}
variant="outline"
className="absolute top-1 right-1 p-3"
>
<Settings />
</Button>
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
<PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
</div>
<p className="mt-4 text-sm font-medium">
<Trans i18nKey="teams:benefitStatistics.budget.title" />
</p>
<h3 className="text-2xl">
<Trans
i18nKey="teams:benefitStatistics.budget.balance"
values={{
balance: formatCurrency({
value: 11800,
<StatisticsCardTitle className="mt-4 text-xl font-bold">
<Trans i18nKey="teams:benefitStatistics.budget.volume" />
</StatisticsCardTitle>
<StatisticsValue>
{formatCurrency({
value: accountBenefitStatistics.periodTotal,
locale: language,
currencyCode: 'EUR',
}),
}}
/>
</h3>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.budget.volume"
values={{
volume: formatCurrency({
value:
(Number(companyParams.benefit_amount) || 0) * employeeCount,
locale: language,
currencyCode: 'EUR',
}),
}}
/>
</StatisticsDescription>
})}
</StatisticsValue>
</div>
</Card>
<div className="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
<StatisticsCard>
<StatisticsCardTitle className="text-lg font-bold">
<Trans i18nKey="teams:benefitStatistics.data.serviceSum" />
<Trans i18nKey="teams:benefitStatistics.data.totalSum" />
</StatisticsCardTitle>
<StatisticsValue>1800 </StatisticsValue>
<StatisticsValue>
{formatCurrency({
value: accountBenefitStatistics.orders.totalSum,
locale: language,
currencyCode: 'EUR',
})}
</StatisticsValue>
</StatisticsCard>
<StatisticsCard>
<StatisticsCardTitle>
<Trans i18nKey="teams:benefitStatistics.data.analysis" />
</StatisticsCardTitle>
<StatisticsValue>200 </StatisticsValue>
<StatisticsValue>{accountBenefitStatistics.orders.analysesSum} </StatisticsValue>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.data.reservations"
values={{ value: 36 }}
/>
</StatisticsDescription>
</StatisticsCard>
<StatisticsCard>
<StatisticsCardTitle>
<Trans i18nKey="teams:benefitStatistics.data.doctorsAndSpecialists" />
</StatisticsCardTitle>
<StatisticsValue>200 </StatisticsValue>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.data.reservations"
values={{ value: 44 }}
/>
</StatisticsDescription>
</StatisticsCard>
<StatisticsCard>
<StatisticsCardTitle>
<Trans i18nKey="teams:benefitStatistics.data.researches" />
</StatisticsCardTitle>
<StatisticsValue>200 </StatisticsValue>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.data.reservations"
values={{ value: 40 }}
/>
</StatisticsDescription>
</StatisticsCard>
<StatisticsCard>
<StatisticsCardTitle>
<Trans i18nKey="teams:benefitStatistics.data.eclinic" />
</StatisticsCardTitle>
<StatisticsValue>200 </StatisticsValue>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.data.reservations"
values={{ value: 34 }}
values={{ value: accountBenefitStatistics.orders.analysesCount }}
/>
</StatisticsDescription>
</StatisticsCard>
<StatisticsCard>
<StatisticsCardTitle>
<Trans i18nKey="teams:benefitStatistics.data.healthResearchPlans" />
<Trans i18nKey="teams:benefitStatistics.data.analysisPackages" />
</StatisticsCardTitle>
<StatisticsValue>200 </StatisticsValue>
<StatisticsValue>
{formatCurrency({
value: accountBenefitStatistics.orders.analysisPackagesSum,
locale: language,
currencyCode: 'EUR',
})}
</StatisticsValue>
<StatisticsDescription>
<Trans
i18nKey="teams:benefitStatistics.data.serviceUsage"
values={{ value: 46 }}
i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
values={{ value: accountBenefitStatistics.orders.analysisPackagesCount }}
/>
</StatisticsDescription>
</StatisticsCard>

View File

@@ -5,6 +5,7 @@ import { Database } from '@/packages/supabase/src/database.types';
import { Card } from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils';
import type { BmiThresholds } from '@kit/accounts/types/accounts';
import { getAccountHealthDetailsFields } from '../_lib/server/load-team-account-health-details';
import { TeamAccountStatisticsProps } from './team-account-statistics';
@@ -15,10 +16,7 @@ const TeamAccountHealthDetails = ({
members,
}: {
memberParams: TeamAccountStatisticsProps['memberParams'];
bmiThresholds: Omit<
Database['medreport']['Tables']['bmi_thresholds']['Row'],
'id'
>[];
bmiThresholds: Omit<BmiThresholds, 'id'>[];
members: Database['medreport']['Functions']['get_account_members']['Returns'];
}) => {
const accountHealthDetailsFields = getAccountHealthDetailsFields(

View File

@@ -14,28 +14,19 @@ import { createPath, pathsConfig } from '@kit/shared/config';
import { Card } from '@kit/ui/card';
import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import { Calendar, DateRange } from '@kit/ui/shadcn/calendar';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@kit/ui/shadcn/popover';
import { DateRange } from '@kit/ui/shadcn/calendar';
import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
import TeamAccountHealthDetails from './team-account-health-details';
import type { Account, AccountParams, BmiThresholds } from '@/packages/features/accounts/src/types/accounts';
export interface TeamAccountStatisticsProps {
teamAccount: Database['medreport']['Tables']['accounts']['Row'];
memberParams: Pick<
Database['medreport']['Tables']['account_params']['Row'],
'weight' | 'height'
>[];
bmiThresholds: Omit<
Database['medreport']['Tables']['bmi_thresholds']['Row'],
'id'
>[];
teamAccount: Account;
memberParams: Pick<AccountParams, 'weight' | 'height'>[];
bmiThresholds: Omit<BmiThresholds, 'id'>[];
members: Database['medreport']['Functions']['get_account_members']['Returns'];
companyParams: Database['medreport']['Tables']['company_params']['Row'];
accountBenefitStatistics: AccountBenefitStatistics;
}
export default function TeamAccountStatistics({
@@ -43,11 +34,12 @@ export default function TeamAccountStatistics({
memberParams,
bmiThresholds,
members,
companyParams,
accountBenefitStatistics,
}: TeamAccountStatisticsProps) {
const currentDate = new Date();
const [date, setDate] = useState<DateRange | undefined>({
from: new Date(),
to: new Date(),
from: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
to: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
});
const {
i18n: { language },
@@ -66,8 +58,6 @@ export default function TeamAccountStatistics({
/>
</h4>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" data-empty={!date}>
<CalendarIcon />
{date?.from && date?.to ? (
@@ -78,16 +68,6 @@ export default function TeamAccountStatistics({
</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="range"
selected={date}
onSelect={setDate}
locale={language === 'et' ? et : enGB}
/>
</PopoverContent>
</Popover>
</div>
<div
@@ -95,11 +75,7 @@ export default function TeamAccountStatistics({
'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
}
>
<TeamAccountBenefitStatistics
employeeCount={members.length}
accountSlug={teamAccount.slug || ''}
companyParams={companyParams}
/>
<TeamAccountBenefitStatistics accountBenefitStatistics={accountBenefitStatistics} />
<h5 className="mt-4 mb-2">
<Trans i18nKey="teams:home.healthDetails" />
@@ -148,7 +124,7 @@ export default function TeamAccountStatistics({
redirect(
createPath(
pathsConfig.app.accountBilling,
teamAccount.slug || '',
teamAccount.slug!,
),
)
}

View File

@@ -0,0 +1,75 @@
import { getSupabaseServerClient } from "@/packages/supabase/src/clients/server-client";
import { loadAccountBenefitStatistics, loadCompanyPersonalAccountsBalanceEntries } from "./load-team-account-benefit-statistics";
export interface TeamAccountBenefitExpensesOverview {
benefitAmount: number | null;
benefitOccurrence: 'yearly' | 'monthly' | 'quarterly' | null;
currentMonthUsageTotal: number;
managementFee: number;
managementFeeTotal: number;
total: number;
}
const MANAGEMENT_FEE = 5.50;
const MONTHS = 12;
const QUARTERS = 4;
export async function loadTeamAccountBenefitExpensesOverview({
companyId,
employeeCount,
}: {
companyId: string;
employeeCount: number;
}): Promise<TeamAccountBenefitExpensesOverview> {
const supabase = getSupabaseServerClient();
const { data, error } = await supabase
.schema('medreport')
.from('benefit_distribution_schedule')
.select('*')
.eq('company_id', companyId)
.eq('is_active', true)
.single();
let benefitAmount: TeamAccountBenefitExpensesOverview['benefitAmount'] = null;
let benefitOccurrence: TeamAccountBenefitExpensesOverview['benefitOccurrence'] = null;
if (error) {
console.warn('Failed to load team account benefit expenses overview');
} else {
benefitAmount = data.benefit_amount as TeamAccountBenefitExpensesOverview['benefitAmount'];
benefitOccurrence = data.benefit_occurrence as TeamAccountBenefitExpensesOverview['benefitOccurrence'];
}
const { purchaseEntriesTotal } = await loadCompanyPersonalAccountsBalanceEntries({ accountId: companyId });
return {
benefitAmount,
benefitOccurrence,
currentMonthUsageTotal: purchaseEntriesTotal,
managementFee: MANAGEMENT_FEE,
managementFeeTotal: MANAGEMENT_FEE * employeeCount,
total: (() => {
if (typeof benefitAmount !== 'number') {
return 0;
}
const currentDate = new Date();
const createdAt = new Date(data.created_at);
const isCreatedThisYear = createdAt.getFullYear() === currentDate.getFullYear();
if (benefitOccurrence === 'yearly') {
return benefitAmount * employeeCount;
} else if (benefitOccurrence === 'monthly') {
const monthsLeft = isCreatedThisYear
? MONTHS - createdAt.getMonth()
: MONTHS;
return benefitAmount * employeeCount * monthsLeft;
} else if (benefitOccurrence === 'quarterly') {
const quartersLeft = isCreatedThisYear
? QUARTERS - (createdAt.getMonth() / 3)
: QUARTERS;
return benefitAmount * employeeCount * quartersLeft;
}
return 0;
})(),
}
}

View File

@@ -0,0 +1,96 @@
'use server';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
export interface AccountBenefitStatistics {
benefitDistributionSchedule: {
amount: number;
};
companyAccountsCount: number;
periodTotal: number;
orders: {
totalSum: number;
analysesCount: number;
analysesSum: number;
analysisPackagesCount: number;
analysisPackagesSum: number;
}
}
export const loadCompanyPersonalAccountsBalanceEntries = async ({
accountId,
}: {
accountId: string;
}) => {
const supabase = getSupabaseServerAdminClient();
const { count, data: accountMemberships } = await supabase
.schema('medreport')
.from('accounts_memberships')
.select('user_id')
.eq('account_id', accountId)
.throwOnError();
const { data: accountBalanceEntries } = await supabase
.schema('medreport')
.from('account_balance_entries')
.select('*')
.eq('is_active', true)
.in('account_id', accountMemberships.map(({ user_id }) => user_id))
.throwOnError();
const purchaseEntries = accountBalanceEntries.filter(({ entry_type }) => entry_type === 'purchase');
const analysesEntries = purchaseEntries.filter(({ is_analysis_order }) => is_analysis_order);
const analysisPackagesEntries = purchaseEntries.filter(({ is_analysis_package_order }) => is_analysis_package_order);
return {
accountBalanceEntries,
analysesEntries,
analysisPackagesEntries,
companyAccountsCount: count || 0,
purchaseEntries,
purchaseEntriesTotal: purchaseEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
};
}
export const loadAccountBenefitStatistics = async (
accountId: string,
): Promise<AccountBenefitStatistics> => {
const supabase = getSupabaseServerAdminClient();
const {
analysesEntries,
analysisPackagesEntries,
companyAccountsCount,
purchaseEntriesTotal,
} = await loadCompanyPersonalAccountsBalanceEntries({ accountId });
const { data: benefitDistributionSchedule } = await supabase
.schema('medreport')
.from('benefit_distribution_schedule')
.select('*')
.eq('company_id', accountId)
.eq('is_active', true)
.single()
.throwOnError();
const scheduleAmount = benefitDistributionSchedule?.benefit_amount || 0;
return {
companyAccountsCount,
benefitDistributionSchedule: {
amount: benefitDistributionSchedule?.benefit_amount || 0,
},
periodTotal: scheduleAmount * companyAccountsCount,
orders: {
totalSum: purchaseEntriesTotal,
analysesCount: analysesEntries.length,
analysesSum: analysesEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
analysisPackagesCount: analysisPackagesEntries.length,
analysisPackagesSum: analysisPackagesEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
},
};
};

View File

@@ -11,6 +11,7 @@ import {
} from '~/lib/utils';
import { TeamAccountStatisticsProps } from '../../_components/team-account-statistics';
import type { BmiThresholds } from '@kit/accounts/types/accounts';
interface AccountHealthDetailsField {
title: string;
@@ -25,10 +26,7 @@ interface AccountHealthDetailsField {
export const getAccountHealthDetailsFields = (
memberParams: TeamAccountStatisticsProps['memberParams'],
bmiThresholds: Omit<
Database['medreport']['Tables']['bmi_thresholds']['Row'],
'id'
>[],
bmiThresholds: Omit<BmiThresholds, 'id'>[],
members: Database['medreport']['Functions']['get_account_members']['Returns'],
): AccountHealthDetailsField[] => {
const averageWeight =
@@ -82,7 +80,7 @@ export const getAccountHealthDetailsFields = (
},
{
title: 'teams:healthDetails.bmi',
value: averageBMI,
value: averageBMI!,
Icon: TrendingUp,
iconBg: getBmiBackgroundColor(bmiStatus),
},

View File

@@ -0,0 +1,97 @@
'use client';
import { useState } from 'react';
import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Button } from '@kit/ui/button';
import { Form } from '@kit/ui/form';
import { Spinner } from '@kit/ui/makerkit/spinner';
import { toast } from '@kit/ui/shadcn/sonner';
import { Trans } from '@kit/ui/trans';
import { cn } from '~/lib/utils';
import { updateHealthBenefit } from '../_lib/server/server-actions';
import HealthBenefitFields from './health-benefit-fields';
import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
import { useTranslation } from 'react-i18next';
const HealthBenefitFormClient = ({
account,
companyParams,
}: {
account: Account;
companyParams: CompanyParams;
}) => {
const { t } = useTranslation('account');
const [currentCompanyParams, setCurrentCompanyParams] =
useState<CompanyParams>(companyParams);
const [isLoading, setIsLoading] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(UpdateHealthBenefitSchema),
mode: 'onChange',
defaultValues: {
occurrence: currentCompanyParams.benefit_occurance || 'yearly',
amount: currentCompanyParams.benefit_amount || 0,
},
});
const isDirty = form.formState.isDirty;
const onSubmit = (data: { occurrence: string; amount: number }) => {
const promise = async () => {
setIsLoading(true);
try {
await updateHealthBenefit({ ...data, accountId: account.id });
setCurrentCompanyParams((prev) => ({
...prev,
benefit_amount: data.amount,
benefit_occurance: data.occurrence,
}));
} finally {
form.reset(data);
setIsLoading(false);
}
};
toast.promise(promise, {
success: t('account:healthBenefitForm.updateSuccess'),
error: 'error',
});
};
return (
<Form {...form}>
<form
className="flex flex-col gap-6"
onSubmit={form.handleSubmit(onSubmit)}
>
<HealthBenefitFields />
<Button
type="submit"
className="relative"
disabled={!isDirty || isLoading}
>
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<Spinner />
</div>
)}
<div className={cn({ invisible: isLoading })}>
<Trans i18nKey="account:saveChanges" />
</div>
</Button>
</form>
</Form>
);
};
export default HealthBenefitFormClient;

View File

@@ -1,78 +1,26 @@
'use client';
import { useState } from 'react';
import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
import { Database } from '@/packages/supabase/src/database.types';
import { zodResolver } from '@hookform/resolvers/zod';
import { PiggyBankIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { Button } from '@kit/ui/button';
import { Form } from '@kit/ui/form';
import { Spinner } from '@kit/ui/makerkit/spinner';
import { Separator } from '@kit/ui/shadcn/separator';
import { toast } from '@kit/ui/shadcn/sonner';
import { Trans } from '@kit/ui/trans';
import { cn } from '~/lib/utils';
import { updateHealthBenefit } from '../_lib/server/server-actions';
import HealthBenefitFields from './health-benefit-fields';
import HealthBenefitFormClient from './health-benefit-form-client';
import YearlyExpensesOverview from './yearly-expenses-overview';
import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
const HealthBenefitForm = ({
const HealthBenefitForm = async ({
account,
companyParams,
employeeCount,
expensesOverview,
}: {
account: Database['medreport']['Tables']['accounts']['Row'];
companyParams: Database['medreport']['Tables']['company_params']['Row'];
account: Account;
companyParams: CompanyParams;
employeeCount: number;
expensesOverview: TeamAccountBenefitExpensesOverview;
}) => {
const [currentCompanyParams, setCurrentCompanyParams] =
useState<Database['medreport']['Tables']['company_params']['Row']>(
companyParams,
);
const [isLoading, setIsLoading] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(UpdateHealthBenefitSchema),
mode: 'onChange',
defaultValues: {
occurrence: currentCompanyParams.benefit_occurance || 'yearly',
amount: currentCompanyParams.benefit_amount || 0,
},
});
const isDirty = form.formState.isDirty;
const onSubmit = (data: { occurrence: string; amount: number }) => {
const promise = async () => {
setIsLoading(true);
try {
await updateHealthBenefit({ ...data, accountId: account.id });
setCurrentCompanyParams((prev) => ({
...prev,
benefit_amount: data.amount,
benefit_occurance: data.occurrence,
}));
} finally {
form.reset(data);
setIsLoading(false);
}
};
toast.promise(promise, {
success: 'Andmed uuendatud',
error: 'error',
});
};
return (
<Form {...form}>
<form
className="flex flex-col gap-6 px-6 text-left"
onSubmit={form.handleSubmit(onSubmit)}
>
<div className="flex flex-col gap-6 px-6 text-left">
<div className="mt-8 flex items-center justify-between">
<div>
<h4>
@@ -81,25 +29,9 @@ const HealthBenefitForm = ({
values={{ companyName: account.name }}
/>
</h4>
<p className="text-muted-foreground text-sm">
<Trans i18nKey="billing:description" />
</p>
</div>
<Button
type="submit"
className="relative"
disabled={!isDirty || isLoading}
>
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<Spinner />
</div>
)}
<div className={cn({ invisible: isLoading })}>
<Trans i18nKey="account:saveChanges" />
</div>
</Button>
</div>
<div className="flex flex-row gap-6">
<div className="border-border w-1/3 rounded-lg border">
<div className="p-6">
@@ -109,30 +41,30 @@ const HealthBenefitForm = ({
<p className="mt-4 text-sm font-medium">
<Trans i18nKey="billing:healthBenefitForm.description" />
</p>
<p className="pt-2 text-2xl font-semibold">
{currentCompanyParams.benefit_amount || 0}
</p>
</div>
<Separator />
<div className="p-6">
<HealthBenefitFields />
<HealthBenefitFormClient
account={account}
companyParams={companyParams}
/>
</div>
</div>
<div className="flex-1">
<div className="flex-1 space-y-6">
<YearlyExpensesOverview
employeeCount={employeeCount}
companyParams={currentCompanyParams}
expensesOverview={expensesOverview}
/>
<p className="text-muted-foreground mt-2 text-sm">
<p className="text-muted-foreground text-sm">
<Trans i18nKey="billing:healthBenefitForm.info" />
</p>
</div>
</div>
</form>
</Form>
</div>
);
};

View File

@@ -1,50 +1,19 @@
import { useMemo } from 'react';
import { Database } from '@/packages/supabase/src/database.types';
'use client';
import { Trans } from '@kit/ui/makerkit/trans';
import { Separator } from '@kit/ui/separator';
import { formatCurrency } from '@/packages/shared/src/utils';
import { useTranslation } from 'react-i18next';
import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
const YearlyExpensesOverview = ({
employeeCount = 0,
companyParams,
expensesOverview,
}: {
employeeCount?: number;
companyParams: Database['medreport']['Tables']['company_params']['Row'];
expensesOverview: TeamAccountBenefitExpensesOverview;
}) => {
const monthlyExpensePerEmployee = useMemo(() => {
if (!companyParams.benefit_amount) {
return '0.00';
}
switch (companyParams.benefit_occurance) {
case 'yearly':
return (companyParams.benefit_amount / 12).toFixed(2);
case 'quarterly':
return (companyParams.benefit_amount / 3).toFixed(2);
case 'monthly':
return companyParams.benefit_amount.toFixed(2);
default:
return '0.00';
}
}, [companyParams]);
const maxYearlyExpensePerEmployee = useMemo(() => {
if (!companyParams.benefit_amount) {
return '0.00';
}
switch (companyParams.benefit_occurance) {
case 'yearly':
return companyParams.benefit_amount.toFixed(2);
case 'quarterly':
return (companyParams.benefit_amount * 3).toFixed(2);
case 'monthly':
return (companyParams.benefit_amount * 12).toFixed(2);
default:
return '0.00';
}
}, [companyParams]);
const { i18n: { language } } = useTranslation();
return (
<div className="border-border rounded-lg border p-6">
@@ -53,41 +22,56 @@ const YearlyExpensesOverview = ({
</h5>
<div className="mt-5 flex justify-between">
<p className="text-sm font-medium">
<Trans i18nKey="billing:expensesOverview.monthly" />
<Trans i18nKey="billing:expensesOverview.employeeCount" />
</p>
<span className="text-primary text-sm font-bold">
{monthlyExpensePerEmployee}
{employeeCount}
</span>
</div>
<div className="mt-3 flex justify-between">
<p className="text-sm font-medium">
<Trans i18nKey="billing:expensesOverview.yearly" />
</p>
<span className="text-sm font-medium">
{maxYearlyExpensePerEmployee}
</span>
</div>
<div className="mt-5 mb-3 flex justify-between">
<p className="text-sm font-medium">
<Trans
i18nKey="billing:expensesOverview.total"
values={{ employeeCount: employeeCount || 0 }}
i18nKey="billing:expensesOverview.managementFeeTotal"
values={{
managementFee: formatCurrency({
value: expensesOverview.managementFee,
locale: language,
currencyCode: 'EUR',
}),
}}
/>
</p>
<span className="text-sm font-medium">
{(Number(maxYearlyExpensePerEmployee) * employeeCount).toFixed(2)}
{formatCurrency({
value: expensesOverview.managementFeeTotal,
locale: language,
currencyCode: 'EUR',
})}
</span>
</div>
<div className="mt-3 mb-4 flex justify-between">
<p className="text-sm font-medium">
<Trans i18nKey="billing:expensesOverview.currentMonthUsageTotal" />
</p>
<span className="text-sm font-medium">
{formatCurrency({
value: expensesOverview.currentMonthUsageTotal,
locale: language,
currencyCode: 'EUR',
})}
</span>
</div>
<Separator />
<div className="mt-4 flex justify-between">
<p className="font-semibold">
<Trans i18nKey="billing:expensesOverview.sum" />
<Trans i18nKey="billing:expensesOverview.total" />
</p>
<span className="font-semibold">
{companyParams.benefit_amount
? companyParams.benefit_amount * employeeCount
: 0}{' '}
{formatCurrency({
value: expensesOverview.total,
locale: language,
currencyCode: 'EUR',
})}
</span>
</div>
</div>

View File

@@ -7,6 +7,7 @@ import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import HealthBenefitForm from './_components/health-benefit-form';
import { loadTeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
interface TeamAccountBillingPageProps {
params: Promise<{ account: string }>;
@@ -27,8 +28,14 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
const api = createTeamAccountsApi(client);
const account = await api.getTeamAccount(accountSlug);
const companyParams = await api.getTeamAccountParams(account.id);
const { members } = await api.getMembers(accountSlug);
const [expensesOverview, companyParams] = await Promise.all([
loadTeamAccountBenefitExpensesOverview({
companyId: account.id,
employeeCount: members.length,
}),
api.getTeamAccountParams(account.id),
]);
return (
<PageBody>
@@ -36,6 +43,7 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
account={account}
companyParams={companyParams}
employeeCount={members.length}
expensesOverview={expensesOverview}
/>
</PageBody>
);

View File

@@ -54,7 +54,7 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
return (
<>
<TeamAccountLayoutPageHeader
title={<Trans i18nKey={'common:routes.members'} />}
title={<Trans i18nKey={'common:routes.companyMembers'} />}
description={<AppBreadcrumbs values={{ [account.slug]: account.name }}/>}
/>

View File

@@ -17,6 +17,7 @@ import {
} from '~/lib/services/audit/pageView.service';
import { Dashboard } from './_components/dashboard';
import { loadAccountBenefitStatistics } from './_lib/server/load-team-account-benefit-statistics';
interface TeamAccountHomePageProps {
params: Promise<{ account: string }>;
@@ -39,9 +40,7 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
const teamAccount = use(teamAccountsApi.getTeamAccount(account));
const { memberParams, members } = use(teamAccountsApi.getMembers(account));
const bmiThresholds = use(userAnalysesApi.fetchBmiThresholds());
const companyParams = use(
teamAccountsApi.getTeamAccountParams(teamAccount.id),
);
const accountBenefitStatistics = use(loadAccountBenefitStatistics(teamAccount.id));
use(
createPageViewLog({
@@ -57,7 +56,7 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
memberParams={memberParams}
bmiThresholds={bmiThresholds}
members={members}
companyParams={companyParams}
accountBenefitStatistics={accountBenefitStatistics}
/>
</PageBody>
);

View File

@@ -1,3 +0,0 @@
import type { Database } from "@/packages/supabase/src/database.types";
export type AccountBalanceEntry = Database['medreport']['Tables']['account_balance_entries']['Row'];

View File

@@ -1,9 +1,9 @@
import { Database } from '@/packages/supabase/src/database.types';
import { type ClassValue, clsx } from 'clsx';
import Isikukood, { Gender } from 'isikukood';
import { twMerge } from 'tailwind-merge';
import { BmiCategory } from './types/bmi';
import type { BmiThresholds } from '@kit/accounts/types/accounts';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@@ -45,10 +45,7 @@ export const bmiFromMetric = (kg: number, cm: number) => {
};
export function getBmiStatus(
thresholds: Omit<
Database['medreport']['Tables']['bmi_thresholds']['Row'],
'id'
>[],
thresholds: Omit<BmiThresholds, 'id'>[],
params: { age: number; height: number; weight: number },
): BmiCategory | null {
const age = params.age;

View File

@@ -1,23 +1,25 @@
import { Database } from '@kit/supabase/database';
export type ApplicationRole =
Database['medreport']['Tables']['accounts']['Row']['application_role'];
export type ApplicationRole = Account['application_role'];
export enum ApplicationRoleEnum {
User = 'user',
Doctor = 'doctor',
SuperAdmin = 'super_admin',
}
export type AccountWithParams =
Database['medreport']['Tables']['accounts']['Row'] & {
export type AccountParams =
Database['medreport']['Tables']['account_params']['Row'];
export type Account = Database['medreport']['Tables']['accounts']['Row'];
export type AccountWithParams = Account & {
accountParams:
| (Pick<
Database['medreport']['Tables']['account_params']['Row'],
'weight' | 'height'
> & {
isSmoker:
| Database['medreport']['Tables']['account_params']['Row']['is_smoker']
| null;
| (Pick<AccountParams, 'weight' | 'height'> & {
isSmoker: AccountParams['is_smoker'] | null;
})
| null;
};
export type CompanyParams =
Database['medreport']['Tables']['company_params']['Row'];
export type BmiThresholds = Database['medreport']['Tables']['bmi_thresholds']['Row'];

View File

@@ -9,6 +9,7 @@
"devDependencies": {
"@hookform/resolvers": "^5.0.1",
"@kit/next": "workspace:*",
"@kit/accounts": "workspace:*",
"@kit/shared": "workspace:*",
"@kit/supabase": "workspace:*",
"@kit/tsconfig": "workspace:*",

View File

@@ -11,7 +11,7 @@ import { EllipsisVertical } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Database } from '@kit/supabase/database';
import type { Account } from '@kit/accounts/types/accounts';
import { Button } from '@kit/ui/button';
import { Checkbox } from '@kit/ui/checkbox';
import {
@@ -44,8 +44,6 @@ import { AdminDeleteUserDialog } from './admin-delete-user-dialog';
import { AdminImpersonateUserDialog } from './admin-impersonate-user-dialog';
import { AdminResetPasswordDialog } from './admin-reset-password-dialog';
type Account = Database['medreport']['Tables']['accounts']['Row'];
const FiltersSchema = z.object({
type: z.enum(['all', 'team', 'personal']),
query: z.string().optional(),

View File

@@ -1,6 +1,6 @@
import { z } from 'zod';
import { Database } from '@kit/supabase/database';
import { ApplicationRole } from '@kit/accounts/types/accounts';
const ConfirmationSchema = z.object({
confirmation: z.custom<string>((value) => value === 'CONFIRM'),
@@ -19,9 +19,7 @@ export const DeleteAccountSchema = ConfirmationSchema.extend({
accountId: z.string().uuid(),
});
type ApplicationRoleType =
Database['medreport']['Tables']['accounts']['Row']['application_role'];
export const UpdateAccountRoleSchema = z.object({
accountId: z.string().uuid(),
role: z.string() as z.ZodType<ApplicationRoleType>,
role: z.string() as z.ZodType<ApplicationRole>,
});

View File

@@ -3,6 +3,7 @@ import 'server-only';
import { SupabaseClient } from '@supabase/supabase-js';
import { Database } from '@kit/supabase/database';
import type { ApplicationRole } from '@kit/accounts/types/accounts';
export function createAdminAccountsService(client: SupabaseClient<Database>) {
return new AdminAccountsService(client);
@@ -25,7 +26,7 @@ class AdminAccountsService {
async updateRole(
accountId: string,
role: Database['medreport']['Tables']['accounts']['Row']['application_role'],
role: ApplicationRole,
) {
const { error } = await this.adminClient
.schema('medreport')

View File

@@ -1,9 +1,7 @@
import { z } from 'zod';
import { getLogger } from '@kit/shared/logger';
import { Database } from '@kit/supabase/database';
type Account = Database['medreport']['Tables']['accounts']['Row'];
import type { Account } from '@kit/accounts/types/accounts';
export function createAccountWebhooksService() {
return new AccountWebhooksService();

3
pnpm-lock.yaml generated
View File

@@ -647,6 +647,9 @@ importers:
'@hookform/resolvers':
specifier: ^5.0.1
version: 5.2.1(react-hook-form@7.62.0(react@19.1.0))
'@kit/accounts':
specifier: workspace:*
version: link:../accounts
'@kit/next':
specifier: workspace:*
version: link:../../next