Merge pull request 'Load dashboard information from the backend' (#150) from dashboard into main

Reviewed-on: #150

app/[slug]/dashboard/page.tsx

@@ -1,9 +1,26 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+'use client'
+
+import { GlobalSummary as Summary } from '@/app/lib/definitions';
+import { getSlug } from '@/app/lib/utils';
 import GlobalSummary from '@/app/ui/dashboard/global-summary';
+import { useEffect, useState } from 'react';
 
 export default function Page() {
-  return(
+  const [globalSummary, setGlobalSummary] = useState<Summary | undefined>(undefined);
-    <GlobalSummary />
+
+  function refreshSummary() {
+    fetch(`/api/${getSlug()}/summary`)
+      .then((response) => response.json())
+      .then((data) => {
+        setGlobalSummary(data);
+      })
+  }
+
+  useEffect(refreshSummary, []);
+
+  return (
+    globalSummary && <GlobalSummary summary={globalSummary} />
   );
 }

app/lib/definitions.ts

@@ -1,5 +1,6 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+import { AttendanceSummary } from "./group";
 import { Guest } from "./guest";
 
 export interface Entity {
@@ -38,3 +39,22 @@ export type Captcha = {
 export type StructuredErrors = {
   [key: string]: string[] | string;
 };
+
+export type GlobalSummary = {
+  expenses: ExpenseSummary; 
+  guests: AttendanceSummary
+}
+
+export type ExpenseSummary = {
+  projected: ExpensePossibleSummary;
+  confirmed: ExpensePossibleSummary;
+  status: StatusSummary;
+}
+
+export type ExpensePossibleSummary = {
+  total: number;
+  guests: number;
+}
+export type StatusSummary = {
+  paid: number;
+}

app/ui/components/dashboard-cards.tsx

@@ -21,7 +21,7 @@ const colorClasses = (style: Style) => {
     }
 }
 
-export async function MainCard({ amount, title, subtitle, style, iconName }:
+export function MainCard({ amount, title, subtitle, style, iconName }:
     {
         amount: string,
         title: string,
@@ -42,7 +42,7 @@ export async function MainCard({ amount, title, subtitle, style, iconName }:
     );
 }
 
-export async function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
+export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
     return (
         <div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
             <Icon className="m-3 h-7 w-7" name={iconName} />

app/ui/dashboard/global-summary.tsx

@@ -1,45 +1,41 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+import { GlobalSummary } from '@/app/lib/definitions';
 import { MainCard, SecondaryCard } from '../components/dashboard-cards';
 
-export default async function GlobalSummary() {
+export default function GlobalSummary({ summary }: { summary: GlobalSummary }) {
-    return (
+  return (
-        <div className="my-4">
+    <div className="my-4">
-
+      <div className="flex flex-row w-full my-2">
-            <div className="flex flex-row w-full my-2">
+        <div className="flex flex-col">
-                <MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />
+          <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 className="flex flex-col">
-                    <MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
-                    <MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
-                </div>
-                <div className="flex flex-col">
-                    <MainCard amount="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
-                    <MainCard amount="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
-                </div>
-
-            </div>
-
-            <div className="flex flex-row w-full my-2">
-                <MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />
-
-                <div className="flex flex-col">
-                    <SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
-                    <SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
-                </div>
-
-                <div className="flex flex-col">
-                <SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
-                    <SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />
-
-                </div>
-            </div>
-
-            <div className="flex flex-row w-full my-2">
-                <MainCard style="blue" amount="5" title="Table simulations" iconName="ServerStackIcon" />
-                <MainCard style="blue" amount="9" title="Bus simulations" iconName="TruckIcon" />
-                <MainCard style="blue" amount="98" title="QR codes" iconName="QrCodeIcon" />
-            </div>
         </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>
+  );
 }

app/ui/dashboard/sidenav.tsx

@@ -17,7 +17,7 @@ export default function SideNav() {
     <div className="flex h-full flex-col px-3 py-4 md:px-2">
       <Link
         className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
-        href="/dashboard/guests"
+        href={`/${getSlug()}/dashboard`}
       >
         <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>