Initial TicketTracker release
This commit is contained in:
@@ -0,0 +1,708 @@
|
||||
import {
|
||||
BarChart3,
|
||||
CheckCircle2,
|
||||
Command,
|
||||
LayoutGrid,
|
||||
LogOut,
|
||||
Moon,
|
||||
Pause,
|
||||
Play,
|
||||
Plus,
|
||||
Repeat,
|
||||
Search,
|
||||
Shield,
|
||||
Sun,
|
||||
Timer,
|
||||
UserCog,
|
||||
UserCircle,
|
||||
} from "lucide-react";
|
||||
import { FormEvent, MouseEvent, useEffect, useMemo, useState } from "react";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
|
||||
|
||||
import { cn } from "./lib/utils";
|
||||
import { ApiError, getCurrentUser, logout, lookupTicket } from "./api";
|
||||
import { formatTimer } from "./format";
|
||||
import { activeElapsedMs, pauseEntry, readStoredTimers, resumeEntry, storageKeyForUser, ticketPattern, type TimerEntry } from "./timers";
|
||||
import { AdminUsersPage } from "./views/AdminUsersPage";
|
||||
import { AnalysisPage } from "./views/AnalysisPage";
|
||||
import { LoginPage } from "./views/LoginPage";
|
||||
import { ProfilePage } from "./views/ProfilePage";
|
||||
import { RecurringBillingsPage } from "./views/RecurringBillingsPage";
|
||||
import { TicketDetailPage } from "./views/TicketDetailPage";
|
||||
import { TimerPage } from "./views/TimerPage";
|
||||
import type { AuthUser, PeriodType } from "./types";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
function routeFromPath(pathname: string) {
|
||||
const periodTicketMatch = pathname.match(/^\/analysis\/(month|day)\/([^/]+)\/tickets\/(\d+)$/);
|
||||
|
||||
if (periodTicketMatch) {
|
||||
return {
|
||||
page: "ticket" as const,
|
||||
periodType: periodTicketMatch[1] as PeriodType,
|
||||
period: periodTicketMatch[2],
|
||||
ticketId: periodTicketMatch[3],
|
||||
};
|
||||
}
|
||||
|
||||
const legacyTicketMatch = pathname.match(/^\/analysis\/(\d{4}-\d{2})\/tickets\/(\d+)$/);
|
||||
|
||||
if (legacyTicketMatch) {
|
||||
return {
|
||||
page: "ticket" as const,
|
||||
periodType: "month" as const,
|
||||
period: legacyTicketMatch[1],
|
||||
ticketId: legacyTicketMatch[2],
|
||||
};
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/analysis")) {
|
||||
return { page: "analysis" as const };
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/recurring")) {
|
||||
return { page: "recurring" as const };
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/admin/users")) {
|
||||
return { page: "admin-users" as const };
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/profile")) {
|
||||
return { page: "profile" as const };
|
||||
}
|
||||
|
||||
return { page: "timer" as const };
|
||||
}
|
||||
|
||||
function useAppRouter() {
|
||||
const [path, setPath] = useState("/timer");
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => setPath(window.location.pathname);
|
||||
update();
|
||||
window.addEventListener("popstate", update);
|
||||
return () => window.removeEventListener("popstate", update);
|
||||
}, []);
|
||||
|
||||
function navigate(to: string) {
|
||||
window.history.pushState({}, "", to);
|
||||
setPath(window.location.pathname);
|
||||
}
|
||||
|
||||
function navHandler(to: string) {
|
||||
return (event: MouseEvent<HTMLAnchorElement>) => {
|
||||
event.preventDefault();
|
||||
navigate(to);
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
path,
|
||||
route: useMemo(() => routeFromPath(path), [path]),
|
||||
navigate,
|
||||
navHandler,
|
||||
};
|
||||
}
|
||||
|
||||
function ThemeSwitcher() {
|
||||
const { themeMode, setPreference } = usePreferencesStore(
|
||||
useShallow((state) => ({
|
||||
themeMode: state.values.theme_mode,
|
||||
setPreference: state.setPreference,
|
||||
})),
|
||||
);
|
||||
|
||||
function cycleTheme() {
|
||||
setPreference("theme_mode", themeMode === "dark" ? "light" : "dark");
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="default" size="icon" aria-label="Farbschema wechseln" onClick={cycleTheme}>
|
||||
<Sun className="hidden dark:block" />
|
||||
<Moon className="block dark:hidden" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
type QuickTimerStarterProps = {
|
||||
className?: string;
|
||||
inputId: string;
|
||||
onStartTimer: (ticketNumber: string) => Promise<boolean>;
|
||||
};
|
||||
|
||||
function QuickTimerStarter({ className, inputId, onStartTimer }: QuickTimerStarterProps) {
|
||||
const [ticketNumber, setTicketNumber] = useState("");
|
||||
const trimmedTicketNumber = ticketNumber.trim();
|
||||
const hasInvalidTicket = trimmedTicketNumber.length > 0 && !ticketPattern.test(trimmedTicketNumber);
|
||||
|
||||
async function submit(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
|
||||
if (await onStartTimer(trimmedTicketNumber)) {
|
||||
setTicketNumber("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className={cn("flex min-w-0 items-center gap-2", className)} onSubmit={submit}>
|
||||
<label className="sr-only" htmlFor={inputId}>
|
||||
Ticketnummer fuer neuen Timer
|
||||
</label>
|
||||
<Input
|
||||
id={inputId}
|
||||
className={cn("h-8 min-w-0 bg-background", hasInvalidTicket && "border-destructive focus-visible:border-destructive")}
|
||||
placeholder="Ticket#123456"
|
||||
value={ticketNumber}
|
||||
onChange={(event) => setTicketNumber(event.currentTarget.value)}
|
||||
/>
|
||||
<Button type="submit" size="sm" className="h-8 shrink-0">
|
||||
<Plus className="size-3.5" />
|
||||
<span className="hidden sm:inline">Timer starten</span>
|
||||
<span className="sm:hidden">Start</span>
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
type SidebarTimersProps = {
|
||||
timers: TimerEntry[];
|
||||
selectedTimerId: string | null;
|
||||
setSelectedTimerId: Dispatch<SetStateAction<string | null>>;
|
||||
setTimers: Dispatch<SetStateAction<TimerEntry[]>>;
|
||||
tick: number;
|
||||
onOpenTimer: () => void;
|
||||
};
|
||||
|
||||
function SidebarTimers({ timers, selectedTimerId, setSelectedTimerId, setTimers, tick, onOpenTimer }: SidebarTimersProps) {
|
||||
const sortedTimers = useMemo(
|
||||
() =>
|
||||
[...timers].sort((first, second) => {
|
||||
if (first.phase === second.phase) {
|
||||
return first.ticketNumber.localeCompare(second.ticketNumber);
|
||||
}
|
||||
|
||||
return first.phase === "running" ? -1 : 1;
|
||||
}),
|
||||
[timers],
|
||||
);
|
||||
const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
|
||||
|
||||
function toggleTimer(timerId: string) {
|
||||
const timer = timers.find((entry) => entry.id === timerId);
|
||||
|
||||
if (!timer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
setSelectedTimerId(timerId);
|
||||
setTimers((current) =>
|
||||
current.map((entry) => {
|
||||
if (entry.id !== timerId) {
|
||||
return pauseEntry(entry, now);
|
||||
}
|
||||
|
||||
return timer.phase === "running" ? pauseEntry(entry, now) : resumeEntry(entry, now);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarGroup className="pt-0 group-data-[collapsible=icon]:hidden">
|
||||
<SidebarGroupLabel className="h-6 px-2 text-xs">Timer</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<div className="mx-2 rounded-md border bg-card/70 p-2 shadow-xs">
|
||||
<div className="mb-1 flex items-center justify-between gap-2">
|
||||
<span className="truncate text-xs font-medium text-muted-foreground">
|
||||
{runningTimer ? "Aktuell aktiv" : timers.length > 0 ? "Bereit" : "Kein Timer"}
|
||||
</span>
|
||||
{runningTimer ? <span className="size-2 rounded-full bg-emerald-500" aria-hidden="true" /> : null}
|
||||
</div>
|
||||
|
||||
{sortedTimers.length === 0 ? (
|
||||
<p className="px-1 py-1 text-xs text-muted-foreground">Noch keine Timer gestartet.</p>
|
||||
) : (
|
||||
<div className="max-h-52 space-y-1 overflow-y-auto pr-1">
|
||||
{sortedTimers.map((timer) => {
|
||||
const elapsed = Math.floor(activeElapsedMs(timer, tick) / 1000);
|
||||
const isSelected = selectedTimerId === timer.id;
|
||||
const isRunning = timer.phase === "running";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={timer.id}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-md border px-2 py-1.5",
|
||||
isSelected ? "border-primary/55 bg-accent/35" : "border-transparent bg-background/60",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-0 flex-1 text-left"
|
||||
onClick={() => {
|
||||
setSelectedTimerId(timer.id);
|
||||
onOpenTimer();
|
||||
}}
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-1.5">
|
||||
<span className={cn("size-1.5 rounded-full", isRunning ? "bg-emerald-500" : "bg-muted-foreground/50")} />
|
||||
<span className="truncate text-xs font-medium">{timer.ticketNumber}</span>
|
||||
</span>
|
||||
{timer.organizationName ? (
|
||||
<span className="block truncate text-[11px] leading-4 text-muted-foreground">
|
||||
{timer.organizationName}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="block font-mono text-[11px] font-semibold leading-4 tracking-normal text-muted-foreground">
|
||||
{formatTimer(elapsed)}
|
||||
</span>
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant={isRunning ? "secondary" : "ghost"}
|
||||
className="size-7 shrink-0"
|
||||
onClick={() => toggleTimer(timer.id)}
|
||||
aria-label={isRunning ? "Timer pausieren" : "Timer aktivieren"}
|
||||
>
|
||||
{isRunning ? <Pause className="size-3.5" /> : <Play className="size-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const { path, route, navHandler, navigate } = useAppRouter();
|
||||
const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
|
||||
const [authLoading, setAuthLoading] = useState(true);
|
||||
const [timers, setTimers] = useState<TimerEntry[]>([]);
|
||||
const [timersLoaded, setTimersLoaded] = useState(false);
|
||||
const [timerOwnerId, setTimerOwnerId] = useState<string | null>(null);
|
||||
const [selectedTimerId, setSelectedTimerId] = useState<string | null>(null);
|
||||
const [tick, setTick] = useState(Date.now());
|
||||
|
||||
useEffect(() => {
|
||||
async function loadUser() {
|
||||
try {
|
||||
const result = await getCurrentUser();
|
||||
setCurrentUser(result.user);
|
||||
} catch (error) {
|
||||
if (!(error instanceof ApiError && error.status === 401)) {
|
||||
console.error(error);
|
||||
}
|
||||
setCurrentUser(null);
|
||||
} finally {
|
||||
setAuthLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
void loadUser();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser) {
|
||||
setTimers([]);
|
||||
setSelectedTimerId(null);
|
||||
setTimerOwnerId(null);
|
||||
setTimersLoaded(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setTimers(readStoredTimers(currentUser.id));
|
||||
setTimerOwnerId(currentUser.id);
|
||||
setTimersLoaded(true);
|
||||
}, [currentUser]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser || !timersLoaded || timerOwnerId !== currentUser.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem(storageKeyForUser(currentUser.id), JSON.stringify(timers));
|
||||
|
||||
if (timers.length === 0) {
|
||||
setSelectedTimerId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedTimerId || !timers.some((timer) => timer.id === selectedTimerId)) {
|
||||
setSelectedTimerId(timers[0].id);
|
||||
}
|
||||
}, [currentUser, timers, selectedTimerId, timersLoaded, timerOwnerId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser || !timersLoaded || timerOwnerId !== currentUser.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timersToHydrate = timers.filter((timer) => !timer.ticketLookupDone);
|
||||
|
||||
if (timersToHydrate.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
async function hydrateTimers() {
|
||||
const results = await Promise.all(
|
||||
timersToHydrate.map(async (timer) => {
|
||||
try {
|
||||
const result = await lookupTicket(timer.ticketNumber);
|
||||
return {
|
||||
id: timer.id,
|
||||
organizationName: result.ticket?.organization_name ?? result.ticket?.customer_name ?? null,
|
||||
workType: result.ticket?.work_type ?? null
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
id: timer.id,
|
||||
organizationName: null,
|
||||
workType: null
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimers((current) =>
|
||||
current.map((timer) => {
|
||||
const result = results.find((entry) => entry.id === timer.id);
|
||||
|
||||
if (!result) {
|
||||
return timer;
|
||||
}
|
||||
|
||||
return {
|
||||
...timer,
|
||||
organizationName: result.organizationName,
|
||||
workType: result.workType,
|
||||
ticketLookupDone: true
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
void hydrateTimers();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentUser, timers, timersLoaded, timerOwnerId]);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = window.setInterval(() => setTick(Date.now()), 500);
|
||||
return () => window.clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
async function startQuickTimer(rawTicketNumber: string) {
|
||||
const ticketNumber = rawTicketNumber.trim();
|
||||
|
||||
if (!ticketPattern.test(ticketNumber)) {
|
||||
toast.error("Ticketnummer prüfen", {
|
||||
description: "Das Format muss Ticket#XXXXXX sein."
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const existingTimer = timers.find((timer) => timer.ticketNumber === ticketNumber);
|
||||
const now = Date.now();
|
||||
|
||||
if (existingTimer) {
|
||||
setTimers((current) =>
|
||||
current.map((timer) => (timer.id === existingTimer.id ? resumeEntry(timer, now) : pauseEntry(timer, now)))
|
||||
);
|
||||
setSelectedTimerId(existingTimer.id);
|
||||
toast.info("Bestehender Timer aktiviert", {
|
||||
description: ticketNumber
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
const ticketResult = await lookupTicket(ticketNumber).catch(() => ({ ticket: null }));
|
||||
|
||||
const newTimer: TimerEntry = {
|
||||
id: crypto.randomUUID(),
|
||||
ticketNumber,
|
||||
organizationName: ticketResult.ticket?.organization_name ?? ticketResult.ticket?.customer_name ?? null,
|
||||
workType: ticketResult.ticket?.work_type ?? null,
|
||||
ticketLookupDone: true,
|
||||
startedAt: now,
|
||||
pausedTotalMs: 0,
|
||||
pausedAt: null,
|
||||
phase: "running"
|
||||
};
|
||||
|
||||
setTimers((current) => [...current.map((timer) => pauseEntry(timer, now)), newTimer]);
|
||||
setSelectedTimerId(newTimer.id);
|
||||
toast.success("Timer gestartet", {
|
||||
description: ticketNumber
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await logout().catch(() => undefined);
|
||||
setCurrentUser(null);
|
||||
navigate("/timer");
|
||||
}
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<main className="grid min-h-screen place-items-center bg-background p-4 text-sm text-muted-foreground">
|
||||
TicketTracker wird geladen...
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!currentUser) {
|
||||
return <LoginPage onLogin={setCurrentUser} />;
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ href: "/timer", label: "Timer", icon: Timer, active: path.startsWith("/timer") || path === "/" },
|
||||
{ href: "/analysis", label: "Auswertung", icon: BarChart3, active: path.startsWith("/analysis") },
|
||||
{ href: "/recurring", label: "Fixe Abrechnung", icon: Repeat, active: path.startsWith("/recurring") },
|
||||
{ href: "/profile", label: "Profil", icon: UserCog, active: path.startsWith("/profile") },
|
||||
...(currentUser.role === "admin"
|
||||
? [{ href: "/admin/users", label: "Benutzer", icon: Shield, active: path.startsWith("/admin/users") }]
|
||||
: []),
|
||||
];
|
||||
const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
|
||||
const runningElapsedSeconds = runningTimer ? Math.floor(activeElapsedMs(runningTimer, tick) / 1000) : 0;
|
||||
|
||||
return (
|
||||
<SidebarProvider
|
||||
defaultOpen
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": "16rem",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<Sidebar variant="sidebar" collapsible="icon">
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="/timer" onClick={navHandler("/timer")}>
|
||||
<Command />
|
||||
<span className="font-semibold text-base">TicketTracker</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent className="flex flex-col gap-2">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem className="flex items-center gap-2">
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
tooltip="Session starten"
|
||||
className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
|
||||
>
|
||||
<a href="/timer" onClick={navHandler("/timer")}>
|
||||
<Timer />
|
||||
<span>Session starten</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarTimers
|
||||
timers={timers}
|
||||
selectedTimerId={selectedTimerId}
|
||||
setSelectedTimerId={setSelectedTimerId}
|
||||
setTimers={setTimers}
|
||||
tick={tick}
|
||||
onOpenTimer={() => navigate("/timer")}
|
||||
/>
|
||||
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Workflows</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{navItems.map((item) => (
|
||||
<SidebarMenuItem key={item.href}>
|
||||
<SidebarMenuButton asChild tooltip={item.label} isActive={item.active}>
|
||||
<a href={item.href} onClick={navHandler(item.href)}>
|
||||
<item.icon />
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter>
|
||||
<div className="mx-2 rounded-lg border bg-card p-3 text-sm shadow-xs group-data-[collapsible=icon]:hidden">
|
||||
<div className="mb-2 flex items-center gap-2 font-medium">
|
||||
<CheckCircle2 className="size-4 text-muted-foreground" />
|
||||
Abschluss
|
||||
</div>
|
||||
<p className="text-muted-foreground">Offene Sessions findest du in Tages- und Monatsansicht.</p>
|
||||
</div>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton tooltip="Worklog">
|
||||
<UserCircle />
|
||||
<span>Worklog lokal</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
|
||||
<SidebarInset
|
||||
className={cn(
|
||||
"[html[data-content-layout=centered]_&>*]:mx-auto",
|
||||
"[html[data-content-layout=centered]_&>*]:w-full",
|
||||
"[html[data-content-layout=centered]_&>*]:max-w-screen-2xl",
|
||||
"[--dashboard-header-height:--spacing(12)]",
|
||||
"min-w-0 overflow-x-clip",
|
||||
)}
|
||||
>
|
||||
<header className="sticky top-0 z-50 flex h-12 shrink-0 items-center gap-2 border-b bg-background/80 backdrop-blur-md">
|
||||
<div className="flex w-full items-center justify-between px-3 sm:px-5 lg:px-6">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mx-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center" />
|
||||
<div className="hidden h-8 min-w-[160px] items-center gap-2 rounded-md px-2 text-sm text-muted-foreground lg:flex">
|
||||
<Search className="size-4" />
|
||||
<span>{currentUser.display_name}</span>
|
||||
</div>
|
||||
{runningTimer ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-8 min-w-0 items-center gap-1.5 rounded-md border bg-card px-2 text-xs shadow-xs"
|
||||
onClick={() => {
|
||||
setSelectedTimerId(runningTimer.id);
|
||||
navigate("/timer");
|
||||
}}
|
||||
>
|
||||
<span className="size-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
|
||||
<span className="hidden max-w-28 truncate font-medium sm:inline">{runningTimer.ticketNumber}</span>
|
||||
<span className="font-mono font-semibold tracking-normal">{formatTimer(runningElapsedSeconds)}</span>
|
||||
</button>
|
||||
) : null}
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
<LayoutGrid className="size-4" />
|
||||
<span className="truncate text-sm font-semibold">TicketTracker</span>
|
||||
</div>
|
||||
</div>
|
||||
<QuickTimerStarter
|
||||
inputId="quick-ticket-number-desktop"
|
||||
className="mx-3 hidden max-w-md flex-1 md:flex"
|
||||
onStartTimer={startQuickTimer}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeSwitcher />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="rounded-full border bg-background">
|
||||
<UserCircle className="size-5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuLabel>
|
||||
<span className="block truncate">{currentUser.display_name}</span>
|
||||
<span className="block truncate text-xs font-normal text-muted-foreground">{currentUser.username}</span>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => navigate("/profile")}>
|
||||
<UserCog className="size-4" />
|
||||
Profil
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => void handleLogout()}>
|
||||
<LogOut className="size-4" />
|
||||
Abmelden
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="border-b bg-background/95 px-3 py-2 md:hidden">
|
||||
<QuickTimerStarter inputId="quick-ticket-number-mobile" onStartTimer={startQuickTimer} />
|
||||
</div>
|
||||
<main className="min-h-0 min-w-0 flex-1 overflow-x-hidden p-3 sm:p-4 md:p-5">
|
||||
<div className="mx-auto w-full max-w-[1180px]">
|
||||
{route.page === "timer" ? (
|
||||
<TimerPage
|
||||
timers={timers}
|
||||
setTimers={setTimers}
|
||||
selectedTimerId={selectedTimerId}
|
||||
setSelectedTimerId={setSelectedTimerId}
|
||||
tick={tick}
|
||||
/>
|
||||
) : null}
|
||||
{route.page === "analysis" ? <AnalysisPage onNavigate={navigate} /> : null}
|
||||
{route.page === "recurring" ? <RecurringBillingsPage /> : null}
|
||||
{route.page === "profile" ? <ProfilePage currentUser={currentUser} onUserUpdated={setCurrentUser} /> : null}
|
||||
{route.page === "admin-users" && currentUser.role === "admin" ? <AdminUsersPage currentUser={currentUser} /> : null}
|
||||
{route.page === "admin-users" && currentUser.role !== "admin" ? (
|
||||
<TimerPage
|
||||
timers={timers}
|
||||
setTimers={setTimers}
|
||||
selectedTimerId={selectedTimerId}
|
||||
setSelectedTimerId={setSelectedTimerId}
|
||||
tick={tick}
|
||||
/>
|
||||
) : null}
|
||||
{route.page === "ticket" ? (
|
||||
<TicketDetailPage periodType={route.periodType} period={route.period} ticketId={route.ticketId} onNavigate={navigate} />
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user