henry/AnnasRechnungsManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: added admin panel and archiv mandates

Browse Source
This commit is contained in:
hwinkel
2026-03-13 10:58:44 +01:00
parent a742d79457
commit 3a2a94ec19
32 changed files with 2023 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/layout/topbar.tsx
+86 -38
View File
@@ -1,5 +1,5 @@
import { useMatches, useLocation, Link, Form } from "react-router";
import { ChevronRight, LayoutDashboard, LogOut } from "lucide-react";
import { ChevronRight, LayoutDashboard, LogOut, Shield, Archive } from "lucide-react";
interface Breadcrumb {
label: string;
@@ -24,7 +24,13 @@ function getInitials(name?: string | null): string {
return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
}
export function Topbar({ userName }: { userName?: string | null }) {
export function Topbar({
userName,
userRole,
}: {
userName?: string | null;
userRole?: string | null;
}) {
const matches = useMatches();
const location = useLocation();
const isOnDashboard = location.pathname === "/";
@@ -85,10 +91,31 @@ export function Topbar({ userName }: { userName?: string | null }) {
)}
</nav>
{/* Dashboard Button */}
{!isOnDashboard && (
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", flexShrink: 0 }}>
{/* Dashboard Button */}
{!isOnDashboard && (
<Link
to="/"
style={{
display: "flex",
alignItems: "center",
gap: "0.375rem",
fontSize: "0.875rem",
color: "#64748b",
textDecoration: "none",
padding: "0.375rem 0.75rem",
borderRadius: "0.375rem",
border: "1px solid #e2e8f0",
}}
>
<LayoutDashboard className="h-4 w-4" />
Dashboard
</Link>
)}
{/* Archiv Link */}
<Link
to="/"
to="/archiv"
style={{
display: "flex",
alignItems: "center",
@@ -99,53 +126,74 @@ export function Topbar({ userName }: { userName?: string | null }) {
padding: "0.375rem 0.75rem",
borderRadius: "0.375rem",
border: "1px solid #e2e8f0",
flexShrink: 0,
}}
>
<LayoutDashboard className="h-4 w-4" />
Dashboard
<Archive className="h-4 w-4" />
Archiv
</Link>
)}
{/* User + Logout */}
{userName && (
<div style={{ display: "flex", alignItems: "center", gap: "0.625rem", marginLeft: "1rem", flexShrink: 0 }}>
<span style={{ fontSize: "0.875rem", color: "#64748b" }}>{userName}</span>
<div
{/* Admin Link (only for admins) */}
{userRole === "ADMIN" && (
<Link
to="/admin/users"
style={{
width: "2rem",
height: "2rem",
borderRadius: "9999px",
background: "linear-gradient(135deg, #818cf8, #7c3aed)",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#ffffff",
fontSize: "0.75rem",
fontWeight: 700,
gap: "0.375rem",
fontSize: "0.875rem",
color: "#6366f1",
textDecoration: "none",
padding: "0.375rem 0.75rem",
borderRadius: "0.375rem",
border: "1px solid #e0e7ff",
background: "#eef2ff",
}}
>
{getInitials(userName)}
</div>
<Form method="post" action="/logout">
<button
type="submit"
title="Abmelden"
<Shield className="h-4 w-4" />
Admin
</Link>
)}
{/* User + Logout */}
{userName && (
<div style={{ display: "flex", alignItems: "center", gap: "0.625rem", marginLeft: "0.25rem" }}>
<span style={{ fontSize: "0.875rem", color: "#64748b" }}>{userName}</span>
<div
style={{
width: "2rem",
height: "2rem",
borderRadius: "9999px",
background: "linear-gradient(135deg, #818cf8, #7c3aed)",
display: "flex",
alignItems: "center",
background: "none",
border: "none",
cursor: "pointer",
color: "#94a3b8",
padding: "0.25rem",
justifyContent: "center",
color: "#ffffff",
fontSize: "0.75rem",
fontWeight: 700,
}}
>
<LogOut style={{ width: "1rem", height: "1rem" }} />
</button>
</Form>
</div>
)}
{getInitials(userName)}
</div>
<Form method="post" action="/logout">
<button
type="submit"
title="Abmelden"
style={{
display: "flex",
alignItems: "center",
background: "none",
border: "none",
cursor: "pointer",
color: "#94a3b8",
padding: "0.25rem",
}}
>
<LogOut style={{ width: "1rem", height: "1rem" }} />
</button>
</Form>
</div>
)}
</div>
</header>
);
}