Manuel Bustillo
501bb3a81a
All checks were successful
Playwright Tests / test (pull_request) Has been skipped
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m12s
Add copyright notice / copyright_notice (pull_request) Successful in 1m32s
Build Nginx-based docker image / build-static-assets (push) Successful in 6m2s
41 lines
2.8 KiB
TypeScript
41 lines
2.8 KiB
TypeScript
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
|
|
import { GlobalSummary as Summary} from '@/app/lib/definitions';
|
|
import { MainCard, SecondaryCard } from '../components/dashboard-cards';
|
|
|
|
export default function GlobalSummary({ summary }: { summary: Summary }) {
|
|
return (
|
|
<div className="my-4">
|
|
<div className="flex flex-row w-full my-2">
|
|
<div className="flex flex-col">
|
|
<MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
|
|
<MainCard amount={`${Math.round(summary.expenses.projected.total / summary.expenses.projected.guests)}€`} title="/ guest" iconName="UserIcon" style='blue' />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
|
|
<MainCard amount={`${Math.round(summary.expenses.confirmed.total / summary.expenses.confirmed.guests)}€`} title="/ guest" iconName="UserIcon" style='green' />
|
|
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<MainCard amount={`${summary.expenses.status.paid}€`} title="Paid already" subtitle={`${Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="CheckIcon" style='blue' />
|
|
<MainCard amount={`${summary.expenses.projected.total - summary.expenses.status.paid}€`} title="To pay" subtitle={`${100 - Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="BanknotesIcon" style="orange" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex flex-row w-full my-2">
|
|
<MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
|
|
|
|
<div className="flex flex-col">
|
|
<SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
|
|
<SecondaryCard amount={`${Math.round(summary.guests.declined / summary.guests.total * 100)}%`} title={`declined (${summary.guests.declined} guests)`} iconName="XMarkIcon" style='red' />
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
|
|
<SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |