michael/tickettracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine help UX and monthly close layout

Browse Source
This commit is contained in:
michael
2026-08-05 15:56:09 +02:00
parent 3b6f35e31a
commit f8574e5f39
5 changed files with 396 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/MonthlyClosePage.tsx
+18 -18
View File
@@ -92,7 +92,7 @@ function groupOpenSessions(sessions: StatisticsOpenSession[]) {
function OpenTicketItem({ group, month, onNavigate }: { group: OpenTicketGroup; month: string; onNavigate: (to: string) => void }) {
return (
<div className="flex min-h-32 flex-col justify-between gap-3 rounded-md border bg-background p-3">
<div className="flex min-h-36 flex-col justify-between gap-3 rounded-md border bg-background p-3">
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-2">
<span className="font-medium">{group.ticketNumber}</span>
@@ -126,7 +126,7 @@ function CrmDayItem({
const isAcknowledged = Boolean(item.acknowledged);
return (
<div className={`flex min-h-32 flex-col justify-between gap-3 rounded-md border bg-background p-3 ${isAcknowledged ? "opacity-75" : ""}`}>
<div className={`flex min-h-36 flex-col justify-between gap-3 rounded-md border bg-background p-3 ${isAcknowledged ? "opacity-75" : ""}`}>
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-2">
<span className="font-medium">{item.ticket_number}</span>
@@ -363,17 +363,27 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
<Card>
<CardHeader className="p-4">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div>
<CardTitle>Aufräumen</CardTitle>
<CardDescription>Alles, was für diesen Monat noch Aufmerksamkeit braucht.</CardDescription>
</div>
<HelpLink anchor="monatsabschluss" label="Hilfe zu offenen Bewertungen und Teamspace-Prüfpunkten" />
<div className="flex flex-wrap items-center gap-2">
<div className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-3 text-sm">
<Checkbox
checked={showAcknowledgedMissingCrm}
aria-label="Zur Kenntnis genommene Teamspace-Tage anzeigen"
onCheckedChange={(checked) => setShowAcknowledgedMissingCrm(checked === true)}
/>
<span>Zur Kenntnis anzeigen ({acknowledgedMissingCrmDays.length})</span>
</div>
<HelpLink anchor="monatsabschluss" label="Hilfe zu offenen Bewertungen und Teamspace-Prüfpunkten" />
</div>
</div>
</CardHeader>
<CardContent className="grid gap-4 px-4 pb-4 xl:grid-cols-2">
<section className="space-y-2">
<div className="flex items-center gap-2 text-sm font-medium">
<div className="flex min-h-8 items-center gap-2 text-sm font-medium">
<FileWarning className="size-4 text-muted-foreground" />
Offene Bewertungen
</div>
@@ -384,19 +394,9 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
</section>
<section className="space-y-2">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-2 text-sm font-medium">
<Sparkles className="size-4 text-muted-foreground" />
Tage ohne Teamspace-Wert
</div>
<div className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
<Checkbox
checked={showAcknowledgedMissingCrm}
aria-label="Zur Kenntnis genommene Teamspace-Tage anzeigen"
onCheckedChange={(checked) => setShowAcknowledgedMissingCrm(checked === true)}
/>
<span>Zur Kenntnis anzeigen ({acknowledgedMissingCrmDays.length})</span>
</div>
<div className="flex min-h-8 items-center gap-2 text-sm font-medium">
<Sparkles className="size-4 text-muted-foreground" />
Tage ohne Teamspace-Wert
</div>
{visibleMissingCrmDays.map((item) => (
<CrmDayItem