Update dependency @types/react-dom to v18.3.5

Reviewed-on: #151

.nvmrc

@@ -1 +1 @@
-23.3.0
+23.4.0

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 as Summary} from '@/app/lib/definitions';
 import { MainCard, SecondaryCard } from '../components/dashboard-cards';
 
-export default async function GlobalSummary() {
+export default function GlobalSummary({ summary }: { summary: Summary }) {
   return (
     <div className="my-4">
-
       <div className="flex flex-row w-full my-2">
-                <MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />
-
         <div className="flex flex-col">
-                    <MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
+          <MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
-                    <MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
+          <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="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
+          <MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
-                    <MainCard amount="45000€" title="Min." subtitle="125 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="150" title="Invites sent" iconName="UsersIcon" />
+        <MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
 
         <div className="flex flex-col">
-                    <SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
+          <SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
-                    <SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
+          <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="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
+          <SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
-                    <SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />
+          <SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} 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>
   );
 }

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>

package.json

@@ -28,7 +28,7 @@
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.10.1",
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.5"
   },
   "engines": {
     "node": ">=23.0.0"

pnpm-lock.yaml

@@ -25,10 +25,10 @@ importers:
         version: 2.1.1
       next:
         specifier: 15.0.3
-        version: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 15.0.3(@playwright/test@1.49.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       next-auth:
         specifier: 5.0.0-beta.25
-        version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       postcss:
         specifier: 8.4.49
         version: 8.4.49
@@ -59,7 +59,7 @@ importers:
     devDependencies:
       '@playwright/test':
         specifier: ^1.46.0
-        version: 1.49.0
+        version: 1.49.1
       '@types/bcrypt':
         specifier: ^5.0.2
         version: 5.0.2
@@ -70,8 +70,8 @@ importers:
         specifier: 18.3.12
         version: 18.3.12
       '@types/react-dom':
-        specifier: 18.3.1
+        specifier: 18.3.5
-        version: 18.3.1
+        version: 18.3.5(@types/react@18.3.12)
 
 packages:
 
@@ -306,8 +306,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.49.0':
+  '@playwright/test@1.49.1':
-    resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
+    resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -334,8 +334,10 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-dom@18.3.1':
+  '@types/react-dom@18.3.5':
-    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
@@ -835,13 +837,13 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
-  playwright-core@1.49.0:
+  playwright-core@1.49.1:
-    resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
+    resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.49.0:
+  playwright@1.49.1:
-    resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
+    resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1337,9 +1339,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.49.0':
+  '@playwright/test@1.49.1':
     dependencies:
-      playwright: 1.49.0
+      playwright: 1.49.1
 
   '@swc/counter@0.1.3': {}
 
@@ -1364,7 +1366,7 @@ snapshots:
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-dom@18.3.1':
+  '@types/react-dom@18.3.5(@types/react@18.3.12)':
     dependencies:
       '@types/react': 18.3.12
 
@@ -1729,13 +1731,13 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@auth/core': 0.37.2
-      next: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      next: 15.0.3(@playwright/test@1.49.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react: 19.0.0-rc-f38c22b244-20240704
 
-  next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next@15.0.3(@playwright/test@1.49.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@next/env': 15.0.3
       '@swc/counter': 0.1.3
@@ -1755,7 +1757,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 15.0.3
       '@next/swc-win32-arm64-msvc': 15.0.3
       '@next/swc-win32-x64-msvc': 15.0.3
-      '@playwright/test': 1.49.0
+      '@playwright/test': 1.49.1
       sharp: 0.33.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -1815,11 +1817,11 @@ snapshots:
 
   pirates@4.0.6: {}
 
-  playwright-core@1.49.0: {}
+  playwright-core@1.49.1: {}
 
-  playwright@1.49.0:
+  playwright@1.49.1:
     dependencies:
-      playwright-core: 1.49.0
+      playwright-core: 1.49.1
     optionalDependencies:
       fsevents: 2.3.2