PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Dashboard Stats

Browse Source
This commit is contained in:
Nicolas
2025-02-28 03:10:48 +01:00
parent c5b8a7c4cb
commit cda2dec67c
13 changed files with 202 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/hub/app/(app)/_components/Header.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { PlaneIcon, Workflow } from "lucide-react";
import { useSession } from "next-auth/react";
interface HeaderProps {
isChecked: boolean;
handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => {
const session = useSession();
console.log(session);
return (
<header className="flex justify-between items-center p-4">
<h1 className="text-2xl font-bold">
Hallo,{" "}
{session.status === "authenticated"
? session.data?.user.firstname
: "<username>"}
{"!"}
</h1>
<div>
<div className="tooltip" data-tip="Disponent / Pilot">
<label className="toggle text-base-content">
<input
type="checkbox"
checked={isChecked}
onChange={handleCheckboxChange}
/>
<Workflow
className="w-4 h-4"
viewBox="0 0 24 24"
aria-label="enabled"
/>
<PlaneIcon
className="w-4 h-4"
viewBox="0 0 24 24"
aria-label="disabled"
/>
</label>
</div>
</div>
</header>
);
};

129
apps/hub/app/(app)/_components/stats.tsx Normal file
View File

@@ -0,0 +1,129 @@
import { PlaneIcon } from "lucide-react";
interface StatsProps {
isChecked: boolean;
}
export const Stats = ({ isChecked }: StatsProps) => {
return isChecked ? PilotStats() : DispoStats();
};
export const PilotStats = (): JSX.Element => {
return (
<div className="stats shadow">
<div className="stat">
<div className="stat-figure text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block h-8 w-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</div>
<div className="stat-title">Einsätze geflogen</div>
<div className="stat-value text-primary">127</div>
<div className="stat-desc">Du bist damit unter den top 5%!</div>
</div>
<div className="stat">
<div className="stat-figure text-secondary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block h-8 w-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
></path>
</svg>
</div>
<div className="stat-title">Pilot Login Zeit</div>
<div className="stat-value text-secondary">35h 12m</div>
<div className="stat-desc">Mehr als 58% aller anderen User!</div>
</div>
<div className="stat">
<div className="stat-figure text-info">
<PlaneIcon className="w-8 h-8" />
</div>
<div className="stat-value text-info">Christoph 31</div>
<div className="stat-title">
War bisher dein Rettungsmittel der Wahl
</div>
<div className="stat-desc text-secondary">
87 Stationen warten noch auf dich!
</div>
</div>
</div>
);
};
export const DispoStats = (): JSX.Element => {
return (
<div className="stats shadow">
<div className="stat">
<div className="stat-figure text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block h-8 w-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</div>
<div className="stat-title">Einsätze disponiert</div>
<div className="stat-value text-primary">578</div>
<div className="stat-desc">Du bist damit unter den top 9%!</div>
</div>
<div className="stat">
<div className="stat-figure text-secondary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block h-8 w-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
></path>
</svg>
</div>
<div className="stat-title">Disponent Login Zeit</div>
<div className="stat-value text-secondary">53h 12m</div>
<div className="stat-desc">Mehr als 69% aller anderen User!</div>
</div>
<div className="stat">
<div className="stat-figure text-info">
<PlaneIcon className="w-8 h-8" />
</div>
<div className="stat-value text-info">Christoph Berlin</div>
<div className="stat-title">Wurde von dir am meisten Disponiert</div>
<div className="stat-desc text-secondary">
43 Stationen warten auf deine Einsätze!
</div>
</div>
</div>
);
};