admin.schubert/Validation_Suite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(navigation): add prominent validation quickstart action

Browse source
This commit is contained in:
Schubert Ferenc 2026-07-11 18:02:53 +02:00
parent 0bbcaba211
commit 9c6b184e39
28614 changed files with 4356173 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

83
validation-suite/frontend/atlas/components/app-shell.tsx
View file

@ -3,6 +3,7 @@
import {
Building2,
ClipboardCheck,
ClipboardPlus,
FileArchive,
Gauge,
LayoutDashboard,
@ -18,6 +19,9 @@ import { useEffect } from "react";
import { useAuth } from "@/components/auth";
import { BrandLogo } from "@/components/brand/brand-logo";
const QUICKSTART_HREF = "/validations/quick-start";
const quickstartRoles = ["admin", "pruefer", "mitarbeiter"];
const navigation = [
{ href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ href: "/customers", label: "Kunden", icon: Building2 },
@ -30,10 +34,23 @@ const navigation = [
{ href: "/users", label: "Benutzer", icon: Shield, adminOnly: true }
];
function canStartValidation(role?: string) {
return role ? quickstartRoles.includes(role) : false;
}
function isActiveRoute(pathname: string, href: string) {
if (href === "/validations") {
return pathname === href || (pathname.startsWith(`${href}/`) && pathname !== QUICKSTART_HREF);
}
return pathname === href || pathname.startsWith(`${href}/`);
}
export function AppShell({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const router = useRouter();
const auth = useAuth();
const showQuickstart = canStartValidation(auth.user?.role);
const quickstartActive = pathname === QUICKSTART_HREF;
useEffect(() => {
if (auth.user?.must_change_password && pathname !== "/profile/security") {
@ -43,21 +60,79 @@ export function AppShell({ children }: { children: React.ReactNode }) {
return (
<div className="min-h-screen bg-background text-text">
<aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface px-5 py-6 lg:block">
<div className="mb-8">
<header className="sticky top-0 z-40 border-b border-border bg-surface/95 px-4 py-4 shadow-soft backdrop-blur lg:hidden">
<div className="flex items-center justify-between gap-3">
<BrandLogo compact />
</div>
<nav className="space-y-1">
{showQuickstart ? (
<Link
href={QUICKSTART_HREF}
aria-current={quickstartActive ? "page" : undefined}
className={`mt-4 flex min-h-12 w-full items-center justify-center gap-3 rounded-lg border px-4 text-sm font-bold shadow-soft transition hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[0.98] ${
quickstartActive
? "border-primary-dark bg-primary-dark text-white"
: "border-primary bg-primary text-white hover:bg-primary-dark"
}`}
>
<ClipboardPlus className="h-5 w-5" />
<span>Neue Validierung starten</span>
</Link>
) : null}
<nav className="mt-4 flex gap-2 overflow-x-auto pb-1">
{navigation.map((item, index) => {
const Icon = item.icon;
if ("adminOnly" in item && item.adminOnly && auth.user?.role !== "admin") {
return null;
}
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
const active = isActiveRoute(pathname, item.href);
return (
<Link
key={`${item.label}-mobile-${index}`}
href={item.href}
aria-current={active ? "page" : undefined}
className={`flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition hover:shadow-soft focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[0.98] ${
active
? "border-accent bg-accent/35 text-primary-dark"
: "border-border bg-white text-text-light hover:bg-background hover:text-text"
}`}
>
<Icon className="h-4 w-4" />
<span>{item.label}</span>
</Link>
);
})}
</nav>
</header>
<aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface px-5 py-6 lg:block">
<div className="mb-8">
<BrandLogo compact />
</div>
{showQuickstart ? (
<Link
href={QUICKSTART_HREF}
aria-current={quickstartActive ? "page" : undefined}
className={`mb-6 flex min-h-12 w-full items-center justify-center gap-3 rounded-lg border px-4 text-sm font-bold shadow-soft transition hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[0.98] ${
quickstartActive
? "border-primary-dark bg-primary-dark text-white"
: "border-primary bg-primary text-white hover:bg-primary-dark"
}`}
>
<ClipboardPlus className="h-5 w-5" />
<span>Neue Validierung starten</span>
</Link>
) : null}
<nav className="space-y-1 pb-20">
{navigation.map((item, index) => {
const Icon = item.icon;
if ("adminOnly" in item && item.adminOnly && auth.user?.role !== "admin") {
return null;
}
const active = isActiveRoute(pathname, item.href);
return (
<Link
key={`${item.label}-${index}`}
href={item.href}
aria-current={active ? "page" : undefined}
className={`flex h-11 items-center gap-3 rounded-lg px-3 text-sm font-medium transition hover:shadow-soft active:scale-[0.98] ${
active ? "bg-accent/35 text-primary-dark" : "text-text-light hover:bg-background hover:text-text"
}`}