wedding-planner-frontend/app/ui/dashboard/global-summary.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

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