Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo
This commit is contained in:
PxlLoewe
44
apps/hub/app/(app)/_components/Header.tsx
Normal file
44
apps/hub/app/(app)/_components/Header.tsx
Normal 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
129
apps/hub/app/(app)/_components/stats.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,81 +1,35 @@
|
|||||||
import Link from "next/link";
|
"use client";
|
||||||
import { PaginatedTable } from "../_components/PaginatedTable";
|
|
||||||
import { Header } from "../_components/ui/Header";
|
import { useState } from "react";
|
||||||
|
import { Header } from "./_components/Header";
|
||||||
|
import { Stats } from "./_components/stats";
|
||||||
|
|
||||||
|
/*
|
||||||
|
✔️ Einlog-Zeit
|
||||||
|
✔️ Stats
|
||||||
|
✔️ Pilot / Disponent TODO: Selection persistent machen
|
||||||
|
Map - I dont know man, passt hier vielleicht nicht rein
|
||||||
|
Logbuch / Einsatzhistorie
|
||||||
|
Badges
|
||||||
|
Aktive Events / Mandatory Events
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [isChecked, setIsChecked] = useState(true);
|
||||||
|
|
||||||
|
const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setIsChecked(event.target.checked);
|
||||||
|
};
|
||||||
|
|
||||||
export default async function Home() {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header
|
||||||
<PaginatedTable
|
isChecked={isChecked}
|
||||||
rowsPerPage={10}
|
handleCheckboxChange={handleCheckboxChange}
|
||||||
prismaModel={"user"}
|
|
||||||
searchFields={[]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
header: "ID",
|
|
||||||
accessorKey: "id",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "Email",
|
|
||||||
accessorKey: "email",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "First Name",
|
|
||||||
accessorKey: "firstname",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "Last Name",
|
|
||||||
accessorKey: "lastname",
|
|
||||||
footer: "Total",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
Map
|
<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
|
||||||
<br />
|
<Stats isChecked={isChecked} />
|
||||||
Logbuch
|
</div>
|
||||||
<br />
|
|
||||||
Einlog-Zeit (7 Tage, total)
|
|
||||||
<br />
|
|
||||||
Stats
|
|
||||||
<br />
|
|
||||||
Badges
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
gd
|
|
||||||
<br />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -170,17 +170,11 @@ export const SocialForm = ({
|
|||||||
});
|
});
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<h2 className="card-title">
|
<h2 className="card-title mb-5">
|
||||||
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
|
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
|
||||||
</h2>
|
</h2>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div className="label">
|
|
||||||
<span className="label-text text-lg flex items-center gap-2">
|
|
||||||
<DiscordLogoIcon /> Discord
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{discordAccount ? (
|
{discordAccount ? (
|
||||||
<Button
|
<Button
|
||||||
className="btn-success btn-block btn-outline group transition-all duration-0 hover:btn-error"
|
className="btn-success btn-block btn-outline group transition-all duration-0 hover:btn-error"
|
||||||
|
|||||||
@@ -16,11 +16,6 @@ export const VerticalNav = () => {
|
|||||||
<HomeIcon /> Dashboard
|
<HomeIcon /> Dashboard
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<Link href="/profile">
|
|
||||||
<PersonIcon /> Profile
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<Link href="/events">
|
<Link href="/events">
|
||||||
<RocketIcon />
|
<RocketIcon />
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export const Header = () => {
|
|
||||||
const session = useSession();
|
|
||||||
return (
|
|
||||||
<header className="flex justify-between items-center p-4">
|
|
||||||
<h1 className="text-2xl font-bold">Hub</h1>
|
|
||||||
<div>
|
|
||||||
{session.status === "authenticated" ? (
|
|
||||||
<p>{session.data?.user.firstname}</p>
|
|
||||||
) : (
|
|
||||||
<Link href="/login">
|
|
||||||
<button className="btn">Login</button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user