bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Load dashboard information from the backend #150

Merged
bustikiller merged 2 commits from dashboard into main 2024-12-11 07:45:08 +00:00
Conversation 0 Commits 2 Files Changed 5 +78 -45
5 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/[slug]/dashboard/page.tsx
View File

@ -1,9 +1,26 @@
/* Copyright (C) 2024 Manuel Bustillo*/ /* 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 GlobalSummary from '@/app/ui/dashboard/global-summary';
import { useEffect, useState } from 'react';
export default function Page() { 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} />
); );
} }

20
app/lib/definitions.ts
View File

@ -1,5 +1,6 @@
/* Copyright (C) 2024 Manuel Bustillo*/ /* Copyright (C) 2024 Manuel Bustillo*/
import { AttendanceSummary } from "./group";
import { Guest } from "./guest"; import { Guest } from "./guest";
export interface Entity { export interface Entity {
@ -38,3 +39,22 @@ export type Captcha = {
export type StructuredErrors = { export type StructuredErrors = {
[key: string]: string[] | string; [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;
}

4
app/ui/components/dashboard-cards.tsx
View File

@ -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, amount: string,
title: 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 ( return (
<div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}> <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} /> <Icon className="m-3 h-7 w-7" name={iconName} />

74
app/ui/dashboard/global-summary.tsx
View File

@ -1,45 +1,41 @@
/* Copyright (C) 2024 Manuel Bustillo*/ /* Copyright (C) 2024 Manuel Bustillo*/
import { GlobalSummary } from '@/app/lib/definitions';
import { MainCard, SecondaryCard } from '../components/dashboard-cards'; 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>
); <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>
);
} }

2
app/ui/dashboard/sidenav.tsx
View File

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