Update dependency @types/react to v18.3.12

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

@@ -28,7 +28,7 @@
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.8.4",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1"
   },
   "engines": {

pnpm-lock.yaml

@@ -40,7 +40,7 @@ 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.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react:
         specifier: 19.0.0-rc-f38c22b244-20240704
         version: 19.0.0-rc-f38c22b244-20240704
@@ -70,8 +70,8 @@ importers:
         specifier: 22.8.4
         version: 22.8.4
       '@types/react':
-        specifier: 18.3.5
-        version: 18.3.5
+        specifier: 18.3.12
+        version: 18.3.12
       '@types/react-dom':
         specifier: 18.3.1
         version: 18.3.1
@@ -349,8 +349,8 @@ packages:
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
 
-  '@types/react@18.3.5':
-    resolution: {integrity: sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==}
+  '@types/react@18.3.12':
+    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
 
   '@vercel/postgres@0.9.0':
     resolution: {integrity: sha512-WiI2g3+ce2g1u1gP41MoDj2DsMuQQ+us7vHobysRixKECGaLHpfTI7DuVZmHU087ozRAGr3GocSyqmWLLo+fig==}
@@ -1454,13 +1454,13 @@ snapshots:
 
   '@types/react-dom@18.3.1':
     dependencies:
-      '@types/react': 18.3.5
+      '@types/react': 18.3.12
 
   '@types/react-transition-group@4.4.11':
     dependencies:
-      '@types/react': 18.3.5
+      '@types/react': 18.3.12
 
-  '@types/react@18.3.5':
+  '@types/react@18.3.12':
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
@@ -2010,14 +2010,14 @@ 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.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@types/react-transition-group': 4.4.11
       react: 19.0.0-rc-f38c22b244-20240704
       react-dom: 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-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
     optionalDependencies:
-      '@types/react': 18.3.5
+      '@types/react': 18.3.12
 
   prop-types@15.8.1:
     dependencies: