Update dependency react to v19.0.0-rc-fb9a90fa48-20240614

Reviewed-on: #71

app/dashboard/expenses/page.tsx

@@ -1,12 +1,15 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { lusitana } from '@/app/ui/fonts';
+import ExpenseSummary from '@/app/ui/expenses/summary';
  
 export default  function Page () {
   return (
     <div className="w-full">
-      <div className="flex w-full items-center justify-between">
+      <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
+        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
+        <ExpenseSummary />
       </div>
     </div>
   );

app/types.tsx

@@ -0,0 +1,13 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import * as HeroIcon from '@heroicons/react/24/outline'
+import { ComponentProps } from 'react'
+
+type Props = {
+  name: keyof typeof HeroIcon
+} & ComponentProps<typeof HeroIcon.AcademicCapIcon>
+
+export const Icon = ({ name, ...props }: Props) => {
+  const IconComponent = HeroIcon[name]
+  return <IconComponent {...props} />
+}

app/ui/components/dashboard-cards.tsx

@@ -0,0 +1,53 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import clsx from "clsx"
+import { Icon } from "../../types";
+import * as HeroIcon from '@heroicons/react/24/outline'
+
+type Style = "green" | "blue" | "red" | "orange" | "gray"
+
+const colorClasses = (style: Style) => {
+    switch (style) {
+        case "green":
+            return "bg-green-700 hover:bg-green-800"
+        case "blue":
+            return "bg-blue-500 hover:bg-blue-700"
+        case "red":
+            return "bg-red-600 hover:bg-red-700"
+        case "orange":
+            return "bg-orange-600 hover:bg-orange-700"
+        case "gray":
+            return "bg-gray-600 hover:bg-gray-700"
+    }
+}
+
+export async function MainCard({ amount, title, subtitle, style, iconName }:
+    {
+        amount: string,
+        title: string,
+        subtitle?: string,
+        style: Style,
+        iconName: keyof typeof HeroIcon
+    }) {
+
+    return (
+        <div className={`w-80 m-1 py-2 px-6 text-white flex flex-row items-center ${colorClasses(style)}`}>
+            <Icon className="m-3 h-14 w-14" name={iconName} />
+            <div className="flex flex-col justify-evenly">
+                <div className="text-4xl font-medium">{amount}</div>
+                <div className="text-xl">{title}</div>
+                <div className="text-sm">{subtitle || 'ㅤ'}</div>
+            </div>
+        </div>
+    );
+}
+
+export async 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} />
+            <span className="text-2xl font-medium mx-1">{amount}</span>
+            <span className="text-l mx-1">{title}</span>
+        </div>
+    );
+}

app/ui/expenses/summary.tsx

@@ -0,0 +1,45 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { MainCard, SecondaryCard } from '../components/dashboard-cards';
+
+export default async function ExpenseSummary() {
+    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="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>
+    );
+}

package.json

@@ -17,7 +17,7 @@
     "postcss": "8.4.47",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
-    "react": "19.0.0-rc-f38c22b244-20240704",
+    "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
     "tailwindcss": "3.4.14",
     "typescript": "5.6.3",

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@heroicons/react':
         specifier: ^2.1.4
-        version: 2.1.5(react@19.0.0-rc-f38c22b244-20240704)
+        version: 2.1.5(react@19.0.0-rc-fb9a90fa48-20240614)
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.9(tailwindcss@3.4.14)
@@ -28,10 +28,10 @@ importers:
         version: 2.1.1
       next:
         specifier: 15.0.2
-        version: 15.0.2(@playwright/test@1.48.2)(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.2(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
       next-auth:
         specifier: 5.0.0-beta.25
-        version: 5.0.0-beta.25(next@15.0.2(@playwright/test@1.48.2)(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.2(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
       postcss:
         specifier: 8.4.47
         version: 8.4.47
@@ -40,13 +40,13 @@ importers:
         version: 7.0.0
       primereact:
         specifier: ^10.8.2
-        version: 10.8.4(@types/react@18.3.5)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.8.4(@types/react@18.3.5)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
       react:
-        specifier: 19.0.0-rc-f38c22b244-20240704
+        specifier: 19.0.0-rc-fb9a90fa48-20240614
-        version: 19.0.0-rc-f38c22b244-20240704
+        version: 19.0.0-rc-fb9a90fa48-20240614
       react-dom:
         specifier: 19.0.0-rc-f38c22b244-20240704
-        version: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+        version: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
       tailwindcss:
         specifier: 3.4.14
         version: 3.4.14
@@ -55,7 +55,7 @@ importers:
         version: 5.6.3
       use-debounce:
         specifier: ^10.0.1
-        version: 10.0.4(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.0.4(react@19.0.0-rc-fb9a90fa48-20240614)
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -997,8 +997,8 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react@19.0.0-rc-f38c22b244-20240704:
+  react@19.0.0-rc-fb9a90fa48-20240614:
-    resolution: {integrity: sha512-OP8O6Oc1rdR9IdIKJRKaL1PYd4eGkn6f88VqiygWyyG4P4RmPPix5pp7MatqSt9TnBOcVT+lBMGoVxRgUFeudQ==}
+    resolution: {integrity: sha512-nvE3Gy+IOIfH/DXhkyxFVQSrITarFcQz4+shzC/McxQXEUSonpw2oDy/Wi9hdDtV3hlP12VYuDL95iiBREedNQ==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -1252,9 +1252,9 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@heroicons/react@2.1.5(react@19.0.0-rc-f38c22b244-20240704)':
+  '@heroicons/react@2.1.5(react@19.0.0-rc-fb9a90fa48-20240614)':
     dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
 
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
@@ -1830,13 +1830,13 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  next-auth@5.0.0-beta.25(next@15.0.2(@playwright/test@1.48.2)(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.2(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
       '@auth/core': 0.37.2
-      next: 15.0.2(@playwright/test@1.48.2)(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.2(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
 
-  next@15.0.2(@playwright/test@1.48.2)(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.2(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
       '@next/env': 15.0.2
       '@swc/counter': 0.1.3
@@ -1844,9 +1844,9 @@ snapshots:
       busboy: 1.6.0
       caniuse-lite: 1.0.30001651
       postcss: 8.4.31
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
-      styled-jsx: 5.1.6(react@19.0.0-rc-f38c22b244-20240704)
+      styled-jsx: 5.1.6(react@19.0.0-rc-fb9a90fa48-20240614)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.0.2
       '@next/swc-darwin-x64': 15.0.2
@@ -2010,12 +2010,12 @@ snapshots:
 
   primeicons@7.0.0: {}
 
-  primereact@10.8.4(@types/react@18.3.5)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  primereact@10.8.4(@types/react@18.3.5)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
       '@types/react-transition-group': 4.4.11
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-transition-group: 4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      react-transition-group: 4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
     optionalDependencies:
       '@types/react': 18.3.5
 
@@ -2027,23 +2027,23 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704):
+  react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
       scheduler: 0.25.0-rc-f38c22b244-20240704
 
   react-is@16.13.1: {}
 
-  react-transition-group@4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  react-transition-group@4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
       '@babel/runtime': 7.25.7
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
 
-  react@19.0.0-rc-f38c22b244-20240704: {}
+  react@19.0.0-rc-fb9a90fa48-20240614: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -2160,10 +2160,10 @@ snapshots:
     dependencies:
       ansi-regex: 6.0.1
 
-  styled-jsx@5.1.6(react@19.0.0-rc-f38c22b244-20240704):
+  styled-jsx@5.1.6(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
       client-only: 0.0.1
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
 
   sucrase@3.35.0:
     dependencies:
@@ -2241,9 +2241,9 @@ snapshots:
       escalade: 3.1.2
       picocolors: 1.0.1
 
-  use-debounce@10.0.4(react@19.0.0-rc-f38c22b244-20240704):
+  use-debounce@10.0.4(react@19.0.0-rc-fb9a90fa48-20240614):
     dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
 
   utf-8-validate@6.0.4:
     dependencies: