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

Merge pull request 'Define a dashboard summary mockup' (#71 ) from dashboard-summary into main
Reviewed-on: #71
2024-10-31 23:09:17 +00:00 · 2024-10-31 07:25:50 +00:00 · 2024-10-30 22:25:36 +00:00 · 2024-10-30 23:24:29 +01:00
6 changed files with 149 additions and 35 deletions
--- a/app/dashboard/expenses/page.tsx
+++ b/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>
  );
--- a/app/types.tsx
+++ b/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} />
+}
--- a/app/ui/components/dashboard-cards.tsx
+++ b/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>
+    );
+}
--- a/app/ui/expenses/summary.tsx
+++ b/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>
+    );
+}
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
-        version: 19.0.0-rc-f38c22b244-20240704
+        specifier: 19.0.0-rc-fb9a90fa48-20240614
+        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:
-    resolution: {integrity: sha512-OP8O6Oc1rdR9IdIKJRKaL1PYd4eGkn6f88VqiygWyyG4P4RmPPix5pp7MatqSt9TnBOcVT+lBMGoVxRgUFeudQ==}
+  react@19.0.0-rc-fb9a90fa48-20240614:
+    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)
-      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-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-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
-      styled-jsx: 5.1.6(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-fb9a90fa48-20240614)
+      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-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)
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      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-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-dom: 19.0.0-rc-f38c22b244-20240704(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-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:
Author	SHA1	Message	Date
Renovate Bot	2360e8a52d	Update dependency react to v19.0.0-rc-fb9a90fa48-20240614 Some checks failed Add copyright notice / copyright_notice (pull_request) Successful in 8m8s Details Check usage of free licenses / build-static-assets (pull_request) Successful in 2m31s Details Build Nginx-based docker image / build-static-assets (pull_request) Failing after 18m32s Details Playwright Tests / test (pull_request) Failing after 3m18s Details	2024-10-31 23:09:17 +00:00
bustikiller	266f0970a4	Merge pull request 'Define a dashboard summary mockup' (#71 ) from dashboard-summary into main All checks were successful Check usage of free licenses / build-static-assets (push) Successful in 30s Details Playwright Tests / test (push) Successful in 2m18s Details Build Nginx-based docker image / build-static-assets (push) Successful in 3m53s Details Reviewed-on: #71	2024-10-31 07:25:50 +00:00
Manuel Bustillo	510b3140fd	Add copyright notice All checks were successful Check usage of free licenses / build-static-assets (pull_request) Successful in 43s Details Add copyright notice / copyright_notice (pull_request) Successful in 1m12s Details Playwright Tests / test (pull_request) Successful in 4m13s Details Build Nginx-based docker image / build-static-assets (pull_request) Successful in 5m54s Details	2024-10-30 22:25:36 +00:00
Manuel Bustillo	d45ba871d8	Define a dashboard summary mockup All checks were successful Check usage of free licenses / build-static-assets (pull_request) Successful in 55s Details Add copyright notice / copyright_notice (pull_request) Successful in 1m8s Details Playwright Tests / test (pull_request) Successful in 3m41s Details Build Nginx-based docker image / build-static-assets (pull_request) Successful in 6m43s Details	2024-10-30 23:24:29 +01:00